Feat/98/crew api 연결 : 제가올린것중 이것먼저 리뷰 부탁드립니다~!

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 '../../_apis/crew/crew-list';
 
 export function useGetCrewListQuery(condition: ConditionTypes) {
   return {

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

@@ -1,11 +1,7 @@
 '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';
 
 export default function MyCrewPage() {
   const myPageTabs = [

src/app/(crew)/page.tsx

@@ -1,26 +1,130 @@
-import { getCrewList } from '@/src/_apis/crew/get-crew-list';
-import FindCrew from '../_components/find-crew/find-crew';
+'use client';
 
-export default async function HomePage() {
-  const initialData = await getCrewList(
-    {
-      keyword: '',
-      mainLocation: '',
-      mainCategory: '',
-      subCategory: '',
-      sortType: 'LATEST',
-    },
-    {
-      page: 0,
-      size: 6,
-      sort: ['LATEST'],
-    },
-  );
+import { useRef, useState } from 'react';
+import Image from 'next/image';
+import { Divider, TextInput } from '@mantine/core';
+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';
+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 { MainCrewListResponse } from '@/src/types/crew-card';
+import IcoSearch from '@/public/assets/icons/ic-search.svg';
+
+export default function HomePage() {
+  const [mainCategory, setMainCategory] = useState('');
+  const [subCategory, setSubCategory] = useState('');
+  const [sort, setSort] = useState<string | null>('latest');
+  const [region, setRegion] = useState<string>('');
+  const [search, setSearch] = useState('');
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const handleRegionChange = (newValue: string) => {
+    const selectedRegion = regionData.find((dataItem) => dataItem.main.value === newValue);
+    if (selectedRegion?.main.label === '지역 전체') return '';
+    return selectedRegion ? selectedRegion.main.label : '';
+  };
 
-  const infiniteData = {
-    pages: [initialData],
-    pageParams: [],
+  const handleSearch = () => {
+    if (searchRef.current) {
+      setMainCategory('');
+      setSubCategory('');
+      setSearch(searchRef.current.value);
+    }
   };
 
-  return <FindCrew initialData={infiniteData} />;
+  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">
+      <div className="flex flex-col px-3 md:px-8 lg:px-11.5">
+        <HeroCrew />
+        <CategoryContainer
+          mainCategory={mainCategory}
+          subCategory={subCategory}
+          setMainCategory={(newValue) => {
+            setMainCategory(newValue);
+            if (searchRef.current) searchRef.current.value = '';
+            if (search !== '') setSearch('');
+          }}
+          setSubCategory={(newValue) => {
+            setSubCategory(newValue);
+            if (searchRef.current) searchRef.current.value = '';
+            if (search !== '') setSearch('');
+          }}
+        />
+      </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
+              ref={searchRef}
+              leftSectionPointerEvents="none"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSearch();
+              }}
+              rightSection={
+                <button type="button" className="flex h-5 w-5" onClick={handleSearch}>
+                  <Image
+                    src={IcoSearch}
+                    alt="search"
+                    width={20}
+                    height={20}
+                    className="-ml-1"
+                    aria-label="검색하기"
+                  />
+                </button>
+              }
+              placeholder="크루 이름, 위치를 검색하세요."
+              classNames={{
+                input:
+                  'h-11 w-full rounded-xl border-0 pr-10 font-pretendard text-base font-medium text-gray-800 placeholder:text-gray-500',
+              }}
+            />
+          </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={(newValue) => {
+                setRegion(newValue as string);
+              }}
+            />
+            <DropDown
+              name="sort"
+              variant="sort"
+              data={[
+                { value: 'latest', label: '최신순' },
+                { value: 'best', label: '인기순' },
+              ]}
+              placeholder="최신순"
+              value={sort}
+              className="w-[130px]"
+              onChange={(newValue) => {
+                setSort(newValue as string);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-8 px-3 md:px-8 lg:px-11.5">
+        {data && <CrewCardList data={data} ref={ref} isFetchingNextPage={isFetchingNextPage} />}
+      </div>
+    </div>
+  );
 }

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';
@@ -29,17 +29,8 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-function RenderCrewCardList({
-  initialData,
-}: {
-  initialData: InfiniteData<MainCrewListResponse | undefined>;
-}) {
-  const [data, setData] = useState<InfiniteData<MainCrewListResponse | undefined>>(initialData);
-  const {
-    data: CrewCardListData,
-    ref,
-    isFetchingNextPage,
-  } = useInfiniteScroll(
+function RenderCrewCardList() {
+  const { data, ref, isFetchingNextPage } = useInfiniteScroll(
     useGetCrewListQuery({
       keyword: '',
       mainLocation: '',
@@ -49,16 +40,11 @@ function RenderCrewCardList({
     }),
   );
 
-  useEffect(() => {
-    if (CrewCardListData) {
-      setData(CrewCardListData);
-    }
-  }, [CrewCardListData]);
-
+  if (!data) return null;
   return <CrewCardList data={data} ref={ref} isFetchingNextPage={isFetchingNextPage} />;
 }
 
 export const Default: Story = {
-  render: () => <RenderCrewCardList initialData={{ pages: [], pageParams: [] }} />,
+  render: () => <RenderCrewCardList />,
   args: {},
 };

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

@@ -11,7 +11,7 @@ import CrewCard from './crew-card';
 
 // CrewCardListProps 타입을 구분하여 정의
 interface MainCrewCardListProps {
-  data: InfiniteData<MainCrewListResponse | undefined>;
+  data: InfiniteData<MainCrewListResponse>;
   isFetchingNextPage: boolean;
   inWhere?: undefined;
 }

src/types/crew-card.d.ts

@@ -13,7 +13,7 @@ export interface PageableTypes {
 }
 
 export type MainCrewListResponse = {
-  content: MainCrewList[] | undefined;
+  content: MainCrewList[];
   hasNext: boolean;
 };
 

src/utils/api.ts

@@ -35,7 +35,7 @@ export async function fetchApi<T>(
   };
 
   try {
-    const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}${url}`, fetchOptions);
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}${url}`, fetchOptions); // API 요청 실행
 
     if (!response.ok) {
       let errorDetail;