Merge pull request #127 from part3-4team-Taskify/feature/Gnb

[Feat] Modal: DeleteModal 컴포넌트 추가 / toast: 커스텀 토스트 추가 / 배포 에러 fix

Author: MINJI121

src/components/button/CardButton.tsx

@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import clsx from "clsx";
 import Image from "next/image";
 
-interface CardButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface CardButtonProps extends React.ButtonHTMLAttributes<HTMLDivElement> {
   fullWidth?: boolean;
   title?: string;
   showCrown?: boolean;
@@ -31,7 +30,7 @@ const CardButton: React.FC<CardButtonProps> = ({
 }) => {
   const router = useRouter();
 
-  const handleCardClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
     // 관리 상태에서 카드 클릭 이벤트 차단
     if (isEditMode) {
       e.preventDefault();
@@ -58,7 +57,7 @@ const CardButton: React.FC<CardButtonProps> = ({
   };
 
   return (
-    <button
+    <div
       {...props}
       onClick={handleCardClick}
       className={clsx(
@@ -84,7 +83,9 @@ const CardButton: React.FC<CardButtonProps> = ({
         </svg>
 
         {/* 제목 */}
-        <span className="font-16sb truncate">{title}</span>
+        <span className="font-16sb truncate max-w-[90px] sm:max-w-[100px] md:max-w-[120px] lg:max-w-[160px]">
+          {title}
+        </span>
 
         {/* 왕관 */}
         {showCrown && (
@@ -93,7 +94,7 @@ const CardButton: React.FC<CardButtonProps> = ({
             alt="crown Icon"
             width={20}
             height={20}
-            className="w-[20px] h-[20px]"
+            className="hidden sm:block w-[20px] h-[20px]"
           />
         )}
       </div>
@@ -125,7 +126,7 @@ const CardButton: React.FC<CardButtonProps> = ({
           className="ml-2"
         />
       )}
-    </button>
+    </div>
   );
 };
 

src/components/common/CustomToastContainer.tsx

@@ -0,0 +1,19 @@
+"use client";
+import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer, Slide } from "react-toastify";
+
+const CustomToastContainer = () => {
+  return (
+    <ToastContainer
+      position="top-center"
+      autoClose={2500}
+      hideProgressBar={true}
+      closeButton={false}
+      pauseOnHover={false}
+      newestOnTop
+      transition={Slide}
+    />
+  );
+};
+
+export default CustomToastContainer;

src/components/gnb/HeaderDashboard.tsx

@@ -12,8 +12,6 @@ import { MemberList, UserAvatars } from "@/components/gnb/Avatars";
 import UserMenu from "@/components/gnb/UserMenu";
 import MemberListMenu from "@/components/gnb/MemberListMenu";
 import InviteDashboard from "@/components/modal/InviteDashboard";
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 
 interface HeaderDashboardProps {
   variant?: "mydashboard" | "dashboard" | "edit" | "mypage";
@@ -123,16 +121,20 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
 
   return (
     <header className="w-full h-[60px] md:h-[70px] flex items-center justify-center bg-white border-b-[1px] border-b-[var(--color-gray3)]">
-      <ToastContainer position="top-center" />
       <div className="w-full flex items-center justify-between pl-[4vw]">
         {errorMessage && (
           <p className="text-sm text-[var(--color-red)] px-4 py-2">
             {errorMessage}
           </p>
         )}
+
+        {/*헤더 제목*/}
         <div className="flex items-center gap-[8px]">
           <p
-            className={`text-base text-black3 font-bold md:text-xl ${variant !== "mydashboard" ? "hidden md:block" : ""}`}
+            className={clsx(
+              "font-20b text-black3 whitespace-nowrap",
+              variant !== "mydashboard" ? "hidden lg:block" : ""
+            )}
           >
             {title}
           </p>
@@ -145,7 +147,7 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
               className={
                 variant === "mydashboard"
                   ? "inline-block"
-                  : "hidden md:inline-block"
+                  : "hidden lg:inline-block"
               }
               unoptimized
               priority
@@ -155,18 +157,17 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
 
         <div className="flex items-center">
           <div
-            className={`flex gap-[6px] md:gap-[16px] ${variant === "mydashboard" ? "pr-[22px] md:pr-[32px]" : ""}`}
+            className={clsx(
+              "flex gap-[6px] md:gap-[16px]",
+              variant === "mydashboard" ? "pr-[22px] md:pr-[32px]" : ""
+            )}
           >
             {/*관리 버튼*/}
-            {variant !== "edit" && (
+            {(variant === "mydashboard" || dashboard?.createdByMe) && (
               <button
                 onClick={() => {
                   if (dashboardId) {
-                    if (dashboard && dashboard.createdByMe === true) {
-                      router.push(`/dashboard/${dashboardId}/edit`);
-                    } else {
-                      toast.error("대시보드 수정 권한이 없습니다.");
-                    }
+                    router.push(`/dashboard/${dashboardId}/edit`);
                   } else {
                     if (onToggleEditMode) {
                       onToggleEditMode();
@@ -194,29 +195,35 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
             )}
 
             {/*초대하기 버튼*/}
-            {variant !== "mydashboard" && variant !== "edit" && (
-              <button
-                onClick={openInviteModal}
-                className="flex items-center justify-center w-[73px] h-[30px] md:w-[109px] md:h-[36px] lg:w-[116px] lg:h-[40px] rounded-[8px] border border-[var(--color-gray3)] gap-[10px] cursor-pointer"
-              >
-                <Image
-                  src="/svgs/add-box.svg"
-                  alt="초대하기 아이콘"
-                  width={20}
-                  height={20}
-                  className="hidden md:block"
-                />
-                <span className="text-sm md:text-base text-gray1">
-                  초대하기
-                </span>
-              </button>
-            )}
+            {variant !== "mydashboard" &&
+              variant !== "edit" &&
+              dashboard?.createdByMe && (
+                <button
+                  onClick={openInviteModal}
+                  className={clsx(
+                    "flex items-center justify-center",
+                    "w-[73px] h-[30px] md:w-[109px] md:h-[36px] lg:w-[116px] lg:h-[40px]",
+                    "border border-[var(--color-gray3)] rounded-[8px] gap-[10px] cursor-pointer"
+                  )}
+                >
+                  <Image
+                    src="/svgs/add-box.svg"
+                    alt="초대하기 아이콘"
+                    width={20}
+                    height={20}
+                    className="hidden md:block"
+                  />
+                  <span className="text-sm md:text-base text-gray1">
+                    초대하기
+                  </span>
+                </button>
+              )}
             {isModalOpen && <InviteDashboard onClose={closeInviteModal} />}
           </div>
 
           {/*멤버 목록*/}
           {variant !== "mydashboard" && (
-            <div className="relative flex items-center justify-center w-[150px] md:w-[190px] h-[60px] md:h-[70px]">
+            <div className="relative flex items-center justify-center w-[150px] md:w-[190px] h-[60px] md:h-[70px] whitespace-nowrap">
               {isLoading ? (
                 <SkeletonUser />
               ) : (
@@ -248,7 +255,7 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
             {/*유저 드롭다운 메뉴*/}
             <div
               onClick={() => setIsMenuOpen((prev) => !prev)}
-              className="flex items-center gap-[12px] pl-[20px] md:pl-[30px] lg:pl-[35px] cursor-pointer"
+              className="flex items-center gap-[12px] pl-[20px] md:pl-[30px] lg:pl-[35px] cursor-pointer overflow-hidden"
             >
               <UserMenu
                 user={user}
@@ -262,7 +269,7 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
                 user && (
                   <>
                     <UserAvatars user={user} />
-                    <span className="hidden md:block text-black3 md:text-base md:font-medium">
+                    <span className="hidden md:block text-black3 md:text-base md:font-medium max-w-[90px] truncate whitespace-nowrap">
                       {user.nickname}
                     </span>
                   </>

src/components/gnb/MemberListMenu.tsx

@@ -1,4 +1,5 @@
 import React, { useRef } from "react";
+import clsx from "clsx";
 import { useClosePopup } from "@/hooks/useClosePopup";
 import { UserAvatars } from "@/components/gnb/Avatars";
 import { MemberType } from "@/types/users";
@@ -21,10 +22,14 @@ const MemberListMenu: React.FC<MemberListMenuProps> = ({
   return (
     <div
       ref={ref}
-      className={`absolute top-full right-0 w-full z-50
-        bg-white border border-[var(--color-gray3)] shadow
-        transition-all duration-200 ease-out
-        ${isListOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2 pointer-events-none"}`}
+      className={clsx(
+        "absolute top-full right-0 w-full z-50",
+        "bg-white border border-[var(--color-gray3)] shadow",
+        "transition-all duration-200 ease-out",
+        isListOpen
+          ? "opacity-100 translate-y-0"
+          : "opacity-0 -translate-y-2 pointer-events-none"
+      )}
     >
       <ul className="flex flex-col font-16r max-h-[300px] overflow-y-auto">
         {members.map((member) => (
@@ -33,7 +38,7 @@ const MemberListMenu: React.FC<MemberListMenuProps> = ({
             className="px-4 py-2 flex items-center gap-2 hover:bg-[#f9f9f9]"
           >
             <UserAvatars user={member} />
-            <span className="text-black3 text-sm md:text-base">
+            <span className="text-black3 text-sm md:text-base truncate max-w-[60px] md:max-w-[90px]">
               {member.nickname}
             </span>
           </li>

src/components/gnb/UserMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from "react";
 import { useRouter } from "next/router";
+import clsx from "clsx";
 import { useClosePopup } from "@/hooks/useClosePopup";
 import { User, LogOut, FolderPen } from "lucide-react";
 import { UserType } from "@/types/users";
@@ -11,8 +12,12 @@ interface UserMenuProps {
   setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const dropdownButtonStyles =
-  "flex justify-center md:justify-start items-center w-full px-3 py-3 gap-3 font-16r text-black3 hover:text-[var(--primary)] hover:bg-[#f9f9f9] cursor-pointer";
+const dropdownButtonStyles = clsx(
+  "flex justify-center md:justify-start items-center",
+  "w-full px-3 py-3 gap-3",
+  "text-sm lg:text-base text-black3",
+  "hover:text-[var(--primary)] hover:bg-[#f9f9f9] cursor-pointer"
+);
 
 const UserMenu: React.FC<UserMenuProps> = ({ isMenuOpen, setIsMenuOpen }) => {
   const { clearUser } = useUserStore();
@@ -31,10 +36,14 @@ const UserMenu: React.FC<UserMenuProps> = ({ isMenuOpen, setIsMenuOpen }) => {
   return (
     <div
       ref={ref}
-      className={`absolute top-full right-0 w-full
-        bg-white border border-[var(--color-gray3)] shadow z-50
-        transition-all duration-200 ease-out
-        ${isMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2 pointer-events-none"}`}
+      className={clsx(
+        "absolute top-full right-0 w-full z-50",
+        "bg-white border border-[var(--color-gray3)] shadow",
+        "transition-all duration-200 ease-out",
+        isMenuOpen
+          ? "opacity-100 translate-y-0"
+          : "opacity-0 -translate-y-2 pointer-events-none"
+      )}
     >
       <button
         onClick={() => router.push("/mypage")}

src/components/input/Input.tsx

@@ -11,6 +11,7 @@ interface GeneralInputProps {
   onChange?: (value: string) => void;
   value?: string;
   readOnly?: boolean; //입력방지 추가
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 interface SignInputProps extends Omit<GeneralInputProps, "type"> {
@@ -109,6 +110,7 @@ export default function Input(props: InputProps) {
             );
             setIsInvalid(true);
           }}
+          onKeyDown={rest.onKeyDown}
           className={clsx(
             "peer flex h-[50px] w-full max-w-[520px] px-2 sm:px-4 py-2 rounded-lg transition-colors duration-200",
             "border border-[var(--color-gray3)] focus:border-[var(--primary)] focus:ring-0 focus:outline-none",