style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
							<!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  : JoinFormWeb.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="custId" name="custId" placeholder="아이디(4~12자)" class="form_control" required="required" data-valid-name="아이디" minlength="4" maxlength="12" autocomplete="no"/>
							<span class="usable" style="display:block;"></span>
						</div>
						<div id="dupCustIdDiv" class="help_block hide">
							<p class="t_err">이미 가입된 아이디입니다.다른 아이디를 입력하여 주세요.</p>
						</div>
						<div id="errCustIdDiv" 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="비밀번호" autocomplete="new-password"/><!-- 잘못기입된 경우 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="비밀번호" autocomplete="new-password"/><!-- 잘못기입된 경우 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" 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>
							본인은&nbsp;만 14세 이상이며&nbsp;<a href="javascript:void(0)" onclick="cfnUseTermsLayer();">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>
							,&nbsp;<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>
				</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 custIdCheck = false;
	let passwdCheck = false;
	let emailCheck = false;
	let authCheck = false;

	// 아이디 확인
	$('#custId').on('blur', function () {
		let custId = $(this).val();
		let $errCustIdDiv = $('#errCustIdDiv');
		const $custId = $('#custId');

		if(!gagajf.isNull(custId)) {
			if (custId.length > 3) {
				if (!fnCheckCustId(custId)) {
					$custId.addClass('err');
					$custId.removeClass('usable');
					$errCustIdDiv.show();
					return;
				} else {
					$custId.removeClass('err');
					$custId.addClass('usable');
					$errCustIdDiv.hide();
					let custInfo = {};
					custInfo.custId = custId;
					let jsonData = JSON.stringify(custInfo);
					gagajf.ajaxJsonSubmit('/customer/join/id/check', jsonData, fnIdConfirmCallBack);
				}
			}
		} else {
			custIdCheck = false
			$errCustIdDiv.show();
			$custId.addClass('err');
			$custId.removeClass('usable');
		}
	});

	// 아이디 결과
	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>