GIS 편집 신규 관로 미리보기 표시 보완

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

@@ -1444,6 +1444,8 @@ const Map = () => {
   const flowDirectionFailureAlertedRef = useRef(false);
   const gisEditPreviewLayerRef = useRef<any | null>(null);
   const gisEditPreviewSourceRef = useRef<VectorSource | null>(null);
+  // 신규 관로마다 한 번만 우측 상세 패널을 피한 가시 영역으로 이동하기 위한 change 식별자다.
+  const gisEditAutoFocusedAddChangeIdRef = useRef("");
   const gisEditPipeSnapSourceRef = useRef<VectorSource | null>(null);
   const gisEditPipeSnapAbortControllerRef = useRef<AbortController | null>(
     null,
@@ -2247,12 +2249,18 @@ const Map = () => {
     if (!map) return null;
 
     if (waterRiskAreaLayerRef.current && waterRiskAreaSourceRef.current) {
+      const layers = map.getLayers?.().getArray?.() ?? [];
+      if (!layers.includes(waterRiskAreaLayerRef.current)) {
+        map.addLayer(waterRiskAreaLayerRef.current);
+      }
+      waterRiskAreaLayerRef.current.setZIndex?.(9996);
       return waterRiskAreaSourceRef.current;
     }
 
+    // 통수위험 overlay 초기화는 자신의 stale layer만 정리해 GIS 편집 preview를 보존한다.
     const layers = map.getLayers?.().getArray?.() ?? [];
     layers.forEach((existingLayer: any) => {
-      if (existingLayer?.get?.("id") === GIS_EDIT_PREVIEW_LAYER_ID) {
+      if (existingLayer?.get?.("id") === WATER_RISK_AREA_LAYER_ID) {
         map.removeLayer(existingLayer);
       }
     });
@@ -5363,6 +5371,7 @@ const Map = () => {
       if (!layers.includes(gisEditPreviewLayerRef.current)) {
         map.addLayer(gisEditPreviewLayerRef.current);
       }
+      gisEditPreviewLayerRef.current.setVisible?.(true);
       gisEditPreviewLayerRef.current.setZIndex?.(10001);
       return gisEditPreviewSourceRef.current;
     }
@@ -6627,6 +6636,43 @@ const Map = () => {
     mapReady,
   ]);
 
+  // ADD 완료 직후 열린 상세 패널 아래에 신규 선형이 가려지지 않도록 최초 1회 지도 가시 영역에 맞춘다.
+  useEffect(() => {
+    if (!mapReady || !gisEdit.isEditMode || !gisEdit.focusedChangeId) return;
+
+    const focusedChange = gisEdit.changes.find(
+      (change) => change.changeId === gisEdit.focusedChangeId,
+    );
+    if (
+      focusedChange?.editType !== "ADD" ||
+      !focusedChange.afterGeometry ||
+      gisEditAutoFocusedAddChangeIdRef.current === focusedChange.changeId
+    ) {
+      return;
+    }
+
+    gisEditAutoFocusedAddChangeIdRef.current = focusedChange.changeId;
+    const focusTimer = window.setTimeout(() => {
+      const map = gisMaps.current;
+      if (!map) return;
+      ensureGisEditPreviewLayer();
+      map.updateSize?.();
+      focusGisEditChangeOnMap(focusedChange.changeId);
+      gisEditPreviewSourceRef.current?.changed?.();
+      gisEditPreviewLayerRef.current?.changed?.();
+      map.renderSync?.();
+    }, 120);
+
+    return () => window.clearTimeout(focusTimer);
+  }, [
+    ensureGisEditPreviewLayer,
+    focusGisEditChangeOnMap,
+    gisEdit.changes,
+    gisEdit.focusedChangeId,
+    gisEdit.isEditMode,
+    mapReady,
+  ]);
+
   const gisEditMaskedPipeFidKey = useMemo(() => {
     const fids = gisEdit.changes
       .filter((change) => change.layerId === "tb_ms_swage_ppl")