Feat/105/my crew api 연결

src/_apis/crew/my-crew-hosted-list.ts

@@ -0,0 +1,18 @@
+import { fetchApi } from '@/src/utils/api';
+import { MyCrewListResponse, PageableTypes } from '@/src/types/crew-card';
+
+export async function getMyCrewHostedList(pageable: PageableTypes) {
+  const { page, size, sort = ['string'] } = pageable;
+
+  const response: { data: MyCrewListResponse } = await fetchApi(
+    `/api/crews/hosted?page=${page}&size=${size}&sort=${sort}`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include', // 인증 정보를 요청에 포함
+    },
+  );
+  return response.data;
+}

src/_apis/crew/my-crew-joined-list.ts

@@ -0,0 +1,18 @@
+import { fetchApi } from '@/src/utils/api';
+import { MyCrewListResponse, PageableTypes } from '@/src/types/crew-card';
+
+export async function getMyCrewJoinedList(pageable: PageableTypes) {
+  const { page, size, sort = ['string'] } = pageable;
+
+  const response: { data: MyCrewListResponse } = await fetchApi(
+    `/api/crews/joined?page=${page}&size=${size}&sort=${sort}`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include', // 인증 정보를 요청에 포함
+    },
+  );
+  return response.data;
+}

src/_queries/crew/crew-list-queries.tsx

@@ -1,5 +1,5 @@
+import { getCrewList } from '@/src/_apis/crew/crew-list';
 import { ConditionTypes, MainCrewListResponse, PageableTypes } from '@/src/types/crew-card';
-import { getCrewList } from '../../_apis/crew/crew-list';
 
 export function useGetCrewListQuery(condition: ConditionTypes) {
   return {
@@ -14,7 +14,7 @@ export function useGetCrewListQuery(condition: ConditionTypes) {
       getCrewList(condition, { page: pageParam, size: 6, sort: [condition.sortType] }).then(
         (response) => {
           if (response === undefined) {
-            throw new Error('Response is null');
+            throw new Error('Response is undefined');
           }
           return response;
         },

src/_queries/crew/my-crew-hosted-list-query.ts

@@ -0,0 +1,17 @@
+import { getMyCrewHostedList } from '@/src/_apis/crew/my-crew-hosted-list';
+import { MyCrewListResponse } from '@/src/types/crew-card';
+
+export function useGetMyCrewHostedQuery() {
+  return {
+    queryKey: ['my-crew-creation'],
+    queryFn: ({ pageParam = 0 }) =>
+      getMyCrewHostedList({ page: pageParam, size: 6, sort: ['string'] }).then((response) => {
+        if (response === undefined) {
+          throw new Error('Response is undefined');
+        }
+        return response;
+      }),
+    getNextPageParam: (lastPage: MyCrewListResponse, allPages: MyCrewListResponse[]) =>
+      lastPage.hasNext ? allPages.length : undefined,
+  };
+}

src/_queries/crew/my-crew-joined-list-query.ts

@@ -0,0 +1,17 @@
+import { getMyCrewJoinedList } from '@/src/_apis/crew/my-crew-joined-list';
+import { MyCrewListResponse } from '@/src/types/crew-card';
+
+export function useGetMyCrewJoinedQuery() {
+  return {
+    queryKey: ['my-crew-participation'],
+    queryFn: ({ pageParam = 0 }) =>
+      getMyCrewJoinedList({ page: pageParam, size: 6, sort: ['string'] }).then((response) => {
+        if (response === undefined) {
+          throw new Error('Response is undefined');
+        }
+        return response;
+      }),
+    getNextPageParam: (lastPage: MyCrewListResponse, allPages: MyCrewListResponse[]) =>
+      lastPage.hasNext ? allPages.length : undefined,
+  };
+}

src/app/(crew)/my-crew/hosted/page.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useGetMyCrewHostedQuery } from '@/src/_queries/crew/my-crew-hosted-list-query';
+import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
+import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
+
+export default function MyCrewParticipationPage() {
+  const { data, ref, isFetchingNextPage } = useInfiniteScroll(useGetMyCrewHostedQuery());
+  return (
+    <div>
+      <CrewCardList
+        inWhere="my-crew"
+        data={data ?? { pages: [], pageParams: [] }}
+        ref={ref}
+        isFetchingNextPage={isFetchingNextPage}
+      />
+    </div>
+  );
+}

src/app/(crew)/my-crew/joined/page.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useGetMyCrewJoinedQuery } from '@/src/_queries/crew/my-crew-joined-list-query';
+import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
+import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
+
+export default function MyCrewParticipationPage() {
+  const { data, ref, isFetchingNextPage } = useInfiniteScroll(useGetMyCrewJoinedQuery());
+  return (
+    <div>
+      <CrewCardList
+        inWhere="my-crew"
+        data={data ?? { pages: [], pageParams: [] }}
+        ref={ref}
+        isFetchingNextPage={isFetchingNextPage}
+      />
+    </div>
+  );
+}

src/app/(crew)/my-crew/layout.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { ReactNode, useEffect, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import Tabs from '@/src/components/common/tab';
+
+export default function MyCrewLayout({ children }: { children: ReactNode }) {
+  const router = useRouter();
+  const currentPath = usePathname();
+  const myCrewTabs = [
+    { label: '내가 참여한 크루', id: 'joined-crew', route: '/my-crew/joined' },
+    { label: '내가 만든 크루', id: 'hosted-crew', route: '/my-crew/hosted' },
+  ];
+  const [currentTab, setCurrentTab] = useState(myCrewTabs[0].id);
+
+  const handleTabClick = (id: string) => {
+    const targetRoute = myCrewTabs.find((tab) => tab.id === id)?.route;
+    if (targetRoute) router.push(targetRoute);
+  };
+
+  useEffect(() => {
+    const activeTabId = myCrewTabs.find((tab) => tab.route === currentPath)?.id;
+    if (activeTabId) setCurrentTab(activeTabId);
+  }, [currentPath]);
+
+  return (
+    <div className="py-8 md:py-12.5">
+      <div className="px-3 md:px-8 lg:px-11.5">
+        <Tabs
+          variant="default"
+          tabs={myCrewTabs}
+          activeTab={currentTab}
+          onTabClick={(id) => {
+            handleTabClick(id);
+          }}
+        />
+      </div>
+      <div className="mt-8 px-3 md:px-8 lg:px-11.5">{children}</div>
+    </div>
+  );
+}

src/app/(crew)/my-crew/page.tsx

@@ -1,40 +1,7 @@
 'use client';
 
-import { useState } from 'react';
-import Tabs from '@/src/components/common/tab';
+import { redirect } from 'next/navigation';
 
 export default function MyCrewPage() {
-  const myPageTabs = [
-    { label: '내가 참여한 크루', id: 'joined-crew' },
-    { label: '내가 만든 크루', id: 'made-crew' },
-  ];
-  const [currentTab, setCurrentTab] = useState(myPageTabs[0].id);
-
-  // TODO: fetchCrewData 함수를 사용하여 데이터를 불러오기 : 파라미터 수정 필요
-  // TODO: 리스트와는 다른 데이터를 사용해야해서 우선 주석처리 했습니다.
-  // const { data, ref, isFetchingNextPage } =
-  //   useInfiniteScroll<MyCrewListResponse>(useGetCrewListQuery());
-
-  return (
-    <div className="py-8 md:py-12.5">
-      <div className="px-3 md:px-8 lg:px-11.5">
-        <Tabs
-          variant="default"
-          tabs={myPageTabs}
-          activeTab={currentTab}
-          onTabClick={(id) => {
-            setCurrentTab(id);
-          }}
-        />
-      </div>
-      <div className="mt-8 px-3 md:px-8 lg:px-11.5">
-        {/* <CrewCardList
-          inWhere="my-crew"
-          data={data}
-          ref={ref}
-          isFetchingNextPage={isFetchingNextPage}
-        /> */}
-      </div>
-    </div>
-  );
+  redirect('/my-crew/joined');
 }

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

@@ -10,29 +10,21 @@ import {
 import CrewCard from './crew-card';
 
 // CrewCardListProps 타입을 구분하여 정의
-interface MainCrewCardListProps {
-  data: InfiniteData<MainCrewListResponse>;
+interface CrewCardListProps {
+  data: InfiniteData<MainCrewListResponse | MyCrewListResponse>;
   isFetchingNextPage: boolean;
-  inWhere?: undefined;
+  inWhere?: 'my-crew' | 'main-crew';
 }
 
-interface MyCrewCardListProps {
-  data: InfiniteData<MyCrewListResponse>;
-  isFetchingNextPage: boolean;
-  inWhere: 'my-crew';
-}
-
-// 유니온 타입으로 정의
-type CrewCardListProps = MainCrewCardListProps | MyCrewCardListProps;
-
 function CrewCardList(
   { data, isFetchingNextPage, inWhere }: CrewCardListProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const crewDataList =
     (inWhere === 'my-crew'
-      ? data?.pages.flatMap((page) => page?.content)
-      : data?.pages?.flatMap((page) => page?.content)) ?? [];
+      ? data?.pages.flatMap((page) => page?.content as MyCrewList[])
+      : data?.pages?.flatMap((page) => page?.content as MainCrewList[])) ?? [];
+
   const gridColsStyle = inWhere === 'my-crew' ? '' : 'lg:grid-cols-2';
 
   if (data?.pages[0] === undefined)

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

@@ -10,7 +10,7 @@ import IcoUser from '@/public/assets/icons/ic-user.svg';
 import Profiles from './profiles';
 
 interface CrewCardProps extends MainCrewList {
-  inWhere?: 'my-crew';
+  inWhere?: 'my-crew' | 'main-crew';
 }
 
 export default function CrewCard({