Feat: 일정 상세 페이지 추가

.env.development

@@ -4,3 +4,6 @@ NEXT_PUBLIC_REST_API_KEY_NAVER = API_KEY_HERE
 NEXT_PUBLIC_CLIENT_SECRET_NAVER = API_KEY_HERE
 NEXT_PUBLIC_REDIRECT_URI_NAVER = API_KEY_HERE
 NEXT_PUBLIC_IMAGE_API_KEY=API_KEY_HERE
+NEXT_PUBLIC_NODE_ENV = API_KEY_HERE
+NEXT_PUBLIC_MOCK = API_KEY_HERE
+NEXT_PUBLIC_BASE_URL = API_KEY_HERE

pages/api/findSchedule.ts

@@ -0,0 +1,34 @@
+import { CardType } from "@findSchedule/components/Card";
+import axios from "axios";
+
+interface scheduleListParams {
+  theme: string;
+  dateStart: string;
+  dateEnd: string;
+  expense?: number;
+  location: string;
+  personnel?: number;
+  keywordOption?: number;
+  keyword?: string;
+}
+
+export const findSchedule = async (params?: scheduleListParams) => {
+  try {
+    const res = await axios.get<CardType[]>(
+      `${process.env.NEXT_PUBLIC_BASE_URL}/schedule/list`,
+      {
+        params,
+      },
+    );
+
+    if (res.status === 200) {
+      console.log("res.data", res.data);
+      return res.data;
+    } else {
+      return [];
+    }
+  } catch (error) {
+    console.error("API 호출 중 오류 발생:", error);
+    throw error; // 오류를 호출자에게 전달
+  }
+};

pages/detail/[id].tsx

@@ -0,0 +1,72 @@
+import { CommentWithReComments } from "@detail/CommentBox";
+import Detail from "@detail/Detail";
+import { hostInfo } from "@detail/HostInfo";
+import { participateInfoType } from "@detail/ParticipationStatus";
+import axios from "axios";
+import { GetServerSideProps } from "next";
+import React from "react";
+
+export interface DetailCard {
+  id: number;
+  hostInfo: hostInfo;
+  img: string;
+  theme: string;
+  title: string;
+  content: string;
+  location: string;
+  dateStart: string;
+  dateEnd: string;
+  expense: number;
+  tags: string[];
+  like: number;
+  likeStatus: boolean;
+  comment: number;
+  scrap: number;
+  isParticipate: number; // 0: 미신청, 1: 신청완료 (대기중), 2: 참여
+  scrapStatus: boolean;
+  recruitStart: string;
+  recruitEnd: string;
+  applicantNum: number;
+  participateNum: number;
+  participateCapacity: number;
+  participateInfos: participateInfoType[];
+  createdAt: string;
+  comments: CommentWithReComments[];
+}
+
+interface DetailProps {
+  detailData: DetailCard;
+}
+
+const detail = ({ detailData }: DetailProps) => {
+  return (
+    <div className="flex justify-center mt-[78px]">
+      <Detail detailData={detailData}></Detail>
+    </div>
+  );
+};
+
+export default detail;
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { id } = context.params || {};
+
+  try {
+    const response = await axios.get(
+      `${process.env.NEXT_PUBLIC_BASE_URL}/getCardDetail`,
+      { params: { id } },
+    );
+
+    const detailData = response.data;
+    console.log("datas", detailData);
+
+    return {
+      props: { detailData },
+    };
+  } catch (error) {
+    console.error("Error fetching data", error);
+    return {
+      props: { data: "" },
+    };
+  }
+};

pages/find-schedule/index.tsx

@@ -1,12 +1,38 @@
+import { CardType } from "@findSchedule/components/Card";
 import Page from "findSchedule/components/Page";
+import { GetServerSideProps } from "next";
 import React from "react";
+import { findSchedule } from "@pages/api/findSchedule";
 
-const index = () => {
+interface FindPageProps {
+  defaultCardList: CardType[];
+}
+
+const index = ({ defaultCardList }: FindPageProps) => {
   return (
     <div className="flex justify-center mt-[78px]">
-      <Page />
+      <Page defaultCardList={defaultCardList} />
     </div>
   );
 };
 
 export default index;
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  try {
+    const res = await findSchedule();
+
+    return {
+      props: {
+        defaultCardList: res,
+      },
+    };
+  } catch (error) {
+    console.error("Error fetching data1", error);
+    return {
+      props: {
+        defaultCardList: [],
+      },
+    };
+  }
+};