feat: SearchModal 에서의 UiTable 클릭 시 Gis 지도로 이동 및 zoom, 상세정보 보여주는 Click Event 구현

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

@@ -36,12 +36,76 @@ function Gis({ treeData = [], isSearch = false }) {
 	};
 
 	// SearchModal, GisContent 등에서 호출
-	const handleFeatureSelect = (data) => {
-		console.log('check',data)
-		setFeatureData(data); // 선택된 피처 데이터 저장
-		setIsOpen(true); // 팝업 열기
-		setIsSearchModalOpen(false); // SearchModal 닫기
-	};
+	const handleFeatureSelect = useCallback((data) => {
+		gisMap = mapInstanceRef.current;
+
+		if (!gisMap) {
+			console.warn('지도가 초기화되지 않았습니다.');
+			return;
+		}
+
+		// 항상 같은 select 객체 사용
+		const select = GisApp.Module.select;
+		if (!select) return;
+
+		// 1. 기존 선택 초기화
+		select.resetSelectedFeature();
+
+		// 2. data가 OpenLayers Feature 인스턴스인지 확인
+		let foundFeature = null;
+		if (data && typeof data.getGeometry === 'function' && typeof data.setStyle === 'function') {
+			// 이미 Feature 인스턴스라면 그대로 사용
+			foundFeature = data;
+		} else {
+			// 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용
+			const featureId = data.fid || data.ftrIdn || data.id;
+			gisMap.getLayers().getArray().forEach(layer => {
+				const source = layer.getSource?.();
+				if (source?.getFeatureById) {
+					const feature = source.getFeatureById(String(featureId).trim());
+					if (feature) foundFeature = feature;
+				}
+			});
+		}
+
+		// 3. 피처 선택
+		if (foundFeature) {
+			let geometry = foundFeature.getGeometry();
+			if (geometry) {
+				let extent = geometry.getExtent();
+
+				// // EPSG:4326 좌표계로 추정되는 경우(값이 위도/경도 범위)
+				// console.log('before extent', extent);
+				// const is4326 =
+				// 	extent[0] >= -90 && extent[0] <= 90 &&
+				// 	extent[1] >= -180 && extent[1] <= 180 &&
+				// 	extent[2] >= -90 && extent[2] <= 90 &&
+				// 	extent[3] >= -180 && extent[3] <= 180;
+				// if (is4326) {
+				// 	// extent: [위도, 경도, 위도, 경도] → [경도, 위도, 경도, 위도]로 순서 변경
+				// 	const reorderedExtent = [extent[1], extent[0], extent[3], extent[2]];
+				// 	// EPSG:4326 extent를 EPSG:3857로 변환
+				// 	extent = olProj.transformExtent(reorderedExtent, 'EPSG:4326', 'EPSG:3857');
+				// 	console.log('after extent', extent);
+				// }
+
+				gisMap.getView().fit(extent, {
+					duration: 300,
+					padding: [50, 50, 50, 50],
+					maxZoom: 16,
+					constrainResolution: true,
+					nearest: true,
+				});
+			}
+			select.selectFeature(foundFeature, true);
+		} else {
+			console.warn('OpenLayers Feature를 찾을 수 없습니다:', data);
+		}
+
+		setFeatureData(data);
+		setIsOpen(true);
+		setIsSearchModalOpen(false);
+	}, [mapInstanceRef]);
 
 	useEffect(() => {
 		if (!mapRef.current) return;
@@ -144,10 +208,10 @@ function Gis({ treeData = [], isSearch = false }) {
 
 	return (
 		<>
-			<GisContext.Provider value={{gisCore, gisMap, treeData, checkedLayerIds}}>
+			<GisContext.Provider value={{ gisCore, gisMap: mapInstanceRef.current, treeData, checkedLayerIds }}>
 				<div className="h-[calc(100vh-10rem)] flex relative">
-					<GisTab visible={tabVisible} setVisible={setTabVisible} isSearch={isSearch} isSearchModalOpen={isSearchModalOpen} setIsSearchModalOpen={setIsSearchModalOpen} onFeatureSelect={handleFeatureSelect}/>
-					<GisContent onFeatureSelect={handleFeatureSelect}/>
+					<GisTab visible={tabVisible} setVisible={setTabVisible} isSearch={isSearch} isSearchModalOpen={isSearchModalOpen} setIsSearchModalOpen={setIsSearchModalOpen} onFeatureSelect={handleFeatureSelect} />
+					<GisContent onFeatureSelect={handleFeatureSelect} />
 					{/* isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
 					{isOpen && featureData && !isSearchModalOpen && (
 						<FeatureClickEventPopup

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

@@ -6,32 +6,37 @@ import { GisContext } from './Gis';
 export default React.memo(function GisSelect({ onFeatureSelect }) {
 
 	const { gisMap } = useContext(GisContext);
-	
-	
-	// useEffect(() => {
-	// 	if (!gisMap) return; // 아직 초기화 안 됐으면 아무것도 안 함
-	  
-	// 	const select = new GisOlSelect(gisMap);
-	// 	GisApp.Module.select = select;
-	  
-	// 	select.getSelectedInfo(function (features) {
-	// 		if (features?.[0]) {
-	// 			// onFeatureClick?.(features[0]); // props로 넘긴 함수 실행
-	// 			onFeatureSelect(layer.getProperties()); //피쳐 속성데이터 상위컴포넌트로 전달
-	// 		}
-	// 	});
-	//   }, [gisMap, onFeatureSelect]);
 
-	const select = new GisOlSelect(gisMap);
-	GisApp.Module.select = select;
 
-	select.getSelectedInfo(function (features) {
-		//clickFeature(features[0]);
-		if(features.length > 0) {
-			const layer = features[0];
-			onFeatureSelect(layer); //피쳐 속성데이터 상위컴포넌트로 전달
+	useEffect(() => {
+		if (!gisMap) return; // 아직 초기화 안 됐으면 아무것도 안 함
+
+		// 이미 select가 있으면 재생성하지 않음
+		if (!GisApp.Module.select) {
+			const select = new GisOlSelect(gisMap);
+			GisApp.Module.select = select;
+
+			// 피처 선택 시 콜백 등록
+			select.getSelectedInfo(function (features) {
+				if (features?.[0]) {
+					console.log('GisSelect features', features);
+					onFeatureSelect(features[0]);
+				}
+			});
 		}
-	});
+	}, [gisMap, onFeatureSelect]);
+
+	// const select = new GisOlSelect(gisMap);
+	// GisApp.Module.select = select;
+
+	// select.getSelectedInfo(function (features) {
+	// 	//clickFeature(features[0]);
+	// 	if(features.length > 0) {
+	// 		const layer = features[0];
+	// 		// console.log('GisSelect layer', layer);
+	// 		onFeatureSelect(layer); //피쳐 속성데이터 상위컴포넌트로 전달
+	// 	}
+	// });
 
 	return (
 		<>