하수관망도 시도 단위 처리시설 조회 지원

apps/sn/docs/작업내용/FE-MAP-하수처리시설검색동기화/001-fe-FE-MAP-하수처리시설검색동기화-구현기록.md

@@ -26,3 +26,12 @@
 - API 계약과 DB 스키마 변경은 없다.
 - DB 기준데이터 레이어명 변경 DML은 실제 대상 DB 반영 후 지도 레이어 트리에서 확인해야 한다.
 - 레이어 메타데이터의 `flterSql/filtrSql` 또는 레이어명이 변경되면 500톤 기준 판별 조건을 함께 확인해야 한다.
+
+## 6. 2026-07-14 시도 단위 처리시설 목록 조회 보완
+- 작업 모드: `quick_vibe`
+- 요구사항: 하수관망도 상단 검색바에서 시군구를 선택하지 않아도 선택한 시도의 하수처리시설 목록을 조회한다.
+- 원인: 시설 목록 조회 조건과 WFS CQL이 시도·시군구 동시 선택을 전제로 해, 시도만 선택하면 목록을 초기화했다.
+- 변경: 시도명은 필수 조건으로 유지하고 시군구명은 선택된 경우에만 CQL에 추가하며, 기존 500톤 이상·미만 필터는 그대로 조합한다.
+- 검증: `pnpm --filter @common/business_components run build` 통과
+- 문서 판단: API·DB·공유 범위·공통 결정 변경이 없어 공통 문서는 갱신하지 않았다.
+- 남은 검증: 실제 하수관망도에서 시도만 선택했을 때 시설 목록과 시설 선택 후 지도 포커스를 수동 확인한다.

packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx

@@ -129,7 +129,8 @@ export const ProcSearchBar = ({
     setSigunData(list);
   };
 
-  const fetchFacilitiesBySggNm = useCallback(
+  // 선택한 시도를 기본 조회 범위로 사용하고, 시군구 선택 시 조회 범위를 추가로 좁힌다.
+  const fetchFacilitiesByRegion = useCallback(
     async (
       sggCd: string,
       sggNm: string,
@@ -160,10 +161,8 @@ export const ProcSearchBar = ({
 
       if (type === "tb_il_swage_prcs_fclt") {
         const escapeCqlText = (value: string) => value.replace(/'/g, "''");
-        const cqlFilters = [
+        const cqlFilters = [`ctpv_nm='${escapeCqlText(sidoNm)}'`];
-          `ctpv_nm='${escapeCqlText(sidoNm)}'`,
+        if (sggNm) cqlFilters.push(`sgg_nm='${escapeCqlText(sggNm)}'`);
-          `sgg_nm='${escapeCqlText(sggNm)}'`,
-        ];
         if (activeFacilityFilter?.cqlFilter) cqlFilters.push(activeFacilityFilter.cqlFilter);
         const params = new URLSearchParams({
           typeName: `hasudo:${type}`,
@@ -234,14 +233,14 @@ export const ProcSearchBar = ({
     const sggNm = sigunData.find((item) => item.val === sigunValue)?.text || "";
     const sggCd = sigunData.find((item) => item.val === sigunValue)?.val || "";
 
-    if (sggNm && sidoNm) {
+    if (sidoValue !== "0" && sidoNm) {
-      fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, facilityType);
+      fetchFacilitiesByRegion(sggCd, sggNm, sidoNm, facilityType);
       return;
     }
 
     setFacilityData(defaultFacilityData());
     setFacilityValue("0");
-  }, [defaultFacilityData, facilityLayerFilter?.cqlFilter, facilityLayerFilter?.disabled, facilityType, fetchFacilitiesBySggNm, sidoData, sidoValue, sigunData, sigunValue]);
+  }, [defaultFacilityData, facilityLayerFilter?.cqlFilter, facilityLayerFilter?.disabled, facilityType, fetchFacilitiesByRegion, sidoData, sidoValue, sigunData, sigunValue]);
 
   useEffect(() => {
     if (!pendingExternalFacilityName) return;
@@ -285,7 +284,7 @@ export const ProcSearchBar = ({
         const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
         const sggNm = sigunData.find((item) => item.val === val)?.text || "";
         const sggCd = sigunData.find((item) => item.val === val)?.val || "";
-        if (sggNm && sidoNm) fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, facilityType);
+        if (sidoNm) fetchFacilitiesByRegion(sggCd, sggNm, sidoNm, facilityType);
         return;
       }
 
@@ -296,7 +295,7 @@ export const ProcSearchBar = ({
         const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
         const sggNm = sigunData.find((item) => item.val === sigunValue)?.text || "";
         const sggCd = sigunData.find((item) => item.val === sigunValue)?.val || "";
-        if (sggNm && sidoNm) fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, val);
+        if (sidoNm) fetchFacilitiesByRegion(sggCd, sggNm, sidoNm, val);
         return;
       }
 
@@ -310,7 +309,7 @@ export const ProcSearchBar = ({
         }
       }
     },
-    [defaultFacilityData, fetchFacilitiesBySggNm, initializeSigunData, sigunData, sigunValue, sidoData, sidoValue, facilityType],
+    [defaultFacilityData, fetchFacilitiesByRegion, initializeSigunData, sigunData, sigunValue, sidoData, sidoValue, facilityType],
   );
 
   const handleSearch = useCallback(() => {