diff --git a/src/main/resources/templates/views/apps/mypage/verificationEmail.html b/src/main/resources/templates/views/apps/mypage/verificationEmail.html index 0dae9f7..7443ecd 100644 --- a/src/main/resources/templates/views/apps/mypage/verificationEmail.html +++ b/src/main/resources/templates/views/apps/mypage/verificationEmail.html @@ -1,72 +1,69 @@ - - + + -
-
- -
-

이메일 인증

+
+
+ +

이메일 인증

+
+
+
+
+ +
+

이메일 인증

-
+
+
+ + -
- - - - - -
-

- 이메일 주소 -

-
-
- -
+
+ +
+
+ 이메일 주소 +
+
+ +
-

- 위 이메일 주소로 인증코드가 발송됩니다. -

- -
-
- 인증코드 받기 +
+
+   +
+
+

위 이메일 주소로 인증코드가 발송됩니다.

- - + +
+
@@ -87,9 +84,12 @@ // 취소 버튼 클릭 시 메인 페이지로 이동 $('.btn_cancel').on('click', function() { - if (confirm('이메일 인증을 취소하고 메인 페이지로 이동하시겠습니까?')) { - location.href = '/'; - } + customPopups.showConfirm( + '이메일 인증을 취소하고 메인 페이지로 이동하시겠습니까?', + function() { + location.href = '/'; + } + ); }); // 타이머 시작 함수 (인증 코드 유효 시간) @@ -104,12 +104,15 @@ minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; - $('#certify_time').text(minutes + ":" + seconds); + $('#certify_time').text(minutes + ":" + seconds).css('color', '#666'); if (--timer < 0) { clearInterval(timerInterval); - $('#certify_time').text("00:00").css('color', 'red'); + $('#certify_time').text("시간 초과").css('color', '#FF6B6B'); customPopups.showAlert("인증 시간이 만료되었습니다. 인증코드를 다시 받아주세요."); + $('.btn_send_code').prop('disabled', false).text('인증코드 재발송'); + $('.btn_verify_code').prop('disabled', true); + $('#authCode').prop('readonly', true); } }, 1000); } @@ -124,11 +127,11 @@ resendTimerInterval = setInterval(function () { if (resendTimer > 0) { - $button.find('span').text('재발송 가능 (' + resendTimer + '초)'); + $button.text('재발송 가능 (' + resendTimer + '초)'); resendTimer--; } else { clearInterval(resendTimerInterval); - $button.prop('disabled', false).find('span').text('인증코드 재발송'); + $button.prop('disabled', false).text('인증코드 재발송'); } }, 1000); } @@ -140,7 +143,7 @@ const email = $('#email').val(); const $button = $(this); - $button.prop('disabled', true).find('span').text('발송 중...'); + $button.prop('disabled', true).text('발송 중...'); $.ajax({ url: '/mypage/send-verification-code', @@ -152,14 +155,16 @@ }, success: function(response) { customPopups.showAlert('인증코드가 이메일로 발송되었습니다.'); - $('#authCodeContainer').show(); + $('#authCodeContainer').slideDown(300); + $('#authCode').prop('readonly', false); + $('.btn_verify_code').prop('disabled', false); startTimer(300); // 5분 타이머 startResendTimer(); // 재발송 타이머 시작 (1분) }, error: function(xhr) { const errorMsg = xhr.responseJSON?.error || '인증코드 발송에 실패했습니다.'; customPopups.showAlert(errorMsg); - $button.prop('disabled', false).find('span').text('인증코드 받기'); + $button.prop('disabled', false).text('인증코드 받기'); } }); }); @@ -194,14 +199,21 @@ }, success: function(response) { clearInterval(timerInterval); + clearInterval(resendTimerInterval); isVerified = true; + + // 인증 완료 UI 업데이트 + $('#authCode').prop('disabled', true); + $('.btn_verify_code').prop('disabled', true); + $('.btn_send_code').prop('disabled', true); + $('#certify_time').text('인증 완료').css('color', '#6BCF7F'); + customPopups.showAlert('이메일 인증이 완료되었습니다!'); // 알림 확인 후 메인 페이지로 이동 - $('#customAlertOkButton').off('click.emailVerify').on('click.emailVerify', function () { - customPopups.hideAlert('#customAlert'); + setTimeout(function() { location.href = '/'; - }); + }, 2000); }, error: function(xhr) { const errorMsg = xhr.responseJSON?.error || '인증코드가 일치하지 않습니다.'; @@ -210,20 +222,9 @@ }); }); - // 인증 완료 버튼 클릭 - $('.btn_complete').on('click', function(e) { - e.preventDefault(); - - if (!isVerified) { - customPopups.showAlert('이메일 인증을 먼저 완료해주세요.'); - return; - } - - // 메인 페이지로 이동 - customPopups.showAlert('이메일 인증이 완료되었습니다. 메인 페이지로 이동합니다.'); - setTimeout(function() { - location.href = '/'; - }, 1500); + // 인증코드 입력 필드 숫자만 허용 + $('#authCode').on('input', function() { + $(this).val($(this).val().replace(/[^0-9]/g, '')); }); });