From 91771faffa035ffff96285ad193e690b3a3f2470 Mon Sep 17 00:00:00 2001
From: JIeunhuh <entks301@naver.com>
Date: Wed, 7 May 2025 18:23:40 +0900
Subject: [PATCH] =?UTF-8?q?=EC=84=A0=ED=83=9D=EB=90=9C=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=96=B4=EC=97=90=20=EB=A7=9E=EC=B6=B0=20=ED=85=8C?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EB=B3=80=EA=B2=BD=EB=90=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/sn/app/map/featureClickEventPopup.tsx | 33 +++++++++++++++-------
 apps/sn/app/map/table.ts                   | 15 +++++++++-
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/apps/sn/app/map/featureClickEventPopup.tsx b/apps/sn/app/map/featureClickEventPopup.tsx
index 54de59668..435e5710d 100644
--- a/apps/sn/app/map/featureClickEventPopup.tsx
+++ b/apps/sn/app/map/featureClickEventPopup.tsx
@@ -2,7 +2,7 @@
 import { VerticalTable } from "@/components/verticalTable";
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui";
 import { use, useEffect, useState } from "react";
-import { SwtrmtFcltCol } from "./table";
+import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from "./table";
 import { useGisContext } from "@common/business_components/ui/map/Gis";
 import { getData } from "@/components/lib/api";
 const inputColumn = [
@@ -20,6 +20,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     const featureId = featureData.getId(); // 피처의 속성 가져오기
     const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
     const [tableData, setTableData] = useState<any>(null); // 피처 데이터 상태
+    const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
     // 피쳐데이터의 현재 레이어 이름 가져오는 함수
     const getSelectedLayers = () => {
         const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
@@ -64,14 +65,26 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
         }
     };
     useEffect(() => { 
-        // const fetchData = async () => {
-        //     if (featureId) {
-                setLayerNm(getSelectedLayers());
-            // }
-            // const data = await getData(`v1/map/features/${featureId}`);
-            // setTableData(data);
-        // };
-        // fetchData();
+        const fetchData = async () => {
+            if (featureId) {
+                const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
+                setLayerNm(selectedLayerName); // 상태 업데이트
+            
+            const data = await getData(`v1/map/features/${featureId}`);
+            switch (selectedLayerName) {
+                case '하수처리시설':
+                    setHeadlist(SwtrmtFcltCol);
+                    break;
+                case '하수처리구역':
+                    setHeadlist(SwtrmtPrcsZoneCol)
+                    break;
+                default:
+                    break;
+            }
+            setTableData(data);
+        };
+    }
+        fetchData();
     }, [featureId]);
     const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => (
         <div>
@@ -123,7 +136,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
                 </button>
             </div>
             <div className="overflow-y-auto flex-1">
-                <VerticalTable headName='LX 연계정보' tableData={[tableData]} headlist={SwtrmtFcltCol} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
+                <VerticalTable headName='LX 연계정보' tableData={[tableData]} headlist={headlist} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
                     throw new Error("Function not implemented.");
                 }}></VerticalTable>
                 <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
diff --git a/apps/sn/app/map/table.ts b/apps/sn/app/map/table.ts
index 32c83ff7c..a64e610d3 100644
--- a/apps/sn/app/map/table.ts
+++ b/apps/sn/app/map/table.ts
@@ -1,3 +1,4 @@
+// 하수처리시설
 export const SwtrmtFcltCol = [
     { id: 'swtrmtFcltNm', title: '하수처리시설명' },
     { id: 'fcltCpct', title: '시설용량' },
@@ -35,4 +36,16 @@ export const SwtrmtFcltCol = [
     { id: 'sttyCrtrClbclCnt', title: '법정기준대장균수' },
     { id: 'bsnNm', title: '유역명' },
     { id: 'obsrvnSptCd', title: '관측지점코드' },
-];
\ No newline at end of file
+];
+
+// 하수처리구역
+export const SwtrmtPrcsZoneCol = [
+    { id: 'swtrmtZoneSn', title: '하수처리구역 일련번호' },
+    { id: 'swtrmtZoneNm', title: '하수처리구역명' },
+    { id: 'swtrmtFcltCd', title: '하수처리시설코드' },
+    { id: 'ctpvCd', title: '시도코드' },
+    { id: 'ctpvNm', title: '시도명' },
+    { id: 'sggCd', title: '시군구코드' },
+    { id: 'sggNm', title: '시군구명' },
+    { id: 'swtrmtFcltNm', title: '하수처리시설명' },
+]