사용자 회원가입 수정(1)

This commit is contained in:
김현욱
2025-12-23 18:02:34 +09:00
parent 79d17e3fc2
commit c4bb58c75c
8 changed files with 797 additions and 231 deletions

View File

@@ -27,20 +27,22 @@
fn_set_header_title("회원가입");
fn_set_birthYears();
fn_set_birthMonths();
fn_show_phoneAuth();
fn_show_emailAuth();
// fn_show_phoneAuth();
fn_check_stplat();
first = 0;
$(".userForm__inputBox__alertText").hide();
fn_alert_hide($("#mbrNm"), $("#mbrNmAlert"));
fn_alert_hide($("#mbtlnb"), $("#mbtlnbAlert"));
// fn_alert_hide($("#mbtlnb"), $("#mbtlnbAlert"));
fn_alert_hide($("#email"), $("#mbrEmailAlert"));
fn_alert_hide($("#mbtlCert"), $("#mbtlCertAlert"));
fn_alert_hide($("#mbrId"), $("#mbrIdAlert"), 'id');
fn_alert_hide($("#mbrPassword"), $("#mbrPasswordAlert"), 'pw');
fn_alert_hide($("#mbrPasswordChk"), $("#mbrPasswordChkAlert"), 'pw');
fn_alert_hide($("#id"), $("#emailAlert"));
// fn_alert_hide($("#id"), $("#emailAlert"));
fn_alert_hide($('input[name="sex"]'), $("#sexAlert"));
fn_alert_hide($("#dtlAdres"), $("#postcodeAlert"));
// fn_alert_hide($("#dtlAdres"), $("#postcodeAlert"));
fn_alert_hide_selected();
$('button').on('click', function(e) {
@@ -53,17 +55,20 @@
});
$('#mbrNm').on('keydown', function(e) {
if (e.keyCode == 13) {
$('#phoneAuthBtn').click();
$('#emailAuthBtn').click();
// $('#phoneAuthBtn').click();
}
});
$('#mbtlnb').on('keydown', function(e) {
if (e.keyCode == 13) {
$('#phoneAuthBtn').click();
$('#emailAuthBtn').click();
// $('#phoneAuthBtn').click();
}
});
$('#mbtlCert').on('keydown', function(e) {
if (e.keyCode == 13) {
fn_confim_own();
fn_confim_own_email();
// fn_confim_own();
}
});
$('#mbrId').on('keydown', function(e) {
@@ -220,12 +225,12 @@
/* ********************************************************
* 우편번호 찾기
******************************************************** */
const fn_set_postcode = function(_data) {
$('#adresDv').val(_data.addressType)
$('#postcode').val(_data.postcode);
$('#address').val(_data.addressType == '01' ? _data.roadAddress : _data.jibunAddress);
}
// const fn_set_postcode = function(_data) {
//
// $('#adresDv').val(_data.addressType)
// $('#postcode').val(_data.postcode);
// $('#address').val(_data.addressType == '01' ? _data.roadAddress : _data.jibunAddress);
// }
/* ********************************************************
* 생년 콤보박스
@@ -287,11 +292,72 @@
seconds--;
} else {
fn_stop_timer();
fn_stop_email_timer();
// fn_stop_timer();
fn_alert_show('인증번호 유효시간이 만료되었습니다.');
}
}
/* ********************************************************
* 이메일 인증 번호 발송
******************************************************** */
first = 0;
mbtlCert = '';
const fn_email_sending_number = function() {
if(timerRunning){
return;
}
if(mbtlCert === $('#email').val()){
first++;
}else{
first = 0;
}
mbtlCert = $('#email').val();
let mbrNm = $('#mbrNm').val();
let mbrEmail = $('#email').val().trim();
let params = {
'mbrNm' : mbrNm,
'email': mbrEmail
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/insertEmailAuth"/>',
data : params,
success : function (Data) {
let result = JSON.parse(Data.resBody.result);
if(result.result == "success"){
if (first > 0) {
fn_alert_show('인증번호가 재발송되었습니다.');
} else if (first === 0) {
fn_alert_show('인증번호가 발송되었습니다.');
first++;
} else {
return;
}
$('#sndngInnb').val(result.sndngInnb);
}else {
fn_alert_show('인증번호 발송에 실패했습니다.');
fn_stop_email_timer();
return;
}
}
});
$('#mbrNm').attr("readonly", true);
$('#email').attr("readonly", true);
clearInterval(countdown);
seconds = 180;
fn_set_timeOut();
countdown = setInterval(fn_set_timeOut, 1000);
timerRunning = true;
}
/* ********************************************************
* 휴대폰 인증 번호 발송
******************************************************** */
@@ -352,6 +418,22 @@
timerRunning = true;
}
/* ********************************************************
* 타이머 정지 함수 (이메일)
******************************************************** */
const fn_stop_email_timer = function() {
if (timerRunning) {
clearInterval(countdown);
$('#timer').text('05:00');
$('#mbtlCert').val('');
$('#emailAuthContent').hide();
$('#mbrNm').attr("readonly", false);
$('#email').attr("readonly", false);
timerRunning = false;
}
}
/* ********************************************************
* 타이머 정지 함수
******************************************************** */
@@ -368,6 +450,51 @@
}
}
/* ********************************************************
* 이메일 인증 확인
******************************************************** */
isChkd_own_email = false;
const fn_confim_own_email = function() {
if (first <= 0) return;
let sndngInnb = $('#sndngInnb').val();
let mbrEmail = $('#email').val().trim();
let crtnb = $('#mbtlCert').val();
fn_stop_email_timer();
let params = {
'sndngInnb': sndngInnb,
'email': mbrEmail,
'crtnb' : crtnb
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/selectEmailAuth"/>',
data : params,
success : function (Data) {
let result = JSON.parse(Data.resBody.result);
if(result.result == "success"){
fn_alert_show('인증되었습니다.');
$('#emailAuthOkBtn').show();
$('#emailAuthBtn').hide();
isChkd_own_email = true;
//TODO : 메서드명 변경 필요 탈퇴회원 → 기존가입여부
fn_check_mbrwithdrawal_email();
$('#mbrNm').attr("readonly", true);
$('#email').attr("readonly", true);
}else {
fn_alert_show('인증번호가 일치하지 않습니다.');
return;
}
}
});
}
/* ********************************************************
* 휴대폰 인증 확인
******************************************************** */
@@ -413,6 +540,32 @@
}
/* ********************************************************
* 기존 가입 여부 조회 (이메일)
******************************************************** */
const fn_check_mbrwithdrawal_email = function() {
let mbrNm = $('#mbrNm').val().trim();
$('#mbrNm').val(mbrNm);
let mbrEmail = $('#email').val().trim();
let params = {
'mbrNm' : mbrNm,
'email': mbrEmail
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/selectMbrwithdrawalSearchEmail"/>',
data : params,
success : function(result) {
let mbrWithDrawalList = JSON.parse(result.resBody.result).mbrWithDrawalList;
fn_make_rejoinInforList(mbrWithDrawalList);
}
});
}
/* ********************************************************
* 기존 가입 여부 조회
******************************************************** */
@@ -473,7 +626,7 @@
snsMemberCnt = 0;
isExtMember = false;
// window.location.href = '<c:out value="${issuerUri}"/>/index';
// window.location.href = '/login';
// window.location.href = '/sopmal/login';
break;
}
}
@@ -487,7 +640,7 @@
}
});
// window.location.href = '<c:out value="${issuerUri}"/>/index';
// window.location.href = '/login';
// window.location.href = '/sopmal/login';
}
if (isExtMember) {
fn_alert_show('인증되었습니다. 인증하신 정보로 가입된 계정 정보가 있습니다. 계정정보 연동을 진행합니다.');
@@ -506,9 +659,11 @@
return;
};
if(!isChkd_own) {
$('#mbtlnb').focus();
fn_alert_show('휴대폰 인증을 해주세요.');
if(!isChkd_own_email) {
alert('이메일 인증을 해주세요.');
$('#email').focus();
// alert('휴대폰 인증을 해주세요.');
// $('#mbtlnb').focus();
fn_regist_fail();
return;
}
@@ -525,12 +680,12 @@
return;
}
if(!fn_check_email()) {
$('#id').focus();
fn_alert_show('올바른 이메일 형식이 아닙니다.');
fn_regist_fail();
return;
}
// if(!fn_check_email()) {
// $('#id').focus();
// fn_alert_show('올바른 이메일 형식이 아닙니다.');
// fn_regist_fail();
// return;
// }
if ($('#select-brthYear').val() == null || $('#select-Month').val() == null) {
document.getElementById('birthYear').scrollIntoView();
@@ -548,27 +703,27 @@
return;
}
if ($('#postcode').val().trim() == '' || $('#address').val().trim() == '') {
document.getElementById('postcodeBtn').scrollIntoView();
fn_alert_show('우편번호를 선택해 주세요.');
$("#postcodeAlert").show();
fn_regist_fail();
return;
}
// if ($('#postcode').val().trim() == '' || $('#address').val().trim() == '') {
// document.getElementById('postcodeBtn').scrollIntoView();
// fn_alert_show('우편번호를 선택해 주세요.');
// $("#postcodeAlert").show();
// fn_regist_fail();
// return;
// }
if ($('#dtlAdres').val().trim() == '') {
$('#dtlAdres').focus();
fn_alert_show('상세주소를 입력해 주세요.');
fn_regist_fail();
return;
}
// if ($('#dtlAdres').val().trim() == '') {
// $('#dtlAdres').focus();
// fn_alert_show('상세주소를 입력해 주세요.');
// fn_regist_fail();
// return;
// }
if(!confirm('회원가입을 <spring:message code="confirm.common.predicate"/>')){
fn_regist_fail();
return;
}
fn_make_brthDe();
fn_make_mbtlnb();
// fn_make_mbtlnb();
let params = $('#regForm').serialize();
$.ajax({
@@ -646,6 +801,32 @@
}
}
/* ********************************************************
* 이메일 인증 버튼 클릭시, 이메일 인증 박스 노출
******************************************************** */
const fn_show_emailAuth = function() {
let emailAuthBtn = $('#emailAuthBtn');
let emailAuthContent = $('#emailAuthContent');
emailAuthContent.hide();
emailAuthBtn.click(function () {
if(!$('#mbrNm').val()){
$('#mbrNm').focus();
fn_alert_show('이름을 입력해 주세요.');
return;
}else if(!$('#email').val()){
$('#email').focus();
fn_alert_show('이메일 주소를 입력해 주세요.');
return;
}
$('#emailAuthContent').show();
$('#mbtlCert').focus();
fn_email_sending_number();
});
}
/* ********************************************************
* 휴대폰 인증 버튼 클릭시, 휴대폰 인증 박스 노출
******************************************************** */
@@ -766,44 +947,44 @@
*******************************************************/
function initPostcodeInterface() {
// 앱 환경에서 사용할 모바일용 함수명 정의
const MOBILE_POSTCODE_FUNCTION = "fn_select_postcode_app";
// 앱 인터페이스 초기화 확인
if (window.app) {
console.log("앱 환경 감지됨, 우편번호 함수 변경");
changePostcodeFunction(MOBILE_POSTCODE_FUNCTION);
} else {
console.log("앱 인터페이스를 기다리는 중...");
let checkCount = 0;
const maxChecks = 10; // 최대 5초(500ms * 10)까지 시도
const checkInterval = setInterval(function() {
checkCount++;
if (window.app) {
clearInterval(checkInterval);
console.log("앱 인터페이스 초기화 완료, 우편번호 함수 변경");
changePostcodeFunction(MOBILE_POSTCODE_FUNCTION);
} else if (checkCount >= maxChecks) {
clearInterval(checkInterval);
console.warn("앱 인터페이스를 찾을 수 없습니다. 최대 시도 횟수 초과.");
}
}, 500);
}
// const MOBILE_POSTCODE_FUNCTION = "fn_select_postcode_app";
//
// // 앱 인터페이스 초기화 확인
// if (window.app) {
// console.log("앱 환경 감지됨, 우편번호 함수 변경");
// changePostcodeFunction(MOBILE_POSTCODE_FUNCTION);
// } else {
// console.log("앱 인터페이스를 기다리는 중...");
// let checkCount = 0;
// const maxChecks = 10; // 최대 5초(500ms * 10)까지 시도
// const checkInterval = setInterval(function() {
// checkCount++;
// if (window.app) {
// clearInterval(checkInterval);
// console.log("앱 인터페이스 초기화 완료, 우편번호 함수 변경");
// changePostcodeFunction(MOBILE_POSTCODE_FUNCTION);
// } else if (checkCount >= maxChecks) {
// clearInterval(checkInterval);
// console.warn("앱 인터페이스를 찾을 수 없습니다. 최대 시도 횟수 초과.");
// }
// }, 500);
// }
}
/*******************************************************
* 우편번호 버튼의 onclick 함수를 변경하는 함수
*******************************************************/
function changePostcodeFunction(newFunctionName) {
console.log("changePostcodeFunction 호출");
console.log("newFunctionName: " + newFunctionName);
const postcodeBtn = document.getElementById('postcodeBtn');
if (postcodeBtn) {
postcodeBtn.setAttribute('onclick', newFunctionName + '(fn_set_postcode);');
console.log('우편번호 버튼 함수가' + newFunctionName + '으로 변경되었습니다.');
} else {
console.warn('우편번호 버튼을 찾을 수 없습니다.');
}
}
// function changePostcodeFunction(newFunctionName) {
// console.log("changePostcodeFunction 호출");
// console.log("newFunctionName: " + newFunctionName);
// const postcodeBtn = document.getElementById('postcodeBtn');
// if (postcodeBtn) {
// postcodeBtn.setAttribute('onclick', newFunctionName + '(fn_set_postcode);');
// console.log('우편번호 버튼 함수가' + newFunctionName + '으로 변경되었습니다.');
// } else {
// console.warn('우편번호 버튼을 찾을 수 없습니다.');
// }
// }
// 페이지 로드 시 함수 실행
document.addEventListener('DOMContentLoaded', initPostcodeInterface);
@@ -848,25 +1029,49 @@
<input type="text" class="input-text full" name="mbrNm" id="mbrNm" title="이름" placeholder="이름을 입력해 주세요.">
<p class="userForm__inputBox__alertText" id="mbrNmAlert">이름을 입력해 주세요.</p>
</div>
<%-- <div class="userForm__inputBox__item">--%>
<%-- <div class="userForm__inputBox__itemTitle">휴대전화<span class="required-asterisk">*</span></div>--%>
<%-- <div class="inputWithBtn">--%>
<%-- <input type="text" class="input-text full number" id="mbtlnb" title="휴대폰" placeholder="휴대폰번호 입력 ('-' 없이)" oninput="fn_set_event(this, 'keyup', fn_fmt_telno)" maxlength="13">--%>
<%-- <input type="hidden" name="mbtlnb">--%>
<%-- <button type="button" class="btn md theme outline" id="phoneAuthBtn"><spring:message code="button.certification"/></button>--%>
<%-- <!-- 인증완료시 버튼 -->--%>
<%-- <button type="button" class="btn md outline" id="phoneAuthOkBtn" style="display:none;"><spring:message code="button.certificationDone"/></button>--%>
<%-- </div>--%>
<%-- <p class="userForm__inputBox__alertText" id="mbtlnbAlert">휴대폰 번호를 입력해 주세요.</p>--%>
<%-- <div class="phoneAuth" id="phoneAuthContent">--%>
<%-- <input type="hidden" id="sndngInnb">--%>
<%-- <div>--%>
<%-- <div class="inputWithBtn">--%>
<%-- <div class="inputTimer">--%>
<%-- <input type="text" class="input-text full number" id="mbtlCert" title="인증번호" placeholder="인증번호 입력" maxlength="6">--%>
<%-- <span class="inputTimer__time" id="timer">03:00</span>--%>
<%-- </div>--%>
<%-- <button type="button" class="btn md gray" onclick="fn_confim_own();"><spring:message code="button.ok"/></button>--%>
<%-- </div>--%>
<%-- <p class="userForm__inputBox__alertText" id="mbtlCertAlert">인증번호를 입력해 주세요.</p>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </div>--%>
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">휴대전화<span class="required-asterisk">*</span></div>
<div class="userForm__inputBox__itemTitle">이메일<span class="required-asterisk">*</span></div>
<div class="inputWithBtn">
<input type="text" class="input-text full number" id="mbtlnb" title="휴대폰" placeholder="휴대폰번호 입력 ('-' 없이)" oninput="fn_set_event(this, 'keyup', fn_fmt_telno)" maxlength="13">
<input type="hidden" name="mbtlnb">
<button type="button" class="btn md theme outline" id="phoneAuthBtn"><spring:message code="button.certification"/></button>
<input type="text" class="input-text full certInp" id="email" title="이메일" placeholder="이메일을 입력해주세요" maxlength="190">
<input type="hidden" name="email">
<button type="button" class="btn md theme outline" id="emailAuthBtn"><spring:message code="button.certificationEmail"/></button>
<!-- 인증완료시 버튼 -->
<button type="button" class="btn md outline" id="phoneAuthOkBtn" style="display:none;"><spring:message code="button.certificationDone"/></button>
<button type="button" class="btn md outline" id="emailAuthOkBtn" style="display:none;"><spring:message code="button.certificationDone"/></button>
</div>
<p class="userForm__inputBox__alertText" id="mbtlnbAlert">휴대폰 번호를 입력해 주세요.</p>
<div class="phoneAuth" id="phoneAuthContent">
<p class="userForm__inputBox__alertText" id="mbrEmailAlert">이메일을 입력해 주세요.</p>
<div class="emailAuth" id="emailAuthContent">
<input type="hidden" id="sndngInnb">
<div>
<div class="inputWithBtn">
<div class="inputTimer">
<input type="text" class="input-text full number" id="mbtlCert" title="인증번호" placeholder="인증번호 입력" maxlength="6">
<span class="inputTimer__time" id="timer">03:00</span>
<span class="inputTimer__time" id="timer">05:00</span>
</div>
<button type="button" class="btn md gray" onclick="fn_confim_own();"><spring:message code="button.ok"/></button>
<button type="button" class="btn md gray" onclick="fn_confim_own_email();"><spring:message code="button.ok"/></button>
</div>
<p class="userForm__inputBox__alertText" id="mbtlCertAlert">인증번호를 입력해 주세요.</p>
</div>
@@ -915,16 +1120,16 @@
<input type="password" class="input-text full" name="mbrPasswordChk" id="mbrPasswordChk" title="비밀번호 확인" placeholder="비밀번호를 한번 더 입력해주세요." maxlength="20">
<p class="userForm__inputBox__alertText" id="mbrPasswordChkAlert">비밀번호를 입력해 주세요.</p>
</div>
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">이메일<span class="required-asterisk">*</span>
<input type="hidden" name="email" value=""/>
</div>
<div class="emailInput">
<input class="input-text full" type="email" id="id" title="이메일 id" placeholder="이메일" maxlength="40">
<button class="emailInput__btn" role="button" data-micromodal-trigger="emailSelectPop" id="emailSelectBtn">직접입력</button>
</div>
<p class="userForm__inputBox__alertText" id="emailAlert">이메일을 입력해 주세요.</p>
</div>
<%-- <div class="userForm__inputBox__item">--%>
<%-- <div class="userForm__inputBox__itemTitle">이메일<span class="required-asterisk">*</span>--%>
<%-- <input type="hidden" name="email" value=""/>--%>
<%-- </div>--%>
<%-- <div class="emailInput">--%>
<%-- <input class="input-text full" type="email" id="id" title="이메일 id" placeholder="이메일" maxlength="40">--%>
<%-- <button class="emailInput__btn" role="button" data-micromodal-trigger="emailSelectPop" id="emailSelectBtn">직접입력</button>--%>
<%-- </div>--%>
<%-- <p class="userForm__inputBox__alertText" id="emailAlert">이메일을 입력해 주세요.</p>--%>
<%-- </div>--%>
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">생년월<span class="required-asterisk">*</span>
<!--<span class="misc">(등록하시면 생일 쿠폰을 드립니다)</span> -->
@@ -950,19 +1155,19 @@
</div>
<p class="userForm__inputBox__alertText" id="sexAlert">성별을 선택해 주세요.</p>
</div>
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">주소<span class="required-asterisk">*</span></div>
<div class="inputAddress">
<div class="inputAddress__postalCode">
<input type="text" class="input-text" id="postcode" name="zip" title="우편번호" placeholder="우편번호" readonly>
<button type="button" id="postcodeBtn" class="btn md theme outline" onclick="fn_select_postcode(fn_set_postcode);"><spring:message code="button.zipcode"/></button>
</div>
<input type="text" class="input-text full" id="address" name="lnbAdres" title="주소" placeholder="주소" readonly>
<input type="text" class="input-text full" id="dtlAdres" name="dtlAdres" title="상세주소" placeholder="나머지 주소를 입력해 주세요.">
<input type="hidden" id="adresDv" name="adresDv">
</div>
<p class="userForm__inputBox__alertText" id="postcodeAlert">주소를 입력해 주세요.</p>
</div>
<%-- <div class="userForm__inputBox__item">--%>
<%-- <div class="userForm__inputBox__itemTitle">주소<span class="required-asterisk">*</span></div>--%>
<%-- <div class="inputAddress">--%>
<%-- <div class="inputAddress__postalCode">--%>
<%-- <input type="text" class="input-text" id="postcode" name="zip" title="우편번호" placeholder="우편번호" readonly>--%>
<%-- <button type="button" id="postcodeBtn" class="btn md theme outline" onclick="fn_select_postcode(fn_set_postcode);"><spring:message code="button.zipcode"/></button>--%>
<%-- </div>--%>
<%-- <input type="text" class="input-text full" id="address" name="lnbAdres" title="주소" placeholder="주소" readonly>--%>
<%-- <input type="text" class="input-text full" id="dtlAdres" name="dtlAdres" title="상세주소" placeholder="나머지 주소를 입력해 주세요.">--%>
<%-- <input type="hidden" id="adresDv" name="adresDv">--%>
<%-- </div>--%>
<%-- <p class="userForm__inputBox__alertText" id="postcodeAlert">주소를 입력해 주세요.</p>--%>
<%-- </div>--%>
</div>
<div class="bottomBtnControls">
<button id="registBtn" class="btn lg full theme" onclick="fn_regist_member();">회원가입</button>