kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

530
frontend/app/(main)/admin/approvalBox/page.tsx
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>
</>
)}
{/* 등록/수정 모달 */}

190
frontend/app/(main)/admin/approvalTemplate/page.tsx
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>

18
frontend/app/(main)/admin/audit-log/page.tsx
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>

362
frontend/app/(main)/admin/batch-management/page.tsx
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 && (

521
frontend/app/(main)/admin/standards/page.tsx
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>
);
}

8
frontend/components/common/DataTable.tsx
View File

@ -259,12 +259,12 @@ export const createStatusColumn = (accessorKey: string, header: string) => ({
className={cn(
"inline-flex items-center rounded-full px-2 py-1 text-xs font-medium",
status === "active" || status === "활성"
? "bg-green-50 text-green-700"
? "bg-success/10 text-success"
: status === "inactive" || status === "비활성"
? "bg-gray-50 text-gray-700"
? "bg-muted text-muted-foreground"
: status === "pending" || status === "대기"
? "bg-yellow-50 text-yellow-700"
: "bg-destructive/10 text-red-700",
? "bg-warning/10 text-warning"
: "bg-destructive/10 text-destructive",
)}
>
{status || "-"}

40
frontend/components/common/DualListBox.tsx
View File

@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { ChevronRight, ChevronLeft, ChevronsRight, ChevronsLeft, Search } from "lucide-react";
import { ChevronRight, ChevronLeft, ChevronDown, ChevronUp, ChevronsRight, ChevronsLeft, ChevronsDown, ChevronsUp, Search } from "lucide-react";
import { cn } from "@/lib/utils";
/**
@ -197,9 +197,9 @@ export function DualListBox({
const itemRenderer = renderItem || defaultRenderItem;
return (
<div className={cn("flex gap-4", className)}>
<div className={cn("flex flex-col gap-4 sm:flex-row", className)}>
{/* 좌측 리스트 (사용 가능한 항목) */}
<div className="flex flex-1 flex-col gap-2">
<div className="flex w-full flex-col gap-2 sm:flex-1">
<Label className="text-sm font-semibold">{availableLabel}</Label>
{/* 검색 */}
@ -210,7 +210,7 @@ export function DualListBox({
placeholder="검색..."
value={leftSearch}
onChange={(e) => setLeftSearch(e.target.value)}
className="h-9 pl-9 text-sm"
className="h-9 w-full pl-9 text-sm"
disabled={disabled}
/>
</div>
@ -263,55 +263,57 @@ export function DualListBox({
</div>
</div>
{/* 중앙 버튼 (이동) */}
<div
className="flex flex-col items-center justify-center gap-2"
style={{ marginTop: enableSearch ? "80px" : "48px" }}
>
{/* 중앙 버튼 (이동) - 모바일: 가로 배치, 데스크톱: 세로 배치 */}
<div className="flex flex-row items-center justify-center gap-2 sm:flex-col sm:justify-center">
{/* 모두 이동: 모바일은 아래/위, 데스크톱은 오른쪽/왼쪽 */}
<Button
variant="outline"
size="icon"
onClick={moveAllToRight}
disabled={disabled || available.length === 0}
title="모두 오른쪽으로 이동"
title="모두 이동"
className="h-9 w-9"
>
<ChevronsRight className="h-4 w-4" />
<ChevronsDown className="h-4 w-4 sm:hidden" />
<ChevronsRight className="hidden h-4 w-4 sm:inline-flex" />
</Button>
<Button
variant="outline"
size="icon"
onClick={moveToRight}
disabled={disabled || leftChecked.size === 0}
title="선택된 항목 오른쪽으로 이동"
title="선택된 항목 이동"
className="h-9 w-9"
>
<ChevronRight className="h-4 w-4" />
<ChevronDown className="h-4 w-4 sm:hidden" />
<ChevronRight className="hidden h-4 w-4 sm:inline-flex" />
</Button>
<Button
variant="outline"
size="icon"
onClick={moveToLeft}
disabled={disabled || rightChecked.size === 0}
title="선택된 항목 왼쪽으로 이동"
title="선택된 항목 되돌리기"
className="h-9 w-9"
>
<ChevronLeft className="h-4 w-4" />
<ChevronUp className="h-4 w-4 sm:hidden" />
<ChevronLeft className="hidden h-4 w-4 sm:inline-flex" />
</Button>
<Button
variant="outline"
size="icon"
onClick={moveAllToLeft}
disabled={disabled || selectedItems.length === 0}
title="모두 왼쪽으로 이동"
title="모두 되돌리기"
className="h-9 w-9"
>
<ChevronsLeft className="h-4 w-4" />
<ChevronsUp className="h-4 w-4 sm:hidden" />
<ChevronsLeft className="hidden h-4 w-4 sm:inline-flex" />
</Button>
</div>
{/* 우측 리스트 (선택된 항목) */}
<div className="flex flex-1 flex-col gap-2">
<div className="flex w-full flex-col gap-2 sm:flex-1">
<Label className="text-sm font-semibold">{selectedLabel}</Label>
{/* 검색 */}
@ -322,7 +324,7 @@ export function DualListBox({
placeholder="검색..."
value={rightSearch}
onChange={(e) => setRightSearch(e.target.value)}
className="h-9 pl-9 text-sm"
className="h-9 w-full pl-9 text-sm"
disabled={disabled}
/>
</div>

8
frontend/components/common/EditableSpreadsheet.tsx
View File

@ -992,10 +992,10 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
<div
ref={tableRef}
tabIndex={0}
className="overflow-auto rounded-md border border-border select-none outline-none focus:ring-2 focus:ring-primary/20"
className="overflow-x-auto overflow-y-auto rounded-md border border-border select-none outline-none focus:ring-2 focus:ring-primary/20"
style={{ maxHeight }}
>
<table className="min-w-full border-collapse text-xs">
<table className="min-w-[600px] border-collapse text-xs">
{/* 열 인덱스 헤더 (A, B, C, ...) */}
<thead className="sticky top-0 z-10 bg-muted">
<tr>
@ -1066,7 +1066,7 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
onChange={(e) => setEditValue(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={finishEditing}
className="w-full bg-white px-2 py-1 text-xs font-medium text-primary outline-none"
className="min-w-[80px] w-full bg-white px-2 py-1 text-xs font-medium text-primary outline-none"
/>
) : (
<div className="px-2 py-1">{colName || <span className="text-muted-foreground/50 italic">빈 헤더</span>}</div>
@ -1124,7 +1124,7 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
onChange={(e) => setEditValue(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={finishEditing}
className="w-full bg-white px-2 py-1 text-xs outline-none"
className="min-w-[80px] w-full bg-white px-2 py-1 text-xs outline-none"
/>
) : (
<div

24
frontend/components/v2/V2Date.tsx
View File

@ -740,17 +740,31 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
<div
ref={ref}
id={id}
className={cn(
"flex flex-col gap-1",
labelPos === "left" ? "sm:flex-row sm:items-center" : "sm:flex-row-reverse sm:items-center"
)}
style={{
width: componentWidth,
height: componentHeight,
display: "flex",
flexDirection: labelPos === "left" ? "row" : "row-reverse",
alignItems: "center",
gap: labelGapValue,
}}
>
{labelElement}
{dateContent}
<Label
htmlFor={id}
style={{
fontSize: style?.labelFontSize || "14px",
color: style?.labelColor || "#64748b",
fontWeight: style?.labelFontWeight || "500",
}}
className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
>
{label}
{required && <span className="ml-0.5 text-orange-500">*</span>}
</Label>
<div className="w-full min-w-0 flex-1">
{renderDatePicker()}
</div>
</div>
);
}

27
frontend/components/v2/V2Group.tsx
View File

@ -244,10 +244,10 @@ const ModalGroup = forwardRef<HTMLDivElement, {
className?: string;
}>(({ title, description, open = false, onOpenChange, modalSize = "md", children, className }, ref) => {
const sizeClasses = {
sm: "max-w-sm",
md: "max-w-md",
lg: "max-w-lg",
xl: "max-w-xl",
sm: "max-w-[95vw] sm:max-w-sm",
md: "max-w-[95vw] sm:max-w-md",
lg: "max-w-[95vw] sm:max-w-lg",
xl: "max-w-[95vw] sm:max-w-xl",
};
return (
@ -297,10 +297,10 @@ const FormModalGroup = forwardRef<HTMLDivElement, {
className
}, ref) => {
const sizeClasses = {
sm: "max-w-sm",
md: "max-w-md",
lg: "max-w-lg",
xl: "max-w-xl",
sm: "max-w-[95vw] sm:max-w-sm",
md: "max-w-[95vw] sm:max-w-md",
lg: "max-w-[95vw] sm:max-w-lg",
xl: "max-w-[95vw] sm:max-w-xl",
};
const handleCancel = useCallback(() => {
@ -325,10 +325,17 @@ const FormModalGroup = forwardRef<HTMLDivElement, {
)}
<div className="py-4">{children}</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button variant="outline" onClick={handleCancel}>
<Button
variant="outline"
onClick={handleCancel}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
{cancelLabel}
</Button>
<Button onClick={handleSubmit}>
<Button
onClick={handleSubmit}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
{submitLabel}
</Button>
</DialogFooter>

32
frontend/components/v2/V2Input.tsx
View File

@ -1023,17 +1023,39 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
<div
ref={ref}
id={id}
className={cn(
"flex flex-col gap-1",
labelPos === "left" ? "sm:flex-row sm:items-center" : "sm:flex-row-reverse sm:items-center"
)}
style={{
width: componentWidth,
height: componentHeight,
display: "flex",
flexDirection: labelPos === "left" ? "row" : "row-reverse",
alignItems: "center",
gap: labelGapValue,
}}
>
{labelElement}
{inputContent}
<Label
htmlFor={id}
style={{
fontSize: style?.labelFontSize || "14px",
color: style?.labelColor || "#64748b",
fontWeight: style?.labelFontWeight || "500",
}}
className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
>
{actualLabel}
{required && <span className="ml-0.5 text-orange-500">*</span>}
</Label>
<div
className={cn(
"w-full min-w-0 flex-1",
hasCustomBorder && "[&_input]:border-0! [&_textarea]:border-0! [&_.border]:border-0!",
(hasCustomBorder || hasCustomRadius) && "[&_input]:rounded-none! [&_textarea]:rounded-none! [&_.rounded-md]:rounded-none!",
hasCustomBackground && "[&_input]:bg-transparent! [&_textarea]:bg-transparent!",
)}
style={{ ...(hasCustomText ? customTextStyle : {}) }}
>
{renderInput()}
</div>
</div>
);
}

44
frontend/components/v2/V2Layout.tsx
View File

@ -31,20 +31,20 @@ const GridLayout = forwardRef<HTMLDivElement, {
className?: string;
use12Column?: boolean; // 12컬럼 시스템 사용 여부
}>(({ columns = 12, gap = "16px", children, className, use12Column = true }, ref) => {
// 12컬럼 그리드 클래스 매핑
// 12컬럼 그리드 클래스 매핑 (모바일 단일 컬럼 → sm: 실제 컬럼 수)
const gridColsClass: Record<number, string> = {
1: "grid-cols-1",
2: "grid-cols-2",
3: "grid-cols-3",
4: "grid-cols-4",
5: "grid-cols-5",
6: "grid-cols-6",
7: "grid-cols-7",
8: "grid-cols-8",
9: "grid-cols-9",
10: "grid-cols-10",
11: "grid-cols-11",
12: "grid-cols-12",
2: "grid-cols-1 sm:grid-cols-2",
3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5",
6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-6",
7: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-7",
8: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-8",
9: "grid-cols-1 sm:grid-cols-3 lg:grid-cols-9",
10: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-10",
11: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-11",
12: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-12",
};
// 12컬럼 시스템 사용 시
@ -54,7 +54,7 @@ const GridLayout = forwardRef<HTMLDivElement, {
ref={ref}
className={cn(
"grid",
gridColsClass[columns] || "grid-cols-12",
gridColsClass[columns] || "grid-cols-1 sm:grid-cols-2 lg:grid-cols-12",
className
)}
style={{ gap }}
@ -64,11 +64,11 @@ const GridLayout = forwardRef<HTMLDivElement, {
);
}
// 기존 방식 (동적 컬럼 수)
// 기존 방식 (동적 컬럼 수) - 모바일에서 단일 컬럼으로 전환
return (
<div
ref={ref}
className={cn("grid", className)}
className={cn("grid grid-cols-1", className)}
style={{
gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
gap,
@ -139,14 +139,14 @@ const SplitLayout = forwardRef<HTMLDivElement, {
}}
className={cn(
"flex",
isHorizontal ? "flex-row" : "flex-col",
isHorizontal ? "flex-col sm:flex-row" : "flex-col",
className
)}
style={{ gap }}
>
{/* 첫 번째 패널 */}
{/* 첫 번째 패널 - 모바일에서 전체 너비 */}
<div
className="overflow-auto"
className="overflow-auto w-full sm:w-auto"
style={{
[isHorizontal ? "width" : "height"]: `${ratio[0]}%`,
flexShrink: 0,
@ -155,10 +155,10 @@ const SplitLayout = forwardRef<HTMLDivElement, {
{childArray[0]}
</div>
{/* 리사이저 */}
{/* 리사이저 - 모바일에서 숨김 */}
<div
className={cn(
"flex items-center justify-center bg-border hover:bg-primary/20 transition-colors",
"hidden sm:flex items-center justify-center bg-border hover:bg-primary/20 transition-colors",
isHorizontal ? "w-2 cursor-col-resize" : "h-2 cursor-row-resize",
isDragging && "bg-primary/30"
)}
@ -171,9 +171,9 @@ const SplitLayout = forwardRef<HTMLDivElement, {
)}
</div>
{/* 두 번째 패널 */}
{/* 두 번째 패널 - 모바일에서 전체 너비 */}
<div
className="overflow-auto flex-1"
className="overflow-auto flex-1 w-full sm:w-auto"
style={{
[isHorizontal ? "width" : "height"]: `${ratio[1]}%`,
}}

10
frontend/components/v2/V2Repeater.tsx
View File

@ -1627,7 +1627,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
return (
<div className={cn("flex h-full flex-col overflow-hidden", className)}>
{/* 헤더 영역 */}
<div className="flex shrink-0 items-center justify-between pb-2">
<div className="flex shrink-0 flex-col gap-2 pb-2 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-2">
<span className="text-muted-foreground text-sm">
{data.length > 0 && `${data.length}개 항목`}
@ -1636,19 +1636,19 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
</div>
<div className="flex gap-2">
{selectedRows.size > 0 && (
<Button variant="destructive" onClick={handleBulkDelete} className="h-8 text-xs sm:h-10 sm:text-sm">
<Button variant="destructive" onClick={handleBulkDelete} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
선택 삭제 ({selectedRows.size})
</Button>
)}
<Button onClick={handleAddRow} className="h-8 text-xs sm:h-10 sm:text-sm">
<Button onClick={handleAddRow} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
<Plus className="mr-2 h-4 w-4" />
{isModalMode ? config.modal?.buttonText || "검색" : "추가"}
</Button>
</div>
</div>
{/* Repeater 테이블 - 남은 공간에서 스크롤 */}
<div className="min-h-0 flex-1">
{/* Repeater 테이블 - 남은 공간에서 스크롤, 모바일 가로 스크롤 */}
<div className="min-h-0 flex-1 overflow-x-auto">
<RepeaterTable
columns={repeaterColumns}
data={data}

34
frontend/components/v2/V2Select.tsx
View File

@ -1205,18 +1205,40 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
<div
ref={ref}
id={id}
className={cn(isDesignMode && "pointer-events-none")}
className={cn(
"flex flex-col gap-1",
labelPos === "left" ? "sm:flex-row sm:items-center" : "sm:flex-row-reverse sm:items-center",
isDesignMode && "pointer-events-none"
)}
style={{
width: componentWidth,
height: componentHeight,
display: "flex",
flexDirection: labelPos === "left" ? "row" : "row-reverse",
alignItems: "center",
gap: labelGapValue,
}}
>
{labelElement}
{selectContent}
<Label
htmlFor={id}
style={{
fontSize: style?.labelFontSize || "14px",
color: style?.labelColor || "#64748b",
fontWeight: style?.labelFontWeight || "500",
}}
className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
>
{label}
{required && <span className="text-orange-500 ml-0.5">*</span>}
</Label>
<div
className={cn(
"w-full min-w-0 flex-1",
hasCustomBorder && "[&_button]:border-0! **:data-[slot=select-trigger]:border-0! [&_.border]:border-0!",
(hasCustomBorder || hasCustomRadius) && "[&_button]:rounded-none! **:data-[slot=select-trigger]:rounded-none! [&_.rounded-md]:rounded-none!",
hasCustomBackground && "[&_button]:bg-transparent! **:data-[slot=select-trigger]:bg-transparent!",
)}
style={{ ...(hasCustomText ? customTextStyle : {}) }}
>
{renderSelect()}
</div>
</div>
);
}

5
run-e2e-smoke.sh Normal file
View File

@ -0,0 +1,5 @@
#!/bin/bash
cd /Users/gbpark/ERP-node
node run-e2e-test.mjs 2>&1 | tee /tmp/e2e-smoke-result.txt
echo "EXIT_CODE: $?" >> /tmp/e2e-smoke-result.txt
cat /tmp/e2e-smoke-result.txt