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

Merge remote-tracking branch 'origin/main' into iipbs/sn/dev

Browse Source
This commit is contained in:
swcho
2025-09-04 09:44:06 +09:00
parent ab6279a449 a03359540a
commit d99dbfee36
17 changed files with 941 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/(map-layout)/map/mainMap/page.tsx
+169 -28
View File
@@ -15,9 +15,13 @@ import {
getWrLayerNm,
} from "@/components/lib/func/mapUtil";
import toast, { Toaster } from "react-hot-toast";
import createOverlayManager from "@common/business_components/ui/map/GisOverlay";
import { createRoot } from "react-dom/client";
import WrOverLay from "@/components/ui/map/wrOverLay/wrOverLay";
const Map = () => {
const { comMap } = useWrStore((state) => state);
const {code, comMap ,rainMapDetile ,rswtMapDetile,getRuseMaplListReturn,pbnMapDetaile,ldrmntMapDetile,htdfMapDetile,coSttnMapDetail} = useWrStore((state) => state);
const { isFeatured } = comMap;
const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
const gisMaps = useRef<any | null>(null);
@@ -79,11 +83,10 @@ const Map = () => {
// SearchModal, GisContent 등에서 호출
const onFeatureFocus = (data: any) => {
console.log('data',data)
console.log("data", data);
};
const onFeatureSelect = (data: any ,popUpClick?:boolean) => {
const onFeatureSelect = (data: any, popUpClick?: boolean) => {
const map = gisMaps.current;
if (!map) {
console.warn("지도가 초기화되지 않았습니다.");
@@ -100,21 +103,22 @@ const Map = () => {
// 2. data가 OpenLayers Feature 인스턴스인지 확인
let foundFeature: any = null;
let featureId = data.fid;
if(popUpClick){
if (popUpClick) {
const layerName = getWrLayerNm(data);
const featurePk = getWrFeaturePk(layerName ?? "");
// 재이용시설
if (featurePk) {
const lastPk = layerName==='tb_wr_ruse_fclt_dmd_co'? data[featurePk].replaceAll("-", "") : data[featurePk]
const lastPk =
layerName === "tb_wr_ruse_fclt_dmd_co"
? data[featurePk].replaceAll("-", "")
: data[featurePk];
featureId = `${layerName}.${lastPk}`;
} else {
console.warn("해당 피처는 선택된 레이어에서 찾을수 없습니다.");
}
}else{
featureId=getClickFeatureId(data)
} else {
featureId = getClickFeatureId(data);
}
map
.getLayers()
@@ -143,9 +147,9 @@ const Map = () => {
}
select.selectFeature(foundFeature, true);
} else {
// toast.error('위치정보를 찾을수 없습니다')
// toast.error('위치정보를 찾을수 없습니다')
console.warn("OpenLayers Feature를 찾을 수 없습니다:");
console.log("foundFeature :", foundFeature );
console.log("foundFeature :", foundFeature);
console.warn("featureId : ", featureId);
console.warn("data : ", data);
console.warn(": 끝");
@@ -157,14 +161,21 @@ const Map = () => {
setIsOpen(true);
setIsSearchModalOpen(false);
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)
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);
}
};
@@ -178,14 +189,12 @@ const Map = () => {
const bc = new BroadcastChannel("mapDetailPopUp");
bc.onmessage = (event) => {
if (event.data.type === "SELECT_FEATURE") {
onFeatureSelect(event.data.feature,true);
onFeatureSelect(event.data.feature, true);
closePopup();
}
};
}, []);
const renderDetailView = useCallback(
(props: any) => {
const map = gisMaps.current;
@@ -202,11 +211,10 @@ const Map = () => {
isFeature.constructor === Object
)
) {
const layerNm = getSelectedLayers(isFeature,gisMaps);
const safeProps = isFeature.getProperties();
const layerNm = getSelectedLayers(isFeature, gisMaps);
const safeProps = isFeature.getProperties();
const featureCd = getFeatureCd(safeProps, String(layerNm));
if(layerNm)
featurePopUpOpen(layerNm,featureCd,popupDetailRef)
if (layerNm) featurePopUpOpen(layerNm, featureCd, popupDetailRef);
}
} else {
console.log(" data확인 필요");
@@ -239,6 +247,139 @@ const Map = () => {
}
};
const OVERLAY_MIN_ZOOM = 16;
const OVERLAY_COORD_PRECISION = 5;
const OVERLAY_MAX_PER_VIEW = 800;
const overlayManagersRef = useRef<any[]>([]);
const overlayActiveRef = useRef(false);
const moveEndDebounceRef = useRef<number | null>(null);
// 반환: Promise<HTMLDivElement | null>
const overlayFormatter = async (feature: any, props: any) => {
const p = props || {};
const featureId =
feature.getId?.() ?? p?.id ?? p?.fid ?? p?.ftrIdn ?? '';
if (!featureId) return null;
const tableId = String(featureId).split('.')[0]??'';
const fcltCd = getFeatureCd(props, tableId);
if (!fcltCd) return null;
let data: any = null;
let title = '';
if (tableId === 'tb_il_swage_prcs_fclt') { data = await pbnMapDetaile(fcltCd); title = '하수처리시설'; }
else if (tableId === 'tb_wr_bdst_ruse_fclt') { data = await getRuseMaplListReturn(fcltCd); title = '하수재이용시설'; }
else if (tableId === 'tb_wr_rnwtr_utztn_fclt'){ data = await rainMapDetile(fcltCd); title = '빗물이용시설'; }
else if (tableId === 'tb_wr_rswtr_fclt') { data = await rswtMapDetile(fcltCd); title = '중수도시설'; }
else if (tableId === 'tb_wr_htdfl_fclt') { data = await htdfMapDetile(fcltCd); title = '온배수시설'; }
else if (tableId === 'tb_wr_ruse_fclt_dmd_co'){ data = await coSttnMapDetail(fcltCd); title = '수요처'; }
else if (tableId === 'tb_wr_tmpr_dmd_co') { data = await ldrmntMapDetile(fcltCd); title = '잠재수요처'; }
const empty =
data == null ||
(Array.isArray(data) && data.length === 0) ||
(typeof data === 'object' && !Array.isArray(data) && Object.keys(data).length === 0);
if (empty) return null;
const div = document.createElement('div');
const root = createRoot(div);
(div as any).__dispose = () => { try { root.unmount(); } catch {} };
root.render(<WrOverLay title={title} data={data} code={code} />);
return div; // ← 데이터 있을 때만 HTMLElement 반환
};
const destroyAllManagers = () => {
overlayManagersRef.current.forEach(m => { try { m.destroy(); } catch {} });
overlayManagersRef.current = [];
overlayActiveRef.current = false;
};
const mountOverlayManagers = () => {
const map = gisMaps.current;
if (!map) return;
// 이전 것 정리
destroyAllManagers();
// 체크된 벡터 레이어만 골라 매니저 생성
const checkedSet = new Set(checkedLayers.map(String));
const layers: any[] = map.getLayers().getArray();
const targets = layers.filter((layer: any) => {
const src = layer.getSource?.();
const isVector = src && typeof src.getFeatures === "function";
const id = String(layer.get?.("lyrSn") ?? layer.get?.("id") ?? "");
return isVector && layer.getVisible?.() && checkedSet.has(id);
});
targets.forEach((layer: any) => {
const mgr = createOverlayManager(map, layer, overlayFormatter, {
coordPrecision: OVERLAY_COORD_PRECISION,
maxOverlaysPerViewport: OVERLAY_MAX_PER_VIEW,
});
mgr.mount(); // 리스너 1회 등록
mgr.enable(); // 표시 + 1회 sync
overlayManagersRef.current.push(mgr);
});
overlayActiveRef.current = overlayManagersRef.current.length > 0;
};
useEffect(() => {
const map = gisMaps.current;
if (!map) return;
const z = map.getView()?.getZoom?.() ?? 0;
if (z < OVERLAY_MIN_ZOOM) {
// 저줌에선 그냥 안 보이게만
overlayManagersRef.current.forEach(m => { try { m.disable({ clear:true, delayed:true }); } catch {} });
return;
}
mountOverlayManagers();
return () => { destroyAllManagers(); };
}, [checkedLayers]);
useEffect(() => {
const map = gisMaps.current;
if (!map) return;
const onMoveStart = () => {
// 숨기기만 (리스너/DOM 대량 제거 X)
overlayManagersRef.current.forEach(m => { try { m.disable({ clear:false }); } catch {} });
if (moveEndDebounceRef.current) { clearTimeout(moveEndDebounceRef.current); moveEndDebounceRef.current = null; }
};
const onMoveEnd = () => {
const z = map.getView()?.getZoom?.() ?? 0;
const active = overlayActiveRef.current;
if (moveEndDebounceRef.current) clearTimeout(moveEndDebounceRef.current);
moveEndDebounceRef.current = window.setTimeout(() => {
if (z < OVERLAY_MIN_ZOOM) {
if (active) overlayManagersRef.current.forEach(m => { try { m.disable({ clear:true, delayed:true }); } catch {} });
return;
}
if (!active) {
mountOverlayManagers();
} else {
// 다시 보이고 1회만 동기화
overlayManagersRef.current.forEach(m => { try { m.enable(); m.syncOverlays(); } catch {} });
}
}, 180) as unknown as number;
};
map.on("movestart", onMoveStart);
map.on("moveend", onMoveEnd);
return () => {
map.un("movestart", onMoveStart);
map.un("moveend", onMoveEnd);
if (moveEndDebounceRef.current) { clearTimeout(moveEndDebounceRef.current); moveEndDebounceRef.current = null; }
};
}, [checkedLayers]);
return (
<div className="bg-container">
<Gis
apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export default function MapFeaturePopup() {
if (layerNm === "tb_wr_bdst_ruse_fclt") {
setIsDetail(isFeatureCd);
} else if (layerNm === "tb_il_swage_prcs_fclt") {
pbnMapDetaile(isFeatureCd, isFeatureCd).then((res) => {
pbnMapDetaile(isFeatureCd).then((res) => {
setIsDetail(res);
});
} else if (layerNm === "tb_wr_rnwtr_utztn_fclt") {
apps/wr/app/store/common/code/basicCode.tsx
+1
View File
@@ -211,6 +211,7 @@ export const rswtPrscCdMthdCd = [
},
{ val: "소독(염소, UV 등)", text: "소독(염소, UV 등)" },
{ val: "기타", text: "기타" },
{ val: "확인불가", text: "확인불가" },
];
export const htdPowerMthdCd= [
apps/wr/app/store/map/pbnstMap/index.tsx
+4 -5
View File
@@ -77,7 +77,6 @@ type pbnMapActions = {
) => void;
pbnMapDetaile: (
featureCd: string,
data: string
) => Promise<pubHasuType | undefined>;
};
@@ -117,11 +116,11 @@ export const pbnMapActionsExport: (set: any) => pbnMapActions = (set: any) => {
console.log(e);
}
},
pbnMapDetaile: async (featureCd: string, data: string) => {
pbnMapDetaile: async ( featureCd: string) => {
try {
const hasuRes = await postFectch(
`/prcsFclt/ruseInfo/1/20/A/0/0/1/SW/${featureCd}`,
[data],
`/prcsFclt/ruseInfo/1/1/A/0/0/1/SW/`,
[featureCd],
fetchType.COMMON
);
const filteredData = hasuRes.data.map((item: any) => {
@@ -131,7 +130,7 @@ export const pbnMapActionsExport: (set: any) => pbnMapActions = (set: any) => {
ruse: item.ruse === false ? "N" : "Y",
};
});
return filteredData;
return filteredData[0];
} catch (error) {
console.log(error);
throw error; // 호출부에서 catch 가능하도록
apps/wr/app/store/map/rainMap/index.tsx
-2
View File
@@ -114,8 +114,6 @@ export const rainMapActionsExport: (set: any) => rainMapActions = (
},
rainMapDetile: async (featureCd: string) => {
try {
console.log('featureCd ', featureCd)
const rainDetail = await getFetch(fetchType.WR,
`/reuseFc/rainyInfoList/1/3/0/${featureCd}` )
apps/wr/app/store/map/ruseMap/index.tsx
+63 -16
View File
@@ -42,8 +42,8 @@ type ruseMapActions = {
fclts: string[],
fcltNm: string
) => void;
ruseMapDetail: (ruseFcltId: string) => Promise<customPbnst | undefined>;
getRuseMaplList: (bscFctCd: string) => void;
getRuseMaplListReturn: (bscFctCd: string) => Promise<customPbnst | undefined>;
};
export type ruseMapType = ruseMapState & ruseMapActions;
@@ -106,21 +106,7 @@ 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 가능하도록
}
},
getRuseMaplList: async (bscFctCd: string) => {
try {
const ruseDetailList = await getFetch(
@@ -204,5 +190,66 @@ export const ruseMapActionsExport: (set: any) => ruseMapActions = (
console.log(e);
}
},
getRuseMaplListReturn: async (bscFctCd: string) => {
try {
const ruseDetailList = await getFetch(
fetchType.WR,
`/reuseFc/pubFc/${bscFctCd}`
);
const year = new Date().getFullYear();
const data = [bscFctCd];
const rusePrfList = await postFectch(
`/reuseFc/pubDetailList/${year}/0/1/10`,
data,
fetchType.WR
);
const dataList = ruseDetailList.map((ruse) => {
const matchRuse = rusePrfList?.data.find(
(prf) => prf.pbnstRuseFcltId === ruse.pbnstRuseFcltId
);
const usage = matchRuse.prfList.reduce(
(acc, cur) => {
acc.inUsage +=
cur.wshwtr +
cur.coolUswtr +
cur.cleanUswtr +
cur.drwtUswtr +
cur.dltnUswtr +
cur.ithlRswtr +
cur.ithlEtcUswtr +
cur.cleanToilUswtr +
cur.resn;
acc.outUsage +=
cur.lndwtr +
cur.hydUswtr +
cur.ugwtChr +
cur.farmUswtr +
cur.rvrKeepUswtr +
cur.indstUswtr;
acc.total = acc.inUsage + acc.outUsage;
return acc;
},
{ total: 0, inUsage: 0, outUsage: 0 }
);
return {
...ruse,
prfList: matchRuse.prfList,
inUsage: usage?.inUsage,
outUsage: usage?.outUsage,
};
});
return dataList
} catch (errorHasu) {
console.log(errorHasu);
throw errorHasu; // 호출부에서 catch 가능하도록
}
}
};
};
apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx
+2 -2
View File
@@ -18,8 +18,8 @@ const rswtrObjSchema = z.object({
filtrTrtmfctProcs: z.string({ required_error: validationMessages.required("주요처리공정") }).min(1, { message: validationMessages.required("주요처리공정") }),
filtrTrtmfctUsgCd: z.string().default("").nullish(),
rswtrUsqty: z.number().default(0),
altUswtrUtztnYn: z.enum(["Y", "N"]).nullish(), //안쓰는값
altUswtrKndCd: z.string().default("").nullish(), //안쓰는값
//altUswtrUtztnYn: z.enum(["Y", "N"]).nullish(), //안쓰는값
// altUswtrKndCd: z.string().default("").nullish(), //안쓰는값
altUswtrUtztnQnt: z.number().default(0), //안쓰는값
altUswtrIdntyMthdCd: z.string().default("").nullish(), //안쓰는값
rgtr: z.string().nullish().default(null),
apps/wr/components/lib/func/mapUtil.ts
+95 -21
View File
@@ -1,3 +1,5 @@
import { formatCommaNumber, formatPhoneNumber } from "./commom";
const wrLayerList = [
{ text: "tb_il_swage_prcs_fclt", val: "bscFctCd" },
{ text: "tb_wr_bdst_ruse_fclt", val: "pbnstRuseFcltId" },
@@ -26,8 +28,6 @@ const wrFeaturePK = [
// { text: "잠재수요처", val: "tb_wr_tmpr_dmd_co" },
export const getFeatureCd = (featurePropertise: any, layerNm: string) => {
console.log('featurePropertise ', featurePropertise)
const featureCd =
layerNm === "tb_wr_bdst_ruse_fclt"
? featurePropertise?.swtrmt_fclt_cd
@@ -39,32 +39,30 @@ export const getFeatureCd = (featurePropertise: any, layerNm: string) => {
].includes(layerNm)
? featurePropertise?.bdst_nm
: layerNm === "tb_il_swage_prcs_fclt"
? featurePropertise?.swtrmt_fclt_nm
: layerNm === "tb_wr_ruse_fclt_dmd_co"?
featurePropertise?.bdst_info_sn
: null;
? featurePropertise?.swtrmt_fclt_cd
: 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("지도가 초기화되지 않았습니다.");
@@ -97,11 +95,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 (
//빗물이용시설, 중수도시설
@@ -124,7 +122,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"
@@ -134,8 +136,8 @@ export function featurePopUpOpen(layerNm:string,featureCd:string,popupDetailRef)
String(layerNm) === "tb_wr_bdst_ruse_fclt"
? Math.floor(window.innerHeight - 100)
: String(layerNm) === "tb_wr_ruse_fclt_dmd_co"
?Math.floor(window.innerHeight - 430)
: Math.floor(window.innerHeight - 300); // 150px 여백 확보; // calc(100% - 70px)
? Math.floor(window.innerHeight - 430)
: Math.floor(window.innerHeight - 300); // 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 `;
@@ -145,4 +147,76 @@ export function featurePopUpOpen(layerNm:string,featureCd:string,popupDetailRef)
"지도 시설 상세정보 팝업",
popupOptions
);
}
}
export const getOverLayObj = (fclType: string, data: any,code?:any) => {
let newObj = {};
let title = "";
if (fclType === "하수재이용시설") {
newObj = {
"시설용량(톤/일)": formatCommaNumber(data?.fcltCpct) ??'확인불가',
"재이용률(%)": (data?.fcltCpct / data?.bscFctCpc)||0,
"장내용수(m³/년)": formatCommaNumber(data?.inUsage) ?? '확인불가',
"장외용수(m3/년)":formatCommaNumber(data?.outUsage) ?? '확인불가',
// 수요처: data?.reuseBuilding[0]?.rainyObj.pntfColArea ?? '확인불가',
};
title = data?.bdstNm ?? '확인불가';
} else if (fclType === "하수처리시설") {
newObj = {
"시설용량(톤/일)": formatCommaNumber(data?.fctCpc) ?? '확인불가',
지역구분: data?.efflWqltStndrdNm ?? '확인불가',
재이용여부: data?.rswtrYn ?? '확인불가',
"재이용시설 등록여부": data?.ruse ?? '확인불가',
};
title = data?.bscFctNm ?? '확인불가';
} else if (fclType === "빗물이용시설" ) {
newObj = {
건물용도: code?.bdstUsgCd.find((item) => item.val=== String(data?.reuseBuilding[0].bdstUsgCd) )?.text ?? '확인불가',
설치완료일: data?.reuseBuilding[0]?.instlCmptnDt ?? '확인불가',
처리시설유무: data?.reuseBuilding[0]?.rainyObj.filtrTrtmfctYn ?? '확인불가',
"처리시설용량(m³/일)": formatCommaNumber(data?.reuseBuilding[0]?.rainyObj.filtrTrtmfctCpct) ?? '확인불가',
"저류조용량(m³)": formatCommaNumber(data?.reuseBuilding[0]?.rainyObj.pntfColArea) ?? '확인불가',
};
title = data?.bdstNm ?? '확인불가';
} else if (fclType === "중수도시설") {
newObj = {
건물용도: code?.bdstUsgCd.find((item) => item.val===String(data?.reuseBuilding[0].bdstUsgCd) )?.text ?? '확인불가',
설치완료일: data?.reuseBuilding[0]?.instlCmptnDt ?? '확인불가',
"주요 처리공정": code?.rswtPrscCdMthdCd.find((item) => item.val===data?.reuseBuilding[0]?.rswtrObj.filtrTrtmfctProcs)?.text ?? '확인불가',
원수종류: code?.orgwtKndCd.find((item) => item.val === data?.reuseBuilding[0]?.rswtrObj.orgwtKndCd)?.text ?? '확인불가',
//이용용도: isCode.filtrTrtmfctUsgCd data?.reuseBuilding[0]?.rswtrObj.altUswtrKndCd ?? '확인불가',
};
title = data?.bdstNm ?? '확인불가';
} else if (fclType === "온배수시설") {
newObj = {
미정: '확인불가',
// '설치완료일': data?.reuseBuilding[0]?.instlCmptnDt??'',
// '처리시설유무': data?.reuseBuilding[0]?.rainyObj.filtrTrtmfctYn??'',
// '처리시설용량(m³/일)': data?.reuseBuilding[0]?.rainyObj.filtrTrtmfctCpct??'',
// '저류조용량(m³)': data?.reuseBuilding[0]?.rainyObj.pntfColArea??'',
};
title = data?.bdstNm ?? '확인불가';
} else if (fclType === "수요처") {
newObj = {
'사업자등록번호': data?.dmdInfoId??'',
'주소': data?.daddr??'',
'전화번호': formatPhoneNumber(data?.telno)??'',
};
title = data?.dmdCoNm ?? '확인불가';
} else if (fclType === "잠재수요처") {
newObj = {
공장구분: data?.fctrySe ?? '확인불가',
설립구분: data?.fndnSe ?? '확인불가',
업종명: data?.tpbizNm ?? '확인불가',
생산폼목: data?.prdctnItem ?? '확인불가',
};
title = data?.dmdCoNm ?? '확인불가';
}
return { title, newObj };
};
apps/wr/components/ui/map/wrOverLay/WrOverLayRuse/WrOverLayRuse.tsx
+88
View File
@@ -0,0 +1,88 @@
"use client";
import { useEffect, useState } from "react";
import WrOverLayTable from "../WrOverLayTable/WrOverLayTable";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@common/components/ui";
import { getOverLayObj } from "@/components/lib/func/mapUtil";
type RuseTabData = {
data: Record<string, string>;
tabData:{
pbnstRuseFcltId: string;
ruseUtztnFcltNm: string;
}
}
export default function WrOverLayRuse({ overLayData }: { overLayData: any }) {
const [fcltTab, setFcltTab] = useState<string>("");
const [ruseData, setRuseData] = useState<RuseTabData[]>([]as RuseTabData[]);
// useEffect(() => {
// const detail = overLayData.find((list) => list.pbnstRuseFcltId === fcltTab);
// if (detail) setIsDetail(detail);
// }, [fcltTab, overLayData]);
useEffect(() => {
if (overLayData && overLayData[0]) {
setFcltTab(overLayData[0].pbnstRuseFcltId);
const newRuseData= overLayData.map((ruse) =>{
const isData = getOverLayObj( '하수재이용시설',ruse);
return {
data: isData.newObj,
tabData:{
pbnstRuseFcltId: ruse.pbnstRuseFcltId,
ruseUtztnFcltNm: ruse.ruseUtztnFcltNm
}
}
})
setRuseData(newRuseData);
}
}, [overLayData]);
if (!(overLayData && overLayData[0])) return;
return (
<>
<div>
<div className="bg-sky-600 text-white text-center font-semibold py-2 text-2xl">
</div>
<Tabs value={fcltTab} onValueChange={setFcltTab}>
<TabsList className="mt-2 mb-2 gap-6 flex flex-wrap">
{ruseData?.map((item, index) => {
return (
<TabsTrigger
key={item.tabData.pbnstRuseFcltId + index}
className="text-center !text-base size-3/12"
value={item.tabData.pbnstRuseFcltId}
>
{item.tabData.ruseUtztnFcltNm}
</TabsTrigger>
);
})}
</TabsList>
{ruseData?.map((item) => (
<TabsContent
key={item.tabData.pbnstRuseFcltId}
className="flex-1 px-4 py-3"
value={item.tabData.pbnstRuseFcltId}
>
<div className="mb-4">
<WrOverLayTable overLayData={item.data} />
</div>
</TabsContent>
))}
</Tabs>
</div>
</>
);
}
apps/wr/components/ui/map/wrOverLay/WrOverLayTable/WrOverLayTable.tsx
+33
View File
@@ -0,0 +1,33 @@
import { Table, TableBody, TableCell, TableRow } from "@common/components/ui";
export default function WrOverLayTable({overLayData}:{overLayData:any,}){
return(
<>
<Table>
<TableBody>
{Object.entries(overLayData).map(([key, value]) => (
<TableRow key={key}>
<TableCell className=" w-1/3 bg-slate-100 text-slate-800 font-medium text-sm align-middle border border-slate-300">
{" "}
{key}{" "}
</TableCell>
<TableCell
className={
"w-1/3 bg-white text-right pr-3 text-sm align-middle border border-slate-300"
}
>
{" "}
{String(value)}{" "}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</>
)
}
apps/wr/components/ui/map/wrOverLay/wrOverLay.tsx
+120
View File
@@ -0,0 +1,120 @@
"use client";
import { getOverLayObj } from "@/components/lib/func/mapUtil";
import { Card } from "@common/business_components/ui/chart/lib/card";
import { useEffect, useRef, useState } from "react";
import WrOverLayTable from "./WrOverLayTable/WrOverLayTable";
import WrOverLayRuse from "./WrOverLayRuse/WrOverLayRuse";
import Draggable from "react-draggable";
export default function WrOverLay({
title,
data,
code,
}: {
title: string;
data: any;
code: any;
}) {
const [newOverLayData, setNewOverLayData] = useState<Record<string, string>>(
{}
);
const [typeTitle, setTypeTitle] = useState<string>("");
const [pos, setPos] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
const [open, setOpen] = useState(true);
const bubbleLabel = title?.[0] ?? "•";
const dragRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (title !== "하수재이용시설" && data) {
const overRayData = getOverLayObj(title, data, code);
setTypeTitle(overRayData?.title ?? "");
setNewOverLayData(overRayData.newObj ?? {});
}
}, [title, data]);
return (
<>
{open ? (
<Draggable
position={pos}
nodeRef={dragRef}
onDrag={(e, data) => setPos({ x: data.x, y: data.y })}
>
<div ref={dragRef}>
<Card className="w-[320px] p-0 shadow-md rounded-xl overflow-hidden border border-slate-300 relative">
{/* 헤더: 제목 바 + 우측 정렬 버튼 (절대배치 제거, 타이틀 중앙 정렬 유지) */}
<div className="bg-sky-600 text-white font-semibold py-2 text-xl">
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-2 px-2">
{/* 좌측 스페이서: 우측 버튼과 동일한 너비를 차지하도록 동일 버튼을 투명하게 복제 */}
<div className="opacity-0 pointer-events-none">
<div className="flex gap-2">
<button
onClick={() => setPos({ x: 0, y: 0 })}
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
title="원위치"
>
↺
</button>
<button
onClick={() => setOpen(false)}
aria-label="축소"
title="축소"
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
>
–
</button>
</div>
</div>
{/* 중앙 타이틀 */}
<div className="text-2xl text-center truncate">
{typeTitle + "(" + title + ")"}
</div>
{/* 우측 실제 버튼 영역 */}
<div className="flex gap-2 justify-end">
<button
onClick={() => setPos({ x: 0, y: 0 })}
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
title="원위치"
>
↺
</button>
<button
onClick={() => setOpen(false)}
aria-label="축소"
title="축소"
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
>
–
</button>
</div>
</div>
</div>
{/* 본문 */}
{title === "하수재이용시설" ? (
<WrOverLayRuse overLayData={data ?? []} />
) : (
<WrOverLayTable overLayData={newOverLayData} />
)}
</Card>
</div>
</Draggable>
) : (
<button
onClick={() => setOpen(true)}
aria-label="확장"
title={title || "정보 보기"}
className="w-[30px] h-[30px] bg-white font-bold shadow flex items-center justify-center border border-slate-300"
>
{bubbleLabel}
</button>
)}
</>
);
}
apps/wr/package.json
+1
View File
@@ -25,6 +25,7 @@
"next": "15.1.7",
"ol": "^7.3.0",
"ol-ext": "^4.0.11",
"react-draggable": "^4.5.0",
"react-hook-form": "^7.54.2",
"react-hot-toast": "^2.5.2",
"react-i18next": "^15.6.0",