125 lines
3.8 KiB
TypeScript
125 lines
3.8 KiB
TypeScript
// 하수펌프장
|
|
|
|
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
|
|
import { Button, Input, Label } from '@common/components';
|
|
import React from 'react';
|
|
|
|
interface SwagePmstnProps {
|
|
start1: string;
|
|
start2: string;
|
|
end1: string;
|
|
end2: string;
|
|
yearFilter: { start: string; end: string };
|
|
setStart1: (value: string) => void;
|
|
setStart2: (value: string) => void;
|
|
setEnd1: (value: string) => void;
|
|
setEnd2: (value: string) => void;
|
|
setYearFilter: (filter: { start: string; end: string }) => void;
|
|
handleSearch: () => void;
|
|
}
|
|
|
|
const SwagePmstn: React.FC<SwagePmstnProps> = ({
|
|
start1,
|
|
start2,
|
|
end1,
|
|
end2,
|
|
yearFilter,
|
|
setStart1,
|
|
setStart2,
|
|
setEnd1,
|
|
setEnd2,
|
|
setYearFilter,
|
|
handleSearch,
|
|
}) => {
|
|
|
|
return (
|
|
<div className="mb-3">
|
|
<div className="flex items-center mb-2">
|
|
{/* 설치년도 */}
|
|
<YearRangeSelectBox
|
|
start={yearFilter.start}
|
|
end={yearFilter.end}
|
|
onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
|
|
startLabel="설치년도"
|
|
endLabel=""
|
|
/>
|
|
{/* 일일처리용량 - 오수맨홀 */}
|
|
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">일일처리용량(㎥)</Label>
|
|
<Input
|
|
className="w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={start1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setStart1(val);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault(); // Enter 키 기본 동작 방지
|
|
handleSearch();
|
|
}
|
|
}}
|
|
/>
|
|
<span className="mx-2 text-xl font-semibold">~</span>
|
|
<Input
|
|
className="mr-8 w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={end1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setEnd1(val);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault(); // Enter 키 기본 동작 방지
|
|
handleSearch();
|
|
}
|
|
}}
|
|
/>
|
|
{/* 양수능력 - 우수맨홀 */}
|
|
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">양수능력(m²/d)</Label>
|
|
<Input
|
|
className="w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={start2}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setStart2(val);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault(); // Enter 키 기본 동작 방지
|
|
handleSearch();
|
|
}
|
|
}}
|
|
/>
|
|
<span className="mx-2 text-xl font-semibold">~</span>
|
|
<Input
|
|
className="mr-8 w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={end2}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setEnd2(val);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault(); // Enter 키 기본 동작 방지
|
|
handleSearch();
|
|
}
|
|
}}
|
|
/>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex-1 flex justify-end">
|
|
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(SwagePmstn); |