Feat: 북마크하기 기능 #65

puppypawpaw · Oct 19, 2023 · b08e24e · b08e24e
1 parent d26d7da
commit b08e24e
Show file tree

Hide file tree

Showing 13 changed files with 149 additions and 42 deletions.
diff --git a/components/pages/mypage/MyPageMain/BookmarkedBoardsList/index.tsx b/components/pages/mypage/MyPageMain/BookmarkedBoardsList/index.tsx
@@ -34,15 +34,7 @@ export default function BookmarkedBoardsList() {
                 }}
                 className="w-full"
               >
-                <MyBoardCard
-                  userName={board.writer}
-                  content={board.content}
-                  imgs={board.fileNames}
-                  setShowModal={setShowModal}
-                  commentsCount={board.replyCount}
-                  likedCount={board.likedCount}
-                  createdDate={board.createdDate}
-                />
+                <MyBoardCard board={board} setShowModal={setShowModal} />
               </div>
             )),
           )}

diff --git a/components/pages/mypage/MyPageMain/MyBoardsList/index.tsx b/components/pages/mypage/MyPageMain/MyBoardsList/index.tsx
@@ -35,15 +35,7 @@ export default function MyBoardsList() {
                 }}
                 className="w-full"
               >
-                <MyBoardCard
-                  userName={board.writer}
-                  content={board.content}
-                  imgs={board.fileNames}
-                  setShowModal={setShowModal}
-                  commentsCount={board.replyCount}
-                  likedCount={board.likedCount}
-                  createdDate={board.createdDate}
-                />
+                <MyBoardCard board={board} setShowModal={setShowModal} />
               </div>
             )),
           )}

diff --git a/components/ui/BoardCard/BoardCardPackage/BoardCardDropdown.tsx b/components/ui/BoardCard/BoardCardPackage/BoardCardDropdown.tsx
@@ -1,15 +1,32 @@
 import DotsIcon from 'public/DotsIcon.svg';
 import copyToClipBoard from '@/utils/copyToClipBoard';
+import useAddBookmark from '@/hooks/mutations/useAddBookmark';
+import useDeleteBookmark from '@/hooks/mutations/useDeleteBookmark';
 import { Dropdown } from '../../ui';
 
-export default function PostCardDropdown() {
+export default function PostCardDropdown({
+  boardId, // TODO : 북마크 되어있는지 확인
+  // isBookmarked,
+}: {
+  boardId: number;
+  // isBookmarked: boolean;
+}) {
+  const { mutate: addBookmark } = useAddBookmark();
+  const { mutate: deleteBookmark } = useDeleteBookmark();
+  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>북마크 추가</Dropdown.Item>
+        <Dropdown.Item event={handleBookmark}>북마크 추가</Dropdown.Item>
         <Dropdown.Item event={() => copyToClipBoard(window.location.href)}>
           공유하기
         </Dropdown.Item>

diff --git a/components/ui/BoardCard/BoardCardPackage/Header.tsx b/components/ui/BoardCard/BoardCardPackage/Header.tsx
@@ -7,10 +7,12 @@ export default function BoardCardHeader({
   userName,
   userImage,
   createdDate,
+  boardId,
 }: {
   userName: string;
   userImage: string;
   createdDate: string;
+  boardId: number;
 }) {
   return (
     <FlexBox justify="between" className="w-full">
@@ -25,7 +27,7 @@ export default function BoardCardHeader({
           </div>
         </FlexBox>
       </FlexBox>
-      <BoardCardDropdown />
+      <BoardCardDropdown boardId={boardId} />
     </FlexBox>
   );
 }
diff --git a/components/ui/BoardCard/FeedBoardCard.tsx b/components/ui/BoardCard/FeedBoardCard.tsx
@@ -20,6 +20,7 @@ export default function FeedBoardCard({
         userName={board.writer}
         createdDate={board.createdDate}
         userImage={board.userImageUrl}
+        boardId={board.id}
       />
       <BoardCard.Content
         type="mainPC"

diff --git a/components/ui/BoardCard/MyPageBoardCard.tsx b/components/ui/BoardCard/MyPageBoardCard.tsx
@@ -1,38 +1,34 @@
 import { BoardCard } from '@/components/ui/BoardCard/BoardCardPackage';
+import { Board } from '@/types/types';
 import { Dispatch, SetStateAction } from 'react';
 
 interface MyBoardCardProps {
-  userName: string;
-  content: string;
-  imgs: string[];
+  board: Board;
   setShowModal: Dispatch<SetStateAction<boolean>>;
-  commentsCount: number;
-  likedCount: number;
-  createdDate: string;
 }
 
 export default function MyPageBoardCard({
-  userName,
-  content,
-  imgs,
+  board,
   setShowModal,
-  commentsCount,
-  likedCount,
-  createdDate,
 }: MyBoardCardProps) {
   return (
     <BoardCard>
-      <BoardCard.Header userName={userName} createdDate={createdDate} />
+      <BoardCard.Header
+        userName={board.writer}
+        createdDate={board.createdDate}
+        userImage={board.userImageUrl}
+        boardId={board.id}
+      />
       <BoardCard.Content
         type="myPage"
-        content={content}
-        imgs={imgs}
+        content={board.content}
+        imgs={board.fileNames}
         onClickModal={() => setShowModal(true)}
       >
         <BoardCard.MyPageBoardCardCommentWrapper
           onClickModal={() => setShowModal(true)}
-          commentsCount={commentsCount}
-          likedCount={likedCount}
+          commentsCount={board.replyCount}
+          likedCount={board.likedCount}
         />
       </BoardCard.Content>
     </BoardCard>

diff --git a/hooks/mutations/useAddBookmark.ts b/hooks/mutations/useAddBookmark.ts
@@ -0,0 +1,16 @@
+import { addBookmarkBoard } from '@/service/board';
+import Toast from '@/utils/notification';
+import { useMutation } from '@tanstack/react-query';
+
+export default function useAddBookmark() {
+  const { mutate, isLoading } = useMutation({
+    mutationFn: addBookmarkBoard,
+    onSuccess: () => {
+      Toast.success('북마크가 성공적으로 저장 되었습니다.');
+    },
+    onError: () => {
+      Toast.error('북마크를 저장하지 못했습니다. 잠시후 다시 시도해주세요.🥲');
+    },
+  });
+  return { mutate, isLoading };
+}
diff --git a/hooks/mutations/useDeleteBookmark.ts b/hooks/mutations/useDeleteBookmark.ts
@@ -0,0 +1,16 @@
+import { deleteBookmarkBoard } from '@/service/board';
+import Toast from '@/utils/notification';
+import { useMutation } from '@tanstack/react-query';
+
+export default function useDeleteBookmark() {
+  const { mutate, isLoading } = useMutation({
+    mutationFn: deleteBookmarkBoard,
+    onSuccess: () => {
+      Toast.success('북마크가 성공적으로 삭제 되었습니다.');
+    },
+    onError: () => {
+      Toast.error('북마크를 삭제하지 못했습니다. 잠시후 다시 시도해주세요.🥲');
+    },
+  });
+  return { mutate, isLoading };
+}
diff --git a/hooks/queries/useGetBoardList.tsx → hooks/queries/useGetBoardList.ts b/hooks/queries/useGetBoardList.tsx → hooks/queries/useGetBoardList.ts
diff --git a/hooks/queries/useGetMyBoardList.tsx b/hooks/queries/useGetMyBoardList.tsx
@@ -1,4 +1,4 @@
-import getMyBoardList from '@/service/myPage';
+import { getMyBoardList } from '@/service/myPage';
 import { MyBoardList } from '@/types/types';
 import useInfiniteScroll from '../common/useInfiniteScroll';
 

diff --git a/hooks/queries/useGetMyBookmarkedBoardList.tsx b/hooks/queries/useGetMyBookmarkedBoardList.tsx
@@ -1,12 +1,12 @@
-import getMyBoardList from '@/service/myPage';
+import { getBookmarkedBoardList } from '@/service/myPage';
 import { BookmarkedBoardList } from '@/types/types';
 import useInfiniteScroll from '../common/useInfiniteScroll';
 
 export default function useGetBookmarkedBoardList() {
   const { data, isLoading, Observer } = useInfiniteScroll<BookmarkedBoardList>({
     queryKey: 'myBookmarkedBoards',
     firstPageParam: 0,
-    queryFn: getMyBoardList,
+    queryFn: getBookmarkedBoardList,
     getNextPageParamFn: (boardlist) =>
       boardlist.last ? undefined : boardlist.number + 1,
   });

diff --git a/service/board.ts b/service/board.ts
@@ -74,6 +74,58 @@ export async function getCommentList(
   }
 }
 
+export async function addBookmarkBoard(boardId: number) {
+  const url = `endpoint/api/bookmark/add?boardId=${boardId}`;
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      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 deleteBookmarkBoard(boardId: number) {
+  const url = `endpoint/api/bookmark/delete?boardId=${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 updateBoardLike(boardId: number) {
   const url = `endpoint/api/boardLike/like?boardId=${boardId}`;
   try {

diff --git a/service/myPage.ts b/service/myPage.ts
@@ -1,6 +1,6 @@
 import { AuthError } from '@/lib/error';
 
-export default async function getMyBoardList(pageNumber: number) {
+export async function getMyBoardList(pageNumber: number) {
   let url = `/endpoint/api/board/myPage?pageSize=4`;
   if (pageNumber !== 0) {
     url += `&pageNumber=${pageNumber}`;
@@ -22,3 +22,26 @@ export default async function getMyBoardList(pageNumber: number) {
     throw error;
   }
 }
+
+export async function getBookmarkedBoardList(pageNumber: number) {
+  let url = `/endpoint/api/bookmark/list?pageSize=4`;
+  if (pageNumber !== 0) {
+    url += `&pageNumber=${pageNumber}`;
+  }
+  try {
+    const response = await fetch(url, { credentials: 'include' });
+    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;
+  }
+}