diff --git a/src/pages/ProjectDetailPage/components/Comments/Comments.tsx b/src/pages/ProjectDetailPage/components/Comments/Comments.tsx
index 9fd3149e..547f0277 100644
--- a/src/pages/ProjectDetailPage/components/Comments/Comments.tsx
+++ b/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 {
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsForm.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx
similarity index 84%
rename from src/pages/ProjectDetailPage/components/Comments/CommentsForm.tsx
rename to src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx
index d43bf99c..c70d76f0 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsForm.tsx
+++ b/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
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentTitle.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentTitle.tsx
similarity index 100%
rename from src/pages/ProjectDetailPage/components/Comments/CommentTitle.tsx
rename to src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentTitle.tsx
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsAvatar.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsAvatar.tsx
similarity index 94%
rename from src/pages/ProjectDetailPage/components/Comments/CommentsAvatar.tsx
rename to src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsAvatar.tsx
index 5e64075a..9d5ea277 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsAvatar.tsx
+++ b/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"
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsButton.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsButton.tsx
similarity index 100%
rename from src/pages/ProjectDetailPage/components/Comments/CommentsButton.tsx
rename to src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsButton.tsx
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsEditFormText.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsEditFormText.tsx
new file mode 100644
index 00000000..7383354f
--- /dev/null
+++ b/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 (
+
+
+
+ )
+}
+
+export default CommentsEditFormText
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
similarity index 60%
rename from src/pages/ProjectDetailPage/components/Comments/CommentsItem.tsx
rename to src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
index bee58837..f2c3d5de 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem.tsx
+++ b/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}
/>
-
-
-
-
+
{!comment.parentId &&
(isReply ? (
comment.id === replyTargetCommentId && (
diff --git a/src/pages/ProjectDetailPage/components/Comments/EditingButton.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/EditingButton.tsx
similarity index 100%
rename from src/pages/ProjectDetailPage/components/Comments/EditingButton.tsx
rename to src/pages/ProjectDetailPage/components/Comments/CommentsItem/EditingButton.tsx
diff --git a/src/pages/ProjectDetailPage/components/Comments/OwnerButton.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/OwnerButton.tsx
similarity index 100%
rename from src/pages/ProjectDetailPage/components/Comments/OwnerButton.tsx
rename to src/pages/ProjectDetailPage/components/Comments/CommentsItem/OwnerButton.tsx
diff --git a/src/pages/ProjectDetailPage/components/Comments/ReplyComment.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/ReplyComment.tsx
similarity index 94%
rename from src/pages/ProjectDetailPage/components/Comments/ReplyComment.tsx
rename to src/pages/ProjectDetailPage/components/Comments/CommentsItem/ReplyComment.tsx
index 5d322f35..71394587 100644
--- a/src/pages/ProjectDetailPage/components/Comments/ReplyComment.tsx
+++ b/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 {
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsList.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsList/CommentsList.tsx
similarity index 96%
rename from src/pages/ProjectDetailPage/components/Comments/CommentsList.tsx
rename to src/pages/ProjectDetailPage/components/Comments/CommentsList/CommentsList.tsx
index 2c7aa836..0fe463f8 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsList.tsx
+++ b/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[]