diff --git a/apps/sn/app/components/lib/utils/date.ts b/apps/sn/app/components/lib/utils/date.ts index 4b7aa1e73..75e3cbf32 100644 --- a/apps/sn/app/components/lib/utils/date.ts +++ b/apps/sn/app/components/lib/utils/date.ts @@ -1,5 +1,13 @@ export const formatDate = (date: Date): string => { if (!date) return ''; - const isoString = date.toISOString(); - return isoString ? isoString.split('T')[0] || '' : ''; + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1 + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; }; + + // 현재 년도부터 10년 전까지의 년도 옵션 생성 + export const yearOptions = Array.from({ length: 10 }, (_, i) => { + const year = new Date().getFullYear() - i; + return { text: `${year}년`, val: year.toString() }; + }); diff --git a/apps/sn/app/components/ui/operFileUploadForm.tsx b/apps/sn/app/components/ui/operFileUploadForm.tsx index fc071586f..bd1c67996 100644 --- a/apps/sn/app/components/ui/operFileUploadForm.tsx +++ b/apps/sn/app/components/ui/operFileUploadForm.tsx @@ -2,16 +2,13 @@ import { SelectBox } from '@common/business_components/ui'; import React, { useState } from 'react' import FileUploadForm from './fileUploadForm'; +import { yearOptions } from '../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); - // 현재 년도부터 10년 전까지의 년도 옵션 생성 - const yearOptions = Array.from({ length: 10 }, (_, i) => { - const year = new Date().getFullYear() - i; - return { text: `${year}년`, val: year.toString() }; - }); + 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 || ''); diff --git a/apps/sn/app/map/SearchModal.tsx b/apps/sn/app/map/SearchModal.tsx index 876b4554e..35e645ed9 100644 --- a/apps/sn/app/map/SearchModal.tsx +++ b/apps/sn/app/map/SearchModal.tsx @@ -9,6 +9,7 @@ import { SelectBox2 } from '@common/business_components/ui/select/index-2'; import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox'; import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from './components/common/table'; +import LoadingOverlay from '@/components/ui/LoadingBar'; const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`; @@ -147,11 +148,13 @@ const SearchModal: React.FC = ({ 경과년도: "", }); - const [가동개시_시작_월, set가동개시_시작_월] = useState(""); - const [가동개시_종료_월, set가동개시_종료_월] = useState(""); - const [가동개시_시작_일, set가동개시_시작_일] = useState(""); - const [가동개시_종료_일, set가동개시_종료_일] = useState(""); + const [가동개시_시작_월, set가동개시_시작_월] = useState(''); + const [가동개시_종료_월, set가동개시_종료_월] = useState(''); + const [가동개시_시작_일, set가동개시_시작_일] = useState(''); + const [가동개시_종료_일, set가동개시_종료_일] = useState(''); + // 로딩바 + const [isLoading, setIsLoading] = useState(false); // 상세 정보 조회를 위한 상태 추가 const [popupFeature, setPopupFeature] = useState(null); @@ -434,44 +437,44 @@ const SearchModal: React.FC = ({ }; // 검색 API 호출 함수 - const fetchFilteredData = () => { - const queryParams = new URLSearchParams({ - lyrTypeNm: basicType, - page: `${curPage - 1}`, - size: "10", - sort: "string", - }); - // page와 size 사용해서 api 호출하는 걸로 바꾸기 - - let cqlFilters: string[] = []; - if (activeTab === "basic") { - if (basicType === "tb_ms_swage_prcs_zone") cqlFilters = zoneCqlFilters(); - else if (basicType === "tb_il_swage_prcs_fclt") - cqlFilters = facilityCqlFilters(); - else if (basicType === "tb_ms_swage_ppl") cqlFilters = pplCqlFilters(); - } else if (activeTab === "operation") cqlFilters = zoneCqlFilters(); - else cqlFilters = reportCqlFilters(); - - // 탭 + 구분 별로 cqlFilter 추가 예정 - - if (cqlFilters.length > 0) - queryParams.append("cqlFiter", cqlFilters.join(" and ")); - - console.log("API URL:", `${API_URL}/v1/fclts?${queryParams.toString()}`); - axios - .get(`${API_URL}/v1/fclts?${queryParams.toString()}`) - .then((res) => { - console.log("필터링된 API 결과(개수):", res.data.count); - console.log("필터링된 API 결과(데이터):", res.data.data); - setTableData(res.data.data || []); - setTableCount(res.data.count || []); - console.log('tableCount 상태 업데이트 후:', res.data.count); // tableCount 로그 추가 - setShowTable(true); - }) - .catch((err) => { - console.error("API ERROR:", err); - setTableData([]); - }); + const fetchFilteredData = async () => { + setIsLoading(true); // 로딩 시작 + try { + const queryParams = new URLSearchParams({ + lyrTypeNm: basicType, + page: `${curPage - 1}`, + size: '10', + sort: 'string', + }); + + let cqlFilters: string[] = []; + if (activeTab === 'basic') { + if (basicType === 'tb_ms_swage_prcs_zone') cqlFilters = zoneCqlFilters(); + else if (basicType === 'tb_il_swage_prcs_fclt') cqlFilters = facilityCqlFilters(); + else if (basicType === 'tb_ms_swage_ppl') cqlFilters = pplCqlFilters(); + } else if (activeTab === 'operation') { + cqlFilters = zoneCqlFilters(); + } else { + cqlFilters = reportCqlFilters(); + } + + if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and ')); + + console.log('API URL:', `${API_URL}/v1/fclts?${queryParams.toString()}`); + const res = await axios.get(`${API_URL}/v1/fclts?${queryParams.toString()}`); + console.log('필터링된 API 결과(개수):', res.data.count); + console.log('필터링된 API 결과(데이터):', res.data.data); + + setTableData(res.data.data || []); + setTableCount(res.data.count || []); + console.log('tableCount 상태 업데이트 후:', res.data.count); // tableCount 로그 추가 + setShowTable(true); + } catch (err) { + console.error('API ERROR:', err); + setTableData([]); + } finally { + setIsLoading(false); // 로딩 종료 + } }; const renderBody = () => ( @@ -1070,6 +1073,7 @@ const SearchModal: React.FC = ({
{/* 테이블 영역 (가로/세로 스크롤 가능) */}
+ { @@ -1088,18 +1092,17 @@ const SearchModal: React.FC = ({ ); })() - } // 중복 방지 - tableData={tableData} - headlist={dynamicHeadlist} - pageSize={tableData.length < 10 ? tableData.length : 10} - total={tableCount} - children={undefined} - cellClick={handleCellClick} - onPageChange={setCurPage} - resetPageNo={false} - cur={curPage} - height="51vh" - /> + } + tableData={tableData} + headlist={dynamicHeadlist} + pageSize={tableData.length < 10 ? tableData.length : 10} + total={tableCount} + children={undefined} + cellClick={handleCellClick} + onPageChange={setCurPage} + resetPageNo={false} + cur={curPage} + />
diff --git a/apps/sn/app/oper/floodPre/page.tsx b/apps/sn/app/oper/floodPre/page.tsx index f12a6dcb3..fec355273 100644 --- a/apps/sn/app/oper/floodPre/page.tsx +++ b/apps/sn/app/oper/floodPre/page.tsx @@ -1,5 +1,5 @@ 'use client' -import { SearchDiv, SearchFormLeft, SearchFormRight, UiTable } from '@common/business_components/ui' +import { SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, UiTable } from '@common/business_components/ui' import { Button, DatePicker, Input, Label, LoadingWithAnimation } from '@common/components/ui' import React, { useEffect, useState } from 'react' import OperFileUploadForm from '../../components/ui/operFileUploadForm' @@ -8,7 +8,7 @@ import ContentLayout from '@/components/ui/contentLayout' import { searchData } from '@/components/lib/common/apiHelpers' import { tableHeadlist } from '..' import { handleDownload } from '@/components/lib/utils/fileDownload' -import { formatDate } from '@/components/lib/utils/date' +import { formatDate, yearOptions } from '@/components/lib/utils/date' import { deleteData, postData } from '@/components/lib/api' import LoadingOverlay from '@/components/ui/LoadingBar' @@ -16,8 +16,8 @@ const Page = () => { // 조회조건 const [fromDate, setFromDate] = useState(() => { const date = new Date(); date.setDate(date.getDate() - 7); return date }) const [toDate, setToDate] = useState(new Date()) - const [manageYear, setManageYear] = useState('') - const [mngQu, setMngQu] = useState('') + const [manageYear, setManageYear] = useState(yearOptions[0]?.val || ''); + const [mngQu, setMngQu] = useState(yearOptions[0]?.val || ''); const [usr, setUsr] = useState('') const [pjNm, setpjNm] = useState('') // 파일업로드 관련 상태 @@ -45,7 +45,7 @@ const Page = () => { setTotalData(total) } catch (error) { console.error('Error fetching data:', error) } - finally {setIsLoading(false); } + finally { setIsLoading(false); } } useEffect(() => { setCurPage(1) @@ -90,7 +90,7 @@ const Page = () => { -
+
{ selected={toDate} onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} />
-
+
- {setManageYear(e.target.value); console.log(e.target.value)}} + setManageYear(String(value))} /> ~ - setMngQu(e.target.value)} + setMngQu(String(value))} />
diff --git a/apps/sn/app/oper/oldPp/page.tsx b/apps/sn/app/oper/oldPp/page.tsx index 5708e67c3..92d7fe6aa 100644 --- a/apps/sn/app/oper/oldPp/page.tsx +++ b/apps/sn/app/oper/oldPp/page.tsx @@ -1,5 +1,5 @@ 'use client' -import { SearchDiv, SearchFormLeft, SearchFormRight, UiTable } from '@common/business_components/ui' +import { SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, UiTable } from '@common/business_components/ui' import { Button, DatePicker, Input, Label } from '@common/components/ui' import React, { useEffect, useState } from 'react' import OperFileUploadForm from '../../components/ui/operFileUploadForm' @@ -8,13 +8,13 @@ import ContentLayout from '@/components/ui/contentLayout' import { tableHeadlistOldPp } from '..' import { handleDownload } from '@/components/lib/utils/fileDownload' import { searchData } from '@/components/lib/common/apiHelpers' -import { formatDate } from '@/components/lib/utils/date' +import { formatDate, yearOptions } from '@/components/lib/utils/date' import { deleteData, postData } from '@/components/lib/api' const Page = () => { const [fromDate, setFromDate] = useState(()=>{const date = new Date(); date.setDate(date.getDate()-7); return date}); const [toDate, setToDate] = useState(new Date()); - const [manageYear, setManageYear] = useState('') - const [mngQu, setMngQu] = useState('') + const [manageYear, setManageYear] = useState(yearOptions[0]?.val || ''); + const [mngQu, setMngQu] = useState(yearOptions[0]?.val || ''); const [usr, setUsr] = useState('') const [pjNm, setpjNm] = useState('') const [fileNm, setFileNm] = useState('') @@ -100,24 +100,28 @@ const Page = () => { { if (date) setToDate(date) }} /> -
- - setManageYear(e.target.value)} - /> - ~ - setMngQu(e.target.value)} - /> -
+
+ + setManageYear(String(value))} + /> + ~ + setMngQu(String(value))} + /> +
setUsr(e.target.value)} /> @@ -125,7 +129,7 @@ const Page = () => {
{setpjNm(e.target.value)}} />