개요

회원가입 시 사용자 본인 확인을 위한 핸드폰 번호와 핸드폰 인증 코드 입력 및 검증 절차를 추가했습니다.

이 절차는 이메일 인증과 유사하게 진행됩니다.

회원가입 폼 구성

핸드폰 인증 절차

핸드폰 번호 입력

사용자는 phone 입력란에 본인의 핸드폰 번호를 입력.

핸드폰 인증 요청 버튼 클릭

Verify Phone 버튼 클릭 시 handlePhoneVerification 함수 실행.

랜덤 6자리 숫자로 인증 코드(phoneCode) 생성 후, 서버에 POST 요청 전송.

const code = Math.floor(100000 + Math.random() * 900000).toString();

API 엔드포인트 : POST ${process.env.NEXT_PUBLIC_API_URL}/Phonerequest

요청 파라미터

{
  "phone_number": "사용자 핸드폰 번호",
  "phoneCode": "랜덤 6자리 인증 코드"
}

인증 코드 확인 및 입력

전송된 인증 코드를 phoneCode 입력란에 입력

회원가입 요청 시 인증 코드 검증

handleSubmit 함수에서 입력한 phoneCode 와 secretCodePhone 을 비교.

일치하지 않을 경우: 경고 메세지 출력

일치할 경우 회원가입 완료 처리.

에러 처리 및 유효성 검사

모든 필수 항목 입력 여부 확인

비밀번호와 비밀번호 확인 값 일치 여부 확인

이메일, 핸드폰 인증 완료 여부 확인

각각의 인증 코드 값과 실제 서버로 발송한 값 일치 여부 확인

UI 구성

이메일 찾기 개요

이 페이지는 회원가입 시 등록했던 이름과 핸드폰 번호를 입력하고, 해당 번호로 전송된 인증 코드를 통해 본인 인증을 거친 뒤, 가입된 이메일을 확인할 수 있도록 구현된 기능입니다.

페이지 구성 및 동작

단계별 화면 구성

폼 항목 및 상태값

기능 상세

핸드폰 인증 요청

1. 이름과 핸드폰 번호를 입력하고 Verity Phone 버튼 클릭
2. 6자리 인증 코드를 랜덤으로 생성.

const code = Math.floor(100000 + Math.random() * 900000).toString();

3. API 요청

POST ${process.env.NEXT_PUBLIC_API_URL}/findemail

Request Body(파라미터)

{
  "name": "사용자 이름",
  "phone": "사용자 핸드폰 번호",
  "secretCode": "랜덤 6자리 코드"
}

4. 서버 응답 확인

성공 시 -> phoneVerified 상태 true, currentEmail값 세팅

실패 시 -> 경고창

인증번호 확인 및 다음 단계 이동

사용자가 phoneCode 입력란에 인증번호 입력.

입력값과 secretCode 비교.

일치하면 step을 2로 변경하여 이메일 공개 화면으로 이동.

인증 후 가입된 이메일 표시

currentEmail에 저장된 이메일을 화면에 출력.

하단에

Login 페이지로 이동 링크

비밀번호 찾기 페이지 이동 링크

에러 처리 및 유효성 검사

이름, 핸드폰 번호 미입력 시 알림 처리

인증번호 불일치 시 알림 처리

인증 실패 시 서버에서 받은 메시지 표시

API 명세

URL : POST / fineEmail

Request

{
  "name": "홍길동",
  "phone": "010-1234-5678",
  "secretCode": "123456"
}

Response

{
  "message": "성공",
  "email": "user@example.com"
}

실패시

{
  "message": "가입된 정보가 없습니다."
}

UI 구성