|
|
@@ -34,122 +34,92 @@
|
|
|
<h2 class="title">회원정보 입력</h2>
|
|
|
</div>
|
|
|
<div class="inner">
|
|
|
-
|
|
|
- <form class="form_wrap form_full" role="form">
|
|
|
- <div class="form_head">
|
|
|
- <h2 class="title sr-only">회원정보 입력</h2>
|
|
|
+ <form id="joinForm" name="joinForm" class="form_wrap form_full" role="form">
|
|
|
+ <div class="form_head">
|
|
|
+ <h2 class="title sr-only">회원정보 입력</h2>
|
|
|
+ </div>
|
|
|
+ <!-- 아이디 사용가능시 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <label class="input_label sr-only">아이디</label>
|
|
|
+ <div class="input_wrap form_full">
|
|
|
+ <input type="text" id="custId" name="custId" placeholder="아이디" class="form_control" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디" minlength="4" maxlength="12"/>
|
|
|
+ <span class="usable" style="display:block;"></span>
|
|
|
</div>
|
|
|
- <!-- 아이디 사용가능시 -->
|
|
|
- <div class="form_field">
|
|
|
- <label class="input_label sr-only">아이디</label>
|
|
|
- <div class="input_wrap form_full">
|
|
|
- <input type="text" id="custId" name="custId" placeholder="아이디" class="form_control" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디" minlength="4" maxlength="12"/>
|
|
|
- <span class="usable" style="display:block;"></span>
|
|
|
- </div>
|
|
|
- <div id="dupCustIdDiv" class="help_block hide">
|
|
|
- <p class="t_err">이미 가입된 아이디입니다.다른 아이디를 입력하여 주세요.</p>
|
|
|
- </div>
|
|
|
+ <div id="dupCustIdDiv" class="help_block hide">
|
|
|
+ <p class="t_err">이미 가입된 아이디입니다.다른 아이디를 입력하여 주세요.</p>
|
|
|
</div>
|
|
|
- <!-- //아이디 사용가능시 -->
|
|
|
- <!-- 오류시 부모 div에서 제어 -->
|
|
|
- <div class="form_field">
|
|
|
- <label class="input_label sr-only">비밀번호</label>
|
|
|
- <div class="input_wrap form_full">
|
|
|
- <input type="password" id="passwd" name="passwd" placeholder="비밀번호 (8~20자 영문, 숫자, 특수문자 중 2가지 이상 조합)" class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="비밀번호"/><!-- 잘못기입된 경우 class "err" 추가 -->
|
|
|
- <!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
|
|
|
- <div class="help_block">
|
|
|
- <!-- 사용불가 비밀번호일경우 -->
|
|
|
- <p class="mt10">
|
|
|
- <span id="firstFailed" class="c_gray">
|
|
|
- <i class="ico ico_check gray mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br>
|
|
|
- </span>
|
|
|
- <span id="secondFailed" class="c_gray">
|
|
|
- <i class="ico ico_check gray mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외<br>
|
|
|
- </span>
|
|
|
- <span id="thirdFailed" class="c_gray">
|
|
|
- <i class="ico ico_check gray mr5"></i>아이디 제외
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <!-- //사용불가 비밀번호일경우 -->
|
|
|
- <!-- 사용가능한 비밀번호일경우 -->
|
|
|
- <p id="avlPwd" class="mt10 hide">
|
|
|
- <span class="c_black2">
|
|
|
- <i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <!-- //사용가능한 비밀번호일경우 -->
|
|
|
- </div>
|
|
|
- <!-- //case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- //오류시 부모 div에서 제어 -->
|
|
|
- <div class="form_field">
|
|
|
- <label class="input_label sr-only">비밀번호 확인</label>
|
|
|
- <div class="input_wrap form_full">
|
|
|
- <input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인" class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="비밀번호"/><!-- 잘못기입된 경우 class "err" 추가 -->
|
|
|
- <!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
|
|
|
- <div class="help_block">
|
|
|
- <!-- 비밀번호확인 틀렸을경우 -->
|
|
|
- <p id="misPwd" class="t_err hide">
|
|
|
- 비밀번호가 일치하지 않습니다.
|
|
|
- </p>
|
|
|
- <!-- //비밀번호확인 틀렸을경우 -->
|
|
|
- <!-- 비밀번호 일치할경우 -->
|
|
|
- <p id="avlConPwd" class="mt10 hide">
|
|
|
- <span class="c_black2">
|
|
|
- <i class="ico ico_check black mr5"></i>비밀번호가 일치합니다.
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <!-- //비밀번호 일치할경우 -->
|
|
|
- </div>
|
|
|
- <!-- //case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
|
|
|
+ </div>
|
|
|
+ <!-- //아이디 사용가능시 -->
|
|
|
+ <!-- 오류시 부모 div에서 제어 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <label class="input_label sr-only">비밀번호</label>
|
|
|
+ <div class="input_wrap form_full">
|
|
|
+ <input type="password" id="passwd" name="passwd" placeholder="비밀번호 (8~20자 영문, 숫자, 특수문자 중 2가지 이상 조합)" class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="비밀번호"/><!-- 잘못기입된 경우 class "err" 추가 -->
|
|
|
+ <!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
|
|
|
+ <div class="help_block">
|
|
|
+ <!-- 사용불가 비밀번호일경우 -->
|
|
|
+ <p class="mt10">
|
|
|
+ <span id="firstFailed" class="c_gray">
|
|
|
+ <i class="ico ico_check gray mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br>
|
|
|
+ </span>
|
|
|
+ <span id="secondFailed" class="c_gray">
|
|
|
+ <i class="ico ico_check gray mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외<br>
|
|
|
+ </span>
|
|
|
+ <span id="thirdFailed" class="c_gray">
|
|
|
+ <i class="ico ico_check gray mr5"></i>아이디 제외
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <!-- //사용불가 비밀번호일경우 -->
|
|
|
+ <!-- 사용가능한 비밀번호일경우 -->
|
|
|
+ <p id="avlPwd" class="mt10 hide">
|
|
|
+ <span class="c_black2">
|
|
|
+ <i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <!-- //사용가능한 비밀번호일경우 -->
|
|
|
</div>
|
|
|
+ <!-- //case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
|
|
|
</div>
|
|
|
- <div class="form_field">
|
|
|
- <label class="input_label sr-only">이메일</label>
|
|
|
- <div class="input_wrap form_full">
|
|
|
- <input type="text" id="email" name="email" placeholder="이메일" class="form_control" required="required" data-valid-name="이메일" maxlength="30"/><!-- 잘못기입된 경우 class "err" 추가 -->
|
|
|
- <!-- case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
|
|
|
- <div class="help_block">
|
|
|
- <!-- 이메일 형식이 바르지않을경우 -->
|
|
|
- <p id="failEmail" class="t_err hide">
|
|
|
- 이메일 형식이 올바르지 않습니다.
|
|
|
- </p>
|
|
|
- <!-- //이메일 형식이 바르지않을경우 -->
|
|
|
- <!-- 이미 가입되어있는 이메일인경우 -->
|
|
|
- <p id="dupEmail" class="t_err hide">
|
|
|
- 이미 가입된 이메일 주소입니다. 다른 이메일 주소를 입력하여 주세요.
|
|
|
- </p>
|
|
|
- <div id="dupEmailDiv" class="mt20 hide">
|
|
|
- <button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_LOGIN);">
|
|
|
- <span>로그인</span>
|
|
|
- </button>
|
|
|
- <button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
|
|
|
- <span>아이디 찾기</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <!-- //이미 가입되어있는 이메일인경우 -->
|
|
|
- </div>
|
|
|
- <!-- //case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
|
|
|
+ </div>
|
|
|
+ <!-- //오류시 부모 div에서 제어 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <label class="input_label sr-only">비밀번호 확인</label>
|
|
|
+ <div class="input_wrap form_full">
|
|
|
+ <input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인" class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="비밀번호"/><!-- 잘못기입된 경우 class "err" 추가 -->
|
|
|
+ <!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
|
|
|
+ <div class="help_block">
|
|
|
+ <!-- 비밀번호확인 틀렸을경우 -->
|
|
|
+ <p id="misPwd" class="t_err hide">
|
|
|
+ 비밀번호가 일치하지 않습니다.
|
|
|
+ </p>
|
|
|
+ <!-- //비밀번호확인 틀렸을경우 -->
|
|
|
+ <!-- 비밀번호 일치할경우 -->
|
|
|
+ <p id="avlConPwd" class="mt10 hide">
|
|
|
+ <span class="c_black2">
|
|
|
+ <i class="ico ico_check black mr5"></i>비밀번호가 일치합니다.
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <!-- //비밀번호 일치할경우 -->
|
|
|
</div>
|
|
|
+ <!-- //case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
|
|
|
</div>
|
|
|
- <!-- 210415_수정 : 휴대폰 인증 수정 -->
|
|
|
- <div class="form_field">
|
|
|
- <label class="input_label sr-only">휴대폰번호</label>
|
|
|
- <!-- 휴대폰 인증 입력 전 -->
|
|
|
- <div class="input_wrap form_full">
|
|
|
- <input type="text" id="cellPhnno" name="cellPhnno" placeholder="휴대폰 인증 해주세요." class="form_control" minlength="10" maxlength="11" required="required" data-valid-type="numeric" data-valid-name="휴대폰" readonly="readonly"/>
|
|
|
- <button type="button" id="btnCellPhoneCertify" class="btn btn_dark btn_hp_certi">
|
|
|
- <span>본인인증</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <!-- //휴대폰 인증 입력 전 -->
|
|
|
-
|
|
|
- <!-- case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <label class="input_label sr-only">이메일</label>
|
|
|
+ <div class="input_wrap form_full">
|
|
|
+ <input type="text" id="email" name="email" placeholder="이메일" class="form_control" required="required" data-valid-name="이메일" maxlength="30"/><!-- 잘못기입된 경우 class "err" 추가 -->
|
|
|
+ <!-- case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
|
|
|
<div class="help_block">
|
|
|
- <p id="failPhnno" class="t_err hide">휴대폰번호를 형식에 맞게 정확히 입력해주세요</p>
|
|
|
- <p id="dupPhnno" class="t_err hide">I***D로 가입된 핸드폰 번호 입니다.</p>
|
|
|
- <div id="dupPhnnoDiv" class="mt20 hide">
|
|
|
+ <!-- 이메일 형식이 바르지않을경우 -->
|
|
|
+ <p id="failEmail" class="t_err hide">
|
|
|
+ 이메일 형식이 올바르지 않습니다.
|
|
|
+ </p>
|
|
|
+ <!-- //이메일 형식이 바르지않을경우 -->
|
|
|
+ <!-- 이미 가입되어있는 이메일인경우 -->
|
|
|
+ <p id="dupEmail" class="t_err hide">
|
|
|
+ 이미 가입된 이메일 주소입니다. 다른 이메일 주소를 입력하여 주세요.
|
|
|
+ </p>
|
|
|
+ <div id="dupEmailDiv" class="mt20 hide">
|
|
|
<button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_LOGIN);">
|
|
|
<span>로그인</span>
|
|
|
</button>
|
|
|
@@ -157,27 +127,55 @@
|
|
|
<span>아이디 찾기</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
+ <!-- //이미 가입되어있는 이메일인경우 -->
|
|
|
</div>
|
|
|
+ <!-- //case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
|
|
|
</div>
|
|
|
- <div class="btn_group_flex">
|
|
|
- <div>
|
|
|
- <button type="button" id="btnJoin" class="btn btn_primary btn_block" disabled="disabled">
|
|
|
- <span>동의하고 가입하기</span>
|
|
|
+ </div>
|
|
|
+ <!-- 210415_수정 : 휴대폰 인증 수정 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <label class="input_label sr-only">휴대폰번호</label>
|
|
|
+ <!-- 휴대폰 인증 입력 전 -->
|
|
|
+ <div class="input_wrap form_full">
|
|
|
+ <input type="text" id="cellPhnno" name="cellPhnno" placeholder="휴대폰 인증 해주세요." class="form_control" minlength="10" maxlength="11" required="required" data-valid-type="numeric" data-valid-name="휴대폰" readonly="readonly"/>
|
|
|
+ <button type="button" id="btnCellPhoneCertify" class="btn btn_dark btn_hp_certi">
|
|
|
+ <span>본인인증</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <!-- //휴대폰 인증 입력 전 -->
|
|
|
+
|
|
|
+ <!-- case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
|
|
|
+ <div class="help_block">
|
|
|
+ <p id="failPhnno" class="t_err hide">휴대폰번호를 형식에 맞게 정확히 입력해주세요</p>
|
|
|
+ <p id="dupPhnno" class="t_err hide">I***D로 가입된 핸드폰 번호 입니다.</p>
|
|
|
+ <div id="dupPhnnoDiv" class="mt20 hide">
|
|
|
+ <button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_LOGIN);">
|
|
|
+ <span>로그인</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
|
|
|
+ <span>아이디 찾기</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- //210415_수정 : 버튼 형식 변경. -->
|
|
|
- <div class="desc_wrap t_c mt20">
|
|
|
- <p>
|
|
|
- 본인은 만 14세 이상이며 <a href="javascript:void(0)" onclick="cfnUseTermsLayer();">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>,<br>
|
|
|
- <a href="javascript:void(0)" onclick="cfnPrivacyPolicyLayer();">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,
|
|
|
- <a href="javascript:void(0)" onclick="cfnPrivacyTrustLayer();">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a><br>
|
|
|
- 내용을 확인 하였으며,동의합니다.
|
|
|
- </p>
|
|
|
+ </div>
|
|
|
+ <div class="btn_group_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" id="btnJoin" class="btn btn_primary btn_block" disabled="disabled">
|
|
|
+ <span>동의하고 가입하기</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </form>
|
|
|
+ </div>
|
|
|
+ <!-- //210415_수정 : 버튼 형식 변경. -->
|
|
|
+ <div class="desc_wrap t_c mt20">
|
|
|
+ <p>
|
|
|
+ 본인은 만 14세 이상이며 <a href="javascript:void(0)" onclick="cfnUseTermsLayer();">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>,<br>
|
|
|
+ <a href="javascript:void(0)" onclick="cfnPrivacyPolicyLayer();">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,
|
|
|
+ <a href="javascript:void(0)" onclick="cfnPrivacyTrustLayer();">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a><br>
|
|
|
+ 내용을 확인 하였으며,동의합니다.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
</div>
|
|
|
-
|
|
|
</section>
|
|
|
<!-- ★ 컨텐츠 종료 -->
|
|
|
</main>
|
|
|
@@ -185,7 +183,11 @@
|
|
|
<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
|
|
|
<script th:inline="javascript">
|
|
|
/*<![CDATA[*/
|
|
|
-let custIdCheck = false;
|
|
|
+ const sEncData = [[${sEncData}]]; //인증 후 해당 페이지로 리다이렉트함
|
|
|
+ const authMethod = [[${authMethod}]]; //인증 후 해당 페이지로 리다이렉트함
|
|
|
+ let custParams = [[${custParams}]];
|
|
|
+
|
|
|
+ let custIdCheck = false;
|
|
|
let passwdCheck = false;
|
|
|
let emailCheck = false;
|
|
|
let authCheck = false;
|
|
|
@@ -324,6 +326,12 @@ let custIdCheck = false;
|
|
|
// 이메일 확인
|
|
|
$('#email').on('blur', function () {
|
|
|
const $failEmail = $('#failEmail');
|
|
|
+ const $dupEmail = $('#dupEmail');
|
|
|
+ const $dupEmailDiv = $('#dupEmailDiv');
|
|
|
+ $failEmail.hide();
|
|
|
+ $dupEmail.hide();
|
|
|
+ $dupEmailDiv.hide();
|
|
|
+
|
|
|
let email = $(this).val();
|
|
|
let validation;
|
|
|
|
|
|
@@ -363,7 +371,9 @@ let custIdCheck = false;
|
|
|
|
|
|
//휴대폰 인증
|
|
|
$('#btnCellPhoneCertify').on('click', function () {
|
|
|
- cfnOpenCellphoneCertify();
|
|
|
+ let joinForm = $('#joinForm').serializeObject();
|
|
|
+ let custParams = joinForm.custId +','+ joinForm.passwd +','+ joinForm.confirmPassword +','+ joinForm.email;
|
|
|
+ cfnOpenCellphoneCertify(_PAGE_CUSTOMER_JOIN, custParams);
|
|
|
});
|
|
|
|
|
|
// 나이스 본인인증 후 콜백
|
|
|
@@ -432,6 +442,49 @@ let custIdCheck = false;
|
|
|
$btnJoin.attr('disabled', true);
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
+ // 본인인증 후 데이터 입력 값 셋팅
|
|
|
+ var fnDataSet = function (custParams) {
|
|
|
+ const $custId = $('#joinForm input[name=custId]');
|
|
|
+ const $passwd = $('#joinForm input[name=passwd]');
|
|
|
+ const $confirmPassword = $('#joinForm input[name=confirmPassword]');
|
|
|
+ const $email = $('#joinForm input[name=email]');
|
|
|
+
|
|
|
+ let arrayParams = custParams.split(',');
|
|
|
+ //[0]아이디/[1]비밀번호/[2]비밀번호확인/[3]이메일
|
|
|
+ let custId = arrayParams[0];
|
|
|
+ let passwd = arrayParams[1];
|
|
|
+ let confirmPassword = arrayParams[2];
|
|
|
+ let email = arrayParams[3];
|
|
|
+
|
|
|
+ // console.log(arrayParams);
|
|
|
+ if (!gagajf.isNull(custId)) {
|
|
|
+ $custId.val(custId);
|
|
|
+ $custId.trigger('blur');
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(passwd)) {
|
|
|
+ $passwd.val(passwd);
|
|
|
+ $passwd.trigger('blur');
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(confirmPassword)) {
|
|
|
+ $confirmPassword.val(confirmPassword);
|
|
|
+ $confirmPassword.trigger('blur');
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(email)) {
|
|
|
+ $email.val(email);
|
|
|
+ $email.trigger('blur');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ if (!gagajf.isNull(custParams)) {
|
|
|
+ fnDataSet(custParams);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(sEncData)) {
|
|
|
+ fnNiceCallBack(sEncData, authMethod);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
/*]]>*/
|
|
|
</script>
|
|
|
</th:block>
|