Merge remote-tracking branch 'origin/iipbs/common/main' into iipbs/wr/drgtPopup

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

@@ -165,7 +165,7 @@ export default function LineBarchart({
           {chartTitle}
         </div>
       ) : null}
-      <div className="h-[calc(100%-42px)] flex justify-center">
+      <div className="h-[calc(100%-42px)] w-[calc(100%-40px)] ">
         <ChartContainer config={chartConfig ?? {}} className="h-full w-full">
           <ComposedChart 
             data={chartData} 

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

@@ -65,11 +65,11 @@ const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?:
     return (
       <div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
         <p className="text-[12px] font-bold m-3">{label}</p>
-        {payload.map((item, index) => (
+        {payload.filter(item => item.value != null && String(item.value) != 'NaN' && item.value != undefined).map((item, index) => (
           <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>
@@ -267,8 +267,10 @@ export default function Linechart({
                   type="linear" 
                   strokeWidth={2} 
                   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

@@ -30,75 +30,6 @@ export const GisContext = createContext({
   checkedLayerIds: null,
 });
 export const useGisContext = () => useContext(GisContext);
-export const searchUpperPpls = async (fcltMngNo) => {
-  const BASE_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
-  const res = await fetch(`${BASE_URL}/v1/fcltmhl/upperPpls/${fcltMngNo}`, {
-    method: "GET",
-  });
-
-  let data = null;
-  if (res.ok) {
-    try {
-      // 응답이 비어있는지 확인
-      const contentLength = res.headers.get("content-length");
-      if (contentLength === "0")
-        alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
-
-      // 응답 텍스트를 먼저 가져와서 빈 문자열인지 확인
-      const text = await res.text();
-      if (!text || text.trim() === "")
-        alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
-
-      // JSON 파싱 시도
-      data = JSON.parse(text);
-    } catch (error) {
-      console.error("JSON parsing error:", error);
-      alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
-    }
-  }
-
-  const select = GisApp.Module.select;
-  const gisMap = GisApp.Module.core?.map;
-  let foundFeature = null;
-
-  data.forEach((item) => {
-    const pplMngNo = item.ppl_mng_no.trim();
-
-    gisMap
-      .getLayers()
-      .getArray()
-      .filter((e) => e.get("lyrTyNm") == "tb_ms_swage_ppl")
-      .forEach((layer) => {
-        const source = layer.getSource?.();
-        if (source?.getFeatures) {
-          const features = source.getFeatures();
-          for (const f of features) {
-            if (f.values_.fclt_mng_no.trim() === pplMngNo) {
-              foundFeature = f;
-              break;
-            }
-          }
-        }
-      });
-
-    if (foundFeature) select.selectMultiFeature(foundFeature, true);
-  });
-
-  if (!foundFeature) alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
-
-  let geometry = foundFeature?.getGeometry();
-  if (geometry) {
-    let extent = geometry.getExtent();
-
-    gisMap.getView().fit(extent, {
-      duration: 300,
-      padding: [50, 50, 50, 50],
-      maxZoom: 14,
-      constrainResolution: true,
-      nearest: true,
-    });
-  }
-};
 
 function Gis({
   isOpen, //우측 상세 레이어 팝업
@@ -121,7 +52,6 @@ function Gis({
   isPlaying = false,
   setIsPlaying = () => { },
   targetLayerTypes = [],
-  orderedLayers = [],
   checkInterval = 3000,
   height: height = "h-[calc(100vh-5rem)]",
   onOpenPopup = (data) => { },
@@ -359,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