99 lines
3.5 KiB
TypeScript
99 lines
3.5 KiB
TypeScript
/**
|
|
* ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수처리구역)
|
|
*
|
|
* 📄 SwagePrcsZone Tab
|
|
* Next.js App Router (app/) 기반 검색 모달 하수처리구역 탭 컴포넌트
|
|
*
|
|
* - 시도/시군구 선택 및 하수처리시설명/구역명 기반 검색 기능
|
|
* - CQL 필터 생성을 통한 쿼리 조건 설정
|
|
* - 조회 버튼을 통한 데이터 검색 트리거
|
|
* - Zustand를 통한 상태 관리 및 필터 값 저장
|
|
* - Enter 키 입력 시 자동 조회 지원
|
|
*/
|
|
import React from "react";
|
|
import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpv-sgg-prcs-fclt-select-box";
|
|
import { Button, Input, Label } from "@common/components";
|
|
import useSearchModalStore from "@/features/map-search/model/search-store";
|
|
import useSearchModal from "./use-search-modal";
|
|
|
|
// 하수처리구역용 CQL 필터 생성
|
|
export const swagePrcsZoneCqlFilters = () => {
|
|
const { ctpvCd, sggCd, var1, var2 } = useSearchModalStore.getState();
|
|
const cqlFilters: string[] = [];
|
|
if (ctpvCd !== "" && ctpvCd !== "0")
|
|
cqlFilters.push(`ctpv_cd='${ctpvCd?.trim()}'`);
|
|
if (sggCd !== "" && sggCd !== "0") cqlFilters.push(`sgg_cd='${sggCd}'`);
|
|
if (var1) cqlFilters.push(`swtrmt_zone_nm ILIKE '%${var1}%'`);
|
|
if (var2) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${var2}%'`);
|
|
return cqlFilters;
|
|
};
|
|
|
|
const swagePrcsZone: React.FC = () => {
|
|
const { var1, setVar1, var2, setVar2, ctpvCd, setCtpvCd, sggCd, setSggCd } =
|
|
useSearchModalStore();
|
|
const { handleSearch, handleResetSearch } = useSearchModal();
|
|
|
|
return (
|
|
<div className="contents">
|
|
<div className="contents">
|
|
<CtpvSggPrcsFcltSelectBox
|
|
sido={ctpvCd}
|
|
sigungu={sggCd}
|
|
onSidoChange={(sidoId: string) => {
|
|
setCtpvCd(sidoId);
|
|
setSggCd("0");
|
|
}}
|
|
onSigunguChange={setSggCd}
|
|
/>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<Label className="whitespace-nowrap text-xl font-medium text-label">
|
|
하수처리시설명
|
|
</Label>
|
|
<Input
|
|
className="w-[120px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={var2}
|
|
onChange={(e) => {
|
|
setVar2(e.target.value);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault(); // Enter 키 기본 동작 방지
|
|
handleSearch();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<Label className="whitespace-nowrap text-xl font-medium text-label">
|
|
하수처리구역명
|
|
</Label>
|
|
<Input
|
|
className="w-[100px] !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>
|
|
{/* 조회 버튼 */}
|
|
<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(swagePrcsZone);
|