코멘트 section에 input 박스 추가

frontend/src/apis/posts.ts

@@ -25,9 +25,21 @@ export const postChangeZzim = async (moimId: number) => {
   });
   await checkStatus(response);
 };
-export const postWriteComment = async (moimId: number) => {
-  const response = await ApiClient.postWithAuth(`moim/${moimId}/comment`, {
-    moimId,
-  });
-  await checkStatus(response);
+export const postWriteComment = async (
+  moimId: number,
+  selectedComment: number,
+  message: string,
+) => {
+  if (selectedComment === 0) {
+    const response = await ApiClient.postWithAuth(`moim/${moimId}`, {
+      content: message,
+    });
+    await checkStatus(response);
+  } else {
+    const response = await ApiClient.postWithAuth(`moim/${moimId}`, {
+      parentId: selectedComment,
+      content: message,
+    });
+    await checkStatus(response);
+  }
 };

frontend/src/components/CommentCard/CommentCard.stories.tsx

@@ -18,14 +18,14 @@ export const Default: Story = {
       content: 'content',
       dateTime: '2023-04-04 14:00',
       profile: '',
-      child: [
+      children: [
         {
           commentId: 0,
           nickname: 'nickname',
           content: 'content',
           dateTime: '2023-04-04 14:00',
           profile: '',
-          child: [],
+          children: [],
         },
       ],
     },

frontend/src/components/CommentCard/CommentCard.style.ts

@@ -55,6 +55,9 @@ export const commentHeaderRight = (props: { theme: Theme }) => css`
     border: none;
   }
 `;
+export const contentBox = (props: { theme: Theme }) => css`
+  ${props.theme.typography.c2}
+`;
 
 export const timestamp = (props: { theme: Theme }) => css`
   ${props.theme.typography.c3}

frontend/src/components/CommentCard/CommentCard.tsx

@@ -14,7 +14,7 @@ export interface CommentCardProps extends HTMLProps<HTMLDivElement> {
 export default function CommentCard(props: CommentCardProps) {
   const theme = useTheme();
   const {
-    comment: { profile, nickname, dateTime, content, child },
+    comment: { profile, nickname, dateTime, content, children },
     onWriteClick,
   } = props;
 
@@ -29,17 +29,15 @@ export default function CommentCard(props: CommentCardProps) {
               <div css={S.timestamp({ theme })}>{dateTime}</div>
             </div>
             <div css={S.commentHeaderRight({ theme })}>
-              <button>수정</button>
-              <button>삭제</button>
               <button onClick={onWriteClick}>답글쓰기</button>
             </div>
           </div>
-          <div>{content}</div>
+          <div css={S.contentBox({ theme })}>{content}</div>
         </div>
       </div>
-      {child && child.length > 0 && (
+      {children && (
         <div css={S.commentChildBox()}>
-          {child.map((childComment) => (
+          {children.map((childComment) => (
             <CommentCard key={childComment.commentId} comment={childComment} />
           ))}
         </div>

frontend/src/components/CommentList/CommentList.stories.tsx

@@ -12,21 +12,22 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    moimId: 1,
     comments: [
       {
         commentId: 0,
         nickname: 'nickname',
         content: 'content',
         dateTime: '2023-04-04 14:00',
         profile: '',
-        child: [
+        children: [
           {
             commentId: 0,
             nickname: 'nickname',
             content: 'content',
             dateTime: '2023-04-04 14:00',
             profile: '',
-            child: [],
+            children: [],
           },
         ],
       },
@@ -36,19 +37,18 @@ export const Default: Story = {
         content: 'content',
         dateTime: '2023-04-04 14:00',
         profile: '',
-        child: [
+        children: [
           {
             commentId: 4,
             nickname: 'nickname',
             content: 'content',
             dateTime: '2023-04-04 14:00',
             profile: '',
-            child: [],
+            children: [],
           },
         ],
       },
     ],
-    onWriteClick: () => {},
   },
   render: (args) => <CommentList {...args} />,
 };

frontend/src/components/CommentList/CommentList.tsx

@@ -1,15 +1,19 @@
 import CommentCard from '@_components/CommentCard/CommentCard';
 import * as S from '@_components/CommentList/ComentList.style';
+import MessageInput from '@_components/Input/MessagInput/MessageInput';
+import useWriteComment from '@_hooks/mutaions/useWriteComment';
 import { Comment } from '@_types/index';
-import { HTMLProps } from 'react';
+import { HTMLProps, useState } from 'react';
 
 interface CommentListProps extends HTMLProps<HTMLDivElement> {
+  moimId: number;
   comments: Comment[];
-  onWriteClick: () => void;
 }
 
 export default function CommentList(props: CommentListProps) {
-  const { comments, onWriteClick } = props;
+  const { moimId, comments } = props;
+  const { mutate: writeComment } = useWriteComment();
+  const [selectedComment, setSelectedCommnet] = useState(0);
 
   return (
     <div css={S.commentListBox()}>
@@ -18,10 +22,16 @@ export default function CommentList(props: CommentListProps) {
           <CommentCard
             key={comment.commentId}
             comment={comment}
-            onWriteClick={onWriteClick}
+            onWriteClick={() => setSelectedCommnet(comment.commentId)}
           />
         );
       })}
+      <MessageInput
+        placeHolder={'메세지를 입력해주세요'}
+        onSubmit={(message: string) =>
+          writeComment({ moimId, message, selectedComment })
+        }
+      ></MessageInput>
     </div>
   );
 }

frontend/src/hooks/mutaions/useWriteComment.ts

@@ -1,16 +1,22 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-
 import QUERY_KEYS from '@_constants/queryKeys';
 import { postWriteComment } from '@_apis/posts';
 
+interface WriteCommentParams {
+  moimId: number;
+  selectedComment: number;
+  message: string;
+}
+
 export default function useWriteComment() {
   const queryClient = useQueryClient();
 
-  return useMutation<void, Error, number>({
-    mutationFn: postWriteComment,
-    onSuccess: (_, moimId) => {
+  return useMutation<void, Error, WriteCommentParams>({
+    mutationFn: ({ moimId, selectedComment, message }) =>
+      postWriteComment(moimId, selectedComment, message),
+    onSuccess: (_, { moimId }) => {
       queryClient.invalidateQueries({
-        queryKey: [QUERY_KEYS.comment, moimId],
+        queryKey: [QUERY_KEYS.moim, moimId],
       });
     },
   });

frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx

@@ -16,7 +16,6 @@ import ZzimButton from '@_components/Zzim/ZzimButton';
 import useChamyoMine from '@_hooks/queries/useChamyoMine';
 import useZzimMine from '@_hooks/queries/useZzimMine';
 import useChangeZzim from '@_hooks/mutaions/useChangeZzim';
-import useWriteComment from '@_hooks/mutaions/useWriteComment';
 import useCancelMoim from '@_hooks/mutaions/useCancelMoim';
 import useReopenMoim from '@_hooks/mutaions/useReopenMoim';
 import useCompleteMoin from '@_hooks/mutaions/useCompleteMoin';
@@ -36,7 +35,7 @@ export default function MoimDetailPage() {
   const { mutate } = useJoinMoim(() => {
     navigate(ROUTES.participationComplete);
   });
-  const { mutate: writeComment } = useWriteComment();
+
   const { mutate: cancelMoim } = useCancelMoim();
 
   const { mutate: ReopenMoim } = useReopenMoim();
@@ -100,10 +99,7 @@ export default function MoimDetailPage() {
         )}
         {moim.comments && (
           <MoimDescription title="코멘트" color="grey">
-            <CommentList
-              comments={moim.comments}
-              onWriteClick={() => writeComment(moimId)}
-            />
+            <CommentList moimId={moimId} comments={moim.comments} />
           </MoimDescription>
         )}
       </InformationLayout.ContentContainer>

frontend/src/types/index.d.ts

@@ -28,7 +28,7 @@ export interface Comment {
   content: string;
   dateTime: string;
   profile: string;
-  child: Comment[];
+  children: Comment[];
 }
 export type MoimInputInfo = Omit<
   MoimInfo,