Merge pull request #87 from part3-4team-Taskify/mypage02

[Feat] 나의 대쉬보드 페이지

Author: hhjin1

src/components/button/CardButton.tsx

@@ -2,37 +2,65 @@ import React from "react";
 import clsx from "clsx";
 import Image from "next/image";
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface CardButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   fullWidth?: boolean;
+  title?: string;
+  showCrown?: boolean;
+  color?: string;
 }
 
-const CardButton: React.FC<ButtonProps> = ({
+const CardButton: React.FC<CardButtonProps> = ({
   fullWidth,
   className,
-  children = "비브리지",
+  title = "비브리지",
+  showCrown = true,
+  color = "#7ac555", // 기본 색상
   ...props
 }) => {
   return (
     <button
       className={clsx(
-        "flex justify-center items-center gap-[10px] bg-white transition-all",
+        "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",
-        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]", // 여백
+        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",
         className
       )}
       {...props}
     >
-      <span className="font-semibold">{children}</span>
+      {/* 왼쪽: 색상 도트 + 제목 + 왕관 */}
+      <div className="flex items-center gap-[10px] overflow-hidden">
+        {/* 색상 원 */}
+        <svg width="8" height="8" viewBox="0 0 8 8" fill={color}>
+          <circle cx="4" cy="4" r="4" />
+        </svg>
+
+        {/* 제목 */}
+        <span className="font-semibold truncate">{title}</span>
+
+        {/* 왕관 */}
+        {showCrown && (
+          <Image
+            src="/svgs/icon-crown.svg"
+            alt="crown Icon"
+            width={20}
+            height={20}
+            className="w-[20px] h-[20px]"
+          />
+        )}
+      </div>
+
+      {/* 오른쪽: 화살표 아이콘 */}
       <Image
-        src="/svgs/icon-crown.svg"
-        alt="crown Icon"
-        width={32}
-        height={32}
-        className="w-[30px] h-[30px] p-1 rounded-md"
+        src="/svgs/arrow-forward-black.svg"
+        alt="arrow icon"
+        width={16}
+        height={16}
+        className="ml-2"
       />
     </button>
   );

src/components/sideMenu/SideMenu.tsx

@@ -2,8 +2,6 @@ import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { getDashboards } from "@/api/sidemenu";
 
 interface Dashboard {
   id: number;
@@ -17,21 +15,14 @@ interface Dashboard {
 
 interface SideMenuProps {
   teamId: string;
+  dashboardList: Dashboard[];
 }
 
-export default function SideMenu({ teamId }: SideMenuProps) {
+export default function SideMenu({ teamId, dashboardList }: SideMenuProps) {
   const router = useRouter();
   const { boardid } = router.query;
   const boardId = parseInt(boardid as string);
 
-  const [dashboardList, setDashboardList] = useState<Dashboard[]>([]);
-
-  useEffect(() => {
-    getDashboards({ teamId })
-      .then((res) => setDashboardList(res.dashboards))
-      .catch((err) => console.error("대시보드 로딩 실패:", err));
-  }, [teamId]);
-
   return (
     <aside className="h-screen overflow-y-auto border-r border-[var(--color-gray3)] px-3 py-5 lg:w-[300px] md:w-[160px] sm:w-[67px] transition-all duration-200 flex flex-col">
       {/* 로고 */}

src/pages/mydashboard.tsx

@@ -1,32 +1,61 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import SideMenu from "@/components/sideMenu/SideMenu";
 import HeaderDashboard from "@/components/gnb/HeaderDashboard";
 import InvitedDashBoard from "@/components/table/invited/InvitedDashBoard";
-import type { Dashboard } from "@/components/sideMenu/dashboard";
-import DashboardAddButton from "@/components/button/DashboardAddButton";
 import CardButton from "@/components/button/CardButton";
 import { PaginationBtn } from "@/components/button/PaginationBtn";
+import NewDashboard from "@/components/modal/NewDashboard";
+import DashboardAddButton from "@/components/button/DashboardAddButton";
+import { getDashboards } from "@/api/dashboard";
+import { useRouter } from "next/router";
+
+interface Dashboard {
+  id: number;
+  title: string;
+  color: string;
+  userId: number;
+  createdAt: string;
+  updatedAt: string;
+  createdByMe: boolean;
+}
 
 export default function MyDashboardPage() {
-  const teamId = "13";
-  const [dashCards, setDashCards] = useState<string[]>([]);
+  const teamId = "13-4";
+  const router = useRouter();
+  const [dashboardList, setDashboardList] = useState<Dashboard[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const itemsPerPage = 6;
 
-  const handleAddDashboard = () => {
-    const newTitle = `대시보드 ${dashCards.length}`;
-    setDashCards((prev) => [...prev, newTitle]);
-  };
-
-  const totalPages = Math.ceil((dashCards.length + 1) / itemsPerPage);
+  const totalPages = Math.ceil((dashboardList.length + 1) / itemsPerPage); // +1 for the add button
   const startIndex = (currentPage - 1) * itemsPerPage;
+
   const currentItems = [
-    <DashboardAddButton key="add" onClick={handleAddDashboard} />,
-    ...dashCards.map((title, index) => (
-      <CardButton key={index}>{title}</CardButton>
+    <DashboardAddButton key="add" onClick={() => setIsModalOpen(true)} />,
+    ...dashboardList.map((dashboard) => (
+      <CardButton
+        key={dashboard.id}
+        title={dashboard.title}
+        showCrown={dashboard.createdByMe}
+        color={dashboard.color}
+        onClick={() => router.push(`/dashboard/${dashboard.id}`)}
+      />
     )),
   ].slice(startIndex, startIndex + itemsPerPage);
 
+  const fetchDashboards = async () => {
+    try {
+      const res = await getDashboards({ teamId });
+      setDashboardList(res.dashboards);
+    } catch (error) {
+      console.error("대시보드 불러오기 실패:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchDashboards();
+  }, [teamId]);
+
   const handlePrevPage = () => {
     if (currentPage > 1) setCurrentPage((prev) => prev - 1);
   };
@@ -37,12 +66,12 @@ export default function MyDashboardPage() {
 
   return (
     <div className="flex h-screen overflow-hidden">
-      <SideMenu teamId="13-4" />
+      <SideMenu teamId={teamId} dashboardList={dashboardList} />
 
       <div className="flex flex-col flex-1 overflow-hidden">
         <HeaderDashboard />
 
-        <main className="flex-1 overflow-auto px-[80px] pt-[40px] pb-10 bg-[#f9f9f9] space-y-10">
+        <main className="flex-1 overflow-auto px-[25px] pt-[40px] pb-10 bg-[#f9f9f9] space-y-10">
           {/* 대시보드 카드 + 페이지네이션 */}
           <section className="flex flex-col items-start space-y-6">
             <div className="flex flex-wrap gap-x-[20px] gap-y-[16px] w-full max-w-[1100px]">
@@ -73,6 +102,16 @@ export default function MyDashboardPage() {
           </div>
         </main>
       </div>
+
+      {/* 새로운 대시보드 모달 */}
+      {isModalOpen && (
+        <NewDashboard
+          onClose={() => {
+            setIsModalOpen(false);
+            fetchDashboards(); // 생성 후 목록 새로고침
+          }}
+        />
+      )}
     </div>
   );
 }