Feat: 댓글 삭제 기능 추가 #65

puppypawpaw · Oct 23, 2023 · f708721 · f708721
1 parent 5379f68
commit f708721
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 32 deletions.
diff --git a/components/ui/BoardCard/BoardCardPackage/BoardCardModalPackage/ModalComments.tsx b/components/ui/BoardCard/BoardCardPackage/BoardCardModalPackage/ModalComments.tsx
@@ -3,21 +3,35 @@
 import Image from 'next/image';
 import { useState } from 'react';
 import Avatar from '@/components/ui/Avatar';
+import useDeleteComment from '@/hooks/mutations/useDeleteComment';
 import FlexBox from '../../../FlexBox';
 import Modal from '../../../Modal';
 
 export default function BoardCardModalComments({
+  boardId,
   id,
   userName,
   content,
+  isUser,
   userImage,
 }: {
+  boardId: number;
   id: number;
   userName: string;
   content: string;
+  isUser: boolean;
   userImage: string;
 }) {
   const [showSmallModal, setShowSmallModal] = useState(false);
+  const { mutate: deleteComment } = useDeleteComment();
+
+  const onDeleteComment = () => {
+    if (window.confirm('댓글을 삭제하시겠습니까?')) {
+      deleteComment({ boardId, replyId: id });
+    }
+  };
+
+  // TODO: 댓글 시간 연결!
 
   return (
     <div key={id}>
@@ -51,15 +65,26 @@ export default function BoardCardModalComments({
                 className={`gap-2 p-4 w-[324px] bg-white shadow-dropdown rounded-[10px] `}
               >
                 <li className="w-full rounded-[10px] hover:bg-primary-50 active:bg-primary-100">
-                  <button className="w-full p-3 body1" type="button">
-                    삭제하기
-                  </button>
+                  {userName ? (
+                    isUser && (
+                      <button
+                        className="w-full p-3 body1"
+                        type="button"
+                        onClick={onDeleteComment}
+                      >
+                        삭제하기
+                      </button>
+                    )
+                  ) : (
+                    <button
+                      type="button"
+                      className="w-full p-3 cursor-not-allowed body1"
+                      disabled
+                    >
+                      이미 삭제된 댓글입니다.
+                    </button>
+                  )}
                 </li>
-                {/* <li className="w-full rounded-[10px] hover:bg-primary-50 active:bg-primary-100">
-                  <button className="w-full p-3 body1" type="button">
-                    신고하기
-                  </button>
-                </li> */}
                 <li className="w-full rounded-[10px] hover:bg-primary-50 active:bg-primary-100">
                   <button
                     className="w-full p-3 body1"

diff --git a/components/ui/BoardCard/BoardIdCard.tsx b/components/ui/BoardCard/BoardIdCard.tsx
@@ -26,9 +26,11 @@ export default function BoardIdCard({ boardId }: { boardId: number }) {
             {commentList?.pages.map((page) =>
               page.content.map((comment) => (
                 <BoardCardId.BoardCardModalComments
+                  boardId={board.id}
                   id={comment.id}
                   userName={comment.nickname}
                   content={comment.content}
+                  isUser={comment.replyWriter}
                   userImage={comment.userImageUrl}
                 />
               )),

diff --git a/components/ui/BoardCard/ModalBoardCard.tsx b/components/ui/BoardCard/ModalBoardCard.tsx
@@ -26,9 +26,11 @@ export default function ModalBoardCard({ boardId }: { boardId: number }) {
             {commentList?.pages.map((page) =>
               page.content.map((comment) => (
                 <BoardCardModal.ModalComments
+                  boardId={board.id}
                   id={comment.id}
                   userName={comment.nickname}
                   content={comment.content}
+                  isUser={comment.replyWriter}
                   userImage={comment.userImageUrl}
                 />
               )),

diff --git a/hooks/mutations/useDeleteBoard.ts b/hooks/mutations/useDeleteBoard.ts
@@ -3,7 +3,7 @@ import { deleteBoard } from '@/service/board';
 import Toast from '@/utils/notification';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-export default function useDeleteComment(boardId: number) {
+export default function useDeleteBoard(boardId: number) {
   const queryClient = useQueryClient();
   const { mutate, isLoading } = useMutation({
     mutationFn: () => deleteBoard(boardId),

diff --git a/hooks/mutations/useDeleteComment.ts b/hooks/mutations/useDeleteComment.ts
@@ -5,17 +5,16 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 export default function useDeleteComment() {
   const queryClient = useQueryClient();
-
-  const { mutate, isLoading } = useMutation({
+  const { mutate } = useMutation({
     mutationFn: ({ boardId, replyId }: { boardId: number; replyId: number }) =>
       deleteComment(boardId, replyId),
     onSuccess: () => {
       Toast.success('댓글이 성공적으로 삭제 되었습니다.');
-      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
+      return queryClient.invalidateQueries([queryKeys.BOARD]);
     },
-    onError: () => {
-      Toast.error('댓글을 삭제하지 못했습니다. 잠시후 다시 시도해주세요.🥲');
+    onError: (error: Error) => {
+      Toast.error(error.message);
     },
   });
-  return { mutate, isLoading };
+  return { mutate };
 }
diff --git a/service/board.ts b/service/board.ts
@@ -143,27 +143,14 @@ export async function getCommentList(
 }
 
 export async function deleteComment(boardId: number, replyId: number) {
-  const url = `/endpoint/api/reply/remove/${boardId}/${replyId}`;
   try {
-    const response = await fetch(url, {
-      method: 'DELETE',
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    if (response.status === 401) {
-      throw new AuthError('로그인이 필요한 서비스입니다.');
-    }
+    const url = `/endpoint/api/reply/remove/${boardId}/${replyId}`;
+    const response = await fetch(url, { method: 'DELETE' });
     if (!response.ok) {
-      throw new Error(`서버오류:${response.status}`);
+      throw new Error('댓글 삭제에 실패했어요.🥲 잠시후 다시 시도해주세요.');
     }
-    return await response.json();
   } catch (error) {
-    if (error instanceof AuthError) {
-      window.location.replace('/auth/login');
-      alert(error.message);
-    }
+    console.error(error);
     throw error;
   }
 }