회원탈퇴 팝업 UI 개선 및 관련 JS 이벤트 처리 추가
This commit is contained in:
Rinjae
@@ -576,6 +576,51 @@ const customPopups = {
|
||||
$(document).off('keydown.changeRole');
|
||||
},
|
||||
|
||||
showWithdrawal: function () {
|
||||
$('#withdrawalPopup').show();
|
||||
setTimeout(function() {
|
||||
$('#withdrawalModalBackdrop').addClass('show');
|
||||
$('#withdrawalModal').addClass('show');
|
||||
}, 10);
|
||||
|
||||
$('body').css('overflow', 'hidden');
|
||||
|
||||
$('#withdrawalPopupConfirmButton').off('click').on('click', function () {
|
||||
customPopups.hideWithdrawal();
|
||||
$('#withdrawalForm').submit();
|
||||
});
|
||||
|
||||
$('#withdrawalPopupCancelButton').off('click').on('click', function () {
|
||||
customPopups.hideWithdrawal();
|
||||
});
|
||||
|
||||
$('#withdrawalPopupCloseButton').off('click').on('click', function () {
|
||||
customPopups.hideWithdrawal();
|
||||
});
|
||||
|
||||
$(document).off('keydown.withdrawal').on('keydown.withdrawal', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
customPopups.hideWithdrawal();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
hideWithdrawal: function () {
|
||||
$('#withdrawalModalBackdrop').removeClass('show');
|
||||
$('#withdrawalModal').removeClass('show');
|
||||
|
||||
setTimeout(function() {
|
||||
$('#withdrawalPopup').hide();
|
||||
}, 300);
|
||||
|
||||
$('body').css('overflow', '');
|
||||
|
||||
$('#withdrawalPopupConfirmButton').off('click');
|
||||
$('#withdrawalPopupCancelButton').off('click');
|
||||
$('#withdrawalPopupCloseButton').off('click');
|
||||
$(document).off('keydown.withdrawal');
|
||||
},
|
||||
|
||||
init: function () {
|
||||
// emailValidationPopup 팝업의 닫기 버튼에 이벤트 리스너 추가
|
||||
$('#emailValidationPopupCloseButton').on('click', function () {
|
||||
|
||||
@@ -225,6 +225,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script th:if="${error}" th:inline="javascript">
|
||||
@@ -686,8 +687,20 @@
|
||||
|
||||
updateHiddenFields();
|
||||
initializePhoneNumbers();
|
||||
|
||||
// 회원탈퇴 버튼 이벤트
|
||||
const withdrawalBtn = document.querySelector('.withdrawal-link');
|
||||
if (withdrawalBtn) {
|
||||
withdrawalBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
customPopups.showWithdrawal();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
<section layout:fragment="pagePopups">
|
||||
<th:block th:replace="~{fragment/popup/withdrawalPopup :: withdrawalPopup}"></th:block>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script th:if="${error}" th:inline="javascript">
|
||||
@@ -151,11 +152,14 @@
|
||||
if (withdrawalBtn) {
|
||||
withdrawalBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
document.getElementById('withdrawalPopup').style.display = 'block';
|
||||
customPopups.showWithdrawal();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
<section layout:fragment="pagePopups">
|
||||
<th:block th:replace="~{fragment/popup/withdrawalPopup :: withdrawalPopup}"></th:block>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script th:if="${error}" th:inline="javascript">
|
||||
@@ -184,11 +185,14 @@
|
||||
if (withdrawalBtn) {
|
||||
withdrawalBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
document.getElementById('withdrawalPopup').style.display = 'block';
|
||||
customPopups.showWithdrawal();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
<section layout:fragment="pagePopups">
|
||||
<th:block th:replace="~{fragment/popup/withdrawalPopup :: withdrawalPopup}"></th:block>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,65 +1,40 @@
|
||||
<section class="content pop" th:fragment="withdrawalPopup">
|
||||
<!-- 회원탈퇴 팝업 -->
|
||||
<div class="popup_total" id="withdrawalPopup" style="display:none; z-index: 1000;">
|
||||
<div class="pop_dim">
|
||||
<div class="inner">
|
||||
<div class="popup-content">
|
||||
<div class="inner_txt">
|
||||
<div class="title">
|
||||
<h2>API Portal 회원탈퇴</h2>
|
||||
</div>
|
||||
</div>
|
||||
<form id="withdrawalForm" th:action="@{/withdraw}" method="POST">
|
||||
<div class="pop_grid">
|
||||
<div class="list-dot list">
|
||||
<p>회원 탈퇴는 API Portal 사이트의 회원 탈퇴입니다.</p>
|
||||
<p>사용중인 API 서비스의 중지는 제휴 담당자를 통해 문의 주시기 바랍니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop_btnbox">
|
||||
<button class="popup_button_gray btn_cancel">취소</button>
|
||||
<button class="popup_button_blue btn_withdraw">탈퇴신청</button>
|
||||
</div>
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
|
||||
</form>
|
||||
<a class="btn_close">
|
||||
<img th:src="@{/img/icon/icon_close2.png}" alt="닫기">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- views/fragment/popup/withdrawalPopup.html -->
|
||||
<div th:fragment="withdrawalPopup" id="withdrawalPopup" style="display: none;">
|
||||
<!-- Modal Backdrop -->
|
||||
<div class="modal-backdrop" id="withdrawalModalBackdrop"></div>
|
||||
|
||||
<!-- Modal Wrapper -->
|
||||
<div class="modal" id="withdrawalModal">
|
||||
<div class="modal-dialog">
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">API Portal 회원탈퇴</h3>
|
||||
<button type="button" class="modal-close" id="withdrawalPopupCloseButton">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
<div class="modal-body">
|
||||
<ul style="margin: 0; padding-left: 20px; color: #64748B; font-size: 14px; line-height: 1.8;">
|
||||
<li>회원 탈퇴는 API Portal 사이트의 회원 탈퇴입니다.</li>
|
||||
<li>사용중인 API 서비스의 중지는 제휴 담당자를 통해 문의 주시기 바랍니다.</li>
|
||||
</ul>
|
||||
<form id="withdrawalForm" th:action="@{/withdraw}" method="POST" style="display:none;">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" id="withdrawalPopupCancelButton">취소</button>
|
||||
<button type="button" class="btn btn-primary" id="withdrawalPopupConfirmButton">탈퇴신청</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
const withdrawalPopup = {
|
||||
init: function() {
|
||||
this.bindEvents();
|
||||
},
|
||||
|
||||
bindEvents: function() {
|
||||
$('.withdrawal a').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$('#withdrawalPopup').show();
|
||||
});
|
||||
|
||||
// 팝업 닫기 - 닫기 버튼과 취소 버튼
|
||||
$('#withdrawalPopup .btn_close, #withdrawalPopup .btn_cancel').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$('#withdrawalPopup').hide();
|
||||
});
|
||||
|
||||
$('#withdrawalPopup .btn_withdraw').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
withdrawalPopup.handleWithdrawal();
|
||||
});
|
||||
},
|
||||
|
||||
handleWithdrawal: function() {
|
||||
$('#withdrawalForm').submit();
|
||||
}
|
||||
};
|
||||
|
||||
withdrawalPopup.init();
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user