ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

침입수 분석결과 실측하수량 관로 우선 줌인 및 지역 선이동 제거

Browse Source
This commit is contained in:
kiminchan
2026-07-09 11:37:26 +09:00
parent 6c84ba6aeb
commit ca7ac992e2
3 changed files with 94 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts
+61 -26
View File
@@ -1,4 +1,4 @@
"use client";
"use client";
import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
import GeoJSON from "ol/format/GeoJSON.js";
@@ -161,6 +161,33 @@ const getFirstFeatureId = (payload: any) => {
return String(firstFeature?.id ?? "").trim();
};
const getOilqPipeExtent = (features: any[]) => {
const oilqFeatures = features.filter((feature) => Boolean(feature?.get?.("hasOilq")));
if (oilqFeatures.length === 0) return null;
let nextExtent: [number, number, number, number] | null = null;
oilqFeatures.forEach((feature) => {
const geometryExtent = feature?.getGeometry?.()?.getExtent?.();
if (!Array.isArray(geometryExtent) || geometryExtent.some((value: number) => !Number.isFinite(value))) {
return;
}
if (!nextExtent) {
nextExtent = [...geometryExtent] as [number, number, number, number];
return;
}
nextExtent = [
Math.min(nextExtent[0], geometryExtent[0]),
Math.min(nextExtent[1], geometryExtent[1]),
Math.max(nextExtent[2], geometryExtent[2]),
Math.max(nextExtent[3], geometryExtent[3]),
];
});
return nextExtent;
};
export const useInftwtResultMap = ({
gisMaps,
setFeatureData,
@@ -198,7 +225,7 @@ export const useInftwtResultMap = ({
});
layer.set("id", INFTWT_ZONE_LAYER_ID);
layer.set("lyrNm", "침입수분석-처리구역");
layer.set("lyrNm", "移⑥엯?섎텇??泥섎━援ъ뿭");
layer.set("lyrTyNm", "tb_ms_swage_prcs_zone");
layer.set("clickPsblYn", "N");
layer.setVisible?.(true);
@@ -224,7 +251,7 @@ export const useInftwtResultMap = ({
});
layer.set("id", INFTWT_PIPE_LAYER_ID);
layer.set("lyrNm", "침입수분석-결과관로");
layer.set("lyrNm", "침입수분석 결과관로");
layer.set("lyrTyNm", "tb_ms_swage_ppl");
layer.set("clickPsblYn", "Y");
layer.setVisible?.(true);
@@ -241,6 +268,7 @@ export const useInftwtResultMap = ({
const zoneExtent = zoneSourceRef.current?.getExtent?.();
const pipeExtent = pipeSourceRef.current?.getExtent?.();
const pipeFeatures = pipeSourceRef.current?.getFeatures?.() ?? [];
const oilqPipeExtent = getOilqPipeExtent(pipeFeatures);
const hasPipeFeatures = pipeFeatures.length > 0;
const hasZoneFeatures = Boolean(zoneSourceRef.current?.getFeatures?.().length);
const preferZone = mapView?.focusTargetType === "ZONE" && hasZoneFeatures;
@@ -257,13 +285,15 @@ export const useInftwtResultMap = ({
: false;
const shouldUseZoneExtent = preferZone && (hasPipeInsideZone || !hasPipeFeatures);
const extent = shouldUseZoneExtent
? zoneExtent
: hasPipeFeatures
? pipeExtent
: hasZoneFeatures
? zoneExtent
: null;
const extent = oilqPipeExtent
? oilqPipeExtent
: shouldUseZoneExtent
? zoneExtent
: hasPipeFeatures
? pipeExtent
: hasZoneFeatures
? zoneExtent
: null;
if (!map || !extent || extent.some((value: number) => !Number.isFinite(value))) {
return;
@@ -272,7 +302,7 @@ export const useInftwtResultMap = ({
map.getView?.().fit?.(extent, {
duration: 350,
padding: DEFAULT_RESULT_FIT_PADDING,
maxZoom: shouldUseZoneExtent ? 15 : 16,
maxZoom: oilqPipeExtent ? 17 : shouldUseZoneExtent ? 15 : 16,
constrainResolution: true,
nearest: true,
});
@@ -307,6 +337,11 @@ export const useInftwtResultMap = ({
const moveToStableFocus = useCallback(
async (mapView: InftwtResultMapViewResponse) => {
if ((mapView.oilqPipeCount ?? 0) > 0) {
fitToRenderedFeatures(mapView);
return;
}
const activeRow = activeResultRowRef.current;
const movedByRegion = moveByRegionCodes(
activeRow?.ctpvCd ?? mapView.analysis?.ctpvCd,
@@ -353,7 +388,7 @@ export const useInftwtResultMap = ({
pipeLayerRef.current?.changed?.();
gisMaps.current?.renderSync?.();
console.info("침입수 FE overlay 렌더 결과", {
console.info("移⑥엯??FE overlay ?뚮뜑 寃곌낵", {
focusTargetType: mapView.focusTargetType,
zoneFeatureCount: zoneFeatures.length,
pipeFeatureCount: pipeFeatures.length,
@@ -372,6 +407,15 @@ export const useInftwtResultMap = ({
setIsOpen(false);
setIsSearchModalOpen(false);
const cachedMapView = mapViewCacheRef.current.get(row.inftwtAnlsSn);
let mapView = cachedMapView;
if (!mapView) {
const payload = await getRawJson(`/sewerage-service/api/v1/inftwtAnlsRslt/mapView/${row.inftwtAnlsSn}`);
mapView = (payload?.data ?? payload) as InftwtResultMapViewResponse;
mapViewCacheRef.current.set(row.inftwtAnlsSn, mapView);
}
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent(INFTWT_PROC_SEARCH_EVENT, {
@@ -379,26 +423,17 @@ export const useInftwtResultMap = ({
ctpvCd: row.ctpvCd ?? "0",
sggCd: row.sggCd ?? "0",
swtrmtFcltNm: row.swtrmtFcltNm ?? "",
suppressMapMove: (mapView.oilqPipeCount ?? 0) > 0,
},
}),
);
}
const cachedMapView = mapViewCacheRef.current.get(row.inftwtAnlsSn);
if (cachedMapView) {
setActiveMapView(cachedMapView);
void renderMapView(cachedMapView);
return;
}
const payload = await getRawJson(`/sewerage-service/api/v1/inftwtAnlsRslt/mapView/${row.inftwtAnlsSn}`);
const mapView = (payload?.data ?? payload) as InftwtResultMapViewResponse;
mapViewCacheRef.current.set(row.inftwtAnlsSn, mapView);
setActiveMapView(mapView);
void renderMapView(mapView);
} catch (error) {
console.error("침입수 분석결과 지도 연계 중 오류:", error);
alert("침입수 분석결과를 지도에 연계하지 못했습니다.");
console.error("移⑥엯??遺꾩꽍寃곌낵 吏€???곌퀎 以??ㅻ쪟:", error);
alert("移⑥엯??遺꾩꽍寃곌낵瑜?吏€?꾩뿉 ?곌퀎?섏? 紐삵뻽?듬땲??");
}
},
[renderMapView, setFeatureData, setIsOpen, setIsSearchModalOpen],
@@ -419,7 +454,7 @@ export const useInftwtResultMap = ({
if (!payload?.row) return;
void handleRowSelect(payload.row);
} catch (error) {
console.warn("침입수 분석결과 storage 동기화 값을 해석하지 못했습니다.", error);
console.warn("移⑥엯??遺꾩꽍寃곌낵 storage ?숆린??媛믪쓣 ?댁꽍?섏? 紐삵뻽?듬땲??", error);
}
};
@@ -459,7 +494,7 @@ export const useInftwtResultMap = ({
});
if (!popupWindow) {
alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
alert("?앹뾽??李⑤떒?섏뿀?듬땲?? 釉뚮씪?곗? ?앹뾽 ?덉슜 ?ㅼ젙???뺤씤?댁＜?몄슂.");
}
return true;
apps/sn/docs/작업내용/SN-침입수분석결과-지도연계유지보수/001-fe-SN-침입수분석결과-지도연계유지보수-통합구현기록.md
+12
View File
@@ -112,3 +112,15 @@
## 16. 2026-07-09 버튼 순서 미세조정
- 사용자 요청에 따라 침입수 분석 화면 액션 버튼 순서를 `양식 받기 -> 침입수분석 실행 -> 결과보기`로 조정했다.
- 변경은 공통 `ii/BaseLayout.tsx` 렌더 순서만 수정해 RDII 분석 화면에도 같은 순서가 적용되도록 맞췄다.
## 17. 2026-07-09 실측하수량 관로 우선 줌인 보정
- 침입수 분석결과 popup에서 row click 시 `oilqPipeCount > 0`이면 시도/시군구 중심 이동보다 `hasOilq` 관로 extent fit을 우선 적용하도록 `useInftwtResultMap`을 보정했다.
- 실측하수량 관로가 없는 row만 기존 지역 중심 이동과 일반 결과 관로 fallback을 유지한다.
- 이 보정으로 주황색으로 표시되는 실측하수량 관로가 있는 케이스는 지도 진입 직후 해당 관로 주변으로 바로 확대된다.
## 18. 2026-07-09 지역 선이동 제거 보정
- `useInftwtResultMap`은 row click 직후 mapView를 먼저 확보한 뒤, `oilqPipeCount > 0`이면 검색바 동기화 이벤트에 `suppressMapMove`를 내려 지역 중심 이동을 건너뛰도록 보정했다.
- `procSearchBar`는 `suppressMapMove`가 내려오면 시도/시군구/시설 상태만 갱신하고 `moveMapToCenter`는 호출하지 않는다.