Working: 링크 카드 눌렀을 때 수정하고, 삭제하는 기능 해야됨

Author: junjeeong

components/Folder/FolderActionsMenu.tsx

@@ -6,11 +6,13 @@ import useRerenderFolderList from "../../hooks/useRerenderFolderList";
 interface FolderActionsMenuProps {
   setFolderList: React.Dispatch<React.SetStateAction<FolderData[]>>;
   folderId: string | string[] | undefined;
+  linkCount: number;
 }
 
 const FolderActionsMenu = ({
   setFolderList,
   folderId,
+  linkCount,
 }: FolderActionsMenuProps) => {
   const { isOpen, openModal } = useModalStore();
 
@@ -27,6 +29,7 @@ const FolderActionsMenu = ({
       case "삭제":
         openModal("DeleteFolderModal", {
           folderId: Number(folderId),
+          linkCount: linkCount,
         });
         break;
       default:

components/Link/LinkCard.tsx

@@ -41,7 +41,6 @@ const LinkCard = ({ info }: LinkCardProps) => {
   const handleFavoriteToggle = async () => {
     setIsSubscribed((prev) => !prev);
     try {
-      await putLinkFavorite(info.id, { favorite: !isSubscribed });
       updateFavorite(info.id, !isSubscribed);
     } catch (error) {
       console.error("즐겨찾기 설정 중 오류 발생:", error);

components/Search/SearchInput.tsx

@@ -24,7 +24,7 @@ export const SearchInput = () => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex gap-[8px] w-[1024px] h-[54px] items-center px-[16px] py-[15px] bg-gray-100 rounded-[10px] md:w-[704px] md:h-[54px] sm:w-[415px] sm:h-[43px] transition-all"
+      className="flex gap-[8px] w-full h-[54px] items-center px-[16px] py-[15px] bg-gray-100 rounded-[10px] md:h-[54px] sm:h-[43px] transition-all"
     >
       <Image
         src="/icons/search.svg"

hooks/useFetchLinks.tsx

@@ -1,12 +1,13 @@
 import { useEffect } from "react";
 import { proxy } from "@/lib/api/axiosInstanceApi";
 import { LinkData } from "@/types/linkTypes";
-import useViewport from "./useViewport";
 import { ParsedUrlQuery } from "querystring";
+import useViewport from "./useViewport";
 
 // 링크페이지의 query가 바뀌면 그에 맞는 링크들을 보여주는 훅
 const useFetchLinks = (
-  setLinkCardList: (list: LinkData[]) => void,
+  setLinkCardList: React.Dispatch<React.SetStateAction<LinkData[]>>,
+  setTotalCount: React.Dispatch<React.SetStateAction<number>>,
   query: ParsedUrlQuery,
   pathname: string
 ) => {
@@ -29,8 +30,9 @@ const useFetchLinks = (
           search: query.search,
         },
       });
-      console.log("폴더 눌렀을 때 다시 받아온 리스트:", res.data.list);
+      console.log("query가 바뀌었을 때 다시 받아온 리스트:", res.data.list);
       setLinkCardList(res.data.list);
+      setTotalCount(res.data.totalCount);
     };
     if (query) fetchLinks();
   }, [setLinkCardList, query, isTablet]);

next.config.ts

@@ -2,7 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
-  reactStrictMode: true,
+  reactStrictMode: false,
   // 외부 이미지 도메인 추가
   images: {
     remotePatterns: [

pages/api/folders/[folderId]/index.ts

@@ -51,6 +51,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       }
 
     case "DELETE":
+      console.log("너 왔니?");
       try {
         await axiosInstance.delete(`/folders/${folderId}`, {
           headers: {

pages/api/links/[linkId]/favorite.ts

@@ -15,8 +15,11 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   switch (req.method) {
     case "PUT":
       const { favorite } = req.body;
-      if (favorite === undefined) {
-        return res.status(400).json({ message: "즐겨찾기 상태가 필요합니다." });
+
+      if (favorite === undefined || typeof favorite !== "boolean") {
+        return res
+          .status(400)
+          .json({ message: "즐겨찾기 상태는 boolean이어야 합니다." });
       }
 
       try {

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

pages/link/index.tsx

@@ -1,16 +1,14 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { parse } from "cookie";
 import { LinkData } from "@/types/linkTypes";
 import { FolderData } from "@/types/folderTypes";
 import { Modal } from "@/components/modal/modalManager/ModalManager";
-import { useLinkCardStore } from "@/store/useLinkCardStore";
 import { SearchInput } from "../../components/Search/SearchInput";
 import axiosInstance from "@/lib/api/axiosInstanceApi";
 import useModalStore from "@/store/useModalStore";
 import Pagination from "@/components/Pagination";
-import useFetchLinks from "@/hooks/useFetchLinks";
 import AddLinkInput from "@/components/Link/AddLinkInput";
 import Container from "@/components/Layout/Container";
 import SearchResultMessage from "@/components/Search/SearchResultMessage";
@@ -20,6 +18,7 @@ import FolderActionsMenu from "@/components/Folder/FolderActionsMenu";
 import CardsLayout from "@/components/Layout/CardsLayout";
 import LinkCard from "@/components/Link/LinkCard";
 import RenderEmptyLinkMessage from "@/components/Link/RenderEmptyLinkMessage";
+import useFetchLinks from "@/hooks/useFetchLinks";
 import useViewport from "@/hooks/useViewport";
 
 interface LinkPageProps {
@@ -62,22 +61,18 @@ export const getServerSideProps = async (
 const LinkPage = ({
   linkList: initialLinkList,
   folderList: initialFolderList,
-  totalCount,
+  totalCount: initialTotalCount,
 }: LinkPageProps) => {
   const router = useRouter();
   const { search, folder } = router.query;
-  const { linkCardList, setLinkCardList } = useLinkCardStore.getState();
   const { isOpen } = useModalStore();
   const { isMobile } = useViewport();
+  const [linkCardList, setLinkCardList] = useState(initialLinkList);
   const [folderList, setFolderList] = useState(initialFolderList);
-
-  // 클라이언트에서 초기 목록을 설정
-  useEffect(() => {
-    setLinkCardList(initialLinkList);
-  }, [initialLinkList, setLinkCardList]);
+  const [totalCount, setTotalCount] = useState(initialTotalCount);
 
   // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
-  useFetchLinks(setLinkCardList, router.query, router.pathname);
+  useFetchLinks(setLinkCardList, setTotalCount, router.query, router.pathname);
 
   console.log(linkCardList);
 
@@ -100,6 +95,7 @@ const LinkPage = ({
               <FolderActionsMenu
                 setFolderList={setFolderList}
                 folderId={folder}
+                linkCount={totalCount}
               />
             )}
           </div>

store/useLinkCardStore.tsx

@@ -1,9 +1,4 @@
-import {
-  deleteLinkURL,
-  getLinks,
-  putLinkFavorite,
-  putLinkURL,
-} from "@/lib/api/link";
+import { deleteLinkURL, putLinkFavorite, putLinkURL } from "@/lib/api/link";
 import { create } from "zustand";
 import { LinkData } from "@/types/linkTypes";
 
@@ -13,17 +8,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 | null;
 }
 
 export const useLinkCardStore = create<LinkCardStore>((set) => ({
   linkCardList: [],
+  totalCount: null,
 
-  setLinkCardList: (list: LinkData[]) => {
-    set({ linkCardList: list });
+  setLinkCardList: (list: LinkData[], totalCount: number) => {
+    set({ linkCardList: list, totalCount: totalCount });
   },
 
   // 수정 요청 보낸 후 목록 가져오기