91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
/**
|
|
* ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 우수토실)
|
|
*
|
|
* 📄 Stofcbr Tab
|
|
* Next.js App Router (app/) 기반 검색 모달 우수토실 탭 컴포넌트
|
|
*
|
|
* - 시도/시군구 선택 및 설치년도 범위 필터링
|
|
* - CQL 필터 생성을 통한 쿼리 조건 설정
|
|
* - 조회 버튼을 통한 데이터 검색 트리거
|
|
* - Zustand를 통한 상태 관리 및 필터 값 저장
|
|
* - Enter 키 입력 시 자동 조회 지원
|
|
*/
|
|
import { YearRangeSelectBox } from "@/components/ui/YearRangeSelectBox";
|
|
import { Button } from "@common/components";
|
|
import React from "react";
|
|
import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpvSggPrcsFcltSelectBox";
|
|
import useSearchModalStore from "../../../store/useSearchModalStore";
|
|
import useSearchModal from "./useSearchModal";
|
|
|
|
export const stofcbrCqlFilters = () => {
|
|
const {
|
|
ctpvCd,
|
|
sggCd,
|
|
yearFilter,
|
|
todayYear,
|
|
todayMonth,
|
|
todayDate,
|
|
getDateString,
|
|
} = useSearchModalStore.getState();
|
|
|
|
const cqlFilters: string[] = [];
|
|
// 시도, 시군구
|
|
if (ctpvCd !== "0" && sggCd !== "0")
|
|
cqlFilters.push(`pbadms_emd_cd LIKE '${sggCd}%'`);
|
|
else if (ctpvCd !== "0")
|
|
cqlFilters.push(`pbadms_emd_cd LIKE '${ctpvCd?.trim()}%'`);
|
|
// 설치년도 범위
|
|
const startDate = getDateString(yearFilter.start, "", "", "19000101");
|
|
const endDate = getDateString(
|
|
yearFilter.end,
|
|
"",
|
|
"",
|
|
`${todayYear}${todayMonth}${todayDate}`,
|
|
);
|
|
cqlFilters.push(`instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`);
|
|
|
|
return cqlFilters;
|
|
};
|
|
|
|
const Stofcbr: React.FC = () => {
|
|
const { ctpvCd, setCtpvCd, sggCd, setSggCd, yearFilter, setYearFilter } =
|
|
useSearchModalStore();
|
|
const { handleSearch, handleResetSearch } = useSearchModal();
|
|
|
|
return (
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-3">
|
|
{/* 시도, 시군구 */}
|
|
<CtpvSggPrcsFcltSelectBox
|
|
sido={ctpvCd}
|
|
sigungu={sggCd}
|
|
onSidoChange={(sidoId: string) => {
|
|
setCtpvCd(sidoId);
|
|
setSggCd("0");
|
|
}}
|
|
onSigunguChange={setSggCd}
|
|
/>
|
|
{/* 설치년도 */}
|
|
<YearRangeSelectBox
|
|
start={yearFilter.start}
|
|
end={yearFilter.end}
|
|
onChange={(range) =>
|
|
setYearFilter({ ...yearFilter, start: range.start, end: range.end })
|
|
}
|
|
startLabel="설치년도"
|
|
endLabel=""
|
|
/>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex min-w-fit flex-1 justify-end gap-2">
|
|
<Button onClick={handleSearch}>조회</Button>
|
|
<Button color="white" onClick={handleResetSearch}>
|
|
초기화
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(Stofcbr);
|