Feat: 페이지네이션 merge 이후 Link 페이지 개선, useViewport useFetchLinks 훅 추가

components/Link/AddLinkInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, KeyboardEvent, useState } from "react";
+import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
 import { FolderListData } from "@/types/folderTypes";
 import { Modal } from "../modal/modalManager/ModalManager";
 import Image from "next/image";

hooks/useFetchLinks.tsx

@@ -1,19 +1,32 @@
 import { useEffect } from "react";
 import { proxy } from "@/lib/api/axiosInstanceApi";
 import { LinkData } from "@/types/linkTypes";
+import useViewport from "./useViewport";
 
-// 검색어에 맞는 리스트로 setLinkCardList 해주는 함수
+// 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
 const useFetchLinks = (
-  search: string | string[] | undefined,
+  query: {
+    page?: number;
+    search?: string;
+  },
   setLinkCardList: (list: LinkData[]) => void
 ) => {
+  const { isTablet } = useViewport();
+
   useEffect(() => {
     const fetchLinks = async () => {
-      const res = await proxy.get("/api/links", { params: { search } });
+      const res = await proxy.get("/api/links", {
+        params: {
+          page: query.page,
+          pageSize: isTablet ? 6 : 10,
+          search: query.search,
+        },
+      });
       setLinkCardList(res.data.list);
     };
-    if (search) fetchLinks();
-  }, [search, setLinkCardList]);
+
+    if (query) fetchLinks();
+  }, [query, setLinkCardList, isTablet]);
 };
 
 export default useFetchLinks;

hooks/useViewport.tsx

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+
+const breakpoints = {
+  PC: { min: 1200 },
+  Tablet: { min: 768, max: 1199 },
+  Mobile: { min: 343, max: 767 },
+};
+
+// 현재 브라우저의 innerWidth와 반응형 상태를 반환하는 훅
+function useViewport(initialWidth = 0) {
+  const [width, setWidth] = useState(initialWidth);
+
+  const handleResize = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const isPC = width >= breakpoints.PC.min;
+  const isTablet =
+    width >= breakpoints.Tablet.min && width <= breakpoints.Tablet.max;
+  const isMobile =
+    width >= breakpoints.Mobile.min && width <= breakpoints.Mobile.max;
+
+  return { width, isPC, isTablet, isMobile };
+}
+
+export default useViewport;

pages/api/links/index.ts

@@ -5,16 +5,14 @@ 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, search } = req.query;
+  const { page, pageSize, search } = req.query;
 
   switch (req.method) {
     case "GET":
-      const { page = "1", pageSize = "10" } = req.query;
-
       // 유저의 전체 링크 조회
       try {
-        const response = await axiosInstance.get("/links", {
-          params: { page, search },
+        const response = await axiosInstance.get(`/links`, {
+          params: { page, pageSize, search },
           headers: { Authorization: `Bearer ${accessToken}` },
         });
         return res.status(201).json(response.data);

pages/link/index.tsx

@@ -6,57 +6,57 @@ import { FolderData } from "@/types/folderTypes";
 import { Modal } from "@/components/modal/modalManager/ModalManager";
 import { useLinkCardStore } from "@/store/useLinkCardStore";
 import { SearchInput } from "../../components/Search/SearchInput";
-import fetchProxy from "@/lib/api/fetchProxy";
 import useModalStore from "@/store/useModalStore";
+import Pagination from "@/components/Pagination";
 import useFetchLinks from "@/hooks/useFetchLinks";
-import CardsLayout from "@/components/Layout/CardsLayout";
-import Container from "@/components/Layout/Container";
-import FolderActionsMenu from "@/components/Folder/FolderActionsMenu";
 import AddLinkInput from "@/components/Link/AddLinkInput";
+import Container from "@/components/Layout/Container";
 import SearchResultMessage from "@/components/Search/SearchResultMessage";
-import LinkCard from "@/components/Link/LinkCard";
+import FolderTag from "@/components/Folder/FolderTag";
 import AddFolderButton from "@/components/Folder/AddFolderButton";
-import FolderTag from "../../components/Folder/FolderTag";
+import FolderActionsMenu from "@/components/Folder/FolderActionsMenu";
+import CardsLayout from "@/components/Layout/CardsLayout";
+import LinkCard from "@/components/Link/LinkCard";
+import fetchProxy from "@/lib/api/fetchProxy";
 
 interface LinkPageProps {
   linkList: LinkData[];
   folderList: FolderData[];
   totalCount: number;
-  page: number;
-  pageSize: number;
 }
 
 // /link 페이지 접속시에 초기렌더링 데이터(전체 폴더, 전체링크리스트)만 fetch해서 client로 전달.
 export const getServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
+  const { req } = context;
+
   const [links, folders] = await Promise.all([
-    fetchProxy("/api/links", context.req),
-    fetchProxy("/api/folders", context.req),
+    fetchProxy("/api/links", req),
+    fetchProxy("/api/folders", req),
   ]);
 
   return {
     props: {
       linkList: links.list || [],
       folderList: folders || [],
       totalCount: links.totalCount || 0,
-      page,
-      pageSize,
     },
   };
 };
 
 const LinkPage = ({
   linkList: initialLinkList,
   folderList: initialFolderList,
+  totalCount,
 }: LinkPageProps) => {
   const router = useRouter();
   const { search } = router.query;
   const { isOpen, openModal } = useModalStore();
   const { linkCardList, setLinkCardList } = useLinkCardStore();
   const [folderList, setFolderList] = useState(initialFolderList);
 
-  useFetchLinks(search, setLinkCardList);
+  useFetchLinks(router.query, setLinkCardList);
 
   // 클라이언트에서 초기 목록을 설정
   useEffect(() => {
@@ -100,7 +100,7 @@ const LinkPage = ({
               />
             ))}
           </CardsLayout>
-          <Pagination page={page} pageSize={pageSize} totalCount={totalCount} />
+          <Pagination totalCount={totalCount} />
         </Container>
         {isOpen && <Modal />}
       </main>

store/useLinkCardStore.tsx

@@ -1,24 +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: LinkData[];
-  totalCount: number;
-  setLinkCardList: (list: LinkData[]) => void;
+  linkCardList: LinkCardDataType[];
+  setLinkCardList: (list: LinkCardDataType[]) => void;
   updateLink: (linkId: number, body: UpdateLinkBody) => Promise<void>;
   deleteLink: (linkId: number) => Promise<void>;
 }
 
 export const useLinkCardStore = create<LinkCardStore>((set) => ({
   linkCardList: [],
 
-  setLinkCardList: (list: LinkData[]) => {
-    set({ linkCardList: list, totalCount: list.length });
+  setLinkCardList: (list: LinkCardDataType[]) => {
+    set({ linkCardList: list });
   },
 
   // 수정 요청 보낸 후 목록 가져오기

tailwind.config.ts

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