style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558
							<!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>
	.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_CUSTOMER_JOIN_TYPE);"><span></span><span></span></a>
			</div>
		</div>
		<div class="inner">
			<h2 class="title">회원정보 입력</h2>
		</div>
		<div class="inner">
			<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-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 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>
				<div class="desc_wrap t_c mt20">
					<div class="form_field">
						<p>
							본인은&nbsp;만 14세 이상이며&nbsp;<br>
							<input id="chk-policies-1" type="checkbox">
								<label for="chk-policies-1">
									<span>STYLE24이용약관</span>
								</label>
							<a href="javascript:void(0)" onclick="cfnUseTermsLayer();"><i class="ico ico_blank ml5"></i></a>,&nbsp;<br>
							<input id="chk-policies-2" type="checkbox">
								<label for="chk-policies-2">
									<span>개인정보 수집 및 이용</span>
								</label>
							<a href="javascript:void(0)" onclick="cfnPrivacyPolicyLayer('join');"><i class="ico ico_blank ml5"></i></a>,&nbsp;
							<input id="chk-policies-3" type="checkbox">
								<label for="chk-policies-3">
									<span>개인정보 취급 위탁</span>
								</label>
							<a href="javascript:void(0)" onclick="cfnPrivacyTrustLayer();"><i class="ico ico_blank ml5"></i></a><br>
							내용을 확인 하였으며,동의합니다.
						</p>
					</div>
				</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[*/
	const sEncData = [[${sEncData}]];   //인증 후 해당 페이지로 리다이렉트함
	const authMethod = [[${authMethod}]]; //인증 후 해당 페이지로 리다이렉트함
	let custParams = [[${custParams}]];

	let custIdCheck = false;
	let passwdCheck = false;
	let emailCheck = false;
	let authCheck = false;

	// 아이디 확인
	$('#custId').on('blur', function () {
		let custId = $(this).val();
		const $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';
		const icoRed = 'red';
		const icoGray = '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.find('.ico').removeClass(icoGray);
			$firstFailed.addClass(red);
			$firstFailed.find('.ico').addClass(icoRed);
		} else {
			$firstFailed.removeClass(red);
			$firstFailed.find('.ico').removeClass(icoRed);
			$firstFailed.addClass(gray);
			$firstFailed.find('.ico').addClass(icoGray);
		}

		// 동일한 문자/숫자 4자이상 || 연속된 문자가 4자이상
		if (fnValidationPwdSameWord(password) || fnValidtaionPwdCntnsWord(password)) {
			pwdCheck = false;
			$secondFailed.removeClass(gray);
			$secondFailed.find('.ico').removeClass(icoGray);
			$secondFailed.addClass(red);
			$secondFailed.find('.ico').addClass(icoRed);
		} else {
			$secondFailed.removeClass(red);
			$secondFailed.find('.ico').removeClass(icoRed);
			$secondFailed.addClass(gray);
			$secondFailed.find('.ico').addClass(icoGray);
		}

		// 아이디 포함
		if (!gagajf.isNull(custId)) {
			if (fnValidationPwdSameId(password, custId)) {
				pwdCheck = false;
				$thirdFailed.removeClass(gray);
				$thirdFailed.find('.ico').removeClass(icoGray);
				$thirdFailed.addClass(red);
				$thirdFailed.find('.ico').addClass(icoRed);
			} else {
				$thirdFailed.removeClass(red);
				$thirdFailed.find('.ico').removeClass(icoRed);
				$thirdFailed.addClass(gray);
				$thirdFailed.find('.ico').addClass(icoGray);
			}
		}

		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');
		const $dupEmail = $('#dupEmail');
		const $dupEmailDiv = $('#dupEmailDiv');
		$failEmail.hide();
		$dupEmail.hide();
		$dupEmailDiv.hide();

		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 () {
		let joinForm = $('#joinForm').serializeObject();
		let custParams = joinForm.custId +','+ joinForm.passwd +','+ joinForm.confirmPassword +','+ joinForm.email;
		cfnOpenCellphoneCertify(_PAGE_CUSTOMER_JOIN, custParams);
	});

	// 나이스 본인인증 후 콜백
	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일 동안 재가입이 불가능합니다.";
				$dupPhnnoDiv.hide();
			} else {
				msg = result.maskingCustId+"로 가입된 이력이 있습니다.";
				$dupPhnnoDiv.show();
			}
			$dupPhnno.show();
			$dupPhnno.html(msg);
			authCheck = false;
		} else {
			$dupPhnno.hide();
			$dupPhnnoDiv.hide();
			authCheck = true;
		}
		$btnCellPhoneCertify.find('span').text('인증완료');
		$btnCellPhoneCertify.attr('disabled', true);
		fnPossibleJoin();
	};

	// 저장
	$('#btnJoin').on('click', function () {
		const $policies1 = $('#chk-policies-1');
		const $policies2 = $('#chk-policies-2');
		const $policies3 = $('#chk-policies-3');

		if (!$policies1.is(':checked')) {
			mcxDialog.alert("이용약관 체크 해주세요.");
			return;
		}
		if (!$policies2.is(':checked')) {
			mcxDialog.alert("개인정보 수집 및 이용 체크 해주세요.");
			return;
		}
		if (!$policies3.is(':checked')) {
			mcxDialog.alert("개인정보 취급 위탁 체크 해주세요.");
			return;
		}

		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);
		}
	};

	// 본인인증 후 데이터 입력 값 셋팅
	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>
</body>
</html>