diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index 9d99923a8..1973a78f3 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -1,6 +1,5 @@ import './lib/css/gis.common.css'; import React, { createContext, useContext, useEffect, useMemo, useRef, useState, useCallback } from 'react'; -import { Tabs, TabsList, TabsTrigger, TabsContent } from '@common/components/ui/tabs'; import OlMap from 'ol/Map'; import View from 'ol/View'; import { defaults as defaultControls, OverviewMap } from 'ol/control'; @@ -10,13 +9,11 @@ import proj4 from 'proj4'; import { register } from 'ol/proj/proj4'; import GisApp from './lib/gis.core'; import GisContent from './GisContent'; -import GisLonLat from './GisLonLat'; -import GisToolBar from './GisToolBar'; -import GisTab from './GisTab'; -import MapToggleBtn from './MapToggleBtn'; import FeatureClickEventPopup from '@/map/featureClickEventPopup'; +import GisTree from './GisTree'; +import SearchModal from '@/map/SearchModal'; -export const GisContext = createContext({gisCore: null, gisMap: null, treeData:null, checkedLayerIds:null}); +export const GisContext = createContext({ gisCore: null, gisMap: null, treeData: null, checkedLayerIds: null }); export const useGisContext = () => useContext(GisContext); function Gis({ treeData = [], isSearch = false }) { @@ -24,7 +21,7 @@ function Gis({ treeData = [], isSearch = false }) { const [mapObject, setMapObject] = useState({}); const [tabVisible, setTabVisible] = useState(true); const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태 - const [featureData,setFeatureData] = useState(null) // 선택된 피쳐 데이터 + const [featureData, setFeatureData] = useState(null) // 선택된 피쳐 데이터 const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태 const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []); const mapInstanceRef = useRef(null); // 맵 생성 여부를 추적할 ref @@ -181,7 +178,7 @@ function Gis({ treeData = [], isSearch = false }) { //setEditLayerItems(prev => [...layerItems]) }, [treeData]); - const getLayerItems= (layerCode) => { + const getLayerItems = (layerCode) => { const layerItems = Object.entries(layerCode) .filter(([key, obj], idx) => obj?.updtPsblYn === 'Y') .map(([key, obj]) => ({ @@ -210,8 +207,8 @@ function Gis({ treeData = [], isSearch = false }) { <>
- - + + {/* isSearchModalOpen이 true면 visible=false로 팝업 숨김 */} {isOpen && featureData && !isSearchModalOpen && ( )} +
{/* @@ -229,4 +231,4 @@ function Gis({ treeData = [], isSearch = false }) { ); } -export default React.memo(Gis); +export default React.memo(Gis); \ No newline at end of file diff --git a/packages/common/business_components/src/ui/map/GisContent.js b/packages/common/business_components/src/ui/map/GisContent.js index 93edcd12c..ad8a53605 100644 --- a/packages/common/business_components/src/ui/map/GisContent.js +++ b/packages/common/business_components/src/ui/map/GisContent.js @@ -1,4 +1,4 @@ -import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import GisApp from './lib/gis.core'; import { useGisContext } from './Gis'; import GisLonLat from './GisLonLat'; @@ -6,9 +6,9 @@ import GisSelect from './GisSelect'; import GisToolBar from './GisToolBar'; import './lib/css/gis.edit.css'; import MapToggleBtn from './MapToggleBtn'; -import GisEdit from './GisEdit'; +import { Search } from 'lucide-react'; -export default function GisContent({ edit = false, onFeatureSelect }) { +export default function GisContent({ edit = false, onFeatureSelect, isSearch, setIsSearchModalOpen }) { const { gisMap, gisCore } = useGisContext(); const [visibleComponents, setVisibleComponents] = useState({}); const addressResultLayer = useRef(null); @@ -16,12 +16,12 @@ export default function GisContent({ edit = false, onFeatureSelect }) { //셀렉트 버튼 이벤트 // const clickFeature = useCallback(feature => { - // if (feature) { - // const layer = feature.getLayer(); - // setVisibleComponents(prevState => ({ - // ...prevState, - // })); - // } + // if (feature) { + // const layer = feature.getLayer(); + // setVisibleComponents(prevState => ({ + // ...prevState, + // })); + // } // }, []); const selectRslt = useCallback(feature => { @@ -45,16 +45,35 @@ export default function GisContent({ edit = false, onFeatureSelect }) { })); } }, [gisMap]); - + if (!gisMap) return null; - + return ( <> {/**/} - + + + {/* 검색 모달 */} + {isSearch && ( +
+ +
+ )} ); -} +} \ No newline at end of file diff --git a/packages/common/business_components/src/ui/map/GisTab.js b/packages/common/business_components/src/ui/map/GisTab.js index 1522cc1b5..27dd36e2b 100644 --- a/packages/common/business_components/src/ui/map/GisTab.js +++ b/packages/common/business_components/src/ui/map/GisTab.js @@ -1,85 +1,85 @@ -import React, { useState } from 'react'; -import { Tabs, TabsList, TabsTrigger } from '@common/components/ui/tabs'; -import GisTree from './GisTree'; -import GisSearch from './GisSearch'; -import { ChevronLeft, ChevronRight, Search } from 'lucide-react'; -import SearchModal from '@/map/SearchModal'; +// import React, { useState } from 'react'; +// import { Tabs, TabsList, TabsTrigger } from '@common/components/ui/tabs'; +// import GisTree from './GisTree'; +// import GisSearch from './GisSearch'; +// import { ChevronLeft, ChevronRight, Search } from 'lucide-react'; +// import SearchModal from '@/map/SearchModal'; -function GisTab({ visible, setVisible, isSearch, isSearchModalOpen, setIsSearchModalOpen, onFeatureSelect }) { - const [activeTab, setActiveTab] = useState('layers'); +// function GisTab({ visible, setVisible, isSearch, isSearchModalOpen, setIsSearchModalOpen, onFeatureSelect }) { +// const [activeTab, setActiveTab] = useState('layers'); - return ( - <> -
- - - 레이어 - {isSearch && ( - - // - // - // - )} - +// return ( +// <> +//
+// +// +// 레이어 +// {/* {isSearch && ( +// +// // +// // +// // +// )} */} +// - {/* GisTree는 항상 마운트되며, 탭 상태에 따라 보여주기만 함 */} -
- -
+// {/* GisTree는 항상 마운트되며, 탭 상태에 따라 보여주기만 함 */} +//
+// +//
- {/* GisSearch도 동일하게 처리 */} - {/* {isSearch && ( -
- -
- )} */} +// {/* GisSearch도 동일하게 처리 */} +// {/* {isSearch && ( +//
+// +//
+// )} */} - {/* 🔍 검색 모달 */} - - +// {/* 🔍 검색 모달 */} +// {/* */} +// - {/* 접기 버튼 */} - -
+// {/* 접기 버튼 */} +// +//
- {/* 열기 버튼 */} - {!visible && ( - - )} - - ); -} +// {/* 열기 버튼 */} +// {!visible && ( +// +// )} +// +// ); +// } -export default React.memo(GisTab); +// export default React.memo(GisTab); diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js index d01786187..6a2e8face 100644 --- a/packages/common/business_components/src/ui/map/GisTree.js +++ b/packages/common/business_components/src/ui/map/GisTree.js @@ -1,5 +1,4 @@ import GisApp from './lib/gis.core'; -import { util } from './lib/util'; import React, { useEffect, useState } from 'react'; import { useGisContext } from './Gis'; import { DndProvider } from "react-dnd"; @@ -8,14 +7,14 @@ import { MultiBackend, getBackendOptions } from "@minoru/react-dnd-treeview"; -import { Tabs, TabsList, TabsTrigger, TabsContent } from "@common/components/ui/tabs"; +import { ChevronLeft, ChevronRight } from 'lucide-react'; -export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes = () => {} }) { +export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes = () => { }, visible, setVisible }) { const { gisCore, treeData } = useGisContext(); const [checked, setChecked] = useState([]); const [expanded, setExpanded] = useState([]); const [nodes, setNodes] = useState([]); - const [isSidebarOpen, setIsSidebarOpen] = useState(true); + const [activeTab, setActiveTab] = useState('layers'); useEffect(() => { if (treeData && treeData.length > 0) { @@ -115,7 +114,7 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes }; const makeLegendSrc = layerinfo => { - if(!layerinfo.gobjTy) return null; + if (!layerinfo.gobjTy) return null; let src; if (layerinfo.iconNm) { @@ -176,34 +175,61 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes return ( <> - - ( -
- {node.droppable && ( - - - )} - handleCheck(node.id)} className="cursor-pointer"/> - {node.icon && {node.icon}} - {node.text} -
- )} - sort={(a, b) => { - const aOrder = parseInt(a.data?.sortOrdr ?? '0'); - const bOrder = parseInt(b.data?.sortOrdr ?? '0'); - return aOrder - bOrder; - }} - /> - +
+
+

레이어

+
+ + ( +
+ {node.droppable && ( + + + )} + handleCheck(node.id)} className="cursor-pointer" /> + {node.icon && {node.icon}} + {node.text} +
+ )} + sort={(a, b) => { + const aOrder = parseInt(a.data?.sortOrdr ?? '0'); + const bOrder = parseInt(b.data?.sortOrdr ?? '0'); + return aOrder - bOrder; + }} + /> + +
+ {/* 접기 버튼 */} + +
+ {/* 열기 버튼 */} + {!visible && ( + + )} ); });