[Change 🚜 ] 댓글 관련 컴포넌트 분리

src/pages/ProjectDetailPage/components/Comments/Comments.tsx

@@ -1,7 +1,7 @@
 import { Comment } from "api-models"
 
-import CommentsForm from "./CommentsForm"
-import CommentsList from "./CommentsList"
+import CommentsForm from "./CommentsForm/CommentsForm"
+import CommentsList from "./CommentsList/CommentsList"
 import CommentsLayout from "./Layout/CommentsLayout"
 
 export interface CommentsProps {

src/pages/ProjectDetailPage/components/Comments/CommentsForm.tsx → src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx

@@ -1,8 +1,4 @@
-// TODO: 1. 빈 값일때 처리(Toast로 구현)
-//       2. 일정 높이 이상일때 높이가 늘어나지 않고 스크롤바
-//       3. ownerId는 userInfo에서
-//       3. 대댓글일때 parentId를 동적으로 받아야 하는 문제 해결
-//       4. isAnonymous 처리
+// TODO: 익명 처리
 import { SubmitHandler, useForm } from "react-hook-form"
 import ResizeTextarea from "react-textarea-autosize"
 
@@ -11,8 +7,8 @@ import { useUserInfoData } from "@services/caches/useUserInfoData"
 
 import { usePostCommentMutation } from "@pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation"
 
-import { CommentFormValues } from "../../types/commentFormValues"
-import { ProjectIdProps, withProjectId } from "./Hoc/withProjectId"
+import { CommentFormValues } from "../../../types/commentFormValues"
+import { ProjectIdProps, withProjectId } from "../Hoc/withProjectId"
 
 interface CommentsFormProps extends ProjectIdProps {
   parentId?: number | null

src/pages/ProjectDetailPage/components/Comments/CommentsAvatar.tsx → src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsAvatar.tsx

@@ -1,4 +1,3 @@
-// TODO: 전역으로 빼기
 import { Avatar, AvatarProps } from "@chakra-ui/react"
 import { CommentUser } from "api-models"
 

src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsEditFormText.tsx

@@ -0,0 +1,72 @@
+import ResizeTextarea from "react-textarea-autosize"
+
+import { Box, HStack, Text, Textarea } from "@chakra-ui/react"
+
+import { CommentsItemProps } from "@pages/ProjectDetailPage/types/commentItem"
+
+import CommentsButton from "./CommentsButton"
+
+interface CommentsEditFormTextProps
+  extends Omit<
+    CommentsItemProps,
+    | "handleOnReply"
+    | "handleOffReply"
+    | "replyTargetCommentId"
+    | "handleNavigateProfile"
+    | "isReply"
+  > {}
+
+const CommentsEditFormText = ({
+  comment,
+  handleOnEdit,
+  handleOffEdit,
+  handleDelete,
+  handleSubmit,
+  onSubmitEdit,
+  editTargetCommentId,
+  isEditing,
+  register,
+}: CommentsEditFormTextProps) => {
+  return (
+    <Box w="100%">
+      <form onSubmit={handleSubmit(onSubmitEdit)}>
+        <HStack
+          justify="space-between"
+          w="100%">
+          {editTargetCommentId === comment.id && isEditing ? (
+            <Textarea
+              rows={1}
+              w="100%"
+              fontSize="lg"
+              p="0.2rem"
+              as={ResizeTextarea}
+              isRequired={false}
+              resize="none"
+              {...register}
+            />
+          ) : (
+            <Text
+              fontSize="lg"
+              p="0.2rem">
+              {comment.content}
+            </Text>
+          )}
+          <HStack gap="1rem">
+            <CommentsButton
+              {...{
+                editTargetCommentId,
+                comment,
+                isEditing,
+                handleDelete,
+                handleOnEdit,
+                handleOffEdit,
+              }}
+            />
+          </HStack>
+        </HStack>
+      </form>
+    </Box>
+  )
+}
+
+export default CommentsEditFormText

src/pages/ProjectDetailPage/components/Comments/CommentsItem.tsx → src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx

@@ -1,15 +1,12 @@
 // TODO: 1. 포커스 자동 조정(register commentId 사용)
 //       2. 글자수 제한
-import ResizeTextarea from "react-textarea-autosize"
+import { Box, Button, HStack, Stack } from "@chakra-ui/react"
 
-import { Box, Button, HStack, Stack, Text } from "@chakra-ui/react"
-import { Textarea } from "@chakra-ui/react"
-
-import { CommentsItemProps } from "../../types/commentItem"
+import { CommentsItemProps } from "../../../types/commentItem"
+import CommentsForm from "../CommentsForm/CommentsForm"
 import CommentTitle from "./CommentTitle"
 import CommentsAvatar from "./CommentsAvatar"
-import CommentsButton from "./CommentsButton"
-import CommentsForm from "./CommentsForm"
+import CommentsEditFormText from "./CommentsEditFormText"
 import ReplyComment from "./ReplyComment"
 
 const CommentsItem = ({
@@ -57,45 +54,19 @@ const CommentsItem = ({
                 user={comment.user}
                 createdAt={comment.createdAt}
               />
-              <Box w="100%">
-                <form onSubmit={handleSubmit(onSubmitEdit)}>
-                  <HStack
-                    justify="space-between"
-                    w="100%">
-                    {editTargetCommentId === comment.id && isEditing ? (
-                      <Textarea
-                        rows={1}
-                        w="100%"
-                        fontSize="lg"
-                        p="0.2rem"
-                        as={ResizeTextarea}
-                        isRequired={false}
-                        resize="none"
-                        {...register}
-                      />
-                    ) : (
-                      <Text
-                        fontSize="lg"
-                        p="0.2rem">
-                        {comment.content}
-                      </Text>
-                    )}
-                    <HStack gap="1rem">
-                      <CommentsButton
-                        {...{
-                          editTargetCommentId,
-                          comment,
-                          isEditing,
-                          handleDelete,
-                          handleOnEdit,
-                          handleOffEdit,
-                        }}
-                      />
-                    </HStack>
-                  </HStack>
-                </form>
-              </Box>
-
+              <CommentsEditFormText
+                {...{
+                  handleSubmit,
+                  onSubmitEdit,
+                  editTargetCommentId,
+                  comment,
+                  isEditing,
+                  register,
+                  handleDelete,
+                  handleOnEdit,
+                  handleOffEdit,
+                }}
+              />
               {!comment.parentId &&
                 (isReply ? (
                   comment.id === replyTargetCommentId && (

src/pages/ProjectDetailPage/components/Comments/ReplyComment.tsx → src/pages/ProjectDetailPage/components/Comments/CommentsItem/ReplyComment.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex } from "@chakra-ui/react"
 import { Comment } from "api-models"
 
-import { CommentsItemProps } from "../../types/commentItem"
+import { CommentsItemProps } from "../../../types/commentItem"
 import CommentsItem from "./CommentsItem"
 
 interface ReplyCommentProps extends Omit<CommentsItemProps, "comment"> {

src/pages/ProjectDetailPage/components/Comments/CommentsList.tsx → src/pages/ProjectDetailPage/components/Comments/CommentsList/CommentsList.tsx

@@ -5,7 +5,7 @@ import { Comment } from "api-models"
 
 import { useComment } from "@pages/ProjectDetailPage/hooks/useComment"
 
-import CommentsItem from "./CommentsItem"
+import CommentsItem from "../CommentsItem/CommentsItem"
 
 interface CommentsListProps {
   comments: Comment[]