대시보드 관리 페이지에 페이지네이션 적용

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>
 
       {/* 삭제 확인 모달 */}