diff --git a/src/commons/SelectBox.tsx b/src/commons/SelectBox.tsx index 6d816511..5253d16a 100644 --- a/src/commons/SelectBox.tsx +++ b/src/commons/SelectBox.tsx @@ -7,27 +7,85 @@ const typeOptions = [ { label: '기타', value: 'ETC' }, // 기타 타입 추가 ]; +interface SelectProps { + label: string; + value: string; +} -const SelectBox = () => { +const yearOptions: SelectProps[] = []; +for (let idx = 0; idx < 32; idx += 1) { + yearOptions.push({ label: `${idx}`, value: `${idx}` }); +} + +const monthOptions: SelectProps[] = []; +for (let idx = 0; idx < 13; idx += 1) { + monthOptions.push({ label: `${idx}`, value: `${idx}` }); +} + +export interface IdProps { + id: number; + label: string; +} +// 기타 타입 추가 +const SelectBox = ({ id, label }: IdProps) => { const [selectedType, setSelectedType] = useRecoilState(registerState); - const handleTypeChange = (value: string) => { - setSelectedType((prevType) => ({ - ...prevType, - type: value, - })); + const year = selectedType.age.substring(0, selectedType.age.indexOf('년')); + console.log('년', year); + const month = selectedType.age.substring( + selectedType.age.indexOf('년') + 1, + selectedType.age.indexOf('개'), + ); + const handleChange = (value: string) => { + console.log(selectedType.age); + console.log(value); + + console.log('달', month); + if (label === '종🔸') { + setSelectedType((prevType) => ({ + ...prevType, + type: value, + })); + } else if (label === 'ㅤ') { + setSelectedType((prevType) => ({ + ...prevType, + age: `${year}년${value}개월`, + })); + console.log(value); + } else { + setSelectedType((prevType) => ({ + ...prevType, + age: `${value}년${month}개월`, + })); + console.log(value); + } }; + let code: SelectProps[]; + let key: string; + switch (id) { + case 1: + key = year; + code = yearOptions; + break; + case 2: + key = month; + code = monthOptions; + break; + default: + key = selectedType.type; + code = typeOptions; + } return ( -