[feat]레시피페이지정렬

Author: mtm-git1018

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

@@ -1,10 +1,48 @@
+import { getApi } from '@/app/api/config/appConfig';
 import SelectBox from '@/shared/components/select-box/SelectBox';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Dispatch, SetStateAction } from 'react';
+import { Cocktail } from '../../types/types';
 
-function CocktailFilter({ cocktailsEA }: { cocktailsEA: string }) {
+interface Props {
+  cocktailsEA: string;
+  setData: Dispatch<SetStateAction<Cocktail[]>>;
+}
+
+function CocktailFilter({ cocktailsEA,setData }:Props) {
+
+ const sortMap = {
+   최신순: 'recent',
+   인기순: 'popular',
+   댓글순: 'comments',
+  } 
+   const searchParams = useSearchParams();
+    const query = searchParams.get('sortBy');
+    const router = useRouter();
+    const handleChange = async (selectTitle: string) => {
+      if (!query) return;
+      try {
+        const res = await fetch(`${getApi}/cocktails`)
+        const json = await res.json()
+        setData(json.data)
+      } catch {
+        console.error()
+        console.log(selectTitle)
+      }
+    };
+  
   return (
     <div className="h-10 flex justify-between items-center mt-3 border-b-1 border-gray-light">
       <p>{cocktailsEA}개</p>
-      <SelectBox option={['최신순', '댓글순', '인기순']} title="최신순" />
+      <SelectBox
+        option={['최신순', '댓글순', '인기순']}
+        title="최신순"
+        onChange={(value) => {
+          const sortValue = sortMap[value as keyof typeof sortMap];
+          handleChange(value);
+          router.push(`?sortBy=${sortValue}`);
+        }}
+      />
     </div>
   );
 }

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

@@ -80,7 +80,7 @@ function Cocktails() {
         <CocktailSearchBar value={inputValue} onChange={onInputChange} />
       </div>
 
-      <CocktailFilter cocktailsEA={countLabel} />
+      <CocktailFilter cocktailsEA={countLabel} setData={setData} />
 
       <section className="mt-5">
         {isSearching && noResults ? (