[st] feat: 이상건수 다이얼로그 작업

This commit is contained in:
2026-03-04 16:22:21 +09:00
parent fe3e6de085
commit c72b2c3f58
@@ -12,6 +12,7 @@ import {
DialogTitle,
Input,
Label,
LoadingWithAnimation,
RadioGroup,
RadioGroupItem,
Select,
@@ -19,6 +20,12 @@ import {
SelectItem,
SelectTrigger,
SelectValue,
Table,
TableBody,
TableHead,
TableHeader,
TableRow,
TableCell,
} from "@common/components";
import { verificationHistoryColumnInfo } from "@/entities/statistics/model/verification-history-column";
import { analysisApi } from "@/entities/statistics/api/analysis-api";
@@ -468,9 +475,11 @@ const HbStatisticsVerification = () => {
<DialogTitle>이상건수 상세</DialogTitle>
</DialogHeader>
{isLoadingOutlier && (
<p className="px-2 py-4 text-[1.3rem] text-muted-foreground">
이상치 데이터를 불러오는 중입니다.
</p>
<div className="flex w-full items-center justify-center py-40">
<div className="relative size-[5rem]">
<LoadingWithAnimation color="primary" />
</div>
</div>
)}
{!isLoadingOutlier && (outlierList?.length ?? 0) === 0 && (
<p className="px-2 py-4 text-[1.3rem] text-muted-foreground">
@@ -478,23 +487,70 @@ const HbStatisticsVerification = () => {
</p>
)}
{!isLoadingOutlier && (outlierList?.length ?? 0) > 0 && (
<div className="max-h-[40rem] space-y-3 overflow-auto px-1 py-2 text-[1.25rem]">
<div className="max-h-[40rem] space-y-4 overflow-auto px-1 py-2 text-[1.25rem]">
{outlierList?.map(
(item: StAnlsOutlierListResponse) => (
<div
<Table
key={`${item.anlsSn}-${item.vrfcTrgtSn}`}
className="rounded border border-border px-3 py-2"
variant="secondary"
className="table-fixed"
>
<div className="flex items-center justify-between">
<span className="font-medium">
{item.vrfcTrgtNm}
</span>
<span className="text-sm text-muted-foreground">
이상건수:{" "}
{item.otlrDataNocs ?? 0}
</span>
</div>
</div>
<TableHeader>
<TableRow>
<TableHead
colSpan={4}
className="bg-muted text-left text-[1.3rem] font-semibold"
>
{item.vrfcTrgtNm}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({
length: Math.ceil(
item.outlierDataList
.length / 4,
),
}).map((_, rowIdx) => (
<TableRow key={rowIdx}>
{item.outlierDataList
.slice(
rowIdx * 4,
rowIdx * 4 + 4,
)
.map((data) => (
<TableCell
key={
data.rsltSn
}
className="text-[1.25rem]"
>
{`${data.sido ?? ""}${data.adstDong ? ` ${data.adstDong}` : ""}`.trim() ||
"-"}
</TableCell>
))}
{/* 빈 셀 추가 */}
{item.outlierDataList.slice(
rowIdx * 4,
rowIdx * 4 + 4,
).length < 4 &&
Array.from({
length:
4 -
item.outlierDataList.slice(
rowIdx * 4,
rowIdx * 4 +
4,
).length,
}).map((_, idx) => (
<TableCell
key={`empty-${idx}`}
/>
))}
</TableRow>
))}
</TableBody>
</Table>
),
)}
</div>