[st] feat: 시계열 검토 이력 > 지자체 진입 시 시도/시군구 자동 선택

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";
@@ -97,6 +98,21 @@ function getVerificationYearOptions(): string[] {
     );
 }
 
+function applySingleOptionRegionDefault<T>(
+    list: T[] | undefined,
+    setValue: Dispatch<SetStateAction<string>>,
+    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 =
@@ -106,7 +122,8 @@ const ImrVerificationHistory = () => {
 
     // Area A Search States
     const [searchSido, setSearchSido] = useState<string>(REGION_ALL_VALUE);
-    const [searchSigungu, setSearchSigungu] = useState<string>(REGION_ALL_VALUE);
+    const [searchSigungu, setSearchSigungu] =
+        useState<string>(REGION_ALL_VALUE);
     const [searchStatsYr, setSearchStatsYr] = useState<string>(defaultYear);
     const [searchStatsCd, setSearchStatsCd] = useState<string>("");
     const [dateRange, setDateRange] = useState<DateRangeValue | undefined>({
@@ -151,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 ?? ""),
@@ -272,6 +311,7 @@ const ImrVerificationHistory = () => {
     };
 
     const handleReset = () => {
+        allowRegionAutoDefaultRef.current = false;
         setSearchSido(REGION_ALL_VALUE);
         setSearchSigungu(REGION_ALL_VALUE);
         setSearchStatsCd("");