Feat: 게시글 삭제 #65

Author: jiyeeeah

components/ui/BoardCard/BoardCardPackage/BoardCardDropdown.tsx

@@ -2,24 +2,29 @@ import DotsIcon from 'public/DotsIcon.svg';
 import copyToClipBoard from '@/utils/copyToClipBoard';
 import useAddBookmark from '@/hooks/mutations/useAddBookmark';
 import useDeleteBookmark from '@/hooks/mutations/useDeleteBookmark';
+import useDeleteBoard from '@/hooks/mutations/useDeleteBoard';
 import { Dropdown } from '../../ui';
 
 export default function PostCardDropdown({
   boardId, // TODO : 북마크 되어있는지 확인
-  // isBookmarked,
+  isMyBoard, // isBookmarked,
 }: {
   boardId: number;
+  isMyBoard: boolean;
   // isBookmarked: boolean;
 }) {
   const { mutate: addBookmark } = useAddBookmark();
   const { mutate: deleteBookmark } = useDeleteBookmark();
+  const { mutate: deleteBoard } = useDeleteBoard(boardId);
+
   const handleBookmark = () => {
     // if (isBookmarked) {
     deleteBookmark(boardId);
     // } else {
     // addBookmark(boardId);
     // }
   };
+
   return (
     <Dropdown>
       <Dropdown.Trigger>
@@ -30,6 +35,9 @@ export default function PostCardDropdown({
         <Dropdown.Item event={() => copyToClipBoard(window.location.href)}>
           공유하기
         </Dropdown.Item>
+        {isMyBoard ? (
+          <Dropdown.Item event={() => deleteBoard()}>삭제하기</Dropdown.Item>
+        ) : null}
       </Dropdown.Menu>
     </Dropdown>
   );

components/ui/BoardCard/BoardCardPackage/Header.tsx

@@ -1,33 +1,30 @@
 import useRelativeTime from '@/hooks/common/useRelativeTime';
+import { Board } from '@/types/types';
+import useGetUserInfo from '@/hooks/queries/useGetUserInfo';
 import Avatar from '../../Avatar';
 import FlexBox from '../../FlexBox';
 import BoardCardDropdown from './BoardCardDropdown';
 
-export default function BoardCardHeader({
-  userName,
-  userImage,
-  createdDate,
-  boardId,
-}: {
-  userName: string;
-  userImage: string;
-  createdDate: string;
-  boardId: number;
-}) {
+export default function BoardCardHeader({ board }: { board: Board }) {
+  const { data: user } = useGetUserInfo();
+
   return (
     <FlexBox justify="between" className="w-full">
       <FlexBox className="gap-[10px]">
-        <Avatar size="xl" image={userImage} name={String(userName)} />
+        <Avatar size="xl" image={board.userImageUrl} name={board.writer} />
         <FlexBox direction="column" align="start" className="gap-1">
           <FlexBox className="gap-2">
-            <div className="header4 text-grey-800">{userName}</div>
+            <div className="header4 text-grey-800">{board.writer}</div>
           </FlexBox>
           <div className="caption2 text-grey-400">
-            {useRelativeTime(createdDate)}
+            {useRelativeTime(board.createdDate)}
           </div>
         </FlexBox>
       </FlexBox>
-      <BoardCardDropdown boardId={boardId} />
+      <BoardCardDropdown
+        boardId={board.id}
+        isMyBoard={board.userId === user?.userId}
+      />
     </FlexBox>
   );
 }

components/ui/BoardCard/FeedBoardCard.tsx

@@ -16,12 +16,7 @@ export default function FeedBoardCard({
       justify="between"
       className="max-h-[500px] p-9 rounded-[10px] border-[1px] border-grey-200 gap-4"
     >
-      <BoardCard.Header
-        userName={board.writer}
-        createdDate={board.createdDate}
-        userImage={board.userImageUrl}
-        boardId={board.id}
-      />
+      <BoardCard.Header board={board} />
       <BoardCard.Content
         type="mainPC"
         content={board.content}

hooks/mutations/useDeleteBoard.ts

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

hooks/mutations/useDeleteComment.ts

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

service/board.ts

@@ -35,6 +35,32 @@ export async function getBoardList(pageParam: number) {
   }
 }
 
+export async function deleteBoard(boardId: number) {
+  const url = `/endpoint/api/board/remove/${boardId}`;
+  try {
+    const response = await fetch(url, {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    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 postComment(postCommentData: PostCommentType) {
   const url = `endpoint/api/reply/register`;
   const response = await fetch(url, {
@@ -77,7 +103,13 @@ 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);
+    const response = await fetch(url, {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
     if (response.status === 401) {
       throw new AuthError('로그인이 필요한 서비스입니다.');
     }

types/types.ts

@@ -12,6 +12,7 @@ export interface SidebarProps {
 }
 
 export interface Board {
+  userId: string;
   id: number;
   title: string;
   content: string;