[agent-pipeline] pipe-20260309122600-xzeg round-1
This commit is contained in:
DDD1542
parent
159e7768bb
commit
c120492378
|
|
@ -6,14 +6,6 @@ import { Input } from "@/components/ui/input";
|
|||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
|
|
@ -62,6 +54,7 @@ import {
|
|||
deleteApprovalTemplate,
|
||||
} from "@/lib/api/approval";
|
||||
import { getUserList } from "@/lib/api/user";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
// ============================================================
|
||||
// 타입 정의
|
||||
|
|
@ -295,7 +288,6 @@ function StepEditor({
|
|||
|
||||
return (
|
||||
<div className="rounded-md border bg-muted/30 p-3 space-y-2">
|
||||
{/* 단계 헤더 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
||||
|
|
@ -314,7 +306,6 @@ function StepEditor({
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
{/* step_type 선택 */}
|
||||
<div>
|
||||
<Label className="text-[10px]">결재 유형</Label>
|
||||
<Select value={step.step_type} onValueChange={(v) => updateStepType(v as StepType)}>
|
||||
|
|
@ -331,14 +322,12 @@ function StepEditor({
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 통보 타입 안내 */}
|
||||
{step.step_type === "notification" && (
|
||||
<p className="text-[10px] text-muted-foreground italic">
|
||||
(자동 처리됩니다 - 통보 대상자에게 알림만 발송)
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 결재자 목록 */}
|
||||
<div className="space-y-2">
|
||||
{step.approvers.map((approver, aIdx) => (
|
||||
<div key={aIdx} className="rounded border bg-background p-2 space-y-1.5">
|
||||
|
|
@ -433,7 +422,6 @@ function StepEditor({
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* 합의 타입일 때만 결재자 추가 버튼 */}
|
||||
{step.step_type === "consensus" && (
|
||||
<Button
|
||||
variant="outline"
|
||||
|
|
@ -466,7 +454,6 @@ export default function ApprovalTemplatePage() {
|
|||
|
||||
const [deleteTarget, setDeleteTarget] = useState<ApprovalLineTemplate | null>(null);
|
||||
|
||||
// ---- 데이터 로딩 ----
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
const [tplRes, defRes] = await Promise.all([
|
||||
|
|
@ -482,7 +469,6 @@ export default function ApprovalTemplatePage() {
|
|||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ---- 템플릿 등록/수정에서 steps를 StepFormData로 변환 ----
|
||||
const stepsToFormData = (steps: ApprovalLineTemplateStep[]): StepFormData[] => {
|
||||
const stepMap = new Map<number, StepFormData>();
|
||||
|
||||
|
|
@ -512,7 +498,6 @@ export default function ApprovalTemplatePage() {
|
|||
return Array.from(stepMap.values()).sort((a, b) => a.step_order - b.step_order);
|
||||
};
|
||||
|
||||
// ---- StepFormData를 API payload로 변환 ----
|
||||
const formDataToSteps = (
|
||||
steps: StepFormData[],
|
||||
): Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[] => {
|
||||
|
|
@ -533,7 +518,6 @@ export default function ApprovalTemplatePage() {
|
|||
return result;
|
||||
};
|
||||
|
||||
// ---- 모달 열기 ----
|
||||
const openCreate = () => {
|
||||
setEditingTpl(null);
|
||||
setFormData({
|
||||
|
|
@ -577,7 +561,6 @@ export default function ApprovalTemplatePage() {
|
|||
setEditOpen(true);
|
||||
};
|
||||
|
||||
// ---- 단계 관리 ----
|
||||
const addStep = () => {
|
||||
setFormData((p) => ({
|
||||
...p,
|
||||
|
|
@ -614,7 +597,6 @@ export default function ApprovalTemplatePage() {
|
|||
}));
|
||||
};
|
||||
|
||||
// ---- 저장 ----
|
||||
const handleSave = async () => {
|
||||
if (!formData.template_name.trim()) {
|
||||
toast.warning("템플릿명을 입력해주세요.");
|
||||
|
|
@ -664,7 +646,6 @@ export default function ApprovalTemplatePage() {
|
|||
}
|
||||
};
|
||||
|
||||
// ---- 삭제 ----
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
const res = await deleteApprovalTemplate(deleteTarget.template_id);
|
||||
|
|
@ -677,14 +658,12 @@ export default function ApprovalTemplatePage() {
|
|||
}
|
||||
};
|
||||
|
||||
// ---- 필터 ----
|
||||
const filtered = templates.filter(
|
||||
(t) =>
|
||||
t.template_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(t.description || "").toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
|
||||
// ---- 단계 요약 뱃지 생성 ----
|
||||
const renderStepSummary = (tpl: ApprovalLineTemplate) => {
|
||||
if (!tpl.steps || tpl.steps.length === 0) return <span className="text-muted-foreground">-</span>;
|
||||
|
||||
|
|
@ -715,13 +694,65 @@ export default function ApprovalTemplatePage() {
|
|||
);
|
||||
};
|
||||
|
||||
// ---- 날짜 포맷 ----
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return "-";
|
||||
const d = new Date(dateStr);
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
const columns: RDVColumn<ApprovalLineTemplate>[] = [
|
||||
{
|
||||
key: "template_name",
|
||||
label: "템플릿명",
|
||||
render: (_val, tpl) => (
|
||||
<span className="font-medium">{tpl.template_name}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "설명",
|
||||
hideOnMobile: true,
|
||||
render: (_val, tpl) => (
|
||||
<span className="text-muted-foreground">{tpl.description || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "steps",
|
||||
label: "단계 구성",
|
||||
render: (_val, tpl) => renderStepSummary(tpl),
|
||||
},
|
||||
{
|
||||
key: "definition_name",
|
||||
label: "연결된 유형",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (_val, tpl) => (
|
||||
<span>{tpl.definition_name || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "created_at",
|
||||
label: "생성일",
|
||||
width: "100px",
|
||||
hideOnMobile: true,
|
||||
className: "text-center",
|
||||
render: (_val, tpl) => (
|
||||
<span className="text-center">{formatDate(tpl.created_at)}</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const cardFields: RDVCardField<ApprovalLineTemplate>[] = [
|
||||
{
|
||||
label: "단계 구성",
|
||||
render: (tpl) => renderStepSummary(tpl),
|
||||
},
|
||||
{
|
||||
label: "생성일",
|
||||
render: (tpl) => formatDate(tpl.created_at),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-background flex min-h-screen flex-col">
|
||||
<div className="space-y-6 p-6">
|
||||
|
|
@ -755,150 +786,44 @@ export default function ApprovalTemplatePage() {
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 템플릿 목록 */}
|
||||
{loading ? (
|
||||
<>
|
||||
{/* 데스크톱 스켈레톤 */}
|
||||
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
|
||||
<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 w-[120px] text-sm font-semibold">연결된 유형</TableHead>
|
||||
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">생성일</TableHead>
|
||||
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">관리</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<TableRow key={i} className="border-b">
|
||||
<TableCell className="h-14"><div className="h-4 w-32 animate-pulse rounded bg-muted" /></TableCell>
|
||||
<TableCell className="h-14"><div className="h-4 animate-pulse rounded bg-muted" /></TableCell>
|
||||
<TableCell className="h-14"><div className="h-4 w-40 animate-pulse rounded bg-muted" /></TableCell>
|
||||
<TableCell className="h-14"><div className="h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
|
||||
<TableCell className="h-14"><div className="mx-auto h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
|
||||
<TableCell className="h-14"><div className="mx-auto h-8 w-16 animate-pulse rounded bg-muted" /></TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{/* 모바일 스켈레톤 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
|
||||
<div className="mb-3 flex items-start justify-between">
|
||||
<div className="h-5 w-36 animate-pulse rounded bg-muted" />
|
||||
<div className="h-5 w-14 animate-pulse rounded-full bg-muted" />
|
||||
</div>
|
||||
<div className="space-y-2 border-t pt-3">
|
||||
{Array.from({ length: 3 }).map((_, j) => (
|
||||
<div key={j} className="flex justify-between">
|
||||
<div className="h-4 w-16 animate-pulse rounded bg-muted" />
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
|
||||
<p className="text-muted-foreground text-sm">등록된 결재 템플릿이 없습니다.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 데스크톱 테이블 */}
|
||||
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
|
||||
<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 w-[120px] text-sm font-semibold">연결된 유형</TableHead>
|
||||
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">생성일</TableHead>
|
||||
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">관리</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.map((tpl) => (
|
||||
<TableRow key={tpl.template_id} className="border-b transition-colors hover:bg-muted/50">
|
||||
<TableCell className="h-14 text-sm font-medium">{tpl.template_name}</TableCell>
|
||||
<TableCell className="text-muted-foreground h-14 text-sm">
|
||||
{tpl.description || "-"}
|
||||
</TableCell>
|
||||
<TableCell className="h-14 text-sm">{renderStepSummary(tpl)}</TableCell>
|
||||
<TableCell className="h-14 text-sm">{tpl.definition_name || "-"}</TableCell>
|
||||
<TableCell className="h-14 text-center text-sm">
|
||||
{formatDate(tpl.created_at)}
|
||||
</TableCell>
|
||||
<TableCell className="h-14 text-center">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => openEdit(tpl)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive"
|
||||
onClick={() => setDeleteTarget(tpl)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{/* 모바일 카드 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{filtered.map((tpl) => (
|
||||
<div key={tpl.template_id} className="rounded-lg border bg-card p-4 shadow-sm">
|
||||
<div className="mb-3 flex items-start justify-between">
|
||||
<h3 className="text-base font-semibold">{tpl.template_name}</h3>
|
||||
{tpl.definition_name && (
|
||||
<Badge variant="outline" className="text-xs">{tpl.definition_name}</Badge>
|
||||
)}
|
||||
</div>
|
||||
{tpl.description && (
|
||||
<p className="text-muted-foreground mb-3 text-sm">{tpl.description}</p>
|
||||
)}
|
||||
<div className="space-y-2 border-t pt-3">
|
||||
<div className="text-sm">
|
||||
<span className="text-muted-foreground">단계 구성</span>
|
||||
<div className="mt-1">{renderStepSummary(tpl)}</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">생성일</span>
|
||||
<span>{formatDate(tpl.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex gap-2 border-t pt-3">
|
||||
<Button variant="outline" size="sm" className="h-9 flex-1 gap-1 text-sm" onClick={() => openEdit(tpl)}>
|
||||
<Edit className="h-4 w-4" />
|
||||
수정
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="h-9 flex-1 gap-1 text-sm text-destructive hover:text-destructive" onClick={() => setDeleteTarget(tpl)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<ResponsiveDataView<ApprovalLineTemplate>
|
||||
data={filtered}
|
||||
columns={columns}
|
||||
keyExtractor={(tpl) => String(tpl.template_id)}
|
||||
isLoading={loading}
|
||||
emptyMessage="등록된 결재 템플릿이 없습니다."
|
||||
skeletonCount={5}
|
||||
cardTitle={(tpl) => tpl.template_name}
|
||||
cardSubtitle={(tpl) => tpl.description ? (
|
||||
<span className="text-muted-foreground text-sm">{tpl.description}</span>
|
||||
) : undefined}
|
||||
cardHeaderRight={(tpl) => tpl.definition_name ? (
|
||||
<Badge variant="outline" className="text-xs">{tpl.definition_name}</Badge>
|
||||
) : undefined}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="관리"
|
||||
actionsWidth="100px"
|
||||
renderActions={(tpl) => (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => openEdit(tpl)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive"
|
||||
onClick={() => setDeleteTarget(tpl)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 등록/수정 Dialog */}
|
||||
|
|
@ -913,7 +838,6 @@ export default function ApprovalTemplatePage() {
|
|||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="max-h-[60vh] space-y-3 overflow-y-auto sm:space-y-4">
|
||||
{/* 템플릿 기본 정보 */}
|
||||
<div>
|
||||
<Label htmlFor="template_name" className="text-xs sm:text-sm">
|
||||
템플릿 이름 *
|
||||
|
|
@ -964,7 +888,6 @@ export default function ApprovalTemplatePage() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
{/* 결재 단계 편집 영역 */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs font-semibold sm:text-sm">결재 단계</Label>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,6 @@ import {
|
|||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
|
|
@ -44,6 +36,7 @@ import { toast } from "sonner";
|
|||
import { BatchAPI, BatchJob } from "@/lib/api/batch";
|
||||
import BatchJobModal from "@/components/admin/BatchJobModal";
|
||||
import { showErrorToast } from "@/lib/utils/toastUtils";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
export default function BatchManagementPage() {
|
||||
const router = useRouter();
|
||||
|
|
@ -55,7 +48,6 @@ export default function BatchManagementPage() {
|
|||
const [typeFilter, setTypeFilter] = useState("all");
|
||||
const [jobTypes, setJobTypes] = useState<Array<{ value: string; label: string }>>([]);
|
||||
|
||||
// 모달 상태
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [selectedJob, setSelectedJob] = useState<BatchJob | null>(null);
|
||||
const [isBatchTypeModalOpen, setIsBatchTypeModalOpen] = useState(false);
|
||||
|
|
@ -94,7 +86,6 @@ export default function BatchManagementPage() {
|
|||
const filterJobs = () => {
|
||||
let filtered = jobs;
|
||||
|
||||
// 검색어 필터
|
||||
if (searchTerm) {
|
||||
filtered = filtered.filter(job =>
|
||||
job.job_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
|
|
@ -102,12 +93,10 @@ export default function BatchManagementPage() {
|
|||
);
|
||||
}
|
||||
|
||||
// 상태 필터
|
||||
if (statusFilter !== "all") {
|
||||
filtered = filtered.filter(job => job.is_active === statusFilter);
|
||||
}
|
||||
|
||||
// 타입 필터
|
||||
if (typeFilter !== "all") {
|
||||
filtered = filtered.filter(job => job.job_type === typeFilter);
|
||||
}
|
||||
|
|
@ -124,12 +113,10 @@ export default function BatchManagementPage() {
|
|||
setIsBatchTypeModalOpen(false);
|
||||
|
||||
if (type === 'db-to-db') {
|
||||
// 기존 배치 생성 모달 열기
|
||||
console.log("DB → DB 배치 모달 열기");
|
||||
setSelectedJob(null);
|
||||
setIsModalOpen(true);
|
||||
} else if (type === 'restapi-to-db') {
|
||||
// 새로운 REST API 배치 페이지로 이동
|
||||
console.log("REST API → DB 페이지로 이동:", '/admin/batch-management-new');
|
||||
router.push('/admin/batch-management-new');
|
||||
}
|
||||
|
|
@ -189,6 +176,149 @@ export default function BatchManagementPage() {
|
|||
return Math.round((job.success_count / job.execution_count) * 100);
|
||||
};
|
||||
|
||||
const getSuccessRateColor = (rate: number) => {
|
||||
if (rate >= 90) return 'text-success';
|
||||
if (rate >= 70) return 'text-warning';
|
||||
return 'text-destructive';
|
||||
};
|
||||
|
||||
const columns: RDVColumn<BatchJob>[] = [
|
||||
{
|
||||
key: "job_name",
|
||||
label: "작업명",
|
||||
render: (_val, job) => (
|
||||
<div>
|
||||
<div className="font-medium">{job.job_name}</div>
|
||||
{job.description && (
|
||||
<div className="text-xs text-muted-foreground">{job.description}</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "job_type",
|
||||
label: "타입",
|
||||
hideOnMobile: true,
|
||||
render: (_val, job) => getTypeBadge(job.job_type),
|
||||
},
|
||||
{
|
||||
key: "schedule_cron",
|
||||
label: "스케줄",
|
||||
hideOnMobile: true,
|
||||
render: (_val, job) => (
|
||||
<span className="font-mono">{job.schedule_cron || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
label: "상태",
|
||||
width: "100px",
|
||||
render: (_val, job) => getStatusBadge(job.is_active),
|
||||
},
|
||||
{
|
||||
key: "execution_count",
|
||||
label: "실행",
|
||||
hideOnMobile: true,
|
||||
render: (_val, job) => (
|
||||
<div>
|
||||
<div>총 {job.execution_count}회</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
성공 {job.success_count} / 실패 {job.failure_count}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "success_rate",
|
||||
label: "성공률",
|
||||
hideOnMobile: true,
|
||||
render: (_val, job) => {
|
||||
const rate = getSuccessRate(job);
|
||||
return (
|
||||
<span className={`font-medium ${getSuccessRateColor(rate)}`}>
|
||||
{rate}%
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "last_executed_at",
|
||||
label: "마지막 실행",
|
||||
render: (_val, job) => (
|
||||
<span>
|
||||
{job.last_executed_at
|
||||
? new Date(job.last_executed_at).toLocaleString()
|
||||
: "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const cardFields: RDVCardField<BatchJob>[] = [
|
||||
{
|
||||
label: "타입",
|
||||
render: (job) => getTypeBadge(job.job_type),
|
||||
},
|
||||
{
|
||||
label: "스케줄",
|
||||
render: (job) => (
|
||||
<span className="font-mono text-xs">{job.schedule_cron || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "실행 횟수",
|
||||
render: (job) => <span className="font-medium">{job.execution_count}회</span>,
|
||||
},
|
||||
{
|
||||
label: "성공률",
|
||||
render: (job) => {
|
||||
const rate = getSuccessRate(job);
|
||||
return (
|
||||
<span className={`font-medium ${getSuccessRateColor(rate)}`}>
|
||||
{rate}%
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "마지막 실행",
|
||||
render: (job) => (
|
||||
<span className="text-xs">
|
||||
{job.last_executed_at
|
||||
? new Date(job.last_executed_at).toLocaleDateString()
|
||||
: "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const renderDropdownActions = (job: BatchJob) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleEdit(job)}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
수정
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExecute(job)}
|
||||
disabled={job.is_active !== "Y"}
|
||||
>
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
실행
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(job)}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 헤더 */}
|
||||
|
|
@ -312,231 +442,23 @@ export default function BatchManagementPage() {
|
|||
총 <span className="font-semibold text-foreground">{filteredJobs.length}</span>개
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<>
|
||||
{/* 데스크톱 스켈레톤 */}
|
||||
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
|
||||
<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-sm font-semibold">성공률</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">마지막 실행</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<TableRow key={i} className="border-b">
|
||||
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-32"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-16"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-24"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-12"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-20"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-10"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-28"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-8"></div></TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{/* 모바일 스켈레톤 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
<div className="h-6 w-12 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
{Array.from({ length: 3 }).map((_, j) => (
|
||||
<div key={j} className="flex justify-between">
|
||||
<div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : filteredJobs.length === 0 ? (
|
||||
<div className="flex h-32 items-center justify-center rounded-lg border bg-card text-sm text-muted-foreground">
|
||||
{jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 데스크톱 테이블 */}
|
||||
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
|
||||
<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-sm font-semibold">성공률</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">마지막 실행</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredJobs.map((job) => (
|
||||
<TableRow key={job.id} className="border-b transition-colors hover:bg-muted/50">
|
||||
<TableCell className="h-16 text-sm">
|
||||
<div>
|
||||
<div className="font-medium">{job.job_name}</div>
|
||||
{job.description && (
|
||||
<div className="text-xs text-muted-foreground">{job.description}</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">{getTypeBadge(job.job_type)}</TableCell>
|
||||
<TableCell className="h-16 font-mono text-sm">{job.schedule_cron || "-"}</TableCell>
|
||||
<TableCell className="h-16 text-sm">{getStatusBadge(job.is_active)}</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<div>
|
||||
<div>총 {job.execution_count}회</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
성공 {job.success_count} / 실패 {job.failure_count}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<span className={`font-medium ${
|
||||
getSuccessRate(job) >= 90 ? 'text-success' :
|
||||
getSuccessRate(job) >= 70 ? 'text-warning' : 'text-destructive'
|
||||
}`}>
|
||||
{getSuccessRate(job)}%
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
{job.last_executed_at
|
||||
? new Date(job.last_executed_at).toLocaleString()
|
||||
: "-"}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleEdit(job)}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
수정
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExecute(job)}
|
||||
disabled={job.is_active !== "Y"}
|
||||
>
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
실행
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(job)}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일 카드 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{filteredJobs.map((job) => (
|
||||
<div
|
||||
key={job.id}
|
||||
className="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
|
||||
>
|
||||
<div className="mb-3 flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="truncate text-base font-semibold">{job.job_name}</h3>
|
||||
{job.description && (
|
||||
<p className="mt-0.5 truncate text-sm text-muted-foreground">{job.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="ml-2 shrink-0">{getStatusBadge(job.is_active)}</div>
|
||||
</div>
|
||||
<div className="space-y-1.5 border-t pt-3">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">타입</span>
|
||||
<span>{getTypeBadge(job.job_type)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">스케줄</span>
|
||||
<span className="font-mono text-xs">{job.schedule_cron || "-"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">실행 횟수</span>
|
||||
<span className="font-medium">{job.execution_count}회</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">성공률</span>
|
||||
<span className={`font-medium ${
|
||||
getSuccessRate(job) >= 90 ? 'text-success' :
|
||||
getSuccessRate(job) >= 70 ? 'text-warning' : 'text-destructive'
|
||||
}`}>
|
||||
{getSuccessRate(job)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">마지막 실행</span>
|
||||
<span className="text-xs">
|
||||
{job.last_executed_at
|
||||
? new Date(job.last_executed_at).toLocaleDateString()
|
||||
: "-"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex gap-2 border-t pt-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
onClick={() => handleEdit(job)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
onClick={() => handleExecute(job)}
|
||||
disabled={job.is_active !== "Y"}
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
실행
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 w-9 p-0 text-destructive hover:text-destructive"
|
||||
onClick={() => handleDelete(job)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<ResponsiveDataView<BatchJob>
|
||||
data={filteredJobs}
|
||||
columns={columns}
|
||||
keyExtractor={(job) => String(job.id)}
|
||||
isLoading={isLoading}
|
||||
emptyMessage={jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
|
||||
skeletonCount={5}
|
||||
cardTitle={(job) => job.job_name}
|
||||
cardSubtitle={(job) => job.description ? (
|
||||
<span className="truncate text-sm text-muted-foreground">{job.description}</span>
|
||||
) : undefined}
|
||||
cardHeaderRight={(job) => getStatusBadge(job.is_active)}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="80px"
|
||||
renderActions={renderDropdownActions}
|
||||
/>
|
||||
|
||||
{/* 배치 타입 선택 모달 */}
|
||||
{isBatchTypeModalOpen && (
|
||||
|
|
@ -547,7 +469,6 @@ export default function BatchManagementPage() {
|
|||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{/* DB → DB */}
|
||||
<div
|
||||
className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
|
||||
onClick={() => handleBatchTypeSelect('db-to-db')}
|
||||
|
|
@ -563,7 +484,6 @@ export default function BatchManagementPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* REST API → DB */}
|
||||
<div
|
||||
className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
|
||||
onClick={() => handleBatchTypeSelect('restapi-to-db')}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import React, { useState, useMemo } from "react";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
AlertDialog,
|
||||
|
|
@ -22,6 +21,8 @@ import { showErrorToast } from "@/lib/utils/toastUtils";
|
|||
import { Plus, Search, Edit, Trash2, Eye, RotateCcw, SortAsc, SortDesc } from "lucide-react";
|
||||
import { useWebTypes } from "@/hooks/admin/useWebTypes";
|
||||
import Link from "next/link";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
import type { WebTypeStandard } from "@/hooks/admin/useWebTypes";
|
||||
|
||||
export default function WebTypesManagePage() {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
|
@ -30,35 +31,29 @@ export default function WebTypesManagePage() {
|
|||
const [sortField, setSortField] = useState<string>("sort_order");
|
||||
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
|
||||
|
||||
// 웹타입 데이터 조회
|
||||
const { webTypes, isLoading, error, deleteWebType, isDeleting, deleteError, refetch } = useWebTypes({
|
||||
active: activeFilter === "all" ? undefined : activeFilter,
|
||||
search: searchTerm || undefined,
|
||||
category: categoryFilter === "all" ? undefined : categoryFilter,
|
||||
});
|
||||
|
||||
// 카테고리 목록 생성
|
||||
const categories = useMemo(() => {
|
||||
const uniqueCategories = Array.from(new Set(webTypes.map((wt) => wt.category).filter(Boolean)));
|
||||
return uniqueCategories.sort();
|
||||
}, [webTypes]);
|
||||
|
||||
// 필터링 및 정렬된 데이터
|
||||
const filteredAndSortedWebTypes = useMemo(() => {
|
||||
let filtered = [...webTypes];
|
||||
|
||||
// 정렬
|
||||
filtered.sort((a, b) => {
|
||||
let aValue: any = a[sortField as keyof typeof a];
|
||||
let bValue: any = b[sortField as keyof typeof b];
|
||||
|
||||
// 숫자 필드 처리
|
||||
if (sortField === "sort_order") {
|
||||
aValue = aValue || 0;
|
||||
bValue = bValue || 0;
|
||||
}
|
||||
|
||||
// 문자열 필드 처리
|
||||
if (typeof aValue === "string") {
|
||||
aValue = aValue.toLowerCase();
|
||||
}
|
||||
|
|
@ -74,17 +69,6 @@ export default function WebTypesManagePage() {
|
|||
return filtered;
|
||||
}, [webTypes, sortField, sortDirection]);
|
||||
|
||||
// 정렬 변경 핸들러
|
||||
const handleSort = (field: string) => {
|
||||
if (sortField === field) {
|
||||
setSortDirection(sortDirection === "asc" ? "desc" : "asc");
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제 핸들러
|
||||
const handleDelete = async (webType: string, typeName: string) => {
|
||||
try {
|
||||
await deleteWebType(webType);
|
||||
|
|
@ -94,7 +78,6 @@ export default function WebTypesManagePage() {
|
|||
}
|
||||
};
|
||||
|
||||
// 필터 초기화
|
||||
const resetFilters = () => {
|
||||
setSearchTerm("");
|
||||
setCategoryFilter("all");
|
||||
|
|
@ -103,6 +86,116 @@ export default function WebTypesManagePage() {
|
|||
setSortDirection("asc");
|
||||
};
|
||||
|
||||
// 삭제 AlertDialog 렌더 헬퍼
|
||||
const renderDeleteDialog = (wt: WebTypeStandard) => (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
'{wt.type_name}' 웹타입을 삭제하시겠습니까?
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleDelete(wt.web_type, wt.type_name)}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? "삭제 중..." : "삭제"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
|
||||
const columns: RDVColumn<WebTypeStandard>[] = [
|
||||
{
|
||||
key: "sort_order",
|
||||
label: "순서",
|
||||
width: "80px",
|
||||
render: (_val, wt) => <span className="font-mono">{wt.sort_order || 0}</span>,
|
||||
},
|
||||
{
|
||||
key: "web_type",
|
||||
label: "웹타입 코드",
|
||||
hideOnMobile: true,
|
||||
render: (_val, wt) => <span className="font-mono">{wt.web_type}</span>,
|
||||
},
|
||||
{
|
||||
key: "type_name",
|
||||
label: "웹타입명",
|
||||
render: (_val, wt) => (
|
||||
<div>
|
||||
<div className="font-medium">{wt.type_name}</div>
|
||||
{wt.type_name_eng && (
|
||||
<div className="text-xs text-muted-foreground">{wt.type_name_eng}</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "category",
|
||||
label: "카테고리",
|
||||
render: (_val, wt) => <Badge variant="secondary">{wt.category}</Badge>,
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "설명",
|
||||
hideOnMobile: true,
|
||||
render: (_val, wt) => (
|
||||
<span className="max-w-xs truncate">{wt.description || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
label: "상태",
|
||||
render: (_val, wt) => (
|
||||
<Badge variant={wt.is_active === "Y" ? "default" : "secondary"}>
|
||||
{wt.is_active === "Y" ? "활성화" : "비활성화"}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "updated_date",
|
||||
label: "최종 수정일",
|
||||
hideOnMobile: true,
|
||||
render: (_val, wt) => (
|
||||
<span className="text-muted-foreground">
|
||||
{wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const cardFields: RDVCardField<WebTypeStandard>[] = [
|
||||
{
|
||||
label: "카테고리",
|
||||
render: (wt) => <Badge variant="secondary">{wt.category}</Badge>,
|
||||
},
|
||||
{
|
||||
label: "순서",
|
||||
render: (wt) => String(wt.sort_order || 0),
|
||||
},
|
||||
{
|
||||
label: "설명",
|
||||
render: (wt) => wt.description || "-",
|
||||
hideEmpty: true,
|
||||
},
|
||||
{
|
||||
label: "수정일",
|
||||
render: (wt) =>
|
||||
wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 페이지 헤더 */}
|
||||
|
|
@ -165,6 +258,32 @@ export default function WebTypesManagePage() {
|
|||
<SelectItem value="N">비활성화</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 정렬 선택 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Select value={sortField} onValueChange={(v) => { setSortField(v); }}>
|
||||
<SelectTrigger className="h-10 w-full sm:w-[140px]">
|
||||
<SelectValue placeholder="정렬 기준" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="sort_order">순서</SelectItem>
|
||||
<SelectItem value="web_type">웹타입 코드</SelectItem>
|
||||
<SelectItem value="type_name">웹타입명</SelectItem>
|
||||
<SelectItem value="category">카테고리</SelectItem>
|
||||
<SelectItem value="is_active">상태</SelectItem>
|
||||
<SelectItem value="updated_date">수정일</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setSortDirection(sortDirection === "asc" ? "desc" : "asc")}
|
||||
className="h-10 w-10 shrink-0"
|
||||
title={sortDirection === "asc" ? "오름차순" : "내림차순"}
|
||||
>
|
||||
{sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button variant="outline" onClick={resetFilters} className="h-10 w-full sm:w-auto">
|
||||
|
|
@ -187,271 +306,46 @@ export default function WebTypesManagePage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<>
|
||||
{/* 데스크톱 스켈레톤 */}
|
||||
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
|
||||
<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-sm font-semibold">상태</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">최종 수정일</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold text-center">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<TableRow key={i} className="border-b">
|
||||
<TableCell className="h-16"><div className="h-4 w-8 animate-pulse rounded bg-muted"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 w-20 animate-pulse rounded bg-muted"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 w-24 animate-pulse rounded bg-muted"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 w-16 animate-pulse rounded bg-muted"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 w-32 animate-pulse rounded bg-muted"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 w-12 animate-pulse rounded bg-muted"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="h-4 w-20 animate-pulse rounded bg-muted"></div></TableCell>
|
||||
<TableCell className="h-16"><div className="mx-auto h-4 w-16 animate-pulse rounded bg-muted"></div></TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{/* 모바일 스켈레톤 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
|
||||
<div className="mb-4 space-y-2">
|
||||
<div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
{Array.from({ length: 4 }).map((_, j) => (
|
||||
<div key={j} className="flex justify-between">
|
||||
<div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : filteredAndSortedWebTypes.length === 0 ? (
|
||||
<div className="flex h-32 items-center justify-center rounded-lg border bg-card text-sm text-muted-foreground">
|
||||
조건에 맞는 웹타입이 없습니다.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 데스크톱 테이블 */}
|
||||
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
|
||||
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("sort_order")}>
|
||||
<div className="flex items-center gap-2">
|
||||
순서
|
||||
{sortField === "sort_order" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("web_type")}>
|
||||
<div className="flex items-center gap-2">
|
||||
웹타입 코드
|
||||
{sortField === "web_type" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("type_name")}>
|
||||
<div className="flex items-center gap-2">
|
||||
웹타입명
|
||||
{sortField === "type_name" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("category")}>
|
||||
<div className="flex items-center gap-2">
|
||||
카테고리
|
||||
{sortField === "category" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">설명</TableHead>
|
||||
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("is_active")}>
|
||||
<div className="flex items-center gap-2">
|
||||
상태
|
||||
{sortField === "is_active" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("updated_date")}>
|
||||
<div className="flex items-center gap-2">
|
||||
최종 수정일
|
||||
{sortField === "updated_date" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 text-center text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredAndSortedWebTypes.map((webType) => (
|
||||
<TableRow key={webType.web_type} className="border-b transition-colors hover:bg-muted/50">
|
||||
<TableCell className="h-16 font-mono text-sm">{webType.sort_order || 0}</TableCell>
|
||||
<TableCell className="h-16 font-mono text-sm">{webType.web_type}</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<div className="font-medium">{webType.type_name}</div>
|
||||
{webType.type_name_eng && (
|
||||
<div className="text-xs text-muted-foreground">{webType.type_name_eng}</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<Badge variant="secondary">{webType.category}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 max-w-xs truncate text-sm">{webType.description || "-"}</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<Badge variant={webType.is_active === "Y" ? "default" : "secondary"}>
|
||||
{webType.is_active === "Y" ? "활성화" : "비활성화"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm text-muted-foreground">
|
||||
{webType.updated_date ? new Date(webType.updated_date).toLocaleDateString("ko-KR") : "-"}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Link href={`/admin/standards/${webType.web_type}`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/admin/standards/${webType.web_type}/edit`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
'{webType.type_name}' 웹타입을 삭제하시겠습니까?
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleDelete(webType.web_type, webType.type_name)}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? "삭제 중..." : "삭제"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일 카드 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{filteredAndSortedWebTypes.map((webType) => (
|
||||
<div
|
||||
key={webType.web_type}
|
||||
className="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
|
||||
>
|
||||
<div className="mb-3 flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-base font-semibold">{webType.type_name}</h3>
|
||||
{webType.type_name_eng && (
|
||||
<p className="text-xs text-muted-foreground">{webType.type_name_eng}</p>
|
||||
)}
|
||||
<p className="mt-0.5 font-mono text-xs text-muted-foreground">{webType.web_type}</p>
|
||||
</div>
|
||||
<Badge variant={webType.is_active === "Y" ? "default" : "secondary"} className="ml-2 shrink-0">
|
||||
{webType.is_active === "Y" ? "활성화" : "비활성화"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="space-y-1.5 border-t pt-3">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">카테고리</span>
|
||||
<Badge variant="secondary">{webType.category}</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">순서</span>
|
||||
<span className="font-medium">{webType.sort_order || 0}</span>
|
||||
</div>
|
||||
{webType.description && (
|
||||
<div className="flex justify-between gap-2 text-sm">
|
||||
<span className="shrink-0 text-muted-foreground">설명</span>
|
||||
<span className="truncate text-right">{webType.description}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">수정일</span>
|
||||
<span className="text-xs">
|
||||
{webType.updated_date ? new Date(webType.updated_date).toLocaleDateString("ko-KR") : "-"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex gap-2 border-t pt-3">
|
||||
<Link href={`/admin/standards/${webType.web_type}`} className="flex-1">
|
||||
<Button variant="outline" size="sm" className="h-9 w-full gap-2 text-sm">
|
||||
<Eye className="h-4 w-4" />
|
||||
보기
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/admin/standards/${webType.web_type}/edit`} className="flex-1">
|
||||
<Button variant="outline" size="sm" className="h-9 w-full gap-2 text-sm">
|
||||
<Edit className="h-4 w-4" />
|
||||
수정
|
||||
</Button>
|
||||
</Link>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-9 w-9 p-0 text-destructive hover:text-destructive">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
'{webType.type_name}' 웹타입을 삭제하시겠습니까?
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleDelete(webType.web_type, webType.type_name)}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? "삭제 중..." : "삭제"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<ResponsiveDataView<WebTypeStandard>
|
||||
data={filteredAndSortedWebTypes}
|
||||
columns={columns}
|
||||
keyExtractor={(wt) => wt.web_type}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="조건에 맞는 웹타입이 없습니다."
|
||||
skeletonCount={6}
|
||||
cardTitle={(wt) => wt.type_name}
|
||||
cardSubtitle={(wt) => (
|
||||
<>
|
||||
{wt.type_name_eng && (
|
||||
<span className="text-xs text-muted-foreground">{wt.type_name_eng} / </span>
|
||||
)}
|
||||
<span className="font-mono text-xs text-muted-foreground">{wt.web_type}</span>
|
||||
</>
|
||||
)}
|
||||
cardHeaderRight={(wt) => (
|
||||
<Badge variant={wt.is_active === "Y" ? "default" : "secondary"} className="shrink-0">
|
||||
{wt.is_active === "Y" ? "활성화" : "비활성화"}
|
||||
</Badge>
|
||||
)}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="140px"
|
||||
renderActions={(wt) => (
|
||||
<>
|
||||
<Link href={`/admin/standards/${wt.web_type}`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/admin/standards/${wt.web_type}/edit`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
{renderDeleteDialog(wt)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,14 +22,6 @@ import {
|
|||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Plus, Pencil, Trash2, Search, RefreshCw } from "lucide-react";
|
||||
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
||||
import {
|
||||
|
|
@ -40,15 +32,14 @@ import {
|
|||
updateSystemNotice,
|
||||
deleteSystemNotice,
|
||||
} from "@/lib/api/systemNotice";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
// 우선순위 레이블 반환
|
||||
function getPriorityLabel(priority: number): { label: string; variant: "default" | "secondary" | "destructive" | "outline" } {
|
||||
if (priority >= 3) return { label: "높음", variant: "destructive" };
|
||||
if (priority === 2) return { label: "보통", variant: "default" };
|
||||
return { label: "낮음", variant: "secondary" };
|
||||
}
|
||||
|
||||
// 날짜 포맷
|
||||
function formatDate(dateStr: string): string {
|
||||
if (!dateStr) return "-";
|
||||
return new Date(dateStr).toLocaleDateString("ko-KR", {
|
||||
|
|
@ -58,7 +49,6 @@ function formatDate(dateStr: string): string {
|
|||
});
|
||||
}
|
||||
|
||||
// 폼 초기값
|
||||
const EMPTY_FORM: CreateSystemNoticePayload = {
|
||||
title: "",
|
||||
content: "",
|
||||
|
|
@ -72,21 +62,17 @@ export default function SystemNoticesPage() {
|
|||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
|
||||
// 검색 필터
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
|
||||
// 등록/수정 모달
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [editTarget, setEditTarget] = useState<SystemNotice | null>(null);
|
||||
const [formData, setFormData] = useState<CreateSystemNoticePayload>(EMPTY_FORM);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// 삭제 확인 모달
|
||||
const [deleteTarget, setDeleteTarget] = useState<SystemNotice | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
// 공지사항 목록 로드
|
||||
const loadNotices = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setErrorMsg(null);
|
||||
|
|
@ -103,7 +89,6 @@ export default function SystemNoticesPage() {
|
|||
loadNotices();
|
||||
}, [loadNotices]);
|
||||
|
||||
// 검색/필터 적용
|
||||
useEffect(() => {
|
||||
let result = [...notices];
|
||||
|
||||
|
|
@ -124,14 +109,12 @@ export default function SystemNoticesPage() {
|
|||
setFilteredNotices(result);
|
||||
}, [notices, searchText, statusFilter]);
|
||||
|
||||
// 등록 모달 열기
|
||||
const handleOpenCreate = () => {
|
||||
setEditTarget(null);
|
||||
setFormData(EMPTY_FORM);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
// 수정 모달 열기
|
||||
const handleOpenEdit = (notice: SystemNotice) => {
|
||||
setEditTarget(notice);
|
||||
setFormData({
|
||||
|
|
@ -143,7 +126,6 @@ export default function SystemNoticesPage() {
|
|||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
// 저장 처리
|
||||
const handleSave = async () => {
|
||||
if (!formData.title.trim()) {
|
||||
alert("제목을 입력해주세요.");
|
||||
|
|
@ -172,7 +154,6 @@ export default function SystemNoticesPage() {
|
|||
setIsSaving(false);
|
||||
};
|
||||
|
||||
// 삭제 처리
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
setIsDeleting(true);
|
||||
|
|
@ -186,6 +167,64 @@ export default function SystemNoticesPage() {
|
|||
setIsDeleting(false);
|
||||
};
|
||||
|
||||
const columns: RDVColumn<SystemNotice>[] = [
|
||||
{
|
||||
key: "title",
|
||||
label: "제목",
|
||||
render: (_val, notice) => (
|
||||
<span className="font-medium">{notice.title}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
label: "상태",
|
||||
width: "100px",
|
||||
render: (_val, notice) => (
|
||||
<Badge variant={notice.is_active ? "default" : "secondary"}>
|
||||
{notice.is_active ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "priority",
|
||||
label: "우선순위",
|
||||
width: "100px",
|
||||
render: (_val, notice) => {
|
||||
const p = getPriorityLabel(notice.priority);
|
||||
return <Badge variant={p.variant}>{p.label}</Badge>;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "created_by",
|
||||
label: "작성자",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (_val, notice) => (
|
||||
<span className="text-muted-foreground">{notice.created_by || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "created_at",
|
||||
label: "작성일",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (_val, notice) => (
|
||||
<span className="text-muted-foreground">{formatDate(notice.created_at)}</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const cardFields: RDVCardField<SystemNotice>[] = [
|
||||
{
|
||||
label: "작성자",
|
||||
render: (notice) => notice.created_by || "-",
|
||||
},
|
||||
{
|
||||
label: "작성일",
|
||||
render: (notice) => formatDate(notice.created_at),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-background">
|
||||
<div className="space-y-6 p-6">
|
||||
|
|
@ -217,7 +256,6 @@ export default function SystemNoticesPage() {
|
|||
{/* 검색 툴바 */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
{/* 상태 필터 */}
|
||||
<div className="w-full sm:w-[160px]">
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="h-10">
|
||||
|
|
@ -231,7 +269,6 @@ export default function SystemNoticesPage() {
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 제목 검색 */}
|
||||
<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" />
|
||||
<Input
|
||||
|
|
@ -263,150 +300,73 @@ export default function SystemNoticesPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* 데스크톱 테이블 */}
|
||||
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
|
||||
<TableHead className="h-12 text-sm font-semibold">제목</TableHead>
|
||||
<TableHead className="h-12 w-[100px] text-sm font-semibold">상태</TableHead>
|
||||
<TableHead className="h-12 w-[100px] text-sm font-semibold">우선순위</TableHead>
|
||||
<TableHead className="h-12 w-[120px] text-sm font-semibold">작성자</TableHead>
|
||||
<TableHead className="h-12 w-[120px] text-sm font-semibold">작성일</TableHead>
|
||||
<TableHead className="h-12 w-[120px] text-sm font-semibold">관리</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
Array.from({ length: 5 }).map((_, i) => (
|
||||
<TableRow key={i} className="border-b">
|
||||
{Array.from({ length: 6 }).map((_, j) => (
|
||||
<TableCell key={j} className="h-16">
|
||||
<div className="h-4 animate-pulse rounded bg-muted" />
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : filteredNotices.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="h-32 text-center text-sm text-muted-foreground">
|
||||
공지사항이 없습니다.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredNotices.map((notice) => {
|
||||
const priority = getPriorityLabel(notice.priority);
|
||||
return (
|
||||
<TableRow key={notice.id} className="border-b transition-colors hover:bg-muted/50">
|
||||
<TableCell className="h-16 text-sm font-medium">{notice.title}</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<Badge variant={notice.is_active ? "default" : "secondary"}>
|
||||
{notice.is_active ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<Badge variant={priority.variant}>{priority.label}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm text-muted-foreground">
|
||||
{notice.created_by || "-"}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm text-muted-foreground">
|
||||
{formatDate(notice.created_at)}
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleOpenEdit(notice)}
|
||||
aria-label="수정"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => setDeleteTarget(notice)}
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일 카드 뷰 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{isLoading ? (
|
||||
Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
|
||||
<div className="space-y-2">
|
||||
<div className="h-5 w-3/4 animate-pulse rounded bg-muted" />
|
||||
<div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : filteredNotices.length === 0 ? (
|
||||
<div className="col-span-2 flex h-32 items-center justify-center rounded-lg border bg-card text-sm text-muted-foreground">
|
||||
공지사항이 없습니다.
|
||||
<ResponsiveDataView<SystemNotice>
|
||||
data={filteredNotices}
|
||||
columns={columns}
|
||||
keyExtractor={(n) => String(n.id)}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="공지사항이 없습니다."
|
||||
skeletonCount={5}
|
||||
cardTitle={(n) => n.title}
|
||||
cardHeaderRight={(n) => (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleOpenEdit(n)}
|
||||
aria-label="수정"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => setDeleteTarget(n)}
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
filteredNotices.map((notice) => {
|
||||
const priority = getPriorityLabel(notice.priority);
|
||||
return (
|
||||
<div key={notice.id} className="rounded-lg border bg-card p-4 shadow-sm">
|
||||
<div className="mb-3 flex items-start justify-between">
|
||||
<h3 className="flex-1 text-base font-semibold">{notice.title}</h3>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleOpenEdit(notice)}
|
||||
aria-label="수정"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => setDeleteTarget(notice)}
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 border-t pt-3">
|
||||
<Badge variant={notice.is_active ? "default" : "secondary"}>
|
||||
{notice.is_active ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
<Badge variant={priority.variant}>{priority.label}</Badge>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">작성자</span>
|
||||
<span className="font-medium">{notice.created_by || "-"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">작성일</span>
|
||||
<span className="font-medium">{formatDate(notice.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
cardSubtitle={(n) => {
|
||||
const p = getPriorityLabel(n.priority);
|
||||
return (
|
||||
<span className="flex flex-wrap gap-2 pt-1">
|
||||
<Badge variant={n.is_active ? "default" : "secondary"}>
|
||||
{n.is_active ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
<Badge variant={p.variant}>{p.label}</Badge>
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="관리"
|
||||
actionsWidth="120px"
|
||||
renderActions={(notice) => (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleOpenEdit(notice)}
|
||||
aria-label="수정"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => setDeleteTarget(notice)}
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 등록/수정 모달 */}
|
||||
|
|
@ -422,7 +382,6 @@ export default function SystemNoticesPage() {
|
|||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* 제목 */}
|
||||
<div>
|
||||
<Label htmlFor="notice-title" className="text-xs sm:text-sm">
|
||||
제목 <span className="text-destructive">*</span>
|
||||
|
|
@ -436,7 +395,6 @@ export default function SystemNoticesPage() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* 내용 */}
|
||||
<div>
|
||||
<Label htmlFor="notice-content" className="text-xs sm:text-sm">
|
||||
내용 <span className="text-destructive">*</span>
|
||||
|
|
@ -450,7 +408,6 @@ export default function SystemNoticesPage() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* 우선순위 */}
|
||||
<div>
|
||||
<Label htmlFor="notice-priority" className="text-xs sm:text-sm">
|
||||
우선순위
|
||||
|
|
@ -472,7 +429,6 @@ export default function SystemNoticesPage() {
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 활성 여부 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="notice-active"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { Edit, Trash2, HardDrive, FileText, Users } from "lucide-react";
|
||||
import { Company } from "@/types/company";
|
||||
import { COMPANY_TABLE_COLUMNS } from "@/constants/company";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface CompanyTableProps {
|
||||
|
|
@ -14,8 +13,6 @@ interface CompanyTableProps {
|
|||
|
||||
/**
|
||||
* 회사 목록 테이블 컴포넌트
|
||||
* 데스크톱: 테이블 뷰
|
||||
* 모바일/태블릿: 카드 뷰
|
||||
*/
|
||||
export function CompanyTable({ companies, isLoading, onEdit, onDelete }: CompanyTableProps) {
|
||||
const router = useRouter();
|
||||
|
|
@ -52,206 +49,88 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
|
|||
);
|
||||
};
|
||||
|
||||
// 로딩 상태 렌더링
|
||||
if (isLoading) {
|
||||
return (
|
||||
<>
|
||||
{/* 데스크톱 테이블 스켈레톤 */}
|
||||
<div className="bg-card hidden shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{COMPANY_TABLE_COLUMNS.map((column) => (
|
||||
<TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
|
||||
{column.label}
|
||||
</TableHead>
|
||||
))}
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<TableRow key={index}>
|
||||
<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 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="flex gap-2">
|
||||
<div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
// 데스크톱 테이블 컬럼 정의
|
||||
const columns: RDVColumn<Company>[] = [
|
||||
{
|
||||
key: "company_code",
|
||||
label: "회사코드",
|
||||
width: "150px",
|
||||
render: (value) => <span className="font-mono">{value}</span>,
|
||||
},
|
||||
{
|
||||
key: "company_name",
|
||||
label: "회사명",
|
||||
render: (value) => <span className="font-medium">{value}</span>,
|
||||
},
|
||||
{
|
||||
key: "writer",
|
||||
label: "등록자",
|
||||
width: "200px",
|
||||
},
|
||||
{
|
||||
key: "diskUsage",
|
||||
label: "디스크 사용량",
|
||||
hideOnMobile: true,
|
||||
render: (_value, row) => formatDiskUsage(row),
|
||||
},
|
||||
];
|
||||
|
||||
{/* 모바일/태블릿 카드 스켈레톤 */}
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
// 모바일 카드 필드 정의
|
||||
const cardFields: RDVCardField<Company>[] = [
|
||||
{
|
||||
label: "작성자",
|
||||
render: (company) => <span className="font-medium">{company.writer}</span>,
|
||||
},
|
||||
{
|
||||
label: "디스크 사용량",
|
||||
render: (company) => formatDiskUsage(company),
|
||||
},
|
||||
];
|
||||
|
||||
// 데이터가 없을 때
|
||||
if (companies.length === 0) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
// 실제 데이터 렌더링
|
||||
return (
|
||||
<>
|
||||
{/* 데스크톱 테이블 뷰 (lg 이상) */}
|
||||
<div className="bg-card hidden lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{COMPANY_TABLE_COLUMNS.map((column) => (
|
||||
<TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
|
||||
{column.label}
|
||||
</TableHead>
|
||||
))}
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{companies.map((company) => (
|
||||
<TableRow
|
||||
key={company.regdate + company.company_code}
|
||||
className="bg-background hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{company.company_code}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm font-medium">{company.company_name}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">{company.writer}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">{formatDiskUsage(company)}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">
|
||||
<div className="flex gap-2">
|
||||
{/* <Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleManageDepartments(company)}
|
||||
className="h-8 w-8"
|
||||
aria-label="부서관리"
|
||||
>
|
||||
<Users className="h-4 w-4" />
|
||||
</Button> */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(company)}
|
||||
className="h-8 w-8"
|
||||
aria-label="수정"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onDelete(company)}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일/태블릿 카드 뷰 (lg 미만) */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{companies.map((company) => (
|
||||
<div
|
||||
key={company.regdate + company.company_code}
|
||||
className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
|
||||
<ResponsiveDataView<Company>
|
||||
data={companies}
|
||||
columns={columns}
|
||||
keyExtractor={(c) => c.regdate + c.company_code}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="등록된 회사가 없습니다."
|
||||
skeletonCount={10}
|
||||
cardTitle={(c) => c.company_name}
|
||||
cardSubtitle={(c) => <span className="font-mono">{c.company_code}</span>}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="180px"
|
||||
renderActions={(company) => (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleManageDepartments(company)}
|
||||
className="h-8 w-8"
|
||||
aria-label="부서관리"
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base font-semibold">{company.company_name}</h3>
|
||||
<p className="text-muted-foreground mt-1 font-mono text-sm">{company.company_code}</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="font-medium">{company.writer}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">디스크 사용량</span>
|
||||
<div>{formatDiskUsage(company)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 */}
|
||||
<div className="mt-4 flex gap-2 border-t pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleManageDepartments(company)}
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
>
|
||||
<Users className="h-4 w-4" />
|
||||
부서
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => onEdit(company)} className="h-9 flex-1 gap-2 text-sm">
|
||||
<Edit className="h-4 w-4" />
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onDelete(company)}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 flex-1 gap-2 text-sm"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
<Users className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(company)}
|
||||
className="h-8 w-8"
|
||||
aria-label="수정"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onDelete(company)}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Shield, ShieldCheck, User as UserIcon, Users, Building2 } from "lucide-react";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
interface UserAuthTableProps {
|
||||
users: any[];
|
||||
|
|
@ -72,158 +72,94 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
|
|||
return (paginationInfo.currentPage - 1) * paginationInfo.pageSize + index + 1;
|
||||
};
|
||||
|
||||
// 로딩 스켈레톤
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="bg-card hidden lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">사용자 ID</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-center text-sm font-semibold">현재 권한</TableHead>
|
||||
<TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<TableRow key={index}>
|
||||
<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 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 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted mx-auto h-6 w-24 animate-pulse rounded-full"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted mx-auto h-8 w-20 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// 데스크톱 테이블 컬럼 정의
|
||||
const columns: RDVColumn<any>[] = [
|
||||
{
|
||||
key: "no",
|
||||
label: "No",
|
||||
width: "80px",
|
||||
className: "text-center",
|
||||
render: (_value, _row, index) => <span>{getRowNumber(index)}</span>,
|
||||
},
|
||||
{
|
||||
key: "userId",
|
||||
label: "사용자 ID",
|
||||
render: (value) => <span className="font-mono">{value}</span>,
|
||||
},
|
||||
{
|
||||
key: "userName",
|
||||
label: "사용자명",
|
||||
},
|
||||
{
|
||||
key: "companyName",
|
||||
label: "회사",
|
||||
hideOnMobile: true,
|
||||
render: (_value, row) => <span>{row.companyName || row.companyCode}</span>,
|
||||
},
|
||||
{
|
||||
key: "deptName",
|
||||
label: "부서",
|
||||
hideOnMobile: true,
|
||||
render: (value) => <span>{value || "-"}</span>,
|
||||
},
|
||||
{
|
||||
key: "userType",
|
||||
label: "현재 권한",
|
||||
className: "text-center",
|
||||
render: (_value, row) => {
|
||||
const typeInfo = getUserTypeInfo(row.userType);
|
||||
return (
|
||||
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
|
||||
{typeInfo.icon}
|
||||
{typeInfo.label}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// 빈 상태
|
||||
if (users.length === 0) {
|
||||
return (
|
||||
<div className="bg-card flex h-64 flex-col items-center justify-center">
|
||||
<p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// 모바일 카드 필드 정의
|
||||
const cardFields: RDVCardField<any>[] = [
|
||||
{
|
||||
label: "회사",
|
||||
render: (user) => <span>{user.companyName || user.companyCode}</span>,
|
||||
},
|
||||
{
|
||||
label: "부서",
|
||||
render: (user) => <span>{user.deptName || "-"}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
// 실제 데이터 렌더링
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 데스크톱 테이블 */}
|
||||
<div className="bg-card hidden lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">사용자 ID</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-center text-sm font-semibold">현재 권한</TableHead>
|
||||
<TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.map((user, index) => {
|
||||
const typeInfo = getUserTypeInfo(user.userType);
|
||||
return (
|
||||
<TableRow key={user.userId} className="hover:bg-muted/50 transition-colors">
|
||||
<TableCell className="h-16 text-center text-sm">{getRowNumber(index)}</TableCell>
|
||||
<TableCell className="h-16 font-mono text-sm">{user.userId}</TableCell>
|
||||
<TableCell className="h-16 text-sm">{user.userName}</TableCell>
|
||||
<TableCell className="h-16 text-sm">{user.companyName || user.companyCode}</TableCell>
|
||||
<TableCell className="h-16 text-sm">{user.deptName || "-"}</TableCell>
|
||||
<TableCell className="h-16 text-center">
|
||||
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
|
||||
{typeInfo.icon}
|
||||
{typeInfo.label}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-center">
|
||||
<Button variant="outline" size="sm" onClick={() => onEditAuth(user)} className="h-8 gap-1 text-sm">
|
||||
<Shield className="h-3 w-3" />
|
||||
권한 변경
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일 카드 뷰 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{users.map((user, index) => {
|
||||
const typeInfo = getUserTypeInfo(user.userType);
|
||||
<ResponsiveDataView<any>
|
||||
data={users}
|
||||
columns={columns}
|
||||
keyExtractor={(u) => u.userId}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="등록된 사용자가 없습니다."
|
||||
skeletonCount={10}
|
||||
cardTitle={(u) => u.userName}
|
||||
cardSubtitle={(u) => <span className="font-mono">{u.userId}</span>}
|
||||
cardHeaderRight={(u) => {
|
||||
const typeInfo = getUserTypeInfo(u.userType);
|
||||
return (
|
||||
<div
|
||||
key={user.userId}
|
||||
className="bg-card hover:bg-muted/50 rounded-lg border p-4 transition-colors"
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base font-semibold">{user.userName}</h3>
|
||||
<p className="text-muted-foreground mt-1 font-mono text-sm">{user.userId}</p>
|
||||
</div>
|
||||
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
|
||||
{typeInfo.icon}
|
||||
{typeInfo.label}
|
||||
</Badge>
|
||||
</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="font-medium">{user.companyName || user.companyCode}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">부서</span>
|
||||
<span className="font-medium">{user.deptName || "-"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 */}
|
||||
<div className="mt-4 border-t pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onEditAuth(user)}
|
||||
className="h-9 w-full gap-2 text-sm"
|
||||
>
|
||||
<Shield className="h-4 w-4" />
|
||||
권한 변경
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
|
||||
{typeInfo.icon}
|
||||
{typeInfo.label}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="액션"
|
||||
actionsWidth="120px"
|
||||
renderActions={(user) => (
|
||||
<Button variant="outline" size="sm" onClick={() => onEditAuth(user)} className="h-8 gap-1 text-sm">
|
||||
<Shield className="h-3 w-3" />
|
||||
권한 변경
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{paginationInfo.totalPages > 1 && (
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import { Key, History, Edit } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { User } from "@/types/user";
|
||||
import { USER_TABLE_COLUMNS } from "@/constants/user";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { PaginationInfo } from "@/components/common/Pagination";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
import { UserStatusConfirmDialog } from "./UserStatusConfirmDialog";
|
||||
import { UserHistoryModal } from "./UserHistoryModal";
|
||||
|
||||
|
|
@ -59,7 +58,7 @@ export function UserTable({
|
|||
// 날짜 포맷팅 함수
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return "-";
|
||||
return dateString.split(" ")[0]; // "2024-01-15 14:30:00" -> "2024-01-15"
|
||||
return dateString.split(" ")[0];
|
||||
};
|
||||
|
||||
// 상태 토글 핸들러 (확인 모달 표시)
|
||||
|
|
@ -103,254 +102,190 @@ export function UserTable({
|
|||
});
|
||||
};
|
||||
|
||||
// 로딩 상태 렌더링
|
||||
if (isLoading) {
|
||||
return (
|
||||
<>
|
||||
{/* 데스크톱 테이블 스켈레톤 */}
|
||||
<div className="bg-card hidden shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{USER_TABLE_COLUMNS.map((column) => (
|
||||
<TableHead key={column.key} style={{ width: column.width }} className="h-12 px-6 py-3 text-sm font-semibold">
|
||||
{column.label}
|
||||
</TableHead>
|
||||
))}
|
||||
<TableHead className="h-12 px-6 py-3 w-[200px] text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<TableRow key={index}>
|
||||
{USER_TABLE_COLUMNS.map((column) => (
|
||||
<TableCell key={column.key} className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
))}
|
||||
<TableCell className="h-16">
|
||||
<div className="flex gap-2">
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<div key={i} className="bg-muted h-8 w-8 animate-pulse rounded"></div>
|
||||
))}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
// 데스크톱 테이블 컬럼 정의
|
||||
const columns: RDVColumn<User>[] = [
|
||||
{
|
||||
key: "no",
|
||||
label: "No",
|
||||
width: "60px",
|
||||
render: (_value, _row, index) => (
|
||||
<span className="font-mono font-medium">{getRowNumber(index)}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "sabun",
|
||||
label: "사번",
|
||||
width: "80px",
|
||||
hideOnMobile: true,
|
||||
render: (value) => <span className="font-mono">{value || "-"}</span>,
|
||||
},
|
||||
{
|
||||
key: "companyCode",
|
||||
label: "회사",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (value) => <span className="font-medium">{value || "-"}</span>,
|
||||
},
|
||||
{
|
||||
key: "deptName",
|
||||
label: "부서명",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (value) => <span className="font-medium">{value || "-"}</span>,
|
||||
},
|
||||
{
|
||||
key: "positionName",
|
||||
label: "직책",
|
||||
width: "100px",
|
||||
hideOnMobile: true,
|
||||
render: (value) => <span className="font-medium">{value || "-"}</span>,
|
||||
},
|
||||
{
|
||||
key: "userId",
|
||||
label: "사용자 ID",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (value) => <span className="font-mono">{value}</span>,
|
||||
},
|
||||
{
|
||||
key: "userName",
|
||||
label: "사용자명",
|
||||
width: "100px",
|
||||
hideOnMobile: true,
|
||||
render: (value) => <span className="font-medium">{value}</span>,
|
||||
},
|
||||
{
|
||||
key: "tel",
|
||||
label: "전화번호",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (_value, row) => <span>{row.tel || row.cellPhone || "-"}</span>,
|
||||
},
|
||||
{
|
||||
key: "email",
|
||||
label: "이메일",
|
||||
width: "200px",
|
||||
hideOnMobile: true,
|
||||
className: "max-w-[200px] truncate",
|
||||
render: (value, row) => (
|
||||
<span title={row.email}>{value || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "regDate",
|
||||
label: "등록일",
|
||||
width: "100px",
|
||||
hideOnMobile: true,
|
||||
render: (value) => <span>{formatDate(value || "")}</span>,
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "상태",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (_value, row) => (
|
||||
<div className="flex items-center">
|
||||
<Switch
|
||||
checked={row.status === "active"}
|
||||
onCheckedChange={(checked) => handleStatusToggle(row, checked)}
|
||||
aria-label={`${row.userName} 상태 토글`}
|
||||
/>
|
||||
</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 className="bg-muted h-6 w-11 animate-pulse rounded-full"></div>
|
||||
</div>
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
{Array.from({ length: 5 }).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 className="mt-4 flex gap-2 border-t pt-4">
|
||||
<div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
// 모바일 카드 필드 정의
|
||||
const cardFields: RDVCardField<User>[] = [
|
||||
{
|
||||
label: "사번",
|
||||
render: (user) => <span className="font-mono font-medium">{user.sabun || "-"}</span>,
|
||||
hideEmpty: true,
|
||||
},
|
||||
{
|
||||
label: "회사",
|
||||
render: (user) => <span className="font-medium">{user.companyCode || ""}</span>,
|
||||
hideEmpty: true,
|
||||
},
|
||||
{
|
||||
label: "부서",
|
||||
render: (user) => <span className="font-medium">{user.deptName || ""}</span>,
|
||||
hideEmpty: true,
|
||||
},
|
||||
{
|
||||
label: "직책",
|
||||
render: (user) => <span className="font-medium">{user.positionName || ""}</span>,
|
||||
hideEmpty: true,
|
||||
},
|
||||
{
|
||||
label: "연락처",
|
||||
render: (user) => <span>{user.tel || user.cellPhone || ""}</span>,
|
||||
hideEmpty: true,
|
||||
},
|
||||
{
|
||||
label: "이메일",
|
||||
render: (user) => <span className="break-all">{user.email || ""}</span>,
|
||||
hideEmpty: true,
|
||||
},
|
||||
{
|
||||
label: "등록일",
|
||||
render: (user) => <span>{formatDate(user.regDate || "")}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
// 데이터가 없을 때
|
||||
if (users.length === 0) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
// 실제 데이터 렌더링
|
||||
return (
|
||||
<>
|
||||
{/* 데스크톱 테이블 뷰 (lg 이상) */}
|
||||
<div className="bg-card hidden lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{USER_TABLE_COLUMNS.map((column) => (
|
||||
<TableHead key={column.key} style={{ width: column.width }} className="h-12 px-6 py-3 text-sm font-semibold">
|
||||
{column.label}
|
||||
</TableHead>
|
||||
))}
|
||||
<TableHead className="h-12 px-6 py-3 w-[200px] text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.map((user, index) => (
|
||||
<TableRow key={`${user.userId}-${index}`} className="bg-background transition-colors hover:bg-muted/50">
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm font-medium">{getRowNumber(index)}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{user.sabun || "-"}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.companyCode || "-"}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.deptName || "-"}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.positionName || "-"}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{user.userId}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.userName}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">{user.tel || user.cellPhone || "-"}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 max-w-[200px] truncate text-sm" title={user.email}>
|
||||
{user.email || "-"}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">{formatDate(user.regDate || "")}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">
|
||||
<div className="flex items-center">
|
||||
<Switch
|
||||
checked={user.status === "active"}
|
||||
onCheckedChange={(checked) => handleStatusToggle(user, checked)}
|
||||
aria-label={`${user.userName} 상태 토글`}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(user)}
|
||||
className="h-8 w-8"
|
||||
title="사용자 정보 수정"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
|
||||
className="h-8 w-8"
|
||||
title="비밀번호 초기화"
|
||||
>
|
||||
<Key className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleOpenHistoryModal(user)}
|
||||
className="h-8 w-8"
|
||||
title="변경이력 조회"
|
||||
>
|
||||
<History className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일/태블릿 카드 뷰 (lg 미만) */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{users.map((user, index) => (
|
||||
<div
|
||||
key={`${user.userId}-${index}`}
|
||||
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">
|
||||
<h3 className="text-base font-semibold">{user.userName}</h3>
|
||||
<p className="text-muted-foreground mt-1 font-mono text-sm">{user.userId}</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={user.status === "active"}
|
||||
onCheckedChange={(checked) => handleStatusToggle(user, checked)}
|
||||
aria-label={`${user.userName} 상태 토글`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 정보 그리드 */}
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
{user.sabun && (
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">사번</span>
|
||||
<span className="font-mono font-medium">{user.sabun}</span>
|
||||
</div>
|
||||
)}
|
||||
{user.companyCode && (
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">회사</span>
|
||||
<span className="font-medium">{user.companyCode}</span>
|
||||
</div>
|
||||
)}
|
||||
{user.deptName && (
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">부서</span>
|
||||
<span className="font-medium">{user.deptName}</span>
|
||||
</div>
|
||||
)}
|
||||
{user.positionName && (
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">직책</span>
|
||||
<span className="font-medium">{user.positionName}</span>
|
||||
</div>
|
||||
)}
|
||||
{(user.tel || user.cellPhone) && (
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">연락처</span>
|
||||
<span>{user.tel || user.cellPhone}</span>
|
||||
</div>
|
||||
)}
|
||||
{user.email && (
|
||||
<div className="flex flex-col gap-1 text-sm">
|
||||
<span className="text-muted-foreground">이메일</span>
|
||||
<span className="break-all">{user.email}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">등록일</span>
|
||||
<span>{formatDate(user.regDate || "")}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="mt-4 flex gap-2 border-t pt-4">
|
||||
<Button variant="outline" size="sm" onClick={() => onEdit(user)} className="h-9 flex-1 gap-2 text-sm">
|
||||
<Edit className="h-4 w-4" />
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
|
||||
className="h-9 w-9 p-0"
|
||||
title="비밀번호 초기화"
|
||||
>
|
||||
<Key className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleOpenHistoryModal(user)}
|
||||
className="h-9 w-9 p-0"
|
||||
title="변경이력"
|
||||
>
|
||||
<History className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<ResponsiveDataView<User>
|
||||
data={users}
|
||||
columns={columns}
|
||||
keyExtractor={(u) => u.userId}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="등록된 사용자가 없습니다."
|
||||
skeletonCount={10}
|
||||
cardTitle={(u) => u.userName || ""}
|
||||
cardSubtitle={(u) => <span className="font-mono">{u.userId}</span>}
|
||||
cardHeaderRight={(u) => (
|
||||
<Switch
|
||||
checked={u.status === "active"}
|
||||
onCheckedChange={(checked) => handleStatusToggle(u, checked)}
|
||||
aria-label={`${u.userName} 상태 토글`}
|
||||
/>
|
||||
)}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="200px"
|
||||
renderActions={(user) => (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(user)}
|
||||
className="h-8 w-8"
|
||||
title="사용자 정보 수정"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
|
||||
className="h-8 w-8"
|
||||
title="비밀번호 초기화"
|
||||
>
|
||||
<Key className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleOpenHistoryModal(user)}
|
||||
className="h-8 w-8"
|
||||
title="변경이력 조회"
|
||||
>
|
||||
<History className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 상태 변경 확인 모달 */}
|
||||
<UserStatusConfirmDialog
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
|
|
@ -19,13 +17,13 @@ import {
|
|||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { MoreHorizontal, Trash2, Copy, Plus, Search, Network, Database, Calendar, User } from "lucide-react";
|
||||
import { MoreHorizontal, Trash2, Copy, Plus, Search, Network, Calendar } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { showErrorToast } from "@/lib/utils/toastUtils";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
// 노드 플로우 타입 정의
|
||||
interface NodeFlow {
|
||||
flowId: number;
|
||||
flowName: string;
|
||||
|
|
@ -44,12 +42,9 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
|
|||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
// 모달 상태
|
||||
const [showCopyModal, setShowCopyModal] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [selectedFlow, setSelectedFlow] = useState<NodeFlow | null>(null);
|
||||
|
||||
// 노드 플로우 목록 로드
|
||||
const loadFlows = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
|
@ -68,23 +63,19 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
|
|||
}
|
||||
}, []);
|
||||
|
||||
// 플로우 목록 로드
|
||||
useEffect(() => {
|
||||
loadFlows();
|
||||
}, [loadFlows]);
|
||||
|
||||
// 플로우 삭제
|
||||
const handleDelete = (flow: NodeFlow) => {
|
||||
setSelectedFlow(flow);
|
||||
setShowDeleteModal(true);
|
||||
};
|
||||
|
||||
// 플로우 복사
|
||||
const handleCopy = async (flow: NodeFlow) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 원본 플로우 데이터 가져오기
|
||||
const response = await apiClient.get(`/dataflow/node-flows/${flow.flowId}`);
|
||||
|
||||
if (!response.data.success) {
|
||||
|
|
@ -93,7 +84,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
|
|||
|
||||
const originalFlow = response.data.data;
|
||||
|
||||
// 복사본 저장
|
||||
const copyResponse = await apiClient.post("/dataflow/node-flows", {
|
||||
flowName: `${flow.flowName} (복사본)`,
|
||||
flowDescription: flow.flowDescription,
|
||||
|
|
@ -114,7 +104,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
|
|||
}
|
||||
};
|
||||
|
||||
// 삭제 확인
|
||||
const handleConfirmDelete = async () => {
|
||||
if (!selectedFlow) return;
|
||||
|
||||
|
|
@ -138,18 +127,95 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
|
|||
}
|
||||
};
|
||||
|
||||
// 검색 필터링
|
||||
const filteredFlows = flows.filter(
|
||||
(flow) =>
|
||||
flow.flowName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
flow.flowDescription.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
|
||||
// DropdownMenu 렌더러 (테이블 + 카드 공통)
|
||||
const renderDropdownMenu = (flow: NodeFlow) => (
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
|
||||
<Network className="mr-2 h-4 w-4" />
|
||||
불러오기
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopy(flow)}>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
복사
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
|
||||
const columns: RDVColumn<NodeFlow>[] = [
|
||||
{
|
||||
key: "flowName",
|
||||
label: "플로우명",
|
||||
render: (_val, flow) => (
|
||||
<div className="flex items-center font-medium">
|
||||
<Network className="mr-2 h-4 w-4 text-primary" />
|
||||
{flow.flowName}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "flowDescription",
|
||||
label: "설명",
|
||||
render: (_val, flow) => (
|
||||
<span className="text-muted-foreground">{flow.flowDescription || "설명 없음"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "createdAt",
|
||||
label: "생성일",
|
||||
render: (_val, flow) => (
|
||||
<span className="flex items-center text-muted-foreground">
|
||||
<Calendar className="mr-1 h-3 w-3" />
|
||||
{new Date(flow.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "updatedAt",
|
||||
label: "최근 수정",
|
||||
hideOnMobile: true,
|
||||
render: (_val, flow) => (
|
||||
<span className="flex items-center text-muted-foreground">
|
||||
<Calendar className="mr-1 h-3 w-3" />
|
||||
{new Date(flow.updatedAt).toLocaleDateString()}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const cardFields: RDVCardField<NodeFlow>[] = [
|
||||
{
|
||||
label: "생성일",
|
||||
render: (flow) => new Date(flow.createdAt).toLocaleDateString(),
|
||||
},
|
||||
{
|
||||
label: "최근 수정",
|
||||
render: (flow) => new Date(flow.updatedAt).toLocaleDateString(),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 검색 및 액션 영역 */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
{/* 검색 영역 */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
<div className="w-full sm:w-[400px]">
|
||||
<div className="relative">
|
||||
|
|
@ -164,7 +230,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 영역 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
총 <span className="font-semibold text-foreground">{filteredFlows.length}</span> 건
|
||||
|
|
@ -176,71 +241,8 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<>
|
||||
{/* 데스크톱 테이블 스켈레톤 */}
|
||||
<div className="hidden bg-card shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-background">
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">플로우명</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">최근 수정</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<TableRow key={index} className="bg-background">
|
||||
<TableCell className="h-16 px-6 py-3">
|
||||
<div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">
|
||||
<div className="h-4 w-48 animate-pulse rounded bg-muted"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">
|
||||
<div className="flex justify-end">
|
||||
<div className="h-8 w-8 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일/태블릿 카드 스켈레톤 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{Array.from({ length: 4 }).map((_, index) => (
|
||||
<div key={index} className="rounded-lg border bg-card p-4 shadow-sm">
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<div className="flex justify-between">
|
||||
<div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : filteredFlows.length === 0 ? (
|
||||
{/* 빈 상태: 커스텀 Empty UI */}
|
||||
{!loading && filteredFlows.length === 0 ? (
|
||||
<div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
|
||||
|
|
@ -257,135 +259,26 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 데스크톱 테이블 뷰 (lg 이상) */}
|
||||
<div className="hidden bg-card shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-background">
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">플로우명</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">최근 수정</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredFlows.map((flow) => (
|
||||
<TableRow
|
||||
key={flow.flowId}
|
||||
className="bg-background transition-colors hover:bg-muted/50 cursor-pointer"
|
||||
onClick={() => onLoadFlow(flow.flowId)}
|
||||
>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<div className="flex items-center font-medium">
|
||||
<Network className="mr-2 h-4 w-4 text-primary" />
|
||||
{flow.flowName}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<div className="text-muted-foreground">{flow.flowDescription || "설명 없음"}</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<div className="flex items-center text-muted-foreground">
|
||||
<Calendar className="mr-1 h-3 w-3" />
|
||||
{new Date(flow.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<div className="flex items-center text-muted-foreground">
|
||||
<Calendar className="mr-1 h-3 w-3" />
|
||||
{new Date(flow.updatedAt).toLocaleDateString()}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex justify-end">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
|
||||
<Network className="mr-2 h-4 w-4" />
|
||||
불러오기
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopy(flow)}>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
복사
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일/태블릿 카드 뷰 (lg 미만) */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{filteredFlows.map((flow) => (
|
||||
<div
|
||||
key={flow.flowId}
|
||||
className="cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
|
||||
onClick={() => onLoadFlow(flow.flowId)}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center">
|
||||
<Network className="mr-2 h-4 w-4 text-primary" />
|
||||
<h3 className="text-base font-semibold">{flow.flowName}</h3>
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-muted-foreground">{flow.flowDescription || "설명 없음"}</p>
|
||||
</div>
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
|
||||
<Network className="mr-2 h-4 w-4" />
|
||||
불러오기
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopy(flow)}>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
복사
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</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="font-medium">{new Date(flow.createdAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">최근 수정</span>
|
||||
<span className="font-medium">{new Date(flow.updatedAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
<ResponsiveDataView<NodeFlow>
|
||||
data={filteredFlows}
|
||||
columns={columns}
|
||||
keyExtractor={(flow) => String(flow.flowId)}
|
||||
isLoading={loading}
|
||||
skeletonCount={5}
|
||||
cardTitle={(flow) => (
|
||||
<span className="flex items-center">
|
||||
<Network className="mr-2 h-4 w-4 text-primary" />
|
||||
{flow.flowName}
|
||||
</span>
|
||||
)}
|
||||
cardSubtitle={(flow) => flow.flowDescription || "설명 없음"}
|
||||
cardHeaderRight={renderDropdownMenu}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="80px"
|
||||
renderActions={renderDropdownMenu}
|
||||
onRowClick={(flow) => onLoadFlow(flow.flowId)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 삭제 확인 모달 */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue