From 105c9de31b3e656a15f70aeba5ff11b765350cbc Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Mon, 12 May 2025 14:48:07 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=96=B4=EB=B3=84=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20=EC=A0=80=EC=9E=A5=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=ED=9B=84=20=EC=9E=91=EC=97=85=ED=95=84?= =?UTF-8?q?=EC=9A=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/map/components/common/index.ts | 8 +++- apps/sn/app/map/components/common/table.ts | 22 +++++++++ .../components/popupComponent/MsSwagePpl.tsx | 45 +++++++++++++++++++ .../components/popupComponent/sewagePump.tsx | 18 ++++++++ .../popupComponent/stormWaterPump.tsx | 17 +++++++ apps/sn/app/map/featureClickEventPopup.tsx | 43 +++++++++++++----- 6 files changed, 142 insertions(+), 11 deletions(-) create mode 100644 apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx create mode 100644 apps/sn/app/map/components/popupComponent/sewagePump.tsx create mode 100644 apps/sn/app/map/components/popupComponent/stormWaterPump.tsx diff --git a/apps/sn/app/map/components/common/index.ts b/apps/sn/app/map/components/common/index.ts index 1af83674c..4be458f99 100644 --- a/apps/sn/app/map/components/common/index.ts +++ b/apps/sn/app/map/components/common/index.ts @@ -1,8 +1,12 @@ +import MsSwagePpl from "../popupComponent/MsSwagePpl"; +import sewagePump from "../popupComponent/sewagePump"; import smh from "../popupComponent/smh"; import Ssc from "../popupComponent/Ssc"; +import StormWaterPump from "../popupComponent/stormWaterPump"; import SwtrmtFclt from "../popupComponent/SwtrmtFclt"; // 레이어 이름과 컴포넌트를 매핑 +// 레이어 선택시 변경되는 팝업 컨텐츠 동적으로 변경하도록 작업 const layerContentMap: { [key: string]: { component?: React.FC ; props?: any; } } = { // TODO: gis데이터 추가되면 추가 작업 필요 "하수처리시설": { @@ -10,8 +14,10 @@ const layerContentMap: { [key: string]: { component?: React.FC ; props?: an }, "하수처리구역": { }, "중점우수토실":{component: Ssc,}, - "하수관로":{component: SwtrmtFclt,}, + "하수관로":{component: MsSwagePpl,}, "하수맨홀":{component: smh,}, + "빗물펌프":{component:StormWaterPump}, + "오수펌프":{component:sewagePump}, }; // 동적 컴포넌트 반환 함수 diff --git a/apps/sn/app/map/components/common/table.ts b/apps/sn/app/map/components/common/table.ts index a64e610d3..b72d3e81d 100644 --- a/apps/sn/app/map/components/common/table.ts +++ b/apps/sn/app/map/components/common/table.ts @@ -49,3 +49,25 @@ export const SwtrmtPrcsZoneCol = [ { id: 'sggNm', title: '시군구명' }, { id: 'swtrmtFcltNm', title: '하수처리시설명' }, ] + +// 하수맨홀 +export const MsSwageMhlCol = [ + { id: 'fid', title: 'FID' }, + { id: 'geom', title: 'geometry' }, + { id: 'ftreSmblCd', title: '지형지물부호코드' }, + { id: 'mngNo', title: '관리번호' }, + { id: 'pbadmsEmdCd', title: '행정읍면동코드' }, + { id: 'mapshtNo', title: '도엽번호' }, + { id: 'mngInstCd', title: '관리기관코드' }, + { id: 'instlYmd', title: '설치일자' }, + { id: 'lastDrdgnYmd', title: '최종준설일자' }, + { id: 'usgCd', title: '용도코드' }, + { id: 'fcltyShpCd', title: '시설물형태코드' }, + { id: 'mhlKndCd', title: '맨홀종류코드' }, + { id: 'swageMhDiam', title: '하수맨홀구경' }, + { id: 'wdthLen', title: '가로길이' }, + { id: 'vrtcLen', title: '세로길이' }, + { id: 'mqltCd', title: '재질코드' }, + { id: 'altdVl', title: '표고값' }, + { id: 'dpthlVl', title: '심도값' }, + { id: 'instMngNo', title:'기관관리번호'}] diff --git a/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx new file mode 100644 index 000000000..4e00b7049 --- /dev/null +++ b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx @@ -0,0 +1,45 @@ +import { VerticalTable } from '@/components/ui/verticalTable'; +import React, { useState } from 'react' +import InputSection from '../InputSection'; +import { handleInputChange } from '../common'; +// 하수관로 +// TODO: RDII 버튼인가 그거 팝업 두개 구현 필요 +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 ( +
+ + handleInputChange(section, index, field, value, dataMap)} /> + handleInputChange(section, index, field, value, dataMap)} /> + handleInputChange(section, index, field, value, dataMap)} />
+ ) +} + +export default SwtrmtFclt \ No newline at end of file diff --git a/apps/sn/app/map/components/popupComponent/sewagePump.tsx b/apps/sn/app/map/components/popupComponent/sewagePump.tsx new file mode 100644 index 000000000..6117e1a5d --- /dev/null +++ b/apps/sn/app/map/components/popupComponent/sewagePump.tsx @@ -0,0 +1,18 @@ +import { VerticalTable } from '@/components/ui/verticalTable'; +import React from 'react' +const inputColumn = [ + { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] }, + { id: "bungu", title: "배수분구", type: "input" }, + { id: "freq", title: "설계빈도", type: "input" }, +] +// 오수펌프 +const sewagePump = () => { + return ( +
+
+ ) +} + +export default sewagePump diff --git a/apps/sn/app/map/components/popupComponent/stormWaterPump.tsx b/apps/sn/app/map/components/popupComponent/stormWaterPump.tsx new file mode 100644 index 000000000..f21024b74 --- /dev/null +++ b/apps/sn/app/map/components/popupComponent/stormWaterPump.tsx @@ -0,0 +1,17 @@ +import { VerticalTable } from '@/components/ui/verticalTable'; +import React from 'react' +const inputColumn = [ + { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] }, + { id: "bungu", title: "배수분구", type: "input" }, +] +// 빗물펌프 +const StormWaterPump = () => { + return ( +
+
+ ) +} + +export default StormWaterPump \ No newline at end of file diff --git a/apps/sn/app/map/featureClickEventPopup.tsx b/apps/sn/app/map/featureClickEventPopup.tsx index cc63caf76..f131cb16c 100644 --- a/apps/sn/app/map/featureClickEventPopup.tsx +++ b/apps/sn/app/map/featureClickEventPopup.tsx @@ -1,7 +1,7 @@ 'use client' import { VerticalTable } from "@/components/ui/verticalTable"; import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from "./components/common/table"; import { useGisContext } from "@common/business_components/ui/map/Gis"; import { getData } from "@/components/lib/api"; @@ -13,7 +13,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, const [layerNm, setLayerNm] = useState(""); // 레이어 이름 상태 const [tableData, setTableData] = useState(null); // 피처 데이터 상태 const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태 - let [buttonChk,setButtonChk] = useState(true) + let [buttonChk, setButtonChk] = useState(true) + const contentRef = useRef(null); // 피쳐데이터의 현재 레이어 이름 가져오는 함수 const getSelectedLayers = () => { const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기 @@ -30,6 +31,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, const fetchData = async () => { if (featureId) { const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기 + console.log("Selected Layer Name:", selectedLayerName); setLayerNm(selectedLayerName); // 상태 업데이트 const data = await getData(`v1/map/features/${featureId}`); @@ -51,7 +53,10 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, case '하수관로': setButtonChk(true) break; - case '하수맨홀': + case '오수펌프': + setButtonChk(true) + break; + case '빗물펌프': setButtonChk(true) break; default: @@ -62,6 +67,24 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, } fetchData(); }, [featureId]); + // TODO: api 호출작업 필요(사용자 입력부분) + const btnClickEvent = () => { + if (buttonChk && contentRef.current) { + const inputElements = contentRef.current.querySelectorAll('input'); + const selectElements = contentRef.current.querySelectorAll('select'); + // select 태그의 값 가져오기 + console.log("Select Elements:", selectElements); + console.log("Input Elements:", inputElements); + selectElements.forEach((select) => { + console.log("Select Value:", select.value); + }); + + // input 태그의 값 가져오기 + inputElements.forEach((input) => { + console.log("Input Value:", input.value); + }); + } + } const ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null; return ( -
- +
- {buttonChk ? : null} -
- {ContentComponent && } + {buttonChk ? : null} +
+ {ContentComponent && } )