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

// 하수관로

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_CODES, MS_SWAGE_PPL_USE_CODES } from '../components/common/table';

interface SwagePplProps {
  var1: string;
  var2: string;
  start1: string;
  start2: string;
  end1: string;
  end2: string;
  yearFilter: { start: string; end: string };
  setVar1: (value: string) => void;
  setVar2: (value: string) => void;
  setStart1: (value: string) => void;
  setStart2: (value: string) => void;
  setEnd1: (value: string) => void;
  setEnd2: (value: string) => void;
  setYearFilter: (filter: { start: string; end: string }) => void;
  handleSearch: () => void;
}

const SwagePpl: React.FC<SwagePplProps> = ({
  var1,
  var2,
  start1,
  start2,
  end1,
  end2,
  yearFilter,
  setVar1,
  setVar2,
  setStart1,
  setStart2,
  setEnd1,
  setEnd2,
  setYearFilter,
  handleSearch,
}) => {

  return (
    <div className="mb-6">
      <div className="mb-2 flex items-center">
        {/* 설치년도 */}
        <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-40 mr-8"
          selectClass="rounded-lg bg-white text-xl"
          label=""
          selectArray={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);