From 134389beac726421beac6904055cea43076bd58a Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Thu, 18 Apr 2024 17:16:58 +0200
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EA=BF=80=EC=A1=B0=ED=95=A9=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Recipe/CommentForm/CommentForm.tsx    |  9 ++-------
 src/components/Recipe/CommentForm/commentForm.css.ts | 12 ++++++++++--
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/src/components/Recipe/CommentForm/CommentForm.tsx
index b162150c..4d0d785f 100644
--- a/src/components/Recipe/CommentForm/CommentForm.tsx
+++ b/src/components/Recipe/CommentForm/CommentForm.tsx
@@ -87,13 +87,8 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => {
           <Text size="caption4" color="disabled">
             {commentValue.length}/200
           </Text>
-          <button className={sendButton}>
-            <SvgIcon
-              variant="plane"
-              width={18}
-              height={18}
-              fill={commentValue.length === 0 ? vars.colors.gray3 : vars.colors.gray5}
-            />
+          <button className={commentValue.length === 0 ? sendButton['disabled'] : sendButton['active']}>
+            <SvgIcon variant="plane" width={14} height={14} fill={vars.colors.white} />
           </button>
         </form>
       </>
diff --git a/src/components/Recipe/CommentForm/commentForm.css.ts b/src/components/Recipe/CommentForm/commentForm.css.ts
index 3ebe1b3f..4c5bc55b 100644
--- a/src/components/Recipe/CommentForm/commentForm.css.ts
+++ b/src/components/Recipe/CommentForm/commentForm.css.ts
@@ -1,5 +1,5 @@
 import { vars } from '@/styles/theme.css';
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'flex',
@@ -38,6 +38,14 @@ export const profileImage = style({
   borderRadius: '50%',
 });
 
-export const sendButton = style({
+export const sendButtonStyles = style({
   display: 'inherit',
+  width: 36,
+  borderRadius: 45,
+  padding: '4px 10px',
+});
+
+export const sendButton = styleVariants({
+  active: [sendButtonStyles, { background: vars.colors.primary }],
+  disabled: [sendButtonStyles, { background: vars.colors.gray3 }],
 });

From 418f7d5b914a9687708c29fee52e6670a89beac3 Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Fri, 19 Apr 2024 09:31:20 +0200
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20MemberImage=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Recipe/CommentForm/CommentForm.tsx    | 11 +++--------
 src/components/Recipe/CommentForm/commentForm.css.ts |  4 ----
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/src/components/Recipe/CommentForm/CommentForm.tsx
index 4d0d785f..c0dcf52c 100644
--- a/src/components/Recipe/CommentForm/CommentForm.tsx
+++ b/src/components/Recipe/CommentForm/CommentForm.tsx
@@ -2,9 +2,10 @@ import { useToastActionContext } from '@fun-eat/design-system';
 import type { ChangeEventHandler, FormEventHandler, RefObject } from 'react';
 import { useRef, useState } from 'react';
 
-import { commentForm, commentTextarea, container, profileImage, sendButton } from './commentForm.css';
+import { commentForm, commentTextarea, container, sendButton } from './commentForm.css';
 
 import { SvgIcon, Text } from '@/components/Common';
+import { MemberImage } from '@/components/Members';
 import { useScroll } from '@/hooks/common';
 import { useMemberQuery } from '@/hooks/queries/members';
 import { useRecipeCommentMutation } from '@/hooks/queries/recipe';
@@ -66,13 +67,7 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => {
 
   return (
     <div className={container}>
-      <img
-        className={profileImage}
-        src={member?.profileImage}
-        width={29}
-        height={29}
-        alt={`${member?.nickname}의 프로필 사진`}
-      />
+      <MemberImage src={member?.profileImage || ''} width={29} height={29} alt={`${member?.nickname}의 프로필 사진`} />
       <>
         <form className={commentForm} onSubmit={handleSubmitComment}>
           <textarea
diff --git a/src/components/Recipe/CommentForm/commentForm.css.ts b/src/components/Recipe/CommentForm/commentForm.css.ts
index 4c5bc55b..a2fb3b99 100644
--- a/src/components/Recipe/CommentForm/commentForm.css.ts
+++ b/src/components/Recipe/CommentForm/commentForm.css.ts
@@ -34,10 +34,6 @@ export const commentTextarea = style({
   },
 });
 
-export const profileImage = style({
-  borderRadius: '50%',
-});
-
 export const sendButtonStyles = style({
   display: 'inherit',
   width: 36,

From fe2224bba80e2397360ce5bb99ab101347f7a00d Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Fri, 19 Apr 2024 09:31:41 +0200
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=20=EA=B0=84=EA=B2=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts b/src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts
index 02ed8b06..5f56bc18 100644
--- a/src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts
+++ b/src/components/Recipe/RecipeFavoriteButton/recipeFavoriteButton.css.ts
@@ -3,4 +3,5 @@ import { style } from '@vanilla-extract/css';
 export const container = style({
   display: 'flex',
   alignItems: 'center',
+  gap: 6,
 });