[st] feat: 이상건수 상세 다이얼로그 수정
This commit is contained in:
@@ -1,129 +1,4 @@
|
||||
.card {
|
||||
position: relative;
|
||||
margin: 0.6rem;
|
||||
box-sizing: border-box;
|
||||
min-height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.6rem;
|
||||
font-size: 1.3rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.card_width10 {
|
||||
width: calc(10% - 12px);
|
||||
}
|
||||
|
||||
.card_width20 {
|
||||
width: calc(20% - 12px);
|
||||
}
|
||||
|
||||
.card_width25 {
|
||||
width: calc(25% - 12px);
|
||||
}
|
||||
|
||||
.card_width30 {
|
||||
width: calc(30% - 12px);
|
||||
}
|
||||
|
||||
.card_width33 {
|
||||
width: calc(33.333% - 12px);
|
||||
}
|
||||
|
||||
.card_width40 {
|
||||
width: calc(40% - 12px);
|
||||
}
|
||||
|
||||
.card_width45 {
|
||||
width: calc(45% - 12px);
|
||||
}
|
||||
|
||||
.card_width50 {
|
||||
width: calc(50% - 12px);
|
||||
}
|
||||
|
||||
.card_width60 {
|
||||
width: calc(60% - 12px);
|
||||
}
|
||||
|
||||
.card_width66 {
|
||||
width: calc(66.666% - 12px);
|
||||
}
|
||||
|
||||
.card_width70 {
|
||||
width: calc(70% - 12px);
|
||||
}
|
||||
|
||||
.card_width75 {
|
||||
width: calc(75% - 12px);
|
||||
}
|
||||
|
||||
.card_width80 {
|
||||
width: calc(80% - 12px);
|
||||
}
|
||||
|
||||
.card_width90 {
|
||||
width: calc(90% - 12px);
|
||||
}
|
||||
|
||||
.card_width100 {
|
||||
width: calc(100% - 12px);
|
||||
}
|
||||
|
||||
.card_nopadding {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.card_nomargin {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.topline {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.bottomline {
|
||||
border-bottom: 1px solid #e6eef3;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.card-border {
|
||||
border: 1px solid #dbe2e6;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-top: -0.6rem;
|
||||
margin-left: -0.6rem;
|
||||
margin-right: -0.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e1e7eb;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-left: -0.6rem;
|
||||
margin-right: -0.6rem;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #e1e7eb;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 블랙 테마 */
|
||||
[data-theme="black"] {
|
||||
.card-border {
|
||||
background-color: rgba(255, 255, 255, 0.065);
|
||||
border-color: #38383a;
|
||||
}
|
||||
.card-header {
|
||||
border-bottom-color: #3f4042;
|
||||
}
|
||||
margin: 0.5rem !important;
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import dayjs from "dayjs";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
@@ -152,6 +152,19 @@ const HbStatisticsVerification = () => {
|
||||
);
|
||||
}, [verificationTargetCodes, selectedStatsCd]);
|
||||
|
||||
const allVerificationTargetIds = useMemo(
|
||||
() =>
|
||||
(filteredVerificationTargetCodes ?? []).map(
|
||||
(item) => item.vrfcTrgtSn,
|
||||
),
|
||||
[filteredVerificationTargetCodes],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!allVerificationTargetIds.length) return;
|
||||
setSelectedTargets(allVerificationTargetIds);
|
||||
}, [allVerificationTargetIds]);
|
||||
|
||||
const { data: analysisHistory } = useQuery({
|
||||
queryKey: [
|
||||
ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST,
|
||||
@@ -279,7 +292,9 @@ const HbStatisticsVerification = () => {
|
||||
const payload: AnalysisRequestPayload = {
|
||||
dataset:
|
||||
verifyType === "ALL"
|
||||
? "ALL"
|
||||
? allVerificationTargetIds.length > 0
|
||||
? allVerificationTargetIds.join(",")
|
||||
: undefined
|
||||
: selectedTargets.length > 0
|
||||
? selectedTargets.join(",")
|
||||
: undefined,
|
||||
@@ -385,7 +400,7 @@ const HbStatisticsVerification = () => {
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center gap-4">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
color="green"
|
||||
className="h-[3.6rem] w-[120px]"
|
||||
@@ -551,8 +566,8 @@ const HbStatisticsVerification = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-10 px-4 pb-8">
|
||||
<h3 className="mb-4 px-2 text-[1.6rem] font-semibold text-title">
|
||||
<div className="mt-10 px-2 pb-8">
|
||||
<h3 className="mb-4 text-[1.6rem] font-semibold text-title">
|
||||
검증 이력
|
||||
</h3>
|
||||
<div className="card card-border !m-0 !mb-2 flex justify-between">
|
||||
@@ -625,57 +640,58 @@ const HbStatisticsVerification = () => {
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead
|
||||
colSpan={4}
|
||||
colSpan={5}
|
||||
className="bg-muted text-left text-[1.3rem] font-semibold"
|
||||
>
|
||||
{item.vrfcTrgtNm}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="bg-muted font-semibold">
|
||||
시도
|
||||
</TableHead>
|
||||
<TableHead className="bg-muted font-semibold">
|
||||
시군구
|
||||
</TableHead>
|
||||
<TableHead className="bg-muted font-semibold">
|
||||
행정구역
|
||||
</TableHead>
|
||||
<TableHead className="bg-muted font-semibold">
|
||||
시설명
|
||||
</TableHead>
|
||||
<TableHead className="bg-muted text-center font-semibold">
|
||||
입력값
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({
|
||||
length: Math.ceil(
|
||||
item.outlierDataList
|
||||
.length / 4,
|
||||
{item.outlierDataList.map(
|
||||
(data) => (
|
||||
<TableRow key={data.rsltSn}>
|
||||
<TableCell className="text-center">
|
||||
{data.sido ?? "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{data.gugun ?? "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{data.adstDong ??
|
||||
"-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{/* 시설명: DTO에 해당 필드 없음 */}
|
||||
-
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{data.cryrVl != null
|
||||
? String(
|
||||
data.cryrVl,
|
||||
)
|
||||
: "-"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
),
|
||||
}).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>
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user