11.17航海66日目TIL

Eメールチェック

<form
  onSubmit={handleSubmit(async (emailInfo) => {
    console.log(emailInfo);
    await dispatch(sendEmailAuth(emailInfo));
  })}
>

<StyledInput
  type="text"
  // placeholder="이메일을 입력해주세요"
  {...register('email', {
    required: '이메일을 입력해주세요',
    pattern: {
      value:
        /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
      message: '이메일 양식에 맞지 않습니다',
    },
  })}
/>

{errors.email && (
  <ErrorMessage>{errors.email.message}</ErrorMessage>
)}

// 서버와 통신 시 받는 에러메시지
const [errorMessage, setErrorMessage] = React.useState('') 

// 통신해서 받는 데이터를 바로 state에 넣어주었다.
<form
  onSubmit={handleSubmit(async (emailInfo) => {
    const { data } = await axios.post(`${baseURL}/email/send`, emailInfo);
    if (data.result === 'success') {
      await dispatch(emailAuth(emailInfo))
    }
    setErrorMessage(data.errorMessage)
  })}
>

// 기존에 있던 유효성 검사
<StyledInput
  type="text"
  // placeholder="이메일을 입력해주세요"
  {...register('email', {
    required: '이메일을 입력해주세요',
    pattern: {
      value:
        /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
      message: '이메일 양식에 맞지 않습니다',
    },
  })}
/>

// 상황 별 에러메시지 출력
{errors.email ? <ErrorMessage>{errors.email.message}</ErrorMessage>
	: errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage> }