frontend/apps/sn/app/(map-layout)/map/search-modal/swage-mhl.tsx

/**
 * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수맨홀)
 *
 * 📄 SwageMhl Tab
 * Next.js App Router (app/) 기반 검색 모달 하수맨홀 탭 컴포넌트
 *
 * - 시도/시군구 선택 및 설치년도 범위 필터링
 * - 용도 및 구경 범위 기반 검색 기능
 * - CQL 필터 생성을 통한 쿼리 조건 설정
 * - 조회 버튼을 통한 데이터 검색 트리거
 * - Zustand를 통한 상태 관리 및 필터 값 저장
 * - Enter 키 입력 시 자동 조회 지원
 */
import React from "react";
import { YearRangeSelectBox } from "@/components/ui/year-range-select-box";
import { Button, Input, Label } from "@common/components";
import { useFacilityCodeCatalog } from "@/entities/facility/lib/use-facility-code-catalog";
import { SelectBox } from "@common/business_components/ui/select";
import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpv-sgg-prcs-fclt-select-box";
import useSearchModalStore from "@/features/map-search/model/search-store";
import useSearchModal from "./use-search-modal";

export const swageMhlCqlFilters = () => {
  const {
    ctpvCd,
    sggCd,
    yearFilter,
    start1,
    end1,
    var1,
    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}'`);
  if (var1) cqlFilters.push(`usg_cd='${var1}'`);
  // 구경(mm) 범위
  if (start1 && end1)
    cqlFilters.push(`swage_mhL_diam_vl BETWEEN ${start1} AND ${end1}`);
  else if (start1) cqlFilters.push(`swage_mhL_diam_vl >= ${start1}`);
  else if (end1) cqlFilters.push(`swage_mhL_diam_vl <= ${end1}`);

  return cqlFilters;
};

const SwageMhl: React.FC = () => {
  const { MS_SWAGE_MHL_USE_CODES } = useFacilityCodeCatalog();
  const {
    var1,
    setVar1,
    start1,
    setStart1,
    end1,
    setEnd1,
    ctpvCd,
    setCtpvCd,
    sggCd,
    setSggCd,
    yearFilter,
    setYearFilter,
  } = 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}
        />
        {/* 설치년도 */}
        <YearRangeSelectBox
          start={yearFilter.start}
          end={yearFilter.end}
          onChange={(range) =>
            setYearFilter({
              ...yearFilter,
              start: range.start,
              end: range.end,
            })
          }
          startLabel="설치년도"
          endLabel=""
        />
        {/* 용도 */}
        <div className="flex shrink-0 items-center gap-2">
          <Label className="whitespace-nowrap text-xl font-medium text-label">
            용도
          </Label>
          <SelectBox
            className="w-48"
            selectClass="rounded-lg bg-field text-xl text-foreground"
            label=""
            selectArray={[
              { val: "0", text: "전체" },
              ...MS_SWAGE_MHL_USE_CODES,
            ]}
            value={var1}
            onSelectValue={(val) => {
              setVar1(String(val));
            }}
            selectContentClass="z-[101]"
          />
        </div>
        {/* 하수맨홀 구경 */}
        <div className="flex shrink-0 items-center gap-2">
          <Label className="whitespace-nowrap text-xl font-medium text-label">
            구경(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="text-xl font-semibold">~</span>
          <Input
            className="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>
        {/* 조회 버튼 */}
        <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(SwageMhl);