Merge pull request #118 from hyeonjiroh/feat/#112/mydashboard-page

feat: #112/나의 대시보드 페이지 내 대시보드 목록

Author: codeit-kkm

src/app/(after-login)/mydashboard/_components/AddDashboardButton.tsx

@@ -0,0 +1,25 @@
+import { useModalStore } from "@/lib/store/useModalStore";
+import Button from "@/components/common/button/Button";
+import Image from "next/image";
+import AddIcon from "../../../../../public/icon/add_icon.svg";
+
+export default function AddDashboardButton() {
+  const { openModal } = useModalStore();
+
+  return (
+    <Button
+      variant="whiteGray"
+      onClick={() => openModal("createDashboard")}
+      className="flex gap-3 w-full min-h-[58px] rounded-lg tablet:h-[68px] pc:h-[70px]"
+    >
+      <div className="font-semibold text-md text-gray-800 tablet:text-lg">
+        새로운 대시보드
+      </div>
+      <Image
+        src={AddIcon}
+        className="w-[20px] h-[20px] tablet:w-[22px] tablet:h-[22px]"
+        alt=""
+      />
+    </Button>
+  );
+}

src/app/(after-login)/mydashboard/_components/DashboardCard.tsx

@@ -0,0 +1,51 @@
+import { useRouter } from "next/navigation";
+import Button from "@/components/common/button/Button";
+import Image from "next/image";
+import CrownIcon from "../../../../../public/icon/crown_icon.svg";
+import ArrowIcon from "../../../../../public/icon/arrow_right_icon.svg";
+
+export default function DashboardCard({
+  id,
+  title,
+  color,
+  createdByMe,
+}: {
+  id: number;
+  title: string;
+  color: string;
+  createdByMe: boolean;
+}) {
+  const router = useRouter();
+
+  return (
+    <Button
+      variant="whiteGray"
+      onClick={() => {
+        router.push(`/dashboard/${id}`);
+      }}
+      className="flex justify-between items-center gap-3 w-full min-h-[58px] px-5 rounded-lg tablet:h-[68px] pc:h-[70px]"
+    >
+      <div className="flex gap-3 pc:gap-4">
+        <div className="flex items-center">
+          <div
+            style={{ background: color }}
+            className="w-2 h-2 rounded-full"
+          ></div>
+        </div>
+        <div className="flex items-center gap-1 overflow-hidden tablet:gap-[6px] pc:gap-2">
+          <div className="font-semibold text-md text-gray-800 truncate tablet:text-lg">
+            {title}
+          </div>
+          {createdByMe && (
+            <Image
+              src={CrownIcon}
+              className="w-[15px] h-3 tablet:w-[18px] tablet:h-[14px] pc:w-5 pc:h-4"
+              alt=""
+            />
+          )}
+        </div>
+      </div>
+      <Image src={ArrowIcon} width={18} height={18} alt="" />
+    </Button>
+  );
+}

src/app/(after-login)/mydashboard/_components/DashboardListSection.tsx

@@ -4,13 +4,15 @@ import { useEffect, useState } from "react";
 import { fetchDashboardList } from "@/lib/apis/dashboardsApi";
 import { DashboardList } from "@/lib/types";
 import Pagination from "@/components/common/pagination-button/PaginationButton";
+import AddDashboardButton from "./AddDashboardButton";
+import DashboardCard from "./DashboardCard";
 
-const PAGE_SIZE = 6;
+const PAGE_SIZE = 5;
 
 export default function DashboardListSection({ token }: { token: string }) {
   const [myDashboards, setMyDashboards] = useState<DashboardList[]>([]);
   const [page, setPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -19,16 +21,16 @@ export default function DashboardListSection({ token }: { token: string }) {
       try {
         const {
           dashboards,
-          total,
-        }: { dashboards: DashboardList[]; total: number } =
+          totalCount,
+        }: { dashboards: DashboardList[]; totalCount: number } =
           await fetchDashboardList({
             token,
             page,
             size: PAGE_SIZE,
           });
 
         setMyDashboards(dashboards.filter((d) => d.createdByMe));
-        setTotalPages(Math.ceil(total / PAGE_SIZE));
+        setTotalPages(Math.floor(totalCount / 6));
       } catch (error) {
         console.error("대시보드를 불러오는 중 오류 발생:", error);
       } finally {
@@ -39,36 +41,30 @@ export default function DashboardListSection({ token }: { token: string }) {
   }, [page, token]);
 
   return (
-    <div className="max-w-[1022px]">
-      <button className="px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center">
-        새로운 대시보드 +
-      </button>
-
-      <div>
-        <h2 className="text-lg font-semibold">내 대시보드</h2>
-        {myDashboards.length > 0 ? (
-          <ul className="mt-4 space-y-2">
-            {myDashboards.map((dashboard) => (
-              <li key={dashboard.id} className="p-4 bg-white shadow rounded-lg">
-                {dashboard.title}
-              </li>
-            ))}
-          </ul>
-        ) : (
-          !loading && (
-            <div className="p-6 bg-gray-100 text-center rounded-lg">
-              <p className="text-gray-500">아직 생성한 대시보드가 없어요.</p>
-            </div>
-          )
-        )}
+    <div className="flex flex-col max-w-[1022px] gap-4 pc:gap-3">
+      <div className="grid grid-cols-1 gap-2 items-stretch tablet:grid-cols-2 tablet:gap-[10px] pc:grid-cols-3 pc:gap-3">
+        <AddDashboardButton />
+        {myDashboards.map((dashboard) => (
+          <DashboardCard
+            key={dashboard.id}
+            id={dashboard.id}
+            title={dashboard.title}
+            color={dashboard.color}
+            createdByMe={dashboard.createdByMe}
+          />
+        ))}
 
         {loading && (
           <div className="flex justify-center mt-4">
-            <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+            <div className="w-6 h-6 border-4 border-gray-500 border-t-transparent rounded-full animate-spin"></div>
           </div>
         )}
-
-        <div className="flex justify-center mt-4">
+      </div>
+      <div className="flex justify-end">
+        <div className="flex items-center gap-3 tablet:gap-4">
+          <p className="font-normal text-xs text-gray-800 tablet:text-md">
+            {totalPages} 페이지 중 {page}
+          </p>
           <Pagination
             currentPage={page}
             totalPages={totalPages}

src/components/common/pagination-button/PaginationButton.tsx

@@ -41,6 +41,7 @@ const PaginationButton = ({
         "w-10 h-10 flex items-center justify-center",
         "border border-[#d9d9d9]",
         "rounded-[4px]",
+        "bg-white",
         !props.disabled && [
           "transition-colors",
           "hover:bg-gray-50 hover:border-gray-400",