From 7d137c93c5124647085d5702f52cb2271226c769 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Mon, 11 Aug 2025 15:58:41 +0900 Subject: [PATCH 1/3] =?UTF-8?q?detaile=EC=8B=9C=EC=84=A4=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=ED=8C=9D=EC=97=85=20=EC=85=80=EB=88=84=EB=A5=B4?= =?UTF-8?q?=EB=A9=B4=20=EC=9D=B4=EB=8F=99=EB=B0=8F=20=ED=8C=9D=EC=97=85=20?= =?UTF-8?q?=EC=B0=BD=20=EB=9C=A8=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/(map-layout)/map/mainMap/page.tsx | 178 ++++++++---------- .../(popUp-layout)/mapDetailPopUp/page.tsx | 1 + .../(popUp-layout)/mapFeaturePopup/page.tsx | 26 +-- apps/wr/components/lib/func/mapUtil.ts | 149 +++++++++++++-- 4 files changed, 225 insertions(+), 129 deletions(-) diff --git a/apps/wr/app/(map-layout)/map/mainMap/page.tsx b/apps/wr/app/(map-layout)/map/mainMap/page.tsx index 1922a8a3f..6240c1fe8 100644 --- a/apps/wr/app/(map-layout)/map/mainMap/page.tsx +++ b/apps/wr/app/(map-layout)/map/mainMap/page.tsx @@ -6,7 +6,14 @@ import { mapService } from "../../service"; import GisApp from "@common/business_components/ui/map/lib/gis.core"; import { SearchBar } from "@common/business_components/ui/map/searchBar/searchBar"; import { useWrStore } from "@/app/store"; -import { getFeatureCd } from "@/components/lib/func/mapUtil"; +import { + featurePopUpOpen, + getClickFeatureId, + getFeatureCd, + getSelectedLayers, + getWrFeaturePk, + getWrLayerNm, +} from "@/components/lib/func/mapUtil"; import toast, { Toaster } from "react-hot-toast"; const Map = () => { @@ -24,7 +31,7 @@ const Map = () => { const fetchData = async () => { try { - const response = await mapService.getLyrStngs('WR_NETWORK'); + const response = await mapService.getLyrStngs("WR_NETWORK"); setTreeData(response); // API 응답 저장 } catch (error) { console.error("데이터 불러오기 실패:", error); @@ -71,11 +78,11 @@ const Map = () => { }; // SearchModal, GisContent 등에서 호출 - const onFeatureFocus = () => { - console.log("onFeatureFocus"); + const onFeatureFocus = (data: any) => { + console.log('data',data) }; - const onFeatureSelect = (data: any) => { + const onFeatureSelect = (data: any ,popUpClick?:boolean) => { const map = gisMaps.current; if (!map) { @@ -93,27 +100,19 @@ const Map = () => { // 2. data가 OpenLayers Feature 인스턴스인지 확인 let foundFeature: any = null; let featureId = data.fid; - const layerName = data.layerNm; - if (layerName === "하수재이용시설") { + + if(popUpClick){ + const layerName = getWrLayerNm(data); + const featurePk = getWrFeaturePk(layerName ?? ""); // 재이용시설 - featureId = `${layerName}.${data.searchPk}`; - } else if ( - //빗물이용시설, 중수도시설 - layerName === "빗물이용시설" || - layerName == "중수도시설" - ) { - featureId = `${layerName}.${data.bdstInfoSn}`; - } else if (layerName === "하수처리시설") { - //하수처리시설 - featureId = `${layerName}.${data.bscFctCd}`; - } else if (layerName === "온배수시설") { - //온배수시설 - featureId = `${layerName}.${data.bdstRuseFcltSn}`; - } else if (layerName == "수요처") { - //수요처 - featureId = `${layerName}.${data.dmdInfoId.replaceAll("-", "")}`; - } else { - featureId = `${layerName}.${data.fid || data.id || data.ftrIdn}`; + if (featurePk) { + featureId = `${layerName}.${data[featurePk]}`; + } else { + console.warn("해당 피처는 선택된 레이어에서 찾을수 없습니다."); + } + }else{ + featureId=getClickFeatureId(data) + } map .getLayers() @@ -143,6 +142,10 @@ const Map = () => { select.selectFeature(foundFeature, true); } else { console.warn("OpenLayers Feature를 찾을 수 없습니다:"); + console.log("foundFeature :", foundFeature ); + console.warn("featureId : ", featureId); + console.warn("data : ", data); + console.warn(": 끝"); } const currentId = data?.fid || data?.id || data?.ftrIdn; const lastId = featureData?.fid || featureData?.id || featureData?.ftrIdn; @@ -150,10 +153,16 @@ const Map = () => { setFeatureData(data); setIsOpen(true); setIsSearchModalOpen(false); + + if (popUpClick ){ + const layerName = getWrLayerNm(data); + const isColumn = getFeatureCd(foundFeature.getProperties(), String(layerName)); + if(layerName&&isColumn) + featurePopUpOpen(layerName,isColumn,popupDetailRef) + } }; useEffect(() => { - if (isFeatured) { onFeatureSelect(isFeatured); } @@ -163,41 +172,13 @@ const Map = () => { const bc = new BroadcastChannel("mapDetailPopUp"); bc.onmessage = (event) => { if (event.data.type === "SELECT_FEATURE") { - onFeatureSelect(event.data.feature); + onFeatureSelect(event.data.feature,true); closePopup(); } }; }, []); - const getSelectedLayers = (isFeature: any) => { - const map = gisMaps.current; - if (!map) { - console.warn("지도가 초기화되지 않았습니다."); - return; - } - let result = null; - const layers = map - ? map - .getLayers() - .getArray() - .filter((l: any) => l.getVisible()) - : []; // gisMap이 null인지 확인 후 레이어 가져오기 - let featureLayer: { get: (key: string) => any } = { get: () => null }; - layers.forEach((layer: any) => { - const source = layer.getSource(); - if ( - source && - source.hasFeature && - isFeature && - typeof isFeature.getId === "function" && - source.hasFeature(isFeature) - ) { - featureLayer = layer; // 피처가 속한 레이어 찾기) - } - }); - result = featureLayer.get("lyrNm"); - return result; - }; + const renderDetailView = useCallback( (props: any) => { @@ -208,44 +189,38 @@ const Map = () => { } const isFeature = props?.featureData; - - if( typeof isFeature.getProperties === "function" ){ - + if (typeof isFeature.getProperties === "function") { if ( - Object.keys(isFeature?.getProperties()).length === 0 && - isFeature.constructor === Object + !( + Object.keys(isFeature?.getProperties()).length === 0 && + isFeature.constructor === Object + ) ) { - const url = `/mapDetailPopUp?layerNm=${encodeURIComponent(props.seletectedLayerNm)}`; - const width = window.screen.availWidth; - const height = window.screen.availHeight; - const left = 0; - const top = 0; - const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=no`; - popupRef.current = window.open(url, "지도 레이어 팝업", popupOptions); - } else { - const layerNm = getSelectedLayers(isFeature); - const safeProps = isFeature.getProperties(); - const featureCd = getFeatureCd(safeProps, String(layerNm)); - const url = `/mapFeaturePopup?layerNm=${encodeURIComponent(String(layerNm))}&featureCd=${encodeURIComponent(featureCd)} `; - const width = - String(layerNm) === "하수재이용시설" - ? Math.floor(window.innerWidth * 0.8) - : Math.floor(window.innerWidth * 0.4); // 화면 폭의 40% - const height = - String(layerNm) === "하수재이용시설" - ? Math.floor(window.innerHeight - 150) - : Math.floor(window.innerHeight - 450); // 150px 여백 확보; // calc(100% - 70px) - const left = (window.screen.availWidth - width) / 2; - const top = (window.screen.availHeight - height) / 2; - const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`; - popupDetailRef.current = window.open( - url, - "지도 시설 상세정보 팝업", - popupOptions - ); + const layerNm = getSelectedLayers(isFeature,gisMaps); + const safeProps = isFeature.getProperties(); + const featureCd = getFeatureCd(safeProps, String(layerNm)); + // const url = `/mapFeaturePopup?layerNm=${encodeURIComponent(String(layerNm))}&featureCd=${encodeURIComponent(featureCd)} `; + // const width = + // String(layerNm) === "하수재이용시설" + // ? Math.floor(window.innerWidth * 0.8) + // : Math.floor(window.innerWidth * 0.4); // 화면 폭의 40% + // const height = + // String(layerNm) === "하수재이용시설" + // ? Math.floor(window.innerHeight - 150) + // : Math.floor(window.innerHeight - 450); // 150px 여백 확보; // calc(100% - 70px) + // const left = (window.screen.availWidth - width) / 2; + // const top = (window.screen.availHeight - height) / 2; + // const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`; + // popupDetailRef.current = window.open( + // url, + // "지도 시설 상세정보 팝업", + // popupOptions + // ); + if(layerNm) + featurePopUpOpen(layerNm,featureCd,popupDetailRef) } - }else{ - console.log(' data확인 필요') + } else { + console.log(" data확인 필요"); } }, [checkedLayers, checkedLayersData, featureData] // 필요 시 의존성 넣기 @@ -259,9 +234,10 @@ const Map = () => { } }; - const onOpenPopup = (data:any) => { - if(data){ - + const onOpenPopup = (data: any) => { + if (data) { + setIsOpen(true); + setFeatureData(null); const url = `/mapDetailPopUp?layerNm=${encodeURIComponent(data)}`; const width = window.screen.availWidth; const height = window.screen.availHeight; @@ -269,12 +245,10 @@ const Map = () => { const top = 0; const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=no`; popupRef.current = window.open(url, "지도 레이어 팝업", popupOptions); - }else{ - toast.error('시설 및 수요처가 선택되지 않았습니다.') + } else { + toast.error("시설 및 수요처가 선택되지 않았습니다."); } - - - } + }; return (
@@ -310,12 +284,12 @@ const Map = () => { /> } waterDepth={undefined} - onOpenPopup={(data:any) =>{ - onOpenPopup(data) + onOpenPopup={(data: any) => { + onOpenPopup(data); }} /> -
+ ); }; diff --git a/apps/wr/app/(popUp-layout)/mapDetailPopUp/page.tsx b/apps/wr/app/(popUp-layout)/mapDetailPopUp/page.tsx index d8e93c567..8da833282 100644 --- a/apps/wr/app/(popUp-layout)/mapDetailPopUp/page.tsx +++ b/apps/wr/app/(popUp-layout)/mapDetailPopUp/page.tsx @@ -44,6 +44,7 @@ export default function MapDetailPopUp() { return ( { + bc.postMessage({ type: "SELECT_FEATURE", feature }); }} /> diff --git a/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx b/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx index debea36c9..ff4e3ffbd 100644 --- a/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx +++ b/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx @@ -45,25 +45,25 @@ export default function MapFeaturePopup() { useEffect(() => { if (isFeatureCd && layerNm) { - if (layerNm === "하수재이용시설") { - setIsDetail(isFeatureCd); - } else if (layerNm === "하수처리시설") { + if (layerNm === "tb_wr_bdst_ruse_fclt") { + setIsDetail(isFeatureCd); + } else if (layerNm === "tb_il_swage_prcs_fclt") { pbnMapDetaile(isFeatureCd, isFeatureCd).then((res) => { setIsDetail(res); }); - } else if (layerNm === "빗물이용시설") { + } else if (layerNm === "tb_wr_rnwtr_utztn_fclt") { rainMapDetile(isFeatureCd).then((res) => { setIsDetail(res); }); - } else if (layerNm === "중수도시설") { + } else if (layerNm === "tb_wr_rswtr_fclt") { rswtMapDetile(isFeatureCd).then((res) => { setIsDetail(res); }); - } else if (layerNm === "온배수시설") { + } else if (layerNm === "tb_wr_htdfl_fclt") { htdfMapDetile(isFeatureCd).then((res) => { setIsDetail(res); }); - } else if (layerNm === "잠재수요처") { + } else if (layerNm === "tb_wr_tmpr_dmd_co") { ldrmntMapDetile(isFeatureCd).then((res) => { setIsDetail(res); }); @@ -76,9 +76,9 @@ export default function MapFeaturePopup() { <> {isDetail ? (
- {layerNm === "하수재이용시설" ? ( + {layerNm === "tb_wr_bdst_ruse_fclt" ? ( - ) : layerNm === "하수처리시설" ? ( + ) : layerNm === "tb_il_swage_prcs_fclt" ? (
@@ -103,21 +103,21 @@ export default function MapFeaturePopup() { onPageChange={() => {}} /> </div> - ) : layerNm === "잠재수요처" ? ( + ) : layerNm === "tb_wr_tmpr_dmd_co" ? ( <CoDetailModal formObj={isDetail} readonly={false} onFormSubmit={async (value) => { - console.log(value) + console.log(value); }} isMap={true} /> ) : ( <SttnDetailModal type={ - layerNm === "빗물이용시설" + layerNm === "tb_wr_rnwtr_utztn_fclt" ? "RNB" - : layerNm === "중수도시설" + : layerNm === "tb_wr_rswtr_fclt" ? "RST" : "HTB" } diff --git a/apps/wr/components/lib/func/mapUtil.ts b/apps/wr/components/lib/func/mapUtil.ts index f3925c413..78aa71427 100644 --- a/apps/wr/components/lib/func/mapUtil.ts +++ b/apps/wr/components/lib/func/mapUtil.ts @@ -1,21 +1,142 @@ +const wrLayerList = [ + { text: "tb_il_swage_prcs_fclt", val: "bscFctCd" }, + { text: "tb_wr_bdst_ruse_fclt", val: "pbnstRuseFcltId" }, + { text: "tb_wr_rnwtr_utztn_fclt", val: "rainyObj" }, + { text: "tb_wr_rswtr_fclt", val: "rswtrObj" }, + { text: "tb_wr_htdfl_fclt", val: "htdflObj" }, + { text: "tb_wr_ruse_fclt_dmd_co", val: "dmdInfoId" }, + { text: "tb_wr_tmpr_dmd_co", val: "fctryMngSn" }, +]; +const wrFeaturePK = [ + { text: "bscFctCd", val: "tb_il_swage_prcs_fclt" }, + { text: "pbnstRuseFcltId", val: "tb_wr_bdst_ruse_fclt" }, + { text: "bdstInfoSn", val: "tb_wr_rnwtr_utztn_fclt" }, + { text: "bdstInfoSn", val: "tb_wr_rswtr_fclt" }, + { text: "bdstInfoSn", val: "tb_wr_htdfl_fclt" }, + { text: "dmdInfoId", val: "tb_wr_ruse_fclt_dmd_co" }, + { text: "fctryMngSn", val: "tb_wr_tmpr_dmd_co" }, +]; +// { text: "하수처리시설", val: "tb_il_swage_prcs_fclt" }, +// { text: "하수재이용시설", val: "tb_wr_bdst_ruse_fclt" }, +// { text: "빗물이용시설", val: "tb_wr_rnwtr_utztn_fclt" }, +// { text: "중수도시설", val: "tb_wr_rswtr_fclt" }, +// { text: "온배수시설", val: "tb_wr_htdfl_fclt" }, +// { text: "수요처", val: "tb_wr_ruse_fclt_dmd_co" }, +// { text: "잠재수요처", val: "tb_wr_tmpr_dmd_co" }, - - export const getFeatureCd = (featurePropertise:any, layerNm:string) => { - console.log('layerNm ', layerNm ) - console.log('featurePropertise ', featurePropertise ) - - const featureCd = - layerNm === "하수재이용시설" +export const getFeatureCd = (featurePropertise: any, layerNm: string) => { + const featureCd = + layerNm === "tb_wr_bdst_ruse_fclt" ? featurePropertise?.swtrmt_fclt_cd - : ["빗물이용시설", "중수도시설", "온배수시설", "수요처" ,'잠재수요처'].includes( - layerNm - ) + : [ + "tb_wr_ruse_fclt_dmd_co", + "tb_wr_rswtr_fclt", + "tb_wr_htdfl_fclt", + "tb_wr_rnwtr_utztn_fclt", + "tb_wr_tmpr_dmd_co", + ].includes(layerNm) ? featurePropertise?.bdst_nm - : layerNm === "하수처리시설" + : layerNm === "tb_il_swage_prcs_fclt" ? featurePropertise?.swtrmt_fclt_nm : null; - console.log('featureCd ', featureCd) - return featureCd; - }; \ No newline at end of file + return featureCd; +}; + +export const getWrLayerNm = (featurePropertise: any) => { + const result = wrLayerList + .filter(item => item.val in featurePropertise) // 키 존재 여부 체크 + .map(item => item.text); + + + return result[0]; +}; + + +export const getWrFeaturePk = (layerName :string) => { + const result = wrFeaturePK + .filter(item => item.val === layerName) // 키 존재 여부 체크 + .map(item => item.text); + return result[0]; +}; + +export const getSelectedLayers = (isFeature: any, gisMaps:any) => { + const map = gisMaps.current; + if (!map) { + console.warn("지도가 초기화되지 않았습니다."); + return; + } + let result = null; + const layers = map + ? map + .getLayers() + .getArray() + .filter((l: any) => l.getVisible()) + : []; // gisMap이 null인지 확인 후 레이어 가져오기 + let featureLayer: { get: (key: string) => any } = { get: () => null }; + + layers.forEach((layer: any) => { + const source = layer.getSource(); + if ( + source && + source.hasFeature && + isFeature && + typeof isFeature.getId === "function" && + source.hasFeature(isFeature) + ) { + featureLayer = layer; // 피처가 속한 레이어 찾기) + } + }); + + result = featureLayer.get("lyrTyNm"); + + return result; +}; + +export const getClickFeatureId = (data: any) => { + let featureId ='' + const layerName = data.layerNm; + if (layerName === "하수재이용시설") { + // 재이용시설 + featureId = `${layerName}.${data.searchPk}`; + } else if ( + //빗물이용시설, 중수도시설 + layerName === "빗물이용시설" || + layerName == "중수도시설" + ) { + featureId = `${layerName}.${data.bdstInfoSn}`; + } else if (layerName === "하수처리시설") { + //하수처리시설 + featureId = `${layerName}.${data.bscFctCd}`; + } else if (layerName === "온배수시설") { + //온배수시설 + featureId = `${layerName}.${data.bdstRuseFcltSn}`; + } else if (layerName == "수요처") { + //수요처 + featureId = `${layerName}.${data.dmdInfoId.replaceAll("-", "")}`; + } else { + featureId = `${layerName}.${data.fid || data.id || data.ftrIdn}`; + } + return featureId; +}; + +export function featurePopUpOpen(layerNm:string,featureCd:string,popupDetailRef){ + const url = `/mapFeaturePopup?layerNm=${encodeURIComponent(String(layerNm))}&featureCd=${encodeURIComponent(featureCd)} `; + const width = + String(layerNm) === "tb_wr_bdst_ruse_fclt" + ? Math.floor(window.innerWidth * 0.8) + : Math.floor(window.innerWidth * 0.4); // 화면 폭의 40% + const height = + String(layerNm) === "tb_wr_bdst_ruse_fclt" + ? Math.floor(window.innerHeight - 150) + : Math.floor(window.innerHeight - 450); // 150px 여백 확보; // calc(100% - 70px) + const left = (window.screen.availWidth - width) / 2; + const top = (window.screen.availHeight - height) / 2; + const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`; + popupDetailRef.current = window.open( + url, + "지도 시설 상세정보 팝업", + popupOptions + ); +} \ No newline at end of file From 06c840951b40e7b95643d583bada36422161503b Mon Sep 17 00:00:00 2001 From: leedj312 <dlehd467@gmail.com> Date: Mon, 11 Aug 2025 16:25:43 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/(map-layout)/map/mainMap/page.tsx | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/apps/wr/app/(map-layout)/map/mainMap/page.tsx b/apps/wr/app/(map-layout)/map/mainMap/page.tsx index 6240c1fe8..87e762b43 100644 --- a/apps/wr/app/(map-layout)/map/mainMap/page.tsx +++ b/apps/wr/app/(map-layout)/map/mainMap/page.tsx @@ -154,8 +154,12 @@ const Map = () => { setIsOpen(true); setIsSearchModalOpen(false); - if (popUpClick ){ + if (popUpClick && !( + Object.keys(foundFeature?.getProperties()).length === 0 && + foundFeature.constructor === Object + )){ const layerName = getWrLayerNm(data); + const isColumn = getFeatureCd(foundFeature.getProperties(), String(layerName)); if(layerName&&isColumn) featurePopUpOpen(layerName,isColumn,popupDetailRef) @@ -199,23 +203,6 @@ const Map = () => { const layerNm = getSelectedLayers(isFeature,gisMaps); const safeProps = isFeature.getProperties(); const featureCd = getFeatureCd(safeProps, String(layerNm)); - // const url = `/mapFeaturePopup?layerNm=${encodeURIComponent(String(layerNm))}&featureCd=${encodeURIComponent(featureCd)} `; - // const width = - // String(layerNm) === "하수재이용시설" - // ? Math.floor(window.innerWidth * 0.8) - // : Math.floor(window.innerWidth * 0.4); // 화면 폭의 40% - // const height = - // String(layerNm) === "하수재이용시설" - // ? Math.floor(window.innerHeight - 150) - // : Math.floor(window.innerHeight - 450); // 150px 여백 확보; // calc(100% - 70px) - // const left = (window.screen.availWidth - width) / 2; - // const top = (window.screen.availHeight - height) / 2; - // const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`; - // popupDetailRef.current = window.open( - // url, - // "지도 시설 상세정보 팝업", - // popupOptions - // ); if(layerNm) featurePopUpOpen(layerNm,featureCd,popupDetailRef) } From 12b9ffe65c5ea2a4e4060524343ff14203dfeba1 Mon Sep 17 00:00:00 2001 From: leedj312 <dlehd467@gmail.com> Date: Mon, 11 Aug 2025 17:39:30 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EC=88=98=EC=9A=94=EC=B2=98=20=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20=EC=B6=94=EA=B0=80=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/(map-layout)/map/mainMap/page.tsx | 7 +-- .../(popUp-layout)/mapFeaturePopup/page.tsx | 14 ++++- apps/wr/app/store/map/coSttnMap/index.tsx | 51 ++++++++++++++----- apps/wr/components/lib/func/mapUtil.ts | 33 ++++++------ .../ui/map/detailPopup/coSttnDetailPopup.tsx | 10 ---- .../coSttnDetailPopup/coSttnDetailPopup.tsx | 30 +++++++++++ 6 files changed, 103 insertions(+), 42 deletions(-) delete mode 100644 apps/wr/components/ui/map/detailPopup/coSttnDetailPopup.tsx create mode 100644 apps/wr/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup.tsx diff --git a/apps/wr/app/(map-layout)/map/mainMap/page.tsx b/apps/wr/app/(map-layout)/map/mainMap/page.tsx index 87e762b43..0006631d3 100644 --- a/apps/wr/app/(map-layout)/map/mainMap/page.tsx +++ b/apps/wr/app/(map-layout)/map/mainMap/page.tsx @@ -106,7 +106,9 @@ const Map = () => { const featurePk = getWrFeaturePk(layerName ?? ""); // 재이용시설 if (featurePk) { - featureId = `${layerName}.${data[featurePk]}`; + + const lastPk = layerName==='tb_wr_ruse_fclt_dmd_co'? data[featurePk].replaceAll("-", "") : data[featurePk] + featureId = `${layerName}.${lastPk}`; } else { console.warn("해당 피처는 선택된 레이어에서 찾을수 없습니다."); } @@ -154,12 +156,11 @@ const Map = () => { setIsOpen(true); setIsSearchModalOpen(false); - if (popUpClick && !( + if (popUpClick && foundFeature&&!( Object.keys(foundFeature?.getProperties()).length === 0 && foundFeature.constructor === Object )){ const layerName = getWrLayerNm(data); - const isColumn = getFeatureCd(foundFeature.getProperties(), String(layerName)); if(layerName&&isColumn) featurePopUpOpen(layerName,isColumn,popupDetailRef) diff --git a/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx b/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx index ff4e3ffbd..a660e5e6b 100644 --- a/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx +++ b/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx @@ -1,5 +1,6 @@ "use client"; import { useWrStore } from "@/app/store"; +import CoSttnDetailPopup from "@/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup"; import { RuseDetailPopup } from "@/components/ui/map/detailPopup/ruseDetailPopup"; import CoDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/coDatailModal"; import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal"; @@ -16,6 +17,7 @@ export default function MapFeaturePopup() { htdfMapDetile, pbnMapDetaile, ldrmntMapDetile, + coSttnMapDetail } = useWrStore((state) => state); const { pbnMapHeadList } = pbnMap; const [isDetail, setIsDetail] = useState<any>(null); @@ -63,6 +65,11 @@ export default function MapFeaturePopup() { htdfMapDetile(isFeatureCd).then((res) => { setIsDetail(res); }); + }else if(layerNm ==='tb_wr_ruse_fclt_dmd_co'){ + coSttnMapDetail(isFeatureCd).then((res) => { + console.log('tb_wr_ruse_fclt_dmd_co ', res) + setIsDetail(res); + }); } else if (layerNm === "tb_wr_tmpr_dmd_co") { ldrmntMapDetile(isFeatureCd).then((res) => { setIsDetail(res); @@ -112,7 +119,12 @@ export default function MapFeaturePopup() { }} isMap={true} /> - ) : ( + ) :layerNm === "tb_wr_ruse_fclt_dmd_co" ? ( + <CoSttnDetailPopup + isDetail={isDetail} + /> + ) + : ( <SttnDetailModal type={ layerNm === "tb_wr_rnwtr_utztn_fclt" diff --git a/apps/wr/app/store/map/coSttnMap/index.tsx b/apps/wr/app/store/map/coSttnMap/index.tsx index d6bedd9c5..9d1b90cfe 100644 --- a/apps/wr/app/store/map/coSttnMap/index.tsx +++ b/apps/wr/app/store/map/coSttnMap/index.tsx @@ -1,11 +1,14 @@ import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form"; import type { CommonTableProps } from "../../common/type/header"; -import { coSttHeadListExport, coSttNodeListExport } from "../../matDmd/coSttn/headList"; -import { fetchType, getFetchWithCount } from "@/components/lib/api"; +import { + coSttHeadListExport, + coSttNodeListExport, +} from "../../matDmd/coSttn/headList"; +import { fetchType, getFetch, getFetchWithCount } from "@/components/lib/api"; const coSttnMapRes: DemandCompType[] = []; -export const costtnMapSize =20 +export const costtnMapSize = 20; export type coSttnMapState = { coSttnMap: { @@ -21,7 +24,13 @@ export type coSttnMapState = { type coSttnMapActions = { coSttnMapInit: (pageNo: number, pageCnt: number, con: string) => void; coSttnMapSearch: (pageNo: number, pageCnt: number, con: string) => void; - coSttnMapTxtSearch: (pageNo: number, pageCnt: number, con: string, txt: string) => void; + coSttnMapTxtSearch: ( + pageNo: number, + pageCnt: number, + con: string, + txt: string + ) => void; + coSttnMapDetail: (dmdInfoId: string) => Promise<DemandCompType | undefined>; }; export type coSttnMapType = coSttnMapState & coSttnMapActions; @@ -37,7 +46,6 @@ export const coSttnMapStateExport: coSttnMapState = { }, }; - export const coSttnMapActionsExport: (set: any) => coSttnMapActions = ( set: any ) => { @@ -60,7 +68,7 @@ export const coSttnMapActionsExport: (set: any) => coSttnMapActions = ( }; }); } catch (e) { - console.log(e) + console.log(e); } }, coSttnMapSearch: async (pageNo: number, pageCnt: number, con: string) => { @@ -96,11 +104,17 @@ export const coSttnMapActionsExport: (set: any) => coSttnMapActions = ( console.log("error", erTxt); } }, - coSttnMapTxtSearch: async (pageNo: number, pageCnt: number, con: string, txt: string) => { + coSttnMapTxtSearch: async ( + pageNo: number, + pageCnt: number, + con: string, + txt: string + ) => { try { const coSttnMapRes = await getFetchWithCount( fetchType.WR, - `/reuseFc/request/${pageNo}/${pageCnt}/${con}/${txt}`) + `/reuseFc/request/${pageNo}/${pageCnt}/${con}/${txt}` + ); set((state: coSttnMapState) => { return { ...state, @@ -109,12 +123,23 @@ export const coSttnMapActionsExport: (set: any) => coSttnMapActions = ( coSttnMapRes: coSttnMapRes.data, coSttnMapResCount: coSttnMapRes.count, isInit: false, - } - } - }) + }, + }; + }); } catch (erTxt) { console.log("error", erTxt); } }, - } -} \ No newline at end of file + coSttnMapDetail: async (dmdInfoId: string) => { + try { + const coSttnMapDetail = await getFetch( + fetchType.WR, + `/reuseFc/request/${dmdInfoId}` + ); + return coSttnMapDetail; + } catch (erTxt) { + console.log("error", erTxt); + } + }, + }; +}; diff --git a/apps/wr/components/lib/func/mapUtil.ts b/apps/wr/components/lib/func/mapUtil.ts index 78aa71427..ebf4cc2dc 100644 --- a/apps/wr/components/lib/func/mapUtil.ts +++ b/apps/wr/components/lib/func/mapUtil.ts @@ -30,7 +30,6 @@ export const getFeatureCd = (featurePropertise: any, layerNm: string) => { layerNm === "tb_wr_bdst_ruse_fclt" ? featurePropertise?.swtrmt_fclt_cd : [ - "tb_wr_ruse_fclt_dmd_co", "tb_wr_rswtr_fclt", "tb_wr_htdfl_fclt", "tb_wr_rnwtr_utztn_fclt", @@ -39,29 +38,29 @@ export const getFeatureCd = (featurePropertise: any, layerNm: string) => { ? featurePropertise?.bdst_nm : layerNm === "tb_il_swage_prcs_fclt" ? featurePropertise?.swtrmt_fclt_nm - : null; + : layerNm === "tb_wr_ruse_fclt_dmd_co" + ? featurePropertise?.bdst_info_sn + : null; return featureCd; }; export const getWrLayerNm = (featurePropertise: any) => { const result = wrLayerList - .filter(item => item.val in featurePropertise) // 키 존재 여부 체크 - .map(item => item.text); - + .filter((item) => item.val in featurePropertise) // 키 존재 여부 체크 + .map((item) => item.text); return result[0]; }; - -export const getWrFeaturePk = (layerName :string) => { +export const getWrFeaturePk = (layerName: string) => { const result = wrFeaturePK - .filter(item => item.val === layerName) // 키 존재 여부 체크 - .map(item => item.text); + .filter((item) => item.val === layerName) // 키 존재 여부 체크 + .map((item) => item.text); return result[0]; }; -export const getSelectedLayers = (isFeature: any, gisMaps:any) => { +export const getSelectedLayers = (isFeature: any, gisMaps: any) => { const map = gisMaps.current; if (!map) { console.warn("지도가 초기화되지 않았습니다."); @@ -94,11 +93,11 @@ export const getSelectedLayers = (isFeature: any, gisMaps:any) => { return result; }; -export const getClickFeatureId = (data: any) => { - let featureId ='' +export const getClickFeatureId = (data: any) => { + let featureId = ""; const layerName = data.layerNm; if (layerName === "하수재이용시설") { - // 재이용시설 + // 재이용시설 featureId = `${layerName}.${data.searchPk}`; } else if ( //빗물이용시설, 중수도시설 @@ -121,7 +120,11 @@ export const getClickFeatureId = (data: any) => { return featureId; }; -export function featurePopUpOpen(layerNm:string,featureCd:string,popupDetailRef){ +export function featurePopUpOpen( + layerNm: string, + featureCd: string, + popupDetailRef +) { const url = `/mapFeaturePopup?layerNm=${encodeURIComponent(String(layerNm))}&featureCd=${encodeURIComponent(featureCd)} `; const width = String(layerNm) === "tb_wr_bdst_ruse_fclt" @@ -139,4 +142,4 @@ export function featurePopUpOpen(layerNm:string,featureCd:string,popupDetailRef) "지도 시설 상세정보 팝업", popupOptions ); -} \ No newline at end of file +} diff --git a/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup.tsx b/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup.tsx deleted file mode 100644 index dbd30a89d..000000000 --- a/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export default function coSttnDetailPopup(){ - - - return( - <> - - - </> - ) -} \ No newline at end of file diff --git a/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup.tsx b/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup.tsx new file mode 100644 index 000000000..26c586561 --- /dev/null +++ b/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup.tsx @@ -0,0 +1,30 @@ +import { useWrStore } from "@/app/store"; +import SdmInsertForm from "@common/business_components/ui/sdmInsertForm"; +import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form"; + +export default function CoSttnDetailPopup({isDetail} :{isDetail:DemandCompType}){ + const { + code + } = useWrStore((state) => state); + + + return( + <div> + <SdmInsertForm + selectSidoData={code.cityCd} + selectSigunData={code.sggCd} + dataList={[]} + rtnValue={(searchText: string, pageCnt: number) => { + console.log(searchText, pageCnt); + }} + rtnInputData={async (data) => { + console.log(data) + }} + bodyClassNm={"w-full mx-auto bg-white rounded-lg shadow-md p-6"} + updateList={isDetail} + readOnly={true} + ></SdmInsertForm> + + </div> + ) +} \ No newline at end of file