b5fa5d96b9
- 4개 검사 엔진: HTML/CSS, 접근성(WCAG), SEO, 성능/보안 (총 50개 항목) - FastAPI 백엔드 (9개 API, SSE 실시간 진행, PDF/JSON 리포트) - Next.js 15 프론트엔드 (6개 페이지, 29개 컴포넌트, 반원 게이지 차트) - Docker Compose 배포 (Backend:8011, Frontend:3011, MongoDB:27022, Redis:6392) - 전체 테스트 32/32 PASS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { SEVERITY_COLORS, SEVERITY_LABELS } from "@/lib/constants";
|
|
import type { Severity } from "@/types/inspection";
|
|
|
|
interface IssueSummaryBarProps {
|
|
critical: number;
|
|
major: number;
|
|
minor: number;
|
|
info: number;
|
|
total: number;
|
|
}
|
|
|
|
/** 심각도별 이슈 수 요약 바 */
|
|
export function IssueSummaryBar({
|
|
critical,
|
|
major,
|
|
minor,
|
|
info,
|
|
total,
|
|
}: IssueSummaryBarProps) {
|
|
const items: { severity: Severity; count: number }[] = [
|
|
{ severity: "critical", count: critical },
|
|
{ severity: "major", count: major },
|
|
{ severity: "minor", count: minor },
|
|
{ severity: "info", count: info },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{items.map(({ severity, count }) => (
|
|
<div key={severity} className="flex items-center gap-1.5">
|
|
<span
|
|
className={`inline-flex items-center justify-center rounded px-2 py-0.5 text-xs font-semibold ${SEVERITY_COLORS[severity]}`}
|
|
>
|
|
{SEVERITY_LABELS[severity]}
|
|
</span>
|
|
<span className="text-sm font-medium">{count}</span>
|
|
</div>
|
|
))}
|
|
<div className="border-l pl-3 ml-1">
|
|
<span className="text-sm text-muted-foreground">
|
|
총 <span className="font-bold text-foreground">{total}</span>건
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|