선택된 레이어에 맞춰 테이블 변경되도록 수정

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 {

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: '관측지점코드' },
-];
+];
+
+// 하수처리구역
+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: '하수처리시설명' },
+]