//FormInput을 CommonSignUpPage에서 사용한다면 해당 컴포넌트에서 밑에 있는 코드를 작성
const {
handleSubmit,
register,
control, //시간이 필요한 날짜를 입력 받고 싶을 때 필요
formState: { errors, isSubmitting },
} = useForm();
const formInputSchema: FormInputSchema = {
//각 인풋의 이름 설정
name: {
//각 인풋에서 검사하고 싶은 내용을 입력
errorTypes: {
required: { message: '이름을 입력해 주세요.', value: true },
maxLength: { message: '10자리 이하로 입력해 주세요.', value: 10 },
},
label: '이름', //label에 들어갈 내용
placeholder: '본명을 입력해주세요.',
},
nickName: {
label: '닉네임',
placeholder: '닉네임을 입력해주세요',
errorTypes: {
required: { message: '닉네임을 입력해 주세요.', value: true },
maxLength: { message: '10자리 이하로 입력해 주세요.', value: 10 },
minLength: { message: '2자리 이상 입력해 주세요.', value: 2 },
},
},
phoneNumber: {
label: '연락처',
placeholder: '"-"기호 없이 작성해주세요.',
errorTypes: {
required: { message: '연락처를 입력해주세요.', value: true },
maxLength: { message: '9자리 이상 입력해주세요.', value: 11 },
minLength: { message: '11자리 이하로 입력해주세요.', value: 9 },
},
},
};
<FormInput
control={control}
isRequired={'required' in formInputSchema[key].errorTypes}
direction="column"
key={key}
id={key}
placeholder={formInputSchema[key].placeholder}
label={formInputSchema[key].label}
register={{ ...register(key, { ...formInputSchema[key].errorTypes }) }}
errors={errors}
/>
const formInputSchema: FormInputSchema = {
openEventDate: {
type: 'datetime-local',
label: '신청 기간',
placeholder: '',
errorTypes: {
required: true,
},
},
closeEventDate: {
type: 'datetime-local',
label: '',
placeholder: '',
errorTypes: {
required: true,
},
},
};
{Object.keys(formInputSchema).map((key) => (
<FormInput
isRequired={'required' in formInputSchema[key].errorTypes}
direction="row"
key={key}
id={key}
placeholder={formInputSchema[key].placeholder}
label={formInputSchema[key].label}
register={{ ...register(key, { ...formInputSchema[key].errorTypes }) }}
errors={errors}
type={formInputSchema[key].type}
control={control}
/>
))}