침입수정보 선택

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

@@ -1,38 +1,6 @@
 import {useState, useEffect} from 'react';
-
-const convertToTextValArray = (yyyymms: string[]): { text: string; val: string }[] => {
-    let yyyymms1 = yyyymms.map(dateStr => {
-      const year = dateStr.slice(0, 4);
-      const month = dateStr.slice(4, 6);
-      return {
-        text: `${year}-${month}`,
-        val: dateStr
-      };
-    });
-    yyyymms1.unshift({ val: '0', text: '선택' });
-    return yyyymms1;
-};
-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) {
-        console.log("selectAplcnYms", result);
-        return convertToTextValArray(result);
-    }
-    } catch (error) {
-    console.error(error);
-    }
-};
-type InftwtAnls = {
+import { getData } from '@/components/lib/api';
+export type TInftwtAnls = {
   inftwtAnlsSn:number;
   aplcnYm: string;
   enoCd: string;
@@ -53,21 +21,46 @@ type InftwtAnls = {
   anlsInfo: string;
   scsYn: string;
 };
-const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석 
-  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/inftwtAnls', {
-        method: "GET",
-        body: JSON.stringify({aplcnYm}),
+const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] => {
+    let yyyymms1 = yyyymms.map(dateStr => {
+      const year = dateStr.slice(0, 4);
+      const month = dateStr.slice(4, 6);
+      return {
+        text: `${year}-${month}`,
+        val: dateStr
+      };
     });
-    if (res.ok) {
-        result = await res.json();
+    yyyymms1.unshift({ val: '0', text: '선택' });
+    return yyyymms1;
+};
+export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number }[] => {
+  const options = anlsArr.map(anls => ({
+    text: anls.anlsInfo,
+    val: anls.inftwtAnlsSn,
+  }));
+  options.unshift({ val: 0, text: '선택' });
+  return options;
+};
+const selectAplcnYms = async() => { // 상수사용월
+    try {
+    const queryString = '';
+    const result = await getData(`v1/inftwtAnlsRslt/aplcnYm${queryString ? `?${queryString}` : ''}`);
+    if (result && result.length > 0) {
+        console.log("selectAplcnYms", result);
+        return getOptionsAplcnYm(result);
     }
+    } catch (error) {
+    console.error(error);
+    }
+};
 
+export const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석 
+  try {
+    const queryString = aplcnYm ? `aplcnYm=${aplcnYm}` : '';
+    const result = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`);
     if (result && result.numberOfElements > 0) {
         console.log("selectInftwtAnls", result.content);
-        return result.content as InftwtAnls[];
+        return result.content;
     } 
   } catch (error) {
     console.error(error);
@@ -85,4 +78,4 @@ export const useAplcnYms = () => {
   }, []);
 
   return data;
-};
+};

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

@@ -5,7 +5,9 @@ import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_compon
 import Modal from '@/components/ui/modal';
 import { Button } from '@common/components/ui';
 import { getData } from "@/components/lib/api";
-import { useAplcnYms } from './aplcnYms';
+import type { TInftwtAnls } from './aplcnYms';
+import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo} from './aplcnYms';
+import { set } from 'react-hook-form';
 type ModalOpenProp = {
   isModalOpen: boolean,
   setIsModalOpen: (open: boolean) => void,
@@ -18,6 +20,11 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
   const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
   const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
   const [aplcnYm, setAplcnYm] = useState("");
+  const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
+  const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
+  const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls|null>(null); // 침입수분석정보
+  const [inftwtAnlsSn, setInftwtAnlsSn] = useState<number>(0); // 침입수분석 정보 선택시 사용
+  
   //const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]);
   const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기
   const openPopup = () => {
@@ -58,7 +65,24 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
     const month = String(today.getMonth() + 1).padStart(2, "0"); // 월은 0부터 시작하므로 +1
     return `${year}-${month}`;
   };
-  
+  const onChangeAplcnYm = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
+    selectInftwtAnls(selectedValue).then((data) => {
+      setInftwtAnlss(data ?? []);
+      console.log("onChangeAplcnYm", selectedValue, inftwtAnlss);
+      setInftwtAnlsInfos(getOptionsInftwtAnlsInfo(data ?? []));
+    });
+    setAplcnYm(selectedValue);    
+  };
+  const onChangeInftwtAnlsInfo = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedInfo = e.target.value;
+    setInftwtAnlsSn(Number(selectedInfo)); // 선택값 상태로 저장
+    // 선택된 침입수분석 정보에 대한 처리 로직 추가
+    const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === Number(selectedInfo));
+    if (selectedAnls) {
+      setInftwtAnls(selectedAnls);
+    }
+  };
   return (
     <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
       {/* 분석 입력현황 조회 */}
@@ -92,11 +116,11 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
           }}
         >
           <div className="font-bold mb-6 text-3xl">침입수분석 입력현황</div>
-          <div className="grid grid-cols-2 gap-2">
+          <div className="grid grid-cols-[35%_65%] gap-2">
             <div><label>상수사용월:</label></div>
             <div>
               <select className="border border-gray-300 rounded px-2 py-1"
-                  onChange={e => setAplcnYm(e.target.value)} value={aplcnYm}>
+                  onChange={onChangeAplcnYm} value={aplcnYm}>
                 {aplcnYms.map(opt => (
                   <option key={opt.val} value={opt.val}>{opt.text}</option>
                 ))}
@@ -104,20 +128,19 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
             </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))}
-              />
+              <select className="border border-gray-300 rounded px-2 py-1"
+                  onChange={onChangeInftwtAnlsInfo} value={inftwtAnlsSn}>
+                {inftwtAnlsInfos.map(opt => (
+                  <option key={opt.val} value={opt.val}>{opt.text}</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>
+              <input
+                type="text"
+                value={inftwtAnls?.drtwSwtcRt ?? ""}
+                className="border border-gray-300 rounded px-2 py-1 w-full" />
             </div>
             <div>수용가-맨홀 매칭:</div>
             <div>
@@ -149,10 +172,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
           </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>