diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts index 26d597abf..5ac5ee0a8 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts @@ -71,7 +71,7 @@ export const getDcTree = async () => { return result; }; -const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] => { +const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string, hidden?: boolean }[] => { let yyyymms1 = yyyymms.map(dateStr => { const year = dateStr.slice(0, 4); const month = dateStr.slice(4, 6); @@ -80,7 +80,7 @@ const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] = val: dateStr }; }); - yyyymms1.unshift({ val: '0', text: '선택' }); + yyyymms1.unshift({ val: '0', text: '선택', hidden: true }); return yyyymms1; }; const selectAplcnYms = async(gubun:string) => { // 상수사용월 @@ -109,12 +109,12 @@ export const useAplcnYms = (gubun:string) => { return data; }; -export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number }[] => { +export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number, hidden?: boolean }[] => { const options = anlsArr.map(anls => ({ text: anls.anlsInfo, val: anls.inftwtAnlsSn, })); - options.unshift({ val: 0, text: '선택' }); + options.unshift({ val: 0, text: '선택', hidden: true }); return options; }; diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx index ac89a9403..cbaa5dafb 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx @@ -11,25 +11,25 @@ import { useInfilChartModalStore } from '../chartModalStore'; // 모달 상태 type ModalOpenProp = { pplMngNo?: string, // 관로관리번호 } -type DataType = {label: string; val: number}; +type DataType = { label: string; val: number }; const InfilChart = ({ pplMngNo }: ModalOpenProp) => { const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore(); // 모달 상태 관리 스토어 const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업 const buttonRef = React.useRef(null); // 버튼 참조 const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치 - const [aplcnYm, setAplcnYm] = useState(""); + const [selectedAplcnYm, setSelectedAplcnYm] = useState(""); const [inftwtAnlss, setInftwtAnlss] = useState([]); - const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState([{ val: 0, text: '선택' }]); // 침입수분석정보 options + const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState([{ val: 0, text: '선택', hidden: true }]); // 침입수분석정보 options const [inftwtAnls, setInftwtAnls] = useState(null); // 침입수분석정보 - const [inftwtAnlsSn, setInftwtAnlsSn] = useState(0); // 침입수분석 정보 선택시 사용 + const [selectedInftwtAnls, setSelectedInftwtAnls] = useState(0); // 침입수분석 정보 선택시 사용 const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({ chartData1: [], chartData2: [], }); const [inftwtQty, setInftwtQty] = useState(0); // 침입수량 const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기 - - pplMngNo = "L"+pplMngNo; // inp파일에 하수관로와 맨홀의 번호가 같으면 분석 오류가 발행하여 + + pplMngNo = "L" + pplMngNo; // inp파일에 하수관로와 맨홀의 번호가 같으면 분석 오류가 발행하여 const openPopup = () => { if (buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산 @@ -50,60 +50,73 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { useEffect(() => { if (isModalOpen === false) { setPopupOpen(true); // 모달이 닫힐 때 조회조건팝업은 열어두기 - setAplcnYm(""); // 상수사용월 초기화 + setSelectedAplcnYm(""); // 상수사용월 초기화 setInftwtAnlss([]); // 침입수분석 초기화 - setInftwtAnlsInfos([{ val: 0, text: '선택' }]); // 침입수분석정보 초기화 + setInftwtAnlsInfos([{ val: 0, text: '선택', hidden: true }]); // 침입수분석정보 초기화 setInftwtAnls(null); // 침입수분석정보 초기화 - setInftwtAnlsSn(0); // 침입수분석 일련번호 초기화 - setChartData({chartData1: [], chartData2: [],}); // 차트 데이터 초기화 + setSelectedInftwtAnls(0); // 침입수분석 일련번호 초기화 + setChartData({ chartData1: [], chartData2: [], }); // 차트 데이터 초기화 setInftwtQty(0); // 침입수량 초기화 } }, [isModalOpen]); - // 상수사용월 변경시 분석 정보 리스트 가져오기 - useEffect(() => { - // aplcnYm이 비어있거나 "0"이면 API 호출하지 않음 - if (!aplcnYm || aplcnYm === "0" || aplcnYm === "") { - setInftwtAnlsSn(0); // 초기화 - setInftwtAnlsInfos([{ val: 0, text: '선택' }]); + // 상수사용월 변경 핸들러 + const handleAplcnYmChange = async (val: string | number) => { + const selectedValue = String(val); + console.log("선택된 상수사용월:", selectedValue); + + setSelectedAplcnYm(selectedValue); + + // 즉시 관련 상태 초기화 + setInftwtAnls(null); + + // 빈 값이면 초기화만 하고 종료 + if (!selectedValue || selectedValue === "0" || selectedValue === "") { + setInftwtAnlsInfos([{ val: 0, text: '선택', hidden: true }]); return; } - const dcData = fn.getDcTree(); // 자료관 데이터 가져오기 - fn.selectInftwtAnls(aplcnYm) - .then((data) => { - setInftwtAnlss(data ?? []); - setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(data)); - setInftwtAnls(null); // 오수전환율 이후 초기화 - setInftwtAnlsSn(0); // 초기화 - }) - .catch((error) => { - console.error("selectInftwtAnls 에러:", error); - setInftwtAnlss([]); - setInftwtAnlsInfos([{ val: 0, text: '선택' }]); - }); - - }, [aplcnYm]); - // 값 표시 - useEffect(() => { + // API 호출 + try { + const dcData = fn.getDcTree(); + const data = await fn.selectInftwtAnls(selectedValue); + setInftwtAnlss(data ?? []); + setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(data)); + } catch (error) { + console.error("selectInftwtAnls 에러:", error); + setInftwtAnlss([]); + setInftwtAnlsInfos([{ val: 0, text: '선택', hidden: true }]); + } + setSelectedInftwtAnls(0); + }; + + // 분석정보 변경 핸들러 + const handleInftwtAnlsSnChange = (val: string | number) => { + const selectedValue = Number(val); + setSelectedInftwtAnls(selectedValue); + // 선택된 침입수분석 정보에 대한 처리 로직 - if (inftwtAnlsSn === 0) return; - const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === inftwtAnlsSn); + if (selectedValue === 0) { + setInftwtAnls(null); + return; + } + + const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === selectedValue); if (selectedAnls) { setInftwtAnls(selectedAnls); } - }, [inftwtAnlsSn]); + }; const closePopup = () => { // 팝업 닫기 - - fn.selectInftwtAnlsRslt(inftwtAnlsSn, pplMngNo).then((data) => {// 침입수분석 결과 조회 + + fn.selectInftwtAnlsRslt(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수분석 결과 조회 const rsltData = fn.getChartDataInftwtAnlsRslt(data ?? []); setChartData(prev => ({ ...prev, chartData1: rsltData // 침입수분석결과 })); }); - fn.selectOilq(inftwtAnlsSn, pplMngNo).then((data) => {// 유량 조회 + fn.selectOilq(selectedInftwtAnls, pplMngNo).then((data) => {// 유량 조회 const rsltData = fn.getChartDataOilq(data ?? []); setChartData(prev => ({ ...prev, @@ -116,7 +129,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { chartData2: [] // 유량 데이터 초기화 })); }); - fn.selectPplInftwtQty(inftwtAnlsSn, pplMngNo).then((data) => {// 침입수량 조회 + fn.selectPplInftwtQty(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수량 조회 if (data > 0) { setInftwtQty(data); } @@ -138,7 +151,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { 상수사용량 적용연월
- {(aplcnYm)? moment(aplcnYm, "YYYYMM").format("YYYY-MM"):""} + {(selectedAplcnYm) ? moment(selectedAplcnYm, "YYYYMM").format("YYYY-MM") : ""}
@@ -153,8 +166,8 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { {/* 차트 */}
- +
{popupOpen && ( @@ -175,10 +188,8 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { selectClass="rounded-lg bg-white" label='' selectArray={aplcnYms} - value={aplcnYm} - onSelectValue={(val) => {console.log("선택된 상수사용월:", val); - setAplcnYm(String(val)); - }} + value={selectedAplcnYm} + onSelectValue={handleAplcnYmChange} />
@@ -188,10 +199,8 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { selectClass="rounded-lg bg-white" label='' selectArray={inftwtAnlsInfos} - value={inftwtAnlsSn} - onSelectValue={(val) => { - setInftwtAnlsSn(Number(val)); - }} + value={selectedInftwtAnls} + onSelectValue={handleInftwtAnlsSnChange} />
@@ -264,7 +273,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { z-[50] `} body={renderBody()} - noFooterYn = 'Y' + noFooterYn='Y' /> ) } diff --git a/apps/sn/app/components/lib/utils/date.ts b/apps/sn/app/components/lib/utils/date.ts index fe717301f..f26944ce7 100644 --- a/apps/sn/app/components/lib/utils/date.ts +++ b/apps/sn/app/components/lib/utils/date.ts @@ -12,6 +12,26 @@ export const yearOptions = Array.from({ length: 10 }, (_, i) => { return { text: `${year}년`, val: year.toString() }; }); +// 현재 날짜를 기준으로 현재 분기까지의 분기 옵션 생성 +export const getQuarterOptions = (): { text: string; val: string }[] => { + const currentDate = new Date(); + const currentMonth = currentDate.getMonth() + 1; // 0부터 시작하므로 +1 + + // 현재 월을 기준으로 현재 분기 계산 + const currentQuarter = Math.ceil(currentMonth / 3); + + // 현재 분기까지의 분기 옵션 생성 + const quarterOptions = []; + for (let i = 1; i <= currentQuarter; i++) { + quarterOptions.push({ + text: `${i}분기`, + val: i.toString() + }); + } + + return quarterOptions; +}; + // ["202506", "202505", "202502", "202405"] 을 SelectBox의 옵션으로 변환 export const convertToTextValArray = (yyyymms: string[]): { text: string; val: string }[] => { return yyyymms.map(dateStr => { diff --git a/apps/sn/app/components/ui/operFileUploadForm.tsx b/apps/sn/app/components/ui/operFileUploadForm.tsx index 42d824e1b..1e7ed727a 100644 --- a/apps/sn/app/components/ui/operFileUploadForm.tsx +++ b/apps/sn/app/components/ui/operFileUploadForm.tsx @@ -2,16 +2,16 @@ import { SelectBox } from '@common/business_components/ui'; import React, { useState } from 'react' import FileUploadForm from './fileUploadForm'; -import { yearOptions } from '@/components/lib/utils'; +import { yearOptions, getQuarterOptions } from '@/components/lib/utils'; const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (files: string, year: string, quarter: string, code: string, id: string) => void }) => { const [atflCd, setAtflCd] = useState(null); const [atflId, setAtflId] = useState(null); + const quaterOptions = getQuarterOptions(); - const quater = [{ text: '1분기', val: '1' }, { text: '2분기', val: '2' }, { text: '3분기', val: '3' }, { text: '4분기', val: '4' }] const [selectedYear, setSelectedYear] = useState(yearOptions[0]?.val || ''); - const [selectedQuarter, setSelectedQuarter] = useState(quater[0]?.val || ''); + const [selectedQuarter, setSelectedQuarter] = useState(quaterOptions[0]?.val || ''); return (
@@ -31,7 +31,7 @@ const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (fil className="w-50" selectClass="rounded-lg bg-white" label="분기" - selectArray={quater} + selectArray={quaterOptions} onSelectValue={(value: string | number) => setSelectedQuarter(String(value))} />