Feat: 즐겨찾기에 페이지네이션 구현

Author: 99minji

components/Pagination.tsx

@@ -8,22 +8,28 @@ interface PaginationProps {
 }
 
 const Pagination: React.FC<PaginationProps> = ({ totalCount }) => {
-  const router = useRouter();
   const LiStyle = "relative w-12 h-12 rounded-lg bg-gray900";
   const buttonStyle =
     "flex justify-center items-center w-full h-full text-black400";
-  const { page, pageSize } = router.query;
 
+  const router = useRouter();
+
+  const { page, pageSize } = router.query;
   const currentPage = Number(page) || 1;
   const currentPageSize = Number(pageSize) || 6;
   const totalPages = Math.ceil(totalCount / currentPageSize);
+
   const [maxPagesToShow, setMaxPagesToShow] = useState(2);
   const { isPC } = useViewport();
 
   const handlePageChange = (newPage: number) => {
     if (newPage !== currentPage) {
+      const path = router.pathname;
       router.push(
-        `/link?page=${newPage}&pageSize=${currentPageSize}`,
+        {
+          pathname: path,
+          query: { page: newPage, pageSize: currentPageSize },
+        },
         undefined,
         { shallow: true }
       );

hooks/useFetchLinks.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { proxy } from "@/lib/api/axiosInstanceApi";
 import { LinkData } from "@/types/linkTypes";
+import { useRouter } from "next/router";
 
 // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
 const useFetchLinks = (
@@ -10,20 +11,32 @@ const useFetchLinks = (
   },
   setLinkCardList: (list: LinkData[]) => void
 ) => {
+  const router = useRouter();
+
   useEffect(() => {
     const fetchLinks = async () => {
-      const res = await proxy.get("/api/links", {
-        params: {
-          page: query.page,
-          pageSize: 6,
-          search: query.search,
-        },
-      });
-      setLinkCardList(res.data.list);
+      // 경로에 따라 API 엔드포인트 분기
+      let endpoint = "/api/links";
+      const params: any = {
+        page: query.page,
+        pageSize: 6,
+        search: query.search,
+      };
+
+      if (router.pathname === "/favorite") {
+        endpoint = "/api/favorites";
+      }
+
+      try {
+        const res = await proxy.get(endpoint, { params });
+        setLinkCardList(res.data.list);
+      } catch (error) {
+        console.error("Error fetching links:", error);
+      }
     };
 
     if (query) fetchLinks();
-  }, [query, setLinkCardList]);
+  }, [query, setLinkCardList, router.pathname]);
 };
 
 export default useFetchLinks;

pages/api/favorites/index.ts

@@ -5,6 +5,7 @@ import axiosInstance from "@/lib/api/axiosInstanceApi";
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const cookies = parse(req.headers.cookie || "");
   const accessToken = cookies.accessToken;
+  const { page, pageSize = 6 } = req.query;
 
   if (!accessToken) {
     return res.status(401).json({ message: "인증 오류: 토큰이 없습니다." });
@@ -14,12 +15,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     case "GET":
       // 즐겨찾기 목록 조회
       try {
-        const response = await axiosInstance.get(
-          "/favorites?page=1&pageSize=10",
-          {
-            headers: { Authorization: `Bearer ${accessToken}` },
-          }
-        );
+        const response = await axiosInstance.get(`/favorites`, {
+          params: { page, pageSize },
+          headers: { Authorization: `Bearer ${accessToken}` },
+        });
         return res.status(200).json(response.data);
       } catch (err: any) {
         // 즐겨찾기 폴더가 없는 경우 (404 처리)

pages/favorite/index.tsx

@@ -3,6 +3,10 @@ import { proxy } from "@/lib/api/axiosInstanceApi";
 import CardsLayout from "@/components/Layout/CardsLayout";
 import Container from "@/components/Layout/Container";
 import LinkCard from "@/components/Link/LinkCard";
+import Pagination from "@/components/Pagination";
+import useFetchLinks from "@/hooks/useFetchLinks";
+import { useRouter } from "next/router";
+import { useState } from "react";
 
 interface FavoriteDataType {
   id: number;
@@ -42,6 +46,12 @@ export const getServerSideProps: GetServerSideProps = async (
 };
 
 const FavoritePage = ({ favoriteList, totalCount }: FavoriteProps) => {
+  const router = useRouter();
+
+  const [linkCardList, setLinkCardList] =
+    useState<FavoriteDataType[]>(favoriteList);
+
+  useFetchLinks(router.query, setLinkCardList);
   return (
     <>
       <div className="page-title pt-[10px] md:pt-5 pb-10 md:pb-[60px] bg-gray100 text-center">
@@ -51,8 +61,8 @@ const FavoritePage = ({ favoriteList, totalCount }: FavoriteProps) => {
       </div>
       <Container>
         <CardsLayout>
-          {favoriteList.length > 0
-            ? favoriteList.map((favorite) => (
+          {linkCardList.length > 0
+            ? linkCardList.map((favorite) => (
                 <LinkCard key={favorite.id} info={favorite} />
               ))
             : null}
@@ -70,6 +80,7 @@ const FavoritePage = ({ favoriteList, totalCount }: FavoriteProps) => {
             </div>
           </div>
         )}
+        <Pagination totalCount={totalCount} />
       </Container>
     </>
   );