refactor: textarea 확장에 따른 스타일 수정

fun-eat · Jul 31, 2024 · 7372294 · 7372294
1 parent d00f281
commit 7372294
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/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>

diff --git a/src/components/Recipe/CommentForm/commentForm.css.ts b/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: 'center',
+  alignItems: 'flex-end',
   width: '100%',
-  padding: '6px 16px 6px 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',