Fix: shallow 라우팅 사용

Author: 99minji

components/Pagination.tsx

@@ -1,5 +1,5 @@
+import useViewport from "@/hooks/useViewport";
 import Image from "next/image";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
@@ -8,32 +8,36 @@ interface PaginationProps {
 }
 
 const Pagination: React.FC<PaginationProps> = ({ totalCount }) => {
-  console.log(totalCount);
   const router = useRouter();
   const LiStyle = "relative w-12 h-12 rounded-lg bg-gray900";
-  const buttonStyle = "flex justify-center items-center h-full text-black400";
+  const buttonStyle =
+    "flex justify-center items-center w-full h-full text-black400";
   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();
 
-  // 화면 크기 변화에 따라 pageSize와 maxPagesToShow를 설정
-  useEffect(() => {
-    const handleResize = () => {
-      const width = window.innerWidth;
-      setMaxPagesToShow(width > 1024 ? 5 : 3);
-    };
-
-    // 초기 설정 및 리사이즈 이벤트 리스너 추가
-    handleResize();
-    window.addEventListener("resize", handleResize);
+  const handlePageChange = (newPage: number) => {
+    if (newPage !== currentPage) {
+      router.push(
+        `/link?page=${newPage}&pageSize=${currentPageSize}`,
+        undefined,
+        { shallow: true }
+      );
+    }
+  };
 
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+  // 화면 크기 변화에 따라 maxPagesToShow를 설정
+  useEffect(() => {
+    if (isPC) {
+      setMaxPagesToShow(5);
+    } else {
+      setMaxPagesToShow(3);
+    }
+  }, [isPC]);
 
   // 페이지 리스트 생성 함수
   const getPageNumbers = () => {
@@ -60,9 +64,10 @@ const Pagination: React.FC<PaginationProps> = ({ totalCount }) => {
   return (
     <ul className="flex justify-center gap-[10px] my-10">
       <li className={LiStyle}>
-        <Link
-          href={`/link?page=${currentPage - 1}&pageSize=${currentPageSize}`}
+        <button
+          onClick={() => handlePageChange(currentPage - 1)}
           className={`${buttonStyle} ${currentPage > 1 ? "text-black500" : "pointer-events-none"}`}
+          disabled={currentPage <= 1}
         >
           <Image
             src={
@@ -74,19 +79,19 @@ const Pagination: React.FC<PaginationProps> = ({ totalCount }) => {
             width={24}
             alt="prev"
           />
-        </Link>
+        </button>
       </li>
 
       {/* 페이지 번호와 생략 표시 */}
       {getPageNumbers().map((pageNum, index) =>
         typeof pageNum === "number" ? (
           <li key={index} className={LiStyle}>
-            <Link
-              href={`/link?page=${pageNum}&pageSize=${currentPageSize}`}
+            <button
+              onClick={() => handlePageChange(pageNum)}
               className={`${buttonStyle} ${pageNum === currentPage ? "text-black500" : "text-black400"}`}
             >
               {pageNum}
-            </Link>
+            </button>
           </li>
         ) : (
           <li
@@ -99,9 +104,10 @@ const Pagination: React.FC<PaginationProps> = ({ totalCount }) => {
       )}
 
       <li className={LiStyle}>
-        <Link
-          href={`/link?page=${currentPage + 1}&pageSize=${currentPageSize}`}
+        <button
+          onClick={() => handlePageChange(currentPage + 1)}
           className={`${buttonStyle} ${currentPage < totalPages ? "text-black500" : "pointer-events-none"}`}
+          disabled={currentPage >= totalPages}
         >
           <Image
             src={
@@ -113,7 +119,7 @@ const Pagination: React.FC<PaginationProps> = ({ totalCount }) => {
             height={24}
             alt="next"
           />
-        </Link>
+        </button>
       </li>
     </ul>
   );

hooks/useFetchLinks.tsx

@@ -1,7 +1,6 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { proxy } from "@/lib/api/axiosInstanceApi";
 import { LinkData } from "@/types/linkTypes";
-import useViewport from "./useViewport";
 
 // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
 const useFetchLinks = (
@@ -11,13 +10,11 @@ const useFetchLinks = (
   },
   setLinkCardList: (list: LinkData[]) => void
 ) => {
-  const { isTablet } = useViewport();
-
   useEffect(() => {
     const fetchLinks = async () => {
       const res = await proxy.get("/api/links", {
         params: {
-          page: query.page || 1,
+          page: query.page,
           pageSize: 6,
           search: query.search,
         },
@@ -26,7 +23,7 @@ const useFetchLinks = (
     };
 
     if (query) fetchLinks();
-  }, [query, setLinkCardList, isTablet]);
+  }, [query, setLinkCardList]);
 };
 
 export default useFetchLinks;

pages/api/links/index.ts

@@ -5,7 +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, search } = req.query;
+  const { page, pageSize = 6, search } = req.query;
 
   switch (req.method) {
     case "GET":