Feat: 링크 검색 기능, 링크 추가 기능 구현

components/Layout/CardsLayout.tsx

@@ -6,7 +6,7 @@ interface CardsLayoutProps {
 
 const CardsLayout = ({ children }: CardsLayoutProps) => {
   return (
-    <div className="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 lg:gap-[20px] w-full">
+    <div className="grid place-items-center grid-cols-1 my-[24px] md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 lg:gap-[20px] w-full">
       {children}
     </div>
   );

pages/api/links/index.ts

@@ -7,8 +7,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const accessToken = cookies.accessToken;
   const { page, search } = req.query;
 
-  console.log("서버에서의 search는? : ", search);
-
   switch (req.method) {
     case "GET":
       // 유저의 전체 링크 조회

pages/link/index.tsx

@@ -1,27 +1,27 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { proxy } from "@/lib/api/axiosInstanceApi";
 import { LinkData } from "@/types/linkTypes";
 import { FolderData } from "@/types/folderTypes";
-import { SearchInput } from "../../components/Search/SearchInput";
 import { Modal } from "@/components/modal/modalManager/ModalManager";
 import { useLinkCardStore } from "@/store/useLinkCardStore";
-import { useEffect } from "react";
-import Container from "@/components/Layout/Container";
+import { SearchInput } from "../../components/Search/SearchInput";
 import CardsLayout from "@/components/Layout/CardsLayout";
+import Container from "@/components/Layout/Container";
 import ActionButtons from "@/components/link/ActionButtons";
 import AddLinkInput from "@/components/link/AddLinkInput";
 import SearchResultMessage from "@/components/Search/SearchResultMessage";
+import useModalStore from "@/store/useModalStore";
 import FolderTag from "../../components/FolderTag";
 import LinkCard from "../../components/LinkCard";
-import useModalStore from "@/store/useModalStore";
 
 interface LinkPageProps {
   linkList: LinkData[];
   folderList: FolderData[];
 }
 
+// /link 페이지 접속시에 초기렌더링 데이터(전체 폴더, 전체링크리스트)만 fetch해서 client로 전달.
 export const getServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
@@ -43,31 +43,44 @@ export const getServerSideProps = async (
 
   return {
     props: {
-      link: links || [],
       linkList: links.list || [],
       folderList: folders || [],
     },
   };
 };
 
-const LinkPage = ({
-  linkList: initialLinkList,
-  folderList: initialFolderList,
-}: LinkPageProps) => {
+const LinkPage = ({ linkList: initialLinkList, folderList }: LinkPageProps) => {
   const router = useRouter();
-  const [linkList, setLinkList] = useState(initialLinkList);
-  const [folderList, setFolderList] = useState(initialFolderList);
   const { search } = router.query;
+  const { isOpen, openModal } = useModalStore();
+  const { linkCardList, setLinkCardList } = useLinkCardStore();
 
+  // 검색어 입력시 관련된 목록으로 setLinkCardList
   useEffect(() => {
     const fetchNewList = async () => {
       const res = await proxy.get("/api/links", {
         params: { search },
       });
       console.log(res.data);
+      setLinkCardList(res.data.list);
     };
     if (search !== undefined) fetchNewList();
-  }, [search]);
+  }, [setLinkCardList, search]);
+
+  // 클라이언트에서 초기 목록을 설정
+  useEffect(() => {
+    setLinkCardList(initialLinkList);
+  }, [initialLinkList, setLinkCardList]);
+
+  // EditLink 호출
+  const openEdit = (link: string, linkId: number) => {
+    openModal("EditLink", { link, linkId: linkId ?? null });
+  };
+
+  // DeleteLinkModal 호출
+  const openDelete = (link: string, linkId: number) => {
+    openModal("DeleteLinkModal", { link, linkId: linkId ?? null });
+  };
 
   return (
     <>