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

Author: junjeeong

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";

components/Link/LinkCard.tsx

@@ -22,7 +22,7 @@ interface LinkCardProps {
 const LinkCard = ({ openEdit, 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);

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,14 +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":
       // 유저의 전체 링크 조회
       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,51 +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;
 }
 
 // /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,
     },
   };
 };
 
 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(() => {
@@ -94,6 +100,7 @@ const LinkPage = ({
               />
             ))}
           </CardsLayout>
+          <Pagination totalCount={totalCount} />
         </Container>
         {isOpen && <Modal />}
       </main>

store/useLinkCardStore.tsx

@@ -1,25 +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: [],
-  totalCount: 0,
 
-  setLinkCardList: (list: LinkData[]) => {
-    set({ linkCardList: list, totalCount: list.length });
+  setLinkCardList: (list: LinkCardDataType[]) => {
+    set({ linkCardList: list });
   },
 
   // 수정 요청 보낸 후 목록 가져오기
@@ -31,7 +28,7 @@ export const useLinkCardStore = create<LinkCardStore>((set) => ({
       const updatedList = res.list;
 
       // 상태 업데이트
-      set({ linkCardList: updatedList, totalCount: updatedList.length });
+      set({ linkCardList: updatedList });
     } catch (error) {
       console.error("삭제 중 오류 발생:", error);
     }
@@ -45,7 +42,7 @@ export const useLinkCardStore = create<LinkCardStore>((set) => ({
       const updatedList = res.list;
 
       // 상태 업데이트
-      set({ linkCardList: updatedList, totalCount: updatedList.length });
+      set({ linkCardList: updatedList });
     } catch (error) {
       console.error("삭제 중 오류 발생:", error);
     }