Merge pull request #101 from codeit9-temporary/feature/pagination

Refactor: LinkCardStore 에 totalCount 추가

Author: 99minji

components/Link/LinkCard.tsx

@@ -41,7 +41,6 @@ const LinkCard = ({ info }: LinkCardProps) => {
   const handleFavoriteToggle = async () => {
     setIsSubscribed((prev) => !prev);
     try {
-      await putLinkFavorite(info.id, { favorite: !isSubscribed });
       updateFavorite(info.id, !isSubscribed);
     } catch (error) {
       console.error("즐겨찾기 설정 중 오류 발생:", error);

hooks/useFetchLinks.tsx

@@ -5,11 +5,7 @@ import { useRouter } from "next/router";
 
 // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
 const useFetchLinks = (
-  query: {
-    page?: number;
-    search?: string;
-  },
-  setLinkCardList: (list: LinkData[]) => void
+  setLinkCardList: (list: LinkData[], totalCount: number) => void
 ) => {
   const router = useRouter();
 
@@ -18,9 +14,9 @@ const useFetchLinks = (
       // 경로에 따라 API 엔드포인트 분기
       let endpoint = "/api/links";
       const params: any = {
-        page: query.page,
+        page: router.query.page,
         pageSize: 6,
-        search: query.search,
+        search: router.query.search,
       };
 
       if (router.pathname === "/favorite") {
@@ -29,14 +25,14 @@ const useFetchLinks = (
 
       try {
         const res = await proxy.get(endpoint, { params });
-        setLinkCardList(res.data.list);
+        setLinkCardList(res.data.list, res.data.totalCount);
       } catch (error) {
         console.error("Error fetching links:", error);
       }
     };
 
-    if (query) fetchLinks();
-  }, [query, setLinkCardList, router.pathname]);
+    if (router.query) fetchLinks();
+  }, [router.query, setLinkCardList, router.pathname]);
 };
 
 export default useFetchLinks;

pages/api/links/[linkId]/favorite.ts

@@ -15,8 +15,11 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   switch (req.method) {
     case "PUT":
       const { favorite } = req.body;
-      if (favorite === undefined) {
-        return res.status(400).json({ message: "즐겨찾기 상태가 필요합니다." });
+
+      if (favorite === undefined || typeof favorite !== "boolean") {
+        return res
+          .status(400)
+          .json({ message: "즐겨찾기 상태는 boolean이어야 합니다." });
       }
 
       try {

pages/favorite/index.tsx

@@ -50,7 +50,7 @@ const FavoritePage = ({ favoriteList, totalCount }: FavoriteProps) => {
   const [linkCardList, setLinkCardList] =
     useState<FavoriteDataType[]>(favoriteList);
 
-  useFetchLinks(router.query, setLinkCardList);
+  useFetchLinks(setLinkCardList);
   return (
     <>
       <div className="page-title pt-[10px] md:pt-5 pb-10 md:pb-[60px] bg-gray100 text-center">

pages/link/index.tsx

@@ -57,11 +57,11 @@ const LinkPage = ({
   const [folderList, setFolderList] = useState(initialFolderList);
 
   // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
-  useFetchLinks(router.query, setLinkCardList);
+  useFetchLinks(setLinkCardList);
 
   // 클라이언트에서 초기 목록을 설정
   useEffect(() => {
-    setLinkCardList(initialLinkList);
+    setLinkCardList(initialLinkList, totalCount);
   }, [initialLinkList, setLinkCardList]);
 
   return (

store/useLinkCardStore.tsx

@@ -1,9 +1,4 @@
-import {
-  deleteLinkURL,
-  getLinks,
-  putLinkFavorite,
-  putLinkURL,
-} from "@/lib/api/link";
+import { deleteLinkURL, putLinkFavorite, putLinkURL } from "@/lib/api/link";
 import { create } from "zustand";
 import { LinkData } from "@/types/linkTypes";
 
@@ -13,17 +8,19 @@ interface UpdateLinkBody {
 
 interface LinkCardStore {
   linkCardList: LinkData[];
-  setLinkCardList: (list: LinkData[]) => void;
+  setLinkCardList: (list: LinkData[], totalCount: number) => void;
   updateLink: (linkId: number, body: UpdateLinkBody) => Promise<void>;
   deleteLink: (linkId: number) => Promise<void>;
   updateFavorite: (linkId: number, favorite: boolean) => Promise<void>;
+  totalCount: number | null;
 }
 
 export const useLinkCardStore = create<LinkCardStore>((set) => ({
   linkCardList: [],
+  totalCount: null,
 
-  setLinkCardList: (list: LinkData[]) => {
-    set({ linkCardList: list });
+  setLinkCardList: (list: LinkData[], totalCount: number) => {
+    set({ linkCardList: list, totalCount: totalCount });
   },
 
   // 수정 요청 보낸 후 목록 가져오기