[Next13 + TypeScript] 비밀번호 재설정

📢 해당 포스트는 스타트업 프로젝트를 진행하며, 직접 작성한 코드를 기록용으로 작성함을 명시합니다.

🐝 무엇을 구현한 것인가?

로그인 전, 비밀번호 찾기를 구현하였습니다.

🐝 무엇을 구현하였는가?

1. 이메일 입력 시 emailRegex를 설정하여 이메일 조건에 충족하여 입력되도록

2. 이름과 이메일을 조건에 맞게 입력 시 이메일 인증 버튼 활성화

3. 이메일 인증 버튼을 눌렀을 때,

   [ 이름 - 이메일 ] 데이터를 서버에 보내주고 api 성공 시 , 이메일 전송 완료 모달창 띄우기

   api 실패 시 , 인증 실패 모달창 띄우기

4. 인증번호 입력 시, numericRegex 를 설정하여 숫자만 입력되도록

5. 인증번호를 조건에 맞게 입력 시 확인 버튼 활성화

6. 확인 버튼을 누르면

   [ 이메일 - 인증번호 ] 데이터를 서버에 보내주고 api 성공 시 , 인증 완료 모달창 띄우기

   api 실패 시 , 인증 실패 모달창 띄우기

7. 인증코드 확인 완료되면 완료 버튼 활성화, 클릭하면 비밀번호 재설정 페이지로 이동

   • 비밀번호 재설정 페이지로 이동할 때 [ 이메일, 이름 ] 넘겨주기

8. 새비밀번호 입력 시 passwordRegex 를 설정하여 조건에 충족하여 입력되도록

9. 새 비밀번호 확인 입력 시 새비밀번호와 동일한지 확인

10. 동일하다면 완료 버튼 활성화

    • 완료 버튼 클릭 시 서버에 [ 이름, 이메일, 새비밀번호] 전달

---

---