diff --git a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx index f1d2590bc..53cf75946 100644 --- a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx +++ b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx @@ -1,50 +1,101 @@ "use client"; import { useState } from "react"; +import { + ChartColumnBig, + ChevronLeft, + ChevronRight, + History, + PanelsTopLeft, + PencilRuler, + Search, + Settings2, + TriangleAlert, + Waves, +} from "lucide-react"; import type { WindowPopupKey } from "@/features/windowPopup/model/popupDefinitions"; type Props = { onOpenPopup: (popupKey: WindowPopupKey) => void; + onOpenInfoSearch: () => void; }; -const ANALYSIS_POPUP_ITEMS: Array<{ key: WindowPopupKey; label: string }> = [ - { key: "pipeAnalysisPopup", label: "관로분석" }, - { key: "floodPredictionMapPopup", label: "침수예측지도" }, - { key: "floodHistoryPopup", label: "침수발생이력" }, - { key: "gisEditPopup", label: "GIS 편집" }, - { key: "gisManagementPopup", label: "GIS 관리" }, - { key: "flowRiskPopup", label: "통수 위험" }, +const ANALYSIS_POPUP_ITEMS: Array<{ + key: WindowPopupKey | "infoSearch"; + label: string; + icon: typeof ChartColumnBig; +}> = [ + { key: "infoSearch", label: "정보검색", icon: Search }, + { key: "pipeAnalysisPopup", label: "관로분석", icon: ChartColumnBig }, + { key: "floodPredictionMapPopup", label: "침수예측지도", icon: Waves }, + { key: "floodHistoryPopup", label: "침수발생이력", icon: History }, + { key: "gisEditPopup", label: "GIS 편집", icon: PencilRuler }, + { key: "gisManagementPopup", label: "GIS 관리", icon: Settings2 }, + { key: "flowRiskPopup", label: "통수 위험", icon: TriangleAlert }, ]; -export default function AnalysisPopupMenu({ onOpenPopup }: Props) { +export default function AnalysisPopupMenu({ onOpenPopup, onOpenInfoSearch }: Props) { const [isOpen, setIsOpen] = useState(true); + const [activeKey, setActiveKey] = useState(null); return ( -
+
{isOpen ? ( -
- {ANALYSIS_POPUP_ITEMS.map((item) => ( - - ))} +
+
+
+ + 분석도구 +
+
+ +
+ {ANALYSIS_POPUP_ITEMS.map((item) => { + const Icon = item.icon; + const isActive = activeKey === item.key; + + return ( + + ); + })} +
) : null}
diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index cf6411dd4..4b903d087 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -70,6 +70,10 @@ function Gis({ viewExtent, viewMinZoom, showZoomLevel = false, + zoomGuide, + showFloatingSearchButton = true, + treeTogglePosition = "center", + showZoomScaleInfo = false, }) { const mapRef = useRef(); const [mapObject, setMapObject] = useState({}); @@ -311,6 +315,7 @@ function Gis({ onProgressChange={handleProgressChange} layerSettingView={LayerSettingView} inlineLayerSettingView={inlineLayerSettingView} + toggleButtonPosition={treeTogglePosition} /> {typeof WaterDepth === "function" && ( @@ -345,13 +350,15 @@ function Gis({
)} - {showZoomLevel && } + {showZoomLevel && ( + + )}
- {isSearch && ( + {isSearch && showFloatingSearchButton && (
@@ -637,7 +641,7 @@ export default React.memo(function GisTree({ {!visible && (