From 05e7161c7f7d3b5ccf7483945963e0b28f53b4bc Mon Sep 17 00:00:00 2001
From: Nahyun <tarea202001@gmail.com>
Date: Wed, 13 Mar 2024 01:18:54 +0900
Subject: [PATCH 1/4] =?UTF-8?q?Fix:=20=EB=8B=B5=EA=B8=80=20=EC=BA=90?=
 =?UTF-8?q?=EC=8B=B1=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
index f39623a6..bbbfde3b 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
@@ -181,7 +181,7 @@ function Comments() {
       setIsPending(true);
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments, commentId] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments] });
       addCommentId(commentId as number);
       scrollToRef();
     },

From 049e823be11877f3bbbb9db0151e9c952742ecb4 Mon Sep 17 00:00:00 2001
From: Nahyun <tarea202001@gmail.com>
Date: Wed, 13 Mar 2024 02:16:33 +0900
Subject: [PATCH 2/4] =?UTF-8?q?Fix:=20=EB=8B=B5=EA=B8=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1,=20=EC=88=98=EC=A0=95=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/ListDetailOuter/Comment.tsx   | 14 ++++++++++----
 .../ListDetailOuter/CommentForm.tsx           |  7 ++++---
 .../_components/ListDetailOuter/Comments.tsx  | 19 ++++++++++++++-----
 .../_components/ListDetailOuter/Replies.tsx   |  4 +++-
 src/store/useComment.ts                       | 14 ++++++++++++++
 5 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx
index 1b7f296b..25a631fb 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx
@@ -11,7 +11,7 @@ import timeDiff from '@/lib/utils/time-diff';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { CommentType } from '@/lib/types/commentType';
 import { UserType } from '@/lib/types/userProfileType';
-import { useCommentId } from '@/store/useComment';
+import { useCommentId, useCommentStatus } from '@/store/useComment';
 import { commentLocale } from '@/app/list/[listId]/locale';
 
 import * as styles from './Comment.css';
@@ -25,9 +25,10 @@ import { useLanguage } from '@/store/useLanguage';
  */
 interface CommentProps {
   comment?: CommentType;
-  onUpdate: (userName?: string) => void;
+  setActiveNickname: (userName?: string) => void;
   activeNickname?: string | null;
   handleSetCommentId: (id: number | undefined) => void;
+  handleSetComment: (comment: string) => void;
   listId?: number;
   commentId?: number;
   currentUserInfo?: UserType;
@@ -36,17 +37,18 @@ interface CommentProps {
 
 function Comment({
   comment,
-  onUpdate,
+  setActiveNickname: onUpdate,
   handleSetCommentId,
+  handleSetComment,
   listId,
   commentId,
   currentUserInfo,
-
   handleEdit,
 }: CommentProps) {
   const { language } = useLanguage();
   const queryClient = useQueryClient();
   const { setCommentId } = useCommentId();
+  const { setStatusCreateReply, setStatusEdit } = useCommentStatus();
 
   //현재 작성중인 답글의 원댓글 정보를 업데이트 하는 로직
   const handleActiveNicknameAndIdUpdate = () => {
@@ -55,11 +57,15 @@ function Comment({
     if (!currentUserName && !currentCommentId) {
       return null;
     }
+    handleSetComment('');
+    setStatusCreateReply();
     onUpdate(currentUserName);
     handleSetCommentId(currentCommentId);
   };
 
+  //수정하기 버튼을 누르면 실행되는 함수
   const handleEditButtonClick = (comment: string) => {
+    setStatusEdit();
     handleEdit(comment);
     setCommentId(commentId as number);
   };
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
index b1b3069a..211e24fe 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent } from 'react';
 
 import { useUser } from '@/store/useUser';
-import { useIsEditing } from '@/store/useComment';
+import { useIsEditing, useCommentStatus } from '@/store/useComment';
 import * as styles from './Comments.css';
 import CancelButton from '/public/icons/cancel_button.svg';
 import { vars } from '@/styles/theme.css';
@@ -31,6 +31,7 @@ function CommentForm({
   handleUpdate,
   handleCancel,
 }: CommentFormProps) {
+  const { status } = useCommentStatus();
   const { language } = useLanguage();
   const { isEditing } = useIsEditing();
 
@@ -40,7 +41,7 @@ function CommentForm({
   return (
     <div className={styles.formWrapperOuter}>
       <div className={`${styles.formWrapperInner} ${!!activeNickname || isEditing ? styles.activeFormWrapper : ''}`}>
-        {activeNickname && (
+        {status === 'createReply' && activeNickname && (
           <div className={styles.activeReplyWrapper}>
             <span className={styles.replyNickname}>
               {language === 'ko'
@@ -57,7 +58,7 @@ function CommentForm({
             />
           </div>
         )}
-        {isEditing && (
+        {status === 'edit' && isEditing && (
           <div className={styles.activeReplyWrapper}>
             <span className={styles.replyNickname}>{commentLocale[language].editing}</span>
             <CancelButton
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
index bbbfde3b..b627115c 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
@@ -16,7 +16,7 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { CommentType } from '@/lib/types/commentType';
 import { UserType } from '@/lib/types/userProfileType';
 import { useUser } from '@/store/useUser';
-import { useReplyId, useCommentId, useCommentIdStore, useIsEditing } from '@/store/useComment';
+import { useReplyId, useCommentId, useCommentIdStore, useIsEditing, useCommentStatus } from '@/store/useComment';
 import Modal from '@/components/Modal/Modal';
 import CommentForm from './CommentForm';
 import LoginModal from '@/components/login/LoginModal';
@@ -39,8 +39,8 @@ function Comments() {
   const { replyId, deleteReplyId } = useReplyId();
   const { commentId, setCommentId, deleteCommentId } = useCommentId();
   const { setIsEditing, setIsNotEditing, isEditing } = useIsEditing();
+  const { status, resetStatus } = useCommentStatus();
   const bottomRef = useRef<HTMLDivElement>(null);
-  const replyBottomRef = useRef<HTMLDivElement>(null);
 
   //zustand로 관리하는 user정보 불러오기
   const { user } = useUser();
@@ -103,6 +103,10 @@ function Comments() {
     }
   };
 
+  const handleSetComment = (comment: string) => {
+    setComment(comment);
+  };
+
   //댓글 폼 사용(추후 리액트 훅폼으로 수정해 볼 예정)
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setComment(e.target.value);
@@ -121,6 +125,7 @@ function Comments() {
     setComment('');
     deleteCommentId();
     deleteReplyId();
+    resetStatus();
   };
 
   //댓글 생성 리액트 쿼리 함수
@@ -154,6 +159,7 @@ function Comments() {
       deleteCommentId();
       setActiveNickname(null);
       setIsPending(false);
+      resetStatus();
     },
   });
 
@@ -170,6 +176,7 @@ function Comments() {
       setComment('');
       deleteCommentId();
       setIsNotEditing();
+      resetStatus();
       setIsPending(false);
     },
   });
@@ -191,6 +198,7 @@ function Comments() {
       deleteReplyId();
       setIsNotEditing();
       setIsPending(false);
+      resetStatus();
     },
   });
 
@@ -201,11 +209,11 @@ function Comments() {
       return null;
     }
     if (comment.trim()) {
-      if (commentId && activeNickname) {
+      if (status === 'createReply' && commentId && activeNickname) {
         createReplyMutation.mutate();
         return;
       }
-      if (isEditing) {
+      if (status === 'edit') {
         if (replyId) {
           editReplyMutation.mutate();
           return;
@@ -276,9 +284,10 @@ function Comments() {
               ) : (
                 <Comment
                   comment={item}
-                  onUpdate={setActiveNickname}
+                  setActiveNickname={setActiveNickname}
                   activeNickname={activeNickname}
                   handleSetCommentId={handleSetCommentId}
+                  handleSetComment={handleSetComment}
                   listId={Number(params?.listId)}
                   commentId={item.id}
                   currentUserInfo={userInformation}
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx
index 76bdcf4c..1bc91aba 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx
@@ -4,7 +4,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import DeleteModalButton from '@/app/list/[listId]/_components/ListDetailOuter/DeleteModalButton';
 import deleteReply from '@/app/_api/comment/deleteReply';
-import { useCommentIdStore, useReplyId, useCommentId } from '@/store/useComment';
+import { useCommentIdStore, useReplyId, useCommentId, useCommentStatus } from '@/store/useComment';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import timeDiff from '@/lib/utils/time-diff';
 import { ReplyType } from '@/lib/types/commentType';
@@ -78,6 +78,7 @@ interface ReplyProps {
 function Reply({ reply, listId, currentUserInfo, handleEdit, commentId }: ReplyProps) {
   const { language } = useLanguage();
   const queryClient = useQueryClient();
+  const { setStatusEdit } = useCommentStatus();
   const { setCommentId } = useCommentId();
   const { setReplyId } = useReplyId();
   const deleteReplyMutation = useMutation({
@@ -88,6 +89,7 @@ function Reply({ reply, listId, currentUserInfo, handleEdit, commentId }: ReplyP
   });
 
   const handleEditButtonClick = (content: string) => {
+    setStatusEdit();
     handleEdit(content);
     setCommentId(commentId as number);
     setReplyId(reply?.id);
diff --git a/src/store/useComment.ts b/src/store/useComment.ts
index 00862c59..dd38a5e5 100644
--- a/src/store/useComment.ts
+++ b/src/store/useComment.ts
@@ -47,3 +47,17 @@ export const useIsEditing = create<UseIsEditingType>((set) => ({
   setIsNotEditing: () => set({ isEditing: false }),
   setToggleEditing: (state) => set({ isEditing: !state }),
 }));
+
+interface useCommentStatusType {
+  status: null | 'edit' | 'createReply';
+  setStatusEdit: () => void;
+  setStatusCreateReply: () => void;
+  resetStatus: () => void;
+}
+
+export const useCommentStatus = create<useCommentStatusType>((set) => ({
+  status: null,
+  setStatusEdit: () => set({ status: 'edit' }),
+  setStatusCreateReply: () => set({ status: 'createReply' }),
+  resetStatus: () => set({ status: null }),
+}));

From e9d3217d8adb3679160e96b4078d42517c2dd096 Mon Sep 17 00:00:00 2001
From: Nahyun <tarea202001@gmail.com>
Date: Wed, 13 Mar 2024 18:04:08 +0900
Subject: [PATCH 3/4] =?UTF-8?q?Fix:=20=EB=8C=93=EA=B8=80=20form=20input?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20textarea=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

---
 .../ListDetailOuter/CommentForm.tsx           | 37 +++++++++++++++----
 .../ListDetailOuter/Comments.css.ts           | 14 +++++--
 .../_components/ListDetailOuter/Comments.tsx  |  2 +-
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
index 211e24fe..12e99d91 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
@@ -2,20 +2,22 @@ import { ChangeEvent } from 'react';
 
 import { useUser } from '@/store/useUser';
 import { useIsEditing, useCommentStatus } from '@/store/useComment';
-import * as styles from './Comments.css';
-import CancelButton from '/public/icons/cancel_button.svg';
-import { vars } from '@/styles/theme.css';
-import Airplane from '/public/icons/airplane_send.svg';
 import { useLanguage } from '@/store/useLanguage';
+import useResizeTextarea from '@/hooks/useResizeTextarea';
 import { commentPlaceholder } from '@/lib/constants/placeholder';
 import { commentLocale } from '@/app/list/[listId]/locale';
 
+import { vars } from '@/styles/theme.css';
+import * as styles from './Comments.css';
+import CancelButton from '/public/icons/cancel_button.svg';
+import Airplane from '/public/icons/airplane_send.svg';
+
 interface CommentFormProps {
   comment?: string;
   activeNickname?: string | null;
   handleSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
   handleUpdate?: () => void;
-  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   imageSrc?: string;
   isEditing?: boolean;
   isPending: boolean;
@@ -34,13 +36,30 @@ function CommentForm({
   const { status } = useCommentStatus();
   const { language } = useLanguage();
   const { isEditing } = useIsEditing();
+  const { textareaRef, handleResizeHeight } = useResizeTextarea();
+
+  const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    handleChange(e);
+    handleResizeHeight();
+  };
+
+  const textAreaHeight = () => {
+    if (textareaRef.current === null) {
+      return false;
+    }
+    if (textareaRef.current.scrollHeight >= 30) {
+      return true;
+    }
+  };
 
   const { user } = useUser();
   const userId = user.id;
 
   return (
     <div className={styles.formWrapperOuter}>
-      <div className={`${styles.formWrapperInner} ${!!activeNickname || isEditing ? styles.activeFormWrapper : ''}`}>
+      <div
+        className={`${styles.formWrapperInner} ${!!activeNickname || isEditing || textAreaHeight() ? styles.activeFormWrapper : ''}`}
+      >
         {status === 'createReply' && activeNickname && (
           <div className={styles.activeReplyWrapper}>
             <span className={styles.replyNickname}>
@@ -72,11 +91,13 @@ function CommentForm({
           </div>
         )}
         <form className={styles.formContainer} onSubmit={handleSubmit}>
-          <input
+          <textarea
+            rows={1}
             className={styles.formInput}
             value={comment}
-            onChange={handleChange}
+            onChange={handleTextareaChange}
             disabled={!userId}
+            ref={textareaRef}
             placeholder={
               userId === null ? commentPlaceholder[language].requiredLogin : commentPlaceholder[language].comment
             }
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
index cc01d947..50828985 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
@@ -52,17 +52,25 @@ export const formContainer = style({
 });
 
 export const formInput = style({
-  width: 'inherit',
-  height: 'auto',
+  width: '100%',
+  height: '20px',
+  maxHeight: '80px',
 
   flex: '1 0 0',
 
+  display: 'block',
+  overflow: 'hidden',
+  resize: 'none',
+  outline: 'none',
+  border: 'none',
   fontSize: '1.6rem',
   wordBreak: 'break-all',
   wordWrap: 'break-word',
   whiteSpace: 'pre-wrap',
-  resize: 'none',
   backgroundColor: vars.color.gray3,
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
 });
 
 export const replyNickname = style({
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
index b627115c..47b721a9 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
@@ -108,7 +108,7 @@ function Comments() {
   };
 
   //댓글 폼 사용(추후 리액트 훅폼으로 수정해 볼 예정)
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setComment(e.target.value);
   };
 

From 3e3e55cf9e9e2ceeebae4881d04fe6a616a7b1ae Mon Sep 17 00:00:00 2001
From: Nahyun <tarea202001@gmail.com>
Date: Wed, 13 Mar 2024 22:45:49 +0900
Subject: [PATCH 4/4] =?UTF-8?q?Fix:=20=EB=8C=93=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=9D=B4=ED=9B=84=20=EC=9E=90=EB=8F=99=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20textarea=20=ED=81=AC=EA=B8=B0=20=EB=B0=94=EB=80=8C?=
 =?UTF-8?q?=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ListDetailOuter/Comment.css.ts            |  1 +
 .../ListDetailOuter/CommentForm.tsx           | 59 +++++++++++++++++--
 .../ListDetailOuter/Comments.css.ts           |  2 +-
 .../_components/ListDetailOuter/Comments.tsx  |  2 +-
 src/hooks/useEnterKeyDown.ts                  | 17 ++++++
 5 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 src/hooks/useEnterKeyDown.ts

diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts
index 251a5623..c13a3c9a 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts
@@ -65,6 +65,7 @@ export const commentContent = style({
   fontWeight: 500,
   lineHeight: 'normal',
   letterSpacing: '-0.36px',
+  wordBreak: 'break-word',
 });
 
 export const deletedComment = style({
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
index 12e99d91..7717f2ff 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useEffect } from 'react';
 
 import { useUser } from '@/store/useUser';
 import { useIsEditing, useCommentStatus } from '@/store/useComment';
@@ -15,7 +15,7 @@ import Airplane from '/public/icons/airplane_send.svg';
 interface CommentFormProps {
   comment?: string;
   activeNickname?: string | null;
-  handleSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
   handleUpdate?: () => void;
   handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   imageSrc?: string;
@@ -38,11 +38,37 @@ function CommentForm({
   const { isEditing } = useIsEditing();
   const { textareaRef, handleResizeHeight } = useResizeTextarea();
 
+  const handleResetTextArea = () => {
+    if (textareaRef.current !== null) {
+      textareaRef.current.style.height = '20px';
+    }
+  };
+
   const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     handleChange(e);
     handleResizeHeight();
   };
 
+  const handleSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
+    handleSubmit(e);
+    // handleResizeHeight();
+    handleResetTextArea();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey && !isPending) {
+      // handleResizeHeight();
+      handleResetTextArea();
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  const handleCancelForm = () => {
+    handleCancel();
+    handleResizeHeight();
+  };
+
   const textAreaHeight = () => {
     if (textareaRef.current === null) {
       return false;
@@ -55,6 +81,30 @@ function CommentForm({
   const { user } = useUser();
   const userId = user.id;
 
+  useEffect(() => {
+    const textarea = textareaRef.current;
+
+    const handleBlur = () => {
+      handleResizeHeight();
+    };
+
+    const handleFocus = () => {
+      handleResizeHeight();
+    };
+
+    if (textarea) {
+      textarea.addEventListener('blur', handleBlur);
+      textarea.addEventListener('focus', handleFocus);
+    }
+
+    return () => {
+      if (textarea) {
+        textarea.removeEventListener('blur', handleBlur);
+        textarea.removeEventListener('focus', handleFocus);
+      }
+    };
+  }, [textareaRef, handleResizeHeight]);
+
   return (
     <div className={styles.formWrapperOuter}>
       <div
@@ -83,14 +133,14 @@ function CommentForm({
             <CancelButton
               className={styles.clearButton}
               alt={commentLocale[language].cancelButtonAlt}
-              onClick={handleCancel}
+              onClick={handleCancelForm}
               width={18}
               height={18}
               fill={vars.color.gray7}
             />
           </div>
         )}
-        <form className={styles.formContainer} onSubmit={handleSubmit}>
+        <form className={styles.formContainer} onSubmit={handleSubmitForm}>
           <textarea
             rows={1}
             className={styles.formInput}
@@ -101,6 +151,7 @@ function CommentForm({
             placeholder={
               userId === null ? commentPlaceholder[language].requiredLogin : commentPlaceholder[language].comment
             }
+            onKeyDown={handleKeyDown}
           />
           {comment && (
             <button type="submit" disabled={isPending} className={styles.formButton}>
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
index 50828985..8c77149e 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
@@ -54,7 +54,7 @@ export const formContainer = style({
 export const formInput = style({
   width: '100%',
   height: '20px',
-  maxHeight: '80px',
+  maxHeight: '60px',
 
   flex: '1 0 0',
 
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
index 47b721a9..7b9f0346 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
@@ -203,7 +203,7 @@ function Comments() {
   });
 
   //댓글/답글 폼 submit 함수
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => {
     e.preventDefault();
     if (!comment.trim()) {
       return null;
diff --git a/src/hooks/useEnterKeyDown.ts b/src/hooks/useEnterKeyDown.ts
new file mode 100644
index 00000000..82e17d4f
--- /dev/null
+++ b/src/hooks/useEnterKeyDown.ts
@@ -0,0 +1,17 @@
+interface IProps {
+  handleSubmit: (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  isSubmitting: boolean;
+}
+
+function usePressEnterFetch({ handleSubmit, isSubmitting }: IProps) {
+  const handlePressEnterFetch = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey && !isSubmitting) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return { handlePressEnterFetch };
+}
+
+export default usePressEnterFetch;