srope 프로젝트의 크롤러/분석 파이프라인 관리 화면에서 반복되는 UI 패턴을 doksam-ui 표준 컴포넌트와 시맨틱 토큰으로 재작성한 모음입니다. 실행 상태(Running/Success/Failed/Stopped)는 chart-1 · success · destructive · warning 토큰 조합으로 라이트/다크 모드를 모두 지원합니다.
번호 + 화살표 + 상태 아이콘 + 진행률 바.
function StepIcon({ status }: { status: StepStatus }) {
if (status === "done") return <CheckCircleIcon weight="fill" className="text-success" />
if (status === "running") return <SpinnerGapIcon className="animate-spin text-chart-1" />
if (status === "error") return <XCircleIcon weight="fill" className="text-destructive" />
return <CircleIcon className="text-muted-foreground" />
}
<Progress value={progress} />Running/Success/Failed/Stopped 4종 — 시맨틱 토큰으로 다크모드 자동 대응.
const STATUSES = [
{ status: "Running", className: "border-chart-1/30 bg-chart-1/10 text-chart-1" },
{ status: "Success", className: "border-success/30 bg-success/10 text-success" },
{ status: "Failed", className: "border-destructive/30 bg-destructive/10 text-destructive" },
{ status: "Stopped", className: "border-warning/30 bg-warning/10 text-warning" },
]모든 아이콘 전용 버튼에 Tooltip 필수 — 접근성 라벨 겸용.
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" className="h-7 w-7" aria-label="수정">
<PencilSimpleIcon size={14} />
</Button>
</TooltipTrigger>
<TooltipContent>수정</TooltipContent>
</Tooltip>카테고리 배지 + 카테고리별 스텝 카드, 상태별 아이콘/에러 메시지.
function statusIcon(status: StepStatus) {
if (status === "done") return <CheckCircleIcon weight="fill" className="text-success" />
if (status === "running") return <SpinnerGapIcon className="animate-spin text-chart-1" />
if (status === "error") return <XCircleIcon weight="fill" className="text-destructive" />
return null
}상태별 행 하이라이팅 + 체크박스 일괄선택 + 인라인 Tooltip 액션.
function rowHighlightClass(status: RunStatus) {
if (status === "running") return "bg-chart-1/5"
if (status === "failed") return "bg-destructive/5"
return ""
}
// 수치 색상: inserted=text-success, filtered=text-chart-1, skipped=text-destructive순번 + 스텝명 + 건수 + 소요시간, 하단 자동 합산.
const TOTAL_ELAPSED = RESULTS.reduce((sum, item) => sum + item.elapsed, 0)
// order, label, count, elapsed(초) 만으로 리스트 + 하단 합산 행을 렌더링필터 + 정렬 헤더 + 일괄 선택 + 페이징 — 목록 화면 표준 툴바.
<Checkbox aria-label="전체 선택" />
<button className="flex items-center gap-0.5">
이름 <SortAscendingIcon size={10} />
</button>
<Badge variant={row.status === "active" ? "default" : "secondary"}>
{row.status === "active" ? "활성" : "비활성"}
</Badge>실패/경고 알림 카드와 최근 실행 이력 리스트.
<Card className="border-destructive/50 bg-destructive/5">
<XCircleIcon className="text-destructive" />
</Card>
<Card className="border-warning/50 bg-warning/5">
<WarningCircleIcon className="text-warning" />
</Card>