459 lines
19 KiB
TypeScript
459 lines
19 KiB
TypeScript
"use client";
|
|
|
|
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 { Input } from "@/components/ui/input";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { Pagination, PaginationInfo } from "@/components/common/Pagination";
|
|
import { DeleteConfirmModal } from "@/components/common/DeleteConfirmModal";
|
|
import { Plus, Search, Edit, Trash2, Copy, MoreVertical, AlertCircle, RefreshCw } from "lucide-react";
|
|
|
|
/**
|
|
* 대시보드 관리 페이지
|
|
* - CSR 방식으로 초기 데이터 로드
|
|
* - 대시보드 목록 조회
|
|
* - 대시보드 생성/수정/삭제/복사
|
|
*/
|
|
export default function DashboardListPage() {
|
|
const router = useRouter();
|
|
const { toast } = useToast();
|
|
|
|
// 상태 관리
|
|
const [dashboards, setDashboards] = useState<Dashboard[]>([]);
|
|
const [loading, setLoading] = useState(true); // CSR이므로 초기 로딩 true
|
|
const [error, setError] = useState<string | null>(null);
|
|
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);
|
|
|
|
// 대시보드 목록 로드
|
|
const loadDashboards = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
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(
|
|
err instanceof Error
|
|
? err.message
|
|
: "대시보드 목록을 불러오는데 실패했습니다. 네트워크 연결을 확인하거나 잠시 후 다시 시도해주세요.",
|
|
);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 검색어/페이지 변경 시 fetch (초기 로딩 포함)
|
|
useEffect(() => {
|
|
loadDashboards();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [searchTerm, currentPage, pageSize]);
|
|
|
|
// 페이지네이션 정보 계산
|
|
const paginationInfo: PaginationInfo = {
|
|
currentPage,
|
|
totalPages: Math.ceil(totalCount / pageSize) || 1,
|
|
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) => {
|
|
setDeleteTarget({ id, title });
|
|
setDeleteDialogOpen(true);
|
|
};
|
|
|
|
// 대시보드 삭제 실행
|
|
const handleDeleteConfirm = async () => {
|
|
if (!deleteTarget) return;
|
|
|
|
try {
|
|
await dashboardApi.deleteDashboard(deleteTarget.id);
|
|
setDeleteDialogOpen(false);
|
|
setDeleteTarget(null);
|
|
toast({
|
|
title: "성공",
|
|
description: "대시보드가 삭제되었습니다.",
|
|
});
|
|
loadDashboards();
|
|
} catch (err) {
|
|
console.error("Failed to delete dashboard:", err);
|
|
setDeleteDialogOpen(false);
|
|
toast({
|
|
title: "오류",
|
|
description: "대시보드 삭제에 실패했습니다.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
// 대시보드 복사
|
|
const handleCopy = async (dashboard: Dashboard) => {
|
|
try {
|
|
const fullDashboard = await dashboardApi.getDashboard(dashboard.id);
|
|
|
|
await dashboardApi.createDashboard({
|
|
title: `${fullDashboard.title} (복사본)`,
|
|
description: fullDashboard.description,
|
|
elements: fullDashboard.elements || [],
|
|
isPublic: false,
|
|
tags: fullDashboard.tags,
|
|
category: fullDashboard.category,
|
|
settings: fullDashboard.settings as { resolution?: string; backgroundColor?: string },
|
|
});
|
|
toast({
|
|
title: "성공",
|
|
description: "대시보드가 복사되었습니다.",
|
|
});
|
|
loadDashboards();
|
|
} catch (err) {
|
|
console.error("Failed to copy dashboard:", err);
|
|
toast({
|
|
title: "오류",
|
|
description: "대시보드 복사에 실패했습니다.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
// 포맷팅 헬퍼
|
|
const formatDate = (dateString: string) => {
|
|
return new Date(dateString).toLocaleDateString("ko-KR", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<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-muted-foreground text-sm">대시보드를 생성하고 관리할 수 있습니다</p>
|
|
</div>
|
|
|
|
{/* 검색 및 액션 */}
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative w-full sm:w-[300px]">
|
|
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
|
<Input
|
|
placeholder="대시보드 검색..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="h-10 pl-10 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="text-muted-foreground text-sm">
|
|
총 <span className="text-foreground font-semibold">{totalCount.toLocaleString()}</span> 건
|
|
</div>
|
|
</div>
|
|
<Button onClick={() => router.push("/admin/screenMng/dashboardList/new")} className="h-10 gap-2 text-sm font-medium">
|
|
<Plus className="h-4 w-4" />
|
|
새 대시보드 생성
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 대시보드 목록 */}
|
|
{loading ? (
|
|
<>
|
|
{/* 데스크톱 테이블 스켈레톤 */}
|
|
<div className="bg-card hidden shadow-sm lg:block">
|
|
<Table>
|
|
<TableHeader>
|
|
<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>
|
|
<TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
|
|
<TableHead className="h-12 text-sm font-semibold">수정일</TableHead>
|
|
<TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{Array.from({ length: 10 }).map((_, index) => (
|
|
<TableRow key={index} className="border-b">
|
|
<TableCell className="h-16">
|
|
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
|
</TableCell>
|
|
<TableCell className="h-16">
|
|
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
|
</TableCell>
|
|
<TableCell className="h-16">
|
|
<div className="bg-muted h-4 w-20 animate-pulse rounded"></div>
|
|
</TableCell>
|
|
<TableCell className="h-16">
|
|
<div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
|
|
</TableCell>
|
|
<TableCell className="h-16">
|
|
<div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
|
|
</TableCell>
|
|
<TableCell className="h-16 text-right">
|
|
<div className="bg-muted ml-auto h-8 w-8 animate-pulse rounded"></div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{/* 모바일/태블릿 카드 스켈레톤 */}
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
|
|
<div className="mb-4 flex items-start justify-between">
|
|
<div className="flex-1 space-y-2">
|
|
<div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
|
|
<div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2 border-t pt-4">
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<div key={i} className="flex justify-between">
|
|
<div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
|
|
<div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
) : error ? (
|
|
<div className="border-destructive/50 bg-destructive/10 flex flex-col items-center justify-center rounded-lg border p-12">
|
|
<div className="flex flex-col items-center gap-4 text-center">
|
|
<div className="bg-destructive/20 flex h-16 w-16 items-center justify-center rounded-full">
|
|
<AlertCircle className="text-destructive h-8 w-8" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-destructive mb-2 text-lg font-semibold">데이터를 불러올 수 없습니다</h3>
|
|
<p className="text-destructive/80 max-w-md text-sm">{error}</p>
|
|
</div>
|
|
<Button onClick={loadDashboards} variant="outline" className="mt-2 gap-2">
|
|
<RefreshCw className="h-4 w-4" />
|
|
다시 시도
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : dashboards.length === 0 ? (
|
|
<div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
|
|
<div className="flex flex-col items-center gap-2 text-center">
|
|
<p className="text-muted-foreground text-sm">대시보드가 없습니다</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* 데스크톱 테이블 뷰 (lg 이상) */}
|
|
<div className="bg-card hidden shadow-sm lg:block">
|
|
<Table>
|
|
<TableHeader>
|
|
<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>
|
|
<TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
|
|
<TableHead className="h-12 text-sm font-semibold">수정일</TableHead>
|
|
<TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{dashboards.map((dashboard) => (
|
|
<TableRow key={dashboard.id} className="hover:bg-muted/50 border-b transition-colors">
|
|
<TableCell className="h-16 text-sm font-medium">
|
|
<button
|
|
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
|
|
className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
|
|
>
|
|
{dashboard.title}
|
|
</button>
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground h-16 max-w-md truncate text-sm">
|
|
{dashboard.description || "-"}
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground h-16 text-sm">
|
|
{dashboard.createdByName || dashboard.createdBy || "-"}
|
|
</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>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
<MoreVertical className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
|
|
className="gap-2 text-sm"
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
편집
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => handleCopy(dashboard)} className="gap-2 text-sm">
|
|
<Copy className="h-4 w-4" />
|
|
복사
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
|
|
className="text-destructive focus:text-destructive gap-2 text-sm"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
삭제
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{/* 모바일/태블릿 카드 뷰 (lg 미만) */}
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
|
{dashboards.map((dashboard) => (
|
|
<div
|
|
key={dashboard.id}
|
|
className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
|
|
>
|
|
{/* 헤더 */}
|
|
<div className="mb-4 flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<button
|
|
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
|
|
className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
|
|
>
|
|
<h3 className="text-base font-semibold">{dashboard.title}</h3>
|
|
</button>
|
|
<p className="text-muted-foreground mt-1 text-sm">{dashboard.id}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 정보 */}
|
|
<div className="space-y-2 border-t pt-4">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">설명</span>
|
|
<span className="max-w-[200px] truncate font-medium">{dashboard.description || "-"}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">생성자</span>
|
|
<span className="font-medium">{dashboard.createdByName || dashboard.createdBy || "-"}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">생성일</span>
|
|
<span className="font-medium">{formatDate(dashboard.createdAt)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">수정일</span>
|
|
<span className="font-medium">{formatDate(dashboard.updatedAt)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 액션 */}
|
|
<div className="mt-4 flex gap-2 border-t pt-4">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-9 flex-1 gap-2 text-sm"
|
|
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
편집
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-9 flex-1 gap-2 text-sm"
|
|
onClick={() => handleCopy(dashboard)}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
복사
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 gap-2 text-sm"
|
|
onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* 페이지네이션 */}
|
|
{!loading && dashboards.length > 0 && (
|
|
<Pagination
|
|
paginationInfo={paginationInfo}
|
|
onPageChange={handlePageChange}
|
|
onPageSizeChange={handlePageSizeChange}
|
|
showPageSizeSelector={true}
|
|
pageSizeOptions={[10, 20, 50, 100]}
|
|
/>
|
|
)}
|
|
|
|
{/* 삭제 확인 모달 */}
|
|
<DeleteConfirmModal
|
|
open={deleteDialogOpen}
|
|
onOpenChange={setDeleteDialogOpen}
|
|
title="대시보드 삭제"
|
|
description={
|
|
<>
|
|
"{deleteTarget?.title}" 대시보드를 삭제하시겠습니까?
|
|
<br />이 작업은 되돌릴 수 없습니다.
|
|
</>
|
|
}
|
|
onConfirm={handleDeleteConfirm}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|