diff --git a/apps/st/src/app/styles/components.css b/apps/st/src/app/styles/components.css index 5b9742c0f..35a341131 100644 --- a/apps/st/src/app/styles/components.css +++ b/apps/st/src/app/styles/components.css @@ -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; } diff --git a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx index e89bc81e8..3a77801d3 100644 --- a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx +++ b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx @@ -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 { @@ -49,7 +49,9 @@ import type { } from "@/entities/statistics/model/analysis-history-interface"; import { ENDPOINT } from "@/shared/config"; import { useAlertStore } from "@/shared/lib"; -import { CodeApi } from "@/entities/code"; +import { verificationTargetManagementApi } from "@/entities/statistics/api/verification-target-management-service"; +import type { VerificationTargetCodeResponse } from "@/entities/statistics/model/verification-target-management-interface"; +import { CodeSelect } from "@/entities/code"; type DateRangeValue = { from?: Date; @@ -78,7 +80,7 @@ function getDefaultHistoryDateRange(): DateRangeValue { } function getVerificationYearOptions(): string[] { - const currentYear = new Date().getFullYear(); + const currentYear = dayjs().year(); const startYear = 2017; const endYear = currentYear - 1; if (endYear < startYear) return []; @@ -116,6 +118,7 @@ const HbStatisticsVerification = () => { open: false, anlsSn: null, }); + const [selectedStatsCd, setSelectedStatsCd] = useState(""); const defaultHistoryDateRange = useMemo( () => getDefaultHistoryDateRange(), @@ -133,14 +136,35 @@ const HbStatisticsVerification = () => { pageSize: 10, }); - const { data: statsItemList } = useQuery({ - queryKey: [ENDPOINT.CMS_SERVICE.CODE, "STITEM"], - queryFn: async () => { - const response = await CodeApi.getCode("STITEM"); - return response; - }, + const { data: verificationTargetCodes } = useQuery< + VerificationTargetCodeResponse[] + >({ + queryKey: [ENDPOINT.STATVERIFY_SERVICE.VRFCTGT_MNG, "codes"], + queryFn: () => + verificationTargetManagementApi.getVerificationTargetCodes(), }); + const filteredVerificationTargetCodes = useMemo(() => { + return verificationTargetCodes?.filter((item) => + selectedStatsCd + ? item.vrfcTrgtSn.startsWith(selectedStatsCd) + : true, + ); + }, [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, @@ -268,7 +292,9 @@ const HbStatisticsVerification = () => { const payload: AnalysisRequestPayload = { dataset: verifyType === "ALL" - ? "ALL" + ? allVerificationTargetIds.length > 0 + ? allVerificationTargetIds.join(",") + : undefined : selectedTargets.length > 0 ? selectedTargets.join(",") : undefined, @@ -329,28 +355,52 @@ const HbStatisticsVerification = () => {
{/* 검증 종류 선택 */}
-
- - 검증 방식 - - - setVerifyType(value as VerifyType) - } - className="flex items-center gap-4" - > - - - +
+
+ + +
+
+ + + setVerifyType(value as VerifyType) + } + className="flex items-center gap-4" + > + + + +
-
+
+
+
{verifyType === "SELECT" && - statsItemList && - statsItemList.length > 0 && ( -
- {statsItemList.map((item) => ( + filteredVerificationTargetCodes && + filteredVerificationTargetCodes.length > 0 ? ( +
+ {filteredVerificationTargetCodes.map( + (item) => (
handleTargetToggle( - item.lwpoCd, + item.vrfcTrgtSn, ) } />
- ))} -
- )} + ), + )} +
+ ) : ( +
+

+ 검증 대상이 없습니다. +

+
+ )}
{/* //검증 대상 */} @@ -482,35 +559,6 @@ const HbStatisticsVerification = () => { className="flex-1" />
- -
- - -
{/* //검증 변수 */} @@ -518,22 +566,24 @@ const HbStatisticsVerification = () => { )} -
-

+
+

검증 이력

-
- - 검증일시 - - - setHistoryDateRange((value as any) ?? undefined) - } - className="max-w-[26rem]" - /> +
+
+ + 검증일시 + + + setHistoryDateRange((value as any) ?? undefined) + } + className="max-w-[26rem]" + /> +