djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions 10 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>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/kjbank_title_layout}">
<body>
<section layout:fragment="contentFragment" class="content">
<div class="content_wrap">
<!-- 타이틀 -->
<div class="sub_title2" id="title-verification-email">
<h2 class="title add5">이메일 인증</h2>
<section layout:fragment="title">
<div class="page-title-banner">
<img th:src="@{/img/img_title_bg.png}" class="title-image">
<h1>이메일 인증</h1>
</div>
</section>
<section layout:fragment="contentFragment">
<div class="org-register-container">
<div class="common-title-bar">
<h2 class="common-title">이메일 인증</h2>
</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">
<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}">
<!-- 이메일 주소 표시 (readonly) -->
<div class="info1 p_top2">
<p class="title w_tit">
<span class="dot">이메일 주소</span>
</p>
<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 class="register-form">
<!-- 이메일 주소 + 인증코드 받기 버튼 (한 줄) -->
<div class="form-row" style="margin-bottom: 0">
<div class="form-label-wrapper label-offset">
<span class="form-label-text">이메일 주소</span>
</div>
<div class="form-field-wrapper input-with-button">
<input type="email" id="email" name="email" class="form-input input-readonly"
th:value="${email}" readonly disabled="disabled">
<button type="button" class="btn-input-action btn-auth btn_send_code">인증코드 받기</button>
</div>
<p class="info_txt" style="margin-top: 10px; color: #666;">
위 이메일 주소로 인증코드가 발송됩니다.
</p>
</div>
<!-- 인증코드 받기 버튼 -->
<div class="info1 pt28">
<div class="btn_check" style="width: 100%;">
<a class="common_btn_type_2 cbt btn_send_code" style="width: 100%;"><span>인증코드 받기</span></a>
<div class="form-row" style="margin-bottom: 0">
<div class="form-label-wrapper label-offset">
<span class="form-label-text">&nbsp;</span>
</div>
<div class="form-field-wrapper">
<p class="form-hint" style="margin-top: 0;">위 이메일 주소로 인증코드가 발송됩니다.</p>
</div>
</div>
<!-- 인증번호 입력 -->
<div class="info1 pt28 auth-code-container" id="authCodeContainer" style="display: none;">
<p class="title w_tit">
<span class="dot">인증코드 입력</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp5">
<div class="certify_box">
<input type="text" id="authCode" class="common_input_type_1 w_input"
placeholder="이메일로 받은 인증코드를 입력하세요" maxlength="6" required>
<span class="certify_time" 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 class="form-row" id="authCodeContainer" style="display: none;">
<div class="form-label-wrapper label-offset">
<span class="form-label-text">인증코드 입력</span> <span class="required-badge">필수</span>
</div>
<div class="form-field-wrapper input-with-button">
<div class="auth-input-group">
<input type="text" id="authCode" name="authCode" maxlength="6" pattern="[0-9]*"
inputmode="numeric" class="form-input"
placeholder="이메일로 받은 인증코드 6자리">
<span class="auth-timer" id="certify_time">05:00</span>
</div>
<button type="button" class="btn-input-action btn-auth btn_verify_code">인증코드 확인</button>
</div>
</div>
</div>
</form>
</div>
<!-- 제출 버튼 -->
<div class="btn_application m_top">
<a type="button" class="common_btn_type_1 gray btn_cancel"><span>취소</span></a>
<!-- <div class="btn_gap"></div>-->
<!-- <button type="button" class="common_btn_type_1 btn_complete" disabled><span>인증 완료</span></button>-->
</div>
</form>
</div>
<!-- Action Buttons -->
<div class="form-actions">
<button type="button" class="btn-submit btn-secondary">취소</button>
</div>
</div>
</section>
@@ -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, ''));
});
});