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

refactor : inflChart.tsx 공통컴포넌트 적용

Browse Source
This commit is contained in:
swcho
2025-06-30 15:46:12 +09:00
parent a2d48745b3
commit a0ee6f34f5
1 changed files with 221 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+221 -89
View File
@@ -1,13 +1,12 @@
'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 { type ChartConfig, MainChart, CHART_FORM, UiModal } from "@common/business_components";
import { Button, Input, Label } from '@common/components';
import { getData } from "@/components/lib/api";
import type { TInftwtAnls, TInftwtAnlsRslt } from './aplcnYms';
import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo} from './aplcnYms';
import { selectInftwtAnlsRslt, getChartDataInftwtAnlsRslt} from './aplcnYms';
import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo } from './aplcnYms';
import { selectInftwtAnlsRslt, getChartDataInftwtAnlsRslt } from './aplcnYms';
import { set } from 'react-hook-form';
type ModalOpenProp = {
isModalOpen: boolean,
@@ -16,26 +15,86 @@ type ModalOpenProp = {
btnTxt?: string,
}
const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpenProp) => {
// 더미 데이터 리스트
const rainDataList = [
{ val: "R20240815.xlsx", text: "R20240815.xlsx" },
{ val: "R20240701.xlsx", text: "R20240701.xlsx" },
{ val: "R20240615.xlsx", text: "R20240615.xlsx" },
{ val: "R20240531.xlsx", text: "R20240531.xlsx" },
{ val: "R20240420.xlsx", text: "R20240420.xlsx" },
];
const rtxSourceList = [
{ val: "2015년 하수도정비기본계획", text: "2015년 하수도정비기본계획" },
{ val: "2018년 하수도정비기본계획", text: "2018년 하수도정비기본계획" },
{ val: "2020년 하수도정비기본계획", text: "2020년 하수도정비기본계획" },
{ val: "2022년 하수도정비기본계획", text: "2022년 하수도정비기본계획" },
{ val: "2024년 하수도정비기본계획", text: "2024년 하수도정비기본계획" },
];
// 상수사용월 더미 데이터
const dummyAplcnYms = [
{ val: '0', text: '선택' },
{ val: '202401', text: '2024-01' },
{ val: '202402', text: '2024-02' },
{ val: '202403', text: '2024-03' },
{ val: '202404', text: '2024-04' },
{ val: '202405', text: '2024-05' },
{ val: '202406', text: '2024-06' },
{ val: '202407', text: '2024-07' },
{ val: '202408', text: '2024-08' },
{ val: '202409', text: '2024-09' },
{ val: '202410', text: '2024-10' },
{ val: '202411', text: '2024-11' },
{ val: '202412', text: '2024-12' },
];
// 침입수분석정보 더미 데이터
const dummyInftwtAnlsInfos = [
{ val: 0, text: '선택' },
{ val: 1001, text: '서울시 강남구 침입수분석 1차' },
{ val: 1002, text: '서울시 강남구 침입수분석 2차' },
{ val: 1003, text: '서울시 서초구 침입수분석 1차' },
{ val: 1004, text: '부산시 해운대구 침입수분석 1차' },
{ val: 1005, text: '대구시 수성구 침입수분석 1차' },
{ val: 1006, text: '인천시 연수구 침입수분석 1차' },
{ val: 1007, text: '광주시 북구 침입수분석 1차' },
{ val: 1008, text: '대전시 유성구 침입수분석 1차' },
{ val: 1009, text: '울산시 남구 침입수분석 1차' },
{ val: 1010, text: '경기도 성남시 침입수분석 1차' },
];
const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => {
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 [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls|null>(null); // 침입수분석정보
// const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보
const [inftwtAnlsSn, setInftwtAnlsSn] = useState<number>(0); // 침입수분석 정보 선택시 사용
const [drtwSwtcRt, setDrtwSwtcRt] = useState<number>(0); // 오수전환율
const [atflHrPttnNm, setAtflHrPttnNm] = useState<number>(0); // 시간패턴 파일명
const [atflMpng, setAtflMpng] = useState<number>(0); // 수용가-맨홀 매칭
const [atflInpNm, setAtflInpNm] = useState<number>(0); // 관망도 파일명
const [tbSnOilqData, setTbSnOilqData] = useState<number>(0); // 유량 파일명
const [chartData, setChartData] = useState<{ chartData1: { label: string; val: number }[]; chartData2: { label: string; val: number }[] }>({
chartData1: [{ label: "1", val: 20 },
{ label: "3", val: 40 },
{ label: "5", val: 60 },],
{ label: "3", val: 40 },
{ label: "5", val: 60 },],
chartData2: [{ label: "1", val: 15 },
{ label: "3", val: 35 },
{ label: "5", val: 55 },],
{ label: "3", val: 35 },
{ label: "5", val: 55 },],
});
// 상수사용월, 분석정보 더미 데이터로 초기화 (API 호출 실패 시 대비)
const [selectedAplcnYms, setSelectedAplcnYms] = useState<string>(dummyAplcnYms[0]?.val || "0");
const [selectedInftwtAnlsInfos, setSelectedInftwtAnlsInfos] = useState<number>(dummyInftwtAnlsInfos[0]?.val || 0);
// 선택된 값들을 위한 상태 추가
const [selectedRainData, setSelectedRainData] = useState<string>(rainDataList[0]?.val || "선택"); // 초기값으로 첫 번째 항목 선택
const [selectedRtxSource, setSelectedRtxSource] = useState<string>(rtxSourceList[0]?.val || "선택");
// API에서 데이터를 가져오지 못할 경우 더미 데이터 사용
// const aplcnYms = useAplcnYms().length > 0 ? useAplcnYms() : dummyAplcnYms;
//const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]);
const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기
// const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기
const openPopup = () => {
if (buttonRef.current) {
const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
@@ -47,7 +106,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe
setPopupOpen(true); // 팝업 열기
};
//console.log("btnTxt", btnTxt);
const chartForm = CHART_FORM.LINE;
// const chartData = {
// chartData1: [
@@ -70,35 +129,38 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe
}, {} as Record<string, { label: string; color: string }>) satisfies ChartConfig;
const closePopup = () => { // 팝업 닫기
selectInftwtAnlsRslt(inftwtAnlsSn,"L13101003").then((data) => {// 침입수분석 결과 조회
selectInftwtAnlsRslt(inftwtAnlsSn, "L13101003").then((data) => {// 침입수분석 결과 조회
const rsltData = getChartDataInftwtAnlsRslt(data ?? []);
setChartData({
chartData1: rsltData,
chartData2: rsltData, // 예시로 같은 데이터를 사용
});
});
setPopupOpen(false);
setPopupOpen(false);
};
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} >
// 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);
// }
// };
const renderBody = () => (
<>
{/* <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">
@@ -130,72 +192,142 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe
}}
>
<div className="font-bold mb-6 text-3xl">침입수분석 입력현황</div>
<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={onChangeAplcnYm} value={aplcnYm}>
{aplcnYms.map(opt => (
<option key={opt.val} value={opt.val}>{opt.text}</option>
))}
</select>
<div className='flex flex-col'>
<div className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">상수사용월:</Label>
<SelectBox
className="w-[200px] mr-8 z-[51]"
selectClass="rounded-lg bg-white"
label=''
selectArray={dummyAplcnYms}
value={selectedAplcnYms}
onSelectValue={(val) => {
setSelectedAplcnYms(String(val));
}}
/>
</div>
<div><label>분석정보:</label></div>
<div>
<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 className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">분석정보:</Label>
<SelectBox
className="w-[200px] mr-8 z-[51]"
selectClass="rounded-lg bg-white"
label=''
selectArray={dummyInftwtAnlsInfos}
value={selectedInftwtAnlsInfos}
onSelectValue={(val) => {
setSelectedInftwtAnlsInfos(Number(val));
}}
/>
</div>
<div>오수 전환율:</div>
<div>
<input type="text" value={inftwtAnls?.drtwSwtcRt ?? ""}
className="border border-gray-300 rounded px-2 py-1 w-full" />
<div className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">오수전환율:</Label>
<Input
className="mr-8 w-[200px] !text-xl placeholder:text-center"
placeholder="입력"
value={drtwSwtcRt}
onChange={(e) => {
setDrtwSwtcRt(Number(e.target.value));
}}
/>
</div>
<div>시간패턴 파일명:</div>
<div>
<input type="text" value={inftwtAnls?.atflHrPttnNm ?? ""}
className="border border-gray-300 rounded px-2 py-1 w-full" />
<div className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">시간패턴 파일명:</Label>
<Input
className="mr-8 w-[200px] !text-xl placeholder:text-center"
placeholder="입력"
value={atflHrPttnNm}
onChange={(e) => {
setAtflHrPttnNm(Number(e.target.value));
}}
/>
</div>
<div>수용가-맨홀 매칭:</div>
<div>
<input type="text" value={inftwtAnls?.atflMpngNm ?? ""}
className="border border-gray-300 rounded px-2 py-1 w-full" />
<div className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">수용가-맨홀 매칭:</Label>
<Input
className="mr-8 w-[200px] !text-xl placeholder:text-center"
placeholder="입력"
value={atflMpng}
onChange={(e) => {
setAtflMpng(Number(e.target.value));
}}
/>
</div>
<div>관망도 파일명:</div>
<div>
<input type="text" value={inftwtAnls?.atflInpNm ?? ""}
className="border border-gray-300 rounded px-2 py-1 w-full" />
<div className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">관망도 파일명:</Label>
<Input
className="mr-8 w-[200px] !text-xl placeholder:text-center"
placeholder="입력"
value={atflInpNm}
onChange={(e) => {
setAtflInpNm(Number(e.target.value));
}}
/>
</div>
<div>유량 파일명:</div>
<div>
<input type="text" value={inftwtAnls?.atflOilqNm ?? ""}
className="border border-gray-300 rounded px-2 py-1 w-full" />
<div className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">유량 파일명:</Label>
<Input
className="mr-8 w-[200px] !text-xl placeholder:text-center"
placeholder="입력"
value={tbSnOilqData}
onChange={(e) => {
setTbSnOilqData(Number(e.target.value));
}}
/>
</div>
{btnTxt === 'RDII' ? <><div>강우 자료:</div>
<div>
<select className="border border-gray-300 rounded px-2 py-1">
<option>R20240815.xlsx</option>
</select>
</div>
<div>RTX 계수 출처:</div>
<div>
<select className="border border-gray-300 rounded px-2 py-1">
<option>2015년 하수도정비기본계획</option>
</select>
</div>
</> : null}
{btnTxt === 'RDII' ?
<>
<div className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">강우 자료:</Label>
<SelectBox
className="w-[150px] mr-8 z-[51]"
selectClass="rounded-lg bg-white"
label=''
selectArray={rainDataList}
value={selectedRainData}
onSelectValue={(val) => {
setSelectedRainData(String(val));
}}
/>
</div>
<div className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">RTX 계수 출처:</Label>
<SelectBox
className="w-[150px] mr-8 z-[51]"
selectClass="rounded-lg bg-white"
label=''
selectArray={rtxSourceList}
value={selectedRtxSource}
onSelectValue={(val) => {
setSelectedRtxSource(String(val));
}}
/>
</div>
</> : null}
</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>
</div>
</div>
)}
</Modal>
</div>)}
{/* </Modal > */}
</>
)
return (
<UiModal
open={isModalOpen}
onOpenChange={setIsModalOpen}
bodyClass={`
h-[50vh]
w-[40vw]
max-w-none
max-h-none
overflow-visible
z-[50]
`}
body={renderBody()}
/>
)
}