Feat: 댓글 삭제 api 추가 #65

Author: jiyeeeah

components/ui/BoardCard/BoardCardPackage/BoardCardModalPackage/ModalComments.tsx

@@ -52,14 +52,14 @@ export default function BoardCardModalComments({
               >
                 <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">
+                {/* <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> */}
                 <li className="w-full rounded-[10px] hover:bg-primary-50 active:bg-primary-100">
                   <button
                     className="w-full p-3 body1"

components/ui/BoardCard/ModalBoardCard.tsx

@@ -11,6 +11,7 @@ export default function ModalBoardCard({ board }: { board: Board }) {
         userName={board.writer}
         userImage={board.userImageUrl}
         createdDate={board.createdDate}
+        boardId={board.id}
       />
       <BoardCardModal.Content
         type="modal"

hooks/mutations/useDeleteComment.ts

@@ -0,0 +1,17 @@
+import { deleteComment } from '@/service/board';
+import Toast from '@/utils/notification';
+import { useMutation } from '@tanstack/react-query';
+
+export default function useDeleteComment() {
+  const { mutate, isLoading } = useMutation({
+    mutationFn: ({ boardId, replyId }: { boardId: number; replyId: number }) =>
+      deleteComment(boardId, replyId),
+    onSuccess: () => {
+      Toast.success('댓글이 성공적으로 삭제 되었습니다.');
+    },
+    onError: () => {
+      Toast.error('댓글을 삭제하지 못했습니다. 잠시후 다시 시도해주세요.🥲');
+    },
+  });
+  return { mutate, isLoading };
+}

service/board.ts

@@ -74,6 +74,26 @@ 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);
+    if (response.status === 401) {
+      throw new AuthError('로그인이 필요한 서비스입니다.');
+    }
+    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;
+  }
+}
+
 export async function addBookmarkBoard(boardId: number) {
   const url = `endpoint/api/bookmark/add?boardId=${boardId}`;
   try {