diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx index bf72d6a3c..95bd5aa08 100644 --- a/apps/sn/app/(map-layout)/map/page.tsx +++ b/apps/sn/app/(map-layout)/map/page.tsx @@ -3606,6 +3606,7 @@ const Map = () => { await select.resetSelectedFeature?.(); const selectedFeatureIds = new Set(); + let floodLayerVisible = false; const selectLoadedGroupFeatures = (source: any) => { const features = source?.getFeatures?.() ?? []; features.forEach((feature: any) => { @@ -3633,11 +3634,7 @@ const Map = () => { FLOOD_DNGR_MAP_LAYER_TYPE ) return; - // 침수예측현황에서 바로 이동한 경우 레이어가 꺼져 있을 수 있으므로 자동 활성화한다. - if (layer.getVisible?.() === false) { - layer.setVisible?.(true); - layer.getSource?.()?.refresh?.(); - } + if (layer.getVisible?.() !== false) floodLayerVisible = true; const source = layer.getSource?.(); if (!source?.getFeatures) return; selectLoadedGroupFeatures(source); @@ -3645,6 +3642,13 @@ const Map = () => { selectLoadedGroupFeatures(source), ); }); + if (!floodLayerVisible) { + event.source?.postMessage?.( + { type: WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_FLOOD_LAYER_REQUIRED }, + event.origin, + ); + return; + } map.getView().fit(extent, { duration: 300, padding: [50, 50, 50, 50], diff --git a/apps/sn/docs/작업계획/SFR-011-008-침수예측/001-fe-SFR-011-008-침수예측현황-작업계획.md b/apps/sn/docs/작업계획/SFR-011-008-침수예측/001-fe-SFR-011-008-침수예측현황-작업계획.md index bb425c07b..3c30fb406 100644 --- a/apps/sn/docs/작업계획/SFR-011-008-침수예측/001-fe-SFR-011-008-침수예측현황-작업계획.md +++ b/apps/sn/docs/작업계획/SFR-011-008-침수예측/001-fe-SFR-011-008-침수예측현황-작업계획.md @@ -36,7 +36,7 @@ - 행 선택 시 기존 도시침수지도 group extent API를 호출한다. - 부모 창에 기존 `MAP_SEARCH_SHOW_FLOOD_GROUP` 메시지를 보내 범위 이동·레이어 표시를 요청한다. -- 도시침수지도에 없는 빈도는 자동 변환하지 않고 화면 안내를 표시한다. +- 도시침수지도 빈도는 30년 이하를 `030`, 100년 초과를 `100`으로 보정하고 그 외 미지원 빈도는 안내한다. ## 검증 diff --git a/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx b/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx index c9eae02cb..b7aa57bc5 100644 --- a/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx +++ b/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx @@ -216,6 +216,21 @@ export default function FldngPredcPrstPopupContent() { // 개발 StrictMode에서도 최초 목록 API를 한 번만 호출하기 위한 ref다. const didInitialLoadRef = useRef(false); + // 부모 지도에서 도시침수지도 레이어가 비활성 상태임을 알려오면 팝업에서 안내한다. + useEffect(() => { + const handleMapMessage = (event: MessageEvent) => { + if (event.origin !== window.location.origin) return; + if ( + event.data?.type === + WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_FLOOD_LAYER_REQUIRED + ) { + alert("지도의 좌측 도시침수지도를 선택하여야 지도에 보입니다."); + } + }; + window.addEventListener("message", handleMapMessage); + return () => window.removeEventListener("message", handleMapMessage); + }, [alert]); + useEffect(() => { if (!ctpv.length) void fetchCtpv(); if (!sgg.length) void fetchSgg(); @@ -348,7 +363,6 @@ export default function FldngPredcPrstPopupContent() { }, window.location.origin, ); - alert("도시침수지도를 켜고 선택한 도시침수지도의 시군구·빈도로 이동하였습니다."); window.opener.focus(); } catch (error) { console.error("침수예측현황 지도 이동 중 오류:", error); diff --git a/apps/sn/src/features/windowPopup/model/types.ts b/apps/sn/src/features/windowPopup/model/types.ts index 01a2e492c..16e68aa67 100644 --- a/apps/sn/src/features/windowPopup/model/types.ts +++ b/apps/sn/src/features/windowPopup/model/types.ts @@ -51,6 +51,7 @@ export const WINDOW_POPUP_MESSAGE_TYPE = { MAP_SEARCH_SHOW_MULTIPLE: "sn:popup:mapSearchShowMultiple", MAP_SEARCH_FIT_EXTENT: "sn:popup:mapSearchFitExtent", MAP_SEARCH_SHOW_FLOOD_GROUP: "sn:popup:mapSearchShowFloodGroup", + MAP_SEARCH_FLOOD_LAYER_REQUIRED: "sn:popup:mapSearchFloodLayerRequired", GIS_EDIT_SESSION_READY: "sn:popup:gisEditSessionReady", GIS_EDIT_SESSION_SYNC: "sn:popup:gisEditSessionSync", GIS_EDIT_SESSION_SHOW_INLINE: "sn:popup:gisEditSessionShowInline",