패스트캠퍼스 데브캠프

파이널 프로젝트 - 회원가입 (5) - 이메일 인증

vitamin3000 2025. 4. 3. 22:49

이번 포스트 에서는 지난 포스트에 이어 회원정보 입력 컴포넌트에서 이메일 인증에 관련된 부분이다.

 

 

이메일 인증은 다음의 절차로 진행된다

1. 사용자로부터 이메일을 입력받는다

2. 입력한 이메일로 인증 코드를 전송한다

3. 전송받은 인증 코드를 입력받는다

4. 입력받은 코드값과 서버 코드 값을 비교하여 검증한다

 

이전에 구현했던 zod 이메일 형식에 맞게 값을 입력하여 유효성 검사가 통과되고, 이메일 인증을 누르면 

아래의 이메일 확인 번호 input 및 button 컴포넌트가 출력된다.

우선 api 관련 url 설정 및 쿠키 설정에 관련된 Axios 코드를 정의한다.

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  withCredentials: true, // 쿠키 처리를 위해
});

이때 CORS 요청에 쿠키를 포함하기위해 true 옵션을 설정하였다.

 

 

이메일 인증 버튼을 누르면 입력한 이메일로 인증코드가 담긴 메일이 전송된다.

 

이때의 이메일 인증 요청 api 코드는 다음과 같다.

type ApiResponse = {
  code: string;
  message: string;
};


export const checkEmailEffect = async (
  email: string
): Promise<CheckEmailResult> => {
  const response = await api.post<ApiResponse>(
    '/api/v1/account/register/check-email',
    { email }
  );
  return response.data.code ? { code: response.data.code } : {};
};

 

사용자는 전송받은 인증 코드를 입력하고 확인 절차를 거친다

email과 code를 담아 post요청을 보내 서버가 email에 전달했던 code값과 일치하는지 확인한다

export const VerifyEmailEffect = async (
  email: string,
  code: string
): Promise<VerifyEmailResult> => {
  try {
    const requestData = { email, code };
    const response = await api.post<ApiResponse>(
      '/api/v1/account/register/verify-email',
      requestData
    );

    return {
      success: true,
      message: response.data.message || '이메일 인증이 완료되었습니다.',
    };
  } catch {
    return {
      success: false,
      message: '인증 코드가 일치하지 않습니다.',
    };
  }
};

 

인증 절차가 완료되면 출력되었었던 이메일 확인 컴포넌트는 사라지고, 이메일 인증 버튼이 확인 완료로 출력 내용이 변경된다.

 

 

부모 컴포넌트에서 사용자 정보 값을 저장한 값을 post요청을 보내 사용자 정보를 저장한다.

  const [formData, setFormData] = useState<SignUpSchemaType>({
    email: '',
    password: '',
    code: '',
    name: '',
    phone: '',
});

 

API 요청은 다음과 같다.

export const registerUser = async (
  userData: SignUpSchemaType
): Promise<RegistrationResult> => {
  try {
    const response = await api.post('/api/v1/account/register', userData);
    return {
      success: true,
      data: response.data,
    };
  } catch (error) {
    return {
      success: false,
      error:
        error instanceof Error
          ? error.message
          : '알 수 없는 오류가 발생했습니다',
    };
  }
};