Merge pull request #91 from codeit9-temporary/feature/Link-페이지

Feat: 페이지네이션 merge 이후 Link 페이지 개선, useViewport useFetchLinks 훅 추가

Author: junjeeong

components/Folder/AddFolderButton.tsx

@@ -0,0 +1,23 @@
+import { FolderData } from "@/types/folderTypes";
+import useModalStore from "@/store/useModalStore";
+import useRerenderFolderList from "@/hooks/useRerenderFolderList";
+
+interface AddFolderButtonProps {
+  setFolderList: React.Dispatch<React.SetStateAction<FolderData[]>>;
+}
+
+export const AddFolderButton = ({ setFolderList }: AddFolderButtonProps) => {
+  const { isOpen, openModal } = useModalStore();
+
+  useRerenderFolderList(isOpen, setFolderList);
+
+  return (
+    <button
+      className="w-[79px] h-[19px] text-purple100"
+      onClick={() => openModal("AddFolderModal")}
+    >
+      폴더 추가 +
+    </button>
+  );
+};
+export default AddFolderButton;

components/Folder/FolderActionsMenu.tsx

@@ -0,0 +1,51 @@
+import { FolderData } from "@/types/folderTypes";
+import Image from "next/image";
+import useModalStore from "@/store/useModalStore";
+import useRerenderFolderList from "../../hooks/useRerenderFolderList";
+
+interface FolderActionsMenuProps {
+  setFolderList: React.Dispatch<React.SetStateAction<FolderData[]>>;
+}
+
+const FolderActionsMenu = ({ setFolderList }: FolderActionsMenuProps) => {
+  const { isOpen, openModal } = useModalStore();
+
+  const handleModalOpen = (text: string) => {
+    switch (text) {
+      case "공유":
+        openModal("SNSModal");
+        break;
+      case "이름 변경":
+        openModal("EditModal");
+        break;
+      case "삭제":
+        openModal("DeleteFolderModal");
+        break;
+      default:
+        break;
+    }
+  };
+
+  useRerenderFolderList(isOpen, setFolderList);
+
+  return (
+    <div className="w-[192px] h-[18px] flex justify-between gap-[12px] text-gray400">
+      {[
+        { src: "/icons/share.svg", alt: "공유", text: "공유" },
+        { src: "/icons/pen.svg", alt: "이름 변경", text: "이름 변경" },
+        { src: "/icons/delete.svg", alt: "삭제", text: "삭제" },
+      ].map(({ src, alt, text }) => (
+        <button
+          key={text}
+          className="flex items-center gap-[4px] text-sm"
+          onClick={() => handleModalOpen(text)}
+        >
+          <Image width={18} height={18} src={src} alt={alt} />
+          <span>{text}</span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default FolderActionsMenu;

components/FolderTag.tsx components/Folder/FolderTag.tsxcomponents/FolderTag.tsx renamed to components/Folder/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/Link/ActionButtons.tsx

@@ -1,17 +1,21 @@
-import { ChangeEvent, KeyboardEvent, useState } from "react";
+import { ChangeEvent, KeyboardEvent, useEffect, 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/Link/AddLinkInput.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import timeAgo from "@/util/timAgo";
 import Image from "next/image";
-import Dropdown from "./Dropdown";
+import Dropdown from "../Dropdown";
 import useModalStore from "@/store/useModalStore";
 
 interface LinkCardProps {

components/LinkCard.tsx components/Link/LinkCard.tsxcomponents/LinkCard.tsx renamed to components/Link/LinkCard.tsx

@@ -1,22 +1,21 @@
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 interface PaginationProps {
-  page: number;
-  pageSize: number;
   totalCount: number;
 }
 
-const Pagination: React.FC<PaginationProps> = ({
-  page,
-  pageSize,
-  totalCount,
-}) => {
+const Pagination: React.FC<PaginationProps> = ({ totalCount }) => {
+  const router = useRouter();
   const LiStyle = "relative w-12 h-12 rounded-lg bg-gray900";
   const buttonStyle = "flex justify-center items-center h-full text-black400";
+  const { page, pageSize } = router.query;
 
-  const totalPages = Math.ceil(totalCount / pageSize);
+  const currentPage = Number(page);
+  const currentPageSize = Number(pageSize);
+  const totalPages = Math.ceil(totalCount / currentPageSize);
   const [maxPagesToShow, setMaxPagesToShow] = useState(2);
 
   // 화면 크기 변화에 따라 pageSize와 maxPagesToShow를 설정
@@ -45,12 +44,12 @@ const Pagination: React.FC<PaginationProps> = ({
     } else {
       // 첫 페이지와 마지막 페이지는 항상 표시
       pages.push(1);
-      let start = Math.max(2, page - 1);
-      let end = Math.min(totalPages - 1, page + 1);
+      let start = Math.max(2, currentPage - 1);
+      let end = Math.min(totalPages - 1, currentPage + 1);
 
-      if (page > 3) pages.push("...");
+      if (currentPage > 3) pages.push("...");
       for (let i = start; i <= end; i++) pages.push(i);
-      if (page < totalPages - 2) pages.push("...");
+      if (currentPage < totalPages - 2) pages.push("...");
       pages.push(totalPages);
     }
 
@@ -61,12 +60,12 @@ const Pagination: React.FC<PaginationProps> = ({
     <ul className="flex justify-center gap-[10px] my-10">
       <li className={LiStyle}>
         <Link
-          href={`/link?page=${page - 1}&pageSize=${pageSize}`}
-          className={`${buttonStyle} ${page > 1 ? "text-black500" : "pointer-events-none"}`}
+          href={`/link?page=${currentPage - 1}&pageSize=${currentPageSize}`}
+          className={`${buttonStyle} ${currentPage > 1 ? "text-black500" : "pointer-events-none"}`}
         >
           <Image
             src={
-              page > 1
+              currentPage > 1
                 ? "/icons/pagination-left-active.png"
                 : "/icons/pagination-left.png"
             }
@@ -83,7 +82,7 @@ const Pagination: React.FC<PaginationProps> = ({
           <li key={index} className={LiStyle}>
             <Link
               href={`/link?page=${pageNum}&pageSize=${pageSize}`}
-              className={`${buttonStyle} ${pageNum === page ? "text-black500" : "text-black400"}`}
+              className={`${buttonStyle} ${pageNum === currentPage ? "text-black500" : "text-black400"}`}
             >
               {pageNum}
             </Link>
@@ -100,12 +99,12 @@ const Pagination: React.FC<PaginationProps> = ({
 
       <li className={LiStyle}>
         <Link
-          href={`/link?page=${page + 1}&pageSize=${pageSize}`}
-          className={`${buttonStyle} ${page < totalPages ? "text-black500" : "pointer-events-none"}`}
+          href={`/link?page=${currentPage + 1}&pageSize=${pageSize}`}
+          className={`${buttonStyle} ${currentPage < totalPages ? "text-black500" : "pointer-events-none"}`}
         >
           <Image
             src={
-              page < totalPages
+              currentPage < totalPages
                 ? "/icons/pagination-right-active.png"
                 : "/icons/pagination-right.png"
             }

components/Pagination.tsx

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

components/Search/SearchInput.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;

components/Search/SearchResultMessage.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { proxy } from "@/lib/api/axiosInstanceApi";
+import { LinkData } from "@/types/linkTypes";
+import useViewport from "./useViewport";
+
+// 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
+const useFetchLinks = (
+  query: {
+    page?: number;
+    search?: string;
+  },
+  setLinkCardList: (list: LinkData[]) => void
+) => {
+  const { isTablet } = useViewport();
+
+  useEffect(() => {
+    const fetchLinks = async () => {
+      const res = await proxy.get("/api/links", {
+        params: {
+          page: query.page,
+          pageSize: isTablet ? 6 : 10,
+          search: query.search,
+        },
+      });
+      setLinkCardList(res.data.list);
+    };
+
+    if (query) fetchLinks();
+  }, [query, setLinkCardList, isTablet]);
+};
+
+export default useFetchLinks;