refactor: 디자인 2차 수정

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

@@ -13,6 +13,7 @@ export const productImage = style({
   width: '100%',
   height: 'auto',
   minWidth: 163,
+  borderRadius: 6,
   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.tsx

@@ -1,8 +1,8 @@
 import { useToastActionContext } from '@fun-eat/design-system';
 import type { ChangeEventHandler, FormEventHandler, RefObject } from 'react';
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 
-import { commentForm, commentTextarea, container, sendButton } from './commentForm.css';
+import { buttonWrapper, commentForm, commentTextarea, container, sendButton } from './commentForm.css';
 
 import { SvgIcon, Text } from '@/components/Common';
 import { MemberImage } from '@/components/Members';
@@ -65,26 +65,32 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => {
     );
   };
 
+  useEffect(() => {
+    autoResizeTextarea();
+  }, [commentValue]);
+
   return (
     <div className={container}>
-      <MemberImage src={member?.profileImage || ''} width={29} height={29} />
+      <MemberImage src={member?.profileImage || ''} width={33} height={33} />
       <>
         <form className={commentForm} onSubmit={handleSubmitComment}>
           <textarea
             className={commentTextarea}
-            placeholder="댓글을 남겨보세요! (200자)"
+            placeholder="댓글을 남겨보세요!"
             value={commentValue}
             onChange={handleCommentInput}
             maxLength={MAX_COMMENT_LENGTH}
             rows={1}
             ref={textAreaRef}
           />
-          <Text size="caption4" color="disabled">
-            {commentValue.length}/200
-          </Text>
-          <button className={commentValue.length === 0 ? sendButton['disabled'] : sendButton['active']}>
-            <SvgIcon variant="plane" width={14} height={14} fill={vars.colors.white} />
-          </button>
+          <div className={buttonWrapper}>
+            <Text size="caption4" color="disabled">
+              {commentValue.length}/200
+            </Text>
+            <button className={commentValue.length === 0 ? sendButton['disabled'] : sendButton['active']}>
+              <SvgIcon variant="plane" width={14} height={14} fill={vars.colors.white} />
+            </button>
+          </div>
         </form>
       </>
     </div>

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

@@ -3,24 +3,25 @@ import { style, styleVariants } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'flex',
-  gap: 8,
   alignItems: 'flex-end',
   marginBottom: 24,
+  gap: 8,
 });
 
 export const commentForm = style({
   display: 'flex',
-  gap: 8,
   alignItems: 'flex-end',
   width: '100%',
-  padding: '6px 16px 9px 16px',
+  padding: '6px 16px',
+  gap: 8,
   background: vars.colors.background.category,
   borderRadius: 20,
 });
 
 export const commentTextarea = style({
   width: '100%',
   height: '100%',
+  padding: '6px 0',
   border: 'none',
   outline: 'none',
   background: 'none',
@@ -34,8 +35,13 @@ export const commentTextarea = style({
   },
 });
 
+export const buttonWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+});
+
 export const sendButtonStyles = style({
-  display: 'inherit',
   width: 36,
   borderRadius: 45,
   padding: '4px 10px',

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',
+});