ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

지도 현재 만들어진것까지 수정 완료 추가로 만들것 확인해서 해야함

Browse Source
This commit is contained in:
leedj312
2025-08-06 17:57:22 +09:00
parent bb6bba4497
commit 7ea388b30a
8 changed files with 474 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx
+121
View File
@@ -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<any>(null);
const {
pbnMap,
ruseMapDetail,
rainMapDetile,
rswtMapDetile,
htdfMapDetile,
pbnMapDetaile,
} = useWrStore((state) => state);
const { pbnMapHeadList } = pbnMap;
const [isDetail, setIsDetail] = useState<any>(null);
const [layerNm, setLayerNm] = useState<string>();
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 ? (
<div className="fixed inset-0 w-screen h-screen m-0 p-0 overflow-auto bg-white">
{layerNm === "하수재이용시설" ? (
<PbnstSttnModal data={isDetail} />
) : layerNm === "하수처리시설" ? (
<div style={{ overflowX: "hidden" }}>
<div className="flex justify-between items-center mb-4">
<Title title="하수처리시설 상세정보" />
</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>
) : (
<></>
)}
</>
);
}
apps/wr/app/(with-layout)/map/mainMap/page.tsx
+91 -37
View File
@@ -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 { 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)
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)
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,20 +168,44 @@ 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 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;
@@ -165,19 +213,24 @@ const Map = () => {
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}
// />
// )
} 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] // 필요 시 의존성 넣기
},
[checkedLayers, checkedLayersData, featureData] // 필요 시 의존성 넣기
);
const closePopup = () => {
if (popupRef.current && !popupRef.current.closed) {
@@ -187,6 +240,7 @@ const Map = () => {
setFeatureData(null);
}
};
return (
<div className="bg-container">
<Gis
apps/wr/app/store/map/htdflMap/index.tsx
+26 -2
View File
@@ -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,7 +62,12 @@ export const htdfMapActionsExport: (set: any) => htdfMapActions = (
console.log(e);
}
},
htdfMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => {
htdfMapSearch: async (
page: number,
total: number,
cityOrSgg: string,
searchTxt?: string
) => {
try {
const htdfMapRes = await getFetchWithCount(
fetchType.WR,
@@ -85,5 +92,22 @@ export const htdfMapActionsExport: (set: any) => htdfMapActions = (
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 가능하도록
}
},
};
};
apps/wr/app/store/map/pbnstMap/index.tsx
+52 -32
View File
@@ -5,46 +5,44 @@ 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;
const hasuListFetch = async (page: number, pageTotal:number, reurnValue: ReturnType, searchNm?:string) => {
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`
reurnValue.sigunValue !== "0"
? reurnValue.sigunValue
: reurnValue.sidoValue
}/0/1/SW`;
} else if (reurnValue.partValue === "R") {
url += `${reurnValue.partValue}/${reurnValue.regionValue
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`
}/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`
url += `A/0/0/1/SW`;
}
if (searchNm && searchNm?.length > 0) {
url += "/" + searchNm
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 {
@@ -59,8 +57,8 @@ const data = checkWrRegListRes.filter((item:string) => item !== "")
export type pbnMapState = {
pbnMap: {
isInit:boolean,
pbnMapRes:pubHasuType[]
isInit: boolean;
pbnMapRes: pubHasuType[];
pbnMapCount: number;
pbnMapHeadList: TableUpperProps[];
};
@@ -68,6 +66,7 @@ export type pbnMapState = {
type pbnMapActions = {
pbnMapInit: (page: number, pageTotal: number, reurnValue: ReturnType) => void;
pbnMapDetaile: (featureCd: string, data: string) => Promise<pubHasuType | undefined>;
};
export type pbnMapType = pbnMapState & pbnMapActions;
@@ -77,18 +76,19 @@ export type pbnMapState = {
isInit: false,
pbnMapRes: [],
pbnMapCount: 1,
pbnMapHeadList:pubFacHeadListExport
pbnMapHeadList: pubFacHeadListExport,
},
};
export const pbnMapActionsExport: (set: any) => pbnMapActions = (
set: any
) => {
export const pbnMapActionsExport: (set: any) => pbnMapActions = (set: any) => {
return {
pbnMapInit: async (page: number, pageTotal:number, reurnValue: ReturnType) => {
pbnMapInit: async (
page: number,
pageTotal: number,
reurnValue: ReturnType
) => {
try {
const pubMapRes = await hasuListFetch(page,pageTotal,reurnValue)
const pubMapRes = await hasuListFetch(page, pageTotal, reurnValue);
set((state: pbnMapState) => {
return {
...state,
@@ -101,8 +101,28 @@ export type pbnMapState = {
};
});
} catch (e) {
console.log(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 가능하도록
}
}
},
};
};
apps/wr/app/store/map/rainMap/index.tsx
+21 -2
View File
@@ -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 가능하도록
}
}
}
};
apps/wr/app/store/map/rswtMap/index.tsx
+35 -6
View File
@@ -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[];
@@ -17,7 +19,13 @@ export type rswtMapState = {
type rswtMapActions = {
rswtMapInit: (page: number, total: number, cityOrSgg: string) => void;
rswtMapSearch: (page: number, total: number, cityOrSgg:string, searchTxt?:string) => void
rswtMapSearch: (
page: number,
total: number,
cityOrSgg: string,
searchTxt?: string
) => void;
rswtMapDetile: (featureCd: string) => Promise<customRswtBdst | undefined>;
};
export type rswtMapType = rswtMapState & rswtMapActions;
@@ -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,
@@ -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 가능하도록
}
},
};
};
apps/wr/app/store/map/ruseMap/index.tsx
+17
View File
@@ -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 가능하도록
}
},
};
};
apps/wr/components/lib/func/mapUtil.ts
+19
View File
@@ -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;
};