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

// 하수처리구역

import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
import { Button, Input, Label } from '@common/components';
import React from 'react';

interface swagePrcsZoneProps {
  var1: string;
  var2: string;
  city: number;
  sgg: number;
  setVar1: (value: string) => void;
  setVar2: (value: string) => void;
  setCity: (value: number) => void;
  setSgg: (value: number) => void;
  handleSearch: () => void;
}

const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
  var1,
  var2,
  city,
  sgg,
  setVar1,
  setVar2,
  setCity,
  setSgg,
  handleSearch,
}) => {

  return (
    <div className="mb-3">
      <div className="mb-2 flex items-center">
        <CtpvSggPrcsFcltSelectBox
          sido={city}
          sigungu={sgg}
          onSidoChange={(sidoId: number) => {
            setCity(sidoId);
            setSgg(0);
          }}
          onSigunguChange={setSgg}
        />
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리시설명</Label>
        <Input
          className='!text-xl w-[120px] placeholder:text-center mr-8'
          placeholder="입력"
          value={var2}
          onChange={(e) => {
            setVar2(e.target.value);
          }}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              e.preventDefault(); // Enter 키 기본 동작 방지
              handleSearch();
            }
          }}
        />
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리구역명</Label>
        <Input
          className="mr-8 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 className="flex-1 flex justify-end">
          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
        </div>
      </div>
    </div>
  );
};

export default React.memo(swagePrcsZone);