최초

apps/sn/app/(map-layout)/map/components/common/index.ts

@@ -20,9 +20,9 @@ type LayerContentMap = {
 // 레이어 선택시 변경되는 팝업 컨텐츠 동적으로 변경하도록 작업
 const layerContentMap: LayerContentMap = {
   // TODO: gis데이터 추가되면 추가 작업 필요
-  "하수처리시설": { component: SwtrmtFclt, },
+  // "하수처리시설": { component: SwtrmtFclt, },
   // 하수관로 개발용
-  // "하수처리시설": { component: MsSwagePpl, },
+  "하수처리시설": { component: MsSwagePpl, },
   "하수처리구역": {},
   "우수토실": { component: Ssc, },
   "중점우수토실": { component: Ssc, }, // 중점우수토실 여부 설정

apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { VerticalTable } from '@/components/ui/verticalTable';
 import React, { useState } from 'react'
 import InputSection from '../InputSection';

apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts

@@ -0,0 +1,46 @@
+import {useState, useEffect} from 'react';
+
+const convertToTextValArray = (yyyymms: string[]): { text: string; val: string }[] => {
+    return yyyymms.map(dateStr => {
+      const year = dateStr.slice(0, 4);
+      const month = dateStr.slice(4, 6);
+      return {
+        text: `${year}-${month}`,
+        val: dateStr
+      };
+    });
+};
+const selectAplcnYms = async() => { // 상수사용월
+    try {
+    //const result = await getData('v1/inftwtAnlsRslt/aplcnYm');
+    let result = null;  
+    const res = await fetch('http://con.mind-one.co.kr:11083/sewerage-service/api/v1/inftwtAnlsRslt/aplcnYm', {
+        method: "GET",
+        body: null,
+    });
+    if (res.ok) {
+        result = await res.json();
+    }
+
+    if (result && result.length > 0) {
+        //setAplcnYms(convertToTextValArray(result));
+        console.log("selectAplcnYms", result);
+        return convertToTextValArray(result);
+    }
+    } catch (error) {
+    console.error(error);
+    }
+};
+export const useAplcnYms = () => {
+  const [data, setData] = useState<{ text: string; val: string }[]>([]);
+
+  useEffect(() => {
+    const fetch = async () => {
+      const result = await selectAplcnYms();
+      if (result) setData(result);
+    };
+    fetch();
+  }, []);
+
+  return data;
+};

apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx

@@ -1,17 +1,25 @@
-import React, { useState } from 'react'
+'use client'
+import React, { useState, useMemo, useEffect } from 'react'
+import { SelectBox } from '@common/business_components/ui'
 import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_components";
 import Modal from '@/components/ui/modal';
 import { Button } from '@common/components/ui';
+import { getData } from "@/components/lib/api";
+import { useAplcnYms } from './aplcnYms';
 type ModalOpenProp = {
   isModalOpen: boolean,
   setIsModalOpen: (open: boolean) => void,
   closeModal: () => void,
   btnTxt?: string,
 }
+
 const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => {
-  const [popupOpen, setPopupOpen] = React.useState(false);
+  const [popupOpen, setPopupOpen] = React.useState(true);
   const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
   const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
+  const [aplcnYm, setAplcnYm] = useState("");
+  const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]);
+  //const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기
   const openPopup = () => {
     if (buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
@@ -22,7 +30,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
     }
     setPopupOpen(true); // 팝업 열기
   };
-  console.log("btnTxt", btnTxt);
+  //console.log("btnTxt", btnTxt);
   const closePopup = () => { setPopupOpen(false); }; // 팝업 닫기
   const chartForm = CHART_FORM.LINE;
   const chartData = {
@@ -50,6 +58,47 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
     const month = String(today.getMonth() + 1).padStart(2, "0"); // 월은 0부터 시작하므로 +1
     return `${year}-${month}`;
   };
+  
+  const convertToTextValArray = (yyyymms: string[]): { text: string; val: string }[] => {
+    return yyyymms.map(dateStr => {
+      const year = dateStr.slice(0, 4);
+      const month = dateStr.slice(4, 6);
+      return {
+        text: `${year}-${month}`,
+        val: dateStr
+      };
+    });
+  };
+  const selectAplcnYms = async() => { // 상수사용월
+      try {
+        //const result = await getData('v1/inftwtAnlsRslt/aplcnYm');
+        let result = null;  
+        const res = await fetch('http://con.mind-one.co.kr:11083/sewerage-service/api/v1/inftwtAnlsRslt/aplcnYm', {
+          method: "GET",
+          body: null,
+        });
+        if (res.ok) {
+          result = await res.json();
+        }
+
+        if (result && result.length > 0) {
+          //setAplcnYms(convertToTextValArray(result));
+          console.log("selectAplcnYms", result);
+          return convertToTextValArray(result);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+  }
+  useEffect(() => {
+    const fetchAplcnYms = async () => {
+      const aplcnYmsData = await selectAplcnYms();
+      setAplcnYms(aplcnYmsData||[]);
+      console.log("aplcnYms: ", aplcnYms);
+      //setAplcnYm(getCurrentDate());
+    };
+    fetchAplcnYms();
+  }, [aplcnYms]);
   return (
     <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
       {/* 분석 입력현황 조회 */}
@@ -75,18 +124,34 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
       </div>
       {popupOpen && (
         <div
-          className="absolute bg-gray-100 border border-gray-300 w-[320px] shadow-lg p-4 rounded"
+          className="absolute bg-gray-100 border border-gray-300 w-[420px] shadow-lg p-6 rounded text-2xl"
           style={{
             top: popupPosition.top,
             left: popupPosition.left,
             zIndex: 1000,
           }}
         >
-          <div className="text-lg font-bold mb-2">분석 입력현황</div>
+          <div className="font-bold mb-6 text-3xl">침입수분석 입력현황</div>
           <div className="grid grid-cols-2 gap-2">
-            <div>상수사용량 정보:</div>
+            <div><label>상수사용월:</label></div>
             <div>
-              <input type='month' defaultValue={getCurrentDate()} className="border border-gray-300 rounded px-2 py-1" />
+              <SelectBox
+                className="w-[90px] mr-3 ml-4"
+                selectClass="rounded-lg bg-white"
+                label=""
+                selectArray={aplcnYms}
+                onSelectValue={(value: string|number) => setAplcnYm(String(value))}
+              />
+            </div>
+            <div><label>분석정보:</label></div>
+            <div>
+              <SelectBox
+                className="w-[90px] mr-3 ml-4"
+                selectClass="rounded-lg bg-white"
+                label=""
+                selectArray={aplcnYms}
+                onSelectValue={(value: string|number) => setAplcnYm(String(value))}
+              />
             </div>
             <div>오수 전환율:</div>
             <div>

apps/sn/app/components/lib/utils/date.ts

@@ -11,3 +11,15 @@ export const yearOptions = Array.from({ length: 10 }, (_, i) => {
   const year = new Date().getFullYear() - i;
   return { text: `${year}년`, val: year.toString() };
 });
+
+// ["202506", "202505", "202502", "202405"] 을 SelectBox의 옵션으로 변환
+export const convertToTextValArray = (yyyymms: string[]): { text: string; val: string }[] => {
+  return yyyymms.map(dateStr => {
+    const year = dateStr.slice(0, 4);
+    const month = dateStr.slice(4, 6);
+    return {
+      text: `${year}-${month}`,
+      val: dateStr
+    };
+  });
+};