Fix: CI 에러 제거

Author: junjeeong

components/Pagination.tsx

@@ -0,0 +1,121 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+interface PaginationProps {
+  totalCount: number;
+}
+
+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 h-full text-black400";
+  const { page, pageSize } = router.query;
+
+  const currentPage = Number(page);
+  const currentPageSize = Number(pageSize);
+  const totalPages = Math.ceil(totalCount / currentPageSize);
+  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, currentPage - 1);
+      let end = Math.min(totalPages - 1, currentPage + 1);
+
+      if (currentPage > 3) pages.push("...");
+      for (let i = start; i <= end; i++) pages.push(i);
+      if (currentPage < 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=${currentPage - 1}&pageSize=${currentPageSize}`}
+          className={`${buttonStyle} ${currentPage > 1 ? "text-black500" : "pointer-events-none"}`}
+        >
+          <Image
+            src={
+              currentPage > 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 === currentPage ? "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=${currentPage + 1}&pageSize=${pageSize}`}
+          className={`${buttonStyle} ${currentPage < totalPages ? "text-black500" : "pointer-events-none"}`}
+        >
+          <Image
+            src={
+              currentPage < totalPages
+                ? "/icons/pagination-right-active.png"
+                : "/icons/pagination-right.png"
+            }
+            width={24}
+            height={24}
+            alt="next"
+          />
+        </Link>
+      </li>
+    </ul>
+  );
+};
+
+export default Pagination;

hooks/useRerenderFolderList.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 import { getFolders } from "@/lib/api/folder";
 import { FolderData } from "@/types/folderTypes";
 
-// Folder 관련 드랍다운이 닫혔을 때 화면에 update된 FolderList를 보여주는 커스텀 훅
+// 모달이 닫혔을 때 새로운 FolderList를 보여주는 커스텀 훅
 const useRerenderFolderList = (
   isOpen: boolean,
   setFolderList: React.Dispatch<React.SetStateAction<FolderData[]>>

pages/api/links/index.ts

@@ -12,7 +12,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       // 유저의 전체 링크 조회
       try {
         const response = await axiosInstance.get(`/links`, {
-          params: { page, pageSize, search },
+          params: { page, pageSize, search }, // 만약 아무런 값이 없으면 알아서 예외시킴
           headers: { Authorization: `Bearer ${accessToken}` },
         });
         return res.status(201).json(response.data);

pages/favorite/index.tsx

@@ -1,8 +1,8 @@
 import { GetServerSideProps, GetServerSidePropsContext } from "next";
 import { proxy } from "@/lib/api/axiosInstanceApi";
-import LinkCard from "@/components/LinkCard";
 import CardsLayout from "@/components/Layout/CardsLayout";
 import Container from "@/components/Layout/Container";
+import LinkCard from "@/components/Link/LinkCard";
 
 interface FavoriteDataType {
   id: number;

pages/link/index.tsx

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

store/useLinkCardStore.tsx

@@ -1,21 +1,22 @@
 import { deleteLinkURL, getLinks, putLinkURL } from "@/lib/api/link";
 import { create } from "zustand";
+import { LinkData } from "@/types/linkTypes";
 
 interface UpdateLinkBody {
   url: string;
 }
 
 interface LinkCardStore {
-  linkCardList: LinkCardDataType[];
-  setLinkCardList: (list: LinkCardDataType[]) => void;
+  linkCardList: LinkData[];
+  setLinkCardList: (list: LinkData[]) => void;
   updateLink: (linkId: number, body: UpdateLinkBody) => Promise<void>;
   deleteLink: (linkId: number) => Promise<void>;
 }
 
 export const useLinkCardStore = create<LinkCardStore>((set) => ({
   linkCardList: [],
 
-  setLinkCardList: (list: LinkCardDataType[]) => {
+  setLinkCardList: (list: LinkData[]) => {
     set({ linkCardList: list });
   },
 

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: {