DetailPage api 연결

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
@@ -35,7 +36,7 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-*storybook.log
 
 # storybook
-/storybook-static
+/storybook-static
+*storybook.log

next.config.mjs

@@ -30,13 +30,5 @@ const nextConfig = {
       },
     ];
   },
-  async rewrites() {
-    return [
-      {
-        source: '/:path*',
-        destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}/:path*`,
-      },
-    ];
-  },
 };
 export default nextConfig;

src/_apis/detail/get-crew-detail.ts

@@ -1,13 +1,14 @@
 import { fetchApi } from '@/src/utils/api';
 import { CrewDetail } from '@/src/types/crew-card';
 
-export async function getCrewDetail(): Promise<{ data: CrewDetail }> {
-  const response = await fetchApi<CrewDetail[]>('/crewDetail', {
+export async function getCrewDetail(id: number): Promise<CrewDetail> {
+  const url = `/api/crews/${id}`;
+
+  const response = await fetchApi<{ data: CrewDetail }>(url, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
     },
   });
-
-  return { data: response[0] };
+  return response.data;
 }

src/_apis/detail/get-gathering-detail.ts

@@ -0,0 +1,17 @@
+import { fetchApi } from '@/src/utils/api';
+import { GatheringDetailType } from '@/src/types/gathering-data';
+
+export async function GetGatheringDetail(
+  crewId: number,
+  gatheringId: number,
+): Promise<GatheringDetailType> {
+  const url = `/api/crews/${crewId}/gatherings/${gatheringId}`;
+
+  const response = await fetchApi<{ data: GatheringDetailType }>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return response.data;
+}

src/_apis/detail/get-gathering-list.ts

@@ -1,11 +1,14 @@
 import { fetchApi } from '@/src/utils/api';
 import { GatheringType } from '@/src/types/gathering-data';
 
-export async function getGatheringList(): Promise<GatheringType[]> {
-  return fetchApi<GatheringType[]>('/gatherings', {
+export async function getGatheringList(id: number): Promise<GatheringType[]> {
+  const url = `/api/crews/${id}/gatherings`;
+
+  const response = await fetchApi<{ data: GatheringType[] }>(url, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
     },
   });
+  return response.data;
 }

src/_queries/detail/crew-detail-queries.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { getCrewDetail } from '@/src/_apis/detail/get-crew-detail';
+
+export function useGetCrewDetailQuery(id: number) {
+  return useQuery({
+    queryKey: ['crewDetail', id],
+    queryFn: () => getCrewDetail(id),
+  });
+}

src/_queries/detail/gathering-detail-queries.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { GetGatheringDetail } from '@/src/_apis/detail/get-gathering-detail';
+
+export function useGetGatheringDetailQuery(crewId: number, gatheringId: number) {
+  return useQuery({
+    queryKey: ['gatheringDetail', crewId, gatheringId],
+    queryFn: () => GetGatheringDetail(crewId, gatheringId),
+  });
+}

src/_queries/detail/gathering-list-queries.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import { getGatheringList } from '@/src/_apis/detail/get-gathering-list';
+import { GatheringType } from '@/src/types/gathering-data';
+
+export function useGetGatheringListQuery(id: number) {
+  return useQuery<GatheringType[], Error>({
+    queryKey: ['gatheringList', id],
+    queryFn: () => getGatheringList(id),
+    enabled: !!id,
+  });
+}

src/app/(crew)/crew/detail/[id]/_components/detail-crew-section.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useGetCrewDetailQuery } from '@/src/_queries/detail/crew-detail-queries';
+import { ApiError } from '@/src/utils/api';
+import DetailCrewCard from '@/src/components/common/crew-list/detail-crew-card';
+
+interface DetailCrewSectionProps {
+  id: number;
+}
+
+export default function DetailCrewSection({ id }: DetailCrewSectionProps) {
+  const { data, isLoading, error } = useGetCrewDetailQuery(id);
+
+  // TODO: 추후 에러 처리 수정
+  if (isLoading) return <p>Loading...</p>;
+
+  if (error) {
+    if (error instanceof ApiError) {
+      try {
+        const errorData = JSON.parse(error.message);
+
+        if (errorData.status === 'NOT_FOUND') {
+          return <p>크루 정보를 찾을 수 없습니다</p>;
+        }
+      } catch {
+        return <p>{`Error ${error.status}: ${error.message}`}</p>;
+      }
+    }
+    return <p>데이터 통신에 실패했습니다.</p>;
+  }
+
+  // data가 있을 때만 DetailCrewCard를 렌더링
+  return data ? <DetailCrewCard data={data} /> : null;
+}

src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useGetGatheringListQuery } from '@/src/_queries/detail/gathering-list-queries';
+import GatheringCardCarousel from '@/src/components/gathering-list/gathering-card-carousel';
+
+interface GatheringListSectionProps {
+  id: number;
+}
+
+export default function GatheringListSection({ id }: GatheringListSectionProps) {
+  const { data: gatheringList, isLoading, error } = useGetGatheringListQuery(id);
+
+  if (isLoading) return <p>로딩 중...</p>;
+
+  if (error) return <p>데이터를 불러오는 데 실패했습니다: {error.message}</p>;
+
+  if (!gatheringList || gatheringList.length === 0) return <p>데이터가 없습니다.</p>;
+
+  return <GatheringCardCarousel gatheringData={gatheringList} crewId={id} />;
+}

src/app/(crew)/crew/detail/[id]/page.tsx

@@ -1,40 +1,42 @@
-import { getCrewDetail } from '@/src/_apis/detail/get-crew-detail';
 import { getGatheringList } from '@/src/_apis/detail/get-gathering-list';
-import DetailCrewCard from '@/src/components/common/crew-list/detail-crew-card';
-import GatheringCardCarousel from '@/src/components/gathering-list/gathering-card-carousel';
 import CreateGathering from './_components/create-gathering';
+import DetailCrewSection from './_components/detail-crew-section';
+import GatheringListSection from './_components/gathering-list-section';
 import CrewReviewSection from './_components/review-section';
 
-export default async function CrewDetailPage() {
-  const { data: crewDetail } = await getCrewDetail();
-  const gatheringList = await getGatheringList();
+interface CrewDetailPageProps {
+  params: { id: string };
+}
+
+export default async function CrewDetailPage({ params }: CrewDetailPageProps) {
+  const id = Number(params.id);
 
   return (
     <div className="mx-auto min-h-screen w-full max-w-full overflow-x-hidden">
       <div className="mx-3 my-7 space-y-10 md:mx-7 md:my-11 lg:mx-11 lg:my-16">
         <section className="w-full">
           <article>
-            {/* //TODO: 추후 confirmed부분 수정 */}
-            <DetailCrewCard isConfirmed={false} {...crewDetail} />
+            <DetailCrewSection id={id} />
           </article>
         </section>
         <section className="w-full space-y-6">
           <article className="space-y-6">
             <div className="flex items-center justify-between">
               <h2 className="text-2xl font-semibold">크루 약속</h2>
-              <CreateGathering />
+              {/* <CreateGathering /> */}
             </div>
             <div className="flex w-full">
-              <GatheringCardCarousel gatheringData={gatheringList} />
+              <GatheringListSection id={id} />
             </div>
           </article>
         </section>
-        <section className="w-full">
+        {/* // TODO: 리뷰 완성되면 수정 */}
+        {/* <section className="w-full">
           <article className="space-y-6">
             <h2 className="text-2xl font-semibold">크루 리뷰</h2>
             <CrewReviewSection />
           </article>
-        </section>
+        </section> */}
       </div>
     </div>
   );

src/components/common/crew-list/detail-crew-card.stories.tsx

@@ -1,10 +1,9 @@
-// CrewCard 스토리북 파일
 import type { Meta, StoryObj } from '@storybook/react';
-import CrewCard from './detail-crew-card';
+import DetailCrewCard from './detail-crew-card';
 
 const meta: Meta = {
-  title: 'Components/CrewCardList/CrewCard',
-  component: CrewCard,
+  title: 'Components/CrewCardList/DetailCrewCard',
+  component: DetailCrewCard,
   parameters: {
     layout: 'centered',
     nextjs: {
@@ -13,50 +12,67 @@ const meta: Meta = {
   },
   tags: ['autodocs'],
   args: {
-    id: 0,
-    title: '같이 물장구칠사람',
-    mainLocation: '대전광역시',
-    subLocation: '유성구',
-    imageUrl: 'https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg',
-    totalGatheringCount: 5, // 기본 값 추가
-    crewMembers: [
-      {
-        id: 1,
-        nickname: 'John',
-        profileImageUrl: 'https://i.pinimg.com/564x/e2/25/bb/e225bb492dc7a20a549f3c0abec28eb8.jpg',
-      },
-      {
-        id: 2,
-        nickname: 'Jane',
-        profileImageUrl: 'https://i.pinimg.com/564x/e2/25/bb/e225bb492dc7a20a549f3c0abec28eb8.jpg',
-      },
-    ], // 기본 프로필 리스트 추가
+    data: {
+      id: 1,
+      title: '같이 물장구칠사람',
+      mainLocation: '대전광역시',
+      subLocation: '유성구',
+      participantCount: 10,
+      totalCount: 20,
+      confirmed: true,
+      imageUrl: 'https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg',
+      totalGatheringCount: 5,
+      crewMembers: [
+        {
+          id: 1,
+          nickname: 'John',
+          profileImageUrl:
+            'https://i.pinimg.com/564x/e2/25/bb/e225bb492dc7a20a549f3c0abec28eb8.jpg',
+        },
+        {
+          id: 2,
+          nickname: 'Jane',
+          profileImageUrl:
+            'https://i.pinimg.com/564x/e2/25/bb/e225bb492dc7a20a549f3c0abec28eb8.jpg',
+        },
+      ],
+    },
   },
-} satisfies Meta<typeof CrewCard>;
+} satisfies Meta<typeof DetailCrewCard>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    totalCount: 20,
-    participantCount: 10,
-    isConfirmed: true,
+    data: {
+      id: 1,
+      title: '같이 물장구칠사람',
+      mainLocation: '대전광역시',
+      subLocation: '유성구',
+      participantCount: 10,
+      totalCount: 20,
+      confirmed: true,
+      imageUrl: 'https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg',
+      totalGatheringCount: 5,
+      crewMembers: [], // 빈 배열이라도 기본값으로 설정
+    },
   },
 };
 
 export const NotConfirmed: Story = {
   args: {
-    totalCount: 10,
-    participantCount: 1,
-    isConfirmed: false,
-  },
-};
-
-export const Fulled: Story = {
-  args: {
-    totalCount: 5,
-    participantCount: 5,
-    isConfirmed: true,
+    data: {
+      id: 2,
+      title: '물장구 동호회',
+      mainLocation: '서울특별시',
+      subLocation: '강남구',
+      participantCount: 5,
+      totalCount: 15,
+      confirmed: false,
+      imageUrl: 'https://i.pinimg.com/564x/e2/25/bb/e225bb492dc7a20a549f3c0abec28eb8.jpg',
+      totalGatheringCount: 3,
+      crewMembers: [],
+    },
   },
 };