Fix: 댓글 폼 TextArea로 수정, 댓글/답글 관련 버그 수정

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({

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);
   };

src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx

@@ -1,21 +1,23 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useEffect } from 'react';
 
 import { useUser } from '@/store/useUser';
-import { useIsEditing } 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 { useIsEditing, useCommentStatus } from '@/store/useComment';
 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;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
   handleUpdate?: () => void;
-  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   imageSrc?: string;
   isEditing?: boolean;
   isPending: boolean;
@@ -31,16 +33,84 @@ function CommentForm({
   handleUpdate,
   handleCancel,
 }: CommentFormProps) {
+  const { status } = useCommentStatus();
   const { language } = useLanguage();
   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;
+    }
+    if (textareaRef.current.scrollHeight >= 30) {
+      return true;
+    }
+  };
 
   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 className={`${styles.formWrapperInner} ${!!activeNickname || isEditing ? styles.activeFormWrapper : ''}`}>
-        {activeNickname && (
+      <div
+        className={`${styles.formWrapperInner} ${!!activeNickname || isEditing || textAreaHeight() ? styles.activeFormWrapper : ''}`}
+      >
+        {status === 'createReply' && activeNickname && (
           <div className={styles.activeReplyWrapper}>
             <span className={styles.replyNickname}>
               {language === 'ko'
@@ -57,28 +127,31 @@ function CommentForm({
             />
           </div>
         )}
-        {isEditing && (
+        {status === 'edit' && isEditing && (
           <div className={styles.activeReplyWrapper}>
             <span className={styles.replyNickname}>{commentLocale[language].editing}</span>
             <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}>
-          <input
+        <form className={styles.formContainer} onSubmit={handleSubmitForm}>
+          <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
             }
+            onKeyDown={handleKeyDown}
           />
           {comment && (
             <button type="submit" disabled={isPending} className={styles.formButton}>

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: '60px',
 
   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({

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,8 +103,12 @@ function Comments() {
     }
   };
 
+  const handleSetComment = (comment: string) => {
+    setComment(comment);
+  };
+
   //댓글 폼 사용(추후 리액트 훅폼으로 수정해 볼 예정)
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     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);
     },
   });
@@ -181,7 +188,7 @@ function Comments() {
       setIsPending(true);
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments, commentId] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments] });
       addCommentId(commentId as number);
       scrollToRef();
     },
@@ -191,21 +198,22 @@ function Comments() {
       deleteReplyId();
       setIsNotEditing();
       setIsPending(false);
+      resetStatus();
     },
   });
 
   //댓글/답글 폼 submit 함수
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => {
     e.preventDefault();
     if (!comment.trim()) {
       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}

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);

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;