Merge commit '4fe52f39a7be61bcf794db3ce0229113d68667ff' into iipbs/sn/dev

2025-05-09 15:53:30 +09:00
parent 8b7d1a64a0 4fe52f39a7
commit 13f69f545f
11 changed files with 420 additions and 140 deletions
@@ -0,0 +1,61 @@
+const BASE_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || '';
+
+export const postData = async (url: string, data: object): Promise<any> => {
+    const options: RequestInit = {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    };
+    const res = await fetch(`${BASE_URL}/${url}`, options);
+    const resData = await res.json();
+    return resData;
+};
+
+export const postMutiPart = async (url: string, data: FormData): Promise<any> => {
+    const options: RequestInit = {
+        method: "POST",
+        body: data,
+    };
+    const res = await fetch(`${BASE_URL}/${url}`, options);
+    const resData = await res.json();
+    return resData;
+};
+
+export const putData = async (url: string, data: object): Promise<any> => {
+    const options: RequestInit = {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    };
+    const res = await fetch(`${BASE_URL}/${url}`, options);
+    const resData = await res.json();
+    return resData;
+};
+
+export const getData = async (url: string): Promise<any> => {
+    const res = await fetch(`${BASE_URL}/${url}`, {
+        method: "GET",
+    });
+    if (res.ok) {
+        const data = await res.json();
+        return data;
+    }
+    throw new Error('Failed to fetch data');
+};
+
+export const deleteData = async (url: string, data?: object): Promise<any> => {
+    const options: RequestInit = {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: data ? JSON.stringify(data) : undefined,
+    };
+    const res = await fetch(`${BASE_URL}/${url}`, options);
+    const resData = await res.json();
+    return resData;
+};
@@ -0,0 +1,31 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose, DialogOverlay } from '@common/components/ui'
+import React from 'react'
+
+interface ModalProps {
+    isModalOpen: boolean;
+    setIsModalOpen: (open: boolean) => void;
+    title?: string;
+    children: React.ReactNode;
+    closeModal: () => void;
+}
+
+const Modal: React.FC<ModalProps> = ({ isModalOpen, setIsModalOpen, title, children, closeModal }) => {
+    return (
+        <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+            <DialogOverlay className='z-[200]'/>
+            <DialogContent className="w-auto max-w-[1200px] h-auto max-h-[450px] overflow-auto z-[1000]">
+                {title ? <DialogHeader>
+                    <DialogTitle>{title}</DialogTitle>
+                </DialogHeader> : null}
+                {children}
+                <DialogFooter>
+                    <DialogClose>
+                        <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closeModal}>닫기</button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+export default Modal
@@ -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 });
        }
@@ -0,0 +1,50 @@
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@common/components/ui";
+import React from "react";
+
+interface InputSectionProps {
+    title: string;
+    data: { year: string; type: string }[];
+    sectionKey: string;
+    onInputChange: (section: string, index: number, field: string, value: string) => void;
+}
+
+const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, onInputChange }) => {
+    return (
+        <div>
+            {/* 섹션 제목 */}
+            <div className="card-header">
+                <h3 className="text-2xl mx-3 font-medium text-label">{title}</h3>
+            </div>
+            {/* 테이블 */}
+            <div className="card !m-[1.2rem] !p-0r">
+                <Table variant="secondary" className="w-full">
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">년도</TableHead>
+                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">구분</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {data.map((row, index) => (
+                            <TableRow key={index}>
+                                <TableCell className="border border-gray-300 px-2 py-2 text-sm">
+                                    <input
+                                        type="text"
+                                        value={row.year}
+                                        onChange={(e) => onInputChange(sectionKey, index, "year", e.target.value)}
+                                        className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal"
+                                    />
+                                </TableCell>
+                                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal">
+                                    {row.type}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    );
+};
+
+export default InputSection;
@@ -0,0 +1,66 @@
+// 우수토실
+import Modal from '@/components/ui/modal';
+import { VerticalTable } from '@/components/ui/verticalTable';
+import { UiTable } from '@common/business_components/ui';
+import { Button, TableHead, TableRow } from '@common/components/ui';
+import React from 'react'
+const inputColumn = [
+  { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+  { id: "mainSscYn", title: "중점우수토실 대상여부", type: "select", options: ['Y', 'N'] },
+];
+const headlist = [
+  { id: 'startrain', title: '강우시작일시' }, { id: 'endrain', title: '강우종료일시' }, { id: '선행건기', title: '선행건기(h)' }, { id: '강우정보', title: '강우정보' }, { id: '누적강우량', title: '누적강우량(mm)' }, { id: '지속시간', title: '지속시간(h)' }, { id: '강우강도', title: '강우강도(mm/h)' },
+]
+const headlist3 = [{ id: 'nm', title: '회차' }, { id: 'date', title: '측정일자' }, { id: 'measure', title: '수량(m)' }, { id: 'bod', title: 'BOD(mg/L)' }, { id: 'toc', title: 'TOC(mg/L)' }, { id: '오염부하량', title: '오염부하량(kg)' }]
+const Ssc = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+  return (
+    <div><VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
+      throw new Error('Function not implemented.');
+    }} />
+      <div>
+        <div className="card-header">
+          <h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
+        </div>
+        <Button className='mx-auto block w-64 mt-3 py-2 text-white rounded-sm text-sm font-medium hover:bg-blue-700 bg-blue-600' onClick={openModal}>상세보기</Button>
+        <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
+          <div className='grid grid-col-3'><UiTable headName='강우정보' tableData={[]} headlist={headlist} pageSize={0} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
+            throw new Error('Function not implemented.');
+          }}></UiTable>
+          <UiTable headName='측정정보' tableData={[]} headlist={[]} pageSize={0} total={0} cellClick={undefined} onPageChange={function (page: number): void {
+            throw new Error('Function not implemented.');
+          }}>  {/* 커스텀 헤더 */}
+          <TableRow>
+            <TableHead colSpan={5} className="text-center bg-blue-100 font-bold">
+              수량
+            </TableHead>
+            <TableHead colSpan={3} className="text-center bg-blue-100 font-bold">
+              수질
+            </TableHead>
+          </TableRow>
+          <TableRow>
+            <TableHead className="text-center">측정시작일시</TableHead>
+            <TableHead className="text-center">측정종료일시</TableHead>
+            <TableHead className="text-center">측정간격(분)</TableHead>
+            <TableHead className="text-center">측정기기설치위치</TableHead>
+            <TableHead className="text-center">유량계 종류 및 모델명</TableHead>
+            <TableHead className="text-center">채수시작일시</TableHead>
+            <TableHead className="text-center">채수종료일시</TableHead>
+            <TableHead className="text-center">채수횟수</TableHead>
+          </TableRow></UiTable>
+          <UiTable headName='수량/수질측정 정보' tableData={[]} headlist={headlist3} pageSize={0} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
+            throw new Error('Function not implemented.');
+          }}></UiTable></div>
+        </Modal>
+      </div>
+    </div>
+  )
+}
+
+export default Ssc
@@ -0,0 +1,45 @@
+import { VerticalTable } from '@/components/ui/verticalTable';
+import React, { useState } from 'react'
+import InputSection from './InputSection';
+import { handleInputChange } from './common';
+// 하수처리시설
+// TODO: 컬럼에 보고서 엉 ? 이거 버튼누르면 팝업으로 상세화면 띄워주는 건지 확인 필요 
+const inputColumn = [
+    { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
+    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+    { id: "basu", title: "배수구역", type: "input" },
+    { id: "bungu", title: "배수분구", type: "input" },
+    { id: "wltjs", title: "지선/간선", type: "select", options: ["지선", "간선"] },
+    { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
+    { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
+];
+const SwtrmtFclt = () => {
+    const [repairData, setRepairData] = useState([
+        { year: "2025", type: "개대체" },
+        { year: "2025", type: "보수" },
+    ]);
+    const [cleaningData, setCleaningData] = useState([
+        { year: "2025", type: "청소" },
+        { year: "2025", type: "준설" },
+    ]);
+    const [inspectionData, setInspectionData] = useState([
+        { year: "2025", type: "관로기술진단" },
+        { year: "2025", type: "관로기술진단" },
+    ]);
+    const dataMap = {
+        repair: { data: repairData, setData: setRepairData },
+        cleaning: { data: cleaningData, setData: setCleaningData },
+        inspection: { data: inspectionData, setData: setInspectionData },
+    };
+    return (
+        <div>
+            <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
+                throw new Error("Function not implemented.");
+            }}></VerticalTable>
+            <InputSection title="보수 및 갱신" data={repairData} sectionKey="repair" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
+            <InputSection title="청소 및 준설" data={cleaningData} sectionKey="cleaning" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
+            <InputSection title="점검 및 진단" data={inspectionData} sectionKey="inspection" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} /></div>
+    )
+}
+
+export default SwtrmtFclt
@@ -0,0 +1,45 @@
+import smh from "../smh";
+import Ssc from "../Ssc";
+import SwtrmtFclt from "../SwtrmtFclt";
+
+// 레이어 이름과 컴포넌트를 매핑
+const layerContentMap: { [key: string]: { component: React.FC<any>; props?: any; } } = {
+    // TODO: gis데이터 추가되면 추가 작업 필요
+    "하수처리시설": {
+        component: SwtrmtFclt,
+    },
+    "하수처리구역": { component: Ssc, },
+    "중점우수토실":{component: Ssc,},
+    "하수관로":{component: SwtrmtFclt,},
+    "하수맨홀":{component: smh,},
+};
+
+// 동적 컴포넌트 반환 함수
+export const getLayerContentComponent = (layerNm: string): React.FC => {
+    const component = layerContentMap[layerNm];
+    if (!component) {
+        throw new Error(`Component not found for layer name: ${layerNm}`);
+    }
+    return component.component;
+};
+// 사용자 입력 필드 (보수 및 갱신, 청소 및 준설, 점검 및 진단)
+export const handleInputChange = (section: string,
+    index: number,
+    field: string,
+    value: string,
+    dataMap: {
+        [key: string]: {
+            data: { year: string; type: string }[];
+            setData: React.Dispatch<React.SetStateAction<{ year: string; type: string }[]>>;
+        };
+    }
+) => {
+    const target = dataMap[section];
+    if (!target) return;
+
+    const updated = [...target.data];
+    if (updated[index]) {
+        updated[index][field as keyof typeof updated[number]] = value;
+    }
+    target.setData(updated);
+}; 
@@ -0,0 +1,21 @@
+// 하수맨홀
+import { VerticalTable } from '@/components/ui/verticalTable';
+import React from 'react'
+const inputColumn = [
+    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+    { id: "basu", title: "배수구역", type: "input" },
+    { id: "bungu", title: "배수분구", type: "input" },
+    { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
+    {id:'spec', title:'규격', type:'input'},
+];
+const Smh = () => {
+  return (
+   <div>
+    <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
+        throw new Error("Function not implemented.");
+    }}></VerticalTable>
+   </div>
+  )
+}
+
+export default Smh;
@@ -1,102 +1,59 @@
 'use client'
-import { VerticalTable } from "@/components/verticalTable";
+import { VerticalTable } from "@/components/ui/verticalTable";
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui";
-import { useState } from "react";
-import { CommonTableColumn } from "./table";
-const inputColumn = [
-    { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
-    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
-    { id: "basu", title: "배수구역", type: "input" },
-    { id: "bungu", title: "배수분구", type: "input" },
-    { id: "wltjs", title: "지선/간선", type: "select", options: ["지선", "간선"] },
-    { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
-    { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
-];
-
-const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData:any }) => {
-    // TODO: 런타임 에러 해결 필요
-    const [repairData, setRepairData] = useState([
-        { year: "2025", type: "개대체" },
-        { year: "2025", type: "보수" },
-    ]);
-
-    const [cleaningData, setCleaningData] = useState([
-        { year: "2025", type: "청소" },
-        { year: "2025", type: "준설" },
-    ]);
-
-    const [inspectionData, setInspectionData] = useState([
-        { year: "2025", type: "관로기술진단" },
-        { year: "2025", type: "관로기술진단" },
-    ]);
-    const handleInputChange = (section: string, index: number, field: string, value: string) => {
-        const updateData = (data: { year: string; type: string }[], setData: React.Dispatch<React.SetStateAction<{ year: string; type: string }[]>>) => {
-            const updated = [...data];
-            if (updated[index]) {
-                updated[index][field as keyof typeof updated[number]] = value;
+import { use, useEffect, useState } from "react";
+import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from "./table";
+import { useGisContext } from "@common/business_components/ui/map/Gis";
+import { getData } from "@/components/lib/api";
+import InputSection from "./components/InputSection";
+import { getLayerContentComponent } from "./components/common";
+// TODO:
+const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
+    const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
+    const featureId = featureData.getId(); // 피처의 id 가져오기
+    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에서 모든 레이어 가져오기
+        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; // 피처가 속한 레이어 찾기
            }
-            setData(updated);
-        };
-
-        if (section === "repair") {
-            updateData(repairData, setRepairData);
-        } else if (section === "cleaning") {
-            updateData(cleaningData, setCleaningData);
-        } else if (section === "inspection") {
-            updateData(inspectionData, setInspectionData);
-        }
+        });
+        return featureLayer.get('lyrNm'); // 레이어 이름 출력
    };
-    function transformFeatureDataToArray(featureData: any, keys: string[]) {
-        // 필요한 키만 추출하여 새로운 객체 생성
-        const transformedData = keys.reduce((acc, key) => {
-            acc[key] = featureData[key] !== undefined ? featureData[key] : "N/A"; // 값이 없으면 "N/A"로 처리
-            return acc;
-        }, {} as Record<string, any>);
-    
-        // 배열로 감싸서 반환
-        return [transformedData];
-    }
-    const keys = CommonTableColumn.map((column) => column.id);
-    const transformedFeatureData = transformFeatureDataToArray(featureData, keys);
-    const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => (
-        <div>
-            {/* 섹션 제목 */}
-            <div className="card-header">
-                <h3 className="text-2xl mx-3 font-medium text-label">{title}</h3>
-            </div>
-            {/* 테이블 */}
-            <div className="card !m-[1.2rem] !p-0r">
-                <Table variant="secondary" className="w-full">
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">년도</TableHead>
-                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">구분</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        {data.map((row, index) => (
-                            <TableRow key={index}>
-                                <TableCell className="border border-gray-300 px-2 py-2 text-sm">
-                                    <input
-                                        type="text"
-                                        value={row.year}
-                                        onChange={(e) => handleInputChange(sectionKey, index, "year", e.target.value)}
-                                        className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal"
-                                    />
-                                </TableCell>
-                                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal">{row.type}</TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </div>
-        </div>
-    );
+    useEffect(() => {
+        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 ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null;
    return (
-        <div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-10rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[1000]">
+        <div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-10rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[200]">
            <div className="card-header bg-primary flex items-center justify-between p-4">
                <div className="flex mx-3 flex-col">
-                    <h3 className="text-2xl font-medium text-white text-label">하수관로 정보</h3>
+                    <h3 className="text-2xl font-medium text-white text-label">{layerNm} 정보</h3>
                    <div className="font-medium text-white text-label">(00구 00리 하수관로)</div>
                </div>
                <button
@@ -108,22 +65,16 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
                </button>
            </div>
            <div className="overflow-y-auto flex-1">
-                <VerticalTable headName='LX 연계정보' tableData={transformedFeatureData} headlist={CommonTableColumn} 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 {
-                    throw new Error("Function not implemented.");
-                }}></VerticalTable>
-                {/* here */}
-                {renderSection("보수 및 갱신", repairData, "repair")}
-                {renderSection("청소 및 준설", cleaningData, "cleaning")}
-                {renderSection("점검 및 진단", inspectionData, "inspection")}
-            </div>
-            <div className="w-full mx-5 flex items-center justify-end space-x-2">
+                <div className="w-full mx-5 flex items-center justify-end space-x-2">
                <Button className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
                    저장
                </Button>
            </div>
+              {ContentComponent && <ContentComponent />}
+            </div>
        </div>
    )
 }
@@ -1,40 +1,51 @@
-export const CommonTableColumn = [
-    { id: 'swtrmt_fclt_cd', title: '하수처리시설코드' },
-    { id: 'swtrmt_fclt_nm', title: '하수처리시설명' },
-    { id: 'fclt_cpct', title: '시설용량' },
-    { id: 'rgn_expln', title: '지역설명' },
-    { id: 'cmcn_ymd', title: '준공일자' },
-    { id: 'oprtng_strt_ymd', title: '가동개시일자' },
-    { id: 'clsg_ymd', title: '폐쇄일자' },
-    { id: 'prcs_msrc_cd', title: '처리공법코드' },
-    { id: 'lae_cd', title: '지자체코드' },
-    { id: 'lae_nm', title: '지자체명' },
-    { id: 'ctpv_nm', title: '시도명' },
-    { id: 'sgg_nm', title: '시군구명' },
-    { id: 'sarea_cd', title: '권역코드' },
-    { id: 'sarea_nm', title: '권역명' },
-    { id: 'lrge_sarea_nm', title: '대권역명' },
-    { id: 'rvr_nm', title: '하천명' },
+// 하수처리시설
+export const SwtrmtFcltCol = [
+    { id: 'swtrmtFcltNm', title: '하수처리시설명' },
+    { id: 'fcltCpct', title: '시설용량' },
+    { id: 'rgnExpln', title: '지역설명' },
+    { id: 'cmcnYmd', title: '준공일자' },
+    { id: 'oprtngStrtYmd', title: '가동개시일자' },
+    { id: 'clsgYmd', title: '폐쇄일자' },
+    { id: 'prcsMsrcCd', title: '처리공법코드' },
+    { id: 'laeCd', title: '지자체코드' },
+    { id: 'laeNm', title: '지자체명' },
+    { id: 'ctpvNm', title: '시도명' },
+    { id: 'sggNm', title: '시군구명' },
+    { id: 'sareaCd', title: '권역코드' },
+    { id: 'sareaNm', title: '권역명' },
+    { id: 'lrgeSareaNm', title: '대권역명' },
+    { id: 'rvrNm', title: '하천명' },
    { id: 'addr', title: '주소' },
    { id: 'daddr', title: '상세주소' },
-    { id: 'rdnm_addr', title: '도로명주소' },
-    { id: 'dtl_rdnm_addr', title: '상세도로명주소' },
-    { id: 'dschg_wtst_nm', title: '방류수계명' },
-    { id: 'plln_area', title: '부지면적' },
-    { id: 'mng_rprtv_bzenty_nm', title: '관리대행업제명' },
-    { id: 'swtrmt_ppltn_cnt', title: '하수처리인구수' },
-    { id: 'prcs_zone_area_sum', title: '처리구역면적합계' },
-    { id: 'geom', title: 'geometry' },
+    { id: 'rdnmAddr', title: '도로명주소' },
+    { id: 'dtlRdnmAddr', title: '상세도로명주소' },
+    { id: 'dschgWtstNm', title: '방류수계명' },
+    { id: 'pllnArea', title: '부지면적' },
+    { id: 'mngRprtvBzentyNm', title: '관리대행업제명' },
+    { id: 'swtrmtPpltnCnt', title: '하수처리인구수' },
+    { id: 'prcsZoneAreaSum', title: '처리구역면적합계' },
    { id: 'xcrd', title: 'X좌표' },
    { id: 'ycrd', title: 'Y좌표' },
-    { id: 'oprtng_stts_cd', title: '가동상태코드' },
-    { id: 'rprs_msrc_cn', title: '대표공법내용' },
-    { id: 'stty_crtr_bod', title: '법정기준생물화학적산소요구량' },
-    { id: 'stty_crtr_toc', title: '법정기준TOC' },
-    { id: 'stty_crtr_ss', title: '법정기준SS' },
-    { id: 'stty_crtr_tn', title: '법정기준총질소' },
-    { id: 'stty_crtr_tph', title: '법정기준총인' },
-    { id: 'stty_crtr_clbcl_cnt', title: '법정기준대장균수' },
-    { id: 'bsn_nm', title: '유역명' },
-    { id: 'obsrvn_spt_cd', title: '관측지점코드' },
-];
+    { id: 'oprtngSttsCd', title: '가동상태코드' },
+    { id: 'rprsMsrcCn', title: '대표공법내용' },
+    { id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량' },
+    { id: 'sttyCrtrToc', title: '법정기준TOC' },
+    { id: 'sttyCrtrSs', title: '법정기준SS' },
+    { id: 'sttyCrtrTn', title: '법정기준총질소' },
+    { id: 'sttyCrtrTph', title: '법정기준총인' },
+    { 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: '하수처리시설명' },
+]
@@ -15,7 +15,7 @@ export default React.memo(function GisSelect({ onFeatureSelect }) {
 		//clickFeature(features[0]);
 		if(features.length > 0) {
 			const layer = features[0];
-			onFeatureSelect(layer.getProperties()); //피쳐 속성데이터 상위컴포넌트로 전달
+			onFeatureSelect(layer); //피쳐 속성데이터 상위컴포넌트로 전달
 		}
 	});
 	return (