gbpark/invyone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[agent-pipeline] pipe-20260306183434-ewn8 round-1

Browse Source
This commit is contained in:
DDD1542
2026-03-07 04:09:49 +09:00
parent e29c7163ed
commit a0d8605526
15 changed files with 1225 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/(main)/admin/approvalBox/page.tsx
+394 -136
View File
@@ -118,47 +118,126 @@ function SentTab() {
return (
<div className="space-y-4">
{loading ? (
<div className="flex h-64 items-center justify-center">
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
</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 w-[100px] text-center text-sm font-semibold">진행</TableHead>
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
<TableHead className="h-12 w-[60px] text-center text-sm font-semibold">보기</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i} className="border-b">
<TableCell className="h-14"><div className="h-4 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-24 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="mx-auto h-4 w-12 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="mx-auto h-5 w-16 animate-pulse rounded-full bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-28 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="mx-auto h-8 w-8 animate-pulse rounded bg-muted" /></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 모바일 스켈레톤 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
<div className="mb-3 flex items-start justify-between">
<div className="h-5 w-40 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>
</>
) : requests.length === 0 ? (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
<div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
<Send className="text-muted-foreground mb-2 h-8 w-8" />
<p className="text-muted-foreground text-sm">상신한 결재가 없습니다.</p>
</div>
) : (
<div className="bg-card rounded-lg border shadow-sm">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 border-b 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 w-[100px] text-center text-sm font-semibold">진행</TableHead>
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
<TableHead className="h-12 w-[60px] text-center text-sm font-semibold">보기</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{requests.map((req) => (
<TableRow key={req.request_id} className="border-b transition-colors hover:bg-muted/50">
<TableCell className="h-14 text-sm font-medium">{req.title}</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">{req.target_table}</TableCell>
<TableCell className="h-14 text-center text-sm">
{req.current_step}/{req.total_steps}
</TableCell>
<TableCell className="h-14 text-center"><StatusBadge status={req.status} /></TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">{formatDate(req.created_at)}</TableCell>
<TableCell className="h-14 text-center">
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openDetail(req)}>
<Eye className="h-4 w-4" />
</Button>
</TableCell>
<>
{/* 데스크톱 테이블 */}
<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 w-[100px] text-center text-sm font-semibold">진행</TableHead>
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
<TableHead className="h-12 w-[60px] text-center text-sm font-semibold">보기</TableHead>
</TableRow>
))}
</TableBody>
</Table>
</div>
</TableHeader>
<TableBody>
{requests.map((req) => (
<TableRow key={req.request_id} className="border-b transition-colors hover:bg-muted/50">
<TableCell className="h-14 text-sm font-medium">{req.title}</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">{req.target_table}</TableCell>
<TableCell className="h-14 text-center text-sm">
{req.current_step}/{req.total_steps}
</TableCell>
<TableCell className="h-14 text-center"><StatusBadge status={req.status} /></TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">{formatDate(req.created_at)}</TableCell>
<TableCell className="h-14 text-center">
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openDetail(req)}>
<Eye className="h-4 w-4" />
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 모바일 카드 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{requests.map((req) => (
<div key={req.request_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">{req.title}</h3>
<StatusBadge status={req.status} />
</div>
<div className="space-y-2 border-t pt-3">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">대상 테이블</span>
<span className="font-medium">{req.target_table || "-"}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">진행</span>
<span className="font-medium">{req.current_step}/{req.total_steps}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">요청일</span>
<span>{formatDate(req.created_at)}</span>
</div>
</div>
<div className="mt-3 border-t pt-3">
<Button variant="outline" size="sm" className="h-9 w-full gap-2 text-sm" onClick={() => openDetail(req)}>
<Eye className="h-4 w-4" />
상세 보기
</Button>
</div>
</div>
))}
</div>
</>
)}
{/* 상세 모달 */}
@@ -306,52 +385,135 @@ function ReceivedTab() {
return (
<div className="space-y-4">
{loading ? (
<div className="flex h-64 items-center justify-center">
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
</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-[80px] text-center text-sm font-semibold">단계</TableHead>
<TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">처리</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i} className="border-b">
<TableCell className="h-14"><div className="h-4 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-24 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="mx-auto h-5 w-10 animate-pulse rounded-full bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-28 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="mx-auto h-8 w-20 animate-pulse rounded bg-muted" /></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 모바일 스켈레톤 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
<div className="mb-3 flex items-start justify-between">
<div className="h-5 w-40 animate-pulse rounded bg-muted" />
<div className="h-5 w-10 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>
</>
) : pendingLines.length === 0 ? (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
<div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
<Inbox className="text-muted-foreground mb-2 h-8 w-8" />
<p className="text-muted-foreground text-sm">결재 대기 건이 없습니다.</p>
</div>
) : (
<div className="bg-card rounded-lg border shadow-sm">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 border-b 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-[80px] text-center text-sm font-semibold">단계</TableHead>
<TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">처리</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{pendingLines.map((line) => (
<TableRow key={line.line_id} className="border-b transition-colors hover:bg-muted/50">
<TableCell className="h-14 text-sm font-medium">{line.title || "-"}</TableCell>
<TableCell className="h-14 text-sm">
{line.requester_name || "-"}
{line.requester_dept && (
<span className="text-muted-foreground ml-1 text-xs">({line.requester_dept})</span>
)}
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">{line.target_table || "-"}</TableCell>
<TableCell className="h-14 text-center text-sm">
<Badge variant="outline">{line.step_order}차</Badge>
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">{formatDate(line.request_created_at || line.created_at)}</TableCell>
<TableCell className="h-14 text-center">
<Button size="sm" className="h-8 text-xs" onClick={() => openProcess(line)}>
결재하기
</Button>
</TableCell>
<>
{/* 데스크톱 테이블 */}
<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-[80px] text-center text-sm font-semibold">단계</TableHead>
<TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">처리</TableHead>
</TableRow>
))}
</TableBody>
</Table>
</div>
</TableHeader>
<TableBody>
{pendingLines.map((line) => (
<TableRow key={line.line_id} className="border-b transition-colors hover:bg-muted/50">
<TableCell className="h-14 text-sm font-medium">{line.title || "-"}</TableCell>
<TableCell className="h-14 text-sm">
{line.requester_name || "-"}
{line.requester_dept && (
<span className="text-muted-foreground ml-1 text-xs">({line.requester_dept})</span>
)}
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">{line.target_table || "-"}</TableCell>
<TableCell className="h-14 text-center text-sm">
<Badge variant="outline">{line.step_order}차</Badge>
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">{formatDate(line.request_created_at || line.created_at)}</TableCell>
<TableCell className="h-14 text-center">
<Button size="sm" className="h-8 text-xs" onClick={() => openProcess(line)}>
결재하기
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 모바일 카드 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{pendingLines.map((line) => (
<div key={line.line_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">{line.title || "-"}</h3>
<Badge variant="outline">{line.step_order}차</Badge>
</div>
<div className="space-y-2 border-t pt-3">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">요청자</span>
<span className="font-medium">
{line.requester_name || "-"}
{line.requester_dept && (
<span className="text-muted-foreground ml-1 text-xs">({line.requester_dept})</span>
)}
</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">대상 테이블</span>
<span>{line.target_table || "-"}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">요청일</span>
<span>{formatDate(line.request_created_at || line.created_at)}</span>
</div>
</div>
<div className="mt-3 border-t pt-3">
<Button className="h-9 w-full text-sm" onClick={() => openProcess(line)}>
결재하기
</Button>
</div>
</div>
))}
</div>
</>
)}
{/* 결재 처리 모달 */}
@@ -732,7 +894,7 @@ function ProxyTab() {
return (
<div className="space-y-4">
{/* 상단 액션 */}
<div className="flex items-center justify-between">
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<p className="text-muted-foreground text-sm">
결재자가 부재 시 대결자가 대신 결재를 처리합니다.
</p>
@@ -744,72 +906,168 @@ function ProxyTab() {
{/* 목록 */}
{loading ? (
<div className="flex h-64 items-center justify-center">
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
</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 w-[120px] text-sm font-semibold">시작일</TableHead>
<TableHead className="h-12 w-[120px] text-sm font-semibold">종료일</TableHead>
<TableHead className="h-12 text-sm font-semibold">사유</TableHead>
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">활성</TableHead>
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">관리</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 4 }).map((_, i) => (
<TableRow key={i} className="border-b">
<TableCell className="h-14"><div className="h-4 w-24 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-24 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="mx-auto h-5 w-14 animate-pulse rounded-full bg-muted" /></TableCell>
<TableCell className="h-14"><div className="mx-auto h-8 w-16 animate-pulse rounded bg-muted" /></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 모바일 스켈레톤 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
<div className="mb-3 flex items-start justify-between">
<div className="h-5 w-32 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: 4 }).map((_, j) => (
<div key={j} className="flex justify-between">
<div className="h-4 w-14 animate-pulse rounded bg-muted" />
<div className="h-4 w-24 animate-pulse rounded bg-muted" />
</div>
))}
</div>
</div>
))}
</div>
</>
) : proxies.length === 0 ? (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
<div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
<UserCog className="text-muted-foreground mb-2 h-8 w-8" />
<p className="text-muted-foreground text-sm">등록된 대결 설정이 없습니다.</p>
</div>
) : (
<div className="bg-card rounded-lg border shadow-sm">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 border-b 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 w-[120px] text-sm font-semibold">시작일</TableHead>
<TableHead className="h-12 w-[120px] text-sm font-semibold">종료일</TableHead>
<TableHead className="h-12 text-sm font-semibold">사유</TableHead>
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">활성</TableHead>
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">관리</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{proxies.map((proxy) => (
<TableRow key={proxy.id} className="border-b transition-colors hover:bg-muted/50">
<TableCell className="h-14 text-sm">
<span className="font-medium">{proxy.original_user_name || proxy.original_user_id}</span>
{proxy.original_dept_name && (
<span className="text-muted-foreground ml-1 text-xs">({proxy.original_dept_name})</span>
)}
</TableCell>
<TableCell className="h-14 text-sm">
<span className="font-medium">{proxy.proxy_user_name || proxy.proxy_user_id}</span>
{proxy.proxy_dept_name && (
<span className="text-muted-foreground ml-1 text-xs">({proxy.proxy_dept_name})</span>
)}
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">
{formatDateOnly(proxy.start_date)}
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">
{formatDateOnly(proxy.end_date)}
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">
{proxy.reason || "-"}
</TableCell>
<TableCell className="h-14 text-center">
<Badge variant={proxy.is_active === "Y" ? "default" : "secondary"}>
{proxy.is_active === "Y" ? "활성" : "비활성"}
</Badge>
</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(proxy)}>
<Pencil className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive" onClick={() => confirmDelete(proxy.id)}>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
<>
{/* 데스크톱 테이블 */}
<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 w-[120px] text-sm font-semibold">시작일</TableHead>
<TableHead className="h-12 w-[120px] text-sm font-semibold">종료일</TableHead>
<TableHead className="h-12 text-sm font-semibold">사유</TableHead>
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">활성</TableHead>
<TableHead className="h-12 w-[100px] text-center text-sm font-semibold">관리</TableHead>
</TableRow>
))}
</TableBody>
</Table>
</div>
</TableHeader>
<TableBody>
{proxies.map((proxy) => (
<TableRow key={proxy.id} className="border-b transition-colors hover:bg-muted/50">
<TableCell className="h-14 text-sm">
<span className="font-medium">{proxy.original_user_name || proxy.original_user_id}</span>
{proxy.original_dept_name && (
<span className="text-muted-foreground ml-1 text-xs">({proxy.original_dept_name})</span>
)}
</TableCell>
<TableCell className="h-14 text-sm">
<span className="font-medium">{proxy.proxy_user_name || proxy.proxy_user_id}</span>
{proxy.proxy_dept_name && (
<span className="text-muted-foreground ml-1 text-xs">({proxy.proxy_dept_name})</span>
)}
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">
{formatDateOnly(proxy.start_date)}
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">
{formatDateOnly(proxy.end_date)}
</TableCell>
<TableCell className="text-muted-foreground h-14 text-sm">
{proxy.reason || "-"}
</TableCell>
<TableCell className="h-14 text-center">
<Badge variant={proxy.is_active === "Y" ? "default" : "secondary"}>
{proxy.is_active === "Y" ? "활성" : "비활성"}
</Badge>
</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(proxy)}>
<Pencil className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive" onClick={() => confirmDelete(proxy.id)}>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 모바일 카드 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{proxies.map((proxy) => (
<div key={proxy.id} className="rounded-lg border bg-card p-4 shadow-sm">
<div className="mb-3 flex items-start justify-between">
<div>
<h3 className="text-base font-semibold">
{proxy.original_user_name || proxy.original_user_id}
</h3>
<p className="text-muted-foreground mt-0.5 text-sm">
대결: {proxy.proxy_user_name || proxy.proxy_user_id}
</p>
</div>
<Badge variant={proxy.is_active === "Y" ? "default" : "secondary"}>
{proxy.is_active === "Y" ? "활성" : "비활성"}
</Badge>
</div>
<div className="space-y-2 border-t pt-3">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">시작일</span>
<span>{formatDateOnly(proxy.start_date)}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">종료일</span>
<span>{formatDateOnly(proxy.end_date)}</span>
</div>
{proxy.reason && (
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">사유</span>
<span className="text-right">{proxy.reason}</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(proxy)}>
<Pencil 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={() => confirmDelete(proxy.id)}>
<Trash2 className="h-4 w-4" />
삭제
</Button>
</div>
</div>
))}
</div>
</>
)}
{/* 등록/수정 모달 */}
frontend/app/(main)/admin/approvalTemplate/page.tsx
+137 -53
View File
@@ -755,65 +755,149 @@ export default function ApprovalTemplatePage() {
</Button>
</div>
{/* 템플릿 목록 테이블 */}
{/* 템플릿 목록 */}
{loading ? (
<div className="flex h-64 items-center justify-center">
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
</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>
{Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i} className="border-b">
<TableCell className="h-14"><div className="h-4 w-32 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-40 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="mx-auto h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
<TableCell className="h-14"><div className="mx-auto h-8 w-16 animate-pulse rounded bg-muted" /></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 모바일 스켈레톤 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
<div className="mb-3 flex items-start justify-between">
<div className="h-5 w-36 animate-pulse rounded bg-muted" />
<div className="h-5 w-14 animate-pulse rounded-full bg-muted" />
</div>
<div className="space-y-2 border-t pt-3">
{Array.from({ length: 3 }).map((_, j) => (
<div key={j} className="flex justify-between">
<div className="h-4 w-16 animate-pulse rounded bg-muted" />
<div className="h-4 w-24 animate-pulse rounded bg-muted" />
</div>
))}
</div>
</div>
))}
</div>
</>
) : filtered.length === 0 ? (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
<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="bg-card rounded-lg border shadow-sm">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 border-b 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>
<>
{/* 데스크톱 테이블 */}
<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>
))}
</TableBody>
</Table>
</div>
</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>
frontend/app/(main)/admin/audit-log/page.tsx
+9 -9
View File
@@ -460,9 +460,9 @@ export default function AuditLogPage() {
<CardContent className="p-4">
<form
onSubmit={handleSearch}
className="flex flex-wrap items-end gap-3"
className="flex flex-col gap-3 sm:flex-wrap sm:flex-row sm:items-end"
>
<div className="min-w-[120px] flex-1">
<div className="w-full sm:min-w-[120px] sm:flex-1">
<label className="text-xs font-medium">검색어</label>
<div className="relative">
<Search className="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
@@ -475,7 +475,7 @@ export default function AuditLogPage() {
</div>
</div>
<div className="w-[130px]">
<div className="w-full sm:w-[130px]">
<label className="text-xs font-medium">유형</label>
<Select
value={filters.resourceType || "all"}
@@ -497,7 +497,7 @@ export default function AuditLogPage() {
</Select>
</div>
<div className="w-[120px]">
<div className="w-full sm:w-[120px]">
<label className="text-xs font-medium">동작</label>
<Select
value={filters.action || "all"}
@@ -520,7 +520,7 @@ export default function AuditLogPage() {
</div>
{isSuperAdmin && (
<div className="w-[160px]">
<div className="w-full sm:w-[160px]">
<label className="text-xs font-medium">회사</label>
<Popover open={companyComboOpen} onOpenChange={setCompanyComboOpen}>
<PopoverTrigger asChild>
@@ -604,7 +604,7 @@ export default function AuditLogPage() {
</div>
)}
<div className="w-[160px]">
<div className="w-full sm:w-[160px]">
<label className="text-xs font-medium">사용자</label>
<Popover open={userComboOpen} onOpenChange={setUserComboOpen}>
<PopoverTrigger asChild>
@@ -685,7 +685,7 @@ export default function AuditLogPage() {
</Popover>
</div>
<div className="w-[130px]">
<div className="w-full sm:w-[130px]">
<label className="text-xs font-medium">시작일</label>
<Input
type="date"
@@ -695,7 +695,7 @@ export default function AuditLogPage() {
/>
</div>
<div className="w-[130px]">
<div className="w-full sm:w-[130px]">
<label className="text-xs font-medium">종료일</label>
<Input
type="date"
@@ -705,7 +705,7 @@ export default function AuditLogPage() {
/>
</div>
<Button type="submit" size="sm" className="h-9">
<Button type="submit" size="sm" className="h-9 w-full sm:w-auto">
<Filter className="mr-1 h-4 w-4" />
필터 적용
</Button>
frontend/app/(main)/admin/batch-management/page.tsx
+229 -133
View File
@@ -43,6 +43,7 @@ import {
import { toast } from "sonner";
import { BatchAPI, BatchJob } from "@/lib/api/batch";
import BatchJobModal from "@/components/admin/BatchJobModal";
import { showErrorToast } from "@/lib/utils/toastUtils";
export default function BatchManagementPage() {
const router = useRouter();
@@ -170,33 +171,16 @@ export default function BatchManagementPage() {
const getStatusBadge = (isActive: string) => {
return isActive === "Y" ? (
<Badge className="bg-green-100 text-green-800">활성</Badge>
<Badge variant="default">활성</Badge>
) : (
<Badge className="bg-red-100 text-red-800">비활성</Badge>
<Badge variant="secondary">비활성</Badge>
);
};
const getTypeBadge = (type: string) => {
const option = jobTypes.find(opt => opt.value === type);
const colors = {
collection: "bg-blue-100 text-blue-800",
sync: "bg-purple-100 text-purple-800",
cleanup: "bg-orange-100 text-orange-800",
custom: "bg-gray-100 text-gray-800",
};
const icons = {
collection: "📥",
sync: "🔄",
cleanup: "🧹",
custom: "⚙️",
};
return (
<Badge className={colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800"}>
<span className="mr-1">{icons[type as keyof typeof icons] || "📋"}</span>
{option?.label || type}
</Badge>
<Badge variant="outline">{option?.label || type}</Badge>
);
};
@@ -228,11 +212,10 @@ export default function BatchManagementPage() {
</div>
{/* 통계 카드 */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">총 작업</CardTitle>
<div className="text-2xl">📋</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{jobs.length}</div>
@@ -245,7 +228,6 @@ export default function BatchManagementPage() {
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">총 실행</CardTitle>
<div className="text-2xl">▶️</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
@@ -258,10 +240,9 @@ export default function BatchManagementPage() {
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">성공</CardTitle>
<div className="text-2xl">✅</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-green-600">
<div className="text-2xl font-bold text-success">
{jobs.reduce((sum, job) => sum + job.success_count, 0)}
</div>
<p className="text-xs text-muted-foreground">총 성공 횟수</p>
@@ -271,10 +252,9 @@ export default function BatchManagementPage() {
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">실패</CardTitle>
<div className="text-2xl">❌</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-red-600">
<div className="text-2xl font-bold text-destructive">
{jobs.reduce((sum, job) => sum + job.failure_count, 0)}
</div>
<p className="text-xs text-muted-foreground">총 실패 횟수</p>
@@ -283,132 +263,168 @@ export default function BatchManagementPage() {
</div>
{/* 필터 및 검색 */}
<Card>
<CardHeader>
<CardTitle>필터 및 검색</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col md:flex-row gap-4">
<div className="flex-1">
<div className="relative">
<Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
<Input
placeholder="작업명, 설명으로 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10"
/>
</div>
</div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="w-32">
<SelectValue placeholder="상태" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
<SelectItem value="Y">활성</SelectItem>
<SelectItem value="N">비활성</SelectItem>
</SelectContent>
</Select>
<Select value={typeFilter} onValueChange={setTypeFilter}>
<SelectTrigger className="w-40">
<SelectValue placeholder="작업 타입" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체 타입</SelectItem>
{jobTypes.map((type) => (
<SelectItem key={type.value} value={type.value}>
{type.label}
</SelectItem>
))}
</SelectContent>
</Select>
<Button variant="outline" onClick={loadJobs} disabled={isLoading}>
<RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
새로고침
</Button>
<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="relative w-full sm:w-[300px]">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder="작업명, 설명으로 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="h-10 pl-10 text-sm"
/>
</div>
</CardContent>
</Card>
{/* 배치 작업 목록 */}
<Card>
<CardHeader>
<CardTitle>배치 작업 목록 ({filteredJobs.length}개)</CardTitle>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="text-center py-8">
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-2" />
<p>배치 작업을 불러오는 중...</p>
</div>
) : filteredJobs.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
{jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
</div>
) : (
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="h-10 w-full sm:w-[160px]">
<SelectValue placeholder="상태" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
<SelectItem value="Y">활성</SelectItem>
<SelectItem value="N">비활성</SelectItem>
</SelectContent>
</Select>
<Select value={typeFilter} onValueChange={setTypeFilter}>
<SelectTrigger className="h-10 w-full sm:w-[160px]">
<SelectValue placeholder="작업 타입" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체 타입</SelectItem>
{jobTypes.map((type) => (
<SelectItem key={type.value} value={type.value}>
{type.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<Button variant="outline" onClick={loadJobs} disabled={isLoading} className="h-10 w-full sm:w-auto">
<RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
새로고침
</Button>
</div>
{/* 배치 작업 목록 제목 */}
<div className="text-sm text-muted-foreground">
총 <span className="font-semibold text-foreground">{filteredJobs.length}</span>개
</div>
{isLoading ? (
<>
{/* 데스크톱 스켈레톤 */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow>
<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-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>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
<TableHead className="h-12 text-sm font-semibold">작업명</TableHead>
<TableHead className="h-12 text-sm font-semibold">타입</TableHead>
<TableHead className="h-12 text-sm font-semibold">스케줄</TableHead>
<TableHead className="h-12 text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 text-sm font-semibold">실행 통계</TableHead>
<TableHead className="h-12 text-sm font-semibold">성공률</TableHead>
<TableHead className="h-12 text-sm font-semibold">마지막 실행</TableHead>
<TableHead className="h-12 text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i} className="border-b">
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-32"></div></TableCell>
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-16"></div></TableCell>
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-24"></div></TableCell>
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-12"></div></TableCell>
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-20"></div></TableCell>
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-10"></div></TableCell>
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-28"></div></TableCell>
<TableCell className="h-16"><div className="h-4 animate-pulse rounded bg-muted w-8"></div></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 모바일 스켈레톤 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
<div className="mb-4 flex items-start justify-between">
<div className="flex-1 space-y-2">
<div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
</div>
<div className="h-6 w-12 animate-pulse rounded bg-muted"></div>
</div>
<div className="space-y-2 border-t pt-4">
{Array.from({ length: 3 }).map((_, j) => (
<div key={j} className="flex justify-between">
<div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
</div>
))}
</div>
</div>
))}
</div>
</>
) : filteredJobs.length === 0 ? (
<div className="flex h-32 items-center justify-center rounded-lg border bg-card text-sm text-muted-foreground">
{jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
</div>
) : (
<>
{/* 데스크톱 테이블 */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
<TableHead className="h-12 text-sm font-semibold">작업명</TableHead>
<TableHead className="h-12 text-sm font-semibold">타입</TableHead>
<TableHead className="h-12 text-sm font-semibold">스케줄</TableHead>
<TableHead className="h-12 text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 text-sm font-semibold">실행 통계</TableHead>
<TableHead className="h-12 text-sm font-semibold">성공률</TableHead>
<TableHead className="h-12 text-sm font-semibold">마지막 실행</TableHead>
<TableHead className="h-12 text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredJobs.map((job) => (
<TableRow key={job.id}>
<TableCell>
<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-sm text-muted-foreground">
{job.description}
</div>
<div className="text-xs text-muted-foreground">{job.description}</div>
)}
</div>
</TableCell>
<TableCell>
{getTypeBadge(job.job_type)}
</TableCell>
<TableCell className="font-mono text-sm">
{job.schedule_cron || "-"}
</TableCell>
<TableCell>
{getStatusBadge(job.is_active)}
</TableCell>
<TableCell>
<div className="text-sm">
<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-muted-foreground">
<div className="text-xs text-muted-foreground">
성공 {job.success_count} / 실패 {job.failure_count}
</div>
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<div className={`text-sm font-medium ${
getSuccessRate(job) >= 90 ? 'text-green-600' :
getSuccessRate(job) >= 70 ? 'text-yellow-600' : 'text-red-600'
}`}>
{getSuccessRate(job)}%
</div>
</div>
<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>
<TableCell className="h-16 text-sm">
{job.last_executed_at
? new Date(job.last_executed_at).toLocaleString()
: "-"}
</TableCell>
<TableCell>
<TableCell className="h-16 text-sm">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
@@ -420,7 +436,7 @@ export default function BatchManagementPage() {
<Edit className="h-4 w-4 mr-2" />
수정
</DropdownMenuItem>
<DropdownMenuItem
<DropdownMenuItem
onClick={() => handleExecute(job)}
disabled={job.is_active !== "Y"}
>
@@ -438,9 +454,89 @@ export default function BatchManagementPage() {
))}
</TableBody>
</Table>
)}
</CardContent>
</Card>
</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 && (
frontend/app/(main)/admin/standards/page.tsx
+304 -217
View File
@@ -4,7 +4,6 @@ import React, { useState, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
@@ -20,7 +19,7 @@ import {
} from "@/components/ui/alert-dialog";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import { Plus, Search, Edit, Trash2, Eye, Filter, RotateCcw, Settings, SortAsc, SortDesc } from "lucide-react";
import { Plus, Search, Edit, Trash2, Eye, RotateCcw, SortAsc, SortDesc } from "lucide-react";
import { useWebTypes } from "@/hooks/admin/useWebTypes";
import Link from "next/link";
@@ -104,230 +103,241 @@ export default function WebTypesManagePage() {
setSortDirection("asc");
};
// 로딩 상태
if (isLoading) {
return (
<div className="flex h-96 items-center justify-center">
<div className="text-lg">웹타입 목록을 불러오는 중...</div>
return (
<div className="space-y-6">
{/* 페이지 헤더 */}
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 className="text-2xl font-bold">웹타입 관리</h1>
<p className="text-sm text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다</p>
</div>
<Link href="/admin/standards/new">
<Button className="w-full sm:w-auto">
<Plus className="mr-2 h-4 w-4" />새 웹타입 추가
</Button>
</Link>
</div>
);
}
// 에러 상태
if (error) {
return (
<div className="flex h-96 items-center justify-center">
<div className="text-center">
<div className="mb-2 text-lg text-destructive">웹타입 목록을 불러오는데 실패했습니다.</div>
<Button onClick={() => refetch()} variant="outline">
{/* 에러 상태 */}
{error && (
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
<p className="text-sm font-semibold text-destructive">웹타입 목록을 불러오는데 실패했습니다.</p>
<Button onClick={() => refetch()} variant="outline" size="sm" className="mt-2">
다시 시도
</Button>
</div>
)}
{/* 검색 툴바 */}
<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="relative w-full sm:w-[300px]">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder="웹타입명, 설명 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="h-10 pl-10 text-sm"
/>
</div>
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
<SelectTrigger className="h-10 w-full sm:w-[160px]">
<SelectValue placeholder="카테고리 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체 카테고리</SelectItem>
{categories.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
<Select value={activeFilter} onValueChange={setActiveFilter}>
<SelectTrigger className="h-10 w-full sm:w-[160px]">
<SelectValue placeholder="상태 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
<SelectItem value="Y">활성화</SelectItem>
<SelectItem value="N">비활성화</SelectItem>
</SelectContent>
</Select>
</div>
<Button variant="outline" onClick={resetFilters} className="h-10 w-full sm:w-auto">
<RotateCcw className="mr-2 h-4 w-4" />
초기화
</Button>
</div>
);
}
return (
<div className="min-h-screen bg-background">
<div className="w-full max-w-none px-4 py-8 space-y-8">
{/* 페이지 제목 */}
<div className="flex items-center justify-between bg-background rounded-lg shadow-sm border p-6">
<div>
<h1 className="text-3xl font-bold text-foreground">웹타입 관리</h1>
<p className="mt-2 text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다</p>
</div>
<Link href="/admin/standards/new">
<Button className="shadow-sm">
<Plus className="mr-2 h-4 w-4" />새 웹타입 추가
</Button>
</Link>
{/* 결과 수 */}
<div className="text-sm text-muted-foreground">
총 <span className="font-semibold text-foreground">{filteredAndSortedWebTypes.length}</span>개의 웹타입
</div>
{/* 삭제 에러 */}
{deleteError && (
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
<p className="text-sm text-destructive">
삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
</p>
</div>
)}
{/* 필터 및 검색 */}
<Card className="shadow-sm">
<CardHeader className="bg-muted/50">
<CardTitle className="flex items-center gap-2 text-lg">
<Filter className="h-5 w-5 text-muted-foreground" />
필터 및 검색
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{/* 검색 */}
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder="웹타입명, 설명 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10"
/>
</div>
{/* 카테고리 필터 */}
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
<SelectTrigger>
<SelectValue placeholder="카테고리 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체 카테고리</SelectItem>
{categories.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
{/* 활성화 상태 필터 */}
<Select value={activeFilter} onValueChange={setActiveFilter}>
<SelectTrigger>
<SelectValue placeholder="상태 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
<SelectItem value="Y">활성화</SelectItem>
<SelectItem value="N">비활성화</SelectItem>
</SelectContent>
</Select>
{/* 초기화 버튼 */}
<Button variant="outline" onClick={resetFilters}>
<RotateCcw className="mr-2 h-4 w-4" />
초기화
</Button>
</div>
</CardContent>
</Card>
{/* 결과 통계 */}
<div className="bg-background rounded-lg border px-4 py-3">
<p className="text-foreground text-sm font-medium">총 {filteredAndSortedWebTypes.length}개의 웹타입이 있습니다.</p>
</div>
{/* 웹타입 목록 테이블 */}
<div className="bg-card shadow-sm">
<Table>
<TableHeader>
<TableRow className="bg-background">
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer 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 px-6 py-3 text-sm font-semibold cursor-pointer 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 px-6 py-3 text-sm font-semibold cursor-pointer 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 px-6 py-3 text-sm font-semibold cursor-pointer 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 px-6 py-3 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("component_name")}>
<div className="flex items-center gap-2">
연결된 컴포넌트
{sortField === "component_name" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("config_panel")}>
<div className="flex items-center gap-2">
설정 패널
{sortField === "config_panel" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer 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 px-6 py-3 text-sm font-semibold cursor-pointer 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 px-6 py-3 text-sm font-semibold text-center">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredAndSortedWebTypes.length === 0 ? (
<TableRow>
<TableCell colSpan={10} className="py-8 text-center">
조건에 맞는 웹타입이 없습니다.
</TableCell>
{isLoading ? (
<>
{/* 데스크톱 스켈레톤 */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
<TableHead className="h-12 text-sm font-semibold">순서</TableHead>
<TableHead className="h-12 text-sm font-semibold">웹타입 코드</TableHead>
<TableHead className="h-12 text-sm font-semibold">웹타입명</TableHead>
<TableHead className="h-12 text-sm font-semibold">카테고리</TableHead>
<TableHead className="h-12 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 text-sm font-semibold">최종 수정일</TableHead>
<TableHead className="h-12 text-sm font-semibold text-center">작업</TableHead>
</TableRow>
) : (
filteredAndSortedWebTypes.map((webType) => (
<TableRow key={webType.web_type} className="bg-background transition-colors hover:bg-muted/50">
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{webType.sort_order || 0}</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{webType.web_type}</TableCell>
<TableCell className="h-16 px-6 py-3 font-medium text-sm">
{webType.type_name}
</TableHeader>
<TableBody>
{Array.from({ length: 6 }).map((_, i) => (
<TableRow key={i} className="border-b">
<TableCell className="h-16"><div className="h-4 w-8 animate-pulse rounded bg-muted"></div></TableCell>
<TableCell className="h-16"><div className="h-4 w-20 animate-pulse rounded bg-muted"></div></TableCell>
<TableCell className="h-16"><div className="h-4 w-24 animate-pulse rounded bg-muted"></div></TableCell>
<TableCell className="h-16"><div className="h-4 w-16 animate-pulse rounded bg-muted"></div></TableCell>
<TableCell className="h-16"><div className="h-4 w-32 animate-pulse rounded bg-muted"></div></TableCell>
<TableCell className="h-16"><div className="h-4 w-12 animate-pulse rounded bg-muted"></div></TableCell>
<TableCell className="h-16"><div className="h-4 w-20 animate-pulse rounded bg-muted"></div></TableCell>
<TableCell className="h-16"><div className="mx-auto h-4 w-16 animate-pulse rounded bg-muted"></div></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 모바일 스켈레톤 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
<div className="mb-4 space-y-2">
<div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
</div>
<div className="space-y-2 border-t pt-4">
{Array.from({ length: 4 }).map((_, j) => (
<div key={j} className="flex justify-between">
<div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
</div>
))}
</div>
</div>
))}
</div>
</>
) : filteredAndSortedWebTypes.length === 0 ? (
<div className="flex h-32 items-center justify-center rounded-lg border bg-card text-sm text-muted-foreground">
조건에 맞는 웹타입이 없습니다.
</div>
) : (
<>
{/* 데스크톱 테이블 */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("sort_order")}>
<div className="flex items-center gap-2">
순서
{sortField === "sort_order" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("web_type")}>
<div className="flex items-center gap-2">
웹타입 코드
{sortField === "web_type" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("type_name")}>
<div className="flex items-center gap-2">
웹타입명
{sortField === "type_name" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("category")}>
<div className="flex items-center gap-2">
카테고리
{sortField === "category" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("is_active")}>
<div className="flex items-center gap-2">
상태
{sortField === "is_active" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 cursor-pointer text-sm font-semibold hover:bg-muted/50" onClick={() => handleSort("updated_date")}>
<div className="flex items-center gap-2">
최종 수정일
{sortField === "updated_date" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 text-center text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredAndSortedWebTypes.map((webType) => (
<TableRow key={webType.web_type} className="border-b transition-colors hover:bg-muted/50">
<TableCell className="h-16 font-mono text-sm">{webType.sort_order || 0}</TableCell>
<TableCell className="h-16 font-mono text-sm">{webType.web_type}</TableCell>
<TableCell className="h-16 text-sm">
<div className="font-medium">{webType.type_name}</div>
{webType.type_name_eng && (
<div className="text-muted-foreground text-xs">{webType.type_name_eng}</div>
<div className="text-xs text-muted-foreground">{webType.type_name_eng}</div>
)}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<TableCell className="h-16 text-sm">
<Badge variant="secondary">{webType.category}</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 max-w-xs truncate text-sm">{webType.description || "-"}</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant="outline" className="font-mono text-xs">
{webType.component_name || "TextWidget"}
</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant="secondary" className="font-mono text-xs">
{webType.config_panel === "none" || !webType.config_panel ? "기본 설정" : webType.config_panel}
</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<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 px-6 py-3 text-muted-foreground text-sm">
<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 px-6 py-3 text-sm">
<div className="flex items-center gap-2">
<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>
<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>
@@ -351,20 +361,97 @@ export default function WebTypesManagePage() {
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
))}
</TableBody>
</Table>
</div>
{deleteError && (
<div className="mt-4 rounded-md border border-destructive/30 bg-destructive/10 p-4">
<p className="text-destructive">
삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
</p>
</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>
);
}