회원가입
비밀번호 찾기(변경)
회원가입 과정에서 이메일 인증을 위한 인증 메일 발송
GET api/auth/cert/signup/:email
비밀번호 찾기 과정에서 이메일 인증을 위한 인증 메일 발송
GET api/auth/cert/password/:email
인증 메일에 포함된 인증 코드를 확인
POST api/auth/cert/authcode/:id
컴포넌트 구조
Page
EmailFormField
AuthCodeFormField
이메일 인증관련 처리는 EmailFormField에서 처리한다.
이메일 전송 성공
EmailFormField: Input의 상태를 disabled로 변경
EmailFormField: button의 상태를 default로 변경
EmailFormField: button의 텍스트를 "재전송"으로 변경
EmailFormField: 부모 컴포넌트에 emit으로 이메일이 성공적으로 전송되었음을 안내 (인증번호 필드 렌더링을 위함)
Page: AuthCodeFormField 렌더링
인증번호 확인 완료
AuthCodeFormField: Page 컴포넌트에 emit으로 인증번호 확인이 완료되었음을 안내 (인증번호 필드 삭제 및 이메일 필드 버튼 변경을 위함)
Page: AuthCodeFormField 삭제
Page: EmailFormField의 button의 상태를 disabled로 변경
Page: EmailFormField의 button의 텍스트를 "인증완료"로 변경
// EmailFormField.vue
<script>
setup(props, { emit }) {
const handleSendEmail = async () => {
try {
// 1. 이메일 전송 요청
// 2. Input 상태 변경
// 3. Button 상태 변경
// 4. Button 텍스트 변경
// 5. emit
} catch (error) {
//...
}
}
}
</script>
// Page.vue
<script>
setup() {
const handleSuccessSendEmail = () => {
// 1. AuthCodeFormField 렌더링
}
const handleSuccessConfirmAuthCode = () => {
// 1. AuthCodeFormField 삭제
// 2. EmailFormField의 Button 상태 변경
// 3. EmailFormField의 Button 텍스트 변경
}
}
</script>
// AuthCodeFormField.vue
<script>
setup(props, { emit }) {
const handleSubmitAuthCode = async () => {
try {
// 1. emit
} catch (error) {
// ...
}
}
}
</script>