djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

이메일 인증 - 디자인 반영

Browse Source
This commit is contained in:
현성필
2025-12-05 16:52:39 +09:00
parent cb594bb473
commit ed5da5a94e
1 changed files with 82 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/views/apps/mypage/verificationEmail.html
+82 -81
View File
@@ -1,72 +1,69 @@
<!doctype html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}"> layout:decorate="~{layout/kjbank_title_layout}">
<body> <body>
<section layout:fragment="contentFragment" class="content"> <section layout:fragment="title">
<div class="content_wrap"> <div class="page-title-banner">
<!-- 타이틀 --> <img th:src="@{/img/img_title_bg.png}" class="title-image">
<div class="sub_title2" id="title-verification-email"> <h1>이메일 인증</h1>
<h2 class="title add5">이메일 인증</h2> </div>
</section>
<section layout:fragment="contentFragment">
<div class="org-register-container">
<div class="common-title-bar">
<h2 class="common-title">이메일 인증</h2>
</div> </div>
<div class="inner i_cs10 h_inner2"> <div class="register-form-container">
<form id="verificationEmailForm" role="form" name="verificationEmailForm" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<input type="hidden" id="userId" name="userId" th:value="${userId}">
<div class="form_type"> <div class="register-form">
<form id="verificationEmailForm" role="form" name="verificationEmailForm" method="post"> <!-- 이메일 주소 + 인증코드 받기 버튼 (한 줄) -->
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/> <div class="form-row" style="margin-bottom: 0">
<input type="hidden" id="userId" name="userId" th:value="${userId}"> <div class="form-label-wrapper label-offset">
<span class="form-label-text">이메일 주소</span>
<!-- 이메일 주소 표시 (readonly) --> </div>
<div class="info1 p_top2"> <div class="form-field-wrapper input-with-button">
<p class="title w_tit"> <input type="email" id="email" name="email" class="form-input input-readonly"
<span class="dot">이메일 주소</span> th:value="${email}" readonly disabled="disabled">
</p> <button type="button" class="btn-input-action btn-auth btn_send_code">인증코드 받기</button>
<div class="info_line">
<div class="info_box1 w_inp4">
<input type="email" id="email" name="email" class="common_input_type_1"
th:value="${email}" readonly style="background-color: #f5f5f5;">
</div>
</div> </div>
<p class="info_txt" style="margin-top: 10px; color: #666;">
위 이메일 주소로 인증코드가 발송됩니다.
</p>
</div> </div>
<!-- 인증코드 받기 버튼 --> <div class="form-row" style="margin-bottom: 0">
<div class="info1 pt28"> <div class="form-label-wrapper label-offset">
<div class="btn_check" style="width: 100%;"> <span class="form-label-text">&nbsp;</span>
<a class="common_btn_type_2 cbt btn_send_code" style="width: 100%;"><span>인증코드 받기</span></a> </div>
<div class="form-field-wrapper">
<p class="form-hint" style="margin-top: 0;">위 이메일 주소로 인증코드가 발송됩니다.</p>
</div> </div>
</div> </div>
<!-- 인증번호 입력 --> <!-- 인증번호 입력 -->
<div class="info1 pt28 auth-code-container" id="authCodeContainer" style="display: none;"> <div class="form-row" id="authCodeContainer" style="display: none;">
<p class="title w_tit"> <div class="form-label-wrapper label-offset">
<span class="dot">인증코드 입력</span> <span class="form-label-text">인증코드 입력</span> <span class="required-badge">필수</span>
</p> </div>
<div class="info_line"> <div class="form-field-wrapper input-with-button">
<div class="info_box1 w_inp5"> <div class="auth-input-group">
<div class="certify_box"> <input type="text" id="authCode" name="authCode" maxlength="6" pattern="[0-9]*"
<input type="text" id="authCode" class="common_input_type_1 w_input" inputmode="numeric" class="form-input"
placeholder="이메일로 받은 인증코드를 입력하세요" maxlength="6" required> placeholder="이메일로 받은 인증코드 6자리">
<span class="certify_time" id="certify_time">05:00</span> <span class="auth-timer" id="certify_time">05:00</span>
</div>
</div>
<div class="btn_check">
<a class="common_btn_type_2 cbt btn_verify_code"><span>인증코드 확인</span></a>
</div> </div>
<button type="button" class="btn-input-action btn-auth btn_verify_code">인증코드 확인</button>
</div> </div>
</div> </div>
</div>
</form>
</div>
<!-- 제출 버튼 --> <!-- Action Buttons -->
<div class="btn_application m_top"> <div class="form-actions">
<a type="button" class="common_btn_type_1 gray btn_cancel"><span>취소</span></a> <button type="button" class="btn-submit btn-secondary">취소</button>
<!-- <div class="btn_gap"></div>-->
<!-- <button type="button" class="common_btn_type_1 btn_complete" disabled><span>인증 완료</span></button>-->
</div>
</form>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -87,9 +84,12 @@
// 취소 버튼 클릭 시 메인 페이지로 이동 // 취소 버튼 클릭 시 메인 페이지로 이동
$('.btn_cancel').on('click', function() { $('.btn_cancel').on('click', function() {
if (confirm('이메일 인증을 취소하고 메인 페이지로 이동하시겠습니까?')) { customPopups.showConfirm(
location.href = '/'; '이메일 인증을 취소하고 메인 페이지로 이동하시겠습니까?',
} function() {
location.href = '/';
}
);
}); });
// 타이머 시작 함수 (인증 코드 유효 시간) // 타이머 시작 함수 (인증 코드 유효 시간)
@@ -104,12 +104,15 @@
minutes = minutes < 10 ? "0" + minutes : minutes; minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds; seconds = seconds < 10 ? "0" + seconds : seconds;
$('#certify_time').text(minutes + ":" + seconds); $('#certify_time').text(minutes + ":" + seconds).css('color', '#666');
if (--timer < 0) { if (--timer < 0) {
clearInterval(timerInterval); clearInterval(timerInterval);
$('#certify_time').text("00:00").css('color', 'red'); $('#certify_time').text("시간 초과").css('color', '#FF6B6B');
customPopups.showAlert("인증 시간이 만료되었습니다. 인증코드를 다시 받아주세요."); customPopups.showAlert("인증 시간이 만료되었습니다. 인증코드를 다시 받아주세요.");
$('.btn_send_code').prop('disabled', false).text('인증코드 재발송');
$('.btn_verify_code').prop('disabled', true);
$('#authCode').prop('readonly', true);
} }
}, 1000); }, 1000);
} }
@@ -124,11 +127,11 @@
resendTimerInterval = setInterval(function () { resendTimerInterval = setInterval(function () {
if (resendTimer > 0) { if (resendTimer > 0) {
$button.find('span').text('재발송 가능 (' + resendTimer + '초)'); $button.text('재발송 가능 (' + resendTimer + '초)');
resendTimer--; resendTimer--;
} else { } else {
clearInterval(resendTimerInterval); clearInterval(resendTimerInterval);
$button.prop('disabled', false).find('span').text('인증코드 재발송'); $button.prop('disabled', false).text('인증코드 재발송');
} }
}, 1000); }, 1000);
} }
@@ -140,7 +143,7 @@
const email = $('#email').val(); const email = $('#email').val();
const $button = $(this); const $button = $(this);
$button.prop('disabled', true).find('span').text('발송 중...'); $button.prop('disabled', true).text('발송 중...');
$.ajax({ $.ajax({
url: '/mypage/send-verification-code', url: '/mypage/send-verification-code',
@@ -152,14 +155,16 @@
}, },
success: function(response) { success: function(response) {
customPopups.showAlert('인증코드가 이메일로 발송되었습니다.'); customPopups.showAlert('인증코드가 이메일로 발송되었습니다.');
$('#authCodeContainer').show(); $('#authCodeContainer').slideDown(300);
$('#authCode').prop('readonly', false);
$('.btn_verify_code').prop('disabled', false);
startTimer(300); // 5분 타이머 startTimer(300); // 5분 타이머
startResendTimer(); // 재발송 타이머 시작 (1분) startResendTimer(); // 재발송 타이머 시작 (1분)
}, },
error: function(xhr) { error: function(xhr) {
const errorMsg = xhr.responseJSON?.error || '인증코드 발송에 실패했습니다.'; const errorMsg = xhr.responseJSON?.error || '인증코드 발송에 실패했습니다.';
customPopups.showAlert(errorMsg); customPopups.showAlert(errorMsg);
$button.prop('disabled', false).find('span').text('인증코드 받기'); $button.prop('disabled', false).text('인증코드 받기');
} }
}); });
}); });
@@ -194,14 +199,21 @@
}, },
success: function(response) { success: function(response) {
clearInterval(timerInterval); clearInterval(timerInterval);
clearInterval(resendTimerInterval);
isVerified = true; 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('이메일 인증이 완료되었습니다!'); customPopups.showAlert('이메일 인증이 완료되었습니다!');
// 알림 확인 후 메인 페이지로 이동 // 알림 확인 후 메인 페이지로 이동
$('#customAlertOkButton').off('click.emailVerify').on('click.emailVerify', function () { setTimeout(function() {
customPopups.hideAlert('#customAlert');
location.href = '/'; location.href = '/';
}); }, 2000);
}, },
error: function(xhr) { error: function(xhr) {
const errorMsg = xhr.responseJSON?.error || '인증코드가 일치하지 않습니다.'; const errorMsg = xhr.responseJSON?.error || '인증코드가 일치하지 않습니다.';
@@ -210,20 +222,9 @@
}); });
}); });
// 인증 완료 버튼 클릭 // 인증코드 입력 필드 숫자만 허용
$('.btn_complete').on('click', function(e) { $('#authCode').on('input', function() {
e.preventDefault(); $(this).val($(this).val().replace(/[^0-9]/g, ''));
if (!isVerified) {
customPopups.showAlert('이메일 인증을 먼저 완료해주세요.');
return;
}
// 메인 페이지로 이동
customPopups.showAlert('이메일 인증이 완료되었습니다. 메인 페이지로 이동합니다.');
setTimeout(function() {
location.href = '/';
}, 1500);
}); });
}); });