Portfolio

register, error 설정

FormInput을 사용하는 컴포넌트에서 사용해야 합니다.


//FormInput을 CommonSignUpPage에서 사용한다면 해당 컴포넌트에서 밑에 있는 코드를 작성
 const {
    handleSubmit,
    register,
		control, //시간이 필요한 날짜를 입력 받고 싶을 때 필요
    formState: { errors, isSubmitting },
  } = useForm();

FormInputSchema


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 },
    },
  },
};

FormInputPorps

isRequired formInputSchema에서 정의한 검사 목록 중에 required가 있으면 true

direction="column" - 정렬

id={key} - label을 클릭해도 input으로 focus 이동을 위한 id

register={{ ...register(key, { ...formInputSchema[key].errorTypes }) }}

{ ...formInputSchema[key].errorTypes }검사 목록Options 확인


<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}
/>

Input

날짜에 대한 DateInput을 따로 컴포넌트로 구분하려 했으나 FormInput에서 해결 가능하다고 판단되어 type을 추가했습니다.

type: 'datetime-local',formInputSchema에서 type을 추가로 작성해주고


  const formInputSchema: FormInputSchema = {
    openEventDate: {
      type: 'datetime-local',
      label: '신청 기간',
      placeholder: '',
      errorTypes: {
        required: true,
      },
    },
    closeEventDate: {
      type: 'datetime-local',
      label: '',
      placeholder: '',
      errorTypes: {
        required: true,
      },
    },
  };

type={formInputSchema[key].type}해당 부분을 FormInput의 Props에 추가해주면 됩니다.


{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}
  />
))}

React Hook Form + 차크라 (Input) 사용법

register, error 설정

FormInputSchema

FormInputPorps

Input