[feat]뒤로가기 필터링 유지

Author: mtm-git1018

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

@@ -1,20 +1,22 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
-import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import Back from '@/shared/assets/icons/back_36.svg';
 
 function BackButton() {
-  const searchParams = useSearchParams();
-  const recipeUrl = `/recipe${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
+  const router = useRouter()
+
+
+  const handleClick = () => {
+    const url = sessionStorage.getItem('saveUrl')
+    if(!url) return 
+    router.push(url)
+  }
 
-  // 쿼리스트링을 유지한채 뒤로 돌아가야함
 
   return (
-    <button type="button" className="z-1" aria-label="뒤로가기">
-      <Link href={recipeUrl}>
-        <Back />
-      </Link>
+    <button type="button" className="z-1" aria-label="뒤로가기" onClick={ handleClick}>
+       <Back />  
     </button>
   );
 }

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

@@ -133,8 +133,10 @@ function Accordion({ setAlcoholBaseTypes, setCocktailTypes, setAlcoholStrengths
     const queryString = params.toString();
     const newUrl = `${pathname}${queryString ? `?${queryString}` : ''}`;
 
+
+    router.push(newUrl)
     // shallow routing으로 URL만 변경
-    window.history.pushState({ ...window.history.state, as: newUrl, url: newUrl }, '', newUrl);
+    // window.history.pushState({ ...window.history.state, as: newUrl, url: newUrl }, '', newUrl);
   };
 
   return (

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

@@ -26,23 +26,26 @@ function CocktailList({ cocktails, RecipeFetch, hasNextPage, lastId, onItemClick
 
   useIntersectionObserver(cocktailRef, onIntersect, hasNextPage);
 
+  const handleClick = () => {
+    sessionStorage.setItem('listScrollY', String(window.scrollY));
+    sessionStorage.setItem('saveUrl', String(location.href))
+}
+
   return (
     <ul
-      className="place-content-between
+      className="place-content-between 
     grid gap-8 justify-items-center
     grid-cols-1 sm:justify-items-stretch
-    sm:[grid-template-columns:repeat(2,minmax(0,320px))]  sm:gap-8 md:[grid-template-columns:repeat(3,minmax(0,250px))]  
-     lg:[grid-template-columns:repeat(4,minmax(0,250px))]
+    sm:[grid-template-columns:repeat(2,minmax(0,1fr))]  sm:gap-8 md:[grid-template-columns:repeat(3,minmax(0,1fr))]  
+     lg:[grid-template-columns:repeat(4,minmax(0,1fr))]
   "
     >
       {cocktails.map(
         ({ cocktailImgUrl, cocktailId, cocktailName, cocktailNameKo, alcoholStrength }) => (
           <li key={cocktailId} onClick={onItemClick}>
             <Link
               href={`/recipe/${cocktailId}`}
-              onClick={() => {
-                sessionStorage.setItem('listScrollY', String(window.scrollY));
-              }}
+              onClick={handleClick}
             >
               <CocktailCard
                 id={cocktailId}

src/domains/shared/components/cocktail-card/CocktailCard.tsx

@@ -36,7 +36,7 @@ function CocktailCard({
     <div className="flex flex-col gap-4">
       <div
         className={tw(
-          `${!className && 'w-80 h-75 md:w-62.5 '} rounded-xl overflow-hidden relative`,
+          `${!className && 'w-80 h-75 md:max-w-62.5 '} rounded-xl overflow-hidden relative`,
           className
         )}
       >

src/domains/shared/components/keep/Keep.tsx

@@ -2,8 +2,9 @@
 
 import KeepIcon from '@/shared/assets/icons/keep_36.svg';
 import KeepIconActive from '@/shared/assets/icons/keep_active_36.svg';
-import { useState } from 'react';
-import { deleteKeep, postKeep } from '../../api/keep/keep';
+import { useEffect, useState } from 'react';
+import { deleteKeep,  postKeep } from '../../api/keep/keep';
+import { getApi } from '@/app/api/config/appConfig';
 
 interface Props {
   className?: string;
@@ -14,6 +15,18 @@ interface Props {
 
 function Keep({ className, cocktailId }: Props) {
   const [isClick, setIsClick] = useState(false);
+
+  useEffect(() => {
+    const getKeep = async () => {
+      const res = await fetch(`${getApi}/me/bar`, {
+        credentials:'include'
+      })
+      const json = await res.json()
+      json.data.items.keptAt ? setIsClick(true) :  setIsClick(false)
+    }
+    getKeep()
+  },[])
+
   const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();