123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
/**
|
|
* ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 유지관리 정보 탭
|
|
*
|
|
* 📄 Operation Tab
|
|
* Next.js App Router (app/) 기반 검색 모달 유지관리 정보 탭 컴포넌트
|
|
*
|
|
* - 업무구분 선택 (보수 및 갱신, 점검 및 진단, 청소 및 준설)
|
|
* - 사업명 입력 및 수행기간 범위 선택
|
|
* - 사업 유형 필터링 기능
|
|
* - 조회 버튼을 통한 데이터 검색 트리거
|
|
* - Zustand를 통한 상태 관리 및 필터 값 저장
|
|
* - Enter 키 입력 시 자동 조회 지원
|
|
*/
|
|
import React from "react";
|
|
import { YearRangeSelectBox } from "@/components/ui/year-range-select-box";
|
|
import { SelectBox } from "@common/business_components/ui/select";
|
|
import { Button, Input, Label } from "@common/components";
|
|
import useStore from "@/entities/reference-data/model/reference-data-store";
|
|
import useSearchModalStore from "@/features/map-search/model/search-store";
|
|
import useSearchModal from "./use-search-modal";
|
|
import useOperationTab from "./use-operation-tab";
|
|
import PopupSearchPanel from "@/features/window-popup/ui/popup-search-panel";
|
|
|
|
const OperationTab: React.FC = () => {
|
|
const { BIZ_TY_CD } = useStore();
|
|
const {
|
|
workType,
|
|
setWorkType,
|
|
var1,
|
|
setVar1,
|
|
var2,
|
|
setVar2,
|
|
yearFilter,
|
|
setYearFilter,
|
|
} = useSearchModalStore();
|
|
const { handleSearch, handleResetSearch } = useSearchModal();
|
|
const { WORK_TYPES } = useOperationTab();
|
|
|
|
const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map((item) => ({
|
|
val: item.lwpoCd,
|
|
text: item.lwpoCdNm,
|
|
}));
|
|
|
|
return (
|
|
<PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Label className="whitespace-nowrap text-xl font-medium text-label">
|
|
업무구분
|
|
</Label>
|
|
<SelectBox
|
|
className="w-40"
|
|
selectClass="rounded-lg bg-field text-xl text-foreground"
|
|
label=""
|
|
selectArray={WORK_TYPES.map((w) => ({
|
|
val: w.val,
|
|
text: w.text,
|
|
}))}
|
|
onSelectValue={(val) => setWorkType(String(val))}
|
|
value={workType}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Label className="whitespace-nowrap text-xl font-medium text-label">
|
|
사업명
|
|
</Label>
|
|
<Input
|
|
className="w-[140px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={var1}
|
|
onChange={(e) => {
|
|
setVar1(e.target.value);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault(); // Enter 키 기본 동작 방지
|
|
handleSearch();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<YearRangeSelectBox
|
|
start={yearFilter.start}
|
|
end={yearFilter.end}
|
|
onChange={(range) =>
|
|
setYearFilter({
|
|
...yearFilter,
|
|
start: range.start,
|
|
end: range.end,
|
|
})
|
|
}
|
|
startLabel="수행기간"
|
|
endLabel=""
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<Label className="whitespace-nowrap text-xl font-medium text-label">
|
|
사업 유형
|
|
</Label>
|
|
<SelectBox
|
|
className="w-60"
|
|
selectClass="rounded-lg bg-field text-xl text-foreground"
|
|
label=""
|
|
selectArray={[{ val: "0", text: "전체" }, ...BIZ_TY_CD_SELECT_ARRAY]}
|
|
value={var2}
|
|
onSelectValue={(val) => {
|
|
setVar2(String(val));
|
|
}}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
</div>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex justify-end gap-2 sm:ml-auto sm:pl-4">
|
|
<Button onClick={handleSearch}>조회</Button>
|
|
<Button color="white" onClick={handleResetSearch}>
|
|
초기화
|
|
</Button>
|
|
</div>
|
|
</PopupSearchPanel>
|
|
);
|
|
};
|
|
|
|
export default React.memo(OperationTab);
|