Feat/칵테일 추천리스트t#27 (#73)

* [style] 칵테일 리스트 간격수정

* [chore] swiper 추가

* [style]칵테일 추천리스트

* [style]추천리스트

* [style] 추천리스트

Author: mtm-git1018

src/domains/recipe/CocktailCard.tsx

@@ -1,7 +1,9 @@
 import { StaticImageData } from 'next/image';
 import Image from 'next/image';
 import Img from '@/shared/assets/images/dummy/exampleCocktail.png';
-import Keep from '../shared/components/keep/Keep';
+import Keep from '../shared/keep/Keep';
+import Label from '../shared/label/Label';
+
 
 interface Props {
   src?: StaticImageData;
@@ -11,19 +13,22 @@ interface Props {
 
 function CocktailCard({ src, name, nameKo }: Props) {
   return (
-    <li className="flex flex-col gap-4">
-      <div className="w-80 h-75 rounded-xl overflow-hidden md:w-62.5  relative">
+    <div className="flex flex-col gap-4">
+      <div className="aspect-[3/4] rounded-xl overflow-hidden max-w-80 max-h-75 md:max-w-62.5 relative">
         {/* <Image src={src} alt={name} fill /> */}
-        <Image src={Img} alt="" fill className="object-cover " />
-        <div className="flex justify-between absolute left-0 top-0">
+        <Image src={Img} alt="" fill className="w-full object-cover h-auto " />
+        <div className="flex w-full px-2 justify-between items-center absolute left-0 top-0">
+          <div>
+            <Label title="레시피" />
+          </div>
           <Keep />
         </div>
       </div>
       <div className="flex flex-col gap-1 font-bold font-serif">
         <h3 className="text-2xl">Old Fassioned</h3>
         <p className="text-base">올드 패션드</p>
       </div>
-    </li>
+    </div>
   );
 }
 export default CocktailCard;

src/domains/recipe/CocktailList.tsx

@@ -13,21 +13,32 @@ function CocktailList() {
   //   }, []);
 
   return (
-    <ul className="grid gap-8 justify-items-center grid-cols-1 md:grid-cols-3 lg:grid-cols-4 ">
+    <ul
+      className="
+    grid gap-8
+    grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4
+    justify-items-center sm:justify-items-stretch
+  "
+    >
       {/* {
         data.map(({ cocktailImgUrl, cocktailId, cocktailName }) => (
           <li key={cocktailId}>
             <CocktailCard src={cocktailImgUrl} name={cocktailName} nameKo={cocktailName} />
           </li>
         ))
       } */}
-
-      <CocktailCard />
-      <CocktailCard />
-      <CocktailCard />
-      <CocktailCard />
-      <CocktailCard />
-      <CocktailCard />
+      <li className="w-full min-w-0 max-w-[320px] sm:max-w-none mx-auto sm:mx-0">
+        <CocktailCard />
+      </li>
+      <li className="w-full min-w-0 max-w-[320px] sm:max-w-none mx-auto sm:mx-0">
+        <CocktailCard />
+      </li>{' '}
+      <li className="w-full min-w-0 max-w-[320px] sm:max-w-none mx-auto sm:mx-0">
+        <CocktailCard />
+      </li>{' '}
+      <li className="w-full min-w-0 max-w-[320px] sm:max-w-none mx-auto sm:mx-0">
+        <CocktailCard />
+      </li>
     </ul>
   );
 }

src/domains/recipe/details/DetailList.tsx

@@ -0,0 +1,18 @@
+import DetailRecommendList from "./DetailRecommendList";
+
+function DetailList() {
+  return (
+    <ul className='flex justify-between gap-2'>
+      <li>
+        <DetailRecommendList />
+      </li>
+      <li>
+        <DetailRecommendList />
+      </li>
+      <li>
+        <DetailRecommendList />
+      </li>
+    </ul>
+  );
+}
+export default DetailList;

src/domains/recipe/details/DetailMain.tsx

@@ -1,13 +1,17 @@
+'use client';
+
 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';
+import DetailList from './DetailList';
+
 
 function DetailMain() {
   return (
-    <div className="max-w-1024 page-layout">
+    <div className="max-w-1024 page-layout py-12">
       <DetailsHeader />
 
       <article className="flex flex-col items-center mt-4 lg:mt-0">
@@ -26,14 +30,18 @@ function DetailMain() {
         <DetailRecipe />
       </section>
 
-      <section className="mt-20">
+      <section className="mt-20" aria-labelledby="옆으로 슬라이드되는 리스트">
+        <h2 className="sr-only">추천 칵테일 리스트</h2>
         <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>
-        {/* 여기에 컴포넌트 */}
+
+        <div className="mt-5">
+          <DetailList />
+        </div>
       </section>
 
       <section>{/* 여기에 댓글 컴포넌트 */}</section>

src/domains/recipe/details/DetailRecommendList.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+import Example from '@/shared/assets/images/dummy/exampleCocktail.png';
+function DetailRecommendList() {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="max-h-75">
+        <Image src={Example} 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>
+      </div>
+    </div>
+  );
+}
+export default DetailRecommendList;