feat: 댓글 form 스타일 수정

fun-eat · Apr 13, 2024 · 8d5990f · 8d5990f
1 parent 00cc55a
commit 8d5990f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 28 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 { useState } from 'react';
+import { useRef, useState } from 'react';
 
-import { commentForm, commentTextarea, container } from './commentForm.css';
+import { commentForm, commentTextarea, container, profileImage, sendButton } from './commentForm.css';
 
 import { SvgIcon, Text } from '@/components/Common';
 import { useScroll } from '@/hooks/common';
@@ -27,8 +27,18 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => {
 
   const { scrollToPosition } = useScroll();
 
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  const autoResizeTextarea = () => {
+    if (textAreaRef.current) {
+      textAreaRef.current.style.height = 'auto';
+      textAreaRef.current.style.height = textAreaRef.current.scrollHeight + 'px';
+    }
+  };
+
   const handleCommentInput: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
     setCommentValue(e.target.value);
+    autoResizeTextarea();
   };
 
   const handleSubmitComment: FormEventHandler<HTMLFormElement> = (e) => {
@@ -56,28 +66,37 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => {
 
   return (
     <div className={container}>
-      <img src={member?.profileImage} width={29} height={29} alt={`${member?.nickname}의 프로필 사진`} />
-      <form className={commentForm} onSubmit={handleSubmitComment}>
-        <textarea
-          className={commentTextarea}
-          placeholder="댓글을 남겨보세요! (200자)"
-          value={commentValue}
-          onChange={handleCommentInput}
-          maxLength={MAX_COMMENT_LENGTH}
-          rows={1}
-        />
-        <Text size="caption4" color="disabled">
-          {commentValue.length}/200
-        </Text>
-        <button>
-          <SvgIcon
-            variant="plane"
-            width={18}
-            height={18}
-            fill={commentValue.length === 0 ? vars.colors.gray3 : vars.colors.gray5}
+      <img
+        className={profileImage}
+        src={member?.profileImage}
+        width={29}
+        height={29}
+        alt={`${member?.nickname}의 프로필 사진`}
+      />
+      <>
+        <form className={commentForm} onSubmit={handleSubmitComment}>
+          <textarea
+            className={commentTextarea}
+            placeholder="댓글을 남겨보세요! (200자)"
+            value={commentValue}
+            onChange={handleCommentInput}
+            maxLength={MAX_COMMENT_LENGTH}
+            rows={1}
+            ref={textAreaRef}
           />
-        </button>
-      </form>
+          <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>
+        </form>
+      </>
     </div>
   );
 };

diff --git a/src/components/Recipe/CommentForm/commentForm.css.ts b/src/components/Recipe/CommentForm/commentForm.css.ts
@@ -4,18 +4,18 @@ import { style } from '@vanilla-extract/css';
 export const container = style({
   display: 'flex',
   gap: 8,
-  alignItems: 'center',
+  alignItems: 'flex-end',
   marginBottom: 24,
-  padding: '6px 13px 6px 6px',
-  background: vars.colors.background.category,
-  borderRadius: 20,
 });
 
 export const commentForm = style({
   display: 'flex',
   gap: 8,
-  alignItems: 'center',
+  alignItems: 'flex-end',
   width: '100%',
+  padding: '6px 16px 9px 16px',
+  background: vars.colors.background.category,
+  borderRadius: 20,
 });
 
 export const commentTextarea = style({
@@ -25,10 +25,19 @@ export const commentTextarea = style({
   outline: 'none',
   background: 'none',
   fontSize: '1.4rem',
+  resize: 'none',
 
   selectors: {
     '&:placeholder': {
       color: '#808080',
     },
   },
 });
+
+export const profileImage = style({
+  borderRadius: '50%',
+});
+
+export const sendButton = style({
+  display: 'inherit',
+});