diff --git a/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx b/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx index 304fea591..a160cb203 100644 --- a/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx +++ b/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx @@ -1,6 +1,7 @@ "use client"; -import { useEffect, useMemo, useState } from "react"; +import type { Dispatch, SetStateAction } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { Line } from "react-chartjs-2"; import { keepPreviousData, useQuery } from "@tanstack/react-query"; @@ -72,6 +73,7 @@ type DateRangeValue = { }; const EMPTY_DATA: never[] = []; +const REGION_ALL_VALUE = "ALL"; function getImrDetailGridColumnInfo(statsCd: string): ColumnInfo { const visible = @@ -96,6 +98,21 @@ function getVerificationYearOptions(): string[] { ); } +function applySingleOptionRegionDefault( + list: T[] | undefined, + setValue: Dispatch>, + resolveValue: (item: T) => string, +) { + if (!list || list.length !== 1) return; + + const onlyItem = list[0]; + if (!onlyItem) return; + + setValue((prev) => + prev === REGION_ALL_VALUE ? resolveValue(onlyItem) : prev, + ); +} + const ImrVerificationHistory = () => { const yearOptions = useMemo(() => getVerificationYearOptions(), []); const defaultYear: string = @@ -104,8 +121,9 @@ const ImrVerificationHistory = () => { : ""; // Area A Search States - const [searchSido, setSearchSido] = useState(""); - const [searchSigungu, setSearchSigungu] = useState(""); + const [searchSido, setSearchSido] = useState(REGION_ALL_VALUE); + const [searchSigungu, setSearchSigungu] = + useState(REGION_ALL_VALUE); const [searchStatsYr, setSearchStatsYr] = useState(defaultYear); const [searchStatsCd, setSearchStatsCd] = useState(""); const [dateRange, setDateRange] = useState({ @@ -150,6 +168,28 @@ const ImrVerificationHistory = () => { gugunSkipYn: doList.includes(selectedSidoBsnmCd) ? "N" : "Y", }); const sigunguOptions = sigunguData ?? []; + const allowRegionAutoDefaultRef = useRef(true); + + useEffect(() => { + if (!allowRegionAutoDefaultRef.current) return; + + applySingleOptionRegionDefault( + sidoData?.sidoList, + setSearchSido, + (item) => item.sido, + ); + }, [sidoData?.sidoList]); + + useEffect(() => { + if (!allowRegionAutoDefaultRef.current) return; + if (searchSido === REGION_ALL_VALUE) return; + + applySingleOptionRegionDefault( + sigunguData, + setSearchSigungu, + (item) => item.gugun, + ); + }, [sigunguData, searchSido]); const imrDetailColumnInfo = useMemo( () => getImrDetailGridColumnInfo(selectedHistory?.statsCd ?? ""), @@ -248,12 +288,12 @@ const ImrVerificationHistory = () => { vrfcMthdCd: "IMR", sort: "anlsSn,desc", }; - if (searchSido !== "") { + if (searchSido !== "" && searchSido !== REGION_ALL_VALUE) { const selectedSggBsnmCd = sigunguOptions.find( (item) => item.gugun === searchSigungu, )?.bsnmCd; params.sewerBzmnCd = - searchSigungu !== "" + searchSigungu !== "" && searchSigungu !== REGION_ALL_VALUE ? (selectedSggBsnmCd ?? "") : selectedSidoBsnmCd; } @@ -271,8 +311,9 @@ const ImrVerificationHistory = () => { }; const handleReset = () => { - setSearchSido(""); - setSearchSigungu(""); + allowRegionAutoDefaultRef.current = false; + setSearchSido(REGION_ALL_VALUE); + setSearchSigungu(REGION_ALL_VALUE); setSearchStatsCd(""); const defaultRange = { from: dayjs().subtract(1, "month").toDate(), @@ -410,13 +451,16 @@ const ImrVerificationHistory = () => { value={searchSido} onValueChange={(val) => { setSearchSido(val); - setSearchSigungu(""); + setSearchSigungu(REGION_ALL_VALUE); }} > - + + + 전체 + {sidoOptions.map((opt) => ( { onChange( value, diff --git a/apps/st/src/components/statistics/verification/detail/HbVerificationDetail.tsx b/apps/st/src/components/statistics/verification/detail/HbVerificationDetail.tsx index b8e5a3cd4..ed17b417b 100644 --- a/apps/st/src/components/statistics/verification/detail/HbVerificationDetail.tsx +++ b/apps/st/src/components/statistics/verification/detail/HbVerificationDetail.tsx @@ -40,8 +40,8 @@ const HbVerificationDetail: React.FC = ({ ); const [checkedSns, setCheckedSns] = useState([]); const [appliedFilter, setAppliedFilter] = useState({ - sido: "", - gugun: "", + sido: "ALL", + gugun: "ALL", status: "", }); const [selectedRowId, setSelectedRowId] = useState(null); diff --git a/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx b/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx index eeea43b3a..8eee4ec1a 100644 --- a/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx +++ b/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx @@ -26,6 +26,7 @@ import type { AppliedFilter } from "./HbVerificationDetail"; import DataGrid from "@/components/module/DataGrid"; const EMPTY_ADST_LIST: AdstZoneResponseDto[] = []; +const REGION_ALL_VALUE = "ALL"; interface RegionalGridProps { anlsSn: number; @@ -53,7 +54,10 @@ const RegionalGrid: React.FC = ({ >([]); const { data: sidoData } = useStAnlsSidoCombo(); - const { data: gugunData } = useStAnlsSigunguCombo(appliedFilter.sido ?? ""); + const sidoCd = appliedFilter.sido ?? ""; + const { data: gugunData } = useStAnlsSigunguCombo( + sidoCd !== REGION_ALL_VALUE ? sidoCd : "", + ); const sidoOptions = sidoData ?? EMPTY_ADST_LIST; const gugunOptions = gugunData ?? EMPTY_ADST_LIST; @@ -66,14 +70,14 @@ const RegionalGrid: React.FC = ({ let data = (resultData?.content ?? []) as StAnlsRsltResponse[]; { const sidoCd = appliedFilter.sido; - if (sidoCd) { + if (sidoCd && sidoCd !== REGION_ALL_VALUE) { data = data.filter((item) => item.admdstCd.startsWith(sidoCd.slice(0, 2)), ); } const gugunCd = appliedFilter.gugun; - if (gugunCd) { + if (gugunCd && gugunCd !== REGION_ALL_VALUE) { data = data.filter((item) => item.admdstCd === gugunCd); } @@ -107,13 +111,17 @@ const RegionalGrid: React.FC = ({ }, [resultData, appliedFilter]); const handleSidoChange = (val: string) => { - onFilterChange({ ...appliedFilter, sido: val, gugun: "" }); + onFilterChange({ + ...appliedFilter, + sido: val, + gugun: REGION_ALL_VALUE, + }); }; const handleReset = () => { onFilterChange({ - sido: "", - gugun: "", + sido: REGION_ALL_VALUE, + gugun: REGION_ALL_VALUE, status: "", }); }; @@ -156,13 +164,16 @@ const RegionalGrid: React.FC = ({