Feat/98/crew api 연결

package.json

@@ -50,6 +50,7 @@
     "@storybook/nextjs": "^8.3.5",
     "@storybook/react": "^8.3.5",
     "@storybook/testing-library": "^0.2.2",
+    "@tanstack/react-query-devtools": "^5.59.20",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "^20",
     "@types/react": "^18",

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

@@ -1,25 +1,25 @@
 import { fetchApi } from '@/src/utils/api';
-import { MainCrewList, MainCrewListResponse } from '@/src/types/crew-card';
+import { ConditionTypes, MainCrewListResponse, PageableTypes } from '@/src/types/crew-card';
+
+export async function getCrewList(condition: ConditionTypes, pageable: PageableTypes) {
+  const { keyword, mainLocation, mainCategory, subCategory, sortType } = condition;
+  const { page, size, sort = ['string'] } = pageable;
 
-export async function getCrewList(page: number, limit: number): Promise<MainCrewListResponse> {
   try {
     const response = await fetchApi<MainCrewListResponse>(
-      `/crews?_page=${page + 1}&_limit=${limit}`,
+      `/api/crews/search?keyword=${keyword}&mainLocation=${mainLocation}&mainCategory=${mainCategory}&subCategory=${subCategory}&sortType=${sortType}&page=${page}&size=${size}&sort=${sort}`,
       {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
         },
+        credentials: 'include', // 인증 정보를 요청에 포함
       },
     );
-    if (!Array.isArray(response)) {
-      throw new Error('서버 응답이 올바른 형식이 아닙니다.');
-    }
-    const data = response as MainCrewList[];
-    const hasNext = data.length === limit;
-
-    return { data, hasNext };
+    return response;
   } catch (error) {
-    throw new Error('크루 리스트를 불러오는데 실패했습니다.');
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return undefined;
   }
 }

src/_queries/crew-queries.tsx

@@ -1,20 +1,26 @@
-import { MainCrewList } from '@/src/types/crew-card';
+import { UseInfiniteQueryOptions } from '@tanstack/react-query';
+import { ConditionTypes, MainCrewListResponse, PageableTypes } from '@/src/types/crew-card';
 import { getCrewList } from '../_apis/crew/get-crew-list';
 
-export function useGetCrewQuery() {
-  interface QueryParams {
-    pageParam?: number;
-  }
-
-  interface Page {
-    hasNext: boolean;
-  }
-
+export function useGetCrewListQuery(condition: ConditionTypes) {
   return {
-    queryKey: ['crew'],
-    queryFn: ({ pageParam = 0 }: QueryParams) => getCrewList(pageParam, 3),
-    getNextPageParam: (lastPage: Page, allPages: Page[]) =>
-      lastPage.hasNext ? allPages.length + 1 : undefined,
-    select: (data: MainCrewList[]) => data, // 그대로 반환
+    queryKey: [
+      condition.keyword,
+      condition.mainLocation,
+      condition.mainCategory,
+      condition.subCategory,
+      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;
+        },
+      ),
+    getNextPageParam: (lastPage: MainCrewListResponse, allPages: MainCrewListResponse[]) =>
+      lastPage.hasNext ? allPages.length : undefined,
   };
 }

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { useGetCrewQuery } from '@/src/_queries/crew-queries';
+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';
@@ -17,7 +17,7 @@ export default function MyCrewPage() {
   // TODO: fetchCrewData 함수를 사용하여 데이터를 불러오기 : 파라미터 수정 필요
   // TODO: 리스트와는 다른 데이터를 사용해야해서 우선 주석처리 했습니다.
   // const { data, ref, isFetchingNextPage } =
-  //   useInfiniteScroll<MyCrewListResponse>(useGetCrewQuery());
+  //   useInfiniteScroll<MyCrewListResponse>(useGetCrewListQuery());
 
   return (
     <div className="py-8 md:py-12.5">

src/app/(crew)/page.tsx

@@ -1,83 +1,26 @@
-'use client';
+import { getCrewList } from '@/src/_apis/crew/get-crew-list';
+import FindCrew from '../_components/find-crew/find-crew';
 
-import { useState } from 'react';
-import Image from 'next/image';
-import { Divider } from '@mantine/core';
-import { useGetCrewQuery } from '@/src/_queries/crew-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';
-import HeroCrew from '@/src/app/_components/hero/hero-crew';
-import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
-import DropDown from '@/src/components/common/input/drop-down';
-import TextInput from '@/src/components/common/input/text-input';
-import { MainCrewListResponse } from '@/src/types/crew-card';
-import IcoSearch from '@/public/assets/icons/ic-search.svg';
-
-export default function Home() {
-  const [mainCategory, setMainCategory] = useState('cardio_strength');
-  const [subCategory, setSubCategory] = useState('running');
-  const [sort, setSort] = useState<string | null>('latest');
-  const [region, setRegion] = useState<string | null>('all');
-  const [search, setSearch] = useState('');
+export default async function HomePage() {
+  const initialData = await getCrewList(
+    {
+      keyword: '',
+      mainLocation: '',
+      mainCategory: '',
+      subCategory: '',
+      sortType: 'LATEST',
+    },
+    {
+      page: 0,
+      size: 6,
+      sort: ['LATEST'],
+    },
+  );
 
-  const { data, ref, isFetchingNextPage } =
-    useInfiniteScroll<MainCrewListResponse>(useGetCrewQuery());
+  const infiniteData = {
+    pages: [initialData],
+    pageParams: [],
+  };
 
-  return (
-    <div className="py-8 md:py-12.5">
-      <div className="flex flex-col px-3 md:px-8 lg:px-11.5">
-        <HeroCrew />
-        <CategoryContainer
-          mainCategory={mainCategory}
-          subCategory={subCategory}
-          setMainCategory={setMainCategory}
-          setSubCategory={setSubCategory}
-        />
-      </div>
-      <Divider mx={{ base: 0, md: 32, lg: 34 }} my={24} size={2} color="#E5E7EB" />
-      <div className="px-3 md:px-8 lg:px-11.5">
-        <div className="flex flex-col justify-between gap-2 md:flex-row md:gap-4">
-          <div className="flex-1">
-            <TextInput
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              leftSectionPointerEvents="none"
-              leftSection={
-                <Image src={IcoSearch} alt="search" width={21} height={21} className="-mr-4" />
-              }
-              placeholder="크루 이름, 위치를 검색하세요."
-              inputClassNames="w-full h-11 pl-12 placeholder:text-gray-500 font-pretendard text-base font-medium text-gray-800 rounded-xl"
-            />
-          </div>
-          <div className="flex-0 flex justify-between gap-2 md:basis-67 md:gap-4">
-            <DropDown
-              name="region"
-              variant="default"
-              data={regionData.map((dataItem) => dataItem.main)}
-              placeholder="전체"
-              value={region}
-              className="w-[130px]"
-              onChange={setRegion}
-            />
-            <DropDown
-              name="sort"
-              variant="sort"
-              data={[
-                { value: 'latest', label: '최신순' },
-                { value: 'best', label: '인기순' },
-              ]}
-              placeholder="최신순"
-              value={sort}
-              className="w-[130px]"
-              onChange={setSort}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="mt-8 px-3 md:px-8 lg:px-11.5">
-        <CrewCardList data={data} ref={ref} isFetchingNextPage={isFetchingNextPage} />
-      </div>
-    </div>
-  );
+  return <FindCrew initialData={infiniteData} />;
 }

src/app/_components/category/category-container/index.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import category from '@/src/data/category.json';
 import InternalCategory from '@/src/app/_components/category/internal-category';
 import MainCategory from '@/src/app/_components/category/main-category';
@@ -18,32 +16,26 @@ export default function CategoryContainer({
   setMainCategory,
   setSubCategory,
 }: CategoryContainerProps) {
-  const [categoryIndex, setCategoryIndex] = useState(0);
-
-  useEffect(() => {
-    if (subCategory !== category[categoryIndex].items[0].value) {
-      setSubCategory(category[categoryIndex].items[0].value);
-    }
-  }, [mainCategory, categoryIndex]);
-
-  useEffect(() => {
-    if (mainCategory !== category[categoryIndex].title.value) {
-      setMainCategory(category[categoryIndex].title.value);
-    }
-  }, [subCategory]);
+  const [categoryIndex, setCategoryIndex] = useState<number | null>(null);
 
   return (
     <div className="flex flex-col gap-2 md:gap-4">
       <MainCategory
         value={mainCategory}
         category={category}
-        onChange={setMainCategory}
+        onChange={(newValue) => {
+          setMainCategory(newValue);
+          setSubCategory('');
+        }}
         onHover={setCategoryIndex}
       />
       <InternalCategory
         value={subCategory}
-        category={category[categoryIndex].items}
-        onChange={setSubCategory}
+        category={category[categoryIndex ?? 0].items}
+        onChange={(newValue) => {
+          setSubCategory(newValue);
+          setMainCategory(category[categoryIndex ?? 0].title.label);
+        }}
       />
     </div>
   );

src/app/_components/category/internal-category/index.tsx

@@ -30,8 +30,8 @@ export default function InternalCategory({ value, category, onChange }: Internal
         <li key={item.label} className="snap-align-start flex">
           <Button
             type="button"
-            onClick={() => onChange(item.value)}
-            className={`${pathname?.includes(item.value ?? value) && 'bg-gray-900 text-white'} h-10 min-w-28 items-center justify-center text-nowrap rounded-xl bg-gray-100 px-5 py-2 text-center text-sm font-bold text-gray-400 transition-colors hover:bg-gray-900 hover:text-white md:h-11 md:text-lg`}
+            onClick={() => onChange(item.label)}
+            className={`${pathname?.includes(item.label ?? value) && 'bg-gray-900 text-white'} h-10 min-w-28 items-center justify-center text-nowrap rounded-xl bg-gray-100 px-5 py-2 text-center text-sm font-bold text-gray-400 transition-colors hover:bg-gray-900 hover:text-white md:h-11 md:text-lg`}
           >
             {item.label}
           </Button>

src/app/_components/category/main-category/index.tsx

@@ -62,8 +62,8 @@ export default function MainCategory({ value, category, onHover, onChange }: Mai
           >
             <Button
               onMouseEnter={() => handleHover(index)}
-              onClick={() => onChange(item.title.value)}
-              className={`${pathname?.includes(item.title.value ?? value) ? 'bg-blue-500' : ''} ${activeIndex === index ? 'text-blue-500' : 'text-gray-600'} flex flex-col items-center text-base font-semibold md:flex-row md:text-lg lg:text-xl lg:font-semibold`}
+              onClick={() => onChange(item.title.label)}
+              className={`${pathname?.includes(item.title.label ?? value) ? 'bg-blue-500' : ''} ${activeIndex === index ? 'text-blue-500' : 'text-gray-600'} flex flex-col items-center text-base font-semibold md:flex-row md:text-lg lg:text-xl lg:font-semibold`}
             >
               <h3 className="flex items-center gap-1 lg:gap-2">
                 <span className="flex">{item.title.label}</span>