Feat: 댓글 등록 #65

Author: jiyeeeah

components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx

@@ -1,7 +1,6 @@
 import Image from 'next/image';
 import { useState } from 'react';
-import { postComment } from '@/service/board';
-import Toast from '@/utils/notification';
+import usePostComment from '@/hooks/mutations/usePostComment';
 import FlexBox from '../../FlexBox';
 import Button from '../../Button';
 
@@ -19,32 +18,16 @@ export function BoardCardCommentWrapper({
   likedCount: number;
 }) {
   const [commentText, setCommentText] = useState('');
-  const [isUploading, setIsUploading] = useState(false);
+  const { mutate: commentMutate, isLoading } = usePostComment();
 
-  // 데이터 전송을 위한 함수
-  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);
-    }
+  const postNewComment = () => {
+    commentMutate({
+      boardId,
+      parentId: 1,
+      content: commentText,
+    });
   };
+
   return (
     <FlexBox
       direction="column"
@@ -97,8 +80,8 @@ export function BoardCardCommentWrapper({
           value={commentText}
           onChange={(event) => setCommentText(event.target.value)}
         />
-        <Button onClickAction={() => onUploadComment()} disabled={isUploading}>
-          등록
+        <Button onClickAction={postNewComment} disabled={isLoading}>
+          {isLoading ? <p>등록 중...</p> : <span>등록</span>}
         </Button>
       </FlexBox>
     </FlexBox>

hooks/common/useRelativeTime.ts

@@ -8,14 +8,15 @@ export default function useRelativeTime(createdDate: string): string {
     const daysAgo = Math.floor(timeDifference / (24 * 60 * 60 * 1000));
     return `${daysAgo}일 전`;
   }
+  // 시간 단위
   if (
-    // 시간 단위
     timeDifference < 24 * 60 * 60 * 1000 &&
     timeDifference >= 60 * 60 * 1000
   ) {
     const hoursAgo = Math.floor(timeDifference / (60 * 60 * 1000));
     return `${hoursAgo}시간 전`;
   }
+  // 1시간 이내 일 경우
   if (timeDifference < 60 * 60 * 1000) {
     return '1시간 전';
   }

hooks/mutations/usePostComment.ts

@@ -0,0 +1,20 @@
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import Toast from '@/utils/notification';
+import { PostCommentType } from '@/types/types';
+import { postComment } from '@/service/board';
+
+export default function usePostComment() {
+  const queryClient = useQueryClient();
+  const { mutate, isLoading } = useMutation({
+    mutationFn: (postCommentData: PostCommentType) =>
+      postComment(postCommentData),
+    onSuccess: () => {
+      Toast.success('댓글이 성공적으로 업로드 되었습니다.');
+      return queryClient.invalidateQueries(['comment']);
+    },
+    onError: () => {
+      Toast.error('댓글을 업로드하지 못했습니다. 잠시후 다시 시도해주세요.🥲');
+    },
+  });
+  return { mutate, isLoading };
+}

service/board.ts

@@ -1,15 +1,5 @@
 import { AuthError } from '@/lib/error';
-
-interface PostBoardType {
-  title: string;
-  content: string;
-}
-
-interface PostCommentType {
-  boardId: number;
-  parentId: number;
-  content: string;
-}
+import { PostBoardType, PostCommentType } from '@/types/types';
 
 export async function postBoard(postBoardData: PostBoardType) {
   const url = `endpoint/api/board/register`;

types/types.ts

@@ -61,6 +61,17 @@ export interface Comment {
   // children: string[];
 }
 
+export interface PostBoardType {
+  title: string;
+  content: string;
+}
+
+export interface PostCommentType {
+  boardId: number;
+  parentId: number;
+  content: string;
+}
+
 export interface LocationInfoType {
   predictions: string[];
   location: {