[feat]아코디언 박스

Author: mtm-git1018

src/domains/recipe/api/RecipeFetch.tsx

@@ -4,6 +4,7 @@ import { getApi } from '@/app/api/config/appConfig';
 import { Cocktail } from '../types/types';
 import { Dispatch, SetStateAction, useCallback } from 'react';
 
+
 interface Props {
   setData: React.Dispatch<React.SetStateAction<Cocktail[]>>;
   lastId: number | null;
@@ -12,7 +13,7 @@ interface Props {
   setHasNextPage: Dispatch<SetStateAction<boolean>>;
   SIZE?: number;
 }
-
+// api/cocktais fetch용 
 export const RecipeFetch = ({
   setData,
   lastId,
@@ -21,28 +22,33 @@ export const RecipeFetch = ({
   setHasNextPage,
   SIZE = 20,
 }: Props) => {
+
+  
   const fetchData = useCallback(async () => {
+   
+    // 쿼리파라미터에 값 넣기
     if (!hasNextPage) return;
     const url = new URL(`${getApi}/cocktails`);
     url.searchParams.set('size', String(SIZE));
     if (typeof lastId === 'number') {
       url.searchParams.set('lastId', String(lastId));
     }
-
-    const res = await fetch(url.toString());
+   
+    const res = await fetch(url.toString(),{method:'GET'});
     if (!res.ok) throw new Error('레시피 데이터 요청실패');
 
     const json = await res.json();
     const list: Cocktail[] = json.data ?? [];
 
+    // 중복 아이디 에러있어서 Map으로 Merge
     setData((prev) =>
       Array.from(new Map([...prev, ...list].map((i) => [i.cocktailId, i])).values())
     );
+ 
 
     if (list.length > 0) {
       setLastId(list[list.length - 1].cocktailId);
     }
-
     setHasNextPage(list.length === SIZE);
   }, [hasNextPage, lastId, setData, setLastId, setHasNextPage, SIZE]);
   return { fetchData };

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

@@ -11,6 +11,7 @@ import CocktailSearchBar from './CocktailSearchBar';
 import useSearchControl from '../../hook/useSearchControl';
 import CocktailSearch from '../../api/CocktailSearch';
 
+
 function Cocktails() {
   const {
     data,

src/domains/recipe/hook/ozToMl.ts

@@ -1,22 +1,23 @@
-// 유니코드 분수 매핑 (소수점 대신 정수 ml로 변환)
+// 분수 매핑 
 const FRAC_MAP: Record<string, number> = {
-  '¼': 8, // 0.25 * 30
-  '½': 15, // 0.5 * 30
-  '¾': 23, // 0.75 * 30
-  '⅓': 10, // 1/3 * 30 ≈ 10
-  '⅔': 20, // 2/3 * 30 ≈ 20
-  '⅕': 6, // 1/5 * 30
-  '⅖': 12, // 2/5 * 30
-  '⅗': 18, // 3/5 * 30
-  '⅘': 24, // 4/5 * 30
-  '⅙': 5, // 1/6 * 30
-  '⅚': 25, // 5/6 * 30
-  '⅛': 4, // 1/8 * 30
-  '⅜': 11, // 3/8 * 30
-  '⅝': 19, // 5/8 * 30
-  '⅞': 26, // 7/8 * 30
+  '¼': 8, 
+  '½': 15, 
+  '¾': 23, 
+  '⅓': 10, 
+  '⅔': 20, 
+  '⅕': 6, 
+  '⅖': 12, 
+  '⅗': 18, 
+  '⅘': 24, 
+  '⅙': 5, 
+  '⅚': 25, 
+  '⅛': 4,
+  '⅜': 11, 
+  '⅝': 19, 
+  '⅞': 26, 
 };
 
+// 정규식 분리 용 class
 const FRAC_CLASS = Object.keys(FRAC_MAP).join('');
 
 export function ozToMl(input: string): number | '' {

src/domains/shared/hook/useMemoScroll.ts

@@ -1,4 +1,3 @@
-// hooks/useScrollRestoration.ts (또는 useMemoScroll.ts)
 import { useEffect, useRef, useState, useCallback } from 'react';
 
 interface UseScrollRestorationProps {
@@ -14,18 +13,20 @@ interface ScrollState<T> {
   timestamp: number;
 }
 
+// 뒤로가기시 스크롤위치 기억 함수
+
 export function useMemoScroll<T>({
   storageKey,
   eventName = 'resetScroll',
 }: UseScrollRestorationProps) {
+  
   // 뒤로가기를 통해 목록 복원을 저장해주는 플래그
   const NAVIGATION_FLAG_KEY = `${storageKey}_nav_flag`;
 
   // 실제 렌더링 되는 데이터
   const [data, setData] = useState<T[]>([]);
   const [lastId, setLastId] = useState<number | null>(null);
   const [hasNextPage, setHasNextPage] = useState(true);
-  // fetch필요 여부
   const [shouldFetch, setShouldFetch] = useState(false);
 
   // 스크롤 복원중일 때 값이 바뀜