126 lines
3.6 KiB
TypeScript
126 lines
3.6 KiB
TypeScript
// 하수맨홀
|
|
|
|
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
|
|
import { Button, Input, Label } from '@common/components';
|
|
import React from 'react';
|
|
import { MS_SWAGE_MHL_USE_CODES } from '../components/common/table';
|
|
import { SelectBox } from '@common/business_components/ui';
|
|
import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
|
|
|
|
|
|
interface SwageMhlProps {
|
|
var1: string;
|
|
start1: string;
|
|
end1: string;
|
|
city: string;
|
|
sgg: string;
|
|
yearFilter: { start: string; end: string };
|
|
setVar1: (value: string) => void;
|
|
setStart1: (value: string) => void;
|
|
setEnd1: (value: string) => void;
|
|
setCity: (value: string) => void;
|
|
setSgg: (value: string) => void;
|
|
setYearFilter: (filter: { start: string; end: string }) => void;
|
|
handleSearch: () => void;
|
|
}
|
|
|
|
const SwageMhl: React.FC<SwageMhlProps> = ({
|
|
var1,
|
|
start1,
|
|
end1,
|
|
city,
|
|
sgg,
|
|
yearFilter,
|
|
setVar1,
|
|
setStart1,
|
|
setEnd1,
|
|
setCity,
|
|
setSgg,
|
|
setYearFilter,
|
|
handleSearch,
|
|
}) => {
|
|
|
|
return (
|
|
<div className="mb-3">
|
|
<div className="mb-2 flex items-center">
|
|
<CtpvSggPrcsFcltSelectBox
|
|
sido={city}
|
|
sigungu={sgg}
|
|
onSidoChange={(sidoId: string) => {
|
|
setCity(sidoId);
|
|
setSgg("0");
|
|
}}
|
|
onSigunguChange={setSgg}
|
|
/>
|
|
{/* 설치년도 */}
|
|
<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>
|
|
<SelectBox
|
|
className="w-60 mr-8"
|
|
selectClass="rounded-lg bg-white text-xl"
|
|
label=""
|
|
selectArray={MS_SWAGE_MHL_USE_CODES}
|
|
value={var1}
|
|
onSelectValue={(val) => {
|
|
setVar1(String(val));
|
|
}}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
{/* 하수맨홀 구경 */}
|
|
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구경(mm)</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();
|
|
}
|
|
}}
|
|
/>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex-1 flex justify-end">
|
|
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(SwageMhl); |