Feat/105/my crew api 연결

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

@@ -0,0 +1,24 @@
+import { fetchApi } from '@/src/utils/api';
+import { MyCrewListResponse, PageableTypes } from '@/src/types/crew-card';
+
+export async function getMyCrewCreationList(pageable: PageableTypes) {
+  const { page, size, sort = ['string'] } = pageable;
+
+  try {
+    const response = await fetchApi<MyCrewListResponse>(
+      `/api/crews/hosted?page=${page}&size=${size}&sort=${sort}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include', // 인증 정보를 요청에 포함
+      },
+    );
+    return response;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return undefined;
+  }
+}

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

@@ -0,0 +1,24 @@
+import { fetchApi } from '@/src/utils/api';
+import { MyCrewListResponse, PageableTypes } from '@/src/types/crew-card';
+
+export async function getMyCrewParticipationList(pageable: PageableTypes) {
+  const { page, size, sort = ['string'] } = pageable;
+
+  try {
+    const response = await fetchApi<MyCrewListResponse>(
+      `/api/crews/joined?page=${page}&size=${size}&sort=${sort}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include', // 인증 정보를 요청에 포함
+      },
+    );
+    return response;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return undefined;
+  }
+}

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

@@ -1,6 +1,5 @@
-import { UseInfiniteQueryOptions } from '@tanstack/react-query';
-import { ConditionTypes, MainCrewListResponse, PageableTypes } from '@/src/types/crew-card';
-import { getCrewList } from '../_apis/crew/get-crew-list';
+import { getCrewList } from '@/src/_apis/crew/crew-list';
+import { ConditionTypes, MainCrewListResponse } from '@/src/types/crew-card';
 
 export function useGetCrewListQuery(condition: ConditionTypes) {
   return {
@@ -15,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-creation-list-query.ts

@@ -0,0 +1,17 @@
+import { getMyCrewCreationList } from '@/src/_apis/crew/my-crew-creation-list';
+import { MyCrewListResponse } from '@/src/types/crew-card';
+
+export function useGetMyCrewCreationQuery() {
+  return {
+    queryKey: ['my-crew-creation'],
+    queryFn: ({ pageParam = 0 }) =>
+      getMyCrewCreationList({ 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-participation-list-query.ts

@@ -0,0 +1,19 @@
+import { getMyCrewParticipationList } from '@/src/_apis/crew/my-crew-participation-list';
+import { MyCrewListResponse } from '@/src/types/crew-card';
+
+export function useGetMyCrewParticipationQuery() {
+  return {
+    queryKey: ['my-crew-participation'],
+    queryFn: ({ pageParam = 0 }) =>
+      getMyCrewParticipationList({ 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/creation/page.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useGetMyCrewCreationQuery } from '@/src/_queries/crew/my-crew-creation-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(useGetMyCrewCreationQuery());
+  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/participation' },
+    { label: '내가 만든 크루', id: 'made-crew', route: '/my-crew/creation' },
+  ];
+  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,44 +1,5 @@
-'use client';
-
-import { useState } from 'react';
-import { useGetCrewListQuery } from '@/src/_queries/crew-queries';
-import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
-import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
-import Tabs from '@/src/components/common/tab';
-import { MyCrewListResponse } from '@/src/types/crew-card';
+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/participation');
 }

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

@@ -0,0 +1,19 @@
+'use client';
+
+import { useGetMyCrewParticipationQuery } from '@/src/_queries/crew/my-crew-participation-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(useGetMyCrewParticipationQuery());
+  return (
+    <div>
+      <CrewCardList
+        inWhere="my-crew"
+        data={data ?? { pages: [], pageParams: [] }}
+        ref={ref}
+        isFetchingNextPage={isFetchingNextPage}
+      />
+    </div>
+  );
+}

src/app/(crew)/page.tsx

@@ -1,4 +1,4 @@
-import { getCrewList } from '@/src/_apis/crew/get-crew-list';
+import { getCrewList } from '@/src/_apis/crew/crew-list';
 import FindCrew from '../_components/find-crew/find-crew';
 
 export default async function HomePage() {

src/app/_components/find-crew/find-crew.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { Divider, TextInput } from '@mantine/core';
 import { InfiniteData } from '@tanstack/react-query';
-import { useGetCrewListQuery } from '@/src/_queries/crew-queries';
+import { useGetCrewListQuery } from '@/src/_queries/crew/crew-list-queries';
 import regionData from '@/src/data/region.json';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import CategoryContainer from '@/src/app/_components/category/category-container';

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { InfiniteData } from '@tanstack/react-query';
-import { useGetCrewListQuery } from '@/src/_queries/crew-queries';
+import { useGetCrewListQuery } from '@/src/_queries/crew/crew-list-queries';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import ClientProvider from '@/src/components/client-provider';
 import { MainCrewListResponse } from '@/src/types/crew-card';

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 | undefined>;
+interface CrewCardListProps {
+  data: InfiniteData<MainCrewListResponse | MyCrewListResponse | undefined>;
   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?.data as MyCrewList[])
+      ? 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({

src/types/crew-card.d.ts

@@ -5,7 +5,6 @@ export interface ConditionTypes {
   subCategory: string;
   sortType: 'LATEST' | 'POPULAR';
 }
-
 export interface PageableTypes {
   page: number;
   size: number;
@@ -65,6 +64,6 @@ export interface MyCrewList {
 }
 
 export interface MyCrewListResponse {
-  data: MyCrewList[];
+  content: MyCrewList[] | undefined;
   hasNext: boolean;
 }