From c72b2c3f5851e747bd881f7ed75bc2700d81c14c Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 4 Mar 2026 16:22:21 +0900
Subject: [PATCH] =?UTF-8?q?[st]=20feat:=20=EC=9D=B4=EC=83=81=EA=B1=B4?=
 =?UTF-8?q?=EC=88=98=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../verification/HbStatisticsVerification.tsx | 88 +++++++++++++++----
 1 file changed, 72 insertions(+), 16 deletions(-)

diff --git a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
index 3fa0d990b..67787c264 100644
--- a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
+++ b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
@@ -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>