refactor: MemberImage 컴포넌트로 교체

fun-eat · Apr 19, 2024 · 418f7d5 · 418f7d5
1 parent 134389b
commit 418f7d5
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 12 deletions.
diff --git 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
@@ -34,10 +34,6 @@ export const commentTextarea = style({
   },
 });
 
-export const profileImage = style({
-  borderRadius: '50%',
-});
-
 export const sendButtonStyles = style({
   display: 'inherit',
   width: 36,