From b8015ea1d9ccfb4d9a39bf61d3d106764678cac5 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Wed, 7 May 2025 10:56:45 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=ED=95=98=EC=88=98=EA=B4=80=EB=A7=9D?= =?UTF-8?q?=EB=8F=84=20=ED=94=BC=EC=B3=90=20=ED=81=B4=EB=A6=AD=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/components/verticalTable.tsx | 1 - apps/sn/app/map/featureClickEventPopup.tsx | 41 +++++++++++++------ apps/sn/app/map/table.ts | 3 +- .../src/ui/map/GisSelect.js | 2 +- 4 files changed, 30 insertions(+), 17 deletions(-) diff --git a/apps/sn/app/components/verticalTable.tsx b/apps/sn/app/components/verticalTable.tsx index b792f3426..36451bfbd 100644 --- a/apps/sn/app/components/verticalTable.tsx +++ b/apps/sn/app/components/verticalTable.tsx @@ -47,7 +47,6 @@ export function VerticalTable({ }, [onPageChange, resetPageNo]); useEffect(() => { - console.log('data',tableData) if (tableData.length > 0 && tableData[0]) { setFormData(tableData[0] as { [key: string]: string | number | boolean }); } diff --git a/apps/sn/app/map/featureClickEventPopup.tsx b/apps/sn/app/map/featureClickEventPopup.tsx index 545bc1697..6ac476eb2 100644 --- a/apps/sn/app/map/featureClickEventPopup.tsx +++ b/apps/sn/app/map/featureClickEventPopup.tsx @@ -1,8 +1,9 @@ 'use client' import { VerticalTable } from "@/components/verticalTable"; import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui"; -import { useState } from "react"; -import { CommonTableColumn } from "./table"; +import { use, useEffect, useState } from "react"; +import { SwtrmtFcltCol } from "./table"; +import { useGisContext } from "@common/business_components/ui/map/Gis"; const inputColumn = [ { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] }, { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] }, @@ -12,9 +13,23 @@ const inputColumn = [ { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] }, { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] }, ]; - -const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData:any }) => { - // TODO: 런타임 에러 해결 필요 +// TODO: +const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => { + const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; + const featureProperties = featureData.getProperties(); // 피처의 속성 가져오기 + const [layerNm, setLayerNm] = useState(""); // 레이어 이름 상태 + // 피쳐데이터의 현재 레이어 이름 가져오는 함수 + const getSelectedLayers = () => { + const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기 + let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수 + layers.forEach((layer: any) => { + const source = layer.getSource(); + if (source && source.hasFeature && source.hasFeature(featureData)) { + featureLayer = layer; // 피처가 속한 레이어 찾기 + } + }); + return featureLayer.get('lyrNm'); // 레이어 이름 출력 + }; const [repairData, setRepairData] = useState([ { year: "2025", type: "개대체" }, { year: "2025", type: "보수" }, @@ -46,18 +61,19 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, updateData(inspectionData, setInspectionData); } }; - function transformFeatureDataToArray(featureData: any, keys: string[]) { + function transformFeatureDataToArray(featureProperties: any, keys: string[]) { // 필요한 키만 추출하여 새로운 객체 생성 const transformedData = keys.reduce((acc, key) => { - acc[key] = featureData[key] !== undefined ? featureData[key] : "N/A"; // 값이 없으면 "N/A"로 처리 + acc[key] = featureProperties[key] !== undefined ? featureProperties[key] : "N/A"; // 값이 없으면 "N/A"로 처리 return acc; }, {} as Record); - + // 배열로 감싸서 반환 return [transformedData]; } - const keys = CommonTableColumn.map((column) => column.id); - const transformedFeatureData = transformFeatureDataToArray(featureData, keys); + const keys = SwtrmtFcltCol.map((column) => column.id); + const transformedFeatureData = transformFeatureDataToArray(featureProperties, keys); + useEffect(() => { setLayerNm(getSelectedLayers()) }, [featureProperties]); const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => (
{/* 섹션 제목 */} @@ -96,7 +112,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,