gistree 이미지 클릭이벤트 추가

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';
@@ -14,27 +15,53 @@ 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);
 
-function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = false, isMiniMap = false, setIsOpen, setFeatureData, featureData, searchView : SearchView, detailView: DetailView, onFeatureSelect, setIsSearchModalOpen }) {
+function Gis({
+	isOpen,
+	gisMaps,
+	isSearchModalOpen,
+	treeData = [],
+	isSearch = false,
+	isMiniMap = false,
+	setIsOpen,
+	setFeatureData,
+	featureData,
+	searchView: SearchView,
+	detailView: DetailView,
+	onFeatureSelect,
+	setIsSearchModalOpen,
+	onCheckedLayersChange
+}) {
 	const mapRef = useRef();
 	const [mapObject, setMapObject] = useState({});
 	const [tabVisible, setTabVisible] = useState(true);
+	const [layerNm, setLayerNm] = useState('')
 	// const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
 	// const [featureData, setFeatureData] = useState(null) // 선택된 피쳐 데이터
 	// const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태
 	const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []);
 	const mapInstanceRef = useRef(null);
 	const checkedLayerIds = useRef([]);
+	const [viewMode, setViewMode] = useState("detail");
+
+	// 팝업 데이터를 저장할 상태와 오버레이 참조를 저장할 ref 추가
+	// const [facilityInfoPopupData, setFacilityInfoPopupData] = useState([]);
+	// const facilityOverlaysRef = useRef([]);
+	// 체크된 레이어 상태 관리
+	const [checkedLayers, setCheckedLayers] = useState([]);
+	const [checkedLayersData, setCheckedLayersData] = useState([]);
+
 	let gisMap = null;
 	const closePopup = () => {
 		setIsOpen(false); // 팝업 닫기
 		setFeatureData(null)
 	};
 
-	// SearchModal, GisContent 등에서 호출
+	// Feature Click Event
 	const handleFeatureSelect = useCallback((data) => {
 		gisMap = mapInstanceRef.current;
 
@@ -89,8 +116,10 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 		setFeatureData(data);
 		setIsOpen(true);
 		setIsSearchModalOpen(false);
+		onFeatureSelect?.(data); // 선택된 피쳐 데이터 콜백 호출
 	}, [mapInstanceRef]);
 
+	// 지도 생성 및 초기화
 	useEffect(() => {
 		if (!mapRef.current) return;
 		if (mapInstanceRef.current) return; // 이미 생성된 맵이 있다면 중단
@@ -104,7 +133,7 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 		]);
 		register(proj4);
 
-		//맵 생성
+		// OpenLayers 지도 객체 생성
 		const map = new OlMap({
 			layers: [gisCore.baseLayers['base'], gisCore.baseLayers['satellite']],
 			renderer: 'webgl',
@@ -132,8 +161,8 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 
 		gisMaps.current = map
 
-		//미니맵
-		if(isMiniMap){
+		// 미니맵 추가
+		if (isMiniMap) {
 			const overviewMap = new OverviewMap({
 				layers: [GisApp.Module.core.baseMiniMapLayers['base']],
 				view: new View({
@@ -147,6 +176,7 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 			map.addControl(overviewMap);
 		}
 
+		// 스케일 컨트롤 및 베이스 레이어 설정
 		gisCore.__proto__.map = map;
 		gisCore.scaleControl();
 		gisCore.changeBaseLayer('base');
@@ -154,16 +184,20 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 		mapInstanceRef.current = map; // 생성 완료 플래그 설정
 	}, []);
 
+	// treeData 변경 시 레이어 코드 생성
 	useEffect(() => {
 		if (!treeData || treeData.length === 0) return;
 
+		// 기존 오버레이 및 레이어 모두 삭제
 		gisCore.deleteAllOverlay();
 		gisCore.deleteAllLayer();
 
+		// 트리 데이터를 레이어 코드 객체로 변환
 		const layerCode = gisCore.convertLayerInfosToLayerCode(treeData, 'lyrSn');
-		GisApp.layerCode = layerCode;
+		GisApp.layerCode = layerCode; // 전역 레이어 코드 설정
 
 		//setTreeData(data);
+		// 편집 가능한 레이어 목록 생성
 		const layerItems = getLayerItems(layerCode);
 		//setEditLayerItems(prev => [...layerItems])
 	}, [treeData]);
@@ -193,31 +227,164 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 		}
 	}
 
+	// // 데이터 로드 및 팝업 생성 로직
+	// 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(() => {
+			setCheckedLayers(checkedIds);
+			setCheckedLayersData(checkedNodesData);
+			onCheckedLayersChange?.(checkedIds, checkedNodesData);
+		  }, 0);
+	}, [onCheckedLayersChange]);
+
 	return (
 		<>
 			<GisContext.Provider value={{ gisCore, gisMap: mapInstanceRef.current, treeData, checkedLayerIds }}>
 				<div className="h-[calc(100vh-10rem)] flex relative">
 					<div ref={mapRef} className="gis-map flex-1 relative" style={{ height: '100%', padding: 0 }} />
-					<GisTree visible={tabVisible} setVisible={setTabVisible} />
-					
+					<GisTree
+						visible={tabVisible}
+						setVisible={setTabVisible}
+						onCheckedChange={handleCheckedLayersChange}
+						onLayerIconClick={(nodeNm)=>{setLayerNm(nodeNm); setIsOpen(true); setViewMode("detail")}}
+					/>
+
 					{/* <GisContent onFeatureSelect={handleFeatureSelect} isSearch={isSearch} isSearchModalOpen={isSearchModalOpen} setIsSearchModalOpen={setIsSearchModalOpen} /> */}
-					
-					{/* isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
-					{isOpen && featureData && !isSearchModalOpen && (
+
+					{/* DetailView가 존재할 때만 렌더링 isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
+					{isOpen && !isSearchModalOpen && (
 						<DetailView
 							featureData={featureData}
+							seletectedLayerNm={layerNm}
+							viewMode={viewMode}
 							onClose={closePopup} // 닫기 콜백 전달
 						/>
 					)}
-					<SearchView
-						open={isSearchModalOpen}
-						onOpenChange={setIsSearchModalOpen}
-						onFeatureSelect={onFeatureSelect}
-					/>
-					<GisLonLat/>
-					<GisToolBar/>
-					<GisMapToggle/>
-					<GisSelect onFeatureSelect={onFeatureSelect} />
+					{/* SearchView가 존재할 때만 렌더링 */}
+                {SearchView && (
+                    <SearchView
+                        open={isSearchModalOpen}
+                        onOpenChange={setIsSearchModalOpen}
+                        onFeatureSelect={handleFeatureSelect}
+                    />
+                )}
+					<GisLonLat />
+					<GisToolBar />
+					<GisMapToggle />
+					<GisSelect onFeatureSelect={handleFeatureSelect} />
 				</div>
 
 				{isSearch && (

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

@@ -1,15 +1,16 @@
-import GisApp from './lib/gis.core';
-import React, { useEffect, useState } from 'react';
-import { useGisContext } from './Gis';
-import { DndProvider } from "react-dnd";
 import {
-	Tree,
 	MultiBackend,
+	Tree,
 	getBackendOptions
 } from "@minoru/react-dnd-treeview";
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { DndProvider } from "react-dnd";
 
-export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes = () => { }, visible, setVisible }) {
+import { useGisContext } from './Gis';
+import GisApp from './lib/gis.core';
+
+export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes = () => { }, visible, setVisible, onCheckedChange, onLayerIconClick }) {
 	const { gisCore, treeData } = useGisContext();
 	const [checked, setChecked] = useState([]);
 	const [expanded, setExpanded] = useState([]);
@@ -24,19 +25,31 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 		}
 	}, [treeData]);
 
+	// 트리 노드 체크 시 레이어 표시/숨김
 	useEffect(() => {
 		if (nodes.length > 0) {
+			// 기본으로 체크된 노드들 찾기
 			const defaultChecked = getDefaultCheckedNodes(nodes);
 			setChecked(defaultChecked);
+			console.log('defaultChecked : ', defaultChecked);
+
+			// 기본으로 확장된 노드들 설정
 			const defaultExpanded = Array.from(new Set([
 				...defaultChecked,
 				...defaultChecked.flatMap((id) => getAncestors(id, nodes))
 			]));
 			setExpanded(defaultExpanded);
-			gisCore.setLayerOnMap(defaultChecked, true);
-		}
-	}, [nodes]);
 
+			// 기본 체크된 레이어들을 지도에 표시
+			gisCore.setLayerOnMap(defaultChecked, true);
+
+			// 초기 체크된 레이어 정보를 상위로 전달
+			const defaultCheckedNodesData = nodes.filter(node => defaultChecked.includes(node.id));
+			onCheckedChange?.(defaultChecked, defaultCheckedNodesData);
+		}
+	}, [nodes]); // onCheckedChange를 의존성에 추가
+
+	// 초기 표시 여부가 'Y'인 레이어들 찾기
 	const getDefaultCheckedNodes = (nodes, values = []) => {
 		for (let i = 0; i < nodes.length; i++) {
 			const node = nodes[i];
@@ -94,6 +107,11 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 			const unchecked = allIds.filter((nid) => !newChecked.includes(nid));
 			gisCore.setLayerOnMap(newChecked, true);
 			gisCore.setLayerOnMap(unchecked, false);
+
+			// 체크된 노드 정보와 함께 노드 데이터를 상위로 전달
+			const checkedNodesData = nodes.filter(node => newChecked.includes(node.id));
+			onCheckedChange?.(newChecked, checkedNodesData);
+
 			return newChecked;
 		});
 	};
@@ -170,7 +188,10 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 		image.src = canvas.toDataURL('image/png');
 		return image;
 	};
-	
+	const handleLayerImgClick = (nodeNm) => {
+		console.log('click!', nodeNm)
+		onLayerIconClick(nodeNm)
+	}
 	if (!treeData || treeData.length === 0) return null;
 
 	return (
@@ -203,7 +224,7 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 									<input type="checkbox" checked={checked.includes(node.id)} onChange={() => handleCheck(node.id)} className="cursor-pointer" />
 									{node.icon && <span>{node.icon}</span>}
 									<span className="text-[1.3rem] font-medium text-label">{node.text}</span>
-									{depth > 0 && <span><img className="cursor-pointer w-5 h-5" src='/images/map/layericon/Layer_Select_BTN.png' onClick={()=>{}} alt={node.text}></img></span>}
+									{depth > 0 && <span><img className="cursor-pointer w-5 h-5" src='/images/map/layericon/Layer_Select_BTN.png' onClick={()=>{handleLayerImgClick(node.text)}} alt={node.text}></img></span>}
 								</div>
 							)}
 							sort={(a, b) => {