frontend/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx

import React, { useMemo } from "react";
import { SelectBox } from '@common/business_components/ui'
import { Label } from '@common/components';

interface Option {
  id: number;
  name: string;
}

interface SidoSigunguSelectBoxProps {
  sido: number;
  sigungu: number;
  onSidoChange: (id: number) => void;
  onSigunguChange: (id: number) => void;
  className?: string;
}

const sidoList: { id: number, name: string }[] = [
  { id: 0, name: '전체' },
  { id: 26, name: '부산광역시' },
  { id: 28, name: '인천광역시' },
  { id: 30, name: '대전광역시' },
  { id: 41, name: '경기도' },
  { id: 42, name: '강원도' },
  { id: 44, name: '충청남도' },
  { id: 45, name: '전라북도' },
  { id: 46, name: '전라남도' },
  { id: 47, name: '경상북도' },
  { id: 48, name: '경상남도' },
];
const sigunguMap: Record<number, { id: number; name: string }[]> = {
  26: [
    { id: 0, name: '전체' },
    // ...부산산광역시의 시군구 추가
  ],
  28: [
    { id: 0, name: '전체' },
    // ...인천광역시의 시군구 추가
  ],
  30: [
    { id: 0, name: '전체' },
    // ...대전광역시의 시군구 추가
  ],
  41: [
    { id: 0, name: '전체' },
    { id: 41820, name: '가평군' },
    { id: 41550, name: '안성시' },
    { id: 41830, name: '양평군' },
    { id: 41670, name: '여주시' },
    { id: 41500, name: '이천시' },
    { id: 41430, name: '의왕시' },
    { id: 41150, name: '의정부시' },
    { id: 41480, name: '파주시' },
    { id: 41650, name: '포천시' },
    // ...경기도의 시군구 추가
  ],
  42: [
    { id: 0, name: '전체' },
    { id: 42170, name: '동해시' },
    { id: 42110, name: '춘천시' },
    { id: 42720, name: '홍천군' },
    // ...강원도의 시군구 추가
  ],
  44: [
    { id: 0, name: '전체' },
    { id: 44770, name: '서천군' },
    // ...충청남도의 시군구 추가
  ],
  45: [
    { id: 0, name: '전체' },
    { id: 45130, name: '군산시' },
    { id: 45190, name: '남원시' },
    { id: 45730, name: '무주군' },
    { id: 45800, name: '부안군' },
    { id: 45770, name: '순창군' },
    { id: 45140, name: '익산시' },
    { id: 45750, name: '임실군' },
    { id: 45710, name: '완주군' },
    { id: 45110, name: '전주시' },
    // ...전라북도의 시군구 추가
  ],
  46: [
    { id: 0, name: '전체' },
    { id: 46810, name: "강진군" },
    { id: 46770, name: "고흥군" },
    { id: 46720, name: "곡성군" },
    { id: 46730, name: "구례군" },
    { id: 46230, name: "광양시" },
    { id: 46170, name: "나주시" },
    { id: 46110, name: "목포시" },
    { id: 46840, name: "무안군" },
    { id: 46150, name: "순천시" },
    { id: 46910, name: "신안군" },
    { id: 46130, name: "여수시" },
    { id: 46890, name: "완도군" },
    // ...전라남도의 시군구 추가
  ],
  47: [
    { id: 0, name: '전체' },
    { id: 47130, name: "경주시" },
    { id: 47830, name: "고령군" },
    { id: 47190, name: "구미시" },
    { id: 47720, name: "군위군" },
    { id: 47150, name: "김천시" },
    { id: 47280, name: "문경시" },
    { id: 47920, name: "봉화군" },
    { id: 47250, name: "상주시" },
    { id: 47770, name: "영덕군" },
    { id: 47760, name: "영양군" },
    { id: 47210, name: "영주시" },
    { id: 47900, name: "예천군" },
    { id: 47930, name: "울진군" },
    { id: 47730, name: "의성군" },
    { id: 47750, name: "청송군" },
    { id: 47850, name: "칠곡군" },
    { id: 47110, name: "포항시" },
    // ...경상북도의 시군구 추가
  ],
  48: [
    { id: 0, name: '전체' },
    { id: 48310, name: "거제시" },
    { id: 48250, name: "김해시" },
    { id: 48270, name: "밀양시" },
    { id: 48220, name: "통영시" },
    // ...경상남도의 시군구 추가
  ],
  // ...나머지 시도별 시군구 추가
};

export function SidoSigunguSelectBox({
  sido,
  sigungu,
  onSidoChange,
  onSigunguChange,
  className = "",
}: SidoSigunguSelectBoxProps) {
  // 선택된 시도에 따라 시군구 리스트를 가져옴
  const sigunguList = useMemo(() => sigunguMap[sido] || [{ id: 0, name: '전체' }], [sido]);

  return (
    <div className={`flex items-center justify-center ${className} mr-8`}>
      <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"
        label=""
        selectArray={sidoList.map(opt => ({ val: opt.id, text: opt.name }))}
        value={sido}
        onSelectValue={val => onSidoChange(Number(val))}
        selectContentClass="z-[101]"
      />
      <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시군구</Label>
      <SelectBox
        className="w-48"
        selectClass="w-48 rounded-lg bg-white truncate"
        label=""
        selectArray={sigunguList.map(opt => ({ val: opt.id, text: opt.name }))}
        value={sigungu}
        onSelectValue={val => onSigunguChange(Number(val))}
        selectContentClass="z-[101]"
      />
    </div>
  );
}