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-11-16 12:12:21 +09:00
parent 42100e8a1a
commit e93d2f7a4b
16 changed files with 607 additions and 1014 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+2 -1
View File
@@ -10763,7 +10763,8 @@ select.form-control {
min-width: 180px;
padding-top: 16px;
}
.org-form-label .required {
.org-form-label .required::before {
content: "* ";
color: #FF6B6B;
font-weight: 700;
}
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/js/front2.js
-10
View File
@@ -297,16 +297,6 @@ const createCustomSelect = (targetElement, options = {}) => {
};
};
function activateSelect() {
const customSelects = document.querySelectorAll('.custom_select');
customSelects.forEach(select => {
let selector = createCustomSelect(select);
console.log(selector);
});
}
/* 디자인 select box */
// document.addEventListener('DOMContentLoaded',activateSelect);
/* footer */
function adjustLayout() {
src/main/resources/static/sass/pages/_org-register.scss
+5 -2
View File
@@ -230,8 +230,11 @@
padding-top: $spacing-md;
.required {
color: $accent-orange;
font-weight: $font-weight-bold;
&::before {
content: '* ';
color: $accent-orange;
font-weight: $font-weight-bold;
}
}
@include respond-to('sm') {
src/main/resources/templates/views/apps/apis/mainApiKeyNew.html
-1
View File
@@ -130,7 +130,6 @@
<th:block layout:fragment="contentScript">
<script th:inline="javascript">
document.addEventListener('DOMContentLoaded', function () {
activateSelect();
$('.btn_cancel').on('click', function(){
window.location.href = '/apis';
})
src/main/resources/templates/views/apps/login/inactiveAccountRecovery.html
-1
View File
@@ -167,7 +167,6 @@
});
document.addEventListener('DOMContentLoaded', function () {
activateSelect();
let countdownInterval;
let isAuthVerified = false;
src/main/resources/templates/views/apps/mypage/components/commonUserInfo.html
+118 -199
View File
@@ -2,133 +2,98 @@
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<th:block th:fragment="commonUserInfo">
<div class="info1 info_mypage">
<p class="title w_tit">
<div class="org-form-group">
<label class="org-form-label">
<span>이메일 아이디</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4">
<input type="text" th:value="${loginId}" name="loginId" class="common_input_type_1"
placeholder="이메일" disabled="disabled">
<input type="hidden" th:value="${loginId}" name="loginId">
</div>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:value="${loginId}" name="loginId" class="org-form-input input-readonly"
placeholder="이메일" disabled="disabled">
<input type="hidden" th:value="${loginId}" name="loginId">
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span class="dot">성명</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4 c_inp">
<input type="text" th:value="${userName}" id="userName" name="userName" class="common_input_type_1"
placeholder="성명">
</div>
<div class="org-form-group">
<label class="org-form-label">
<span class="required">성명</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:value="${userName}" id="userName" name="userName" class="org-form-input"
placeholder="성명">
</div>
</div>
<div class="info1 info_mypage">
<p class="title">
<span class="dot">휴대폰 번호</span>
</p>
<div class="info_line">
<div class="info_box1">
<span class="input">
<div class="org-form-group">
<label class="org-form-label">
<span class="required">휴대폰 번호</span>
</label>
<div class="org-form-input-wrapper" th:with="parts=${#strings.arraySplit(mobileNumber, '-')}">
<div class="org-compound-input">
<input type="text"
th:with="parts=${#strings.arraySplit(mobileNumber, '-')}"
th:value="${parts != null and parts.length > 0 ? parts[0] : ''}"
name="mobilePrefix"
class="common_input_type_1"
class="org-form-input input-readonly"
maxlength="3"
disabled="disabled">
</span>
<span class="dash">-</span>
<span class="input">
<span class="separator">-</span>
<input type="text"
th:with="parts=${#strings.arraySplit(mobileNumber, '-')}"
th:value="${parts != null and parts.length > 1 ? parts[1] : ''}"
name="mobileMiddle"
class="common_input_type_1"
class="org-form-input input-readonly"
maxlength="4"
disabled="disabled">
</span>
<span class="dash">-</span>
<span class="input">
<span class="separator">-</span>
<input type="text"
th:with="parts=${#strings.arraySplit(mobileNumber, '-')}"
th:value="${parts != null and parts.length > 2 ? parts[2] : ''}"
name="mobileLast"
class="common_input_type_1"
class="org-form-input input-readonly"
maxlength="4"
disabled="disabled">
</span>
</div>
<div class="btn_check" id="changePhoneBtn">
<a href="#" class="common_btn_type_2 cbt change_mobile_phone"><span>변경</span></a>
</div>
<button type="button" class="org-btn org-btn-secondary change_mobile_phone" id="changePhoneBtn">변경</button>
</div>
</div>
<div class="info1 info_mypage" id="newPhoneNumberContainer" style="display: none;">
<p class="title">
<span class="dot">새 휴대폰 번호</span>
</p>
<div class="info_line">
<div class="info_box1">
<span class="input">
<div class="custom_select ct_sc h_inp2" id="phoneMobile">
<div class="select_selected">선택</div>
<ul class="common_selecttype select_hide select_items ct_sc2" id="newMobilePrefix">
<li>010</li>
<li>011</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
</ul>
</div>
</span>
<span class="dash">-</span>
<span class="input">
<input type="text" id="newMobileMiddle" name="newMobileMiddle" class="common_input_type_1" maxlength="4"
placeholder="앞자리"/>
</span>
<span class="dash">-</span>
<span class="input">
<input type="text" id="newMobileLast" name="newMobileLast" class="common_input_type_1" maxlength="4"
placeholder="뒷자리"/>
</span>
<div class="org-form-group" id="newPhoneNumberContainer" style="display: none;">
<label class="org-form-label">
<span class="required">새 휴대폰 번호</span>
</label>
<div class="org-form-input-wrapper">
<div class="org-compound-input">
<select class="org-form-select phone-number" id="phoneMobile" name="newMobilePrefix">
<option value="">선택</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select>
<span class="separator">-</span>
<input type="text" id="newMobileMiddle" name="newMobileMiddle" class="org-form-input phone-number"
maxlength="4" pattern="\d*" inputmode="numeric" placeholder="앞자리"/>
<span class="separator">-</span>
<input type="text" id="newMobileLast" name="newMobileLast" class="org-form-input phone-number"
maxlength="4" pattern="\d*" inputmode="numeric" placeholder="뒷자리"/>
<input type="hidden" value="" name="mobileNumber" id="mobileNumber">
</div>
<div class="btn_check">
<a class="common_btn_type_2 cbt btn_auth"
th:hx-post="@{/auth/request_auth_number}"
hx-include="#mobileNumber,input[name='_csrf']"
hx-target="#authNumberContainer"
hx-swap="none">
<span>인증번호 받기</span>
</a>
</div>
<button type="button" class="org-btn org-btn-primary btn_auth">
인증번호 받기
</button>
</div>
</div>
<div class="info1 info_mypage" id="authNumberContainer" style="display: none;">
<p class="title">
<span class="dot">인증번호 입력</span>
</p>
<div class="info_line">
<div class="info_box1">
<div class="certify_box">
<input type="text" id="authNumber" name="authNumber" maxlength="6" pattern="[0-9]*"
inputmode="numeric" class="common_input_type_1 w_input"
placeholder="SMS 인증번호">
<span class="certify_time" id="certify_time">03:00</span>
</div>
</div>
<div class="btn_check">
<a href="#none" class="common_btn_type_2 cbt btn_verify_auth"
th:hx-post="@{/auth/verify_auth_number}"
hx-include="#mobileNumber, #authNumber,input[name='_csrf']"
hx-target="#authNumber-validation"
hx-swap="none"><span>인증번호 확인</span></a>
<div class="org-form-group" id="authNumberContainer" style="display: none;">
<label class="org-form-label">
<span class="required">인증번호 입력</span>
</label>
<div class="org-form-input-wrapper">
<div class="org-auth-input-group">
<input type="text" id="authNumber" name="authNumber" maxlength="6" pattern="[0-9]*"
inputmode="numeric" class="org-form-input"
placeholder="SMS 인증번호 6자리">
<span class="org-timer" id="certify_time">03:00</span>
</div>
<button type="button" class="org-btn org-btn-primary btn_verify_auth">
인증번호 확인
</button>
</div>
</div>
<div id="authNumber-validation"></div>
@@ -137,19 +102,19 @@
<script>
// 휴대폰 번호 조합 함수
function combineMobileNumber() {
let mobileElement = document.querySelector('#phoneMobile .select_selected');
if (!mobileElement) {
console.error('Mobile element not found');
let mobileSelect = document.getElementById('phoneMobile');
if (!mobileSelect) {
console.error('Mobile select element not found');
return null;
}
let prefix = mobileElement.textContent.trim();
let prefix = mobileSelect.value;
let middle = document.getElementById('newMobileMiddle')?.value.trim() || '';
let last = document.getElementById('newMobileLast')?.value.trim() || '';
console.log('values:', {prefix, middle, last});
if (prefix === '선택' || !middle || !last) {
if (!prefix || !middle || !last) {
return null;
}
@@ -167,12 +132,7 @@
// 전역 변수로 설정
window.isAuthVerified = false;
document.body.addEventListener('htmx:configRequest', function(evt) {
evt.detail.parameters['mobileNumber'] = combineMobileNumber(evt);
});
document.addEventListener('DOMContentLoaded', function () {
activateSelect();
let countdownInterval;
let isAuthVerified = false;
@@ -216,33 +176,15 @@
}
}
// 전화번호 입력 필드 숫자만 입력 가능
$('#newMobileMiddle, #newMobileLast, #authNumber').on('input', function () {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
// select box 클릭 이벤트 처리
const selectBox = document.querySelector('#phoneMobile');
if (selectBox) {
selectBox.addEventListener('click', function (e) {
console.log('select box clicked', e.target.tagName);
if (e.target.tagName === 'LI') {
let selectedText = e.target.textContent;
console.log('selected value:', selectedText);
let selectedDiv = this.querySelector('.select_selected');
selectedDiv.textContent = selectedText;
this.querySelector('ul').classList.add('select_hide');
let combinedNumber = combineMobileNumber();
console.log('combined number after selection:', combinedNumber);
} else if (e.target.classList.contains('select_selected')) {
this.querySelector('ul').classList.toggle('select_hide');
}
});
}
// select 변경 이벤트
$('#phoneMobile').on('change', function () {
combineMobileNumber();
});
// 인증번호 검증 결과 처리 함수
function handleAuthNumberVerification(response) {
@@ -306,7 +248,7 @@
}
// 이벤트 리스너 등록
document.querySelectorAll('#phoneMobile .select_selected, #newMobileMiddle, #newMobileLast')
document.querySelectorAll('#newMobileMiddle, #newMobileLast')
.forEach(el => el.addEventListener('input', combineMobileNumber));
let authNumberInput = document.getElementById("authNumber");
@@ -341,35 +283,32 @@
const originalLast = document.querySelector('[name="mobileLast"]').value;
const originalMobileNumber = `${originalPrefix}-${originalMiddle}-${originalLast}`;
console.log('Original Mobile:', originalMobileNumber);
console.log('New Mobile:', newMobileNumber);
});
}
// 번호 동일성 체크 함수
function isSameMobileNumber() {
let newMobileNumber = combineMobileNumber();
if (!newMobileNumber) return false;
const originalPrefix = document.querySelector('[name="mobilePrefix"]').value;
const originalMiddle = document.querySelector('[name="mobileMiddle"]').value;
const originalLast = document.querySelector('[name="mobileLast"]').value;
const originalMobileNumber = `${originalPrefix}-${originalMiddle}-${originalLast}`;
return newMobileNumber === originalMobileNumber;
}
// HTMX beforeRequest 이벤트 핸들러
document.body.addEventListener('htmx:beforeRequest', function (evt) {
if (evt.target.classList.contains('btn_auth')) {
if (isSameMobileNumber()) {
evt.preventDefault();
// 동일한 번호인지 체크
if (newMobileNumber === originalMobileNumber) {
customPopups.showAlert("동일한 휴대폰 번호입니다.");
return;
}
}
});
console.log('Original Mobile:', originalMobileNumber);
console.log('New Mobile:', newMobileNumber);
// jQuery AJAX 호출
$.ajax({
url: /*[[@{/auth/request_auth_number}]]*/ '/auth/request_auth_number',
type: 'POST',
data: {
mobileNumber: newMobileNumber,
_csrf: $('input[name="_csrf"]').val()
},
success: function(response) {
handleAuthNumberRequest(response);
},
error: function(xhr, status, error) {
customPopups.showAlert("처리 중 오류가 발생했습니다. 다시 시도해주세요.");
}
});
});
}
// 인증번호 확인 버튼 이벤트 리스너
let verifyAuthButton = document.querySelector(".btn_verify_auth");
@@ -380,63 +319,43 @@
customPopups.showAlert("6자리 인증번호를 입력해주세요.");
return;
}
let mobileNumber = document.getElementById('mobileNumber').value;
// jQuery AJAX 호출
$.ajax({
url: /*[[@{/auth/verify_auth_number}]]*/ '/auth/verify_auth_number',
type: 'POST',
data: {
mobileNumber: mobileNumber,
authNumber: authNumber,
_csrf: $('input[name="_csrf"]').val()
},
success: function(response) {
handleAuthNumberVerification(response);
},
error: function(xhr, status, error) {
customPopups.showAlert("처리 중 오류가 발생했습니다. 다시 시도해주세요.");
}
});
});
}
// HTMX 이벤트 리스너
document.body.addEventListener('htmx:afterSwap', function (event) {
let targetId = event.detail.target ? event.detail.target.id : null;
if (targetId && ['authNumberContainer', 'authNumber-validation'].includes(targetId)) {
let response;
try {
response = typeof event.detail.xhr.response === 'string'
? JSON.parse(event.detail.xhr.response)
: event.detail.xhr.response;
} catch (e) {
console.error('Failed to parse response as JSON:', event.detail.xhr.response);
customPopups.showAlert("서버에서 예상치 못한 응답을 받았습니다.");
return;
}
switch (targetId) {
case 'authNumberContainer':
handleAuthNumberRequest(response);
break;
case 'authNumber-validation':
handleAuthNumberVerification(response);
break;
}
}
});
// 휴대폰 번호 변경 버튼 이벤트 리스너
const changeMobilePhoneBtn = document.querySelector('.change_mobile_phone');
const newPhoneNumberContainer = document.getElementById('newPhoneNumberContainer');
const authNumberContainer = document.getElementById('authNumberContainer');
const changePhoneBtn = document.getElementById('changePhoneBtn');
if (changeMobilePhoneBtn && newPhoneNumberContainer && authNumberContainer && changePhoneBtn) {
if (changeMobilePhoneBtn && newPhoneNumberContainer && authNumberContainer) {
changeMobilePhoneBtn.addEventListener('click', function (e) {
e.preventDefault();
newPhoneNumberContainer.style.display = '';
authNumberContainer.style.display = '';
changePhoneBtn.style.visibility = 'hidden';
changeMobilePhoneBtn.style.display = 'none';
});
}
document.body.addEventListener('htmx:responseError', function (event) {
customPopups.showAlert("처리 중 오류가 발생했습니다. 다시 시도해주세요.");
});
// HTMX 요청 전 파라미터 설정 추가
document.body.addEventListener('htmx:configRequest', function(evt) {
const mobileNumber = combineMobileNumber();
if (mobileNumber) {
evt.detail.parameters['mobileNumber'] = mobileNumber;
}
});
// 초기화 실행
initializeMobileNumber();
});
src/main/resources/templates/views/apps/mypage/credentialDetail.html
-4
View File
@@ -204,10 +204,6 @@
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function () {
activateSelect();
});
// Show password prompt for viewing client secret
function showPasswordPrompt() {
customPopups.showPasswordInput({
src/main/resources/templates/views/apps/mypage/orgTransfer.html
+90 -96
View File
@@ -1,73 +1,67 @@
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org"
layout:decorate="~{layout/kbank_mypage_layout}">
layout:decorate="~{layout/kbank_signup_layout}">
<body>
<section layout:fragment="title">
<div class="org-page-title-banner">
<img th:src="@{/img/user_register_title.png}" class="title-image">
<h1>법인회원 전환</h1>
</div>
</section>
<section layout:fragment="contentFragment" class="content">
<script th:src="@{/js/htmx.min.js}"></script>
<div class="content_wrap">
<div class="sub_title3">
<h2 class="title">법인회원 전환</h2>
</div>
<div class="org-register-container">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<input type="hidden" name="registrationType" th:value="${registrationType}"/>
<div class="inner i_cs h_inner8">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<input type="hidden" name="registrationType" th:value="${registrationType}"/>
<!-- 약관동의 섹션 -->
<th:block
th:replace="apps/register/userAgreementContent :: agreementContent(${termsOfUse}, ${privacyCollect})"></th:block>
<!-- 약관동의 섹션 -->
<th:block
th:replace="apps/register/userAgreementContent :: agreementContent(${termsOfUse}, ${privacyCollect})"></th:block>
<!-- 법인 기본 정보 폼 -->
<form name="portalOrg" id="businessTransferForm" method="post" th:action="@{/mypage/org-transfer}"
th:object="${portalOrg}" enctype="multipart/form-data">
<!-- 법인 기본 정보 -->
<div class="terms_box">
<p>법인 기본 정보</p>
<span class="dot">필수 입력</span>
<div class="org-section-header">
<h3>법인 기본 정보</h3>
<span class="required-badge">필수 입력</span>
</div>
<!-- 법인 기본 정보 폼 -->
<form name="portalOrg" id="businessTransferForm" method="post" th:action="@{/mypage/org-transfer}"
th:object="${portalOrg}" enctype="multipart/form-data">
<th:block th:replace="~{apps/register/components/orgBasicInfoForm :: orgInfoForm}"></th:block>
<th:block th:replace="~{apps/register/components/orgBasicInfoForm :: orgInfoForm}"></th:block>
<!-- 법인 관리자 정보 -->
<div class="form_type">
<div class="terms_box">
<p>법인 관리자 정보</p>
<span class="dot">필수 입력</span>
</div>
<div class="top_info m_tbom">
<ul>
<li>법인 관리자는 API 신청 및 이용자 초대 등 모든 권한을 보유합니다.</li>
<li class="top">법인회원 전환은 반드시 법인이메일 주소로 입력하시기 바랍니다. 개인이메일로 전환 신청시, 법인 승인이 거절 될 수 있습니다</li>
</ul>
</div>
<div class="form_type">
<div class="info1 pt28">
<p class="title">
<span>이메일 아이디</span>
</p>
<div class="info_line">
<div class="info_box1">
<input type="text" th:value="${user.loginId}" name="loginId"
class="common_input_type_1 input-readonly"
placeholder="이메일" disabled="disabled">
<input type="hidden" th:value="${user.loginId}" name="loginId">
</div>
<div class="btn_check pc-only"></div>
</div>
</div>
<!-- 법인 관리자 정보 -->
<div class="org-section-header">
<h3>법인 관리자 정보</h3>
<span class="required-badge">필수 입력</span>
</div>
<div class="org-info-notice">
<ul>
<li>법인 관리자는 API 신청 및 이용자 초대 등 모든 권한을 보유합니다.</li>
<li>법인회원 전환은 반드시 법인이메일 주소로 입력하시기 바랍니다. 개인이메일로 전환 신청시, 법인 승인이 거절 될 수 있습니다</li>
</ul>
</div>
<div class="org-form-container">
<div class="org-form-group">
<label class="org-form-label">
<span>이메일 아이디</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:value="${user.loginId}" name="loginId"
class="org-form-input input-readonly"
placeholder="이메일" disabled="disabled">
<input type="hidden" th:value="${user.loginId}" name="loginId">
</div>
</div>
</div>
<div class="form_type">
<div class="btn_application m_top">
<a class="common_btn_type_1 gray" id="cancelButton" th:href="@{/mypage}"><span>취소</span></a>
<div class="btn_gap"></div>
<a class="common_btn_type_1" id="submitButton"><span>법인회원 전환</span></a>
</div>
</div>
</form>
</div>
<!-- Action Buttons -->
<div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" id="cancelButton" th:onclick="|location.href='@{/mypage}'|">취소</button>
<button type="button" class="org-btn org-btn-primary" id="submitButton">법인회원 전환</button>
</div>
</form>
</div>
</section>
<th:block layout:fragment="contentScript">
@@ -128,29 +122,6 @@
return true;
}
// HTMX 이벤트 리스너 - 모든 HTMX 응답을 중앙에서 처리
document.body.addEventListener('htmx:afterRequest', function (event) {
const targetId = event.detail.target.id;
let response;
try {
response = JSON.parse(event.detail.xhr.response);
} catch (e) {
console.error('응답 JSON 파싱 실패:', e);
customPopups.showAlert('서버 응답을 처리할 수 없습니다.');
return;
}
// 응답 처리
if (response && response.message) {
if (response.status === 'SUCCESS') {
customPopups.showSuccess(response.message);
} else {
customPopups.showAlert(response.message);
}
}
});
// 제출 버튼 처리
document.querySelector('#submitButton').addEventListener('click', function (e) {
e.preventDefault();
@@ -162,26 +133,49 @@
return;
}
// FormData 생성
const formData = new FormData(form);
// 약관 동의 값 추가
const termsInput = document.createElement('input');
termsInput.type = 'hidden';
termsInput.name = 'termsOfUse';
termsInput.value = $('#termsOfUse').prop('checked');
form.appendChild(termsInput);
formData.append('termsOfUse', $('#termsOfUse').prop('checked'));
formData.append('privacyCollect', $('#privacyCollect').prop('checked'));
const privacyCollectInput = document.createElement('input');
privacyCollectInput.type = 'hidden';
privacyCollectInput.name = 'privacyCollect';
privacyCollectInput.value = $('#privacyCollect').prop('checked');
form.appendChild(privacyCollectInput);
// jQuery AJAX로 폼 제출
$.ajax({
url: /*[[@{/mypage/org-transfer}]]*/ '/mypage/org-transfer',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log('폼 제출 성공:', response);
// 폼 제출
try {
form.submit();
console.log('폼 제출 완료');
} catch (error) {
console.error('폼 제출 중 오류:', error);
}
// 응답이 JSON인 경우
if (typeof response === 'object') {
if (response.status === 'SUCCESS') {
customPopups.showSuccess(response.message || '법인회원 전환 신청이 완료되었습니다.', function() {
window.location.href = /*[[@{/mypage}]]*/ '/mypage';
});
} else {
customPopups.showAlert(response.message || '처리 중 오류가 발생했습니다.');
}
} else {
// 응답이 HTML인 경우 (페이지 리다이렉트)
window.location.href = /*[[@{/mypage}]]*/ '/mypage';
}
},
error: function(xhr, status, error) {
console.error('폼 제출 중 오류:', error);
// 서버에서 반환한 에러 메시지가 있으면 표시
let errorMessage = '처리 중 오류가 발생했습니다. 다시 시도해주세요.';
if (xhr.responseJSON && xhr.responseJSON.message) {
errorMessage = xhr.responseJSON.message;
}
customPopups.showAlert(errorMessage);
}
});
});
// 인증 완료 이벤트 리스너
src/main/resources/templates/views/apps/mypage/passwordChange.html
+46 -46
View File
@@ -1,60 +1,60 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/kbank_mypage_layout}">
layout:decorate="~{layout/kjbank_signup_layout}">
<head>
<title>비밀번호 변경</title>
</head>
<body>
<section layout:fragment="title">
<div class="org-page-title-banner">
<img th:src="@{/img/user_register_title.png}" class="title-image">
<h1>비밀번호 변경</h1>
</div>
</section>
<section layout:fragment="contentFragment" class="content">
<div class="content_wrap">
<div class="sub_title3">
<h2 class="title">비밀번호 변경</h2>
<div class="org-register-container">
<div class="org-section-header">
<h3>소중한 계정 보호를 위해 비밀번호를 변경해 주세요!</h3>
</div>
<div class="inner i_cs11 h_inner8">
<div class="con_title m_btm0">
<p class="tit_txt pc-only">소중한 계정 보호를 위해 <span>비밀번호를 변경</span>해 주세요!</p>
<p class="tit_txt m-only">소중한 계정 보호를 위해<br> <span>비밀번호를 변경</span>해 주세요!</p>
<form id="passwordChangeForm" th:action="@{/mypage/change_new_password}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<div class="org-form-container">
<div class="org-form-group">
<label class="org-form-label">
<span class="required">새 비밀번호</span>
</label>
<div class="org-form-input-wrapper">
<input type="password" name="newPassword" class="org-form-input"
placeholder="새 비밀번호 입력" required>
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span class="required">새 비밀번호 확인</span>
</label>
<div class="org-form-input-wrapper">
<input type="password" name="confirmPassword" class="org-form-input"
placeholder="새 비밀번호 확인 입력" required>
</div>
</div>
</div>
<form id="passwordChangeForm" th:action="@{/mypage/change_new_password}" method="post" class="form_type">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<div class="form_type_box">
<div class="info1 p_top8">
<p class="title">
<span class="dot">새 비밀번호</span>
</p>
<div class="info_line info_add">
<div class="info_box1 add add2">
<input type="password" name="newPassword" class="common_input_type_1"
placeholder="새 비밀번호 입력" required>
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title">
<span class="dot">새 비밀번호 확인</span>
</p>
<div class="info_line info_add">
<div class="info_box1 add add2">
<input type="password" name="confirmPassword" class="common_input_type_1"
placeholder="새 비밀번호 확인 입력" required>
</div>
</div>
</div>
<div class="org-info-notice">
<ul>
<li>영문 대문자, 소문자, 숫자, 특수문자 포함 8~20자</li>
<li>아이디, 휴대전화, 3자리 이상 연속, 반복문자 사용 불가</li>
</ul>
</div>
<div class="list-dot info_text">
<p>영문 대문자, 소문자, 숫자, 특수문자 포함 8~20자 (아이디, 휴대전화, 3자리 이상 연속,반복문자 사용 불가)</p>
</div>
</div>
<div class="btn_application m_top">
<a href="#" onclick="history.back()" class="common_btn_type_1 gray"><span>취소</span></a>
<div class="btn_gap"></div>
<button type="submit" class="common_btn_type_1"><span>변경</span></button>
</div>
</form>
</div>
<div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" onclick="history.back()">취소</button>
<button type="submit" class="org-btn org-btn-primary">변경</button>
</div>
</form>
</div>
<script th:if="${error}" th:inline="javascript">
$(document).ready(function() {
@@ -63,4 +63,4 @@
</script>
</section>
</body>
</html>
</html>
src/main/resources/templates/views/apps/mypage/passwordChangeEntry.html
+30 -28
View File
@@ -1,38 +1,40 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/kbank_mypage_layout}">
layout:decorate="~{layout/kjbank_signup_layout}">
<body>
<section layout:fragment="title">
<div class="org-page-title-banner">
<img th:src="@{/img/user_register_title.png}" class="title-image">
<h1>비밀번호 변경</h1>
</div>
</section>
<section layout:fragment="contentFragment" class="content">
<div class="content_wrap">
<div class="sub_title3">
<h2 class="title">비밀번호 변경</h2>
<div class="org-register-container">
<div class="org-section-header">
<h3>비밀번호 변경을 위하여 현재 비밀번호를 입력해 주세요</h3>
</div>
<div class="inner i_cs11 h_inner8">
<div class="con_title m_btm0">
<p class="tit_txt">비밀번호 변경을 위하여 <span>현재 비밀번호</span>를 입력해 주세요</p>
</div>
<form th:action="@{/verify_current_password}" method="post" class="form_type">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<div class="form_type_box">
<div class="info1 p_top8">
<p class="title">
<span class="dot">현재 비밀번호</span>
</p>
<div class="info_line info_add">
<div class="info_box1 add add2">
<input type="password" name="currentPassword" class="common_input_type_1" placeholder="비밀번호 입력" required>
</div>
</div>
<form th:action="@{/verify_current_password}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<div class="org-form-container">
<div class="org-form-group">
<label class="org-form-label">
<span class="required">현재 비밀번호</span>
</label>
<div class="org-form-input-wrapper">
<input type="password" name="currentPassword" class="org-form-input"
placeholder="비밀번호 입력" required>
</div>
</div>
<div class="btn_application m_top">
<a th:href="@{/}" class="common_btn_type_1 gray"><span>취소</span></a>
<div class="btn_gap"></div>
<button type="submit" class="common_btn_type_1"><span>확인</span></button>
</div>
</form>
</div>
</div>
<div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="submit" class="org-btn org-btn-primary">확인</button>
</div>
</form>
</div>
<script th:if="${error}" th:inline="javascript">
$(document).ready(function() {
@@ -41,4 +43,4 @@
</script>
</section>
</body>
</html>
</html>
src/main/resources/templates/views/apps/mypage/updateCorporateManager.html
+228 -476
View File
@@ -1,314 +1,229 @@
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/kbank_mypage_layout}">
layout:decorate="~{layout/kjbank_signup_layout}">
<body>
<section layout:fragment="contentFragment" class="content">
<div class="content_wrap">
<div class="sub_title3">
<h2 class="title">내 정보 관리</h2>
<section layout:fragment="title">
<div class="org-page-title-banner">
<img th:src="@{/img/user_register_title.png}" class="title-image">
<h1>내 정보 관리</h1>
</div>
</section>
<section layout:fragment="contentFragment">
<div class="org-register-container">
<form id="updateForm" method="post" th:action="@{/mypage/update}" th:object="${user}">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<!-- 법인 기본 정보 -->
<div class="org-section-header org-section-header--agreement">
<h3>법인 기본 정보</h3>
</div>
<div class="org-form-container">
<div class="org-form-group">
<label class="org-form-label">
<span>제휴기관 ID</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" name="organizationId" class="org-form-input input-readonly"
th:value="${user.portalOrg.orgCode}"
placeholder="k000000001"
disabled="disabled">
</div>
</div>
<div class="inner i_cs h_inner11">
<form id="updateForm" method="post" th:action="@{/mypage/update}" th:object="${user}">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<!-- 법인 기본 정보 -->
<div class="terms_box user_top">
<p>법인 기본 정보</p>
</div>
<div class="form_type">
<div class="info1">
<p class="title w_tit">
<span>제휴기관 ID</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4">
<input type="text" name="organizationId" class="common_input_type_1"
th:value="${user.portalOrg.orgCode}"
placeholder="k000000001"
disabled="disabled" style="background:#F7F9FD;">
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>사업자등록정보</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4 c_inp">
<input type="text" th:field="*{portalOrg.compRegNo}" id="compRegNo"
class="common_input_type_1"
style="display:none;">
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.compRegNo,0,3)}"
name="compRegNo1" class="common_input_type_1" maxlength="3">
<span class="dash">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.compRegNo,3,5)}"
name="compRegNo2" class="common_input_type_1" maxlength="2">
<span class="dash">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.compRegNo,5,10)}"
name="compRegNo3" class="common_input_type_1" maxlength="5">
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>법인등록번호</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4 c_inp">
<input type="text" th:field="*{portalOrg.corpRegNo}" id="corpRegNo"
class="common_input_type_1"
style="display:none;">
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.corpRegNo,0,6)}"
name="corpRegNo1" class="common_input_type_1" maxlength="6">
<span class="dash">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.corpRegNo,6,13)}"
name="corpRegNo2" class="common_input_type_1" maxlength="7">
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>법인명</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4 c_inp">
<input type="text" th:field="*{portalOrg.orgName}" class="common_input_type_1">
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>대표자 성명</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4 c_inp">
<input type="text" th:field="*{portalOrg.ceoName}" class="common_input_type_1">
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>사업장 소재지</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4 c_inp">
<input type="text" th:field="*{portalOrg.orgAddr}" class="common_input_type_1">
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>업태</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4 c_inp">
<input type="text" th:field="*{portalOrg.orgSectors}" class="common_input_type_1">
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>업종</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4 c_inp">
<input type="text" th:field="*{portalOrg.orgIndustryType}" class="common_input_type_1">
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>회사 전화번호</span>
</p>
<div class="info_line info_add">
<div class="info_box1 w_inp4 c_inp" th:with="orgPhoneParts=${user.portalOrg.orgPhoneNumber != null ? user.portalOrg.orgPhoneNumber.split('-') : {}}">
<input type="text" th:field="*{portalOrg.orgPhoneNumber}" id="orgPhoneNumber"
class="common_input_type_1" style="display:none;">
<span class="input">
<div class="custom_select ct_sc h_inp2" id="orgPhonePrefix">
<div class="select_selected"
th:text="${orgPhoneParts[0] != null ? orgPhoneParts[0] : ''}"></div>
<ul class="common_selecttype select_items ct_sc2">
<li>국번없음</li>
<li>02</li>
<li>031</li>
<li>032</li>
<li>033</li>
<li>041</li>
<li>042</li>
<li>043</li>
<li>044</li>
<li>051</li>
<li>052</li>
<li>053</li>
<li>054</li>
<li>055</li>
<li>061</li>
<li>062</li>
<li>063</li>
<li>064</li>
<li>070</li>
</ul>
</div>
</span>
<span class="dash">-</span>
<span class="input">
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${orgPhoneParts[1] != null ? orgPhoneParts[1] : ''}"
name="orgPhone1"
class="common_input_type_1" maxlength="4">
</span>
<span class="dash">-</span>
<span class="input">
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${orgPhoneParts[2] != null ? orgPhoneParts[2] : ''}"
name="orgPhone2"
class="common_input_type_1" maxlength="4">
</span>
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>서비스명</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4 c_inp">
<input type="text" th:field="*{portalOrg.serviceName}" class="common_input_type_1">
</div>
</div>
</div>
<div class="info1 info_mypage">
<p class="title w_tit">
<span>고객센터 전화번호</span>
</p>
<div class="info_line info_add">
<div class="info_box1 w_inp4 c_inp" th:with="scPhoneParts=${user.portalOrg.scPhoneNumber != null ? user.portalOrg.scPhoneNumber.split('-') : {}}">
<input type="text" th:field="*{portalOrg.scPhoneNumber}" id="scPhoneNumber"
class="common_input_type_1" style="display:none;">
<span class="input">
<div class="custom_select ct_sc h_inp2" id="scPhonePrefix">
<div class="select_selected"
th:text="${scPhoneParts[0] != null ? scPhoneParts[0] : ''}"></div>
<ul class="common_selecttype select_items ct_sc2">
<li>국번없음</li>
<li>02</li>
<li>031</li>
<li>032</li>
<li>033</li>
<li>041</li>
<li>042</li>
<li>043</li>
<li>044</li>
<li>051</li>
<li>052</li>
<li>053</li>
<li>054</li>
<li>055</li>
<li>061</li>
<li>062</li>
<li>063</li>
<li>064</li>
<li>070</li>
</ul>
</div>
</span>
<span class="dash">-</span>
<span class="input">
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${scPhoneParts[1] != null ? scPhoneParts[1] : ''}"
name="scPhone1"
class="common_input_type_1" maxlength="4">
</span>
<span class="dash">-</span>
<span class="input">
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${scPhoneParts[2] != null ? scPhoneParts[2] : ''}"
name="scPhone2"
class="common_input_type_1" maxlength="4">
</span>
</div>
</div>
</div>
</div>
<!-- 법인 관리자 정보 -->
<div class="terms_box user_top2">
<p>법인 관리자 정보</p>
<span class="dot">필수 입력</span>
</div>
<div class="form_type">
<th:block th:replace="~{apps/mypage/components/commonUserInfo :: commonUserInfo}"></th:block>
</div>
<!-- 사용 서버 IP 대역(화이트리스트) -->
<div class="terms_box user_top2">
<p>사용 서버 IP 목록(화이트리스트)</p>
</div>
<div class="tb_board_list ip_list">
<input type="hidden" id="ipWhitelist" th:field="*{portalOrg.ipWhitelist}"/>
<div class="table_box">
<table class="table table_min" cellspacing="0" cellpadding="0" width="100%">
<colgroup>
<col width="60px">
<col width="556px">
<col width="120px">
</colgroup>
<thead>
<tr>
<th>No</th>
<th>IP</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<tr th:each="ip, status : ${ipList}">
<td th:text="${status.count}">1</td>
<td th:text="${ip}">128.255.255.254</td>
<td>
<button type="button" class="btn_del">삭제</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="terms_box2">
<div class="form_type">
<div class="info1 info2">
<div class="btn_wrap bt_location2">
<p class="title w_tit2">
<span>사용 서버 IP 추가</span>
</p>
</div>
<div class="info_line info_w">
<div class="info_box1 info_box2">
<input type="text" pattern="^(\d{1,3}\.){0,3}\d{1,3}$" inputmode="numeric"
id="ipRangeStart" class="common_input_type_1 inp_wd1" maxlength="20"
placeholder="XXX.XXX.XXX.XXX">
</div>
</div>
<div class="api_box">
<button type="button" class="btn_add2">IP 추가</button>
</div>
</div>
</div>
</div>
<div class="form_type">
<div class="btn_application m_top">
<a class="common_btn_type_1 gray" th:href="@{/}"><span>취소</span></a>
<div class="btn_gap"></div>
<a class="common_btn_type_1"><span>수정 적용</span></a>
</div>
</div>
</form>
<div class="withdrawal">
<a>회원탈퇴</a>
<div class="org-form-group">
<label class="org-form-label">
<span>사업자등록정보</span>
</label>
<div class="org-form-input-wrapper">
<div class="org-compound-input">
<input type="text" th:field="*{portalOrg.compRegNo}" id="compRegNo"
class="org-form-input"
style="display:none;">
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.compRegNo,0,3)}"
name="compRegNo1" class="org-form-input" maxlength="3">
<span class="separator">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.compRegNo,3,5)}"
name="compRegNo2" class="org-form-input" maxlength="2">
<span class="separator">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.compRegNo,5,10)}"
name="compRegNo3" class="org-form-input" maxlength="5">
</div>
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span>법인등록번호</span>
</label>
<div class="org-form-input-wrapper">
<div class="org-compound-input">
<input type="text" th:field="*{portalOrg.corpRegNo}" id="corpRegNo"
class="org-form-input"
style="display:none;">
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.corpRegNo,0,6)}"
name="corpRegNo1" class="org-form-input" maxlength="6">
<span class="separator">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#strings.substring(user.portalOrg.corpRegNo,6,13)}"
name="corpRegNo2" class="org-form-input" maxlength="7">
</div>
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span>법인명</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:field="*{portalOrg.orgName}" class="org-form-input">
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span>대표자 성명</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:field="*{portalOrg.ceoName}" class="org-form-input">
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span>사업장 소재지</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:field="*{portalOrg.orgAddr}" class="org-form-input">
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span>업태</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:field="*{portalOrg.orgSectors}" class="org-form-input">
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span>업종</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:field="*{portalOrg.orgIndustryType}" class="org-form-input">
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span>회사 전화번호</span>
</label>
<div class="org-form-input-wrapper" th:with="orgPhoneParts=${user.portalOrg.orgPhoneNumber != null ? user.portalOrg.orgPhoneNumber.split('-') : {}}">
<div class="org-compound-input">
<input type="text" th:field="*{portalOrg.orgPhoneNumber}" id="orgPhoneNumber"
class="org-form-input" style="display:none;">
<select class="org-form-select phone-number" id="orgPhonePrefix">
<option value="">선택</option>
<option value="02" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '02'}">02</option>
<option value="031" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '031'}">031</option>
<option value="032" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '032'}">032</option>
<option value="033" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '033'}">033</option>
<option value="041" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '041'}">041</option>
<option value="042" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '042'}">042</option>
<option value="043" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '043'}">043</option>
<option value="044" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '044'}">044</option>
<option value="051" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '051'}">051</option>
<option value="052" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '052'}">052</option>
<option value="053" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '053'}">053</option>
<option value="054" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '054'}">054</option>
<option value="055" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '055'}">055</option>
<option value="061" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '061'}">061</option>
<option value="062" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '062'}">062</option>
<option value="063" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '063'}">063</option>
<option value="064" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '064'}">064</option>
<option value="070" th:selected="${#lists.size(orgPhoneParts) > 0 && orgPhoneParts[0] == '070'}">070</option>
</select>
<span class="separator">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#lists.size(orgPhoneParts) > 1 ? orgPhoneParts[1] : ''}"
name="orgPhone1"
class="org-form-input phone-number" maxlength="4">
<span class="separator">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#lists.size(orgPhoneParts) > 2 ? orgPhoneParts[2] : ''}"
name="orgPhone2"
class="org-form-input phone-number" maxlength="4">
</div>
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span>서비스명</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:field="*{portalOrg.serviceName}" class="org-form-input">
</div>
</div>
<div class="org-form-group">
<label class="org-form-label">
<span>고객센터 전화번호</span>
</label>
<div class="org-form-input-wrapper" th:with="scPhoneParts=${user.portalOrg.scPhoneNumber != null ? user.portalOrg.scPhoneNumber.split('-') : {}}">
<div class="org-compound-input">
<input type="text" th:field="*{portalOrg.scPhoneNumber}" id="scPhoneNumber"
class="org-form-input" style="display:none;">
<select class="org-form-select phone-number" id="scPhonePrefix">
<option value="">선택</option>
<option value="02" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '02'}">02</option>
<option value="031" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '031'}">031</option>
<option value="032" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '032'}">032</option>
<option value="033" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '033'}">033</option>
<option value="041" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '041'}">041</option>
<option value="042" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '042'}">042</option>
<option value="043" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '043'}">043</option>
<option value="044" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '044'}">044</option>
<option value="051" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '051'}">051</option>
<option value="052" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '052'}">052</option>
<option value="053" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '053'}">053</option>
<option value="054" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '054'}">054</option>
<option value="055" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '055'}">055</option>
<option value="061" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '061'}">061</option>
<option value="062" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '062'}">062</option>
<option value="063" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '063'}">063</option>
<option value="064" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '064'}">064</option>
<option value="070" th:selected="${#lists.size(scPhoneParts) > 0 && scPhoneParts[0] == '070'}">070</option>
</select>
<span class="separator">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#lists.size(scPhoneParts) > 1 ? scPhoneParts[1] : ''}"
name="scPhone1"
class="org-form-input phone-number" maxlength="4">
<span class="separator">-</span>
<input type="text" pattern="\d*" inputmode="numeric"
th:value="${#lists.size(scPhoneParts) > 2 ? scPhoneParts[2] : ''}"
name="scPhone2"
class="org-form-input phone-number" maxlength="4">
</div>
</div>
</div>
</div>
<!-- 법인 관리자 정보 -->
<div class="org-section-header org-section-header--agreement" style="margin-top: 48px;">
<h3>법인 관리자 정보</h3>
<span class="required-badge">필수 입력</span>
</div>
<div class="org-form-container">
<th:block th:replace="~{apps/mypage/components/commonUserInfo :: commonUserInfo}"></th:block>
</div>
<!-- Action Buttons -->
<div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="button" class="org-btn org-btn-primary">수정 적용</button>
</div>
</form>
<!-- Withdrawal Button -->
<div class="withdrawal" style="margin-top: 32px; text-align: center;">
<a style="color: #64748B; text-decoration: underline; cursor: pointer;">회원탈퇴</a>
</div>
</div>
</section>
<th:block layout:fragment="contentScript">
<script th:if="${error}" th:inline="javascript">
@@ -344,7 +259,6 @@
orgPhoneNumber: document.querySelector('#orgPhoneNumber').value,
serviceName: document.querySelector('input[name="portalOrg.serviceName"]').value,
scPhoneNumber: document.querySelector('#scPhoneNumber').value,
ipWhitelist: document.querySelector('#ipWhitelist').value
}
// 전화번호 및 입력 처리 유틸리티
@@ -518,42 +432,9 @@
scPhone1: 4,
scPhone2: 4
}
},
ipAddress: {
selectors: ['#ipRangeStart'],
pattern: /[^\d.]/g,
validate: (value) => {
const parts = value.split('.');
if (parts.length > 4) return false;
return parts.every(part => {
const num = parseInt(part);
return !isNaN(num) && num >= 0 && num <= 255;
});
}
}
};
// IP 목록 필드 업데이트 함수
function updateIpListField() {
// hidden input 필드 가져오기 또는 생성
let ipListInput = document.getElementById('ipWhitelist');
if (!ipListInput) {
ipListInput = document.createElement('input');
ipListInput.type = 'hidden';
ipListInput.id = 'ipWhitelist';
ipListInput.name = 'portalOrg.ipWhitelist';
document.getElementById('updateForm').appendChild(ipListInput);
}
// 테이블에서 IP 목록 수집
const ipList = Array.from(document.querySelectorAll('.table_min tbody tr td:nth-child(2)'))
.map(td => td.textContent.trim())
.join(',');
// hidden 필드에 값 설정
ipListInput.value = ipList;
}
// Hidden 필드 업데이트 함수
function updateHiddenFields() {
const form = document.getElementById('updateForm');
@@ -590,16 +471,16 @@
document.querySelector('[id="corpRegNo"]').value = corpRegNo;
}
// 전화번호 결합 (회사, 고객센터)
// 전화번호 결합 (회사, 고객센터) - org-form-select 사용
['org', 'sc'].forEach(type => {
const prefix = document.querySelector(`#${type}PhonePrefix .select_selected`);
const prefix = document.querySelector(`#${type}PhonePrefix`);
const phone1 = document.querySelector(`[name="${type}Phone1"]`);
const phone2 = document.querySelector(`[name="${type}Phone2"]`);
if (prefix && phone1 && phone2) {
// 하이픈을 명시적으로 추가
const phoneNumber = `${prefix.textContent}-${phone1.value}-${phone2.value}`;
if (phoneNumber) {
// select의 value 사용
const phoneNumber = `${prefix.value}-${phone1.value}-${phone2.value}`;
if (phoneNumber && prefix.value) {
document.querySelector(`[id="${type}PhoneNumber"]`).value = phoneNumber;
}
}
@@ -633,8 +514,6 @@
mobileNumberInput.value = existingNumber;
}
}
updateIpListField();
}
// 폼 정제 함수
@@ -662,89 +541,7 @@
return form;
}
// IP 추가 함수
function addIpRange() {
const ipInput = document.getElementById('ipRangeStart');
const ipValue = ipInput.value.trim();
// IP 주소 유효성 검사
const ipPattern = /^(\d{1,3}\.){3}\d{1,3}$/;
if (!ipPattern.test(ipValue)) {
customPopups.showAlert('올바른 IP 주소 형식이 아닙니다.');
return;
}
// IP 주소 범위 검사
const parts = ipValue.split('.');
const isValidRange = parts.every(part => {
const num = parseInt(part);
return num >= 0 && num <= 255;
});
if (!isValidRange) {
customPopups.showAlert('IP 주소는 0-255 범위의 숫자여야 합니다.');
return;
}
// IP 목록에 이미 있는지 확인
const existingIps = Array.from(document.querySelectorAll('.table_min tbody tr td:nth-child(2)'))
.map(td => td.textContent.trim());
if (existingIps.includes(ipValue)) {
customPopups.showAlert('이미 추가된 IP 주소입니다.');
return;
}
// 테이블에 새로운 행 추가
const tbody = document.querySelector('.table_min tbody');
const newRow = document.createElement('tr');
const currentRows = tbody.getElementsByTagName('tr');
const newRowNumber = currentRows.length + 1;
newRow.innerHTML = `
<td>${newRowNumber}</td>
<td>${ipValue}</td>
<td>
<button type="button" class="btn_del">삭제</button>
</td>
`;
tbody.appendChild(newRow);
// 새로 추가된 삭제 버튼에 이벤트 리스너 설정
newRow.querySelector('.btn_del').addEventListener('click', function () {
deleteIpRange(this);
});
// IP 입력 필드 초기화
ipInput.value = '';
// hidden 필드 업데이트
updateIpListField();
}
// IP 삭제 함수
function deleteIpRange(button) {
const row = button.closest('tr');
row.remove();
// 번호 재정렬
const rows = document.querySelectorAll('.table_min tbody tr');
rows.forEach((row, index) => {
row.querySelector('td:first-child').textContent = index + 1;
});
// hidden 필드 업데이트
updateIpListField();
}
// 삭제 버튼들에 이벤트 리스너 설정
function setupDeleteButtons() {
document.querySelectorAll('.btn_del').forEach(button => {
button.addEventListener('click', function() {
deleteIpRange(this);
});
});
}
// 숫자 입력 필드 이벤트 핸들러 설정
inputConfig.numericOnly.selectors.forEach(selector => {
document.querySelectorAll(selector).forEach(input => {
@@ -767,55 +564,16 @@
});
// IP 주소 입력 필드 이벤트 설정
const ipInput = document.getElementById('ipRangeStart');
if (ipInput) {
// IP 입력 필드 이벤트
ipInput.addEventListener('input', function(e) {
let value = e.target.value.replace(/[^\d.]/g, '');
const parts = value.split('.').slice(0, 4);
const validParts = parts.map(part => {
const num = parseInt(part);
return (!isNaN(num) && num <= 255) ? num : '';
});
e.target.value = validParts.join('.');
});
// Enter 키 입력 시 IP 추가
ipInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
addIpRange();
}
});
}
// IP 추가 버튼에 이벤트 리스너 설정
const addButton = document.querySelector('.btn_add2');
if (addButton) {
addButton.addEventListener('click', addIpRange);
}
// 전화번호 선택 이벤트
// 전화번호 선택 이벤트 (org-form-select에 대한 change 이벤트)
['org', 'sc'].forEach(type => {
const prefixSelect = document.querySelector(`#${type}PhonePrefix`);
if (prefixSelect) {
prefixSelect.addEventListener('click', updateHiddenFields);
const selectItems = prefixSelect.querySelectorAll('.select_items li');
selectItems.forEach(item => {
item.addEventListener('click', () => {
prefixSelect.querySelector('.select_selected').textContent = item.textContent;
updateHiddenFields();
});
});
prefixSelect.addEventListener('change', updateHiddenFields);
}
});
// 수정 버튼 이벤트
const submitButton = document.querySelector('.common_btn_type_1:not(.gray)');
const submitButton = document.querySelector('.org-btn-primary:not(.btn_add2)');
if (submitButton) {
submitButton.addEventListener('click', function(e) {
e.preventDefault();
@@ -833,8 +591,7 @@
orgIndustryType: document.querySelector('input[name="portalOrg.orgIndustryType"]').value,
orgPhoneNumber: document.querySelector('#orgPhoneNumber').value,
serviceName: document.querySelector('input[name="portalOrg.serviceName"]').value,
scPhoneNumber: document.querySelector('#scPhoneNumber').value,
ipWhitelist: document.querySelector('#ipWhitelist').value
scPhoneNumber: document.querySelector('#scPhoneNumber').value
};
// 변경사항 체크
@@ -911,9 +668,6 @@
return;
}
// IP 목록 업데이트
updateIpListField();
// 모든 hidden 필드 업데이트
updateHiddenFields();
@@ -934,8 +688,6 @@
});
}
// 초기 설정 실행
setupDeleteButtons();
updateHiddenFields();
initializePhoneNumbers();
});
src/main/resources/templates/views/apps/mypage/updateCorporateUser.html
+37 -37
View File
@@ -1,45 +1,45 @@
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/kbank_mypage_layout}">
layout:decorate="~{layout/kjbank_signup_layout}">
<body>
<section layout:fragment="title">
<div class="org-page-title-banner">
<img th:src="@{/img/user_register_title.png}" class="title-image">
<h1>내 정보 관리</h1>
</div>
</section>
<section layout:fragment="contentFragment" class="content">
<div class="content_wrap">
<div class="sub_title3">
<h2 class="title">내 정보 관리</h2>
</div>
<div class="inner i_cs h_inner8">
<form id="updateForm" method="post" th:action="@{/mypage/update}">
<div class="terms_box user_top">
<p>기본 정보</p>
<span class="dot">필수 입력란입니다</span>
</div>
<div class="form_type">
<div class="info1 p_top">
<p class="title w_tit">
<span>소속기관</span>
</p>
<div class="info_line p_top">
<div class="info_box1 w_inp4">
<input type="text" th:value="${user.portalOrg.orgName}" name="organization"
class="common_input_type_1" placeholder="소속기관" disabled="disabled">
</div>
</div>
</div>
<th:block th:replace="~{apps/mypage/components/commonUserInfo :: commonUserInfo}"></th:block>
</div>
<div class="form_type">
<div class="btn_application m_top">
<a class="common_btn_type_1 gray" th:href="@{/}"><span>취소</span></a>
<div class="btn_gap"></div>
<a class="common_btn_type_1 submit-btn"><span>수정 적용</span></a>
</div>
</div>
<div class="withdrawal">
<a>회원탈퇴</a>
</div>
</form>
<div class="org-register-container">
<form id="updateForm" method="post" th:action="@{/mypage/update}">
<div class="org-section-header">
<h3>기본 정보</h3>
<span class="required-badge">필수 입력</span>
</div>
<div class="org-form-container">
<div class="org-form-group">
<label class="org-form-label">
<span>소속기관</span>
</label>
<div class="org-form-input-wrapper">
<input type="text" th:value="${user.portalOrg.orgName}" name="organization"
class="org-form-input input-readonly" placeholder="소속기관" disabled="disabled">
</div>
</div>
<th:block th:replace="~{apps/mypage/components/commonUserInfo :: commonUserInfo}"></th:block>
</div>
<!-- Action Buttons -->
<div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="button" class="org-btn org-btn-primary submit-btn">수정 적용</button>
</div>
</form>
<!-- Withdrawal Button -->
<div class="withdrawal" style="margin-top: 32px; text-align: center;">
<a style="color: #64748B; text-decoration: underline; cursor: pointer;">회원탈퇴</a>
</div>
</div>
</section>
<th:block layout:fragment="contentScript">
<script th:if="${error}" th:inline="javascript">
@@ -64,7 +64,7 @@
const form = document.getElementById('updateForm');
// 수정 버튼 이벤트
const submitButton = document.querySelector('.common_btn_type_1.submit-btn');
const submitButton = document.querySelector('.org-btn-primary.submit-btn');
if (submitButton) {
submitButton.addEventListener('click', function (e) {
e.preventDefault();
src/main/resources/templates/views/apps/mypage/updatePersonalUser.html
+50 -55
View File
@@ -1,49 +1,46 @@
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/kbank_mypage_layout}">
layout:decorate="~{layout/kjbank_signup_layout}">
<body>
<section layout:fragment="title">
<div class="org-page-title-banner">
<img th:src="@{/img/user_register_title.png}" class="title-image">
<h1>내 정보 관리</h1>
</div>
</section>
<section layout:fragment="contentFragment" class="content">
<script th:src="@{/js/htmx.min.js}"></script>
<div class="content_wrap">
<div class="sub_title3">
<h2 class="title">내 정보 관리</h2>
</div>
<div class="org-register-container">
<form id="updateForm" method="post" th:action="@{/mypage/update}" th:object="${user}">
<div class="org-section-header">
<h3>기본 정보</h3>
<span class="required-badge">필수 입력</span>
</div>
<div class="inner i_cs h_inner8">
<form id="updateForm" method="post" th:action="@{/mypage/update}" th:object="${user}">
<div class="terms_box user_top">
<p>기본 정보</p>
<span class="dot">필수 입력</span>
</div>
<div class="org-form-container">
<th:block th:replace="~{apps/mypage/components/commonUserInfo :: commonUserInfo}"></th:block>
</div>
<div class="form_type">
<th:block th:replace="~{apps/mypage/components/commonUserInfo :: commonUserInfo}"></th:block>
</div>
</form>
<div class="pc-only">
<div class="btn_wrap bt_location">
<button type="button" class="btn_business">법인회원 전환</button>
</div>
</div>
<div class="m-only">
<div class="btn_wrap bt_location mt16">
<button type="button" class="btn_business business">법인회원 전환</button>
</div>
</div>
<!-- Corporate Transfer Button -->
<div class="org-info-notice" style="margin-top: 32px;">
<button type="button" class="org-btn org-btn-secondary btn_business" style="width: 100%;">
법인회원 전환
</button>
</div>
<div class="form_type">
<div class="btn_application m_top">
<a href="#" class="common_btn_type_1 gray" th:href="@{/}"><span>취소</span></a>
<div class="btn_gap"></div>
<a href="#" class="common_btn_type_1 submit-btn"><span>수정</span></a>
</div>
</div>
<input type="hidden" name="finalMobileNumber"/>
<div class="withdrawal">
<a>회원탈퇴</a>
</div>
</div>
<!-- Action Buttons -->
<div class="org-action-buttons">
<button type="button" class="org-btn org-btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
<button type="button" class="org-btn org-btn-primary submit-btn">수정</button>
</div>
</form>
<input type="hidden" name="finalMobileNumber"/>
<!-- Withdrawal Button -->
<div class="withdrawal" style="margin-top: 32px; text-align: center;">
<a style="color: #64748B; text-decoration: underline; cursor: pointer;">회원탈퇴</a>
</div>
</div>
</section>
<th:block layout:fragment="contentScript">
<script th:if="${error}" th:inline="javascript">
@@ -68,7 +65,7 @@
const form = document.getElementById('updateForm');
// 수정 버튼 이벤트
const submitButton = document.querySelector('.common_btn_type_1.submit-btn');
const submitButton = document.querySelector('.org-btn-primary.submit-btn');
if (submitButton) {
submitButton.addEventListener('click', function (e) {
e.preventDefault();
@@ -149,21 +146,19 @@
}
// 법인전환 버튼 이벤트
const businessTransferBtns = document.querySelectorAll('.btn_business');
if (businessTransferBtns.length > 0) {
businessTransferBtns.forEach(btn => {
btn.addEventListener('click', () => {
customPopups.showConfirm(
'법인 회원으로 전환하시겠습니까?',
() => {
const transferForm = document.createElement('form');
transferForm.method = 'GET';
transferForm.action = '/mypage/org-transfer';
document.body.appendChild(transferForm);
transferForm.submit();
}
);
});
const businessTransferBtn = document.querySelector('.btn_business');
if (businessTransferBtn) {
businessTransferBtn.addEventListener('click', () => {
customPopups.showConfirm(
'법인 회원으로 전환하시겠습니까?',
() => {
const transferForm = document.createElement('form');
transferForm.method = 'GET';
transferForm.action = '/mypage/org-transfer';
document.body.appendChild(transferForm);
transferForm.submit();
}
);
});
}
@@ -179,4 +174,4 @@
</script>
</th:block>
</body>
</html>
</html>
src/main/resources/templates/views/apps/register/orgUserRegister.html
-56
View File
@@ -443,62 +443,6 @@
}
}
// HTMX 이벤트 리스너 - 모든 HTMX 응답을 중앙에서 처리
document.body.addEventListener('htmx:afterRequest', function (event) {
const targetId = event.detail.target.id;
let response;
try {
response = JSON.parse(event.detail.xhr.response);
} catch (e) {
console.error('응답 JSON 파싱 실패:', e);
customPopups.showAlert('서버 응답을 처리할 수 없습니다.');
return;
}
// 비밀번호 관련 검증은 컴포넌트의 로직을 따르도록 return
if (targetId === 'password-validation' || targetId === 'password-match-validation') {
return;
}
// 나머지 요청들에 대해서만 처리
if (event.detail.xhr.getResponseHeader('X-Custom-Handler') === 'registration-validation') {
if (response && response.message) {
customPopups.showAlert(response.message);
}
return;
}
// 기존 응답 처리 로직
if (targetId === 'email-validation') {
handleEmailValidationResponse(response);
} else if (targetId === 'new-email-validation') {
handleNewEmailValidationResponse(response);
}
// 사업자등록번호와 법인등록번호에 대한 커스텀 이벤트 디스패치
if (targetId === 'compRegNo' || targetId === 'corpRegNo') {
const customEvent = new CustomEvent('htmxResponse', {
detail: {
targetId: targetId,
response: response
}
});
document.dispatchEvent(customEvent);
}
});
// 커스텀 이벤트 리스너
document.addEventListener('htmxResponse', function (event) {
const {targetId, response} = event.detail;
if (targetId === 'compRegNo') {
customPopups.showAlert(response.message || (response.valid ? '유효한 사업자등록번호입니다.' : '유효하지 않은 사업자등록번호입니다.'));
} else if (targetId === 'corpRegNo') {
customPopups.showAlert(response.message || (response.valid ? '유효한 법인등록번호입니다.' : '유효하지 않은 법인등록번호입니다.'));
}
});
// 인증 완료 이벤트 리스너
document.addEventListener('authVerified', function () {
isAuthVerified = true;
src/main/resources/templates/views/fragment/kjbank/head.html
-1
View File
@@ -46,7 +46,6 @@
<script th:src="@{/plugins/summernote/summernote-lite.min.js}"></script>
<script th:src="@{/plugins/summernote/summernote-cleaner.js}"></script>
<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script>
<script th:src="@{/js/htmx.min.js}"></script>
</head>
</html>