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

디자인 관련 수정사항 변경 및 시설 검색 로딩바 적용
iipbs_sn / build (push) Waiting to run
Details

Browse Source
This commit is contained in:
JIeunhuh
2025-05-30 14:31:45 +09:00
parent 56383a3179
commit c5fed449a3
5 changed files with 112 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/components/lib/utils/date.ts
+10 -2
View File
@@ -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() };
});
apps/sn/app/components/ui/operFileUploadForm.tsx
+2 -5
View File
@@ -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<string | null>(null);
const [atflId, setAtflId] = useState<string | null>(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<string>(yearOptions[0]?.val || '');
const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');
apps/sn/app/map/SearchModal.tsx
+33 -30
View File
@@ -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<SearchModalProps> = ({
경과년도: "",
});
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<any>(null);
@@ -434,44 +437,44 @@ const SearchModal: React.FC<SearchModalProps> = ({
};
// 검색 API 호출 함수
const fetchFilteredData = () => {
const fetchFilteredData = async () => {
setIsLoading(true); // 로딩 시작
try {
const queryParams = new URLSearchParams({
lyrTypeNm: basicType,
page: `${curPage - 1}`,
size: "10",
sort: "string",
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();
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 '));
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);
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);
} catch (err) {
console.error('API ERROR:', err);
setTableData([]);
});
} finally {
setIsLoading(false); // 로딩 종료
}
};
const renderBody = () => (
@@ -1070,6 +1073,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
<div className="h-[60vh] w-full space-y-2 overflow-hidden rounded-lg border">
{/* 테이블 영역 (가로/세로 스크롤 가능) */}
<div className="flex-1 px-2 pb-2">
<LoadingOverlay isLoading={isLoading}/>
<UiTable2
headName={
(() => {
@@ -1088,7 +1092,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
</>
);
})()
} // 중복 방지
}
tableData={tableData}
headlist={dynamicHeadlist}
pageSize={tableData.length < 10 ? tableData.length : 10}
@@ -1098,7 +1102,6 @@ const SearchModal: React.FC<SearchModalProps> = ({
onPageChange={setCurPage}
resetPageNo={false}
cur={curPage}
height="51vh"
/>
</div>
</div>
apps/sn/app/oper/floodPre/page.tsx
+19 -15
View File
@@ -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 = () => {
<ContentLayout title='도시침수 예방사업' isLoading={isLoading}>
<SearchDiv>
<SearchFormLeft>
<div className='flex items-center gap-4'>
<div className='flex items-center gap-5'>
<div className='flex items-center gap-2'>
<Label className="w-20 text-xl text-gray-600">등록기간</Label>
<DatePicker mode={'single'}
@@ -101,18 +101,22 @@ const Page = () => {
selected={toDate}
onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} />
</div>
<div className='flex items-center'>
<div className='flex items-center gap-2'>
<Label className="w-20 text-xl text-gray-600">관리년도</Label>
<Input
className='w-[100px]'
value={manageYear}
onChange={(e) => {setManageYear(e.target.value); console.log(e.target.value)}}
<SelectBox
className="w-[90px] mr-3 ml-4"
selectClass="rounded-lg bg-white"
label=""
selectArray={yearOptions}
onSelectValue={(value: string | number) => setManageYear(String(value))}
/>
<span>~</span>
<Input
className='w-[100px]'
value={mngQu}
onChange={(e) => setMngQu(e.target.value)}
<SelectBox
className="w-[90px] mr-3 ml-4"
selectClass="rounded-lg bg-white"
label=""
selectArray={yearOptions}
onSelectValue={(value: string | number) => setMngQu(String(value))}
/>
</div>
<div className='flex items-center'>
apps/sn/app/oper/oldPp/page.tsx
+19 -15
View File
@@ -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<Date>(()=>{const date = new Date(); date.setDate(date.getDate()-7); return date});
const [toDate, setToDate] = useState<Date>(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 = () => {
<DatePicker mode={'single'}
selected={toDate}
onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} />
<div className='flex items-center'>
<div className='flex items-center gap-2'>
<Label className="w-20 text-xl text-gray-600">관리년도</Label>
<Input
className='w-[100px]'
value={manageYear}
onChange={(e) => setManageYear(e.target.value)}
<SelectBox
className="w-[90px] mr-3 ml-4"
selectClass="rounded-lg bg-white"
label=""
selectArray={yearOptions}
onSelectValue={(value: string | number) => setManageYear(String(value))}
/>
<span>~</span>
<Input
className='w-[100px]'
value={mngQu}
onChange={(e) => setMngQu(e.target.value)}
<SelectBox
className="w-[90px] mr-3 ml-4"
selectClass="rounded-lg bg-white"
label=""
selectArray={yearOptions}
onSelectValue={(value: string | number) => setMngQu(String(value))}
/>
</div>
<div className='flex items-center'>
<Label className="w-20 text-xl text-gray-600">등록자</Label>
<Input
className='w-[100px]'
className='w-[100px] !text-2xl'
value={usr}
onChange={(e) => setUsr(e.target.value)}
/>
@@ -125,7 +129,7 @@ const Page = () => {
<div className='flex items-center'>
<Label className="w-20 text-xl text-gray-600">파일명</Label>
<Input
className='w-[100px]'
className='w-[100px] !text-2xl'
value={pjNm}
onChange={(e) => {setpjNm(e.target.value)}}
/>