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

components/FolderTag.tsx

@@ -11,7 +11,7 @@ const FolderTag = ({ folderList }: FolderListData) => {
   const handleSubmit = (id: number | string) => {
     router.push({
       pathname: router.pathname,
-      query: { ...router.query, folder: id },
+      query: id ? { folder: id } : {},
     });
   };
 

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

components/Link/AddLinkInput.tsx

@@ -1,17 +1,21 @@
 import { ChangeEvent, KeyboardEvent, useState } from "react";
 import { FolderListData } from "@/types/folderTypes";
+import { Modal } from "../modal/modalManager/ModalManager";
 import Image from "next/image";
 import SubmitButton from "../SubMitButton";
+import useModalStore from "@/store/useModalStore";
 
 const AddLinkInput = ({ folderList }: FolderListData) => {
+  const { isOpen, openModal } = useModalStore();
   const [link, setLink] = useState("");
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setLink(e.target.value);
   };
 
   const handleClick = () => {
-    // Addmodal 띄우면서 link 전달
+    openModal("AddModal", { list: folderList, link: link });
+    setLink("");
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
@@ -34,6 +38,7 @@ const AddLinkInput = ({ folderList }: FolderListData) => {
       <div onClick={handleClick}>
         <SubmitButton className="w-[80px] h-[37px]">추가하기</SubmitButton>
       </div>
+      {isOpen && <Modal />}
     </div>
   );
 };

components/Search/SearchInput.tsx

@@ -16,6 +16,7 @@ export const SearchInput = () => {
       pathname: router.pathname,
       query: { ...router.query, search: value },
     });
+    setValue("");
   };
 
   return (

components/Search/SearchResultMessage.tsx

@@ -0,0 +1,14 @@
+interface SearchResultMessageProps {
+  message: string | string[];
+}
+
+const SearchResultMessage = ({ message }: SearchResultMessageProps) => {
+  return (
+    <div className="text-[32px] text-gray400 mt-[40px]">
+      <span className="text-black300">&quot;{message}&quot;</span>으로 검색한
+      결과입니다.
+    </div>
+  );
+};
+
+export default SearchResultMessage;

lib/api/axiosInstanceApi.ts

@@ -2,14 +2,14 @@ import axios from "axios";
 
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000",
-  timeout: 5000,
+  timeout: 10000,
   withCredentials: true,
 });
 
 export const proxy = axios.create({
   // 배포 이후에는 배포된 URL로 변경해야 함.
   baseURL: "http://localhost:3000",
-  timeout: 5000,
+  timeout: 10000,
   withCredentials: true,
 });
 

pages/api/links/index.ts

@@ -5,12 +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;
 
   switch (req.method) {
     case "GET":
       // 유저의 전체 링크 조회
       try {
         const response = await axiosInstance.get("/links", {
+          params: { page, search },
           headers: { Authorization: `Bearer ${accessToken}` },
         });
         return res.status(201).json(response.data);

pages/link/index.tsx

@@ -1,24 +1,27 @@
+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
 ) => {
@@ -40,21 +43,33 @@ export const getServerSideProps = async (
 
   return {
     props: {
-      link: links || [],
       linkList: links.list || [],
       folderList: folders || [],
     },
   };
 };
 
-const LinkPage = ({ linkList, folderList }: LinkPageProps) => {
+const LinkPage = ({ linkList: initialLinkList, folderList }: LinkPageProps) => {
+  const router = useRouter();
+  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 },
+      });
+      setLinkCardList(res.data.list);
+    };
+    if (search !== undefined) fetchNewList();
+  }, [setLinkCardList, search]);
+
   // 클라이언트에서 초기 목록을 설정
   useEffect(() => {
-    setLinkCardList(linkList);
-  }, [linkList, setLinkCardList]);
+    setLinkCardList(initialLinkList);
+  }, [initialLinkList, setLinkCardList]);
 
   // EditLink 호출
   const openEdit = (link: string, linkId: number) => {
@@ -74,6 +89,7 @@ const LinkPage = ({ linkList, folderList }: LinkPageProps) => {
       <main className="mt-[40px]">
         <Container>
           <SearchInput />
+          {search && <SearchResultMessage message={search} />}
           <div className="flex justify-between mt-[40px]">
             {folderList && <FolderTag folderList={folderList} />}
             <button className="w-[79px] h-[19px] text-purple100">