Merge branch 'develop' into Feat/98/CrewAPI

Author: yulrang

.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} />;
+}