Merge branch 'develop' into feature/folderShare

Author: venise5224

components/Folder/AddFolderButton.tsx

@@ -4,16 +4,24 @@ import useRerenderFolderList from "@/hooks/useRerenderFolderList";
 
 interface AddFolderButtonProps {
   setFolderList: React.Dispatch<React.SetStateAction<FolderData[]>>;
+  isModal?: boolean;
 }
 
-export const AddFolderButton = ({ setFolderList }: AddFolderButtonProps) => {
+export const AddFolderButton = ({
+  setFolderList,
+  isModal = false,
+}: AddFolderButtonProps) => {
   const { isOpen, openModal } = useModalStore();
 
   useRerenderFolderList(isOpen, setFolderList);
 
   return (
     <button
-      className="w-[79px] h-[19px] text-purple100"
+      className={
+        !isModal
+          ? "w-[100px] mt-auto text-purple100"
+          : "fixed-bottom w-[120px] h-[35px] rounded-[20px] bg-purple100 text-white hover:bg-purple50"
+      }
       onClick={() => openModal("AddFolderModal")}
     >
       폴더 추가 +

components/Folder/FolderActionsMenu.tsx

@@ -5,9 +5,15 @@ import useRerenderFolderList from "../../hooks/useRerenderFolderList";
 
 interface FolderActionsMenuProps {
   setFolderList: React.Dispatch<React.SetStateAction<FolderData[]>>;
+  folderId: string | string[] | undefined;
+  linkCount: number;
 }
 
-const FolderActionsMenu = ({ setFolderList }: FolderActionsMenuProps) => {
+const FolderActionsMenu = ({
+  setFolderList,
+  folderId,
+  linkCount,
+}: FolderActionsMenuProps) => {
   const { isOpen, openModal } = useModalStore();
 
   const handleModalOpen = (text: string) => {
@@ -16,10 +22,15 @@ const FolderActionsMenu = ({ setFolderList }: FolderActionsMenuProps) => {
         openModal("SNSModal");
         break;
       case "이름 변경":
-        openModal("EditModal");
+        openModal("EditModal", {
+          folderId: Number(folderId),
+        });
         break;
       case "삭제":
-        openModal("DeleteFolderModal");
+        openModal("DeleteFolderModal", {
+          folderId: Number(folderId),
+          linkCount: linkCount,
+        });
         break;
       default:
         break;

components/Folder/FolderTag.tsx

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

components/HeaderMenu.tsx

@@ -5,17 +5,23 @@ import Link from "next/link";
 import SubmitButton from "./SubMitButton";
 import { useRouter } from "next/router";
 import useAuthStore from "@/store/useAuthStore";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Dropdown from "./Dropdown";
+import useOutsideClick from "@/hooks/useOutsideClick";
 
 const HeaderMenu = () => {
-  const { user, checkLogin, isLoggedIn, logout } = useAuthStore();
+  const { user, logout, fetchUserInfo } = useAuthStore();
   const [isOpen, setIsOpen] = useState(false);
   const router = useRouter();
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideClick(dropdownRef, () => {
+    setIsOpen(false);
+  });
 
   useEffect(() => {
-    checkLogin();
-  }, [checkLogin]);
+    fetchUserInfo();
+  }, [fetchUserInfo]);
 
   const dropdownItems = [
     {
@@ -31,7 +37,7 @@ const HeaderMenu = () => {
 
   return (
     <>
-      {!isLoggedIn ? (
+      {!user ? (
         <SubmitButton
           onClick={() => {
             router.push("/login");
@@ -61,6 +67,7 @@ const HeaderMenu = () => {
           <div
             className="flex items-center gap-[6px] text-[14px] leading-[16.71px] font-normal cursor-pointer"
             onClick={() => setIsOpen(!isOpen)}
+            ref={dropdownRef}
           >
             <Image src={Profile} width={28} height={28} alt="프로필" />
             <span className="hidden md:block lg:block">{user?.name}</span>

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="flex flex-wrap items-center gap-5 md:gap-6 lg:gap-[20px] w-full">
       {children}
     </div>
   );

components/Layout/Container.tsx

@@ -1,13 +1,32 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import ToTopBtn from "@/components/toTopBtn/ToTopBtn";
 
 interface ContainerProps {
   children: React.ReactNode;
 }
 
 const Container = ({ children }: ContainerProps) => {
+  const [showBtn, setShowBtn] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 300) {
+        setShowBtn(true);
+      } else {
+        setShowBtn(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
-    <div className="w-full max-w-[1125px] mx-auto p-[10px] md:p-10 lg:p-10 px-[32.5px]">
+    <div className="w-full lg:max-w-[1060px] md:max-w-[704px] sm:max-w-[325px] mx-auto">
       {children}
+      {showBtn && <ToTopBtn />}
     </div>
   );
 };

components/Layout/Footer.tsx

@@ -3,8 +3,8 @@ import SocialLinks from "../SocialLinks";
 
 const Footer = () => {
   return (
-    <footer className="bg-black200 pt-8 sm:px-8 pb-[108px] md:px-[104px] lg:px-[104px]">
-      <nav className="relative flex justify-between">
+    <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
         </p>

components/Layout/Header.tsx

@@ -5,8 +5,8 @@ import HeaderMenu from "../HeaderMenu";
 
 const Header = () => {
   return (
-    <header className="bg-gray100 py-[13px] px-[32px] md:py-[33px] md:px-[200px] lg:py-[33px] lg:px-[200px]">
-      <div className="flex justify-between items-center max-w-[1520px]">
+    <header className="bg-gray100 py-[13px] px-[30px] flex justify-center">
+      <div className="flex justify-between items-center w-full lg:max-w-[1520px] md:max-w-[800px] sm:max-w-[326px]">
         <h1 className="w-[88.67px] h-[16px] md:w-[133px] md:h-[24px] lg:w-[133px] lg:h-[24px]">
           <Link href={"/"}>
             <Image src={Logo} width={133} height={24} alt="로고" />

components/Link/AddLinkInput.tsx

@@ -35,18 +35,22 @@ const AddLinkInput = ({ folderList }: FolderListData) => {
   };
 
   return (
-    <div className="flex bg-white gap-[12px] items-center w-[800px] h-[69px] py-[16px] px-[20px] border border-blue-500 rounded-[10px] md:w-[704px] sm:w-[325px] sm:h-[53px] transition-all">
+    <div className="flex bg-white justify-between items-center w-full lg:max-w-[800px] md:max-w-[704px] sm:max-w-[325px] h-[69px] lg:px-5 md:px-5 sm:px-[10px] border border-blue-500 rounded-[10px] md:w-[704px] sm:w-[325px] sm:h-[53px] transition-all">
       <Image src="/icons/link.svg" width={20} height={20} alt="link icon" />
       <input
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         value={link}
         placeholder="링크를 추가해 보세요."
-        className="flex-grow"
+        className="lg:ml-3 md:ml-3 sm:ml-[8px]"
       />
-      <div onClick={handleClick}>
-        <SubmitButton className="w-[80px] h-[37px]">추가하기</SubmitButton>
-      </div>
+      <SubmitButton
+        onClick={handleClick}
+        className="w-[80px] h-[37px] text-[14px]"
+      >
+        추가하기
+      </SubmitButton>
+
       {isOpen && <Modal />}
     </div>
   );

components/Link/LinkCard.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
-import { putLinkFavorite } from "@/lib/api/link";
 import { useLinkCardStore } from "@/store/useLinkCardStore";
 import { ensureAbsoluteUrl } from "@/lib/utils";
-import timeAgo from "@/util/timAgo";
+import timeAgo from "@/util/timeAgo";
 import Image from "next/image";
 import Dropdown from "../Dropdown";
 import useModalStore from "@/store/useModalStore";
+import useOutsideClick from "@/hooks/useOutsideClick";
 
 interface LinkCardProps {
   info: {
@@ -24,24 +24,29 @@ const LinkCard = ({ info }: LinkCardProps) => {
   const [isSubscribed, setIsSubscribed] = useState(info.favorite || false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { isOpen, openModal } = useModalStore();
+
   const { updateFavorite } = useLinkCardStore();
 
   const formattedDate = info.createdAt?.slice(0, 10).replace(/-/g, ".");
   const createdTime = timeAgo(info.createdAt);
 
   const router = useRouter();
   const isFavoritePage = router.pathname === "/favorite";
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
 
   // 모달이 열릴 때 드롭다운 닫기
   useEffect(() => {
     if (isOpen) setIsDropdownOpen(false);
   }, [isOpen]);
 
+  useOutsideClick(dropdownRef, () => {
+    setIsDropdownOpen(false);
+  });
+
   // 즐겨찾기 버튼 클릭 시 호출되는 함수
   const handleFavoriteToggle = async () => {
     setIsSubscribed((prev) => !prev);
     try {
-      await putLinkFavorite(info.id, { favorite: !isSubscribed });
       updateFavorite(info.id, !isSubscribed);
     } catch (error) {
       console.error("즐겨찾기 설정 중 오류 발생:", error);
@@ -104,7 +109,7 @@ const LinkCard = ({ info }: LinkCardProps) => {
           </span>
           {/* isFavoritePage일 때만 케밥 버튼 렌더링 */}
           {!isFavoritePage && (
-            <div className="relative">
+            <div className="relative" ref={dropdownRef}>
               <button
                 className="relative w-[21px] h-[17px]"
                 onClick={toggleDropdown}