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

[Feat, Style] mydashboard: 관리 모드 추가 / CardButton: 대시보드 탈퇴 기능 추가

Author: ozen0718

src/components/button/CardButton.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useRouter } from "next/router";
 import clsx from "clsx";
 import Image from "next/image";
 
@@ -8,6 +9,11 @@ interface CardButtonProps
   title?: string;
   showCrown?: boolean;
   color?: string;
+  isEditMode?: boolean;
+  dashboardId: number;
+  createdByMe?: boolean;
+  onDeleteClick?: (id: number) => void;
+  onLeaveClick?: (id: number) => void;
 }
 
 const CardButton: React.FC<CardButtonProps> = ({
@@ -16,21 +22,59 @@ const CardButton: React.FC<CardButtonProps> = ({
   title = "비브리지",
   showCrown = true,
   color = "#7ac555", // 기본 색상
+  isEditMode = false,
+  dashboardId,
+  createdByMe,
+  onDeleteClick,
+  onLeaveClick,
   ...props
 }) => {
+  const router = useRouter();
+
+  const handleCardClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    // 관리 상태에서 카드 클릭 이벤트 차단
+    if (isEditMode) {
+      e.preventDefault();
+      return;
+    }
+    // 카드 클릭 시 해당 대시보드로 이동
+    router.push(`/dashboard/${dashboardId}`);
+  };
+
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    router.push(`/dashboard/${dashboardId}/edit`);
+  };
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (createdByMe) {
+      // 실제 삭제 API 요청
+      if (onDeleteClick) onDeleteClick(dashboardId);
+    } else {
+      // 나만 탈퇴
+      if (onLeaveClick) onLeaveClick(dashboardId);
+    }
+  };
+
   return (
     <button
+      {...props}
+      onClick={handleCardClick}
       className={clsx(
         "flex justify-between items-center bg-white transition-all",
-        "rounded-lg px-4 py-3 font-semibold",
-        "border border-gray-300 hover:border-purple-500",
+        "rounded-lg px-4 py-3 font-16sb",
+        "border border-gray-300",
         fullWidth ? "w-full" : "w-[260px] md:w-[247px] lg:w-[332px]",
         "h-[58px] md:h-[68px] lg:h-[70px]",
         "mt-[10px] md:mt-[16px] lg:mt-[20px]",
         "text-lg md:text-2lg lg:text-2lg",
+        "transition-all",
+        isEditMode
+          ? "cursor-default hover:border-gray-300"
+          : "cursor-pointer hover:border-purple-500",
         className
       )}
-      {...props}
     >
       {/* 왼쪽: 색상 도트 + 제목 + 왕관 */}
       <div className="flex items-center gap-[10px] overflow-hidden">
@@ -40,7 +84,7 @@ const CardButton: React.FC<CardButtonProps> = ({
         </svg>
 
         {/* 제목 */}
-        <span className="font-semibold truncate">{title}</span>
+        <span className="font-16sb truncate">{title}</span>
 
         {/* 왕관 */}
         {showCrown && (
@@ -54,14 +98,33 @@ const CardButton: React.FC<CardButtonProps> = ({
         )}
       </div>
 
-      {/* 오른쪽: 화살표 아이콘 */}
-      <Image
-        src="/svgs/arrow-forward-black.svg"
-        alt="arrow icon"
-        width={16}
-        height={16}
-        className="ml-2"
-      />
+      {/* 오른쪽: 화살표 아이콘 or 수정/삭제 버튼 */}
+      {isEditMode ? (
+        <div className="flex flex-col gap-2">
+          {createdByMe && (
+            <button
+              onClick={handleEdit}
+              className="font-12m text-gray1 border border-[var(--color-gray3)] px-2 rounded hover:bg-gray-100 cursor-pointer"
+            >
+              수정
+            </button>
+          )}
+          <button
+            onClick={handleDelete}
+            className="font-12m text-red-400 border border-red-400 px-2 rounded hover:bg-red-100 cursor-pointer"
+          >
+            삭제
+          </button>
+        </div>
+      ) : (
+        <Image
+          src="/svgs/arrow-forward-black.svg"
+          alt="arrow icon"
+          width={16}
+          height={16}
+          className="ml-2"
+        />
+      )}
     </button>
   );
 };

src/components/button/DashboardAddButton.tsx

@@ -17,12 +17,13 @@ const DashboardAddButton: React.FC<DashboardAddButtonProps> = ({
     <button
       className={clsx(
         "flex justify-center items-center gap-[10px] bg-white transition-all",
-        "rounded-lg px-4 py-3 font-semibold",
+        "rounded-lg px-4 py-3 font-16sb",
         "border border-gray-300 hover:border-purple-500",
         fullWidth ? "w-full" : "w-[260px] md:w-[247px] lg:w-[332px]", // 반응형 너비
         "h-[58px] md:h-[68px] lg:h-[70px]", // 반응형 높이
         "mt-[10px] md:mt-[16px] lg:mt-[20px]", // 여백
         "text-lg md:text-2lg lg:text-2lg",
+        "cursor-pointer",
         className
       )}
       {...props}

src/components/button/PaginationButton.tsx

@@ -14,7 +14,8 @@ export const PaginationButton: React.FC<PaginationButtonProps> = ({
   const baseStyle =
     "w-[40px] h-[40px] flex justify-center items-center border border-[var(--color-gray3)] rounded-md text-[16px] font-medium cursor-pointer transition";
 
-  const enabledTextColor = "text-[var(--color-gray1)] hover:bg-gray-100";
+  const enabledTextColor =
+    "text-[var(--color-gray1)] bg-white hover:bg-[var(--color-gray5)]";
   const disabledTextColor = "text-[var(--color-gray3)] ";
 
   const finalStyle = `${baseStyle} ${disabled ? disabledTextColor : enabledTextColor}`;

src/components/gnb/HeaderDashboard.tsx

@@ -18,11 +18,15 @@ interface HeaderDashboardProps {
   variant?: "mydashboard" | "dashboard" | "mypage";
   dashboardTitle?: string;
   dashboardId?: string | string[];
+  isEditMode?: boolean;
+  onToggleEditMode?: () => void;
 }
 
 const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
   variant,
   dashboardId,
+  isEditMode,
+  onToggleEditMode,
 }) => {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(true);
@@ -113,7 +117,7 @@ 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-[#D9D9D9]">
+    <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 && (
@@ -148,6 +152,7 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
           <div
             className={`flex gap-[6px] md:gap-[16px] ${variant === "mydashboard" ? "pr-[22px] md:pr-[32px]" : ""}`}
           >
+            {/*관리 버튼*/}
             <button
               onClick={() => {
                 if (dashboardId) {
@@ -157,10 +162,12 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
                     toast.error("대시보드 수정 권한이 없습니다.");
                   }
                 } else {
-                  router.push("/mypage");
+                  if (onToggleEditMode) {
+                    onToggleEditMode();
+                  }
                 }
               }}
-              className="flex items-center justify-center w-[49px] h-[30px] md:w-[85px] md:h-[36px] lg:w-[88px] lg:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
+              className="flex items-center justify-center w-[49px] h-[30px] md:w-[85px] md:h-[36px] lg:w-[88px] lg:h-[40px] rounded-[8px] border border-[var(--color-gray3)] gap-[10px] cursor-pointer"
             >
               <Image
                 src="/svgs/settings.svg"
@@ -169,14 +176,16 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
                 height={20}
                 className="hidden md:block"
               />
-              <span className="text-sm md:text-base text-gray1">관리</span>
+              <span className="text-sm md:text-base text-gray1">
+                {isEditMode ? "완료" : "관리"}
+              </span>
             </button>
 
             {/*초대하기 버튼*/}
             {variant !== "mydashboard" && (
               <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-[#D9D9D9] gap-[10px] cursor-pointer"
+                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"

src/components/gnb/HeaderDefault.tsx

@@ -28,7 +28,7 @@ const HeaderDefault: React.FC<HeaderDefaultProps> = ({ variant = "white" }) => {
   return (
     <header
       className={`w-full h-[60px] md:h-[70px] flex items-center justify-center
-        ${isWhite ? "bg-white border-b-[1px] border-b-[#D9D9D9]" : "bg-black"} `}
+        ${isWhite ? "bg-white border-b-[1px] border-b-[var(--color-gray3)]" : "bg-black"} `}
     >
       <div className="w-full flex items-center justify-between px-[24px] md:px-[40px] lg:px-[70px]">
         <div className="flex items-center cursor-pointer">

src/components/gnb/MemberListMenu.tsx

@@ -22,7 +22,7 @@ const MemberListMenu: React.FC<MemberListMenuProps> = ({
     <div
       ref={ref}
       className={`absolute top-full right-0 w-full z-50
-        bg-white border border-[#D9D9D9] shadow
+        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"}`}
     >

src/components/gnb/UserMenu.tsx

@@ -32,7 +32,7 @@ const UserMenu: React.FC<UserMenuProps> = ({ isMenuOpen, setIsMenuOpen }) => {
     <div
       ref={ref}
       className={`absolute top-full right-0 w-full
-        bg-white border border-[#D9D9D9] shadow z-50
+        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"}`}
     >

src/pages/dashboard/[dashboardId]/edit.tsx

@@ -103,7 +103,7 @@ export default function EditDashboard() {
           <div className="flex mt-15 sm:mt-0 ml-8">
             <button
               onClick={handleDelete}
-              className="text-base sm:text-lg cursor-pointer w-[320px] h-[62px] text-[var(--color-black3)] rounded-[8px] border-[1px] border-[#D9D9D9] hover:scale-105 transition-transform duration-200"
+              className="text-base sm:text-lg cursor-pointer w-[320px] h-[62px] text-black3 rounded-[8px] border-[1px] border-[var(--color-gray3)] hover:scale-105 transition-transform duration-200"
             >
               대시보드 삭제하기
             </button>