Feat : 페이지네이션 작업

components/LinkCard.tsx

@@ -22,7 +22,7 @@ interface LinkCardProps {
 const LinkCard = ({ onEdit, openDelete, info }: LinkCardProps) => {
   const [isSubscribed, setIsSubscribed] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const { isOpen: isModalOpen } = useModalStore(); // 모달 열림 상태 구독
+  const { isOpen: isModalOpen } = useModalStore();
 
   const formattedDate = info.createdAt?.slice(0, 10).replace(/-/g, ".");
   const createdTime = timeAgo(info.createdAt);

components/Pagination.tsx

@@ -0,0 +1,122 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+interface PaginationProps {
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  page,
+  pageSize,
+  totalCount,
+}) => {
+  const LiStyle = "relative w-12 h-12 rounded-lg bg-gray900";
+  const buttonStyle = "flex justify-center items-center h-full text-black400";
+
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const [maxPagesToShow, setMaxPagesToShow] = useState(2);
+
+  // 화면 크기 변화에 따라 pageSize와 maxPagesToShow를 설정
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      setMaxPagesToShow(width > 1024 ? 5 : 3);
+    };
+
+    // 초기 설정 및 리사이즈 이벤트 리스너 추가
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  // 페이지 리스트 생성 함수
+  const getPageNumbers = () => {
+    const pages = [];
+
+    if (totalPages <= maxPagesToShow) {
+      // 전체 페이지 수가 표시 가능한 페이지 수 이하인 경우 모든 페이지 표시
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      // 첫 페이지와 마지막 페이지는 항상 표시
+      pages.push(1);
+      let start = Math.max(2, page - 1);
+      let end = Math.min(totalPages - 1, page + 1);
+
+      if (page > 3) pages.push("...");
+      for (let i = start; i <= end; i++) pages.push(i);
+      if (page < totalPages - 2) pages.push("...");
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  return (
+    <ul className="flex justify-center gap-[10px] my-10">
+      <li className={LiStyle}>
+        <Link
+          href={`/link?page=${page - 1}&pageSize=${pageSize}`}
+          className={`${buttonStyle} ${page > 1 ? "text-black500" : "pointer-events-none"}`}
+        >
+          <Image
+            src={
+              page > 1
+                ? "/icons/pagination-left-active.png"
+                : "/icons/pagination-left.png"
+            }
+            height={24}
+            width={24}
+            alt="prev"
+          />
+        </Link>
+      </li>
+
+      {/* 페이지 번호와 생략 표시 */}
+      {getPageNumbers().map((pageNum, index) =>
+        typeof pageNum === "number" ? (
+          <li key={index} className={LiStyle}>
+            <Link
+              href={`/link?page=${pageNum}&pageSize=${pageSize}`}
+              className={`${buttonStyle} ${pageNum === page ? "text-black500" : "text-black400"}`}
+            >
+              {pageNum}
+            </Link>
+          </li>
+        ) : (
+          <li
+            key={index}
+            className={`${LiStyle} flex items-center justify-center text-black400`}
+          >
+            ...
+          </li>
+        )
+      )}
+
+      <li className={LiStyle}>
+        <Link
+          href={`/link?page=${page + 1}&pageSize=${pageSize}`}
+          className={`${buttonStyle} ${page < totalPages ? "text-black500" : "pointer-events-none"}`}
+        >
+          <Image
+            src={
+              page < totalPages
+                ? "/icons/pagination-right-active.png"
+                : "/icons/pagination-right.png"
+            }
+            width={24}
+            height={24}
+            alt="next"
+          />
+        </Link>
+      </li>
+    </ul>
+  );
+};
+
+export default Pagination;

pages/api/links/index.ts

@@ -8,11 +8,16 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
   switch (req.method) {
     case "GET":
+      const { page = "1", pageSize = "10" } = req.query;
+
       // 유저의 전체 링크 조회
       try {
-        const response = await axiosInstance.get("/links", {
-          headers: { Authorization: `Bearer ${accessToken}` },
-        });
+        const response = await axiosInstance.get(
+          `/links?page=${page}&pageSize=${pageSize}`,
+          {
+            headers: { Authorization: `Bearer ${accessToken}` },
+          }
+        );
         return res.status(201).json(response.data);
       } catch (err) {
         console.error(err);

pages/link/index.tsx

@@ -13,16 +13,24 @@ import AddLinkInput from "@/components/Link/AddLinkInput";
 import FolderTag from "../../components/FolderTag";
 import LinkCard from "../../components/LinkCard";
 import useModalStore from "@/store/useModalStore";
+import Pagination from "@/components/Pagination";
 
 interface LinkPageProps {
   linkList: LinkData[];
   folderList: FolderData[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
 }
 
 export const getServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
-  const { req } = context;
+  const { req, query } = context;
+
+  // 쿼리로부터 page와 pageSize를 읽고 기본값 설정
+  const page = parseInt((query.page as string) || "1", 10);
+  const pageSize = parseInt((query.pageSize as string) || "6", 10);
 
   const fetchData = async (endpoint: string) => {
     const response = await proxy.get(endpoint, {
@@ -34,7 +42,7 @@ export const getServerSideProps = async (
   };
 
   const [links, folders] = await Promise.all([
-    fetchData("/api/links"),
+    fetchData(`/api/links?page=${page}&pageSize=${pageSize}`),
     fetchData("/api/folders"),
   ]);
 
@@ -43,11 +51,20 @@ export const getServerSideProps = async (
       link: links || [],
       linkList: links.list || [],
       folderList: folders || [],
+      totalCount: links.totalCount || 0,
+      page,
+      pageSize,
     },
   };
 };
 
-const LinkPage = ({ linkList, folderList }: LinkPageProps) => {
+const LinkPage = ({
+  linkList,
+  folderList,
+  totalCount,
+  page,
+  pageSize,
+}: LinkPageProps) => {
   const { isOpen, openModal } = useModalStore();
   const { linkCardList, setLinkCardList } = useLinkCardStore();
 
@@ -94,6 +111,7 @@ const LinkPage = ({ linkList, folderList }: LinkPageProps) => {
               />
             ))}
           </CardsLayout>
+          <Pagination page={page} pageSize={pageSize} totalCount={totalCount} />
         </Container>
         {isOpen && <Modal />}
       </main>

tailwind.config.ts

@@ -14,6 +14,8 @@ const config: Config = {
         black100: "#000",
         black200: "#111322",
         black300: "#373740",
+        black400: "#c4c4c4",
+        black500: "#1f1f1f",
         red100: "#ff5b56",
         gray100: "#f0f6ff",
         gray200: "#e7effb",
@@ -23,6 +25,7 @@ const config: Config = {
         gray600: "#6b6b6b",
         gray700: "#676767",
         gray800: "#CFCFCF",
+        gray900: "#f7f7f7",
         purple100: "#6d6afe",
       },
       screens: {