[feat]칵테일 필터링기능

mtm-git1018 · mtm-git1018 · commit f974d855c896 · 2025-10-06T00:49:51.000+09:00
diff --git a/src/domains/recipe/api/CocktailSearch.tsx b/src/domains/recipe/api/CocktailSearch.tsx
@@ -1,30 +1,58 @@
+'use client';
 import { getApi } from '@/app/api/config/appConfig';
 import { Cocktail } from '../types/types';
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 interface Props {
   setData: Dispatch<SetStateAction<Cocktail[]>>;
   setNoResults: Dispatch<React.SetStateAction<boolean>>;
 }
 
 function CocktailSearch({ setData, setNoResults }: Props) {
-  const searchApi = async (v: string) => {
-    const keyword = v.trim();
-    if (!keyword) {
+  const [alcoholStrengths, setAlcoholStrengths] = useState<string[]>([]);
+  const [cocktailTypes, setCocktailTypes] = useState<string[]>([]);
+  const [alcoholBaseTypes, setAlcoholBaseTypes] = useState<string[]>([]);
+
+  const searchApi = async (v?: string) => {
+    const keyword = v?.trim() ?? '';
+    const body = {
+      keyword,
+      alcoholStrengths,
+      cocktailTypes,
+      alcoholBaseTypes,
+      page: 0,
+      size: 100,
+    };
+
+    if (!keyword && !alcoholStrengths.length && !cocktailTypes.length && !alcoholBaseTypes.length) {
       setData([]);
-      return;
+      setNoResults(false);
+      return null;
     }
 
     const res = await fetch(`${getApi}/cocktails/search`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ keyword }),
+      body: JSON.stringify(body),
     });
     const json = await res.json();
+
     setData(json.data);
     setNoResults(json.data.length === 0);
   };
 
-  return { searchApi };
+  useEffect(() => {
+    searchApi();
+  }, [alcoholStrengths, cocktailTypes, alcoholBaseTypes]);
+
+  return {
+    searchApi,
+    setAlcoholBaseTypes,
+    setAlcoholStrengths,
+    setCocktailTypes,
+    alcoholBaseTypes,
+    alcoholStrengths,
+    cocktailTypes,
+  };
 }
 export default CocktailSearch;
diff --git a/src/domains/recipe/components/details/BackBtn.tsx b/src/domains/recipe/components/details/BackBtn.tsx
@@ -1,14 +1,22 @@
 'use client';
-import Back from '@/shared/assets/icons/back_36.svg';
+
+import { useSearchParams } from 'next/navigation';
 import Link from 'next/link';
+import Back from '@/shared/assets/icons/back_36.svg';
+
+function BackButton() {
+  const searchParams = useSearchParams();
+  const recipeUrl = `/recipe${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
+
+  // 쿼리스트링을 유지한채 뒤로 돌아가야함
 
-function BackBtn() {
   return (
     <button type="button" className="z-1" aria-label="뒤로가기">
-      <Link href="/recipe">
+      <Link href={recipeUrl}>
         <Back />
       </Link>
     </button>
   );
 }
-export default BackBtn;
+
+export default BackButton;
diff --git a/src/domains/recipe/components/main/Accordion.tsx b/src/domains/recipe/components/main/Accordion.tsx
@@ -1,36 +1,162 @@
 'use client';
 
 import SelectBox from '@/shared/components/select-box/SelectBox';
+import { Dispatch, SetStateAction, useEffect, useMemo } from 'react';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+
+interface Props {
+  setAlcoholBaseTypes: Dispatch<SetStateAction<string[]>>;
+  setAlcoholStrengths: Dispatch<SetStateAction<string[]>>;
+  setCocktailTypes: Dispatch<SetStateAction<string[]>>;
+}
 
 const SELECT_OPTIONS = [
   {
     id: 'abv',
-    option: ['전체', '논알콜', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'],
+    option: [
+      '전체',
+      '논알콜',
+      '약한 도수 (1~5%)',
+      '가벼운 도수 (6~15%)',
+      '중간 도수(16~25%)',
+      '센 도수(26~36%)',
+      '매우 센 도수(36%~)',
+    ],
+    map: {
+      전체: null,
+      논알콜: 'NON_ALCOHOLIC',
+      '약한 도수 (1~5%)': 'WEAK',
+      '가벼운 도수 (6~15%)': 'LIGHT',
+      '중간 도수(16~25%)': 'MEDIUM',
+      '센 도수(26~36%)': 'STRONG',
+      '매우 센 도수(36%~)': 'VERY_STRONG',
+    },
     title: '도수',
   },
   {
     id: 'base',
-    option: ['전체', '위스키', '진', '럼', '보드카', '데킬라', '리큐르'],
+    option: ['전체', '위스키', '브랜디', '진', '럼', '보드카', '데킬라', '리큐르', '와인', '기타'],
+    map: {
+      전체: null,
+      진: 'GIN',
+      럼: 'RUM',
+      보드카: 'VODKA',
+      위스키: 'WHISKY',
+      데킬라: 'TEQUILA',
+      리큐르: 'LIQUEUR',
+      브랜디: 'BRANDY',
+      와인: 'WINE',
+      기타: 'OTHER',
+    },
     title: '베이스',
   },
   {
     id: 'glass',
     option: ['전체', '클래식', '롱', '슈터', '숏'],
+    map: {
+      전체: null,
+      숏: 'SHORT',
+      롱: 'LONG',
+      클래식: 'CLASSIC',
+      슈터: 'SHOOTER',
+    },
     title: '글라스',
   },
 ];
 
-function Accordion() {
+function Accordion({ setAlcoholBaseTypes, setCocktailTypes, setAlcoholStrengths }: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // 코드를 한글 라벨로 역변환하는 함수
+  const getDisplayValue = (id: string, code: string | null): string => {
+    if (!code) return '전체';
+
+    const optionGroup = SELECT_OPTIONS.find((opt) => opt.id === id);
+    if (!optionGroup) return '전체';
+
+    // map 객체에서 code와 일치하는 key(한글)를 찾기
+    const entry = Object.entries(optionGroup.map).find(([_, value]) => value === code);
+    return entry ? entry[0] : '전체';
+  };
+
+  // URL 파라미터에서 현재 선택된 값 가져오기
+  const currentValues = useMemo(() => {
+    return {
+      abv: getDisplayValue('abv', searchParams.get('abv')),
+      base: getDisplayValue('base', searchParams.get('base')),
+      glass: getDisplayValue('glass', searchParams.get('glass')),
+    };
+  }, [searchParams]);
+
+  // URL에서 상태 동기화
+  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 handleSelect = (id: string, value: string) => {
+    const optionGroup = SELECT_OPTIONS.find((opt) => opt.id === id);
+    if (!optionGroup) return;
+
+    const code = optionGroup.map[value as keyof typeof optionGroup.map] ?? null;
+    const arr = code ? [code] : [];
+
+    // 상태 즉시 업데이트
+    switch (id) {
+      case 'abv':
+        setAlcoholStrengths(arr);
+        break;
+      case 'base':
+        setAlcoholBaseTypes(arr);
+        break;
+      case 'glass':
+        setCocktailTypes(arr);
+        break;
+    }
+
+    // URL 업데이트
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (code) {
+      params.set(id, code);
+    } else {
+      params.delete(id);
+    }
+
+    const queryString = params.toString();
+    const newUrl = `${pathname}${queryString ? `?${queryString}` : ''}`;
+
+    // shallow routing으로 URL만 변경
+    window.history.pushState({ ...window.history.state, as: newUrl, url: newUrl }, '', newUrl);
+  };
+
   return (
     <ul className="flex w-full gap-3">
       {SELECT_OPTIONS.map(({ id, option, title }) => {
+        const currentValue = currentValues[id as keyof typeof currentValues];
+
         return (
           <li key={id}>
-            <SelectBox option={option} title={title} id={id} groupKey="filter" />
+            <SelectBox
+              option={option}
+              title={title}
+              id={id}
+              groupKey="filter"
+              value={currentValue} // 현재 선택된 값 전달
+              onChange={(value) => handleSelect(id, value)}
+            />
           </li>
         );
       })}
     </ul>
   );
 }
+
 export default Accordion;
diff --git a/src/domains/recipe/components/main/Cocktails.tsx b/src/domains/recipe/components/main/Cocktails.tsx
@@ -28,7 +28,19 @@ function Cocktails() {
   const { inputValue, keyword, isSearching, onInputChange, noResults, setNoResults } =
     useSearchControl({ delay: 300, storageKey: 'cocktails_scoll_state' });
   const { fetchData } = RecipeFetch({ setData, lastId, setLastId, hasNextPage, setHasNextPage });
-  const { searchApi } = CocktailSearch({ setData, setNoResults });
+  const {
+    searchApi,
+    setAlcoholBaseTypes,
+    setAlcoholStrengths,
+    setCocktailTypes,
+    alcoholBaseTypes,
+    cocktailTypes,
+    alcoholStrengths,
+  } = CocktailSearch({
+    setData,
+    setNoResults,
+  });
+
   const countLabel = isSearching
     ? hasNextPage
       ? `검색결과 현재 ${data.length}+`
@@ -44,7 +56,7 @@ function Cocktails() {
     if (readyForFirstLoad) {
       fetchData();
     }
-  }, [hasNextPage]);
+  }, [hasNextPage, lastId]);
 
   // 검색어 변경 시
   useEffect(() => {
@@ -58,22 +70,27 @@ function Cocktails() {
       setLastId(null);
       setHasNextPage(true);
     }
-  }, [keyword, isSearching]);
+  }, [keyword, isSearching, alcoholBaseTypes, alcoholStrengths, cocktailTypes]);
 
   // 일반 fetch
   useEffect(() => {
-    if (!shouldFetch) return;
-    if (isSearching) return;
+    if (!shouldFetch || isSearching) return;
     fetchData();
   }, [shouldFetch, isSearching]);
 
   return (
     <section>
       <div className="flex flex-col-reverse items-start gap-6 md:flex-row md:justify-between md:items-center ">
-        <Accordion />
+        <Accordion
+          setAlcoholBaseTypes={setAlcoholBaseTypes}
+          setAlcoholStrengths={setAlcoholStrengths}
+          setCocktailTypes={setCocktailTypes}
+        />
         <CocktailSearchBar value={inputValue} onChange={onInputChange} />
       </div>
+
       <CocktailFilter cocktailsEA={countLabel} />
+
       <section className="mt-5">
         {isSearching && noResults ? (
           <div>검색결과가 없습니다.</div>
diff --git a/src/shared/components/select-box/SelectBox.tsx b/src/shared/components/select-box/SelectBox.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Ref, useMemo, useRef, useState } from 'react';
+import { Ref, useEffect, useMemo, useRef, useState } from 'react';
 import Down from '@/shared/assets/icons/selectDown_24.svg';
 import { useShallow } from 'zustand/shallow';
 import { ID, useAccordionStore } from '@/domains/recipe/store/accordionStore';
@@ -11,22 +11,26 @@ interface Props {
   ref?: Ref<HTMLButtonElement | null>;
   option: string[];
   title: string;
+  value?: string;
   onChange?: (value: string) => void;
   use?: string;
 }
 
-// groupKey를 Props로 내릴경우 == 아코디언 없는 경우 == select박스
-function SelectBox({ id, groupKey, ref, option, title, onChange, use }: Props) {
+function SelectBox({ id, groupKey, ref, option, title, value, onChange, use }: Props) {
   const [isOpen, setIsOpen] = useState(false);
-  const [select, setSelect] = useState('');
+  const [select, setSelect] = useState(value || '');
   const menuRef = useRef<HTMLDivElement>(null);
 
   const ingroup = !!groupKey;
-  // groupKey가 있을경우 true
-  // groupkey일 경우 전달받은 ID로 식별 아닐경우 title로 식별
 
   const keyId = useMemo<ID>(() => id ?? title, [id, title]);
-  // id가 없을경우 title로 키 아이디를 받음
+
+  // value prop이 변경되면 select state도 업데이트
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelect(value);
+    }
+  }, [value]);
 
   useCloseOutside({
     menuRef,
@@ -39,22 +43,18 @@ function SelectBox({ id, groupKey, ref, option, title, onChange, use }: Props) {
   const { openId, toggleGroup, closeGroup } = useAccordionStore(
     useShallow((s) => ({
       openId: ingroup ? (s.openByGroup[groupKey] ?? null) : null,
-      // 그룹키가 없으면 openId == null 따라서 state로 관리됨
       toggleGroup: s.toggle,
       closeGroup: s.closeGroup,
     }))
   );
 
-  //groupkey가 있을 떄와 없을때로 구분해서 state혹은 store로 관리
   const localOpen = ingroup ? openId === keyId : isOpen;
 
-  // 그룹일 경우 filter와 id abv | base | glass 를
   const toggle = () => {
     if (ingroup) toggleGroup(groupKey, keyId);
     else
       setIsOpen((prev) => {
         const next = !prev;
-        console.log('TOGGLE BTN CLICK:', { prev, next });
         return next;
       });
   };
@@ -71,11 +71,6 @@ function SelectBox({ id, groupKey, ref, option, title, onChange, use }: Props) {
     close();
   };
 
-  useCloseOutside({
-    menuRef,
-    onClose: close,
-  });
-
   return (
     <div className="flex flex-col gap-2 relative h-6" ref={menuRef}>
       <button
