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 ( -
-

+
+

{label}

{ onChange={(e) => { handleChange(e); }} - autocomplete="off" + autoComplete="off" + min={1} />
{ handleChange(e); }} @@ -87,7 +86,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
{ diff --git a/src/pages/register/VRadioGroup.tsx b/src/pages/register/VRadioGroup.tsx index a3102fb8..da83a819 100644 --- a/src/pages/register/VRadioGroup.tsx +++ b/src/pages/register/VRadioGroup.tsx @@ -25,7 +25,7 @@ const VRadioGroup = ({ return (
-

성별

+

성별🔸

- 입양 상태 + 입양 상태🔸

- 중성화 상태 + 중성화 상태🔸

{ +const Input = ({ + id, + name, + type, + placeholder, + onChange, + defaultValue, +}: InputGroupProps) => { return ( { type={type} placeholder={placeholder} onChange={onChange} + defaultValue={defaultValue} /> ); }; diff --git a/src/pages/update/UpdateInputGroup.tsx b/src/pages/update/UpdateInputGroup.tsx index 52d1ef21..78199901 100644 --- a/src/pages/update/UpdateInputGroup.tsx +++ b/src/pages/update/UpdateInputGroup.tsx @@ -9,7 +9,7 @@ export interface InputGroupProps { type: string; placeholder: string; onChange: (e: React.ChangeEvent) => void; - value: any; + defaultValue: any; } const InputGroup = ({ @@ -18,7 +18,7 @@ const InputGroup = ({ type, placeholder, onChange, - value, + defaultValue, }: InputGroupProps) => { return ( @@ -31,7 +31,7 @@ const InputGroup = ({ type={type} placeholder={placeholder} onChange={onChange} - value={value} + defaultValue={defaultValue} /> ); diff --git a/src/pages/update/VUpdateRegisterForm.tsx b/src/pages/update/VUpdateRegisterForm.tsx index ed4e41f6..f22759a1 100644 --- a/src/pages/update/VUpdateRegisterForm.tsx +++ b/src/pages/update/VUpdateRegisterForm.tsx @@ -1,5 +1,5 @@ import RadioGroup from 'pages/register/RadioGroup'; -import SelectBox from 'commons/SelectBox'; +import SelectBox, { IdProps } from 'commons/SelectBox'; import { RegisterType } from 'recoil/registerState'; import InputGroup from './UpdateInputGroup'; @@ -8,7 +8,10 @@ type RegisterProps = { petInfo: RegisterType; }; -const VMRegisterForm = ({ handleChange, petInfo }: RegisterProps) => { +const VMRegisterForm = ( + { handleChange, petInfo }: RegisterProps, + { id }: IdProps, +) => { console.log('dk', petInfo); console.log(petInfo.name); return ( @@ -20,25 +23,19 @@ const VMRegisterForm = ({ handleChange, petInfo }: RegisterProps) => { id="name" name="이름" type="text" - placeholder={petInfo.name} + placeholder="이름을 입력해주세요" onChange={(e) => { handleChange(e); }} - value={petInfo.name} + defaultValue={petInfo.name} />
-
- { - handleChange(e); - }} - value={petInfo.age} - /> - +
+ +
+ +
개월
+
@@ -53,25 +50,31 @@ const VMRegisterForm = ({ handleChange, petInfo }: RegisterProps) => { id="size" name="크기" type="text" - placeholder={petInfo.size} + placeholder="주변 사물과 비교해서 작성해주셔도 좋아요!" onChange={(e) => { handleChange(e); }} - value={petInfo.size} + defaultValue={petInfo.size} />
-
- + + { handleChange(e); }} - value={petInfo.weight} + autoComplete="off" + min={1} + defaultValue={petInfo.weight} />
@@ -79,11 +82,11 @@ const VMRegisterForm = ({ handleChange, petInfo }: RegisterProps) => { id="vaccinationStatus" name="접종여부" type="text" - placeholder={petInfo.vaccinationStatus} + placeholder="접종명과 차수를 입력해주세요" onChange={(e) => { handleChange(e); }} - value={petInfo.vaccinationStatus} + defaultValue={petInfo.vaccinationStatus} />
@@ -93,11 +96,11 @@ const VMRegisterForm = ({ handleChange, petInfo }: RegisterProps) => { id="description" name="상세설명" type="text" - placeholder={petInfo.description} + placeholder="상세 설명을 입력해주세요" onChange={(e) => { handleChange(e); }} - value={petInfo.description} + defaultValue={petInfo.description} />