|
|
@@ -0,0 +1,245 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org"
|
|
|
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
+ layout:decorator="web/common/layout/DefaultLayoutWeb">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : SnsJoinFormWeb.html
|
|
|
+ * @desc : 회원정보 입력 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2021 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.02.05 jsshin 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+<th:block layout:fragment="content">
|
|
|
+<style>
|
|
|
+ .hide{display:none}
|
|
|
+</style>
|
|
|
+<div id="container" class="container mb">
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="content join2"> <!-- 페이지특정 클래스 = join1 -->
|
|
|
+ <div class="cont_head">
|
|
|
+ <h4>회원정보 입력</h4>
|
|
|
+ </div>
|
|
|
+ <div class="cont_body">
|
|
|
+ <!-- form start -->
|
|
|
+ <form id="joinForm" name="joinForm" class="form_wrap form_col_c form_full" role="form">
|
|
|
+ <div class="form_field">
|
|
|
+ <label class="input_label sr-only">이메일</label>
|
|
|
+ <div class="input_wrap form_full">
|
|
|
+ <input type="text" id="email" name="email" th:value="${custSnsInfo.email}" placeholder="이메일" class="form_control" required="required" data-valid-name="이메일" maxlength="30" autocomplete="no" autocapitalize="no"/><!-- 잘못기입된 경우 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" onclick="cfnGoToPage(_PAGE_LOGIN);">
|
|
|
+ <span>로그인</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="btn btn_default btn_sm" 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="ui_row">
|
|
|
+ <div class="ui_col_9">
|
|
|
+ <div class="input_wrap">
|
|
|
+ <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"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ui_col_3">
|
|
|
+ <button type="button" id="btnCellPhoneCertify" class="btn btn_dark btn_block">
|
|
|
+ <span>본인인증</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </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" onclick="cfnGoToPage(_PAGE_LOGIN);">
|
|
|
+ <span>로그인</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
|
|
|
+ <span>아이디 찾기</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <!-- //이미 가입되어있는 핸드폰번호일경우 -->
|
|
|
+ </div>
|
|
|
+ <!-- //case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
|
|
|
+ </div>
|
|
|
+ <div class="mt40">
|
|
|
+ <button type="button" id="btnJoin" class="btn btn_primary btn_block" disabled="disabled">
|
|
|
+ <span>동의하고 가입하기</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
+ , <a href="javascript:void(0)" onclick="cfnPrivacyPolicyLayer();">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,<br>
|
|
|
+ <a href="javascript:void(0)" onclick="cfnPrivacyTrustLayer();">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a> 내용을 확인 하였으며,동의합니다.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <input type="hidden" name="snsId" th:value="${custSnsInfo.snsId}"/>
|
|
|
+ <input type="hidden" name="snsType" th:value="${custSnsInfo.snsType}"/>
|
|
|
+ <input type="hidden" name="ci" th:value="${custSnsInfo.ci}"/>
|
|
|
+ <input type="hidden" name="memNo" th:value="${custSnsInfo.memNo}"/>
|
|
|
+ </form>
|
|
|
+ <!-- form End -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
|
|
|
+<script th:inline="javascript">
|
|
|
+/*<![CDATA[*/
|
|
|
+ let emailCheck = false;
|
|
|
+ let authCheck = false;
|
|
|
+
|
|
|
+ // 이메일 확인
|
|
|
+ $('#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/sns/join/save', jsonData, fnJoinSaveCallback);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ var fnJoinSaveCallback = function (result) {
|
|
|
+ cfnGoToPage(_PAGE_CUSTOMER_JOIN_COMPLETE);
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ // 가입 가능한지 확인
|
|
|
+ var fnPossibleJoin = function () {
|
|
|
+ const $btnJoin = $('#btnJoin');
|
|
|
+ if (emailCheck && authCheck ) {
|
|
|
+ $btnJoin.attr('disabled', false);
|
|
|
+ } else {
|
|
|
+ $btnJoin.attr('disabled', true);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ $('#joinForm input[name=email]').trigger('blur');
|
|
|
+ });
|
|
|
+
|
|
|
+/*]]>*/
|
|
|
+</script>
|
|
|
+
|
|
|
+</th:block>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
jsshin