11.17 항해 66일차 TIL

이메일체크

동우님이 회원가입 부분을 맡으셨는데 유효성 검사를 통과하지 못하면 아래와 같이 경고 메시지가 뜨도록 해놓았다.

이메일이 중복 되었을 때도 아래 경고메시지가 떠야 했는데 디자이너분과 얘기할때 서버에서 받는 메시지는 아래 띄우기가 힘들다고 알럿으로 일단 가자는 얘기를 나누셔서 옆에서 듣고 있다가 내 영역이 아니라서 말은 못하고 통일성이 없어보여서 그냥 혼자 간단하게만 해봤다.

• 기존 코드

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

• 동작 확인

내 영역이 아니라서 따로 한번 얘기 해보고 말았지만 이게 알럿으로 바뀐다면.. 가슴이 아플 것 같다..