[feat]필터링 뒤로가기 스크롤 저장

Author: mtm-git1018

src/domains/recipe/components/details/BackBtn.tsx

@@ -1,20 +1,25 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import Back from '@/shared/assets/icons/back_36.svg';
+import { useSaveScroll } from '../../hook/useSaveScroll';
 
 function BackButton() {
-  const router = useRouter();
+ 
+  const { restoreAndGoBack } = useSaveScroll({
+    storageKey: 'cocktail_list_scroll',
+  });
 
-
-  const handleClick = () => {
-    const url = sessionStorage.getItem('saveUrl');
-    if (!url) return;
-    router.replace(url,{scroll:false});
-  };
+  const handleBack = () => {
+     console.log('뒤로가기 클릭');
+     console.log('저장된 스크롤:', sessionStorage.getItem('cocktail_list_scroll'));
+     console.log('저장된 URL:', sessionStorage.getItem('cocktail_list_scroll_url'));
+     console.log('복원 플래그:', sessionStorage.getItem('cocktail_list_scroll_restore'));
+     restoreAndGoBack()
+  }
+ 
 
   return (
-    <button type="button" className="z-1" aria-label="뒤로가기" onClick={handleClick}>
+    <button type="button" className="z-1" aria-label="뒤로가기" onClick={handleBack}>
       <Back />
     </button>
   );

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

@@ -149,7 +149,7 @@ function Accordion({ setAlcoholBaseTypes, setCocktailTypes, setAlcoholStrengths
               title={title}
               id={id}
               groupKey="filter"
-              value={currentValue} // 현재 선택된 값 전달
+              value={currentValue} 
               onChange={(value) => handleSelect(id, value)}
             />
           </li>

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

@@ -3,16 +3,23 @@
 import Link from 'next/link';
 import { Cocktail } from '../../types/types';
 import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
+import { useSaveScroll } from '../../hook/useSaveScroll';
 
 interface Props {
   cocktails: Cocktail[];
 }
 
 function CocktailList({cocktails}: Props) {
 
-  const handleClick = () => {
-    sessionStorage.setItem('saveUrl',location.href)
-  }
+  const { saveAndNavigate } = useSaveScroll({
+    storageKey: 'cocktail_list_scroll',
+  });
+  
+const handleClick = (cocktailId: number) => (e: React.MouseEvent<HTMLAnchorElement>) => {
+  e.preventDefault();
+
+  saveAndNavigate(`/recipe/${cocktailId}`);
+};
 
   return (
     <ul
@@ -34,7 +41,7 @@ function CocktailList({cocktails}: Props) {
           isKeep,
         },i) => (
           <li key={`${cocktailId} - ${i}` } className="w-full">
-            <Link href={`/recipe/${cocktailId}`}  onClick={handleClick}>
+            <Link href={`/recipe/${cocktailId}`}  onClick={handleClick(cocktailId)}>
               <CocktailCard
                 favor={isKeep}
                 id={cocktailId}

src/domains/recipe/hook/useSaveScroll.ts

@@ -0,0 +1,100 @@
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef } from 'react';
+
+interface Scroll {
+  storageKey?: string;
+  enabled?: boolean;
+  // 이 페이지가 리스트 페이지인지 상세 페이지인지 구분
+  pageType?: 'list' | 'detail';
+}
+
+export const useSaveScroll = (opt: Scroll = {}) => {
+  const {
+    storageKey = 'cocktail_scroll',
+    enabled = true,
+    pageType = 'list', // 기본값은 리스트
+  } = opt;
+  const router = useRouter();
+  const hasRestore = useRef(false);
+
+  useEffect(() => {
+    console.log('=== useEffect 실행 ===');
+    console.log('pageType:', pageType);
+
+    // 상세 페이지에서는 스크롤 복원 로직 실행 안함
+    if (pageType === 'detail') {
+      console.log('상세 페이지 - 복원 스킵');
+      return;
+    }
+
+    if (!enabled || hasRestore.current) {
+      console.log('조건 불만족');
+      return;
+    }
+
+    const savedPosition = sessionStorage.getItem(storageKey);
+    const shouldRestore = sessionStorage.getItem(`${storageKey}_should_restore`);
+
+    console.log('savedPosition:', savedPosition);
+    console.log('shouldRestore:', shouldRestore);
+
+    // 리스트 페이지이고, 복원 플래그가 있을 때만 복원
+    if (savedPosition && shouldRestore === 'true') {
+      const position = parseInt(savedPosition, 10);
+
+      console.log('스크롤 복원 시도:', position);
+
+      const restoreScroll = () => {
+        console.log('restoreScroll 함수 실행');
+        window.scrollTo(0, position);
+        console.log('현재 스크롤 위치:', window.scrollY);
+        hasRestore.current = true;
+      };
+
+      // 여러 타이밍에 시도
+      requestAnimationFrame(restoreScroll);
+      setTimeout(restoreScroll, 0);
+      setTimeout(restoreScroll, 100);
+
+      // 복원 플래그 제거
+      sessionStorage.removeItem(`${storageKey}_should_restore`);
+    } else {
+      console.log('복원 조건 불만족');
+    }
+  }, [storageKey, enabled, pageType]);
+
+  const saveScroll = () => {
+    if (!enabled) return;
+    const currentScroll = window.scrollY;
+    sessionStorage.setItem(storageKey, currentScroll.toString());
+    console.log('스크롤 저장:', currentScroll);
+  };
+
+  // 상세 페이지로 이동 (스크롤 위치만 저장, 복원 플래그는 설정 안함)
+  const saveAndNavigate = (href: string) => {
+    saveScroll();
+    sessionStorage.setItem(`${storageKey}_url`, location.href);
+    console.log('상세 페이지로 이동 - 스크롤만 저장');
+    router.push(href);
+  };
+
+  // 뒤로가기 (복원 플래그 설정)
+  const restoreAndGoBack = () => {
+    const saveUrl = sessionStorage.getItem(`${storageKey}_url`);
+    console.log('뒤로가기 - saveUrl:', saveUrl);
+
+    if (!saveUrl) return;
+
+    // 뒤로가기할 때만 복원 플래그 설정
+    sessionStorage.setItem(`${storageKey}_should_restore`, 'true');
+    console.log('복원 플래그 설정 완료');
+
+    router.replace(saveUrl, { scroll: false });
+  };
+
+  return {
+    saveScroll,
+    saveAndNavigate,
+    restoreAndGoBack,
+  };
+};