diff --git a/apps/dm_new/app/(popup-layout)/map/popup/page.tsx b/apps/dm_new/app/(popup-layout)/map/popup/page.tsx index e410ad2a7..1c625bcac 100644 --- a/apps/dm_new/app/(popup-layout)/map/popup/page.tsx +++ b/apps/dm_new/app/(popup-layout)/map/popup/page.tsx @@ -29,10 +29,15 @@ const Map = () => { ruseUtztnFcltCd: fclt.pbnstRuseFcltId, })); + if (!window.opener || typeof window.opener.postMessage !== "function") { + alert("부모 창을 찾을 수 없습니다. 팝업이 'noopener'로 열렸거나, 보안 정책으로 차단되었을 수 있어요."); + return; + } + window.opener.postMessage( { type: "SET_SUBS_INFO", - payload: subsInfoList, // 또는 필요한 데이터 + payload: subsInfoList, // 배열로 전송 (최대 3개) }, "*" ); @@ -52,9 +57,23 @@ const Map = () => { //하수처리시설코드로 재이용시설 목록 조회 const reuseData = async (ruseFcltPk: any) => { + if (!ruseFcltPk) { + console.warn("[reuseData] ruseFcltPk가 없습니다."); + return; + } try { + console.log("[reuseData] API 호출 - ruseFcltPk:", ruseFcltPk); const response = await mapService.getPbnstRuseFclts(ruseFcltPk); - const data = response.data || []; + console.log("[reuseData] API 응답 전체:", response); + // 응답이 배열이면 바로 사용, 객체면 .data 추출 + const data = Array.isArray(response) + ? response + : Array.isArray(response?.data) + ? response.data + : response?.data + ? [response.data] + : []; + console.log("[reuseData] 파싱된 data:", data); setSelectedFclts((prev) => { const newItems = data.filter( (item: any) => @@ -62,7 +81,7 @@ const Map = () => { Object.keys(item).length > 0 && !prev.some((f) => f.pbnstRuseFcltId === item.pbnstRuseFcltId) ); - console.log(newItems); + console.log("[reuseData] 추가될 newItems:", newItems); return [...prev, ...newItems]; }); } catch (error) { @@ -75,11 +94,45 @@ const Map = () => { fetchData(); }, []); + // 부모창에 초기 선택값 요청 (팝업 열릴 때 기존 선택 목록 받아오기) + useEffect(() => { + const origin = window.location.origin; + if (window.opener) { + window.opener.postMessage({ type: "REQUEST_INIT_SUBS_INFO" }, origin); + } + }, []); + + // 부모창에서 초기 선택값 수신 + useEffect(() => { + const origin = window.location.origin; + + const handler = (event: MessageEvent) => { + if (event.origin !== origin) return; + + const data = event.data; + if (!data || typeof data !== "object") return; + + if (data.type === "INIT_SUBS_INFO") { + const list = Array.isArray(data.payload) ? data.payload : []; + setSelectedFclts( + list.map((x) => ({ + ruseUtztnFcltNm: x.ruseUtztnFcltNm ?? "", + pbnstRuseFcltId: x.ruseUtztnFcltCd ?? "", + })) + ); + } + }; + + window.addEventListener("message", handler); + return () => window.removeEventListener("message", handler); + }, []); + // 레이어 생성 후 초기화 처리 const onCheckedLayersChange = () => { //수요처 ID const urlParams = new URLSearchParams(window.location.search); const dmdInfoId = urlParams.get("dmdInfoId"); + console.log("[하이라이트] dmdInfoId:", dmdInfoId); //수요처 위치로 화면 이동 const maps = gisMaps.current; @@ -88,22 +141,42 @@ const Map = () => { const featureId = `${layerNm}.${dmdInfoId}`; let foundFeature: any = null; + // 현재 로드된 레이어 목록 출력 + const allLayerNames = maps + .getLayers() + .getArray() + .map((l: any) => l.get("lyrTyNm") || l.get("name") || "(unnamed)"); + console.log("[하이라이트] 전체 레이어 목록:", allLayerNames); + console.log("[하이라이트] 탐색 대상 레이어:", layerNm); + console.log("[하이라이트] 탐색 대상 featureId:", featureId); + maps .getLayers() .getArray() .forEach((layer: any) => { if (layer.get("lyrTyNm") == layerNm) { + console.log("[하이라이트] 레이어 발견:", layerNm); const source = layer.getSource?.(); if (source?.getFeatureById) { const feature = source.getFeatureById(String(featureId).trim()); + console.log("[하이라이트] feature 탐색결과:", feature); if (feature) { foundFeature = feature; return; - } + } + // feature 못 찾을 때 소스 내 전체 feature ID 출력 + if (source?.getFeatures) { + const allIds = source.getFeatures().map((f: any) => f.getId()); + console.log("[하이라이트] 소스 내 전체 feature ID:", allIds); + } } } }); + if (!foundFeature) { + console.warn("[하이라이트] feature를 찾지 못했습니다. 위 레이어 목록/ID를 확인하세요."); + } + if (foundFeature) { const geometry = foundFeature.getGeometry(); @@ -133,7 +206,7 @@ const Map = () => { { width: 30 } ); } else { - alert("수요처의 좌표정보를 찾을수 없으므로, 상단 조회조건의 시설명을 입력하여 위치를 조회하시기 바랍니다."); + console.warn("수요처의 좌표정보를 찾을 수 없습니다. dmdInfoId:", dmdInfoId); } const formatNumber = (val: any) => { @@ -185,6 +258,7 @@ const Map = () => { // 검색해서 재이용시설 선택하면 해당 시설로 화면 이동 처리 useEffect(() => { + console.warn(selectDataPk); if (!selectDataPk || Object.keys(selectDataPk).length === 0) return; const maps = gisMaps.current; let foundFeature: any = null; @@ -226,8 +300,12 @@ const Map = () => { // 재이용시설 클릭 시 선택 시설목록에 추가 const onFeatureSelect = (data: any) => { + // feature의 모든 속성 출력 (어떤 키가 있는지 확인) + const properties = data.getProperties?.() ?? {}; + console.log("[onFeatureSelect] feature 속성 전체:", properties); // 처리시설코드 const swtrmtFcltCd = data.get("swtrmt_fclt_cd"); + console.log("[onFeatureSelect] swtrmt_fclt_cd:", swtrmtFcltCd); reuseData(swtrmtFcltCd); }; diff --git a/apps/dm_new/app/(popup-layout)/map/popup/selectedFcltList.tsx b/apps/dm_new/app/(popup-layout)/map/popup/selectedFcltList.tsx index bdf4d7e2c..5c742684f 100644 --- a/apps/dm_new/app/(popup-layout)/map/popup/selectedFcltList.tsx +++ b/apps/dm_new/app/(popup-layout)/map/popup/selectedFcltList.tsx @@ -22,36 +22,32 @@ export default function SelectedFcltList({ const TableContent = ( <> - + - 시설명 - - 하수처리량 -
- (㎥/일) + 시설명 + + 처리량(㎥/일) - - 재이용량 -
- (㎥/일) + + 재이용량(㎥/일) - 삭제 + 삭제 {data.map((item) => ( - - {item.ruseUtztnFcltNm} - + + {item.ruseUtztnFcltNm} + {Number(item.splyExtraCpct || 0).toLocaleString()} - + {Number(item.ruseCpct || 0).toLocaleString()} - +