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

apps/sn/app/layout.js

@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

apps/sn/app/map/page.tsx

@@ -1,14 +1,19 @@
 "use client";
 
-import Gis from "@common/business_components/ui/map/Gis";
-import { useEffect, useState } from "react";
+import Gis, { useGisContext } from "@common/business_components/ui/map/Gis";
 import { mapService } from "@service";
-import SearchModal from '@/map/SearchModal';
+import { useCallback, useEffect, useRef, useState } from "react";
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import SearchModal from "./SearchModal";
+import FeatureClickEventPopup from "./featureClickEventPopup";
 
 const Map = () => {
   const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
   const [selectedFeature, setSelectedFeature] = useState(null); // 선택된 피처 상태
-
+  const gisMaps = useRef(null);
+  const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
+  const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태
+  const [featureData, setFeatureData] = useState(null); // 선택된 피쳐 데이터
   const fetchData = async () => {
     try {
       const response = await mapService.getLyrStngs();
@@ -23,9 +28,85 @@ const Map = () => {
     fetchData();
   }, []);
 
+  // SearchModal, GisContent 등에서 호출
+  const onFeatureSelect = (data: any) => {
+    let map = gisMaps.current;
+    if (!map) {
+      console.warn("지도가 초기화되지 않았습니다.");
+      return;
+    }
+
+    // 항상 같은 select 객체 사용
+    const select = GisApp.Module.select as any;
+    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;
+      map
+        .getLayers()
+        .getArray()
+        .forEach((layer: any) => {
+          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();
+
+        map.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);
+  };
   return (
     <div className="bg-container">
-      <Gis treeData={treeData} isSearch={true} searchModal={SearchModal}/>
+      <Gis
+        treeData={treeData}
+        isSearch={true}
+        gisMaps={gisMaps}
+        isMiniMap={true}
+        searchView={SearchModal}
+        detailView={FeatureClickEventPopup}
+        onFeatureSelect={onFeatureSelect}
+        setIsOpen={setIsOpen}
+        setFeatureData={setFeatureData}
+        featureData={featureData}
+        setIsSearchModalOpen={setIsSearchModalOpen}
+        isOpen={isOpen}
+        isSearchModalOpen={isSearchModalOpen}
+      />
     </div>
   );
 };