From a283ea2274d7696cc43a64350808a6db5484c6fd Mon Sep 17 00:00:00 2001
From: junjeeong <wn8624@naver.com>
Date: Fri, 15 Nov 2024 17:40:05 +0900
Subject: [PATCH 1/5] =?UTF-8?q?Working:=20CORS=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=88=ED=95=B4=EA=B2=B0=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Folder/AddFolderButton.tsx         |  2 +-
 components/Folder/FolderActionsMenu.tsx       |  7 ++-
 components/modal/DeleteFolderModal.tsx        |  3 +-
 .../modal/modalManager/ModalManager.tsx       |  1 -
 hooks/useFetchLinks.tsx                       | 13 +++--
 hooks/useGetFolderInfo.tsx                    | 23 ++++++++
 lib/api/folder.ts                             |  4 +-
 pages/api/folders/[folderId]/index.ts         | 54 ++++++++++++-------
 pages/api/folders/[folderId]/links.ts         | 42 +++++++++++++++
 pages/link/index.tsx                          |  1 +
 util/timeAgo.ts                               | 23 ++++++++
 11 files changed, 144 insertions(+), 29 deletions(-)
 create mode 100644 hooks/useGetFolderInfo.tsx
 create mode 100644 pages/api/folders/[folderId]/links.ts
 create mode 100644 util/timeAgo.ts

diff --git a/components/Folder/AddFolderButton.tsx b/components/Folder/AddFolderButton.tsx
index 5f48fb4..9142f2a 100644
--- a/components/Folder/AddFolderButton.tsx
+++ b/components/Folder/AddFolderButton.tsx
@@ -13,7 +13,7 @@ export const AddFolderButton = ({ setFolderList }: AddFolderButtonProps) => {
 
   return (
     <button
-      className="w-[79px] h-[19px] text-purple100"
+      className="w-[200px] mt-auto text-purple100"
       onClick={() => openModal("AddFolderModal")}
     >
       폴더 추가 +
diff --git a/components/Folder/FolderActionsMenu.tsx b/components/Folder/FolderActionsMenu.tsx
index c54dcfd..f62a1e4 100644
--- a/components/Folder/FolderActionsMenu.tsx
+++ b/components/Folder/FolderActionsMenu.tsx
@@ -2,6 +2,7 @@ import { FolderData } from "@/types/folderTypes";
 import Image from "next/image";
 import useModalStore from "@/store/useModalStore";
 import useRerenderFolderList from "../../hooks/useRerenderFolderList";
+import useGetFolderInfo from "@/hooks/useGetFolderInfo";
 
 interface FolderActionsMenuProps {
   setFolderList: React.Dispatch<React.SetStateAction<FolderData[]>>;
@@ -9,6 +10,7 @@ interface FolderActionsMenuProps {
 
 const FolderActionsMenu = ({ setFolderList }: FolderActionsMenuProps) => {
   const { isOpen, openModal } = useModalStore();
+  const { folderName, folderId } = useGetFolderInfo();
 
   const handleModalOpen = (text: string) => {
     switch (text) {
@@ -19,7 +21,10 @@ const FolderActionsMenu = ({ setFolderList }: FolderActionsMenuProps) => {
         openModal("EditModal");
         break;
       case "삭제":
-        openModal("DeleteFolderModal");
+        openModal("DeleteFolderModal", {
+          folderName: folderName,
+          folderId: Number(folderId),
+        });
         break;
       default:
         break;
diff --git a/components/modal/DeleteFolderModal.tsx b/components/modal/DeleteFolderModal.tsx
index dbcc6fc..cf241dc 100644
--- a/components/modal/DeleteFolderModal.tsx
+++ b/components/modal/DeleteFolderModal.tsx
@@ -1,7 +1,7 @@
+import { deleteFolder } from "@/lib/api/folder";
 import useModalStore from "@/store/useModalStore";
 import SubmitButton from "../SubMitButton";
 import ModalContainer from "./modalComponents/ModalContainer";
-import { deleteFolder } from "@/lib/api/folder";
 
 const DeleteFolderModal = ({
   folderName,
@@ -11,6 +11,7 @@ const DeleteFolderModal = ({
   folderId: number;
 }) => {
   const { closeModal } = useModalStore();
+
   const handleSubmit = async () => {
     // 폴더 내에 링크 개수 0 일때만 삭제 가능 -> 링크 1개 이상이면 error toast 띄우겠습니다.
     try {
diff --git a/components/modal/modalManager/ModalManager.tsx b/components/modal/modalManager/ModalManager.tsx
index 0b8a4d5..7870ab7 100644
--- a/components/modal/modalManager/ModalManager.tsx
+++ b/components/modal/modalManager/ModalManager.tsx
@@ -21,7 +21,6 @@ export type ModalKeysType = keyof typeof ModalType;
 
 export const Modal = () => {
   const { modalType, isOpen, props } = useModalStore();
-
   if (!modalType || !isOpen) return null;
 
   switch (modalType) {
diff --git a/hooks/useFetchLinks.tsx b/hooks/useFetchLinks.tsx
index c01b4af..1454a64 100644
--- a/hooks/useFetchLinks.tsx
+++ b/hooks/useFetchLinks.tsx
@@ -3,11 +3,12 @@ import { proxy } from "@/lib/api/axiosInstanceApi";
 import { LinkData } from "@/types/linkTypes";
 import useViewport from "./useViewport";
 
-// 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
+// 링크페이지의 query가 바뀌면 그에 맞는 링크들을 보여주는 훅
 const useFetchLinks = (
   query: {
-    page?: number;
-    search?: string;
+    page?: string | string[] | undefined;
+    search?: string | string[] | undefined;
+    folder?: string | string[] | undefined;
   },
   setLinkCardList: (list: LinkData[]) => void
 ) => {
@@ -15,7 +16,11 @@ const useFetchLinks = (
 
   useEffect(() => {
     const fetchLinks = async () => {
-      const res = await proxy.get("/api/links", {
+      // params에 folder가 있다 = 폴더를 선택했다. = 해당하는 폴더의 링크들을 보여주어야 한다.
+      const endpoint = query.folder
+        ? `/api/folders/${query.folder}`
+        : "/api/links";
+      const res = await proxy.get(endpoint, {
         params: {
           page: query.page,
           pageSize: isTablet ? 6 : 10,
diff --git a/hooks/useGetFolderInfo.tsx b/hooks/useGetFolderInfo.tsx
new file mode 100644
index 0000000..21120c8
--- /dev/null
+++ b/hooks/useGetFolderInfo.tsx
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { getFolder } from "@/lib/api/folder";
+
+const useGetFolderInfo = () => {
+  const router = useRouter();
+  const folderId = router.query.folder;
+  const [folderName, setFolderName] = useState("폴더이름");
+
+  useEffect(() => {
+    if (!folderId) return;
+    console.log("데이터 패칭 이전 folderId", folderId);
+
+    const fetchFolderData = async () => {
+      const res = await getFolder(folderId);
+      console.log("getFolder에서 받아온 데이터:", res);
+    };
+    fetchFolderData();
+  }, [folderId]);
+
+  return { folderName, folderId };
+};
+export default useGetFolderInfo;
diff --git a/lib/api/folder.ts b/lib/api/folder.ts
index 8de87b0..2cf3d01 100644
--- a/lib/api/folder.ts
+++ b/lib/api/folder.ts
@@ -25,8 +25,10 @@ export const postFolders = async (body: folderApiProps) => {
 };
 
 // 폴더 조회
-export const getFolder = async (folderId: number) => {
+export const getFolder = async (folderId: string | string[] | undefined) => {
   try {
+    console.log("getFolder 함수에서 받은 folderId", folderId);
+
     const res = await axiosInstance.get(`/folders/${folderId}`);
     if (res.status >= 200 && res.status < 300) return res.data;
   } catch (err) {
diff --git a/pages/api/folders/[folderId]/index.ts b/pages/api/folders/[folderId]/index.ts
index 5f25cd4..dfc5170 100644
--- a/pages/api/folders/[folderId]/index.ts
+++ b/pages/api/folders/[folderId]/index.ts
@@ -5,46 +5,36 @@ import { NextApiRequest, NextApiResponse } from "next";
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const token = req.cookies.accessToken;
   const { folderId } = req.query;
-  const id = Number(folderId);
-
-  console.log("Token:", token);
 
   if (!token) {
     return res.status(401).json({ error: "사용자 정보를 찾을 수 없습니다." });
   }
 
-  if (isNaN(id)) {
+  if (!folderId) {
     return res.status(400).json({ error: "유효하지 않은 폴더 ID 입니다" });
   }
 
   switch (req.method) {
-    case "DELETE":
+    case "GET":
       try {
-        await axiosInstance.delete(`/folders/${id}`, {
+        await axiosInstance.get(`/folders/${folderId}`, {
           headers: {
             Authorization: `Bearer ${token}`,
           },
         });
-        return res.status(204).json({ message: "폴더 삭제 성공" });
+        return res.status(204).json({ message: "폴더에 대한 정보 조회 성공" });
       } catch (error) {
-        if (axios.isAxiosError(error)) {
-          console.error("Axios Error:", error); // 여기서 error 객체 전체를 확인
-          if (error.response) {
-            const status = error.response.status;
-            const message =
-              error.response.data?.message || "알 수 없는 오류 발생";
-            console.error("Error Response Data:", error.response.data);
-            return res.status(status).json({ message: message });
-          }
-          console.error("Unknown Error:", error); // Axios 오류가 아닌 경우
-          throw error;
+        if (axios.isAxiosError(error) && error.response) {
+          const status = error.response.status;
+          const message =
+            error.response.data?.message || "알 수 없는 오류 발생";
+          return res.status(status).json({ message });
         }
-        return res.status(500).json({ message: "서버 오류 발생" });
       }
 
     case "PUT":
       try {
-        await axiosInstance.put(`/folders/${id}`, req.body, {
+        await axiosInstance.put(`/folders/${folderId}`, req.body, {
           headers: {
             Authorization: `Bearer ${token}`,
           },
@@ -58,6 +48,30 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
           return res.status(status).json({ message });
         }
       }
+
+    case "DELETE":
+      try {
+        await axiosInstance.delete(`/folders/${folderId}`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+        return res.status(204).json({ message: "폴더 삭제 성공" });
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          console.error("Axios Error:", error); // 여기서 error 객체 전체를 확인
+          if (error.response) {
+            const status = error.response.status;
+            const message =
+              error.response.data?.message || "알 수 없는 오류 발생";
+            console.error("Error Response Data:", error.response.data);
+            return res.status(status).json({ message: message });
+          }
+          console.error("Unknown Error:", error); // Axios 오류가 아닌 경우
+          throw error;
+        }
+        return res.status(500).json({ message: "서버 오류 발생" });
+      }
   }
 };
 export default handler;
diff --git a/pages/api/folders/[folderId]/links.ts b/pages/api/folders/[folderId]/links.ts
new file mode 100644
index 0000000..b86f577
--- /dev/null
+++ b/pages/api/folders/[folderId]/links.ts
@@ -0,0 +1,42 @@
+import axiosInstance from "@/lib/api/axiosInstanceApi";
+import axios from "axios";
+import { NextApiRequest, NextApiResponse } from "next";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const token = req.cookies.accessToken;
+  const { page, pageSize, folderId } = req.query;
+
+  if (!token) {
+    return res.status(401).json({ error: "사용자 정보를 찾을 수 없습니다." });
+  }
+
+  if (!folderId) {
+    return res.status(400).json({ error: "유효하지 않은 폴더 ID 입니다" });
+  }
+
+  switch (req.method) {
+    case "GET":
+      try {
+        await axiosInstance.get(`/folders/${folderId}/links`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          params: {
+            page: page,
+            pageSize: pageSize,
+          },
+        });
+        return res
+          .status(204)
+          .json({ message: "폴더에 해당하는 링크 조회 성공" });
+      } catch (error) {
+        if (axios.isAxiosError(error) && error.response) {
+          const status = error.response.status;
+          const message =
+            error.response.data?.message || "알 수 없는 오류 발생";
+          return res.status(status).json({ message });
+        }
+      }
+  }
+};
+export default handler;
diff --git a/pages/link/index.tsx b/pages/link/index.tsx
index 65884e9..cc1f22a 100644
--- a/pages/link/index.tsx
+++ b/pages/link/index.tsx
@@ -18,6 +18,7 @@ import FolderActionsMenu from "@/components/Folder/FolderActionsMenu";
 import CardsLayout from "@/components/Layout/CardsLayout";
 import LinkCard from "@/components/Link/LinkCard";
 import fetchProxy from "@/lib/api/fetchProxy";
+import useFetchFolderList from "@/hooks/useFetchFolderList";
 
 interface LinkPageProps {
   linkList: LinkData[];
diff --git a/util/timeAgo.ts b/util/timeAgo.ts
new file mode 100644
index 0000000..2de28f7
--- /dev/null
+++ b/util/timeAgo.ts
@@ -0,0 +1,23 @@
+function timeAgo(createdAt: string): string {
+  const createdDate = new Date(createdAt);
+  const currentDate = new Date();
+
+  const secondsDiff = Math.floor(
+    (currentDate.getTime() - createdDate.getTime()) / 1000
+  );
+  const minutesDiff = Math.floor(secondsDiff / 60);
+  const hoursDiff = Math.floor(minutesDiff / 60);
+  const daysDiff = Math.floor(hoursDiff / 24);
+
+  if (minutesDiff < 1) {
+    return `${secondsDiff}초 전`;
+  } else if (hoursDiff < 1) {
+    return `${minutesDiff}분 전`;
+  } else if (daysDiff < 1) {
+    return `${hoursDiff}시간 전`;
+  } else {
+    return `${daysDiff}일 전`;
+  }
+}
+
+export default timeAgo;

From 54241fcd0bd8e8c459f84a202418bcbede08dff8 Mon Sep 17 00:00:00 2001
From: junjeeong <wn8624@naver.com>
Date: Fri, 15 Nov 2024 19:40:26 +0900
Subject: [PATCH 2/5] =?UTF-8?q?Feat:=20=EB=A7=81=ED=81=AC=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89,=20=EC=B6=94=EA=B0=80,=20=EC=9D=B4=EB=A6=84=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD,=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Folder/AddFolderButton.tsx      |  2 +-
 components/Folder/FolderActionsMenu.tsx    |  6 +++-
 components/Folder/FolderTag.tsx            |  6 ++--
 components/Link/LinkCard.tsx               |  2 +-
 components/Link/RenderEmptyLinkMessage.tsx |  9 ++++++
 hooks/useFetchLinks.tsx                    |  2 +-
 hooks/useGetFolderInfo.tsx                 |  3 +-
 lib/api/axiosInstanceApi.ts                |  2 --
 lib/api/folder.ts                          |  2 --
 pages/link/index.tsx                       | 34 +++++++++++++---------
 util/timAgo.ts                             | 21 -------------
 11 files changed, 41 insertions(+), 48 deletions(-)
 create mode 100644 components/Link/RenderEmptyLinkMessage.tsx
 delete mode 100644 util/timAgo.ts

diff --git a/components/Folder/AddFolderButton.tsx b/components/Folder/AddFolderButton.tsx
index 9142f2a..6c3913d 100644
--- a/components/Folder/AddFolderButton.tsx
+++ b/components/Folder/AddFolderButton.tsx
@@ -13,7 +13,7 @@ export const AddFolderButton = ({ setFolderList }: AddFolderButtonProps) => {
 
   return (
     <button
-      className="w-[200px] mt-auto text-purple100"
+      className="w-[100px] mt-auto text-purple100"
       onClick={() => openModal("AddFolderModal")}
     >
       폴더 추가 +
diff --git a/components/Folder/FolderActionsMenu.tsx b/components/Folder/FolderActionsMenu.tsx
index f62a1e4..f3c41cc 100644
--- a/components/Folder/FolderActionsMenu.tsx
+++ b/components/Folder/FolderActionsMenu.tsx
@@ -12,13 +12,17 @@ const FolderActionsMenu = ({ setFolderList }: FolderActionsMenuProps) => {
   const { isOpen, openModal } = useModalStore();
   const { folderName, folderId } = useGetFolderInfo();
 
+  console.log(folderName);
   const handleModalOpen = (text: string) => {
     switch (text) {
       case "공유":
         openModal("SNSModal");
         break;
       case "이름 변경":
-        openModal("EditModal");
+        openModal("EditModal", {
+          folderName: folderName,
+          folderId: Number(folderId),
+        });
         break;
       case "삭제":
         openModal("DeleteFolderModal", {
diff --git a/components/Folder/FolderTag.tsx b/components/Folder/FolderTag.tsx
index b4768c2..5647bc2 100644
--- a/components/Folder/FolderTag.tsx
+++ b/components/Folder/FolderTag.tsx
@@ -6,7 +6,7 @@ const FolderTag = ({ folderList }: FolderListData) => {
   const { folder: currentFolderId } = router.query;
 
   const folderStyle =
-    "py-[8px] px-[12px] border border-purple100 rounded-md hover:bg-purple100 hover:text-white";
+    "w-[100px] h-[35px] px-[15px] text-sm whitespace-nowrap truncate border border-purple100 rounded-md hover:bg-purple100 hover:text-white";
 
   const handleSubmit = (id: number | string) => {
     router.push({
@@ -16,13 +16,13 @@ const FolderTag = ({ folderList }: FolderListData) => {
   };
 
   return (
-    <ul className="flex flex-wrap gap-[8px]">
+    <ul className="flex flex-wrap gap-[8px] lg:w-[80%] md:w-[80%]">
       <li>
         <button className={folderStyle} onClick={() => handleSubmit("")}>
           전체
         </button>
       </li>
-      {folderList.map((folder) => (
+      {folderList.slice(0, 8).map((folder) => (
         <li key={folder.id}>
           <button
             className={`${folderStyle} ${folder.id === Number(currentFolderId) && "bg-purple100 text-white"}`}
diff --git a/components/Link/LinkCard.tsx b/components/Link/LinkCard.tsx
index b813318..9a6260c 100644
--- a/components/Link/LinkCard.tsx
+++ b/components/Link/LinkCard.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import timeAgo from "@/util/timAgo";
+import timeAgo from "@/util/timeAgo";
 import Image from "next/image";
 import Dropdown from "../Dropdown";
 import useModalStore from "@/store/useModalStore";
diff --git a/components/Link/RenderEmptyLinkMessage.tsx b/components/Link/RenderEmptyLinkMessage.tsx
new file mode 100644
index 0000000..274cb33
--- /dev/null
+++ b/components/Link/RenderEmptyLinkMessage.tsx
@@ -0,0 +1,9 @@
+const RenderEmptyLinkMessage = () => {
+  return (
+    <span className="w-full h-[200px] flex justify-center items-center">
+      저장된 링크가 없습니다.
+    </span>
+  );
+};
+
+export default RenderEmptyLinkMessage;
diff --git a/hooks/useFetchLinks.tsx b/hooks/useFetchLinks.tsx
index 1454a64..baa684b 100644
--- a/hooks/useFetchLinks.tsx
+++ b/hooks/useFetchLinks.tsx
@@ -18,7 +18,7 @@ const useFetchLinks = (
     const fetchLinks = async () => {
       // params에 folder가 있다 = 폴더를 선택했다. = 해당하는 폴더의 링크들을 보여주어야 한다.
       const endpoint = query.folder
-        ? `/api/folders/${query.folder}`
+        ? `/api/folders/${query.folder}/links`
         : "/api/links";
       const res = await proxy.get(endpoint, {
         params: {
diff --git a/hooks/useGetFolderInfo.tsx b/hooks/useGetFolderInfo.tsx
index 21120c8..17112bd 100644
--- a/hooks/useGetFolderInfo.tsx
+++ b/hooks/useGetFolderInfo.tsx
@@ -9,11 +9,10 @@ const useGetFolderInfo = () => {
 
   useEffect(() => {
     if (!folderId) return;
-    console.log("데이터 패칭 이전 folderId", folderId);
 
     const fetchFolderData = async () => {
       const res = await getFolder(folderId);
-      console.log("getFolder에서 받아온 데이터:", res);
+      if (res) setFolderName(res.data?.name);
     };
     fetchFolderData();
   }, [folderId]);
diff --git a/lib/api/axiosInstanceApi.ts b/lib/api/axiosInstanceApi.ts
index a037316..2f18046 100644
--- a/lib/api/axiosInstanceApi.ts
+++ b/lib/api/axiosInstanceApi.ts
@@ -3,14 +3,12 @@ import axios from "axios";
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000",
   timeout: 10000,
-  withCredentials: true,
 });
 
 export const proxy = axios.create({
   // 배포 이후에는 배포된 URL로 변경해야 함.
   baseURL: "http://localhost:3000",
   timeout: 10000,
-  withCredentials: true,
 });
 
 export default axiosInstance;
diff --git a/lib/api/folder.ts b/lib/api/folder.ts
index 2cf3d01..95e6596 100644
--- a/lib/api/folder.ts
+++ b/lib/api/folder.ts
@@ -27,8 +27,6 @@ export const postFolders = async (body: folderApiProps) => {
 // 폴더 조회
 export const getFolder = async (folderId: string | string[] | undefined) => {
   try {
-    console.log("getFolder 함수에서 받은 folderId", folderId);
-
     const res = await axiosInstance.get(`/folders/${folderId}`);
     if (res.status >= 200 && res.status < 300) return res.data;
   } catch (err) {
diff --git a/pages/link/index.tsx b/pages/link/index.tsx
index cc1f22a..5503918 100644
--- a/pages/link/index.tsx
+++ b/pages/link/index.tsx
@@ -18,7 +18,7 @@ import FolderActionsMenu from "@/components/Folder/FolderActionsMenu";
 import CardsLayout from "@/components/Layout/CardsLayout";
 import LinkCard from "@/components/Link/LinkCard";
 import fetchProxy from "@/lib/api/fetchProxy";
-import useFetchFolderList from "@/hooks/useFetchFolderList";
+import RenderEmptyLinkMessage from "@/components/Link/RenderEmptyLinkMessage";
 
 interface LinkPageProps {
   linkList: LinkData[];
@@ -90,19 +90,25 @@ const LinkPage = ({
             <h1 className="text-2xl ">유용한 글</h1>
             <FolderActionsMenu setFolderList={setFolderList} />
           </div>
-          <CardsLayout>
-            {linkCardList.map((link) => (
-              <LinkCard
-                key={link.id}
-                openEdit={() => handleModalOpen("EditLink", link.url, link.id)}
-                openDelete={() =>
-                  handleModalOpen("DeleteLinkModal", link.url, link.id)
-                }
-                info={link}
-              />
-            ))}
-          </CardsLayout>
-          <Pagination totalCount={totalCount} />
+          {linkCardList ? (
+            <CardsLayout>
+              {linkCardList.map((link) => (
+                <LinkCard
+                  key={link.id}
+                  openEdit={() =>
+                    handleModalOpen("EditLink", link.url, link.id)
+                  }
+                  openDelete={() =>
+                    handleModalOpen("DeleteLinkModal", link.url, link.id)
+                  }
+                  info={link}
+                />
+              ))}
+            </CardsLayout>
+          ) : (
+            <RenderEmptyLinkMessage />
+          )}
+          {linkCardList && <Pagination totalCount={totalCount} />}
         </Container>
         {isOpen && <Modal />}
       </main>
diff --git a/util/timAgo.ts b/util/timAgo.ts
deleted file mode 100644
index 4097ece..0000000
--- a/util/timAgo.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-function timeAgo(createdAt: string): string {
-  const createdDate = new Date(createdAt);
-  const currentDate = new Date();
-
-  const secondsDiff = Math.floor(
-    (currentDate.getTime() - createdDate.getTime()) / 1000
-  );
-  const minutesDiff = Math.floor(secondsDiff / 60);
-  const hoursDiff = Math.floor(minutesDiff / 60);
-  const daysDiff = Math.floor(hoursDiff / 24); //
-
-  if (hoursDiff < 1) {
-    return `${secondsDiff}초 전`;
-  } else if (hoursDiff < 24) {
-    return `${hoursDiff}시간 전`;
-  } else {
-    return `${daysDiff}일 전`;
-  }
-}
-
-export default timeAgo;

From 1b36aa71bcb283ab1085e29b33a06398b839cb35 Mon Sep 17 00:00:00 2001
From: 99uminji <rnalswl96@naver.com>
Date: Sat, 16 Nov 2024 12:12:43 +0900
Subject: [PATCH 3/5] =?UTF-8?q?Fix:=20LinkcardStore=20=EC=97=90=20totalCou?=
 =?UTF-8?q?nt=20=ED=8F=AC=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 store/useLinkCardStore.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/store/useLinkCardStore.tsx b/store/useLinkCardStore.tsx
index ef5b92f..2506791 100644
--- a/store/useLinkCardStore.tsx
+++ b/store/useLinkCardStore.tsx
@@ -13,17 +13,19 @@ interface UpdateLinkBody {
 
 interface LinkCardStore {
   linkCardList: LinkData[];
-  setLinkCardList: (list: LinkData[]) => void;
+  setLinkCardList: (list: LinkData[], totalCount: number) => void;
   updateLink: (linkId: number, body: UpdateLinkBody) => Promise<void>;
   deleteLink: (linkId: number) => Promise<void>;
   updateFavorite: (linkId: number, favorite: boolean) => Promise<void>;
+  totalCount: number;
 }
 
-export const useLinkCardStore = create<LinkCardStore>((set) => ({
+export const useLinkCardStore = create<LinkCardStore>((set, get) => ({
   linkCardList: [],
+  totalCount: 0,
 
-  setLinkCardList: (list: LinkData[]) => {
-    set({ linkCardList: list });
+  setLinkCardList: (list: LinkData[], totalCount: number) => {
+    set({ linkCardList: list, totalCount: totalCount });
   },
 
   // 수정 요청 보낸 후 목록 가져오기

From ddce627266cb8ff6a1b407ff261bb5ac08dad650 Mon Sep 17 00:00:00 2001
From: 99uminji <rnalswl96@naver.com>
Date: Sat, 16 Nov 2024 13:15:00 +0900
Subject: [PATCH 4/5] =?UTF-8?q?Fix=20:=20CI=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/favorite/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/favorite/index.tsx b/pages/favorite/index.tsx
index f942be3..36278eb 100644
--- a/pages/favorite/index.tsx
+++ b/pages/favorite/index.tsx
@@ -50,7 +50,7 @@ const FavoritePage = ({ favoriteList, totalCount }: FavoriteProps) => {
   const [linkCardList, setLinkCardList] =
     useState<FavoriteDataType[]>(favoriteList);
 
-  useFetchLinks(router.query, setLinkCardList);
+  useFetchLinks(setLinkCardList);
   return (
     <>
       <div className="page-title pt-[10px] md:pt-5 pb-10 md:pb-[60px] bg-gray100 text-center">

From d8efce95d74753728d145690a0a0850061197ed1 Mon Sep 17 00:00:00 2001
From: 99uminji <rnalswl96@naver.com>
Date: Sat, 16 Nov 2024 13:20:42 +0900
Subject: [PATCH 5/5] =?UTF-8?q?Fix=20:=20CI=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/useFetchLinks.tsx | 6 ++++--
 pages/link/index.tsx    | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/hooks/useFetchLinks.tsx b/hooks/useFetchLinks.tsx
index 7eb553c..ad8effd 100644
--- a/hooks/useFetchLinks.tsx
+++ b/hooks/useFetchLinks.tsx
@@ -5,7 +5,9 @@ import { LinkData } from "@/types/linkTypes";
 import useViewport from "./useViewport";
 
 // 링크페이지의 query가 바뀌면 그에 맞는 링크들을 보여주는 훅
-const useFetchLinks = (setLinkCardList: (list: LinkData[]) => void) => {
+const useFetchLinks = (
+  setLinkCardList: (list: LinkData[], totalCount: number) => void
+) => {
   const router = useRouter();
   const { isTablet } = useViewport();
 
@@ -26,7 +28,7 @@ const useFetchLinks = (setLinkCardList: (list: LinkData[]) => void) => {
           search: router.query.search,
         },
       });
-      setLinkCardList(res.data.list);
+      setLinkCardList(res.data.list, res.data.totalCount);
     };
     if (router.query) fetchLinks();
   }, [setLinkCardList, router.pathname, router.query, isTablet]);
diff --git a/pages/link/index.tsx b/pages/link/index.tsx
index a4ad8be..3e56b5c 100644
--- a/pages/link/index.tsx
+++ b/pages/link/index.tsx
@@ -73,7 +73,7 @@ const LinkPage = ({
 
   // 클라이언트에서 초기 목록을 설정
   useEffect(() => {
-    setLinkCardList(initialLinkList);
+    setLinkCardList(initialLinkList, totalCount);
   }, [initialLinkList, setLinkCardList]);
 
   // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅