From d2cf58dc4bc15fdd82eea994d40fddf3abe1623e Mon Sep 17 00:00:00 2001
From: JIeunhuh <entks301@naver.com>
Date: Thu, 15 May 2025 09:59:37 +0900
Subject: [PATCH] =?UTF-8?q?=ED=95=98=EC=88=98=EA=B4=80=EB=A1=9C=20?=
 =?UTF-8?q?=EC=B2=98=ED=8A=B8=20=ED=8C=9D=EC=97=85=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/popupComponent/MsSwagePpl.tsx  |  41 +++++-
 .../popupComponent/chart/infilChart.tsx       | 124 ++++++++++++++++++
 2 files changed, 164 insertions(+), 1 deletion(-)
 create mode 100644 apps/sn/app/map/components/popupComponent/chart/infilChart.tsx

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 (
         <div>
             <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
@@ -39,7 +62,23 @@ const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
             }}></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>
+            <InputSection title="점검 및 진단" data={inspectionData} sectionKey="inspection" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
+            <div className="absolute bottom-0 left-0 w-full flex justify-start space-x-2 p-4">
+                <Button
+                    className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+                    onClick={openModal}
+                >
+                    Infil
+                </Button>
+                <Button
+                    className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+                    onClick={() => console.log("버튼 2 클릭")}
+                >
+                    RDII
+                </Button>
+            </div>
+            <InfilChart isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal} />
+        </div>
     )
 }
 
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<HTMLButtonElement>(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<string, { label: string; color: string }>) satisfies ChartConfig;
+    return (
+        <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
+            {/* 분석 입력현황 조회 */}
+            <div className='grid grid-cols-4 gap-4'>
+                <div className="grid grid-rows-4 gap-4 mb-4">
+                    <Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
+                        분석 입력현황 조회
+                    </Button>
+
+                    {/* 침입수량 분석결과 */}
+                    <div className="bg-white text-red-600 font-bold px-4 py-2 ">
+                        침입수량 분석결과
+                        <div className="flex items-center mt-2">
+                            <span className="text-black text-xl font-bold">120</span>
+                            <span className="ml-2 text-black">m³/d</span>
+                        </div>
+                    </div>
+                </div>
+                {/* 차트 */}
+                <div className="w-[500px] h-[300px] bg-white p-4">
+                    <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={[]} chartTitle={'관로유량'} />
+                </div>
+            </div>
+            {popupOpen && (
+                <div
+                    className="absolute bg-gray-100 border border-gray-300 w-[300px] shadow-lg p-4 rounded"
+                    style={{
+                        top: popupPosition.top,
+                        left: popupPosition.left,
+                        zIndex: 1000,
+                    }}
+                >
+                    <div className="text-lg font-bold mb-2">분석 입력현황</div>
+                    <div className="grid grid-cols-2 gap-2">
+                        <div>상수사용량 정보:</div>
+                        <div>
+                            <select className="border border-gray-300 rounded px-2 py-1">
+                                <option>2024-12</option>
+                                <option>2025-01</option>
+                            </select>
+                        </div>
+                        <div>오수 전환율:</div>
+                        <div>
+                            <select className="border border-gray-300 rounded px-2 py-1">
+                                <option>0.85</option>
+                                <option>0.90</option>
+                            </select>
+                        </div>
+                        <div>수용가-맨홀 매칭:</div>
+                        <div>
+                            <select className="border border-gray-300 rounded px-2 py-1">
+                                <option>매칭(양평).shp</option>
+                                <option>매칭(서울).shp</option>
+                            </select>
+                        </div>
+                        <div>관망도 자료:</div>
+                        <div>
+                            <select className="border border-gray-300 rounded px-2 py-1">
+                                <option>양평.inp</option>
+                                <option>서울.inp</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div className="flex justify-end mt-4 space-x-2">
+                        <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
+                            저장
+                        </button>
+                        <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
+                            종료
+                        </button>
+                    </div>
+                </div>
+            )}
+        </Modal>
+    )
+}
+
+export default InfilChart
\ No newline at end of file