[refactor] 전역상태에서 필터링 삭제

Author: mtm-git1018

next.config.ts

@@ -1,12 +1,13 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+  reactStrictMode: false,
   experimental: {
     scrollRestoration: false,
   },
   images: {
     // 외부 이미지 최적화 완전 비활성화 (Vercel 유료 기능 회피)
-    unoptimized: true,
+    unoptimized: true, 
     domains: [
       'team2-app-s3-bucket.s3.ap-northeast-2.amazonaws.com',
       'team2-app-s3-bucket.s3.amazonaws.com',
@@ -15,12 +16,14 @@ const nextConfig: NextConfig = {
       {
         protocol: 'https',
         hostname: 'www.thecocktaildb.com',
+        pathname: '/images/**',
       },
     ],
   },
   env: {
     NPUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
   },
+
   // webpack 설정
   webpack: (config) => {
     // @ts-expect-error 타입 에러 무시

src/app/(with-layout)/mypage/layout.tsx

@@ -1,5 +1,6 @@
-import MyNav from '@/domains/mypage/main/MyNav';
-import MyProfile from '@/domains/mypage/main/MyProfile';
+
+import MyNav from '@/domains/mypage/components/main/MyNav';
+import MyProfile from '@/domains/mypage/components/main/MyProfile';
 import SkeletonLayout from '@/domains/mypage/skeleton/main/SkeletonLayout';
 import { Suspense } from 'react';
 

src/app/(with-layout)/mypage/my-setting/page.tsx

@@ -1,5 +1,5 @@
-import MySetting from '@/domains/mypage/main/MySetting';
 
+import MySetting from '@/domains/mypage/components/main/MySetting';
 import { Metadata } from 'next';
 export const metadata: Metadata = {
   title: '마이페이지',

src/domains/mypage/components/main/SsuryImage.tsx

@@ -1,4 +1,3 @@
-
 import Image from 'next/image';
 import useProfileSsury from '../../hook/useProfileSsury';
 

src/domains/recipe/api/fetchRecipe.ts

@@ -28,6 +28,8 @@ interface PageParam {
   lastValue: number | string;
 }
 
+
+// 로그인 한 유저의 킵 칵테일을 Get으로 불러옴
 const fetchKeep = async (): Promise<Set<number>> => {
   const res = await fetch(`${getApi}/me/bar`, {
     method: 'GET',
@@ -41,6 +43,7 @@ const fetchKeep = async (): Promise<Set<number>> => {
   return new Set(myKeep.map((v: { cocktailId: number }) => v.cocktailId));
 };
 
+// 비 로그인 유저도 볼 수 있는 칵테일 API fetch 각 종 정렬 파라미터를 문자열로 받아서 정렬함
 const fetchRecipe = async (
   pageParam: PageParam | null,
   size: number,
@@ -68,6 +71,7 @@ const fetchRecipe = async (
   return json.data ?? [];
 };
 
+// 검색전용 API 여기서 필터링 토글도 받음
 const searchCocktails = async (filters: SearchFilters): Promise<Cocktail[]> => {
   const body = {
     keyword: filters.keyword?.trim() ?? '',
@@ -90,6 +94,7 @@ const searchCocktails = async (filters: SearchFilters): Promise<Cocktail[]> => {
   return json.data ?? [];
 };
 
+// 적용된 필터
 const hasActiveFilters = (filters: SearchFilters): boolean => {
   return !!(
     filters.keyword?.trim() ||
@@ -99,10 +104,25 @@ const hasActiveFilters = (filters: SearchFilters): boolean => {
   );
 };
 
+
+export const useKeepQuery = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return useQuery({
+    queryKey: ['keeps', user?.id],
+    queryFn: fetchKeep,
+    enabled: !!user,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  })
+};
+
+// 무한스크롤 fetch
 export const useCocktailsInfiniteQuery = (size: number = 20, sortBy?: Sort) => {
   const user = useAuthStore((state) => state.user);
   const queryClient = useQueryClient();
   const prevSortBy = useRef(sortBy);
+  const { data:keepIds } = useKeepQuery()
 
   useEffect(() => {
     if (prevSortBy.current !== undefined && prevSortBy.current !== sortBy) {
@@ -118,12 +138,11 @@ export const useCocktailsInfiniteQuery = (size: number = 20, sortBy?: Sort) => {
     queryFn: async ({ pageParam }) => {
       const cocktails = await fetchRecipe(pageParam, size, sortBy);
 
-      if (user) {
-        const keepId = await fetchKeep();
+      if (user && keepIds) {
         return cocktails.map((item) => ({
           ...item,
-          isKeep: keepId.has(item.cocktailId),
-        }));
+          isKeep : keepIds.has(item.cocktailId)
+        }))
       }
 
       return cocktails;
@@ -159,31 +178,37 @@ export const useCocktailsInfiniteQuery = (size: number = 20, sortBy?: Sort) => {
     initialPageParam: null as PageParam | null,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
+    staleTime: 2 * 60 * 1000
   });
 };
 
+// 검색용 fetch
 export const useCocktailsSearchQuery = (filters: SearchFilters) => {
   const user = useAuthStore((state) => state.user);
   const isActive = hasActiveFilters(filters);
+  const {data: keepIds} = useKeepQuery()
 
   return useQuery({
     queryKey: ['cocktails', 'search', filters, user?.id],
     queryFn: async () => {
       const cocktails = await searchCocktails(filters);
-      if (user && cocktails.length > 0) {
-        const keepId = await fetchKeep();
+      if (user && cocktails.length > 0 && keepIds) {
+
         return cocktails.map((item) => ({
           ...item,
-          isKeep: keepId.has(item.cocktailId),
+          isKeep: keepIds.has(item.cocktailId),
         }));
       }
       return cocktails;
     },
     enabled: isActive,
     refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    staleTime: 5 * 60 * 1000
   });
 };
 
+// 검색모드를 전환하여 어떤 fetch를 하는지 결정
 export const useCocktails = (
   filters: CocktailFilter,
   infiniteScrollSize: number = 20,

src/domains/recipe/components/main/CocktailFilter.tsx

@@ -1,5 +1,7 @@
 import SelectBox from '@/shared/components/select-box/SelectBox';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+
 
 interface Props {
   cocktailsEA: number;
@@ -12,18 +14,29 @@ function CocktailFilter({ cocktailsEA }: Props) {
     댓글순: 'comments',
   };
 
+  const searchParams = useSearchParams()
   const router = useRouter();
 
+  const getCurrentSort = () => {
+    const sortBy = searchParams.get('sortBy') || 'recent'
+
+    const entry = Object.entries(sortMap).find(([_, value]) => value === sortBy)
+    return entry ? entry[0] : '최신순' 
+  }
+
   const handleChange = (selectTitle: string) => {
     const sortValue = sortMap[selectTitle as keyof typeof sortMap];
 
+    const params = new URLSearchParams(searchParams.toString())
+    params.set('sortBy', sortValue)
+
     router.push(`?sortBy=${sortValue}`);
   };
 
   return (
     <div className="h-10 flex justify-between items-center mt-3 border-b-1 border-gray-light">
       <p>{cocktailsEA}개+</p>
-      <SelectBox option={['최신순', '댓글순', '인기순']} title="최신순" onChange={handleChange} />
+      <SelectBox option={['최신순', '댓글순', '인기순']} title="최신순" onChange={handleChange} value={ getCurrentSort()} />
     </div>
   );
 }

src/domains/recipe/components/main/Accordion.tsx renamed to src/domains/recipe/components/main/CocktailFilterRadios.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import SelectBox from '@/shared/components/select-box/SelectBox';
-import { Dispatch, SetStateAction, useEffect } from 'react';
-import { useSearchParams, usePathname, useRouter } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { Dispatch, SetStateAction } from 'react';
 
 interface Props {
   setAlcoholBaseTypes: Dispatch<SetStateAction<string[]>>;
@@ -64,26 +64,17 @@ const SELECT_OPTIONS = [
   },
 ];
 
-function Accordion({ setAlcoholBaseTypes, setCocktailTypes, setAlcoholStrengths }: Props) {
+function CocktailFilterRadios({ setAlcoholBaseTypes, setAlcoholStrengths, setCocktailTypes } : Props) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  // url 파라미터에서 값을 가져와 POST를 도와줌
-  useEffect(() => {
-    const abv = searchParams.get('abv');
-    const base = searchParams.get('base');
-    const glass = searchParams.get('glass');
-
-    setAlcoholStrengths(abv ? [abv] : []);
-    setAlcoholBaseTypes(base ? [base] : []);
-    setCocktailTypes(glass ? [glass] : []);
-  }, [searchParams, setAlcoholStrengths, setAlcoholBaseTypes, setCocktailTypes]);
-
   // 파라미터 값을 한글로 역 변환해주는 함수
   const getDisplayValue = (id: string, code: string | null): string => {
+    // 파라미터에서 가져오는 값 없다면 전체로 표시 이 값을 전체가 아닌 타이틀이 나와야함
     if (!code) return '전체';
 
+    // 파라미터에서 가져오는 아이디가 선택한 아이디와 일치하는지
     const optionGroup = SELECT_OPTIONS.find((opt) => opt.id === id);
     if (!optionGroup) return '전체';
 
@@ -147,9 +138,8 @@ function Accordion({ setAlcoholBaseTypes, setCocktailTypes, setAlcoholStrengths
             <SelectBox
               option={option}
               title={title}
-              id={id}
-              groupKey="filter"
               value={currentValue}
+              align="left"
               onChange={(value) => handleSelect(id, value)}
             />
           </li>
@@ -159,4 +149,4 @@ function Accordion({ setAlcoholBaseTypes, setCocktailTypes, setAlcoholStrengths
   );
 }
 
-export default Accordion;
+export default CocktailFilterRadios;

src/domains/recipe/components/main/CocktailList.tsx

@@ -5,10 +5,16 @@ import { Cocktail } from '../../types/types';
 import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
 import { useSaveScroll } from '../../hook/useSaveScroll';
 
+
+
+
 interface Props {
   cocktails: Cocktail[];
 }
 
+
+// Grid반응형 구조에서 virtual의 높이가 측정하기 힘든문제로 인해 virtual사용 포기
+
 function CocktailList({ cocktails }: Props) {
   const { saveAndNavigate } = useSaveScroll({
     storageKey: 'cocktail_list_scroll',
@@ -20,36 +26,41 @@ function CocktailList({ cocktails }: Props) {
     saveAndNavigate(`/recipe/${cocktailId}`);
   };
 
+
+
   return (
-    <ul
-      className="
-    grid gap-8 lg:justify-between justify-center
-    [grid-template-columns:repeat(1,minmax(0,250px))]
-    sm:[grid-template-columns:repeat(2,minmax(0,250px))]
-    md:[grid-template-columns:repeat(3,minmax(0,250px))]
-    lg:[grid-template-columns:repeat(4,minmax(0,250px))]
-  "
+    <div
     >
-      {cocktails.map(
-        (
-          { cocktailImgUrl, cocktailId, cocktailName, cocktailNameKo, alcoholStrength, isKeep },
-          i
-        ) => (
-          <li key={`${cocktailId} - ${i}`} className="w-full">
-            <Link href={`/recipe/${cocktailId}`} onClick={handleClick(cocktailId)}>
-              <CocktailCard
-                favor={isKeep}
-                id={cocktailId}
-                src={cocktailImgUrl}
-                name={cocktailName}
-                nameKo={cocktailNameKo}
-                alcohol={alcoholStrength}
-              />
-            </Link>
-          </li>
-        )
-      )}
-    </ul>
+      <ul
+        className="
+     grid gap-8 lg:justify-between justify-center
+     [grid-template-columns:repeat(1,minmax(0,250px))]
+     sm:[grid-template-columns:repeat(2,minmax(0,250px))]
+     md:[grid-template-columns:repeat(3,minmax(0,250px))]
+     lg:[grid-template-columns:repeat(4,minmax(0,250px))]
+   "
+      >
+        {cocktails.map(
+          (
+            { cocktailImgUrl, cocktailId, cocktailName, cocktailNameKo, alcoholStrength, isKeep },
+            i
+          ) => (
+            <li key={`${cocktailId} - ${i}`} className="w-full">
+              <Link href={`/recipe/${cocktailId}`} onClick={handleClick(cocktailId)}>
+                <CocktailCard
+                  favor={isKeep}
+                  id={cocktailId}
+                  src={cocktailImgUrl}
+                  name={cocktailName}
+                  nameKo={cocktailNameKo}
+                  alcohol={alcoholStrength}
+                />
+              </Link>
+            </li>
+          )
+        )}
+      </ul>
+    </div>
   );
 }
 export default CocktailList;