frontend/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx

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


// 하수관로용 CQL 필터 생성
export const swagePplCqlFilters = () => {
  const {
    var1, var2,
    ctpvCd, sggCd,
    yearFilter,
    start1, start2, end1, end2,
    todayYear, todayMonth, todayDate,
    getDateString
  } = useSearchModalStore.getState();

  const cqlFilters: string[] = [];
  if (var1) cqlFilters.push(`usg_cd='${var1}'`);
  if (var2) cqlFilters.push(`mqlt_cd='${var2}'`);
  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}'`,
  );
  // 관경(mm) 범위
  if (start1 && end1) cqlFilters.push(`pdmt_vl BETWEEN ${start1} AND ${end1}`);
  else if (start1) cqlFilters.push(`pdmt_vl >= ${start1}`);
  else if (end1) cqlFilters.push(`pdmt_vl <= ${end1}`);
  // 연장(m) 범위
  if (start2 && end2) cqlFilters.push(`prlg_vl BETWEEN ${start2} AND ${end2}`);
  else if (start2) cqlFilters.push(`prlg_vl >= ${start2}`);
  else if (end2) cqlFilters.push(`prlg_vl <= ${end2}`);

  return cqlFilters;
};

const SwagePpl: React.FC = () => {
  const {
    var1, setVar1,
    start1, setStart1, end1, setEnd1,
    ctpvCd, setCtpvCd, sggCd, setSggCd,
    yearFilter, setYearFilter,
  } = useSearchModalStore();
  const { handleSearch } = useSearchModal();


  return (
    <div className="mb-6">
      <div className="mb-2 flex items-center">
        <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=""
        />
        {/* 용도 */}
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">용도</Label>
        <SelectBox
          className="w-32 mr-8"
          selectClass="rounded-lg bg-white text-xl"
          label=""
          selectArray={[{ val: "0", text: "전체" }, ...MS_SWAGE_PPL_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">재질</Label>
        <SelectBox
          className="w-60 mr-8"
          selectClass="rounded-lg bg-white text-xl"
          label=""
          selectArray={MS_SWAGE_PPL_CODES}
          value={var2}
          onSelectValue={(val) => {
            setVar2(String(val));
          }}
          selectContentClass="z-[101]"
        /> */}
        {/* 관경 */}
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">관경(mm)</Label>
        <Input
          className="w-[60px] !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-[60px] !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();
            }
          }}
        />
        {/* 연장 */}
        {/* <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">연장(m)</Label>
        <Input
          className="w-[60px] !text-xl placeholder:text-center"
          placeholder="입력"
          value={start2}
          onChange={(e) => {
            // 숫자만 입력 허용
            const val = e.target.value.replace(/[^0-9]/g, "");
            setStart2(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-[60px] !text-xl placeholder:text-center"
          placeholder="입력"
          value={end2}
          onChange={(e) => {
            // 숫자만 입력 허용
            const val = e.target.value.replace(/[^0-9]/g, "");
            setEnd2(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(SwagePpl);