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