diff --git a/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx
index f847cceb0..af22c332f 100644
--- a/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx
+++ b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx
@@ -2,6 +2,8 @@ import { VerticalTable } from '@/components/ui/verticalTable';
import React, { useState } from 'react'
import InputSection from '../InputSection';
import { handleInputChange } from '../common';
+import { Button } from '@common/components/ui';
+import InfilChart from './chart/infilChart';
// 하수관로
// TODO: RDII 버튼인가 그거 팝업 두개 구현 필요
const inputColumn = [
@@ -15,6 +17,13 @@ const inputColumn = [
];
const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
console.log("featureData", featureData);
+ const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const openModal = () => {
+ setIsModalOpen(true);
+ };
+ const closeModal = () => {
+ setIsModalOpen(false);
+ };
const [repairData, setRepairData] = useState([
{ year: "2025", type: "개대체" },
{ year: "2025", type: "보수" },
@@ -32,6 +41,20 @@ const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
cleaning: { data: cleaningData, setData: setCleaningData },
inspection: { data: inspectionData, setData: setInspectionData },
};
+ const keysToExtract = [
+ "swtrmt_zone_cd",
+ "mltv_dtdv_nm",
+ "fid",
+ "lyrTypeNm",
+ "reg_dt",
+ "mdfcn_dt",
+ "rgtr",
+ "mdfr",
+ ];
+ const filteredData = Object.entries(featureData)
+ .filter(([key]) => keysToExtract.includes(key)) // 필요한 키만 필터링
+ .map(([key, value]) => ({ key, value: value ?? "N/A" })); // 테이블 데이터 형식으로 변환
+
return (
{
}}>
handleInputChange(section, index, field, value, dataMap)} />
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/popupComponent/chart/infilChart.tsx b/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx
new file mode 100644
index 000000000..2e52e194f
--- /dev/null
+++ b/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react'
+import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_components";
+import Modal from '@/components/ui/modal';
+import { Button } from '@common/components/ui';
+type ModalOpenProp = {
+ isModalOpen: boolean,
+ setIsModalOpen: (open: boolean) => void,
+ closeModal: () => void,
+}
+const InfilChart = ({ isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => {
+ const [popupOpen, setPopupOpen] = React.useState(false);
+ const buttonRef = React.useRef(null); // 버튼 참조
+ const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
+ const openPopup = () => {
+ if (buttonRef.current) {
+ const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
+ setPopupPosition({
+ top: rect.bottom + window.scrollY, // 버튼 아래쪽
+ left: rect.left + window.scrollX, // 버튼 왼쪽
+ });
+ }
+ setPopupOpen(true); // 팝업 열기
+ };
+ const closePopup = () => {setPopupOpen(false);}; // 팝업 닫기
+ const chartForm = CHART_FORM.LINE;
+ const chartData = [
+ { label: "1", val: 20 },
+ { label: "3", val: 40 },
+ { label: "5", val: 60 },
+ { label: "7", val: 80 },
+ { label: "9", val: 100 },
+ { label: "11", val: 120 },
+ { label: "13", val: 140 },
+ { label: "15", val: 120 },
+ { label: "17", val: 100 },
+ { label: "19", val: 80 },
+ { label: "21", val: 60 },
+ { label: "23", val: 40 },
+ ];
+ const chartConfig = chartData.reduce((config, element) => {
+ config[element.label] = {
+ label: element.label,
+ color: "hsl(var(--chart-1))",
+ };
+ return config;
+ }, {} as Record) satisfies ChartConfig;
+ return (
+
+ {/* 분석 입력현황 조회 */}
+
+
+
+
+ {/* 침입수량 분석결과 */}
+
+ 침입수량 분석결과
+
+ 120
+ m³/d
+
+
+
+ {/* 차트 */}
+
+
+
+
+ {popupOpen && (
+
+
분석 입력현황
+
+
상수사용량 정보:
+
+
+
+
오수 전환율:
+
+
+
+
수용가-맨홀 매칭:
+
+
+
+
관망도 자료:
+
+
+
+
+
+
+
+
+
+ )}
+
+ )
+}
+
+export default InfilChart
\ No newline at end of file