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

import React from 'react';
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
import { SelectBox } from '@common/business_components/ui';
import { Button, Input, Label } from '@common/components';
import SwagePpl from './swagePpl';
import SwagePrcsFclt from './swagePrcsFclt';
import SwagePrcsZone from './swagePrcsZone';
import SwageMhl from './swageMhl';
import SwagePmstn from './swagePmstn';

// 기본정보 '구분' 선택 목록
export const BASIC_TYPES = [
  { val: "tb_ms_swage_ppl", text: "하수관로" },
  { val: "tb_il_swage_prcs_fclt", text: "하수처리시설" },
  { val: "tb_ms_swage_prcs_zone", text: "하수처리구역" },
  { val: "tb_ms_swage_mhl", text: "하수맨홀" },
  { val: "tb_ms_swage_pmstn", text: "하수펌프장" },
  { val: "tb_ms_stofcbr", text: "우수토실" },
];

interface BasicTabProps {
  basicType: string;
  city: number;
  sgg: number;
  start1: string;
  start2: string;
  end1: string;
  end2: string;
  var1: string;
  var2: string;
  yearFilter: { start: string; end: string; };
  handleSearch: () => void;
  setBasicType: (type: string) => void;
  setCity: (city: number) => void;
  setCtpvName: (name: string) => void;
  setSgg: (sgg: number) => void;
  setSggName: (name: string) => void;
  setYearFilter: (filter: { start: string; end: string }) => void;
  setStart1: (value: string) => void;
  setStart2: (value: string) => void;
  setEnd1: (value: string) => void;
  setEnd2: (value: string) => void;
  setVar1: (value: string) => void;
  setVar2: (value: string) => void;
}

const BasicTab: React.FC<BasicTabProps> = ({
  basicType,
  city,
  sgg,
  start1,
  start2,
  end1,
  end2,
  var1,
  var2,
  yearFilter,
  handleSearch,
  setBasicType,
  setCity,
  setCtpvName,
  setSgg,
  setSggName,
  setYearFilter,
  setStart1,
  setStart2,
  setEnd1,
  setEnd2,
  setVar1,
  setVar2,
}) => {
  return (
    <div className="relative border rounded-lg p-5 w-full h-[10vh]">
      {/* 구분 */}
      <div className="mb-3 flex items-center justify-between gap-4">
        <div className="flex items-center">
          <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구분</Label>
          <SelectBox
            className="w-[150px] mr-3"
            selectClass="rounded-lg bg-white"
            label=""
            selectArray={BASIC_TYPES}
            onSelectValue={(value: string | number) =>
              setBasicType(String(value))
            }
            value={basicType}
            selectContentClass="z-[101]"
          />
        </div>
      </div>
      {/* 분기처리: 하수관로 */}
      {basicType === "tb_ms_swage_ppl" && (
        <SwagePpl
          var1={var1}
          var2={var2}
          start1={start1}
          start2={start2}
          end1={end1}
          end2={end2}
          yearFilter={yearFilter}
          setVar1={setVar1}
          setVar2={setVar2}
          setStart1={setStart1}
          setStart2={setStart2}
          setEnd1={setEnd1}
          setEnd2={setEnd2}
          setYearFilter={setYearFilter}
          handleSearch={handleSearch}
        />
      )}
      {/* 분기처리: 하수처리시설 */}
      {basicType === "tb_il_swage_prcs_fclt" && (
        <SwagePrcsFclt
          var1={var1}
          start1={start1}
          start2={start2}
          end1={end1}
          end2={end2}
          city={city}
          sgg={sgg}
          yearFilter={yearFilter}
          setVar1={setVar1}
          setStart1={setStart1}
          setStart2={setStart2}
          setEnd1={setEnd1}
          setEnd2={setEnd2}
          setCity={setCity}
          setCtpvName={setCtpvName}
          setSgg={setSgg}
          setSggName={setSggName}
          setYearFilter={setYearFilter}
          handleSearch={handleSearch}
        />
      )}
      {/* 분기처리: 하수처리구역 */}
      {basicType === "tb_ms_swage_prcs_zone" && (
        <SwagePrcsZone
          var1={var1}
          var2={var2}
          city={city}
          sgg={sgg}
          setVar1={setVar1}
          setVar2={setVar2}
          setCity={setCity}
          setSgg={setSgg}
          handleSearch={handleSearch}
        />
      )}
      {/* 분기처리: 하수맨홀 */}
      {basicType === "tb_ms_swage_mhl" && (
        <SwageMhl
          var1={var1}
          start1={start1}
          end1={end1}
          yearFilter={yearFilter}
          setVar1={setVar1}
          setStart1={setStart1}
          setEnd1={setEnd1}
          setYearFilter={setYearFilter}
          handleSearch={handleSearch}
        />
      )}
      {/* 분기처리: 하수펌프장 */}
      {basicType === "tb_ms_swage_pmstn" && (
        <SwagePmstn
          start1={start1}
          start2={start2}
          end1={end1}
          end2={end2}
          yearFilter={yearFilter}
          setStart1={setStart1}
          setStart2={setStart2}
          setEnd1={setEnd1}
          setEnd2={setEnd2}
          setYearFilter={setYearFilter}
          handleSearch={handleSearch}
        />
      )}
      {/* 분기처리: 우수토실 */}
      {basicType === "tb_ms_stofcbr" && (
        <div className="mb-3">
          {/* 설치년도 */}
          <div className="flex items-center mb-2">
            <YearRangeSelectBox
              start={yearFilter.start}
              end={yearFilter.end}
              onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
              startLabel="설치년도"
              endLabel=""
            />
            {/* 조회 버튼 */}
            <div className="flex-1 flex justify-end">
              <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default React.memo(BasicTab);