[TIL 2023.08.08] 심화 프로젝트 둘러보미 / 회원가입 만들기

❓발생한 이슈/고민

Ui Library로 Ant Design을,

회원가입 form 유효성 검사 수단으로 react-hook-form을 사용하려고 했었는데

<Form onFinish={handleSubmit(onSubmit)}>

이 부분에서 자꾸 이해할 수 없는 오류가 생겼다.

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PolymorphicComponentProps<"web", FastOmit<FormProps<unknown> & { children?: ReactNode; } & { ref?: Ref<FormInstance<unknown>> | undefined; }, never>, void, void, {}, {}>): Element', gave the following error.
    Type '(e?: BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>' is not assignable to type '(values: unknown) => void'.
      Types of parameters 'e' and 'values' are incompatible.
        Type 'unknown' is not assignable to type 'BaseSyntheticEvent<object, any, any> | undefined'.
  Overload 2 of 2, '(props: FastOmit<FormProps<unknown> & { children?: ReactNode; } & { ref?: Ref<FormInstance<unknown>> | undefined; }, never>): ReactElement<any, string | JSXElementConstructor<...>> | null', gave the following error.
    Type '(e?: BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>' is not assignable to type '(values: unknown) => void'.
    63 |     <St.SignUpContainer>
    64 |       {error && <p>{error}</p>}
  > 65 |       <St.SignUpForm onFinish={handleSubmit(onSubmit)}>
       |                      ^^^^^^^^
    66 |         <label htmlFor="profileImage">프로필 이미지</label>
    67 |         <Input type="file" id="profileImage" {...register('profileImage')} />

"이 호출과 일치하는 오버로드가 없습니다."

해결을 위해서는 라이브러리 간의 호환성 문제를 해결하기 위해 적은 수정이 필요하다는데

이 부분을 이해하는데에 시간이 빠듯하기도 하고 

특별히 현재 react-hook-form을 꼭 사용해야 하는 이유도 특별히 찾지 못해서 react-hook-form을 사용하지 않기로 했다.

antd만 사용하는걸루~

 

💡해결과정

  return (
    <St.SignUpContainer>
      <Form onFinish={onSubmit}>
        <Form.Item label="프로필 이미지" name="profileImage" rules={[{ required: true, message: '이미지를 업로드해주세요.' }]}>
          <Input type="file" id="profileImage" />
        </Form.Item>

        <Form.Item
          label="이메일"
          name="email"
          rules={[
            { required: true, message: '이메일 주소를 입력해주세요.' },
            { type: 'email', message: '올바른 이메일 형식이 아닙니다.' },
          ]}
          validateStatus={emailError ? 'error' : ''}
          help={emailError}
        >
          <Input type="email" id="email" onChange={() => setEmailError(null)} />
        </Form.Item>

        <Form.Item label="비밀번호" name="password" rules={[{ required: true, message: '비밀번호를 입력해주세요.' }, passwordValidator()]}>
          <Input type="password" id="password" />
        </Form.Item>

        <Form.Item
          label="비밀번호 확인"
          name="confirmPassword"
          rules={[
            { required: true, message: '비밀번호를 한 번 더 입력해주세요.' },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('비밀번호가 일치하지 않습니다.'));
              },
            }),
          ]}
        >
          <Input type="password" id="confirmPassword" />
        </Form.Item>

        <Form.Item label="닉네임" name="nickname" rules={[{ required: true, message: '닉네임을 입력해주세요.' }]}>
          <Input type="text" id="nickname" />
        </Form.Item>
        {error && <p>{error}</p>}
        <Form.Item>
          <Button type="primary" htmlType="submit">
            회원가입
          </Button>
        </Form.Item>
      </Form>
    </St.SignUpContainer>
  );
};

export default SignUp;

수정된 코드

 

회원가입 폼. 생긴게 상당히 마음에 안든다...

 

🧐궁금점과 부족한 내용

아직 회원가입하면서 프로필 이미지도 같이 넣는 부분도 제대로 구현된 것이 아니고 수정할 부분이 많다.

회원가입 만만하게 봤다가...고생 중

유효성 검증도 여러 경우의 수를 고려해야하니 은근 신경쓸게 많구나..