Feat: 댓글 등록 api 연결 #65

Author: jiyeeeah

components/pages/main/Feed/BoardsList/index.tsx

@@ -47,6 +47,7 @@ export default function BoardsList({
                   setShowModal={setShowModal}
                   comments={board.replyListDto}
                   commentsCount={board.replyCount}
+                  boardId={board.id}
                 />
               </div>
             ))

components/pages/main/Feed/FeedHeader/Upload.tsx

@@ -77,7 +77,7 @@ export default function Upload() {
           파일
         </Button>
         {isUploading ? (
-          <div>업로드 중</div>
+          <div>업로드 중입니다</div>
         ) : (
           <Button
             size="lg"

components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx

@@ -1,15 +1,48 @@
 import Image from 'next/image';
+import { useState } from 'react';
+import { postComment } from '@/service/board';
+import Toast from '@/utils/notification';
 import FlexBox from '../../FlexBox';
+import Button from '../../Button';
 
 export function BoardCardCommentWrapper({
   children,
   isModal = false,
   commentsNum,
+  boardId,
 }: {
   children: React.ReactNode;
   isModal?: boolean;
   commentsNum: number;
+  boardId: number;
 }) {
+  const [commentText, setCommentText] = useState('');
+  const [isUploading, setIsUploading] = useState(false);
+
+  // 데이터 전송을 위한 함수
+  const onUploadComment = async () => {
+    if (!commentText) {
+      return;
+    }
+    setIsUploading(true);
+    try {
+      const response = await postComment({
+        boardId,
+        parentId: 1,
+        content: commentText,
+      });
+      if (response.content) {
+        Toast.success('댓글이 성공적으로 업로드되었습니다.');
+        setCommentText('');
+      } else {
+        Toast.error('업로드에 실패했습니다. 잠시 후 다시 시도해주세요.');
+      }
+    } catch (error) {
+      Toast.error('오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
+    } finally {
+      setIsUploading(false);
+    }
+  };
   return (
     <FlexBox
       direction="column"
@@ -59,7 +92,12 @@ export function BoardCardCommentWrapper({
           type="text"
           placeholder="댓글로 이웃과 소통해보세요!"
           className="border rounded-[10px] py-[16px] px-[20px] w-full body4 text-grey-400"
+          value={commentText}
+          onChange={(event) => setCommentText(event.target.value)}
         />
+        <Button onClickAction={() => onUploadComment()} disabled={isUploading}>
+          등록
+        </Button>
       </FlexBox>
     </FlexBox>
   );

components/ui/BoardCard/FeedBoardCard.tsx

@@ -10,6 +10,7 @@ interface FeedBoardCardProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
   comments: Comment[] | undefined;
   commentsCount: number;
+  boardId: number;
 }
 
 export default function FeedBoardCard({
@@ -19,6 +20,7 @@ export default function FeedBoardCard({
   setShowModal,
   comments,
   commentsCount,
+  boardId,
 }: FeedBoardCardProps) {
   return (
     <FlexBox
@@ -33,7 +35,10 @@ export default function FeedBoardCard({
         imgs={imgs}
         onClickModal={() => setShowModal(true)}
       >
-        <BoardCard.BoardCardCommentWrapper commentsNum={commentsCount}>
+        <BoardCard.BoardCardCommentWrapper
+          commentsNum={commentsCount}
+          boardId={boardId}
+        >
           <FlexBox
             direction="column"
             justify="start"

components/ui/BoardCard/ModalBoardCard.tsx

@@ -3,24 +3,24 @@ import { BoardCardModal } from '@/components/ui/BoardCard/BoardCardPackage/Board
 
 interface ModalBoardCardProps {
   userId: string;
-  imgs?: string[];
+  imgs: string[];
   content: string;
   comments: Comment[] | undefined;
+  commentsCount: number;
 }
 export default function ModalBoardCard({
   userId,
   imgs,
   content,
   comments,
+  commentsCount,
 }: ModalBoardCardProps) {
-  const filteredCommentsCount = comments ? comments.length : 0;
-
   return (
     <BoardCardModal imgs={imgs}>
       <BoardCardModal.Header userId={userId} />
       <BoardCardModal.Content type="modal" content={content} imgs={imgs}>
         <BoardCardModal.BoardCardCommentWrapper
-          commentsNum={filteredCommentsCount}
+          commentsNum={commentsCount}
           isModal
         >
           {comments?.map((comment) => (

components/ui/BoardModal/index.tsx

@@ -33,13 +33,10 @@ export default function BoardModal({
         {board ? (
           <ModalBoardCard
             userId={board.writer}
-            imgs={[
-              // TODO: 이미지 연결
-              '/Feed/desktop/tempPostPic/tempPostPic1.svg',
-              '/Feed/desktop/tempPostPic/tempPostPic3.svg',
-            ]}
+            imgs={board.fileNames}
             content={board.title}
             comments={comments}
+            commentsCount={board.replyCount}
           />
         ) : (
           <div>내용이 없습니다.</div>

hooks/queries/useGetBoardList.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import getBoardList from '@/service/board';
+import { getBoardList } from '@/service/board';
 import { BoardList } from '@/types/types';
 
 interface InfiniteScrollProps {

service/board.ts

@@ -5,7 +5,12 @@ interface PostBoardType {
   content: string;
 }
 
-interface TempPostListApiProps {
+interface PostCommentType {
+  boardId: number;
+  parentId: number;
+  content: string;
+}
+interface GetListApiProps {
   pageParam: number;
   pageSize: number;
 }
@@ -24,10 +29,7 @@ export async function postBoard(postBoardData: PostBoardType) {
   return response.json();
 }
 
-export default async function getBoardList({
-  pageParam,
-  pageSize,
-}: TempPostListApiProps) {
+export async function getBoardList({ pageParam, pageSize }: GetListApiProps) {
   try {
     const url = `/endpoint/api/board/list?pageNumber=${pageParam}&pageSize=${pageSize}`;
     const response = await fetch(url);
@@ -43,3 +45,34 @@ export default async function getBoardList({
     throw error;
   }
 }
+
+export async function postComment(postCommentData: PostCommentType) {
+  const url = `endpoint/api/reply/register`;
+
+  const response = await fetch(url, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(postCommentData),
+  });
+  return response.json();
+}
+
+// export async function getCommentList({ pageParam, pageSize }: GetListApiProps) {
+//   try {
+//     const url = `/endpoint/api/reply/list?pageNumber=${pageParam}&pageSize=${pageSize}`;
+//     const response = await fetch(url);
+//     if (!response.ok) {
+//       throw new Error(`서버오류:${response.status}`);
+//     }
+//     return await response.json();
+//   } catch (error) {
+//     if (error instanceof AuthError) {
+//       window.location.replace('/auth/login');
+//       alert(error.message);
+//     }
+//     throw error;
+//   }
+// }