Feat/98/crew api 연결

.github/workflows/ci.yml

@@ -77,3 +77,5 @@ jobs:
 
       - name: Build test
         run: npm run build
+        env:
+          NEXT_PUBLIC_API_BASE_URL: ${{secrets.NEXT_PUBLIC_API_BASE_URL}}

next.config.mjs

@@ -30,5 +30,14 @@ const nextConfig = {
       },
     ];
   },
+
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}/:path*`,
+      },
+    ];
+  },
 };
 export default nextConfig;

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,24 +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,
+): Promise<MainCrewListResponse> {
+  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}`,
+      `/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('크루 리스트를 불러오는데 실패했습니다.');
   }

src/_queries/crew-queries.tsx

@@ -1,20 +1,18 @@
-import { MainCrewList } from '@/src/types/crew-card';
+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] }),
+    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

@@ -3,26 +3,38 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { Divider } from '@mantine/core';
-import { useGetCrewQuery } from '@/src/_queries/crew-queries';
+import { useGetCrewListQuery } 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 [mainCategory, setMainCategory] = useState('');
+  const [subCategory, setSubCategory] = useState('');
   const [sort, setSort] = useState<string | null>('latest');
-  const [region, setRegion] = useState<string | null>('all');
+  const [region, setRegion] = useState<string>('');
   const [search, setSearch] = useState('');
 
-  const { data, ref, isFetchingNextPage } =
-    useInfiniteScroll<MainCrewListResponse>(useGetCrewQuery());
+  const handleRegionChange = (newValue: string) => {
+    const selectedRegion = regionData.find((dataItem) => dataItem.main.value === newValue);
+    if (selectedRegion?.main.label === '지역 전체') return '';
+    return selectedRegion ? selectedRegion.main.label : '';
+  };
+
+  const { data, ref, isFetchingNextPage } = useInfiniteScroll(
+    useGetCrewListQuery({
+      keyword: search,
+      mainLocation: handleRegionChange(region),
+      mainCategory,
+      subCategory,
+      sortType: sort === 'latest' ? 'LATEST' : 'POPULAR',
+    }),
+  );
 
   return (
     <div className="py-8 md:py-12.5">
@@ -55,10 +67,12 @@ export default function Home() {
               name="region"
               variant="default"
               data={regionData.map((dataItem) => dataItem.main)}
-              placeholder="전체"
+              placeholder="지역 전체"
               value={region}
               className="w-[130px]"
-              onChange={setRegion}
+              onChange={(newValue) => {
+                setRegion(newValue as string);
+              }}
             />
             <DropDown
               name="sort"
@@ -70,7 +84,9 @@ export default function Home() {
               placeholder="최신순"
               value={sort}
               className="w-[130px]"
-              onChange={setSort}
+              onChange={(newValue) => {
+                setSort(newValue as string);
+              }}
             />
           </div>
         </div>

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>

src/components/client-provider.tsx

@@ -2,6 +2,7 @@
 
 import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental';
 
 export default function ClientProvider({ children }: { children: ReactNode }) {
@@ -16,6 +17,7 @@ export default function ClientProvider({ children }: { children: ReactNode }) {
 
   return (
     <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools initialIsOpen={false} />
       <ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration>
     </QueryClientProvider>
   );

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useGetCrewQuery } from '@/src/_queries/crew-queries';
+import { useGetCrewListQuery } from '@/src/_queries/crew-queries';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import ClientProvider from '@/src/components/client-provider';
 import { MainCrewListResponse } from '@/src/types/crew-card';
@@ -28,9 +28,15 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 function RenderCrewCardList() {
-  const { data, ref, isFetchingNextPage } =
-    useInfiniteScroll<MainCrewListResponse>(useGetCrewQuery());
-
+  const { data, ref, isFetchingNextPage } = useInfiniteScroll(
+    useGetCrewListQuery({
+      keyword: '',
+      mainLocation: '',
+      mainCategory: '',
+      subCategory: '',
+      sortType: 'LATEST',
+    }),
+  );
   return <CrewCardList data={data} ref={ref} isFetchingNextPage={isFetchingNextPage} />;
 }
 

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

@@ -32,7 +32,7 @@ function CrewCardList(
   const crewDataList =
     (inWhere === 'my-crew'
       ? data?.pages.flatMap((page) => page.data as MyCrewList[])
-      : data?.pages.flatMap((page) => page.data as MainCrewList[])) ?? [];
+      : data?.pages.flatMap((page) => page.content as MainCrewList[])) ?? [];
   const gridColsStyle = inWhere === 'my-crew' ? '' : 'lg:grid-cols-2';
 
   if (!crewDataList.length)
@@ -68,7 +68,7 @@ function CrewCardList(
                   : (inform as MainCrewList).totalGatheringCount
               }
               crewMembers={inWhere === 'my-crew' ? (inform as MyCrewList).crewMembers : undefined}
-              isConfirmed={inWhere !== 'my-crew' ? (inform as MainCrewList).isConfirmed : undefined}
+              isConfirmed={inWhere !== 'my-crew' && (inform as MainCrewList).isConfirmed}
             />
           </li>
         ))}