feat: 침수심 범례 기능 추가

apps/sn/app/(map-layout)/map/page.tsx

@@ -40,6 +40,7 @@ const Map = () => {
   const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
   const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태
   const [featureData, setFeatureData] = useState(null); // 선택된 피쳐 데이터
+  const [showWaterDepth, setShowWaterDepth] = useState(false); // WaterDepth 표시 여부
 
 
   useEffect(() => {
@@ -118,6 +119,28 @@ const Map = () => {
     setIsSearchModalOpen(false);
   };
 
+  // WaterDepth 표시 여부를 결정하는 함수
+  const handleWaterDepthVisibility = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
+    // 침수 관련 레이어 ID들 (실제 데이터에 맞게 수정 필요)
+    const waterDepthLayerTypes = [
+      'tb_ms_flood_dngr_map',  // 침수위험지도
+      'tb_ms_sbmrg_dngr_map'   // 도시침수지도
+    ];
+
+    // 체크된 레이어 중에 침수 관련 레이어가 있는지 확인
+    const hasWaterDepthLayer = checkedNodesData.some(node =>
+      waterDepthLayerTypes.includes(node.data?.lyrTyNm)
+    );
+
+    setShowWaterDepth(hasWaterDepthLayer);
+  }, []);
+
+  // 체크된 레이어 변경 처리 함수
+  const handleCheckedLayersChange = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
+    // WaterDepth 표시 여부 결정
+    handleWaterDepthVisibility(checkedIds, checkedNodesData);
+  }, [handleWaterDepthVisibility]);
+
 
   return (
     <div className="bg-container">
@@ -135,9 +158,9 @@ const Map = () => {
         setIsSearchModalOpen={setIsSearchModalOpen}
         isOpen={isOpen}
         isSearchModalOpen={isSearchModalOpen}
-        onCheckedLayersChange={undefined}
+        onCheckedLayersChange={handleCheckedLayersChange}
         searchBar={SearchBar}
-        // waterDepth={WaterDepth}
+        waterDepth={showWaterDepth ? WaterDepth : undefined}
       />
     </div>
   );

apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx

@@ -3,18 +3,28 @@
 import React, { useRef, useEffect, useState } from "react";
 import { Label } from "@common/components/ui/label";
 
-export function WaterDepth({ onClose }: { onClose?: () => void }) {
+interface WaterDepthProps {
+  onClose?: () => void;
+}
+
+export function WaterDepth({
+  onClose,
+}: WaterDepthProps) {
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
 
+  const handlePlayToggle = () => {
+    setIsPlaying((prev) => !prev);
+  };
+
   return (
     <>
-      <div className="fixed top-8 left-8 z-50 bg-white rounded-lg shadow-lg border border-gray-200 w-[160px] px-4 py-3">
+      <div className="bg-white rounded-lg shadow-lg border border-gray-200 w-[160px] px-4 py-3">
         <div className="card-header flex items-center justify-between">
           <Label className="text-3xl text-gray-900 font-bold">침수심 범례</Label>
           <button
             type="button"
             className="ml-2"
-            onClick={() => setIsPlaying((prev) => !prev)}
+            onClick={handlePlayToggle}
           >
             {isPlaying ? (
               <img
@@ -42,7 +52,7 @@ export function WaterDepth({ onClose }: { onClose?: () => void }) {
             <LegendItem color="#fce800" label="2.0~3.0m 미만" />
             <LegendItem color="#fe0000" label="3.0m 이상" />
           </div>
-          <div className="border-t-4 border-gray-900 mt-2 mx-auto w-full" />
+          <div className="border-t-2 border-blue-900 mt-1 mx-auto w-full" />
         </div>
       </div>
     </>