[style] 칵테일 리스트 grid 수정

Author: ahk0413

src/domains/recipe/main/CocktailList.tsx

@@ -27,21 +27,23 @@ function CocktailList({ cocktails, RecipeFetch, hasNextPage, lastId, onItemClick
 
   return (
     <ul
-      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))]
+      className="
+    grid gap-8 lg:justify-between justify-center
+    [grid-template-columns:repeat(1,minmax(0,250px))]
+    sm:[grid-template-columns:repeat(2,minmax(0,250px))]
+    md:[grid-template-columns:repeat(3,minmax(0,250px))]
+    lg:[grid-template-columns:repeat(4,minmax(0,250px))]
   "
     >
       {cocktails.map(
         ({ cocktailImgUrl, cocktailId, cocktailName, cocktailNameKo, alcoholStrength }) => (
-          <li key={cocktailId} onClick={onItemClick}>
+          <li key={cocktailId} onClick={onItemClick} className="w-full">
             <Link
               href={`/recipe/${cocktailId}`}
               onClick={() => {
                 sessionStorage.setItem('listScrollY', String(window.scrollY));
               }}
+              className="block"
             >
               <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-full max-w-[15.625rem] h-75'} rounded-xl overflow-hidden relative`,
           className
         )}
       >