diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx index abeec2245..ba07c98db 100644 --- a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx +++ b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx @@ -14,7 +14,6 @@ import useStore from "@/store/useStore"; import LoadingOverlay from "@/components/ui/LoadingBar"; import { AGED_PIPE_DEFAULT_FILTERS, - AGED_PIPE_LAYER_TYPE, AGED_PIPE_LIST_HEADLIST, AGED_PIPE_PAGE_SIZE, buildAgedPipeCqlFilters, @@ -27,6 +26,7 @@ import { type AgedPipeManagementAgency, } from "./agedPipeUtils"; import { downloadAgedPipeExcel } from "./agedPipeExport"; +import { fetchAgedPipeLayer } from "./agedPipeLayer"; import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable"; import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel"; @@ -100,12 +100,14 @@ export default function AgedPipePopupPage() { const fetchRows = useCallback( async (page: number, nextFilters: AgedPipeFilters, size: number) => { const normalized = normalizeAgedPipeFilters(nextFilters); + // 독립 팝업에서도 현재 DB의 원천 레이어와 필터 템플릿을 사용한다. + const layer = await fetchAgedPipeLayer(); const queryParams = new URLSearchParams({ - lyrTypeNm: AGED_PIPE_LAYER_TYPE, + lyrTypeNm: layer.lyrTyNm, page: String(page - 1), size: String(size), }); - const cqlFilters = buildAgedPipeCqlFilters(normalized); + const cqlFilters = buildAgedPipeCqlFilters(normalized, layer.flterSql); if (cqlFilters.length > 0) { queryParams.append("cqlFiter", cqlFilters.join(" and ")); } @@ -139,13 +141,14 @@ export default function AgedPipePopupPage() { setAppliedFilters(normalizeAgedPipeFilters(nextFilters)); } catch (error) { console.error("노후관로 목록 조회 중 오류:", error); + alert(error instanceof Error ? error.message : "노후관로 목록 조회 중 오류가 발생했습니다."); setRows([]); setTotal(0); } finally { setIsLoading(false); } }, - [fetchRows, filters], + [alert, fetchRows, filters], ); useEffect(() => { diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeLayer.ts b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeLayer.ts new file mode 100644 index 000000000..04b228ccd --- /dev/null +++ b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeLayer.ts @@ -0,0 +1,48 @@ +/** 노후관로의 지도와 목록이 사용하는 DB 레이어 설정 계약이다. */ +import { getRawJson } from "@/components/lib/api"; +import { buildAgedPipeCqlFilters, isAgedPipeLayerNode, type AgedPipeFilters } from "./agedPipeUtils"; + +/** DB 응답을 그대로 보존하며 최초 표출 전에 필터만 해석한다. */ +export const prepareAgedPipeLayerRows = (rows: any[], filters: AgedPipeFilters): any[] => + rows.map((row) => { + const next = { ...row }; + if (isAgedPipeLayerNode(row)) { + next.agedPipeFilterTemplate = row.flterSql; + try { + validateAgedPipeLayer(row); + next.flterSql = buildAgedPipeCqlFilters(filters, row.flterSql).join(" AND "); + } catch (error) { + // 노후관로 DB 미전환이 다른 시설물 레이어까지 중단시키지 않도록 이 행만 차단한다. + next.agedPipeConfigError = error instanceof Error ? error.message : "노후관로 레이어 설정 오류"; + next.actlLyrYn = "N"; + next.flterSql = "EXCLUDE"; + } + } + if (Array.isArray(row.children)) next.children = prepareAgedPipeLayerRows(row.children, filters); + return next; + }); + +/** 환경마다 달라질 수 있는 일련번호 대신 DB 업무명을 통해 설정 행을 찾는다. */ +export const findAgedPipeLayer = (rows: any[]): any | undefined => { + for (const row of rows) { + if (isAgedPipeLayerNode(row)) return row; + const child = Array.isArray(row.children) ? findAgedPipeLayer(row.children) : undefined; + if (child) return child; + } +}; + +/** 예전 제어용 행을 실제 WFS 레이어처럼 요청하지 않도록 전환 상태를 확인한다. */ +export const validateAgedPipeLayer = (row: any) => { + if (row?.agedPipeConfigError) throw new Error(row.agedPipeConfigError); + if (!row || row.actlLyrYn !== "Y" || row.srvcNm !== "wfs" || !row.lyrTyNm || row.lyrTyNm === "tb_old_pipe") { + throw new Error("노후관로 DB 레이어 설정을 실제 WFS 레이어와 sql_filt 템플릿으로 갱신해 주세요."); + } +}; + +/** 독립 목록 팝업도 부모창의 하드코딩 없이 동일 설정 API를 조회한다. */ +export const fetchAgedPipeLayer = async () => { + const rows = await getRawJson("/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK"); + const row = findAgedPipeLayer(Array.isArray(rows) ? rows : []); + validateAgedPipeLayer(row); + return row; +}; diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts index 8fb0f963a..f35e868ea 100644 --- a/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts +++ b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts @@ -229,13 +229,18 @@ export const getElapsedYearsDisplayText = (value: unknown) => { return elapsedYears == null ? "확인불가" : `${elapsedYears}년`; }; -export const buildAgedPipeCqlFilters = (filters: AgedPipeFilters) => { +/** DB의 SQL 필터 템플릿을 해석한다. 누락/미지원 토큰은 전체 관로 조회로 대체하지 않는다. */ +export const buildAgedPipeCqlFilters = (filters: AgedPipeFilters, filterTemplate: string) => { const normalized = normalizeAgedPipeFilters(filters); - const cqlFilters = [ - "instl_ymd IS NOT NULL", - ...AGED_PIPE_INVALID_INSTALL_YMD_PREFIXES.map((prefix) => `instl_ymd NOT LIKE '${prefix}%'`), - `instl_ymd <= '${getCutoffYmd(normalized.elapsedYears)}'`, - ]; + const template = String(filterTemplate ?? "").trim(); + if (!template.includes("${cutoffYmd}")) { + throw new Error("노후관로 DB sql_filt에 ${cutoffYmd} 조건을 등록해 주세요."); + } + const filter = template.split("${cutoffYmd}").join(getCutoffYmd(normalized.elapsedYears)); + if (/\$\{[^}]*\}/.test(filter)) { + throw new Error("노후관로 DB sql_filt에 지원하지 않는 치환값이 있습니다."); + } + const cqlFilters = [`(${filter})`]; if (normalized.sggCd !== "0") { cqlFilters.push(`pbadms_emd_cd LIKE '${normalized.sggCd}%'`); diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx index 28d5fec31..2eb372f24 100644 --- a/apps/sn/app/(map-layout)/map/page.tsx +++ b/apps/sn/app/(map-layout)/map/page.tsx @@ -110,7 +110,6 @@ import { import { AGED_PIPE_DEFAULT_FILTERS, AGED_PIPE_GUIDE_MIN_ZOOM, - AGED_PIPE_MIN_ZOOM, AGED_PIPE_LAYER_TYPE, AGED_PIPE_PAGE_SIZE, type AgedPipeFilters, @@ -121,6 +120,7 @@ import { toDisplayPipeRow, validateElapsedYears, } from "./components/agedPipe/agedPipeUtils"; +import { findAgedPipeLayer, prepareAgedPipeLayerRows, validateAgedPipeLayer } from "./components/agedPipe/agedPipeLayer"; import { downloadAgedPipeExcel } from "./components/agedPipe/agedPipeExport"; import { useInftwtResultMap } from "./components/inftwtResult/useInftwtResultMap"; import { useRdiiResultMap } from "./components/rdiiResult/useRdiiResultMap"; @@ -218,10 +218,6 @@ const AnalysisPopupMenu = dynamic( { ssr: false }, ); -const AGED_PIPE_CONTROL_NODE_ID = "SN_AGED_PIPE"; -const AGED_PIPE_HIGHLIGHT_LAYER_ID = "SN_AGED_PIPE_HIGHLIGHT"; -// 노후관로 지도 강조선과 시설물 트리의 선형 범례가 동일하게 사용하는 빨간색이다. -const AGED_PIPE_HIGHLIGHT_COLOR = "rgba(235, 40, 40, 0.82)"; const FLDNG_HSTRY_WFS_LAYER_ID = "SN_FLDNG_HSTRY_WFS"; // 심선은 동일 레이어 유형에 6개 깊이 등급 설정이 있어 prefix 뒤에 lyrSn을 붙여 각각 생성한다. const FLDNG_DEPTH_WFS_LAYER_ID_PREFIX = "SN_FLDNG_DEPTH_WFS"; @@ -979,7 +975,7 @@ const extractCheckedPipeUsageStyles = ( checkedNodesData.forEach((node) => { const data = node?.data ?? node; - if (!data || isFlowDirectionLayerInfo(data)) return; + if (!data || isFlowDirectionLayerInfo(data) || isAgedPipeLayerNode(data)) return; if (getLayerTypeName(data) !== FLOW_DIRECTION_PIPE_LAYER_TYPE) return; if (!isLayerVisibleAtZoom(data, zoom)) return; @@ -1000,61 +996,7 @@ const extractCheckedPipeUsageStyles = ( return usageStyleMap; }; -const appendAgedPipeControlNode = (data: any[]) => { - if (!Array.isArray(data)) return data; - const isAgedPipeControlNode = (item: any) => - String(item.lyrSn ?? item.id) === AGED_PIPE_CONTROL_NODE_ID || - item.lyrNm === "노후관로"; - if (data.some(isAgedPipeControlNode)) { - return data.map((item) => - isAgedPipeControlNode(item) - ? { - ...item, - gobjTy: "line", - iconNm: null, - lnColor: AGED_PIPE_HIGHLIGHT_COLOR, - } - : item, - ); - } - - return [ - ...data, - { - lyrSn: AGED_PIPE_CONTROL_NODE_ID, - id: AGED_PIPE_CONTROL_NODE_ID, - lyrNm: "노후관로", - upperLyrSn: null, - upId: null, - sortOrdr: "4", - drawOrdr: null, - flterSql: null, - gobjTy: "line", - lyrTyNm: "tb_old_pipe", - useYn: "Y", - minViewSize: null, - iconNm: null, - iconSize: null, - lblAtrbNm: null, - fontNm: null, - fontIntnColor: null, - fontExtnColor: null, - fontExtnWdth: null, - lnWdth: null, - lnColor: AGED_PIPE_HIGHLIGHT_COLOR, - polgnColor: null, - initEprssYn: "Y", - clickPsblYn: "N", - exprsYn: "Y", - cmncNm: "all", - srvcNm: "wfs", - actlLyrYn: "N", - clckZoom: null, - children: null, - }, - ]; -}; const normalizeTreeRowSpacing = (data: any[]) => { if (!Array.isArray(data)) return data; @@ -2310,14 +2252,16 @@ const Map = () => { const data = await getRawJson( "/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK", ); + // DB 필터 치환 실패는 노후관로에만 한정하고 다른 시설물 레이어는 유지한다. + const preparedData = prepareAgedPipeLayerRows(data, appliedAgedPipeFilters); + const agedPipeConfigError = findAgedPipeLayer(preparedData)?.agedPipeConfigError; + if (agedPipeConfigError) alert(agedPipeConfigError); setTreeData( appendExmnResultControlNodes( - appendAgedPipeControlNode( - appendSinkholeControlNode( - normalizeTreeRowSpacing( - normalizeRainObservationLayerInteraction( - normalizeFlowDirectionLayerInfos(data), - ), + appendSinkholeControlNode( + normalizeTreeRowSpacing( + normalizeRainObservationLayerInteraction( + normalizeFlowDirectionLayerInfos(preparedData), ), ), ), @@ -3204,14 +3148,16 @@ const Map = () => { const fetchAgedPipeRows = useCallback( async (page: number, filters: AgedPipeFilters, size: number) => { const normalized = normalizeAgedPipeFilters(filters); + const layer = findAgedPipeLayer(treeData); + validateAgedPipeLayer(layer); const queryParams = new URLSearchParams({ - lyrTypeNm: AGED_PIPE_LAYER_TYPE, + lyrTypeNm: layer.lyrTyNm, page: String(page - 1), size: String(size), sort: "string", }); - const cqlFilters = buildAgedPipeCqlFilters(normalized); + const cqlFilters = buildAgedPipeCqlFilters(normalized, layer.agedPipeFilterTemplate ?? layer.flterSql); if (cqlFilters.length > 0) { queryParams.append("cqlFiter", cqlFilters.join(" and ")); } @@ -3226,7 +3172,7 @@ const Map = () => { total: Number(response?.count ?? 0), }; }, - [ctpv, sgg], + [ctpv, sgg, treeData], ); const loadAgedPipeList = useCallback( @@ -5176,54 +5122,39 @@ const Map = () => { restoreActiveLayerSettingScroll, ]); + // DB 레이어 ID를 유지하고 조건 변경 시 해당 레이어만 갱신한다. useEffect(() => { if (!mapReady || !gisMaps.current) return; - + const row = findAgedPipeLayer(treeData); + if (!row) return; const core = GisApp.Module.core as any; - core?.deleteLayer?.(AGED_PIPE_HIGHLIGHT_LAYER_ID); - - if (!isAgedPipeChecked || !isAgedPipeSettingEnabled) return; - - const baseLayerCode = Object.values(GisApp.layerCode ?? {}).find( - (item: any) => - item?.lyrTyNm === AGED_PIPE_LAYER_TYPE && item?.actlLyrYn === "Y", - ) as any; - - if (!baseLayerCode) return; - - const layerCode = { - ...baseLayerCode, - id: AGED_PIPE_HIGHLIGHT_LAYER_ID, - lyrSn: AGED_PIPE_HIGHLIGHT_LAYER_ID, - lyrNm: "노후관로", - lyrTyNm: AGED_PIPE_LAYER_TYPE, - gobjTy: "line", - actlLyrYn: "Y", - exprsYn: "Y", - clickPsblYn: "Y", - cmncNm: "bbox", - srvcNm: "wfs", - flterSql: buildAgedPipeCqlFilters(appliedAgedPipeFilters).join(" and "), - lnWdth: "4", - lnColor: AGED_PIPE_HIGHLIGHT_COLOR, - drawOrdr: "9999", - minViewSize: String(AGED_PIPE_MIN_ZOOM), - }; - - const layer = core?.addWfsLayer?.(layerCode); - layer?.set?.("id", AGED_PIPE_HIGHLIGHT_LAYER_ID); - layer?.set?.("lyrNm", "노후관로"); - layer?.set?.("lyrTyNm", AGED_PIPE_LAYER_TYPE); - - return () => { - core?.deleteLayer?.(AGED_PIPE_HIGHLIGHT_LAYER_ID); - }; - }, [ - appliedAgedPipeFilters, - isAgedPipeChecked, - isAgedPipeSettingEnabled, - mapReady, - ]); + const id = String(row.lyrSn); + const layerCode = (GisApp.layerCode as any)?.[id]; + if (!layerCode) return; + try { + validateAgedPipeLayer(row); + const filter = buildAgedPipeCqlFilters( + appliedAgedPipeFilters, row.agedPipeFilterTemplate ?? row.flterSql, + ).join(" AND "); + layerCode.flterSql = filter; + const visible = isAgedPipeChecked && isAgedPipeSettingEnabled; + let layer = core?.getLayerById?.(id); + if (!visible) { + layer?.setVisible?.(false); + return; + } + // 숨긴 동안 바뀐 조건도 다시 켤 때 반영하도록 실제 레이어의 생성 당시 필터와 비교한다. + if (!layer || layer.get?.("flterSql") !== filter) { + layer = core?.addWfsLayer?.(layerCode); + core?.setSelectInteraction?.(); + } + layer?.setVisible?.(true); + } catch (error) { + core?.getLayerById?.(id)?.setVisible?.(false); + console.error("노후관로 DB 레이어 설정 오류:", error); + } + }, [appliedAgedPipeFilters, isAgedPipeChecked, isAgedPipeSettingEnabled, + mapReady, treeData, checkedLayerLegendVersion]); useEffect(() => { if (!mapReady || !gisMaps.current) return; diff --git a/apps/sn/docs/작업검증/SFR-011-노후관로관리/001-qa-SFR-011-노후관로관리-통합검증결과.md b/apps/sn/docs/작업검증/SFR-011-노후관로관리/001-qa-SFR-011-노후관로관리-통합검증결과.md index 07a93843e..0e7b939d9 100644 --- a/apps/sn/docs/작업검증/SFR-011-노후관로관리/001-qa-SFR-011-노후관로관리-통합검증결과.md +++ b/apps/sn/docs/작업검증/SFR-011-노후관로관리/001-qa-SFR-011-노후관로관리-통합검증결과.md @@ -75,3 +75,11 @@ | 서버 노드 호환 | 정적 통과 | 기존 노드와 프론트 가상 노드를 동일 기준으로 정규화 | | 변경 공백 검사 | 통과 | 프론트 저장소 `git diff --check` | | 브라우저 육안 확인 | 대기 | 지도 새로고침 후 체크박스 옆 빨간 선형 범례 확인 필요 | + +## 2026-10-01 DB 레이어 설정 이관 검증 +- TypeScript 검사 통과: node node_modules/typescript/bin/tsc --noEmit --incremental false --pretty false. 의존성 읽기 권한으로 상승 실행했다. +- 메모리 내 자동 검증 9건 통과: DB ID/스타일/원본 템플릿 보존, 가상 행 미생성, 경과연수 변경, 시군구 우선, 시도 조건, 빈/미지원 템플릿 거부, 기존 제어 행 오류 격리, 중첩 행, SQL 템플릿 일치. +- git diff --check 통과. 테스트 파일이나 원시 결과 파일은 생성하지 않았다. +- 실행 중 3002 브라우저에서 DB 미전환 안내와 기존 시설물 트리/노후관로 항목 표시를 확인했다. DB 응답이 실제 WFS 설정 요건을 충족하지 않아 정상 관로 표출·목록·Excel 실데이터 회귀는 미완료이다. +- 사용자 서버 3002/8883은 재시작하거나 종료하지 않았다. 전체 빌드는 실행하지 않았다. +- 후속 검증: 기존 139번에 UPDATE 적용 후 새로고침, 체크/해제, 30년→40년, 설정 숨김 중 변경 후 재표시, 지도·목록·Excel 기준 일치 확인. diff --git a/apps/sn/docs/작업내용/SFR-011-노후관로관리/001-fe-SFR-011-노후관로관리-통합구현기록.md b/apps/sn/docs/작업내용/SFR-011-노후관로관리/001-fe-SFR-011-노후관로관리-통합구현기록.md index bde98f381..762fb9422 100644 --- a/apps/sn/docs/작업내용/SFR-011-노후관로관리/001-fe-SFR-011-노후관로관리-통합구현기록.md +++ b/apps/sn/docs/작업내용/SFR-011-노후관로관리/001-fe-SFR-011-노후관로관리-통합구현기록.md @@ -115,3 +115,12 @@ - 실제 로그인 지도에서 노후관로 범례와 지도 강조선의 색상 일치 여부를 육안 확인해야 한다. - 사용자 스크린샷 기준의 정확한 위치 체감은 실제 브라우저 수동 확인이 필요하다. - 최소화 후 다시 열 때 사용하는 메인 화면의 미니 카드 위치는 이번 라운드 범위에 포함하지 않았다. + +## 2026-10-01 DB 레이어 설정 이관 +- 변경 파일: map/page.tsx, agedPipe/agedPipeUtils.ts, agedPipe/AgedPipePopupPage.tsx, 신규 agedPipe/agedPipeLayer.ts. +- appendAgedPipeControlNode, SN_AGED_PIPE 및 SN_AGED_PIPE_HIGHLIGHT 생성, 스타일 상수 덮어쓰기를 제거했다. +- 기존 설정 API 응답의 레이어 ID·원천·스타일을 사용하고 최초 요청 전에 sql_filt의 ${cutoffYmd}를 치환한다. 조건 변경 시 같은 ID의 레이어만 갱신한다. +- 숨긴 상태의 조건 변경도 재표시할 때 적용한다. 노후관로를 유하방향 관종 스타일 수집에서 제외한다. +- DB 미전환/필터 오류는 해당 행만 요청 차단하고 안내하며 다른 시설물 트리는 유지한다. +- 독립 목록 팝업도 레이어 설정 API를 사용한다. Excel API와 위치 이동 동작은 유지한다. 백엔드/공통 GIS 코드는 변경하지 않았다. +- DB작업.sql에 INSERT 및 기존 139번용 UPDATE를 작성했다. 실제 DB 변경은 미실행이다.