메인 머지 이슈로 수정.

packages/common/business_components/src/ui/map/Gis.js

@@ -1,5 +1,6 @@
 import { Search } from 'lucide-react';
 import OlMap from 'ol/Map';
+import Overlay from 'ol/Overlay';
 import View from 'ol/View';
 import { defaults as defaultControls, OverviewMap } from 'ol/control';
 import { defaults } from 'ol/interaction';
@@ -7,12 +8,15 @@ import * as olProj from 'ol/proj';
 import { register } from 'ol/proj/proj4';
 import proj4 from 'proj4';
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import GisLonLat from './GisLonLat';
 import GisMapToggle from './GisMapToggle';
 import GisSelect from './GisSelect';
 import GisToolBar from './GisToolBar';
 import GisTree from './GisTree';
 import './lib/css/gis.common.css';
 import GisApp from './lib/gis.core';
+// import FacilityInfoPopup from './FacilityInfoPopup';
 
 export const GisContext = createContext({ gisCore: null, gisMap: null, treeData: null, checkedLayerIds: null });
 export const useGisContext = () => useContext(GisContext);
@@ -99,10 +103,8 @@ function Gis({
 	detailView: DetailView,
 	onFeatureSelect,
 	setIsSearchModalOpen,
-	onCheckedLayersChange,
-	setData
+	onCheckedLayersChange
 }) {
-	
 	const mapRef = useRef();
 	const [mapObject, setMapObject] = useState({});
 	const [tabVisible, setTabVisible] = useState(true);
@@ -219,7 +221,6 @@ function Gis({
 
 	// 지도 생성 및 초기화
 	useEffect(() => {
-		
 		if (!mapRef.current) return;
 		if (mapInstanceRef.current) return; // 이미 생성된 맵이 있다면 중단
 
@@ -326,6 +327,120 @@ function Gis({
 		}
 	}
 
+	// // 데이터 로드 및 팝업 생성 로직
+	// useEffect(() => {
+	// 	if (!mapInstanceRef.current) return; // 맵이 생성되지 않았으면 실행 안 함
+
+	// 	// 1. 팝업 데이터 가져오기 (feature.js의 getData와 유사)
+	// 	const fetchPopupData = async () => {
+	// 		// 실제 API 호출 로직으로 대체해야 합니다.
+	// 		// 예시: const response = await yourApiService.getFcltyWtCnt();
+	// 		// setFacilityInfoPopupData(response.data);
+
+	// 		// 임시 목업 데이터
+	// 		const mockData = [
+	// 			{ ftrIdn: 1, ftrCde: 'SA206', bplcNm: '처리장A', fcltyUseYn: 'Y', x: 127.005, y: 37.282, aCnt: 10, cCnt: 5, eCnt: 3, mCnt: 8, iCnt: 2 },
+	// 			{ ftrIdn: 2, ftrCde: 'SA112', bplcNm: '처리장B', fcltyUseYn: 'N', x: 127.010, y: 37.285, aCnt: 8, cCnt: 4, eCnt: 2, mCnt: 6, iCnt: 1 }
+	// 		];
+	// 		setFacilityInfoPopupData(mockData);
+	// 	};
+
+	// 	fetchPopupData();
+
+	// }, [mapInstanceRef.current]); // 맵 인스턴스가 생성된 후 한 번만 실행
+
+	// // 데이터가 변경되면 오버레이를 생성/업데이트하는 로직
+	// useEffect(() => {
+	// 	const map = mapInstanceRef.current;
+	// 	if (!map || facilityInfoPopupData.length === 0) return;
+
+	// 	// 기존 오버레이 정리
+	// 	facilityOverlaysRef.current.forEach(overlay => map.removeOverlay(overlay));
+	// 	facilityOverlaysRef.current = [];
+
+	// 	facilityInfoPopupData.forEach(data => {
+	// 		const popupId = `${data.ftrIdn}_${data.ftrCde}`;
+
+	// 		// 팝업을 담을 div 엘리먼트 생성
+	// 		const popupElement = document.createElement('div');
+	// 		popupElement.id = popupId;
+
+	// 		// OpenLayers Overlay 생성
+	// 		const position = olProj.transform([Number(data.x), Number(data.y)], GisApp.FROM_PROJ, GisApp.TO_PROJ);
+	// 		const overlay = new Overlay({
+	// 			element: popupElement,
+	// 			position: position,
+	// 			offset: [-75, -210], // 팝업 너비의 절반, 높이만큼 오프셋 조정
+	// 			positioning: 'bottom-center',
+	// 			className: 'facility-popup-overlay' // 필요시 공통 클래스 추가
+	// 		});
+
+	// 		map.addOverlay(overlay);
+	// 		facilityOverlaysRef.current.push(overlay);
+
+	// 		// React 컴포넌트를 popupElement에 렌더링
+	// 		const root = createRoot(popupElement);
+	// 		root.render(<FacilityInfoPopup data={data} />);
+	// 	});
+
+	// 	// 초기 가시성 업데이트
+	// 	updatePopupVisibility();
+
+	// }, [facilityInfoPopupData]); // 팝업 데이터가 변경될 때마다 실행
+
+	// // 레이어 가시성에 따라 팝업 가시성을 제어하는 함수
+	// const updatePopupVisibility = useCallback(() => {
+	// 	const map = mapInstanceRef.current;
+	// 	if (!map) return;
+
+	// 	const visibleLayers = new Set();
+	// 	map.getLayers().forEach(layer => {
+	// 		if (layer.getVisible()) {
+	// 			// feature.js의 로직처럼 typeName이나 ftrCde를 사용해 필터링
+	// 			const typeName = layer.get('typeName');
+	// 			if (typeName === 'VW_WTL_FCLTY_AS') { // 예시 레이어 이름
+	// 				visibleLayers.add(layer.get('ftrCde'));
+	// 			}
+	// 		}
+	// 	});
+
+	// 	facilityOverlaysRef.current.forEach(overlay => {
+	// 		const element = overlay.getElement();
+	// 		const ftrCde = element.querySelector('table')?.classList[0]; // FacilityPopup의 클래스에서 ftrCde 가져오기
+
+	// 		if (visibleLayers.has(ftrCde)) {
+	// 			element.style.display = '';
+	// 		} else {
+	// 			element.style.display = 'none';
+	// 		}
+	// 	});
+	// }, []);
+
+	// GisTree에서 체크 상태가 변경될 때 이 함수를 호출하도록 연결해야 합니다.
+	// 예시: GisTree 컴포넌트에 onCheck 콜백을 추가하고, 그 콜백에서 이 함수를 호출
+	// useEffect(() => {
+	// 	// 레이어 가시성이 변경될 때마다 팝업 가시성 업데이트
+	// 	const map = mapInstanceRef.current;
+	// 	if (!map) return;
+
+	// 	const handleLayerVisibilityChange = () => {
+	// 		updatePopupVisibility();
+	// 	};
+
+	// 	map.getLayers().on('change:length', handleLayerVisibilityChange);
+	// 	map.getLayers().forEach(layer => {
+	// 		layer.on('change:visible', handleLayerVisibilityChange);
+	// 	});
+
+	// 	return () => {
+	// 		// 클린업
+	// 		map.getLayers().un('change:length', handleLayerVisibilityChange);
+	// 		map.getLayers().forEach(layer => {
+	// 			layer.un('change:visible', handleLayerVisibilityChange);
+	// 		});
+	// 	};
+	// }, [updatePopupVisibility]);
+
 	// 체크된 레이어 정보를 처리하는 함수
 	const handleCheckedLayersChange = useCallback((checkedIds, checkedNodesData) => {
 		setTimeout(() => {
@@ -354,6 +469,8 @@ function Gis({
 						imageVisible={imgVisble}
 					/>
 
+					{/* <GisContent onFeatureSelect={handleFeatureSelect} isSearch={isSearch} isSearchModalOpen={isSearchModalOpen} setIsSearchModalOpen={setIsSearchModalOpen} /> */}
+
 					{/* DetailView가 존재할 때만 렌더링 isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
 					{isOpen && !isSearchModalOpen && (
 						<DetailView
@@ -371,6 +488,7 @@ function Gis({
 							onFeatureSelect={handleFeatureSelect}
 						/>
 					)}
+					{/* <GisLonLat /> */}
 					<GisToolBar />
 					<GisMapToggle />
 					<GisSelect onFeatureSelect={handleFeatureSelect} />