diff --git a/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx b/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx new file mode 100644 index 000000000..9e7c1296e --- /dev/null +++ b/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx @@ -0,0 +1,121 @@ +"use client"; +import { useWrStore } from "@/app/store"; +import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal"; +import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal"; +import { Title, UiTable } from "@common/business_components/ui"; +import { useSearchParams } from "next/navigation"; +import { useEffect, useState } from "react"; + +export default function MapFeaturePopup() { + const [isFeatureCd, setIsFeatureCd] = useState(null); + const { + pbnMap, + ruseMapDetail, + rainMapDetile, + rswtMapDetile, + htdfMapDetile, + pbnMapDetaile, + } = useWrStore((state) => state); + const { pbnMapHeadList } = pbnMap; + const [isDetail, setIsDetail] = useState(null); + const [layerNm, setLayerNm] = useState(); + const searchParams = useSearchParams(); + + useEffect(() => { + const layerName = searchParams.get("layerNm"); + const featureCd = searchParams.get("featureCd"); + setLayerNm(String(layerName)); + setIsFeatureCd(featureCd); + + const handleUnload = () => { + // 부모에게 닫힘 알림 + window.opener?.postMessage( + { type: "POPUP_CLOSED", target: "detail" }, + "*" + ); + }; + + window.addEventListener("beforeunload", handleUnload); + + return () => { + window.removeEventListener("beforeunload", handleUnload); + }; + }, []); + + useEffect(() => { + if (isFeatureCd && layerNm) { + let detail = {}; + if (layerNm === "하수재이용시설") { + detail = ruseMapDetail(isFeatureCd); + setIsDetail(detail); + } else if (layerNm === "하수처리시설") { + pbnMapDetaile(isFeatureCd, isFeatureCd).then((res) => { + setIsDetail(res); + }); + } else if (layerNm === "빗물이용시설") { + rainMapDetile(isFeatureCd).then((res) => { + setIsDetail(res); + }); + } else if (layerNm === "중수도시설") { + rswtMapDetile(isFeatureCd).then((res) => { + setIsDetail(res); + }); + } else if (layerNm === "온배수시설") { + htdfMapDetile(isFeatureCd).then((res) => { + setIsDetail(res); + }); + } + } + }, [isFeatureCd, layerNm]); + + if (!isDetail) return null; // 데이터 없으면 아무것도 안 그림 + return ( + <> + {isDetail ? ( +
+ {layerNm === "하수재이용시설" ? ( + + ) : layerNm === "하수처리시설" ? ( +
+
+ + </div> + {/* 높이 조정 */} + <UiTable + tableData={isDetail || []} + headlist={pbnMapHeadList.slice(0, 4)} + pageSize={1} + total={0} + headName={"위치정보"} + cellClick={() => {}} + onPageChange={() => {}} + /> + <UiTable + tableData={isDetail || []} + headlist={pbnMapHeadList.slice(4)} + pageSize={1} + total={0} + headName={"기본정보"} + cellClick={() => {}} + onPageChange={() => {}} + /> + </div> + ) : ( + <SttnDetailModal + type={ + layerNm === "빗물이용시설" + ? "RNB" + : layerNm === "중수도시설" + ? "RST" + : "HTB" + } + formObj={isDetail} + /> + )} + </div> + ) : ( + <></> + )} + </> + ); +} diff --git a/apps/wr/app/(with-layout)/map/mainMap/page.tsx b/apps/wr/app/(with-layout)/map/mainMap/page.tsx index dedcca225..3b6eaa512 100644 --- a/apps/wr/app/(with-layout)/map/mainMap/page.tsx +++ b/apps/wr/app/(with-layout)/map/mainMap/page.tsx @@ -5,11 +5,11 @@ import { useEffect, useRef, useState, useCallback } from "react"; import { mapService } from "../service"; import GisApp from "@common/business_components/ui/map/lib/gis.core"; import { useWrStore } from "@/app/store"; +import { getFeatureCd } from "@/components/lib/func/\bmapUtil"; const Map = () => { - - const { comMap } = useWrStore((state) => state); - const {isFeatured} = comMap + const { comMap } = useWrStore((state) => state); + const { isFeatured } = comMap; const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정 const gisMaps = useRef<any | null>(null); const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태 @@ -18,6 +18,7 @@ const Map = () => { const [checkedLayers, setCheckedLayers] = useState<string[]>([]); const [checkedLayersData, setCheckedLayersData] = useState<any[]>([]); const popupRef = useRef<Window | null>(null); + const popupDetailRef = useRef<Window | null>(null); const fetchData = async () => { try { @@ -43,20 +44,41 @@ const Map = () => { const bc = new BroadcastChannel("mapDetailPopUp"); bc.onmessage = (event) => { if (event.data.type === "SELECT_FEATURE") { - console.log('event.data.feature ', event.data.feature) onFeatureSelect(event.data.feature); - closePopup() + closePopup(); } }; }, []); - useEffect(() =>{ - console.log('isFeatured ', isFeatured) - if(isFeatured){ - console.log('isFeatured ', isFeatured) - onFeatureSelect(isFeatured) + useEffect(() => { + const messageHandler = (event: MessageEvent) => { + if (event.data.type === "POPUP_CLOSED") { + if (event.data.target === "detail") { + console.log("디테일 팝업 닫힘 감지됨"); + setFeatureData(null); + setIsOpen(false); + setIsSearchModalOpen(true); + popupDetailRef.current = null; + } else { + console.log("기타 팝업 닫힘 감지됨"); + popupRef.current = null; + } + } + }; + window.addEventListener("message", messageHandler); + return () => { + window.removeEventListener("message", messageHandler); + }; + }, []); + + useEffect(() => { + console.log("isFeatured ", isFeatured); + + if (isFeatured) { + console.log("isFeatured ", isFeatured); + onFeatureSelect(isFeatured); } - },[isFeatured]) + }, [isFeatured]); // 체크된 레이어 정보를 받는 핸들러 const handleCheckedLayersChange = ( @@ -67,8 +89,6 @@ const Map = () => { setCheckedLayersData(checkedNodesData); }; - - // SearchModal, GisContent 등에서 호출 const onFeatureSelect = (data: any) => { const map = gisMaps.current; @@ -92,16 +112,20 @@ const Map = () => { if (layerName === "하수재이용시설") { // 재이용시설 featureId = `${layerName}.${data.searchPk}`; - } else if ( //빗물이용시설, 중수도시설 + } else if ( + //빗물이용시설, 중수도시설 layerName === "빗물이용시설" || layerName == "중수도시설" ) { featureId = `${layerName}.${data.bdstInfoSn}`; - } else if (layerName === "하수처리시설") { //하수처리시설 + } else if (layerName === "하수처리시설") { + //하수처리시설 featureId = `${layerName}.${data.bscFctCd}`; - } else if (layerName === "온배수시설") { //온배수시설 + } else if (layerName === "온배수시설") { + //온배수시설 featureId = `${layerName}.${data.bdstRuseFcltSn}`; - } else if (layerName == "수요처") { //수요처 + } else if (layerName == "수요처") { + //수요처 featureId = `${layerName}.${data.dmdInfoId.replaceAll("-", "")}`; } else { console.warn("해당 레이어에 대한 featureId 매핑 없음", layerName); @@ -144,49 +168,79 @@ const Map = () => { setIsSearchModalOpen(false); }; - // MapSearchBar 래퍼 컴포넌트 - // const CustomMapSearchBar = (props: any) => { - // return ( - // <MapSearchBar - // {...props} - // searchType="공급처 후보지 조회" - // showApplyButton={false} - // /> - // ); - // }; + + 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) => { - console.log('props ', props.seletectedLayerNm) - const url = `/mapDetilePopUp?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=yes`; - popupRef.current = window.open(url, "지도 레이어 팝업", popupOptions); - // return( - // <NewWindowPopup - // key={featureData?.fid || featureData?.id || featureData?.ftrIdn} - // onClose={handlePopupClose} - // checkedLayers={checkedLayers} - // checkedLayersData={checkedLayersData} - // {...props} - // /> - // ) - } - , - [checkedLayers, checkedLayersData] // 필요 시 의존성 넣기 - + const isFeature = props.featureData.getProperties(); + if ( + Object.keys(isFeature).length === 0 && + isFeature.constructor === Object + ) { + const url = `/mapDetilePopUp?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=yes`; + popupRef.current = window.open(url, "지도 레이어 팝업", popupOptions); + } else { + const layerNm = getSelectedLayers(featureData); + const safeProps = featureData.getProperties(); + const featureCd = getFeatureCd(safeProps, String(layerNm)); + const url = `/mapFeaturePopup?layerNm=${encodeURIComponent(String(layerNm))}&featureCd=${encodeURIComponent(featureCd)} `; + const width = Math.floor(window.innerWidth * 0.4); // 화면 폭의 40% + const height = 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 + ); + } + }, + [checkedLayers, checkedLayersData, featureData] // 필요 시 의존성 넣기 ); const closePopup = () => { if (popupRef.current && !popupRef.current.closed) { popupRef.current.close(); popupRef.current = null; setIsOpen(false); - setFeatureData(null); + setFeatureData(null); } }; + return ( <div className="bg-container"> <Gis diff --git a/apps/wr/app/store/map/htdflMap/index.tsx b/apps/wr/app/store/map/htdflMap/index.tsx index 97f936ef8..03289a06d 100644 --- a/apps/wr/app/store/map/htdflMap/index.tsx +++ b/apps/wr/app/store/map/htdflMap/index.tsx @@ -1,4 +1,4 @@ -import { fetchType, getFetchWithCount } from "@/components/lib/api"; +import { fetchType, getFetch, getFetchWithCount } from "@/components/lib/api"; import type { CommonTableProps } from "../../common/type/header"; import type { customHtdflBdst } from "../../ruseFcltMng/fcltReg/htdflReg"; import { htdflSttHeadListExport, htdflSttNodeListExport } from "../../ruseFcltMng/fcltSttn/htdflSttn/headList"; @@ -17,6 +17,8 @@ export type htdfMapState = { type htdfMapActions = { htdfMapInit: (page: number, total: number, cityOrSgg: string) => void; htdfMapSearch: (page: number, total: number, cityOrSgg:string, searchTxt?:string) =>void + htdfMapDetile:(featureCd:string) => Promise<customHtdflBdst | undefined>; + }; export type htdfMapType = htdfMapState & htdfMapActions; @@ -60,30 +62,52 @@ export const htdfMapActionsExport: (set: any) => htdfMapActions = ( console.log(e); } }, - htdfMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => { - try { - const htdfMapRes = await getFetchWithCount( - fetchType.WR, - `/drain/facilityList` + - (page ? `/${page}` : "/1") + - (total ? `/${total}` : "/20") + - (cityOrSgg ? `/${cityOrSgg}` : "/0") + - (searchTxt ? `/${searchTxt}` : "") - ); - - set((state: htdfMapState) => { - return { - ...state, - htdfMap: { - ...state.htdfMap, - htdfMapRes: htdfMapRes.data, - htdfMapCount: htdfMapRes.count, - }, - }; - }); - } catch (e) { - console.log(e); - } - }, + htdfMapSearch: async ( + page: number, + total: number, + cityOrSgg: string, + searchTxt?: string + ) => { + try { + const htdfMapRes = await getFetchWithCount( + fetchType.WR, + `/drain/facilityList` + + (page ? `/${page}` : "/1") + + (total ? `/${total}` : "/20") + + (cityOrSgg ? `/${cityOrSgg}` : "/0") + + (searchTxt ? `/${searchTxt}` : "") + ); + + set((state: htdfMapState) => { + return { + ...state, + htdfMap: { + ...state.htdfMap, + htdfMapRes: htdfMapRes.data, + htdfMapCount: htdfMapRes.count, + }, + }; + }); + } catch (e) { + console.log(e); + } + }, + htdfMapDetile: async (featureCd: string) => { + try { + const htdfDetail = await getFetch( + fetchType.WR, + `/drain/facilityList/1/3/0/${featureCd}` + ); + + if (htdfDetail && htdfDetail.length > 0) { + return htdfDetail[0]; + } else { + return null; + } + } catch (error) { + console.log(error); + throw error; // 호출부에서 catch 가능하도록 + } + }, }; }; diff --git a/apps/wr/app/store/map/pbnstMap/index.tsx b/apps/wr/app/store/map/pbnstMap/index.tsx index e2789d744..c093431ff 100644 --- a/apps/wr/app/store/map/pbnstMap/index.tsx +++ b/apps/wr/app/store/map/pbnstMap/index.tsx @@ -1,50 +1,48 @@ -import { fetchType, postFectch } from "@/components/lib/api"; +import { fetchType, postFectch } from "@/components/lib/api"; import type { pubHasuType } from "../../ruseFcltMng/fcltReg/pbnstReg/type"; import { checkWrRegList } from "../../ruseFcltMng/fcltReg/pbnstReg"; import type { ReturnType } from "@common/business_components/ui"; import { pubFacHeadListExport } from "../../ruseFcltMng/fcltReg/pbnstReg/headList"; import type { TableUpperProps } from "../../common/type/header"; +export const pbnMapTableSize = 20; -export const pbnMapTableSize =20; +const hasuListFetch = async ( + page: number, + pageTotal: number, + reurnValue: ReturnType, + searchNm?: string +) => { + let url = `/prcsFclt/ruseInfo/${page}/${pageTotal}/`; + const checkWrRegListRes = await checkWrRegList(); -const hasuListFetch = async (page: number, pageTotal:number, reurnValue: ReturnType, searchNm?:string) => { - - let url = `/prcsFclt/ruseInfo/${page}/${pageTotal}/`; - const checkWrRegListRes = await checkWrRegList(); - - if (reurnValue.partValue === "A") { - url += `${reurnValue.partValue}/${ - // reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue - reurnValue.sigunValue !== '0' ? reurnValue.sigunValue : reurnValue.sidoValue - }/0/1/SW` - - - } else if (reurnValue.partValue === "R") { - url += `${reurnValue.partValue}/${reurnValue.regionValue + if (reurnValue.partValue === "A") { + url += `${reurnValue.partValue}/${ + // reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue + reurnValue.sigunValue !== "0" + ? reurnValue.sigunValue + : reurnValue.sidoValue + }/0/1/SW`; + } else if (reurnValue.partValue === "R") { + url += `${reurnValue.partValue}/${ + reurnValue.regionValue ? reurnValue.regionValue : reurnValue.unitWaterShedValue ? reurnValue.unitWaterShedValue : reurnValue.middleRegionValue - }/0/1/SW` - } else if (reurnValue.partValue === 'G') { - url += `${reurnValue.envPartValue}/${reurnValue.sigunValue !== '0' ? reurnValue.sigunValue : reurnValue.sidoValue}/0/1/SW` - } else { - url += `A/0/0/1/SW` - } - if (searchNm && searchNm?.length > 0) { - url += "/" + searchNm - } - + }/0/1/SW`; + } else if (reurnValue.partValue === "G") { + url += `${reurnValue.envPartValue}/${reurnValue.sigunValue !== "0" ? reurnValue.sigunValue : reurnValue.sidoValue}/0/1/SW`; + } else { + url += `A/0/0/1/SW`; + } + if (searchNm && searchNm?.length > 0) { + url += "/" + searchNm; + } + const data = checkWrRegListRes.filter((item: string) => item !== ""); -const data = checkWrRegListRes.filter((item:string) => item !== "") - - const rainRes = await postFectch( - url, - data, - fetchType.COMMON - ); + const rainRes = await postFectch(url, data, fetchType.COMMON); const hasuList = rainRes.data.map((item: any) => { return { @@ -54,55 +52,77 @@ const data = checkWrRegListRes.filter((item:string) => item !== "") }; }); - return {data: hasuList, count:rainRes.count}; + return { data: hasuList, count: rainRes.count }; }; export type pbnMapState = { - pbnMap: { - isInit:boolean, - pbnMapRes:pubHasuType[] - pbnMapCount:number; - pbnMapHeadList:TableUpperProps[]; - }; + pbnMap: { + isInit: boolean; + pbnMapRes: pubHasuType[]; + pbnMapCount: number; + pbnMapHeadList: TableUpperProps[]; }; - - type pbnMapActions = { - pbnMapInit: (page: number, pageTotal:number, reurnValue: ReturnType) => void; - }; - - export type pbnMapType = pbnMapState & pbnMapActions; - - export const pbnMapStateExport: pbnMapState = { - pbnMap: { - isInit: false, - pbnMapRes:[], - pbnMapCount:1, - pbnMapHeadList:pubFacHeadListExport +}; + +type pbnMapActions = { + pbnMapInit: (page: number, pageTotal: number, reurnValue: ReturnType) => void; + pbnMapDetaile: (featureCd: string, data: string) => Promise<pubHasuType | undefined>; +}; + +export type pbnMapType = pbnMapState & pbnMapActions; + +export const pbnMapStateExport: pbnMapState = { + pbnMap: { + isInit: false, + pbnMapRes: [], + pbnMapCount: 1, + pbnMapHeadList: pubFacHeadListExport, + }, +}; + +export const pbnMapActionsExport: (set: any) => pbnMapActions = (set: any) => { + return { + pbnMapInit: async ( + page: number, + pageTotal: number, + reurnValue: ReturnType + ) => { + try { + const pubMapRes = await hasuListFetch(page, pageTotal, reurnValue); + set((state: pbnMapState) => { + return { + ...state, + pbnMap: { + ...state.pbnMap, + pbnMapRes: pubMapRes.data, + pbnMapCount: pubMapRes.count, + isInit: false, + }, + }; + }); + } catch (e) { + console.log(e); + } + }, + pbnMapDetaile: async (featureCd: string, data: string) => { + try { + const hasuRes = await postFectch( + `/prcsFclt/ruseInfo/1/20/A/0/0/1/SW/${featureCd}`, + [data], + fetchType.COMMON + ); + const filteredData = hasuRes.data.map((item: any) => { + return { + ...item, + fctCpc: Number(item.fctCpc) || 0, + ruse: item.ruse === false ? "N" : "Y", + }; + }); + return filteredData; + } catch (error) { + console.log(error); + throw error; // 호출부에서 catch 가능하도록 + } }, }; - - - export const pbnMapActionsExport: (set: any) => pbnMapActions = ( - set: any - ) => { - return { - pbnMapInit: async (page: number, pageTotal:number, reurnValue: ReturnType) => { - try { - const pubMapRes = await hasuListFetch(page,pageTotal,reurnValue) - set((state: pbnMapState) => { - return { - ...state, - pbnMap: { - ...state.pbnMap, - pbnMapRes: pubMapRes.data, - pbnMapCount: pubMapRes.count, - isInit: false, - }, - }; - }); - } catch (e) { - console.log(e) - } - }, - } - } \ No newline at end of file +}; diff --git a/apps/wr/app/store/map/rainMap/index.tsx b/apps/wr/app/store/map/rainMap/index.tsx index 9ddca1f91..a8d8ecb04 100644 --- a/apps/wr/app/store/map/rainMap/index.tsx +++ b/apps/wr/app/store/map/rainMap/index.tsx @@ -1,4 +1,4 @@ -import { fetchType, getFetchWithCount } from "@/components/lib/api"; +import { fetchType, getFetch, getFetchWithCount } from "@/components/lib/api"; import type { CommonTableProps } from "../../common/type/header"; import { rainSttHeadListExport, @@ -21,6 +21,7 @@ export type rainMapState = { type rainMapActions = { rainMapInit: (page: number, total: number, cityOrSgg:string) => void; rainMapSearch: (page: number, total: number, cityOrSgg:string, searchTxt?:string) =>void + rainMapDetile:(featureCd:string) => Promise<customRainBdst | undefined>; }; export type rainMapType = rainMapState & rainMapActions; @@ -89,5 +90,23 @@ export const rainMapActionsExport: (set: any) => rainMapActions = ( console.log(e); } }, - }; + rainMapDetile: async (featureCd: string) => { + try { + console.log('featureCd ', featureCd) + + const rainDetail = await getFetch(fetchType.WR, + `/reuseFc/rainyInfoList/1/3/0/${featureCd}` ) + + if(rainDetail&&rainDetail.length>0){ + + return rainDetail[0]; + }else{ + return null; + } + } catch (error) { + console.log(error); + throw error; // 호출부에서 catch 가능하도록 + } + } +} }; diff --git a/apps/wr/app/store/map/rswtMap/index.tsx b/apps/wr/app/store/map/rswtMap/index.tsx index c55cdc983..e788bedc1 100644 --- a/apps/wr/app/store/map/rswtMap/index.tsx +++ b/apps/wr/app/store/map/rswtMap/index.tsx @@ -1,10 +1,12 @@ -import { fetchType, getFetchWithCount } from "@/components/lib/api"; +import { fetchType, getFetch, getFetchWithCount } from "@/components/lib/api"; import type { CommonTableProps } from "../../common/type/header"; import type { customRswtBdst } from "../../ruseFcltMng/fcltReg/rswtReg"; -import { rswtSttHeadListExport, rswtSttNodeListExport } from "../../ruseFcltMng/fcltSttn/rswtSttn/headList"; +import { + rswtSttHeadListExport, + rswtSttNodeListExport, +} from "../../ruseFcltMng/fcltSttn/rswtSttn/headList"; - -export const rswtMapSize = 15 +export const rswtMapSize = 15; export type rswtMapState = { rswtMap: { rswtMapRes: customRswtBdst[]; @@ -16,8 +18,14 @@ export type rswtMapState = { }; type rswtMapActions = { - rswtMapInit: (page: number, total: number, cityOrSgg:string) => void; - rswtMapSearch: (page: number, total: number, cityOrSgg:string, searchTxt?:string) => void + rswtMapInit: (page: number, total: number, cityOrSgg: string) => void; + rswtMapSearch: ( + page: number, + total: number, + cityOrSgg: string, + searchTxt?: string + ) => void; + rswtMapDetile: (featureCd: string) => Promise<customRswtBdst | undefined>; }; export type rswtMapType = rswtMapState & rswtMapActions; @@ -36,15 +44,15 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = ( set: any ) => { return { - rswtMapInit: async (page: number, total: number, cityOrSgg:string) => { + rswtMapInit: async (page: number, total: number, cityOrSgg: string) => { try { const rswtMapRes = await getFetchWithCount( - fetchType.WR, - `/reuseFc/waterreuseFc` + - (page ? `/${page}` : "/1") + - (total ? `/${total}` : "/20") + - (cityOrSgg ? `/${cityOrSgg}` : "/0") - ); + fetchType.WR, + `/reuseFc/waterreuseFc` + + (page ? `/${page}` : "/1") + + (total ? `/${total}` : "/20") + + (cityOrSgg ? `/${cityOrSgg}` : "/0") + ); set((state: rswtMapState) => { return { @@ -61,7 +69,12 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = ( console.log(e); } }, - rswtMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => { + rswtMapSearch: async ( + page: number, + total: number, + cityOrSgg: string, + searchTxt?: string + ) => { try { const rswtMapRes = await getFetchWithCount( fetchType.WR, @@ -69,7 +82,7 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = ( (page ? `/${page}` : "/1") + (total ? `/${total}` : "/20") + (cityOrSgg ? `/${cityOrSgg}` : "/0") + - (searchTxt ? `/${searchTxt}` : "") + (searchTxt ? `/${searchTxt}` : "") ); set((state: rswtMapState) => { @@ -86,6 +99,22 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = ( console.log(e); } }, + rswtMapDetile: async (featureCd: string) => { + try { + const rswtDetail = await getFetch( + fetchType.WR, + `/reuseFc/waterreuseFc/1/3/0/${featureCd}` + ); + if (rswtDetail && rswtDetail.length > 0) { + return rswtDetail[0]; + } else { + return null; + } + } catch (error) { + console.log(error); + throw error; // 호출부에서 catch 가능하도록 + } + }, }; }; diff --git a/apps/wr/app/store/map/ruseMap/index.tsx b/apps/wr/app/store/map/ruseMap/index.tsx index f5145cbf3..d42fc6202 100644 --- a/apps/wr/app/store/map/ruseMap/index.tsx +++ b/apps/wr/app/store/map/ruseMap/index.tsx @@ -7,6 +7,7 @@ import { } from "../../ruseFcltMng/fcltSttn/pbnstSttn/headList"; import type { ReturnType } from "@common/business_components/ui"; import { hasuListFetch } from "../../ruseFcltMng/fcltSttn/pbnstSttn"; +import type { customPbnst } from "../../ruseFcltMng/fcltReg/pbnstReg/type"; export const ruseMapSize = 15; export type ruseMapState = { @@ -29,6 +30,7 @@ type ruseMapActions = { year: string, fclts: string[] ) => void; + ruseMapDetail: (ruseFcltId: string) => Promise<customPbnst | undefined>; }; export type ruseMapType = ruseMapState & ruseMapActions; @@ -90,5 +92,20 @@ export const ruseMapActionsExport: (set: any) => ruseMapActions = ( console.log(e); } }, + ruseMapDetail: async (ruseFcltId: string) => { + try { + let ruseDetail = await getFetch("wr", `/reuseFc/pubFc/${ruseFcltId}`); + if (ruseDetail.length >= 0) { + ruseDetail = ruseDetail.find( + (item: customPbnst) => item.pbnstRuseFcltId === ruseFcltId + ); + } + // 🔑 스토어 업데이트 대신 리턴 + return ruseDetail; + } catch (errorHasu) { + console.log(errorHasu); + throw errorHasu; // 호출부에서 catch 가능하도록 + } + }, }; }; diff --git "a/apps/wr/components/lib/func/\bmapUtil.ts" "b/apps/wr/components/lib/func/\bmapUtil.ts" new file mode 100644 index 000000000..41a8c09b4 --- /dev/null +++ "b/apps/wr/components/lib/func/\bmapUtil.ts" @@ -0,0 +1,19 @@ + + + + export const getFeatureCd = (featurePropertise:any, layerNm:string) => { + console.log('layerNm ', layerNm ) + + const featureCd = + layerNm === "하수재이용시설" + ? featurePropertise?.swtrmt_fclt_cd + : ["빗물이용시설", "중수도시설", "온배수시설", "수요처"].includes( + layerNm + ) + ? featurePropertise?.bdst_nm + : layerNm === "하수처리시설" + ? featurePropertise?.swtrmt_fclt_nm + : null; + + return featureCd; + }; \ No newline at end of file