Merge branch 'iipbs/sn/ii' into iipbs/sn/dev

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

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
 import SearchModal from "./searchModal/searchModal";
 import FeatureClickEventPopup from "./components/popupComponent/featureClickEventPopup";
-import { WaterDepth, WATER_DEPTH_LAYER_TYPES, ORDERED_LAYERS } from "./waterDepth/waterDepth";
+import { WaterDepth, WATER_DEPTH_LAYER_TYPES } from "./waterDepth/waterDepth";
 import { ProcSearchBar } from "@common/business_components/ui/map/searchBar";
 
 // 타입 정의 추가
@@ -160,7 +160,6 @@ const Map = () => {
           isPlaying={isPlaying}
           setIsPlaying={setIsPlaying as any}
           targetLayerTypes={WATER_DEPTH_LAYER_TYPES as any}
-          orderedLayers={ORDERED_LAYERS as any}
           checkInterval={2500}
         />
       </div>

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

@@ -7,16 +7,6 @@ export const WATER_DEPTH_LAYER_TYPES: string[] = [
   'tb_ms_flood_dngr_map',
   'tb_ms_sbmrg_dngr_map'
 ];
-// 지정된 순서에 따른 lyr_sn 배열
-export const ORDERED_LAYERS: string[] = [
-  '27', // 침수위험지도(tb_ms_sbmrg_dngr_map) - 30년 빈도
-  '28', // 침수위험지도(tb_ms_sbmrg_dngr_map) - 50년 빈도
-  '3',  // 침수위험지도(tb_ms_sbmrg_dngr_map) - 80년 빈도
-  '4',  // 침수위험지도(tb_ms_sbmrg_dngr_map) - 100년 빈도
-  '59', // 도시침수지도(tb_ms_flood_dngr_map) - 30년 빈도
-  '60', // 도시침수지도(tb_ms_flood_dngr_map) - 50년 빈도
-  '58'  // 도시침수지도(tb_ms_flood_dngr_map) - 80년 빈도
-];
 
 interface WaterDepthProps {
   onClose?: () => void;

packages/common/business_components/src/ui/chart/LineChart.tsx

@@ -69,7 +69,7 @@ const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?:
           <div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
             {/* 색상 박스 추가 (범례 색상과 동일) */}
             <div style={{ width: "10px", height: "10px", backgroundColor: item.color, borderRadius: "50%" }}></div>
-            <span className="text-[11px] font-bold">{` ${item.name} : ${item.value}`}</span>
+            <span className="text-[11px] font-bold">{` ${item.name} : ${item.value.toString().replace(',','')}`}</span>
           </div>
         ))}
       </div>
@@ -269,7 +269,8 @@ export default function Linechart({
                   dot={false} 
                   connectNulls={true}
                   name={String(config?.label || "X축")}
-                  stroke={config?.color}
+                  stroke={config?.color?.includes('dash')?config?.color?.replace('dash',''):config?.color}
+                  strokeDasharray={config?.color?.includes("dash")?"4 4":undefined}
                 />
               );
             })}

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

@@ -52,7 +52,6 @@ function Gis({
   isPlaying = false,
   setIsPlaying = () => { },
   targetLayerTypes = [],
-  orderedLayers = [],
   checkInterval = 3000,
   height: height = "h-[calc(100vh-5rem)]",
   onOpenPopup = (data) => { },
@@ -290,7 +289,6 @@ function Gis({
               isPlaying={isPlaying}
               setIsPlaying={setIsPlaying}
               targetLayerTypes={targetLayerTypes}
-              orderedLayers={orderedLayers}
               checkInterval={checkInterval}
               onProgressChange={handleProgressChange}
             />

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

@@ -39,7 +39,6 @@ export default React.memo(function GisTree({
 	isPlaying = false,
 	setIsPlaying = () => { },
 	targetLayerTypes = [],
-	orderedLayers = [],
 	checkInterval = 3000,
 	onProgressChange = () => { },
 }) {
@@ -313,14 +312,15 @@ export default React.memo(function GisTree({
 
 			// orderedLayers 순서를 우선 적용하면서, 타입 필터에 맞는 타겟 노드만 선별
 			const getTargetNodesInOrder = () => {
-				const orderedNodes = [];
-				orderedLayers.forEach((lyrSn) => {
-					const node = nodes.find(
-						(n) => n.id === lyrSn && layerTypes.includes(n.data?.lyrTyNm)
-					);
-					if (node) orderedNodes.push(node);
+				const target = nodes.filter((n) => n.data?.actlLyrYn === 'N' && layerTypes.includes(n.data?.lyrTyNm));
+
+				// drawOrdr 값을 기준으로 오름차순 정렬
+				target.sort((a, b) => {
+					const aOrder = a.data?.drawOrdr || 0;
+					const bOrder = b.data?.drawOrdr || 0;
+					return aOrder - bOrder;
 				});
-				return orderedNodes;
+				return target;
 			};
 
 			const targetNodes = getTargetNodesInOrder();
@@ -510,8 +510,8 @@ export default React.memo(function GisTree({
 			{/* 사이드 패널 */}
 			<div
 				className={`absolute left-0 top-0 z-40 flex h-full w-[250px] flex-col overflow-hidden border-r border-gray-300 bg-white transition-all duration-300 ${visible
-						? "translate-x-0 opacity-100"
-						: "pointer-events-none -translate-x-full opacity-0"
+					? "translate-x-0 opacity-100"
+					: "pointer-events-none -translate-x-full opacity-0"
 					}`}
 			>
 				<div