refactor: 디자인 2차 수정

src/components/Product/ProductItem/productItem.css.ts

@@ -13,6 +13,7 @@ export const productImage = style({
   width: '100%',
   height: 'auto',
   minWidth: 163,
+  borderRadius: '6px',
   objectFit: 'cover',
   aspectRatio: '1 / 1',
 });

src/components/Product/ProductRecipeList/ProductRecipeList.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-import { container, moreItem, notFound, recipeLink } from './productRecipeList.css';
+import { container, moreItem, notFound, recipeLink, wrapper } from './productRecipeList.css';
 
 import SearchNotFoundImage from '@/assets/search-notfound.png';
 import { Text, ShowAllButton } from '@/components/Common';
@@ -41,7 +41,7 @@ const ProductRecipeList = ({ productId, productName }: ProductRecipeListProps) =
   return (
     <ul className={container}>
       {recipeToDisplay.map((recipe) => (
-        <li key={recipe.id}>
+        <li key={recipe.id} className={wrapper}>
           <DefaultRecipeItem recipe={recipe} />
         </li>
       ))}

src/components/Product/ProductRecipeList/productRecipeList.css.ts

@@ -8,6 +8,12 @@ export const container = style({
   overflowX: 'auto',
 });
 
+export const wrapper = style({
+  height: '100%',
+  display: 'flex',
+  flex: '0 0 160px',
+});
+
 export const moreItem = style({
   display: 'flex',
   justifyContent: 'center',

src/components/Recipe/CommentForm/commentForm.css.ts

@@ -11,9 +11,9 @@ export const container = style({
 export const commentForm = style({
   display: 'flex',
   gap: 8,
-  alignItems: 'flex-end',
+  alignItems: 'center',
   width: '100%',
-  padding: '6px 16px 9px 16px',
+  padding: '6px 16px 6px 16px',
   background: vars.colors.background.category,
   borderRadius: 20,
 });

src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx

@@ -34,6 +34,7 @@ const RecipeFavoriteButton = ({ recipeId, favorite, favoriteCount }: RecipeFavor
           <SvgIcon variant="heartEmpty" width={24} height={24} />
         </div>
       )}
+      {favoriteCount && <div style={{ width: 6 }} />}
       <Text as="span" size="caption1" weight="medium" color="sub">
         {favoriteCount}
       </Text>

src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts

@@ -3,5 +3,4 @@ import { style } from '@vanilla-extract/css';
 export const container = style({
   display: 'flex',
   alignItems: 'center',
-  gap: 6,
 });

src/components/Search/RecipeSearchResultPreviewList/RecipeSearchResultPreviewList.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 
-import { listWrapper } from './recipeSearchResultPreviewList.css';
+import { container, wrapper } from './recipeSearchResultPreviewList.css';
 import SearchNotFound from '../SearchNotFound/SearchNotFound';
 
 import { ShowAllButton } from '@/components/Common';
@@ -26,9 +26,9 @@ const RecipeSearchResultPreviewList = ({ searchQuery }: RecipeSearchResultPrevie
   }
 
   return (
-    <ul className={listWrapper}>
+    <ul className={container}>
       {displaySlice(false, recipes, 4).map((recipe, idx) => (
-        <li key={recipe.id}>
+        <li key={recipe.id} className={wrapper}>
           {idx < 4 ? (
             <DefaultRecipeItem recipe={recipe} />
           ) : (

src/components/Search/RecipeSearchResultPreviewList/recipeSearchResultPreviewList.css.ts

@@ -1,8 +1,14 @@
 import { style } from '@vanilla-extract/css';
 
-export const listWrapper = style({
+export const container = style({
   display: 'flex',
   gap: 10,
   alignItems: 'center',
   overflowY: 'scroll',
 });
+
+export const wrapper = style({
+  height: '100%',
+  display: 'flex',
+  flex: '0 0 160px',
+});