Feat/칵테일 상세페이지#17

src/app/recipe/[id]/page.tsx

@@ -1,9 +1,11 @@
+import DetailMain from '@/domains/recipe/details/DetailMain';
 import StarBg from '@/shared/components/starBg/StarBg';
 
 function page() {
   return (
-    <div className="w-full">
-      <StarBg className="h-200 lg:h-202" />
+    <div className="w-full relative">
+      <StarBg className="absolute top-0 left-0 h-200 lg:h-200" />
+      <DetailMain />
     </div>
   );
 }

src/app/recipe/page.tsx

@@ -1,10 +1,10 @@
 import PageHeader from '@/shared/components/pageHeader/PageHeader';
 import { Metadata } from 'next';
-import Glass from '@/shared/assets/images/recipe_page_header.webp';
 import SelectBox from '@/shared/components/InputBox/SelectBox';
 import Input from '@/shared/components/InputBox/Input';
-import CocktailList from '@/shared/components/recipePage/cocktailList/CocktailList';
-import Accordion from './components/Accordion';
+
+import Accordion from '../../domains/recipe/components/main/Accordion';
+import CocktailList from '@/domains/recipe/CocktailList';
 
 export const metadata: Metadata = {
   title: 'SSOUL | 칵테일레시피',
@@ -15,11 +15,7 @@ function Page() {
   return (
     <div className="w-full">
       <section>
-        <PageHeader
-          src={Glass}
-          title="Cocktail Recipes"
-          description="다양하고 재밌는 칵테일 레시피"
-        />
+        <PageHeader title="Cocktail Recipes" description="다양하고 재밌는 칵테일 레시피" />
       </section>
       <div className="page-layout max-w-1224 mt-6">
         <section className="flex flex-col-reverse items-start gap-6 md:flex-row md:justify-between md:items-center ">

src/shared/components/recipePage/cocktailList/CocktailList.tsx → src/domains/recipe/CocktailList.tsx

@@ -1,5 +1,5 @@
 'use client';
-import CocktailCard from '../cocktailCard/CocktailCard';
+import CocktailCard from './CocktailCard';
 
 function CocktailList() {
   // const [data,setData] = useState([])

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

@@ -0,0 +1,15 @@
+'use client';
+import Back from '@/shared/assets/icons/back_36.svg';
+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="뒤로가기">
+      <Back />
+    </button>
+  );
+}
+export default BackBtn;

src/domains/recipe/details/DetailItem.tsx

@@ -0,0 +1,73 @@
+import PostLabel from '@/shared/components/community/PostLabel';
+import Image from 'next/image';
+import Short from '@/shared/assets/icons/short_36.svg';
+import Example from '@/shared/assets/images/dummy/exampleCocktail.png';
+
+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>
+            <PostLabel title="레시피" />
+          </span>
+          <h2 className="font-serif font-bold text-3xl  lg:text-4xl text-secondary">
+            Old Fashioned
+          </h2>
+          <h2 className="font-serif font-bold text-right text-xl lg:text-4xl text-secondary">
+            올드 패션드
+          </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>
+        <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>
+      </div>
+
+      <div
+        className="rounded-2xl mt-12
+           [filter:drop-shadow(0_0_20px_rgba(255,255,255,0.3))]
+          "
+      >
+        <Image src={Example} alt="" width="300" height="375" />
+      </div>
+
+      <dl className="flex flex-col mt-5 gap-3 w-75">
+        <div className="flex gap-3 items-center">
+          <dt className="flex gap-2">
+            <p className="text-base text-nowrap">도수</p>
+            <span>|</span>
+          </dt>
+          <dd className="flex gap-3 items-center">
+            <p className="text-xs">24.8%</p>
+            <div className="w-49 h-3 rounded-full overflow-hidden border-[0.5px] border-gray relative">
+              <div
+                className="absolute top-0 left-0 w-10  h-3 
+                  bg-linear-to-r from-[#FFCA8D] to-[#FA2424]
+                  "
+              ></div>
+            </div>
+          </dd>
+        </div>
+        <div className="flex items-center gap-3">
+          <dt className="flex gap-2 items-center">
+            <p>글래스 타입</p>
+            <span>|</span>
+          </dt>
+          <dd className="flex items-center gap-2">
+            <Short />
+            <p>숏 드링크</p>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+export default DetailItem;

src/domains/recipe/details/DetailMain.tsx

@@ -0,0 +1,43 @@
+import DetailItem from './DetailItem';
+import DetailRecipe from './DetailRecipe';
+import DetailsHeader from './DetailsHeader';
+import SsuryShake from '@/shared/assets/ssury/ssury_make.webp';
+import SsuryDrink from '@/shared/assets/ssury/ssury_drink.webp';
+import Image from 'next/image';
+
+function DetailMain() {
+  return (
+    <div className="max-w-1024 page-layout">
+      <DetailsHeader />
+
+      <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 />
+      </article>
+
+      <section className="mt-20 flex flex-col gap-5">
+        <div className="border-b-1 h-18 border-white">
+          <div className="flex items-center gap-3">
+            <Image src={SsuryShake} alt="" width="48" height="48" />
+            <h3 className="text-3xl font-bold">레시피</h3>
+          </div>
+        </div>
+        <DetailRecipe />
+      </section>
+
+      <section className="mt-20">
+        <div className="border-b-1 h-18 border-white">
+          <div className="flex items-center gap-3">
+            <Image src={SsuryDrink} alt="" width="48" height="48" />
+            <h3 className="text-3xl font-bold">추천리스트</h3>
+          </div>
+        </div>
+        {/* 여기에 컴포넌트 */}
+      </section>
+
+      <section>{/* 여기에 댓글 컴포넌트 */}</section>
+    </div>
+  );
+}
+export default DetailMain;

src/domains/recipe/details/DetailRecipe.tsx

@@ -0,0 +1,36 @@
+function DetailRecipe() {
+  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>
+        </ul>
+      </article>
+
+      <span className="border-t-1 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>
+          </ol>
+        </article>
+      </span>
+    </div>
+  );
+}
+export default DetailRecipe;

src/domains/recipe/details/DetailsHeader.tsx

@@ -0,0 +1,16 @@
+import Share from '@/shared/components/share/Share';
+import Keep from '@/shared/components/keep/Keep';
+import BackBtn from '../components/details/BackBtn';
+
+function DetailsHeader() {
+  return (
+    <div className="mt-4 flex items-center justify-between ">
+      <BackBtn />
+      <div className="flex items-center gap-3">
+        <Share />
+        <Keep />
+      </div>
+    </div>
+  );
+}
+export default DetailsHeader;

src/shared/components/community/CommunityHeader.tsx

@@ -1,10 +1,9 @@
 import PageHeader from '../pageHeader/PageHeader';
-import headerImg from '@/shared/assets/images/community_page_header.webp';
 
 function CommunityHeader() {
   return (
     <section aria-label="커뮤니티 헤더">
-      <PageHeader src={headerImg} title="Community" description="칵테일에 관한 모든 이야기" />
+      <PageHeader title="Community" description="칵테일에 관한 모든 이야기" />
     </section>
   );
 }

src/shared/components/keep/Keep.tsx

@@ -1,3 +1,4 @@
+'use client';
 import KeepIcon from '@/shared/assets/icons/keep_36.svg';
 import KeepIconActive from '@/shared/assets/icons/keep_active_36.svg';
 import { useState } from 'react';

src/shared/components/pageHeader/PageHeader.tsx

@@ -1,17 +1,14 @@
-import Image, { StaticImageData } from 'next/image';
 import StarBg from '../starBg/StarBg';
 
 interface Props {
-  src: StaticImageData;
   title: string;
   description: string;
 }
 
-function PageHeader({ src, title, description }: Props) {
+function PageHeader({ title, description }: Props) {
   return (
     <StarBg className="relative h-40 md:h-65 lg:h-80">
       <div className="absolute bottom-0 left-1/2 -translate-x-1/2">
-        <Image src={src} alt="" width={src.width} height={src.height} />
         <div className="text-center text-nowrap font-serif font-bold flex flex-col absolute left-1/2 -translate-x-1/2 bottom-4 md:bottom-9 lg:bottom-[55px]">
           <h1 className="text-shadow-[0_0_12px_#1a1a1a]  text-3xl md:text-5xl lg:text-3xl lg:text-[64px]">
             {title}

src/shared/components/share/Share.tsx

@@ -15,8 +15,8 @@ function Share({ onClick, variants = 'default', title, content }: Props) {
       type="button"
       className={
         variants == 'community'
-          ? 'w-13.75 h-13.75 flex-center border-1 border-white rounded-full'
-          : ''
+          ? 'w-13.75 h-13.75 flex-center border-1 border-white rounded-full z-1'
+          : 'z-1'
       }
       aria-label="공유하기"
       onClick={onClick}