Feat/레시피 페이지 무한스크롤#15

package.json

@@ -60,4 +60,4 @@
   },
   "homepage": "https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE#readme",
   "description": ""
-}
+}

src/app/design-system/page.tsx

@@ -5,7 +5,6 @@ import TextButton from '@/shared/components/button/TextButton';
 import Input from '@/shared/components/Input-box/Input';
 import { useState } from 'react';
 import ModalLayout from '@/shared/components/modal-pop/ModalLayout';
-
 import Spinner from '@/shared/components/spinner/Spinner';
 import LikeBtn from '@/domains/community/components/like/LikeBtn';
 import Share from '@/domains/shared/components/share/Share';

src/app/mypage/my-active/my-comment/page.tsx

@@ -1,4 +1,4 @@
-import CommentList from '@/domains/shared/components/comment/CommentList';
+// import CommentList from '@/domains/shared/components/comment/CommentList';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {

src/app/mypage/my-active/my-like/page.tsx

@@ -1,4 +1,4 @@
-import PostCard from '@/domains/community/main/PostCard';
+// import PostCard from '@/domains/community/main/PostCard';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {

src/app/mypage/my-active/my-post/page.tsx

@@ -1,4 +1,4 @@
-import PostCard from '@/domains/community/main/PostCard';
+// import PostCard from '@/domains/community/main/PostCard';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {

src/app/mypage/mybar/page.tsx → src/app/mypage/my-bar/page.tsx

@@ -1,4 +1,5 @@
-import CocktailCard from '@/domains/recipe/CocktailCard';
+
+import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {

src/app/mypage/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation';
 
 function Page() {
-  return redirect('/mypage/mybar');
+  return redirect('/mypage/my-bar');
 }
 export default Page;

src/app/recipe/page.tsx

@@ -1,13 +1,11 @@
 import { Metadata } from 'next';
-
 import Input from '@/shared/components/Input-box/Input';
 
 import Accordion from '../../domains/recipe/components/main/Accordion';
-import CocktailList from '@/domains/recipe/CocktailList';
 import PageHeader from '@/domains/shared/components/page-header/PageHeader';
 import { Suspense } from 'react';
 import SkeletonRecipe from '@/domains/recipe/skeleton/SkeletonRecipe';
-import SelectBox from '@/shared/components/select-box/SelectBox';
+import Cocktails from '@/domains/recipe/main/Cocktails';
 
 export const metadata: Metadata = {
   title: 'SSOUL | 칵테일레시피',
@@ -31,15 +29,7 @@ function Page() {
               className="w-full md:max-w-80"
             />
           </section>
-          <section>
-            <div className="h-10 flex justify-between items-center mt-3 border-b-1 border-gray-light">
-              <p>n개</p>
-              <SelectBox option={['', '댓글순', '인기순']} title="최신순" />
-            </div>
-            <section className="mt-5 ">
-              <CocktailList />
-            </section>
-          </section>
+          <Cocktails />
         </Suspense>
       </div>
     </div>

src/domains/community/write/cocktail-tag/TagModal.tsx

@@ -2,12 +2,11 @@
 
 import AddIcon from '@/shared/assets/icons/add_24.svg';
 import Input from '@/shared/components/Input-box/Input';
-import CocktailCard from '@/domains/recipe/CocktailCard';
 import ModalLayout from '@/shared/components/modal-pop/ModalLayout';
 import Button from '@/shared/components/button/Button';
 import TagList from '../../components/tag/TagList';
 import { useState } from 'react';
-
+import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
 type Props = {
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;

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

@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 
 function BackBtn() {
   const router = useRouter();
-  console.log(router);
 
   return (
     <button type="button" className="z-1" onClick={router.back} aria-label="뒤로가기">

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

@@ -5,17 +5,17 @@ import SelectBox from '@/shared/components/select-box/SelectBox';
 const SELECT_OPTIONS = [
   {
     id: 'abv',
-    option: ['도수 전체', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'],
+    option: ['전체', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'],
     title: '도수',
   },
   {
     id: 'base',
-    option: ['베이스 전체', '위스키', '진', '럼', '보드카', '데킬라', '리큐르'],
+    option: ['전체', '위스키', '진', '럼', '보드카', '데킬라', '리큐르'],
     title: '베이스',
   },
   {
     id: 'glass',
-    option: ['글라스 전체', '클래식', '롱', '슈터', '숏'],
+    option: ['전체', '클래식', '롱', '슈터', '숏'],
     title: '글라스',
   },
 ];

src/domains/recipe/details/DetailItem.tsx

@@ -2,41 +2,45 @@ import Image from 'next/image';
 import Short from '@/shared/assets/icons/short_36.svg';
 import Label from '@/domains/shared/components/label/Label';
 import AbvGraph from '@/domains/shared/components/abv-graph/AbvGraph';
+import { labelTitle } from '../utills/labelTitle';
+
+
+
+interface Props {
+  name: string;
+  nameKo: string;
+  story: string;
+  abv: string;
+  src: string;
+  glassType: string;
+}
+
+function DetailItem({ name, nameKo, story, src, abv, glassType }: Props) {
+  const alcoholTitle = labelTitle(abv);
 
-function DetailItem() {
   return (
     <div className="flex flex-col items-center">
-      <div
-        className="flex flex-col gap-3 relative md:flex-row md:justify-between 
-              md:ml-15 md:w-150
-              lg:ml-30 lg:w-187.5 h-50"
-      >
-        <div className="flex flex-col gap-1 items-center md:items-end">
-          <span>
-            <Label title="레시피" />
-          </span>
-          <h2 className="font-serif font-bold text-3xl  lg:text-4xl text-secondary">
-            Old Fashioned
+      <div className="flex flex-col w-full gap-3 relative md:flex-row md:justify-between md:w-150 md:gap-20  lg:w-187.5 h-50">
+        <div className="flex flex-col gap-1 items-center md:items-end md:w-1/2">
+          <span>{alcoholTitle && <Label title={alcoholTitle} />}</span>
+          <h2 className="w-fit font-serif font-bold  text-right text-3xl lg:text-4xl text-secondary ">
+            {name}
           </h2>
           <h2 className="font-serif font-bold text-right text-xl lg:text-4xl text-secondary">
-            올드 패션드
+            {nameKo}
           </h2>
         </div>
 
-        <p className="w-70 text-base  mr-5 md:text-sm md:mr-0 lg:text-base md:self-end text-secondary md:w-70 lg:w-100">
-          쿠바 아바나의 전설적인 바 엘 플로리디타(El Floridita).이곳에서 노벨문학상 작가 어니스트
-          헤밍웨이가 즐겨 찾던 특별한 한 잔이 탄생했습니다.
+        <p className=" text-base self-center w-3/4 md:text-sm md:self-end text-secondary md:w-70 lg:text-base lg:w-100">
+          {story}
         </p>
-        <span className="absolute w-0.5 h-11 -bottom-15 left-1/2 -translate-x-1/2 z-2 bg-secondary md:bg-transparent"></span>
-        <span className="absolute w-3 h-3 rounded-full -bottom-16 z-2 left-1/2 -translate-x-1/2 bg-secondary md:bg-transparent"></span>
+
+        <span className="absolute w-0.5 h-11 -bottom-37 md:-bottom-3 left-1/2 -translate-x-1/2 z-2 bg-secondary md:bg-transparent"></span>
+        <span className="absolute w-3 h-3 rounded-full -bottom-38 z-2 left-1/2 -translate-x-1/2 bg-secondary md:bg-transparent"></span>
       </div>
 
-      <div
-        className="rounded-2xl mt-12
-           [filter:drop-shadow(0_0_20px_rgba(255,255,255,0.3))]
-          "
-      >
-        <Image src="" alt="" width="300" height="375" />
+      <div className="rounded-2xl overflow-hidden w-75 h-93.75 mt-32 md:mt-4 lg:mt-7 [filter:drop-shadow(0_0_20px_rgba(255,255,255,0.3))]">
+        <Image src={src} alt={`${nameKo}사진`} fill className="object-cover" />
       </div>
 
       <dl className="flex flex-col mt-5 gap-3 w-75">
@@ -46,7 +50,7 @@ function DetailItem() {
             <span>|</span>
           </dt>
           <dd className="flex gap-3 items-center">
-            <p className="text-xs">24.8%</p>
+            <p className="text-xs">{abv}</p>
             <AbvGraph />
           </dd>
         </div>
@@ -57,7 +61,7 @@ function DetailItem() {
           </dt>
           <dd className="flex items-center gap-2">
             <Short />
-            <p>숏 드링크</p>
+            <p>{glassType} 드링크</p>
           </dd>
         </div>
       </dl>

src/domains/recipe/details/DetailMain.tsx

@@ -7,11 +7,54 @@ import SsuryShake from '@/shared/assets/ssury/ssury_make.webp';
 import SsuryDrink from '@/shared/assets/ssury/ssury_drink.webp';
 import Image from 'next/image';
 import DetailList from './DetailList';
-import { Suspense } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import SkeletonDetail from '../skeleton/SkeletonDetail';
 import RecipeComment from '../components/details/RecipeComment';
+import { useParams } from 'next/navigation';
+import { getApi } from '@/app/api/config/appConfig';
 
 function DetailMain() {
+  const { id } = useParams();
+
+  const [cocktail, setCocktail] = useState();
+
+  const fetchData = async () => {
+    const res = await fetch(`${getApi}/cocktails/${id}`);
+    const json = await res.json();
+    if (!res.ok) throw new Error('데이터 요청 실패');
+    setCocktail(json.data);
+  };
+
+  useEffect(() => {
+    fetchData();
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      // 레시피 페이지로 돌아가지 않는 경우 (헤더 탭 클릭 등)
+      // 네비게이션 플래그를 제거하여 스크롤 복원 방지
+      const currentPath = window.location.pathname;
+
+      // 디테일 페이지를 벗어나는 경우
+      if (!currentPath.includes('/recipe')) {
+        sessionStorage.removeItem('cocktails_scroll_state_nav_flag');
+      }
+    };
+  }, []);
+
+  if (!cocktail) return;
+  const {
+    cocktailImgUrl,
+    cocktailName,
+    cocktailNameKo,
+    cocktailStory,
+    alcoholStrength,
+    cocktailType,
+    ingredient,
+    recipe,
+  } = cocktail;
+
   return (
     <Suspense fallback={<SkeletonDetail />}>
       <div className="max-w-1024 page-layout py-12">
@@ -20,7 +63,14 @@ function DetailMain() {
         <article className="flex flex-col items-center mt-4 lg:mt-0">
           <span className="md:bg-secondary w-1 h-100 -translate-y-19 absolute top-0 left-1/2 -translate-x-1/2 md: z-2"></span>
           <span className="h-3 w-3 rounded-full absolute  top-80 left-1/2 -translate-x-1/2 z-99 md:bg-secondary"></span>
-          <DetailItem />
+          <DetailItem
+            name={cocktailName}
+            nameKo={cocktailNameKo}
+            story={cocktailStory}
+            src={cocktailImgUrl}
+            abv={alcoholStrength}
+            glassType={cocktailType}
+          />
         </article>
 
         <section className="mt-20 flex flex-col gap-5">
@@ -30,7 +80,7 @@ function DetailMain() {
               <h3 className="text-3xl font-bold">레시피</h3>
             </div>
           </div>
-          <DetailRecipe />
+          <DetailRecipe ingredient={ingredient} recipe={recipe} />
         </section>
 
         <section className="mt-20" aria-labelledby="옆으로 슬라이드되는 리스트">

src/domains/recipe/details/DetailRecipe.tsx

@@ -1,32 +1,30 @@
-function DetailRecipe() {
+interface Props {
+  ingredient: string;
+  recipe: string;
+}
+
+function DetailRecipe({ ingredient, recipe }: Props) {
+  const ingredients = ingredient.trim().split(',').filter(Boolean);
+  const recipes = recipe.trim().split('.').filter(Boolean);
+
   return (
     <div className="flex flex-col md:flex-row  px-5 gap-5">
       <article className="flex flex-col gap-4 w-[50%]">
         <h4 className="text-2xl font-bold">재료</h4>
         <ul className="flex flex-col gap-2">
-          <li className="text-lg">
-            럼 <span className="text-sm text-white/80">1 1/2oz | 90ml</span>
-          </li>
-          <li className="text-lg">
-            심플시럽 <span className="text-sm text-white/80">1/2oz | 30ml</span>
-          </li>
-          <li className="text-lg">
-            라임 <span className="text-sm text-white/80">1/2개</span>
-          </li>
-          <li className="text-lg">
-            자몽 <span className="text-sm text-white/80">1/2개</span>
-          </li>
+          {ingredients.map((v, i) => (
+            <li key={i}>{v}</li>
+          ))}
         </ul>
       </article>
 
-      <span className="border-t-1 pt-5 md:border-l-1 md:border-t-0 md:px-10 border-white">
+      <span className="border-t-1 w-1/2 pt-5 md:border-l-1 md:border-t-0 md:px-10 border-white">
         <article className="flex flex-col gap-4 ">
           <h4 className="text-2xl font-bold">만드는 법</h4>
           <ol className="flex flex-col gap-2 pl-4 list-decimal">
-            <li>셰이커에 라임즙을 착즙기로 짜 넣습니다</li>
-            <li>셰이커에 자몽즙을 착즙기로 짜 넣습니다</li>
-            <li>셰이커에 재료를 넣습니다</li>
-            <li>셰이킹 후 잔에 따라줍니다</li>
+            {recipes.map((v, i) => (
+              <li key={i}>{v}</li>
+            ))}
           </ol>
         </article>
       </span>

src/domains/recipe/details/DetailRecommendList.tsx

@@ -1,11 +1,8 @@
-import Image from 'next/image';
-
+// import Image from 'next/image';
 function DetailRecommendList() {
   return (
     <div className="flex flex-col gap-3">
-      <div className="max-h-75">
-        <Image src={''} alt="" />
-      </div>
+      <div className="max-h-75">{/* <Image src="" alt="" /> */}</div>
       <div className="flex flex-col gap-1">
         <h4 className="font-serif  text-base lg:text-lg">Old Fashioned</h4>
         <p className="font-serif text-base">올드패션드</p>

src/domains/recipe/details/DetailsHeader.tsx

@@ -4,7 +4,7 @@ import Keep from '@/domains/shared/components/keep/Keep';
 
 function DetailsHeader() {
   return (
-    <div className="mt-4 flex items-center justify-between ">
+    <div className="flex items-center justify-between ">
       <BackBtn />
       <div className="flex items-center gap-3">
         <Share size="sm" />