Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/screen-management

frontend/app/(main)/admin/dashboard/page.tsx

@@ -1,20 +1,14 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { dashboardApi } from "@/lib/api/dashboard";
 import { Dashboard } from "@/lib/api/dashboard";
 import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -25,8 +19,9 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Plus, Search, MoreVertical, Edit, Trash2, Copy, CheckCircle2 } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { Pagination, PaginationInfo } from "@/components/common/Pagination";
+import { Plus, Search, Edit, Trash2, Copy, LayoutDashboard, MoreHorizontal } from "lucide-react";
 
 /**
  * 대시보드 관리 페이지
@@ -35,27 +30,38 @@ import { Plus, Search, MoreVertical, Edit, Trash2, Copy, CheckCircle2 } from "lu
  */
 export default function DashboardListPage() {
   const router = useRouter();
+  const { toast } = useToast();
   const [dashboards, setDashboards] = useState<Dashboard[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState("");
-  const [error, setError] = useState<string | null>(null);
+
+  // 페이지네이션 상태
+  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);
-  const [successDialogOpen, setSuccessDialogOpen] = useState(false);
-  const [successMessage, setSuccessMessage] = useState("");
 
   // 대시보드 목록 로드
   const loadDashboards = async () => {
     try {
       setLoading(true);
-      setError(null);
-      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);
-      setError("대시보드 목록을 불러오는데 실패했습니다.");
+      toast({
+        title: "오류",
+        description: "대시보드 목록을 불러오는데 실패했습니다.",
+        variant: "destructive",
+      });
     } finally {
       setLoading(false);
     }
@@ -63,7 +69,29 @@ export default function DashboardListPage() {
 
   useEffect(() => {
     loadDashboards();
-  }, [searchTerm]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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) => {
@@ -79,37 +107,48 @@ export default function DashboardListPage() {
       await dashboardApi.deleteDashboard(deleteTarget.id);
       setDeleteDialogOpen(false);
       setDeleteTarget(null);
-      setSuccessMessage("대시보드가 삭제되었습니다.");
-      setSuccessDialogOpen(true);
+      toast({
+        title: "성공",
+        description: "대시보드가 삭제되었습니다.",
+      });
       loadDashboards();
     } catch (err) {
       console.error("Failed to delete dashboard:", err);
       setDeleteDialogOpen(false);
-      setError("대시보드 삭제에 실패했습니다.");
+      toast({
+        title: "오류",
+        description: "대시보드 삭제에 실패했습니다.",
+        variant: "destructive",
+      });
     }
   };
 
   // 대시보드 복사
   const handleCopy = async (dashboard: Dashboard) => {
     try {
-      // 전체 대시보드 정보(요소 포함)를 가져오기
       const fullDashboard = await dashboardApi.getDashboard(dashboard.id);
 
-      const newDashboard = await dashboardApi.createDashboard({
+      await dashboardApi.createDashboard({
         title: `${fullDashboard.title} (복사본)`,
         description: fullDashboard.description,
         elements: fullDashboard.elements || [],
         isPublic: false,
         tags: fullDashboard.tags,
         category: fullDashboard.category,
-        settings: (fullDashboard as any).settings, // 해상도와 배경색 설정도 복사
+        settings: fullDashboard.settings as { resolution?: string; backgroundColor?: string },
+      });
+      toast({
+        title: "성공",
+        description: "대시보드가 복사되었습니다.",
       });
-      setSuccessMessage("대시보드가 복사되었습니다.");
-      setSuccessDialogOpen(true);
       loadDashboards();
     } catch (err) {
       console.error("Failed to copy dashboard:", err);
-      setError("대시보드 복사에 실패했습니다.");
+      toast({
+        title: "오류",
+        description: "대시보드 복사에 실패했습니다.",
+        variant: "destructive",
+      });
     }
   };
 
@@ -119,35 +158,33 @@ export default function DashboardListPage() {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
     });
   };
 
   if (loading) {
     return (
-      <div className="flex h-full items-center justify-center rounded-lg border bg-card shadow-sm">
+      <div className="bg-card flex h-full items-center justify-center rounded-lg border shadow-sm">
         <div className="text-center">
           <div className="text-sm font-medium">로딩 중...</div>
-          <div className="mt-2 text-xs text-muted-foreground">대시보드 목록을 불러오고 있습니다</div>
+          <div className="text-muted-foreground mt-2 text-xs">대시보드 목록을 불러오고 있습니다</div>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="bg-background flex min-h-screen flex-col">
       <div className="space-y-6 p-6">
         {/* 페이지 헤더 */}
         <div className="space-y-2 border-b pb-4">
           <h1 className="text-3xl font-bold tracking-tight">대시보드 관리</h1>
-          <p className="text-sm text-muted-foreground">대시보드를 생성하고 관리할 수 있습니다</p>
+          <p className="text-muted-foreground text-sm">대시보드를 생성하고 관리할 수 있습니다</p>
         </div>
 
         {/* 검색 및 액션 */}
         <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
           <div className="relative w-full sm:w-[300px]">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
             <Input
               placeholder="대시보드 검색..."
               value={searchTerm}
@@ -156,40 +193,39 @@ export default function DashboardListPage() {
             />
           </div>
           <Button onClick={() => router.push("/admin/dashboard/new")} className="h-10 gap-2 text-sm font-medium">
-            <Plus className="h-4 w-4" />
-            새 대시보드 생성
+            <Plus className="h-4 w-4" />새 대시보드 생성
           </Button>
         </div>
 
         {/* 에러 메시지 */}
         {error && (
-          <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
+          <div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
             <div className="flex items-center justify-between">
-              <p className="text-sm font-semibold text-destructive">오류가 발생했습니다</p>
+              <p className="text-destructive text-sm font-semibold">오류가 발생했습니다</p>
               <button
                 onClick={() => setError(null)}
-                className="text-destructive transition-colors hover:text-destructive/80"
+                className="text-destructive hover:text-destructive/80 transition-colors"
                 aria-label="에러 메시지 닫기"
               >
                 ✕
               </button>
             </div>
-            <p className="mt-1.5 text-sm text-destructive/80">{error}</p>
+            <p className="text-destructive/80 mt-1.5 text-sm">{error}</p>
           </div>
         )}
 
         {/* 대시보드 목록 */}
         {dashboards.length === 0 ? (
-          <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
+          <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
             <div className="flex flex-col items-center gap-2 text-center">
-              <p className="text-sm text-muted-foreground">대시보드가 없습니다</p>
+              <p className="text-muted-foreground text-sm">대시보드가 없습니다</p>
             </div>
           </div>
         ) : (
-          <div className="rounded-lg border bg-card shadow-sm">
+          <div className="bg-card rounded-lg border shadow-sm">
             <Table>
               <TableHeader>
-                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                <TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
                   <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
                   <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
                   <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
@@ -199,13 +235,17 @@ export default function DashboardListPage() {
               </TableHeader>
               <TableBody>
                 {dashboards.map((dashboard) => (
-                  <TableRow key={dashboard.id} className="border-b transition-colors hover:bg-muted/50">
+                  <TableRow key={dashboard.id} className="hover:bg-muted/50 border-b transition-colors">
                     <TableCell className="h-16 text-sm font-medium">{dashboard.title}</TableCell>
-                    <TableCell className="h-16 max-w-md truncate text-sm text-muted-foreground">
+                    <TableCell className="text-muted-foreground h-16 max-w-md truncate text-sm">
                       {dashboard.description || "-"}
                     </TableCell>
-                    <TableCell className="h-16 text-sm text-muted-foreground">{formatDate(dashboard.createdAt)}</TableCell>
-                    <TableCell className="h-16 text-sm text-muted-foreground">{formatDate(dashboard.updatedAt)}</TableCell>
+                    <TableCell className="text-muted-foreground h-16 text-sm">
+                      {formatDate(dashboard.createdAt)}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground h-16 text-sm">
+                      {formatDate(dashboard.updatedAt)}
+                    </TableCell>
                     <TableCell className="h-16 text-right">
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
@@ -227,7 +267,7 @@ export default function DashboardListPage() {
                           </DropdownMenuItem>
                           <DropdownMenuItem
                             onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
-                            className="gap-2 text-sm text-destructive focus:text-destructive"
+                            className="text-destructive focus:text-destructive gap-2 text-sm"
                           >
                             <Trash2 className="h-4 w-4" />
                             삭제
@@ -241,6 +281,17 @@ export default function DashboardListPage() {
             </Table>
           </div>
         )}
+
+        {/* 페이지네이션 */}
+        {!loading && dashboards.length > 0 && (
+          <Pagination
+            paginationInfo={paginationInfo}
+            onPageChange={handlePageChange}
+            onPageSizeChange={handlePageSizeChange}
+            showPageSizeSelector={true}
+            pageSizeOptions={[10, 20, 50, 100]}
+          />
+        )}
       </div>
 
       {/* 삭제 확인 모달 */}
@@ -250,15 +301,14 @@ export default function DashboardListPage() {
             <AlertDialogTitle className="text-base sm:text-lg">대시보드 삭제</AlertDialogTitle>
             <AlertDialogDescription className="text-xs sm:text-sm">
               &quot;{deleteTarget?.title}&quot; 대시보드를 삭제하시겠습니까?
-              <br />
-              이 작업은 되돌릴 수 없습니다.
+              <br />이 작업은 되돌릴 수 없습니다.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter className="gap-2 sm:gap-0">
             <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</AlertDialogCancel>
             <AlertDialogAction
               onClick={handleDeleteConfirm}
-              className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
+              className="bg-destructive hover:bg-destructive/90 h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
             >
               삭제
             </AlertDialogAction>
@@ -270,8 +320,8 @@ export default function DashboardListPage() {
       <Dialog open={successDialogOpen} onOpenChange={setSuccessDialogOpen}>
         <DialogContent className="max-w-[95vw] sm:max-w-md">
           <DialogHeader>
-            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-              <CheckCircle2 className="h-6 w-6 text-primary" />
+            <div className="bg-primary/10 mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+              <CheckCircle2 className="text-primary h-6 w-6" />
             </div>
             <DialogTitle className="text-center text-base sm:text-lg">완료</DialogTitle>
             <DialogDescription className="text-center text-xs sm:text-sm">{successMessage}</DialogDescription>