diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/src/components/Recipe/CommentForm/CommentForm.tsx index 34aecad2..b162150c 100644 --- 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(null); + + const autoResizeTextarea = () => { + if (textAreaRef.current) { + textAreaRef.current.style.height = 'auto'; + textAreaRef.current.style.height = textAreaRef.current.scrollHeight + 'px'; + } + }; + const handleCommentInput: ChangeEventHandler = (e) => { setCommentValue(e.target.value); + autoResizeTextarea(); }; const handleSubmitComment: FormEventHandler = (e) => { @@ -56,28 +66,37 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => { return (
- {`${member?.nickname}의 -
-