|
|
@@ -0,0 +1,439 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org"
|
|
|
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
+ layout:decorator="mob/common/layout/LoginLayoutMob">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : JoinTypeFormMob.html
|
|
|
+ * @desc : 회원정보 입력 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2021 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.04.16 jsshin 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+<th:block layout:fragment="content">
|
|
|
+<style>
|
|
|
+ .show{display:block}
|
|
|
+ .hide{display:none}
|
|
|
+</style>
|
|
|
+<main class="container mb">
|
|
|
+ <!-- ★ 컨텐츠 시작 -->
|
|
|
+ <section class="content mb_join_2">
|
|
|
+ <div class="inner">
|
|
|
+ <div class="close">
|
|
|
+ <a href="javascript:void(0)" class="btn_close" onclick="cfnGoToPage(_PAGE_MAIN);"><span></span><span></span></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inner">
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ <!-- //아이디 사용가능시 -->
|
|
|
+ <!-- 오류시 부모 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="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>
|
|
|
+ <!-- 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>
|
|
|
+ </div>
|
|
|
+ <div class="btn_group_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" id="btnJoin" class="btn btn_primary btn_block" disabled="disabled">
|
|
|
+ <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>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </section>
|
|
|
+ <!-- ★ 컨텐츠 종료 -->
|
|
|
+</main>
|
|
|
+
|
|
|
+<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;
|
|
|
+ let passwdCheck = false;
|
|
|
+ let emailCheck = false;
|
|
|
+ let authCheck = false;
|
|
|
+
|
|
|
+ // 아이디 확인
|
|
|
+ $('#custId').on('blur', function () {
|
|
|
+ let custId = $(this).val();
|
|
|
+ if(!gagajf.isNull(custId)) {
|
|
|
+ if (custId.length > 3) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.custId = custId;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/join/id/check', jsonData, fnIdConfirmCallBack);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 아이디 결과
|
|
|
+ var fnIdConfirmCallBack = function (result) {
|
|
|
+ const $dupCustIdDiv = $('#dupCustIdDiv');
|
|
|
+ const $custId = $('#custId');
|
|
|
+ const $usable = $('span > .usable');
|
|
|
+
|
|
|
+ if (result.isFind) { // 중복된 아이디가 존재
|
|
|
+ $custId.addClass('err');
|
|
|
+ $custId.removeClass('usable');
|
|
|
+ $dupCustIdDiv.show();
|
|
|
+ $usable.hide();
|
|
|
+ custIdCheck = false;
|
|
|
+ } else {
|
|
|
+ $custId.removeClass('err');
|
|
|
+ $custId.addClass('usable');
|
|
|
+ $dupCustIdDiv.hide();
|
|
|
+ $usable.show();
|
|
|
+ custIdCheck = true;
|
|
|
+ }
|
|
|
+ fnPossibleJoin();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 비밀번호 입력
|
|
|
+ $('#joinForm input[name=passwd]').on('focusout keyup keydown', function () {
|
|
|
+ fnCheckPassword();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 비밀번호 확인 입력
|
|
|
+ $('#joinForm input[name=confirmPassword]').on('focusout keyup keydown', function () {
|
|
|
+ fnCheckConfirmPassword();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 비밀번호 확인
|
|
|
+ var fnCheckPassword = function () {
|
|
|
+ const $firstFailed = $('#firstFailed');
|
|
|
+ const $secondFailed = $('#secondFailed');
|
|
|
+ const $thirdFailed = $('#thirdFailed');
|
|
|
+ const $avlPwd = $('#avlPwd');
|
|
|
+ const red = 'c_red2';
|
|
|
+ const gray = 'c_gray';
|
|
|
+
|
|
|
+ let custId = $('#joinForm input[name=custId]').val();
|
|
|
+ let password = $('#joinForm input[name=passwd]').val();
|
|
|
+ let confirmPassword = $('#joinForm input[name=confirmPassword]').val();
|
|
|
+ let pwdCheck = true;
|
|
|
+
|
|
|
+
|
|
|
+ // 영문, 숫자, 특수문자 2종 이상 혼용 || 길이
|
|
|
+ if (fnValidtaionPwdMixedWord(password) || fnValidationPwdLength(password)) {
|
|
|
+ pwdCheck = false;
|
|
|
+ $firstFailed.removeClass(gray);
|
|
|
+ $firstFailed.addClass(red);
|
|
|
+ } else {
|
|
|
+ $firstFailed.removeClass(red);
|
|
|
+ $firstFailed.addClass(gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 동일한 문자/숫자 4자이상 || 연속된 문자가 4자이상
|
|
|
+ if (fnValidationPwdSameWord(password) || fnValidtaionPwdCntnsWord(password)) {
|
|
|
+ pwdCheck = false;
|
|
|
+ $secondFailed.removeClass(gray);
|
|
|
+ $secondFailed.addClass(red);
|
|
|
+ } else {
|
|
|
+ $secondFailed.removeClass(red);
|
|
|
+ $secondFailed.addClass(gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 아이디 포함
|
|
|
+ if (!gagajf.isNull(custId)) {
|
|
|
+ if (fnValidationPwdSameId(password, custId)) {
|
|
|
+ pwdCheck = false;
|
|
|
+ $thirdFailed.removeClass(gray);
|
|
|
+ $thirdFailed.addClass(red);
|
|
|
+ } else {
|
|
|
+ $thirdFailed.removeClass(red);
|
|
|
+ $thirdFailed.addClass(gray);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (pwdCheck) {
|
|
|
+ $firstFailed.hide();
|
|
|
+ $secondFailed.hide();
|
|
|
+ $thirdFailed.hide();
|
|
|
+ $avlPwd.show();
|
|
|
+ } else {
|
|
|
+ $firstFailed.show();
|
|
|
+ $secondFailed.show();
|
|
|
+ $thirdFailed.show();
|
|
|
+ $avlPwd.hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!gagajf.isNull(confirmPassword)) {
|
|
|
+ fnCheckConfirmPassword();
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ // 비밀번호 확인
|
|
|
+ var fnCheckConfirmPassword = function () {
|
|
|
+ const $misPwd = $('#misPwd');
|
|
|
+ const $avlConPwd = $('#avlConPwd');
|
|
|
+ let password = $('#joinForm input[name=passwd]').val();
|
|
|
+ let confirmPassword = $('#joinForm input[name=confirmPassword]').val();
|
|
|
+ let sameConfirmPwd = fnValidationPwdSameConfirmPwd(password, confirmPassword);
|
|
|
+
|
|
|
+ if (sameConfirmPwd) {
|
|
|
+ $avlConPwd.show();
|
|
|
+ $misPwd.hide()
|
|
|
+ passwdCheck = true;
|
|
|
+ } else {
|
|
|
+ $misPwd.show();
|
|
|
+ $avlConPwd.hide();
|
|
|
+ passwdCheck = false;
|
|
|
+ }
|
|
|
+ fnPossibleJoin();
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ // 이메일 확인
|
|
|
+ $('#email').on('blur', function () {
|
|
|
+ const $failEmail = $('#failEmail');
|
|
|
+ let email = $(this).val();
|
|
|
+ let validation;
|
|
|
+
|
|
|
+ if(!gagajf.isNull(email)) {
|
|
|
+ if (!fnCheckValidationEmail(email)) {
|
|
|
+ $failEmail.show();
|
|
|
+ emailCheck = false;
|
|
|
+ validation = false;
|
|
|
+ } else {
|
|
|
+ validation = true;
|
|
|
+ $failEmail.hide();
|
|
|
+ }
|
|
|
+ if (validation) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.email = email;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/email/check', jsonData, fnEmailConfirmCallBack);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 이메일 확인 결과
|
|
|
+ var fnEmailConfirmCallBack = function (result) {
|
|
|
+ const $dupEmail = $('#dupEmail');
|
|
|
+ const $dupEmailDiv = $('#dupEmailDiv');
|
|
|
+ if (result.isFind) { // 중복된 아이디가 존재
|
|
|
+ $dupEmail.show();
|
|
|
+ $dupEmailDiv.show();
|
|
|
+ emailCheck = false;
|
|
|
+ } else {
|
|
|
+ $dupEmail.hide();
|
|
|
+ $dupEmailDiv.hide();
|
|
|
+ emailCheck = true;
|
|
|
+ }
|
|
|
+ fnPossibleJoin();
|
|
|
+ };
|
|
|
+
|
|
|
+ //휴대폰 인증
|
|
|
+ $('#btnCellPhoneCertify').on('click', function () {
|
|
|
+ cfnOpenCellphoneCertify();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 나이스 본인인증 후 콜백
|
|
|
+ var fnNiceCallBack = function(encData) {
|
|
|
+ if (!gagajf.isNull(encData)) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.encData = encData;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/authentication/check', jsonData, fnInfoConfirmCallBack);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 본인인증 후 결과
|
|
|
+ var fnInfoConfirmCallBack = function (result) {
|
|
|
+ const $cellPhnno = $('#cellPhnno');
|
|
|
+ const $dupPhnno = $('#dupPhnno');
|
|
|
+ const $dupPhnnoDiv = $('#dupPhnnoDiv');
|
|
|
+ const $btnCellPhoneCertify = $('#btnCellPhoneCertify');
|
|
|
+ $cellPhnno.val(result.cellPhnno);
|
|
|
+
|
|
|
+ if (result.isFind) { // 가입된 고객 정보가 있으면
|
|
|
+ let msg = '';
|
|
|
+ if (result.custStat === 'G104_30') {
|
|
|
+ msg = "탈퇴한 회원입니다. 탈퇴 후 60일 동안 재가입이 불가능합니다.";
|
|
|
+ } else {
|
|
|
+ msg = result.maskingCustId+"로 가입된 이력이 있습니다.";
|
|
|
+ }
|
|
|
+ $dupPhnno.html(msg);
|
|
|
+ $dupPhnno.show();
|
|
|
+ $dupPhnnoDiv.show();
|
|
|
+ authCheck = false;
|
|
|
+ } else {
|
|
|
+ $dupPhnno.hide();
|
|
|
+ $dupPhnnoDiv.hide();
|
|
|
+ authCheck = true;
|
|
|
+ }
|
|
|
+ $btnCellPhoneCertify.find('span').text('인증완료');
|
|
|
+ $btnCellPhoneCertify.attr('disabled', true);
|
|
|
+ fnPossibleJoin();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 저장
|
|
|
+ $('#btnJoin').on('click', function () {
|
|
|
+ mcxDialog.confirm("회원가입을 하시겠습니까?", {
|
|
|
+ cancelBtnText: "취소",
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $('#btnJoin').attr('disabled', true);
|
|
|
+ let jsonData = JSON.stringify($('#joinForm').serializeObject());
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/join/save', jsonData, fnJoinSaveCallback);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ var fnJoinSaveCallback = function (result) {
|
|
|
+ cfnGoToPage(_PAGE_CUSTOMER_JOIN_COMPLETE);
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ // 가입 가능한지 확인
|
|
|
+ var fnPossibleJoin = function () {
|
|
|
+ const $btnJoin = $('#btnJoin');
|
|
|
+ if (custIdCheck && passwdCheck && emailCheck && authCheck ) {
|
|
|
+ $btnJoin.attr('disabled', false);
|
|
|
+ } else {
|
|
|
+ $btnJoin.attr('disabled', true);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ /*]]>*/
|
|
|
+</script>
|
|
|
+</th:block>
|
|
|
+</body>
|
|
|
+</html>
|
jsshin