Feat: 북마크되었는지 확인 후 삭제 및 추가 #65

Author: jiyeeeah

components/ui/BoardCard/BoardCardPackage/BoardCardDropdown.tsx

@@ -5,33 +5,34 @@ import useDeleteBookmark from '@/hooks/mutations/useDeleteBookmark';
 import useDeleteBoard from '@/hooks/mutations/useDeleteBoard';
 import { Dropdown } from '../../ui';
 
-export default function PostCardDropdown({
-  boardId, // TODO : 북마크 되어있는지 확인
-  isMyBoard, // isBookmarked,
+export default function BoardCardDropdown({
+  boardId,
+  isMyBoard,
+  isBookmarked,
 }: {
   boardId: number;
   isMyBoard: boolean;
-  // isBookmarked: 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>
         <DotsIcon className="w-6 h-6 tablet:w-7 tablet:h-7" />
       </Dropdown.Trigger>
       <Dropdown.Menu>
-        <Dropdown.Item event={handleBookmark}>북마크 추가</Dropdown.Item>
+        {isBookmarked ? (
+          <Dropdown.Item event={() => deleteBookmark(boardId)}>
+            북마크 삭제
+          </Dropdown.Item>
+        ) : (
+          <Dropdown.Item event={() => addBookmark(boardId)}>
+            북마크 추가
+          </Dropdown.Item>
+        )}
         <Dropdown.Item event={() => copyToClipBoard(window.location.href)}>
           공유하기
         </Dropdown.Item>

components/ui/BoardCard/BoardCardPackage/Header.tsx

@@ -27,6 +27,7 @@ export default function BoardCardHeader({ board }: { board: Board }) {
       <BoardCardDropdown
         boardId={board.id}
         isMyBoard={board.userId === user?.userId}
+        isBookmarked={board.bookmarked}
       />
     </FlexBox>
   );

hooks/mutations/useAddBookmark.ts

@@ -1,12 +1,16 @@
+import { queryKeys } from '@/constant/query-keys';
 import { addBookmarkBoard } from '@/service/board';
 import Toast from '@/utils/notification';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 export default function useAddBookmark() {
+  const queryClient = useQueryClient();
+
   const { mutate, isLoading } = useMutation({
     mutationFn: addBookmarkBoard,
     onSuccess: () => {
       Toast.success('북마크가 성공적으로 저장 되었습니다.');
+      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
     },
     onError: () => {
       Toast.error('북마크를 저장하지 못했습니다. 잠시후 다시 시도해주세요.🥲');

hooks/mutations/useDeleteBookmark.ts

@@ -1,12 +1,16 @@
+import { queryKeys } from '@/constant/query-keys';
 import { deleteBookmarkBoard } from '@/service/board';
 import Toast from '@/utils/notification';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 export default function useDeleteBookmark() {
+  const queryClient = useQueryClient();
+
   const { mutate, isLoading } = useMutation({
     mutationFn: deleteBookmarkBoard,
     onSuccess: () => {
       Toast.success('북마크가 성공적으로 삭제 되었습니다.');
+      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
     },
     onError: () => {
       Toast.error('북마크를 삭제하지 못했습니다. 잠시후 다시 시도해주세요.🥲');

types/types.ts

@@ -23,6 +23,7 @@ export interface Board {
   replyCount: number;
   userImageUrl: string;
   boardLiked: boolean;
+  bookmarked: boolean;
   createdDate: string;
   modifiedDate: string;
 }