Refactor: Link페이지 보수 작업

Author: junjeeong

hooks/useFetchLinks.tsx

@@ -1,16 +1,16 @@
 import { useEffect } from "react";
+import { useRouter } from "next/router";
 import { proxy } from "@/lib/api/axiosInstanceApi";
 import { LinkData } from "@/types/linkTypes";
-import { ParsedUrlQuery } from "querystring";
 import useViewport from "./useViewport";
 
 // 링크 페이지의 query가 바뀌면 그에 맞는 링크들을 보여주는 훅
 const useFetchLinks = (
   setLinkCardList: (list: LinkData[], totalCount: number) => void,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  query?: ParsedUrlQuery,
-  pathname?: string
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
 ) => {
+  const router = useRouter();
+  const { query, pathname } = router;
   const { isTablet } = useViewport();
 
   useEffect(() => {

pages/link/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { parse } from "cookie";
@@ -86,8 +86,12 @@ const LinkPage = ({
   const [folderName] = useFolderName(folder);
   const [folderList, setFolderList] = useState(initialFolderList);
 
+  useEffect(() => {
+    setLinkCardList(initialLinkList, initialTotalCount);
+  }, [initialLinkList, initialTotalCount, setLinkCardList]);
+
   // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
-  useFetchLinks(setLinkCardList, setIsLoading, router.query, router.pathname);
+  useFetchLinks(setLinkCardList, setIsLoading);
 
   return (
     <>