Refactor : 모달 호출 위치 변경 및 자잘한 수정

components/Folder/AddFolderButton.tsx

@@ -20,7 +20,7 @@ export const AddFolderButton = ({
       className={
         !isModal
           ? "md:mt-auto xl:mt-0 text-purple100"
-          : "fixed-bottom w-[120px] h-[35px] rounded-[20px] bg-purple100 text-white hover:bg-purple50"
+          : "fixed-bottom w-[120px] h-[35px] rounded-[20px] bg-purple100 text-white hover:bg-purple50 z-50"
       }
       onClick={() => openModal("AddFolderModal")}
     >

components/Folder/FolderTag.tsx

@@ -7,25 +7,29 @@ const FolderTag = ({ folderList }: FolderListData) => {
 
   const folderStyle =
     "w-[100px] h-[35px] px-[15px] text-sm whitespace-nowrap truncate border border-purple100 rounded-md hover:bg-purple100 hover:text-white";
-
+  const selectedStyle = "bg-purple100 text-white";
   const handleSubmit = (selectedFolderId: number | string) => {
     router.push({
       pathname: router.pathname,
       query: selectedFolderId ? { folder: selectedFolderId } : {},
     });
   };
+  const isAllSelected = currentFolderId === "" || currentFolderId === undefined;
 
   return (
     <ul className="flex flex-wrap gap-[8px] lg:w-[80%] md:w-[80%]">
       <li>
-        <button className={folderStyle} onClick={() => handleSubmit("")}>
+        <button
+          className={`${folderStyle} ${isAllSelected && selectedStyle}`}
+          onClick={() => handleSubmit("")}
+        >
           전체
         </button>
       </li>
       {folderList.slice(0, 8).map((folder) => (
         <li key={folder.id}>
           <button
-            className={`${folderStyle} ${folder.id === Number(currentFolderId) && "bg-purple100 text-white"}`}
+            className={`${folderStyle} ${folder.id === Number(currentFolderId) && selectedStyle}`}
             type="submit"
             onClick={() => handleSubmit(folder.id)}
           >

components/Layout/Footer.tsx

@@ -6,7 +6,7 @@ const Footer = () => {
     <footer className="bg-black200 pt-8 sm:px-8 pb-[108px] md:px-[104px] lg:px-[104px] flex justify-center">
       <nav className="relative w-full lg:max-w-[1520px] md:max-w-[800px] sm:max-w-[326px] flex justify-between">
         <p className="text-gray700 sm:absolute sm:top-[60px] leading-[18.4px]">
-          ©codeit - 2023
+          ©codeit - 2024
         </p>
 
         <ul className="flex gap-[30px] text-gray800 leading-[18.4px]">

components/Link/AddLinkInput.tsx

@@ -1,6 +1,5 @@
 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";
@@ -9,7 +8,7 @@ import toastMessages from "@/lib/toastMessage";
 import { urlRegex } from "@/util/regex";
 
 const AddLinkInput = ({ folderList }: FolderListData) => {
-  const { isOpen, openModal } = useModalStore();
+  const { openModal } = useModalStore();
   const [link, setLink] = useState("");
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -54,8 +53,6 @@ const AddLinkInput = ({ folderList }: FolderListData) => {
           추가하기
         </SubmitButton>
       </div>
-
-      {isOpen && <Modal />}
     </div>
   );
 };

components/skeleton/LinkCardSkeleton.tsx

@@ -3,7 +3,7 @@ import "react-loading-skeleton/dist/skeleton.css";
 
 const LinkCardSkeleton = () => {
   return (
-    <div className="w-full p-4 border border-gray-300 rounded-lg shadow-sm">
+    <div className="w-full p-4 border border-gray-300 rounded-lg shadow-sm mb-4">
       <Skeleton height={160} />
       <Skeleton width="80%" className="mt-2" />
       <Skeleton width="60%" className="mt-2" />

lib/toastMessage.ts

@@ -10,6 +10,7 @@ const toastMessages = {
     editFolder: "폴더가 수정되었습니다",
     copyLink: "링크가 복사되었습니다", // SNS 모달에서 링크 복사 시
     SNSshare: "공유가 완료되었습니다",
+    addFolderInfo: "폴더를 생성해주세요",
   },
   error: {
     login: "로그인 실패: 이메일 또는 비밀번호를 확인해주세요",

pages/_app.tsx

@@ -1,5 +1,6 @@
 import Footer from "@/components/Layout/Footer";
 import Header from "@/components/Layout/Header";
+import { Modal } from "@/components/modal/modalManager/ModalManager";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import Head from "next/head";
@@ -20,7 +21,10 @@ export default function App({ Component, pageProps }: AppProps) {
           property="og:description"
           content="나만의 링크를 관리하는 Linkbrary"
         />
-        <meta property="og:image" content="/images/home_main.png" />
+        <meta
+          property="og:image"
+          content="https://linkbrary-9-99.vercel.app/images/home_main.png"
+        />
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -40,6 +44,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <div className="min-h-screen flex flex-col">
         <div>
           <Toaster />
+          <Modal />
         </div>
         {!hidePaths.includes(router.pathname) && <Header />}
         <div className="flex-grow">

pages/_document.tsx

@@ -4,7 +4,7 @@ export default function Document() {
   return (
     <Html lang="ko">
       <Head />
-      <body className="antialiased">
+      <body className="antialiased scrollbar-custom">
         <Main />
         <NextScript />
       </body>

pages/favorite/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { GetServerSideProps, GetServerSidePropsContext } from "next";
 import { parse } from "cookie";
@@ -10,6 +10,7 @@ import Pagination from "@/components/Pagination";
 import useFetchLinks from "@/hooks/useFetchLinks";
 import EmptyFavoriteList from "@/components/Favorite/EmptyFavoriteList";
 import LinkCardSkeleton from "@/components/skeleton/LinkCardSkeleton";
+import useViewport from "@/hooks/useViewport";
 
 interface FavoriteDataType {
   id: number;
@@ -64,6 +65,12 @@ const FavoritePage = ({
     useState<FavoriteDataType[]>(favoriteList);
   const [isLoading, setIsLoading] = useState(false);
   const [totalCount, setTotalCount] = useState(initialTotalCount);
+  const { isMobile, isTablet, isPC, width } = useViewport();
+  const [cardCount, setCardCount] = useState(3);
+  useEffect(() => {
+    const newCount = isPC ? 3 : isTablet ? 2 : 1;
+    setCardCount(newCount);
+  }, [width]);
 
   useFetchLinks(setLinkCardList, setIsLoading);
 
@@ -87,8 +94,8 @@ const FavoritePage = ({
         </div>
         {/* 로딩 중일 때 */}
         {isLoading ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[...Array(3)].map((_, index) => (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[...Array(cardCount)].map((_, index) => (
               <LinkCardSkeleton key={index} />
             ))}
           </div>

pages/link/index.tsx

@@ -4,7 +4,6 @@ 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 { SearchInput } from "../../components/Search/SearchInput";
 import { useLinkCardStore } from "@/store/useLinkCardStore";
 import axiosInstance from "@/lib/api/axiosInstanceApi";
@@ -22,8 +21,9 @@ import RenderEmptyLinkMessage from "@/components/Link/RenderEmptyLinkMessage";
 import useFetchLinks from "@/hooks/useFetchLinks";
 import useViewport from "@/hooks/useViewport";
 import useFolderName from "@/hooks/useFolderName";
-import LoadingSpinner from "@/components/LoadingSpinner";
 import LinkCardSkeleton from "@/components/skeleton/LinkCardSkeleton";
+import toast, { Toaster } from "react-hot-toast";
+import toastMessages from "@/lib/toastMessage";
 
 interface LinkPageProps {
   linkList: LinkData[];
@@ -79,13 +79,18 @@ const LinkPage = ({
 }: LinkPageProps) => {
   const router = useRouter();
   const { search, folder } = router.query;
-  const { isOpen } = useModalStore();
-  const { isMobile } = useViewport();
+  const { isMobile, isTablet, isPC, width } = useViewport();
   const { totalCount, linkCardList, setLinkCardList } =
     useLinkCardStore.getState();
   const [isLoading, setIsLoading] = useState(false);
   const [folderName] = useFolderName(folder);
   const [folderList, setFolderList] = useState(initialFolderList);
+  const { openModal } = useModalStore();
+  const [cardCount, setCardCount] = useState(3);
+  useEffect(() => {
+    const newCount = isPC ? 3 : isTablet ? 2 : 1;
+    setCardCount(newCount);
+  }, [width]);
 
   useEffect(() => {
     setLinkCardList(initialLinkList, initialTotalCount);
@@ -94,6 +99,13 @@ const LinkPage = ({
   // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
   useFetchLinks(setLinkCardList, setIsLoading);
 
+  // 생성된 폴더가 없으면 폴더 생성 모달 띄워주기
+  useEffect(() => {
+    if (folderList.length === 0) {
+      toast.success(toastMessages.success.addFolderInfo);
+      openModal("AddFolderModal");
+    }
+  }, []);
   return (
     <>
       <div className="bg-gray100 w-full h-[219px] flex justify-center items-center">
@@ -120,8 +132,8 @@ const LinkPage = ({
             )}
           </div>
           {isLoading ? (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-              {[...Array(3)].map((_, index) => (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[...Array(cardCount)].map((_, index) => (
                 <LinkCardSkeleton key={index} />
               ))}
             </div>
@@ -139,7 +151,6 @@ const LinkPage = ({
           )}
         </main>
       </Container>
-      {isOpen && <Modal />}
       {isMobile && (
         <AddFolderButton setFolderList={setFolderList} isModal={true} />
       )}

styles/globals.css

@@ -62,3 +62,23 @@ em {
 input {
   outline: none;
 }
+
+/* 스크롤 커스텀 */
+.scrollbar-custom {
+  overflow-y: auto; /* 기본 overflow-y-auto 추가 */
+}
+.scrollbar-custom::-webkit-scrollbar {
+  width: 8px;
+  height: 8px; /* 가로 스크롤바 높이 */
+}
+.scrollbar-custom::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-custom::-webkit-scrollbar-thumb {
+  background: #6d6afe;
+  border-radius: 9999px;
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb:hover {
+  background: #6d6afe;
+}