Feat/105/my crew api 연결

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

@@ -0,0 +1,27 @@
+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;
+
+  try {
+    const response: { data: MyCrewListResponse } = await fetchApi(
+      `/api/crews/hosted?page=${page}&size=${size}&sort=${sort}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include', // 인증 정보를 요청에 포함
+      },
+    );
+    if (!response.data) {
+      throw new Error('Failed to get my crew hosted list');
+    }
+    return response.data;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+  return null;
+}

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

@@ -0,0 +1,27 @@
+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;
+
+  try {
+    const response: { data: MyCrewListResponse } = await fetchApi(
+      `/api/crews/joined?page=${page}&size=${size}&sort=${sort}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include', // 인증 정보를 요청에 포함
+      },
+    );
+    if (!response.data) {
+      throw new Error('Failed to get my crew joined list');
+    }
+    return response.data;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+  return null;
+}

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

@@ -1,7 +1,14 @@
+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) {
+export function useGetCrewListQuery({
+  condition,
+  pageable,
+}: {
+  condition: ConditionTypes;
+  pageable: PageableTypes;
+}) {
+  const { size, sort = ['string'] } = pageable;
   return {
     queryKey: [
       condition.keyword,
@@ -11,14 +18,16 @@ export function useGetCrewListQuery(condition: ConditionTypes) {
       condition.sortType,
     ],
     queryFn: ({ pageParam = 0 }) =>
-      getCrewList(condition, { page: pageParam, size: 6, sort: [condition.sortType] }).then(
-        (response) => {
-          if (response === undefined) {
-            throw new Error('Response is null');
-          }
-          return response;
-        },
-      ),
+      getCrewList(condition, {
+        page: pageParam,
+        size,
+        sort,
+      }).then((response) => {
+        if (response === undefined) {
+          throw new Error('Response is undefined');
+        }
+        return response;
+      }),
     getNextPageParam: (lastPage: MainCrewListResponse, allPages: MainCrewListResponse[]) =>
       lastPage.hasNext ? allPages.length : undefined,
   };

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

@@ -0,0 +1,18 @@
+import { getMyCrewHostedList } from '@/src/_apis/crew/my-crew-hosted-list';
+import { MyCrewListResponse, PageableTypes } from '@/src/types/crew-card';
+
+export function useGetMyCrewHostedQuery({ pageable }: { pageable: PageableTypes }) {
+  const { size, sort = ['string'] } = pageable;
+  return {
+    queryKey: ['myCrewHosted'],
+    queryFn: ({ pageParam = 0 }) =>
+      getMyCrewHostedList({ page: pageParam, size, sort }).then((response) => {
+        if (response === undefined) {
+          throw new Error('크루 목록을 불러오는데 실패했습니다.');
+        }
+        return response;
+      }),
+    getNextPageParam: (lastPage: MyCrewListResponse, allPages: MyCrewListResponse[]) =>
+      lastPage.hasNext ? allPages.length : undefined,
+  };
+}

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

@@ -0,0 +1,18 @@
+import { getMyCrewJoinedList } from '@/src/_apis/crew/my-crew-joined-list';
+import { MyCrewListResponse, PageableTypes } from '@/src/types/crew-card';
+
+export function useGetMyCrewJoinedQuery({ pageable }: { pageable: PageableTypes }) {
+  const { size, sort = ['string'] } = pageable;
+  return {
+    queryKey: ['myCrewJoined'],
+    queryFn: ({ pageParam = 0 }) =>
+      getMyCrewJoinedList({ page: pageParam, size, sort }).then((response) => {
+        if (response === undefined) {
+          throw new Error('크루 목록을 불러오는데 실패했습니다.');
+        }
+        return response;
+      }),
+    getNextPageParam: (lastPage: MyCrewListResponse, allPages: MyCrewListResponse[]) =>
+      lastPage.hasNext ? allPages.length : undefined,
+  };
+}

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

@@ -0,0 +1,23 @@
+'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({
+      pageable: { page: 0, size: 6, sort: ['createdAt,desc'] },
+    }),
+  );
+  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,23 @@
+'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({
+      pageable: { page: 0, size: 6, sort: ['createdAt,desc'] },
+    }),
+  );
+  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/app/(crew)/page.tsx

@@ -37,11 +37,14 @@ export default function HomePage() {
 
   const { data, ref, isFetchingNextPage } = useInfiniteScroll(
     useGetCrewListQuery({
-      keyword: search,
-      mainLocation: handleRegionChange(region),
-      mainCategory,
-      subCategory,
-      sortType: sort === 'latest' ? 'LATEST' : 'POPULAR',
+      condition: {
+        keyword: search,
+        mainLocation: handleRegionChange(region),
+        mainCategory,
+        subCategory,
+        sortType: sort === 'latest' ? 'LATEST' : 'POPULAR',
+      },
+      pageable: { page: 0, size: 6, sort: ['createdAt,desc'] },
     }),
   );
 

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

@@ -1,7 +1,6 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useAuthStore } from '@/src/store/use-auth-store';
-import Button from '@/src/components/common/input/button';
 import ImgHeroCrew from '@/public/assets/icons/ic-dumbbell.svg';
 
 export default function HeroCrew() {

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

@@ -32,11 +32,14 @@ type Story = StoryObj<typeof meta>;
 function RenderCrewCardList() {
   const { data, ref, isFetchingNextPage } = useInfiniteScroll(
     useGetCrewListQuery({
-      keyword: '',
-      mainLocation: '',
-      mainCategory: '',
-      subCategory: '',
-      sortType: 'LATEST',
+      condition: {
+        keyword: '',
+        mainLocation: '',
+        mainCategory: '',
+        subCategory: '',
+        sortType: 'LATEST',
+      },
+      pageable: { page: 0, size: 6, sort: ['createdAt,desc'] },
     }),
   );
 

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({
@@ -27,9 +27,7 @@ export default function CrewCard({
   inWhere,
 }: CrewCardProps) {
   const [prefetched, setPrefetched] = useState(new Set());
-  // NOTE: api연결 후 되돌리기
-  // const CREWPAGE = `/crew/detail/${id}`;
-  const CREWPAGE = `/crew/detail/1`;
+  const CREWPAGE = `/crew/detail/${id}`;
   const router = useRouter();
 
   const handleCardClick = () => {

src/components/common/input/pop-over-calendar/index.tsx

@@ -36,9 +36,14 @@ export default function PopOverCalendar({ value, onChange }: PopOverProps) {
       <Popover.Target>
         <Button
           type="button"
-          onClick={opened ? close : open}
-          onFocus={() => setInputTheme('dark')}
-          onBlur={() => setInputTheme('white')}
+          onFocus={() => {
+            setInputTheme('dark');
+            if (!opened) open();
+          }}
+          onBlur={() => {
+            setInputTheme('white');
+            if (opened) close();
+          }}
           className="flex h-11 items-center justify-between rounded-xl border-0 bg-white px-3 py-2.5 text-base font-medium text-gray-800 hover:bg-white hover:text-gray-800 focus:bg-black focus:text-white"
         >
           <span>날짜 선택</span>

src/components/common/input/text-input/index.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import React from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
 import {
   TextInput as MantineTextInput,