From 3cdcf6a6f706c9bfb4b1223116837e2615580fc7 Mon Sep 17 00:00:00 2001 From: ljpark Date: Mon, 31 Aug 2026 23:16:57 +0900 Subject: [PATCH] =?UTF-8?q?sn:=20=EC=B9=A8=EC=88=98=ED=9D=94=EC=A0=81?= =?UTF-8?q?=EC=9C=84=EC=84=A0=20=EC=8B=AC=EC=84=A0/=EC=9C=84=EC=84=A0=20?= =?UTF-8?q?=EB=AA=A8=EB=91=90=20=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../popupComponent/featureClickEventPopup.tsx | 257 ++++++++++++------ apps/sn/app/(map-layout)/map/page.tsx | 24 ++ apps/sn/app/components/ui/verticalTable.tsx | 4 +- 3 files changed, 199 insertions(+), 86 deletions(-) diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx index aa0320652..96ff8edb2 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx @@ -186,10 +186,17 @@ const FeatureClickEventPopup = ({ const [floodDepthRows, setFloodDepthRows] = useState< Record[] >([]); - const [selectedFloodDepthYear, setSelectedFloodDepthYear] = useState< + const [floodWtlvRows, setFloodWtlvRows] = useState[]>( + [], + ); + const [selectedFloodDepthFid, setSelectedFloodDepthFid] = useState< + string | null + >(null); + const [selectedFloodWtlvFid, setSelectedFloodWtlvFid] = useState< string | null >(null); const floodDepthYearListRef = useRef(null); + const floodWtlvListRef = useRef(null); const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore(); // 🎯 κ΄€λ‘œκ΄€λ¦¬λ²ˆν˜Έ μΆ”μΆœ @@ -850,7 +857,9 @@ const FeatureClickEventPopup = ({ if (selectedLayerName === "μΉ¨μˆ˜ν”μ μœ„μ„ " && featureId) { const depthLookupKey = normalizeFldngWtlvMapApiFid(featureId); setFloodDepthRows([]); - setSelectedFloodDepthYear(null); + setFloodWtlvRows([]); + setSelectedFloodDepthFid(null); + setSelectedFloodWtlvFid(null); try { const normalizedFloodMapFid = normalizeFldngWtlvMapApiFid(featureId); @@ -877,18 +886,25 @@ const FeatureClickEventPopup = ({ `v1/fldng/hstry/depth-map/${encodeURIComponent(depthLookupKey)}`, ); const depthPayload = depthRows?.data ?? depthRows; - const normalizedDepthRows = Array.isArray(depthPayload) - ? depthPayload.filter((row) => row && typeof row === "object") + const depthItems = Array.isArray(depthPayload) + ? depthPayload + : depthPayload?.depthMaps; + const waterLevelItems = Array.isArray( + depthPayload?.waterLevelMaps, + ) + ? depthPayload.waterLevelMaps : []; + const normalizedDepthRows = Array.isArray(depthItems) + ? depthItems.filter((row) => row && typeof row === "object") + : []; + const normalizedWaterLevelRows = waterLevelItems.filter( + (row: unknown) => row && typeof row === "object", + ); setFloodDepthRows(normalizedDepthRows); - const years = normalizedDepthRows - .map((row) => - String(row.fldng_yr ?? row.fldngYr ?? row.yr ?? "").trim(), - ) - .filter(Boolean); - console.log("depth years:", years); - // μ΅œμ΄ˆμ—λŠ” 연도λ₯Ό μ„ νƒν•˜μ§€ μ•Šκ³  λͺ©λ‘λ§Œ ν‘œμ‹œν•œλ‹€. - setSelectedFloodDepthYear(null); + setFloodWtlvRows(normalizedWaterLevelRows); + // μ΅œμ΄ˆμ—λŠ” 연계 ν•­λͺ©μ„ μ„ νƒν•˜μ§€ μ•Šκ³  λ²„νŠΌ λͺ©λ‘λ§Œ ν‘œμ‹œν•œλ‹€. + setSelectedFloodDepthFid(null); + setSelectedFloodWtlvFid(null); } } catch (depthError) { console.warn("μΉ¨μˆ˜κΉŠμ΄μ§€λ„ 쑰회 μ‹€νŒ¨:", depthError); @@ -1097,82 +1113,153 @@ const FeatureClickEventPopup = ({ > 0 ? ( -
+ layerNm === "μΉ¨μˆ˜ν”μ μœ„μ„ " && + (floodDepthRows.length > 0 || floodWtlvRows.length > 0) ? ( +
기본정보 -
- -
- {Array.from( - new Set( - floodDepthRows - .map((row) => - String( - row.fldng_yr ?? row.fldngYr ?? row.yr ?? "", - ).trim(), - ) - .filter(Boolean), - ), - ).map((year) => ( - +
+ {[...floodDepthRows] + .map((row, index) => ({ + row, + index, + year: String( + row.fldng_yr ?? row.fldngYr ?? row.yr ?? "", + ).trim(), + })) + .filter(({ year }) => Boolean(year)) + .sort((left, right) => { + const yearOrder = left.year.localeCompare( + right.year, + undefined, + { numeric: true }, ); - const depthFid = String( - selectedDepthRow?.fldng_dpth_map_sn ?? - selectedDepthRow?.fid ?? - "", - ).trim(); - if (depthFid) { - const core = GisApp.Module.layer as any; - await core.showSearchResultsFromGeoJSON?.( - "tb_ms_fldng_dpth_map", - `tb_ms_fldng_dpth_map.${depthFid.replace(/^tb_ms_fldng_dpth_map\./, "")}`, - ); - } - }} - className={`rounded border px-3 py-1 text-[1.2rem] font-medium leading-5 ${selectedFloodDepthYear === year ? "border-blue-600 bg-white text-blue-700" : "border-border bg-muted text-muted-foreground"}`} - > - {year}λ…„ - - ))} + return yearOrder !== 0 + ? yearOrder + : left.index - right.index; + }) + .map(({ row, index, year }) => ( + + ))} +
+
- -
+ )} + {floodWtlvRows.length > 0 && ( +
+ + μœ„μ„  + + +
+ {floodWtlvRows.map((row, index) => { + const waterLevelFid = String(row.fid ?? "").trim(); + const disasterName = String( + row.fldng_dstr_nm ?? row.fldngDstrNm ?? "", + ).trim(); + return ( + + ); + })} +
+ +
+ )}
) : layerNm === "ν•˜μˆ˜κ΄€λ‘œ" && tableData?.elapsedYears ? ( <> diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx index f56934c44..bdda554da 100644 --- a/apps/sn/app/(map-layout)/map/page.tsx +++ b/apps/sn/app/(map-layout)/map/page.tsx @@ -5208,6 +5208,30 @@ const Map = () => { return; } + // 연계 심선/μœ„μ„  μ‘°νšŒλŠ” 곡용 search-layerλ₯Ό κ΅μ²΄ν•œλ‹€. μ΄λ•Œ 탭에 λ³΄κ΄€λœ + // κΈ°μ‘΄ μΉ¨μˆ˜ν”μ  featureλŠ” 더 이상 지도 λ ˆμ΄μ–΄μ— μ†ν•˜μ§€ μ•ŠμœΌλ―€λ‘œ, λ‹¨μˆœνžˆ + // Select μ»¬λ ‰μ…˜μ— λ‹€μ‹œ 넣어도 κ°•μ‘°κ°€ λ Œλ”λ§λ˜μ§€ μ•ŠλŠ”λ‹€. νƒ­μœΌλ‘œ λŒμ•„μ˜¬ + // λ•ŒλŠ” FID둜 search-layerλ₯Ό λ³΅μ›ν•œ λ’€ λ‘œλ“œλœ featureλ₯Ό μ„ νƒν•˜κ²Œ ν•œλ‹€. + if ( + layerTypeName === FLOOD_HISTORY_LAYER_TYPE || + layerTypeName === "tb_ms_fldng_dpth_map" + ) { + clearSinkholeFocusedPipeLayer(); + const featureIdentifier = getRightPanelFeatureIdentifier(data).replace( + new RegExp(`^${layerTypeName}\\.`), + "", + ); + if (featureIdentifier) { + const core = GisApp.Module.layer as any; + void core?.showSearchResultsFromGeoJSON?.( + layerTypeName, + `${layerTypeName}.${featureIdentifier}`, + ); + } + + return; + } + if (!data || typeof data.getGeometry !== "function") { clearSinkholeFocusedPipeLayer(); diff --git a/apps/sn/app/components/ui/verticalTable.tsx b/apps/sn/app/components/ui/verticalTable.tsx index 3a012de61..f2685d98c 100644 --- a/apps/sn/app/components/ui/verticalTable.tsx +++ b/apps/sn/app/components/ui/verticalTable.tsx @@ -165,7 +165,9 @@ export function VerticalTable({ <> {headName ? (
-

{headName}

+

+ {headName} +

{showSaveButton && onSaveClick && (