From 464def34b6e5b2b291b67e15023c66b47c79efb5 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Fri, 9 May 2025 15:48:37 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20=EC=8B=9C=EC=BC=9C=20=EB=8F=99=EC=A0=81?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=9E=91=EC=97=85=20=EB=B0=8F=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=96=B4=20=EB=B3=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/map/components/Ssc.tsx | 66 ++++++++++++++++++++++ apps/sn/app/map/components/SwtrmtFclt.tsx | 31 +++------- apps/sn/app/map/components/common/index.ts | 45 +++++++++++++++ apps/sn/app/map/components/index.ts | 18 ------ apps/sn/app/map/components/smh.tsx | 21 +++++++ 5 files changed, 140 insertions(+), 41 deletions(-) create mode 100644 apps/sn/app/map/components/Ssc.tsx create mode 100644 apps/sn/app/map/components/common/index.ts delete mode 100644 apps/sn/app/map/components/index.ts create mode 100644 apps/sn/app/map/components/smh.tsx diff --git a/apps/sn/app/map/components/Ssc.tsx b/apps/sn/app/map/components/Ssc.tsx new file mode 100644 index 000000000..a6e783ac9 --- /dev/null +++ b/apps/sn/app/map/components/Ssc.tsx @@ -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 ( +
+
+
+

중점우수토실 운영정보

+
+ + +
+ {/* 커스텀 헤더 */} + + + 수량 + + + 수질 + + + + 측정시작일시 + 측정종료일시 + 측정간격(분) + 측정기기설치위치 + 유량계 종류 및 모델명 + 채수시작일시 + 채수종료일시 + 채수횟수 + +
+ +
+
+ ) +} + +export default Ssc \ No newline at end of file diff --git a/apps/sn/app/map/components/SwtrmtFclt.tsx b/apps/sn/app/map/components/SwtrmtFclt.tsx index 66adaa394..bcf2e08d6 100644 --- a/apps/sn/app/map/components/SwtrmtFclt.tsx +++ b/apps/sn/app/map/components/SwtrmtFclt.tsx @@ -1,6 +1,7 @@ import { VerticalTable } from '@/components/ui/verticalTable'; import React, { useState } from 'react' import InputSection from './InputSection'; +import { handleInputChange } from './common'; // 하수처리시설 // TODO: 컬럼에 보고서 엉 ? 이거 버튼누르면 팝업으로 상세화면 띄워주는 건지 확인 필요 const inputColumn = [ @@ -25,35 +26,19 @@ const SwtrmtFclt = () => { { 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> - ) => { - const updated = [...data]; - if (updated[index]) { - updated[index][field as keyof typeof updated[number]] = value; - } - setData(updated); - }; - - if (section === "repair") { - updateData(repairData, setRepairData); - } else if (section === "cleaning") { - updateData(cleaningData, setCleaningData); - } else if (section === "inspection") { - updateData(inspectionData, setInspectionData); - } + const dataMap = { + repair: { data: repairData, setData: setRepairData }, + cleaning: { data: cleaningData, setData: setCleaningData }, + inspection: { data: inspectionData, setData: setInspectionData }, }; return (
- - handleInputChange(section, index, field, value)} /> - handleInputChange(section, index, field, value)} />
+ handleInputChange(section, index, field, value, dataMap)} /> + handleInputChange(section, index, field, value, dataMap)} /> + handleInputChange(section, index, field, value, dataMap)} /> ) } diff --git a/apps/sn/app/map/components/common/index.ts b/apps/sn/app/map/components/common/index.ts new file mode 100644 index 000000000..9228c09ba --- /dev/null +++ b/apps/sn/app/map/components/common/index.ts @@ -0,0 +1,45 @@ +import smh from "../smh"; +import Ssc from "../Ssc"; +import SwtrmtFclt from "../SwtrmtFclt"; + +// 레이어 이름과 컴포넌트를 매핑 +const layerContentMap: { [key: string]: { component: React.FC; 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>; + }; + } +) => { + 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); +}; \ No newline at end of file diff --git a/apps/sn/app/map/components/index.ts b/apps/sn/app/map/components/index.ts deleted file mode 100644 index 6ec872d24..000000000 --- a/apps/sn/app/map/components/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -import SwtrmtFclt from "./SwtrmtFclt"; - -// 레이어 이름과 컴포넌트를 매핑 -const layerContentMap: { [key: string]: { component: React.FC; props?: any; } } = { - "하수처리시설": { - component: SwtrmtFclt, - }, - "하수처리구역": {component : SwtrmtFclt,} -}; - -// 동적 컴포넌트 반환 함수 -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; -}; \ No newline at end of file diff --git a/apps/sn/app/map/components/smh.tsx b/apps/sn/app/map/components/smh.tsx new file mode 100644 index 000000000..e693a28ce --- /dev/null +++ b/apps/sn/app/map/components/smh.tsx @@ -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 ( +
+ +
+ ) +} + +export default Smh; \ No newline at end of file