파이널 프로젝트 - 회원가입 (4) - 회원정보 입력

 

이번 포스트에서는 회원가입 마지막 단계인 회원정보 입력 컴포넌트에 대해 기술하고자 한다

 

구현된 UI는 다음과 같다.

 

이메일, 비밀번호, 비밀번호 확인 input이 존재하고, 이메일 인증이 존재한다

 

이메일, 비밀번호, 비밀번호 확인 유효성 검사

 

저번 토이3에서 사용했었던 zod 라이브러리를 사용하여 유효성검사를 구현하였다.

 

이전에 입력받았었던 이름, 전화번호를 포함하여, 이메일,.비밀번호, 그리고 이메일 인증에 따른 code 일치를 확인하기 위한 type을 선언한다

export type SignUpSchemaType = {
  code: string;
  email: string;
  password: string;
  name: string
  phone?: string
};

 

그리고 zod 라이브러리의 email, regex를 사용한 정규표현식으로 유효성 검사를 수행하고 오류 메시지를 출력한다.

export const BaseSchema = z.object({
  email: z.string().email('올바른 이메일 형식이 아닙니다'),
  password: z
    .string()
    .regex(
      /^(?=.*[A-Za-z])(?=.*\d).{8,}$/,
      '비밀번호를 숫자, 영문 포함 8자리 이상으로 입력해주세요'
    ),
  checkPassword: z.string(),
});

export const validateEmail = async (email: string) => {
  try {
    const result = BaseSchema.pick({ email: true }).safeParse({ email });
    if (!result.success) {
      const formattedError = result.error.format();
      return {
        success: false,
        error:
          formattedError.email?._errors[0] || '이메일 형식이 올바르지 않습니다',
      };
    }

    const code = await checkEmailEffect(email);
    return { success: true, error: null, code: code };
  } catch (error) {
    return { success: false, error: '알 수 없는 오류가 발생했습니다' };
  }
};

 

비밀번호 확인과 관련된 Schema 및 유효성 검사 오류 출력 함수는 다음과 같다.

export const checkPasswordSchema = z.object({
  (data) => data.password === data.checkPassword,
  {
    message: '비밀번호가 일치하지 않습니다',
    path: ['checkPassword'],
  }
);

export const validatePassword = (password: string) => {
  return BaseSchema.pick({ password: true }).safeParse({ password });
};

export const validatePasswordMatch = (
  password: string,
  checkPassword: string
) => {
  const passwordResult = validatePassword(password);
  if (!passwordResult.success) {
    return passwordResult;
  }

  if (password !== checkPassword) {
    return {
      success: false,
      error: '비밀번호가 일치하지 않습니다',
    };
  }

  return { success: true, error: null };
};