ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

레이어별 컴포넌트 추가 및 저장 버튼 클릭 시 이벤트 처리 추후 작업필요

Browse Source
This commit is contained in:
JIeunhuh
2025-05-12 14:48:07 +09:00
parent bd1c758caa
commit 105c9de31b
6 changed files with 142 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/map/components/common/index.ts
+7 -1
View File
@@ -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<any> ; props?: any; } } = {
// TODO: gis데이터 추가되면 추가 작업 필요
"하수처리시설": {
@@ -10,8 +14,10 @@ const layerContentMap: { [key: string]: { component?: React.FC<any> ; props?: an
},
"하수처리구역": { },
"중점우수토실":{component: Ssc,},
"하수관로":{component: SwtrmtFclt,},
"하수관로":{component: MsSwagePpl,},
"하수맨홀":{component: smh,},
"빗물펌프":{component:StormWaterPump},
"오수펌프":{component:sewagePump},
};
// 동적 컴포넌트 반환 함수
apps/sn/app/map/components/common/table.ts
+22
View File
@@ -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:'기관관리번호'}]
apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx
+45
View File
@@ -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 (
<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
apps/sn/app/map/components/popupComponent/sewagePump.tsx
+18
View File
@@ -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 (
<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>
)
}
export default sewagePump
apps/sn/app/map/components/popupComponent/stormWaterPump.tsx
+17
View File
@@ -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 (
<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>
)
}
export default StormWaterPump
apps/sn/app/map/featureClickEventPopup.tsx
+33 -10
View File
@@ -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<string>(""); // 레이어 이름 상태
const [tableData, setTableData] = useState<any>(null); // 피처 데이터 상태
const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
let [buttonChk,setButtonChk] = useState(true)
let [buttonChk, setButtonChk] = useState(true)
const contentRef = useRef<HTMLDivElement>(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 (
<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]">
@@ -78,16 +101,16 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
✕
</button>
</div>
<div className="overflow-y-auto flex-1">
<VerticalTable headName='LX 연계정보' tableData={[tableData]} headlist={headlist} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
<div className="overflow-y-auto flex-1" ref={contentRef}>
<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>
<div className="w-full mx-5 flex items-center justify-end space-x-2">
{buttonChk ? <Button className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
저장
</Button> : null}
</div>
{ContentComponent && <ContentComponent />}
{buttonChk ? <Button onClick={btnClickEvent} className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
저장
</Button> : null}
</div>
{ContentComponent && <ContentComponent />}
</div>
</div>
)