From ec853fb45d5239c5c7352d014d3046c3b08283d0 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Tue, 21 Oct 2025 16:33:34 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/app/(main)/admin/dashboard/page.tsx | 47 +++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/frontend/app/(main)/admin/dashboard/page.tsx b/frontend/app/(main)/admin/dashboard/page.tsx
index a20c58f9..94892c0d 100644
--- a/frontend/app/(main)/admin/dashboard/page.tsx
+++ b/frontend/app/(main)/admin/dashboard/page.tsx
@@ -20,6 +20,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { useToast } from "@/hooks/use-toast";
+import { Pagination, PaginationInfo } from "@/components/common/Pagination";
 import { Plus, Search, Edit, Trash2, Copy, LayoutDashboard, MoreHorizontal } from "lucide-react";
 
 /**
@@ -34,6 +35,11 @@ export default function DashboardListPage() {
   const [loading, setLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState("");
 
+  // 페이지네이션 상태
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [totalCount, setTotalCount] = useState(0);
+
   // 모달 상태
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<{ id: string; title: string } | null>(null);
@@ -42,8 +48,13 @@ export default function DashboardListPage() {
   const loadDashboards = async () => {
     try {
       setLoading(true);
-      const result = await dashboardApi.getMyDashboards({ search: searchTerm });
+      const result = await dashboardApi.getMyDashboards({
+        search: searchTerm,
+        page: currentPage,
+        limit: pageSize,
+      });
       setDashboards(result.dashboards);
+      setTotalCount(result.pagination.total);
     } catch (err) {
       console.error("Failed to load dashboards:", err);
       toast({
@@ -59,7 +70,28 @@ export default function DashboardListPage() {
   useEffect(() => {
     loadDashboards();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchTerm]);
+  }, [searchTerm, currentPage, pageSize]);
+
+  // 페이지네이션 정보 계산
+  const paginationInfo: PaginationInfo = {
+    currentPage,
+    totalPages: Math.ceil(totalCount / pageSize),
+    totalItems: totalCount,
+    itemsPerPage: pageSize,
+    startItem: totalCount === 0 ? 0 : (currentPage - 1) * pageSize + 1,
+    endItem: Math.min(currentPage * pageSize, totalCount),
+  };
+
+  // 페이지 변경 핸들러
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  // 페이지 크기 변경 핸들러
+  const handlePageSizeChange = (size: number) => {
+    setPageSize(size);
+    setCurrentPage(1); // 페이지 크기 변경 시 첫 페이지로
+  };
 
   // 대시보드 삭제 확인 모달 열기
   const handleDeleteClick = (id: string, title: string) => {
@@ -247,6 +279,17 @@ export default function DashboardListPage() {
             </CardContent>
           </Card>
         )}
+
+        {/* 페이지네이션 */}
+        {!loading && dashboards.length > 0 && (
+          <Pagination
+            paginationInfo={paginationInfo}
+            onPageChange={handlePageChange}
+            onPageSizeChange={handlePageSizeChange}
+            showPageSizeSelector={true}
+            pageSizeOptions={[10, 20, 50, 100]}
+          />
+        )}
       </div>
 
       {/* 삭제 확인 모달 */}