Merge branch 'develop' into order

src/main/java/com/style24/front/biz/web/TsfCustomerController.java

@@ -59,7 +59,7 @@ public class TsfCustomerController extends TsfBaseController {
 	public ModelAndView idFindForm() {
 		ModelAndView mav = new ModelAndView();
 
-		mav.setViewName(super.getDeviceViewName("customer/FindIdForm"));
+		mav.setViewName(super.getDeviceViewName("customer/IdFindForm"));
 
 		return mav;
 	}
@@ -122,11 +122,11 @@ public class TsfCustomerController extends TsfBaseController {
 	 * @author jsshin
 	 * @since 2021. 02. 05
 	 */
-	@GetMapping("/pwd/find/form")
+	@GetMapping("/password/find/form")
 	public ModelAndView pwdFindForm() {
 		ModelAndView mav = new ModelAndView();
 
-		mav.setViewName(super.getDeviceViewName("customer/FindPwdForm"));
+		mav.setViewName(super.getDeviceViewName("customer/PasswordFindForm"));
 
 		return mav;
 	}
@@ -166,7 +166,7 @@ public class TsfCustomerController extends TsfBaseController {
 	 * @author jsshin
 	 * @since 2021. 02. 15
 	 */
-	@PostMapping("/pwd/find/custinfo")
+	@PostMapping("/password/find/custinfo")
 	@ResponseBody
 	public GagaMap getPwdFind(@RequestBody Customer customer) {
 		GagaMap result = new GagaMap();
@@ -212,7 +212,7 @@ public class TsfCustomerController extends TsfBaseController {
 	 * @author jsshin
 	 * @since 2021. 02. 15
 	 */
-	@PostMapping("/pwd/find/certify")
+	@PostMapping("/password/find/certify")
 	@ResponseBody
 	public GagaMap getPwdFindCertify(@RequestBody Customer customer) {
 		GagaMap result = new GagaMap();
@@ -240,7 +240,6 @@ public class TsfCustomerController extends TsfBaseController {
 		if (custInfo != null) {
 			isFind = true;
 			TscSession.setAttribute("custNo", String.valueOf(custInfo.getCustNo()));
-			result.setString("custId", custInfo.getCustId());
 		}
 
 		result.setString("authMethod", customer.getAuthMethod()); // 인증방법
@@ -248,6 +247,37 @@ public class TsfCustomerController extends TsfBaseController {
 		return result;
 	}
 
+	/**
+	 * 비밀번호 변경 화면
+	 *
+	 * @return ModelAndView
+	 * @author jsshin
+	 * @since 2021. 02. 17
+	 */
+	@GetMapping("password/change/form")
+	public ModelAndView passwrodChangeForm(@RequestParam(value = "pageGb")String pageGb) {
+		ModelAndView mav = new ModelAndView();
+		String custNo = TscSession.getAttribute("custNo");
+
+		// 고객번호 없으면 인증화면으로 돌아감
+		if (StringUtils.isBlank(custNo)) {
+			String redirect = "redirect:/customer/password/find/form";
+			mav.setViewName(redirect);
+			return mav;
+		}
+
+		Customer params = new Customer();
+		params.setCustNo(Integer.valueOf(custNo));
+
+		// 고객정보 찾기
+		Customer custInfo = customerService.getCustomerFindId(params);
+		if (custInfo != null) {
+			mav.addObject("custId", custInfo.getCustId());
+		}
+
+		mav.setViewName(super.getDeviceViewName("customer/PasswordChangeForm"));
+		return mav;
+	}
 
 	/**
 	 * 비밀번호 변경
@@ -286,24 +316,6 @@ public class TsfCustomerController extends TsfBaseController {
 	}
 
 
-
-
-	/**
-	 * 비밀번호 찾기 결과 화면
-	 *
-	 * @param confirmYn - 인증여부
-	 * @return ModelAndView
-	 * @author jsshin
-	 * @since 2021. 02. 05
-	 */
-	@GetMapping("/pwd/find/result/form")
-	public ModelAndView pwdFindResult(@RequestParam(required = false) String confirmYn) {
-		ModelAndView mav = new ModelAndView();
-
-		mav.setViewName(super.getDeviceViewName("customer/FindPwdResultForm"));
-		return mav;
-	}
-
 	/**
 	 * 회원정보 입력 화면
 	 *
@@ -316,6 +328,7 @@ public class TsfCustomerController extends TsfBaseController {
 		ModelAndView mav = new ModelAndView();
 
 		mav.setViewName(super.getDeviceViewName("customer/JoinForm"));
+
 		return mav;
 	}
 

src/main/webapp/WEB-INF/views/web/customer/FindIdFormWeb.html → src/main/webapp/WEB-INF/views/web/customer/IdFindFormWeb.html

@@ -5,7 +5,7 @@
 	layout:decorator="web/common/layout/DefaultLayoutWeb">
 <!--
  *******************************************************************************
- * @source  : FindIdFormWeb.html
+ * @source  : IdFindFormWeb.html
  * @desc    : 아이디 비번 찾기 Page
  *============================================================================
  * STYLE24
@@ -149,7 +149,7 @@
 									<ul>
 										<li>
 											<span class="t_span">아이디</span>
-											<span id="resultId" name="resultId"  class="c_primary bold" data-font="lato"></span>
+											<span id="resultId" name="resultId" class="c_primary bold" data-font="lato"></span>
 										</li>
 										<li>
 											<span class="t_span">가입일자</span>

src/main/webapp/WEB-INF/views/web/customer/JoinFormWeb.html

@@ -17,8 +17,11 @@
  *******************************************************************************
  -->
 <body>
-
 <th:block layout:fragment="content">
+<style>
+	.show{display:block}
+	.hide{display:none}
+</style>
 <div id="container" class="container mb">
 	<div class="wrap">
 		<div class="content join2"> <!-- 페이지특정 클래스 = join1 -->
@@ -27,7 +30,7 @@
 			</div>
 			<div class="cont_body">
 				<!-- form start -->
-				<form class="form_wrap form_col_c form_full" role="form">
+				<form id="joinForm" name="joinForm" class="form_wrap form_col_c form_full" role="form">
 					<div class="form_head">
 						<h4>회원정보 입력</h4>
 					</div>
@@ -35,41 +38,39 @@
 					<div class="form_field">
 						<label class="input_label sr-only">아이디</label>
 						<div class="input_wrap form_full">
-							<input type="text" name="userId" placeholder="아이디" value="moon123" class="form_control usable" id="txtId"><!-- class "usable" 추가 -->
+							<input type="text" id="custId" name="custId" placeholder="아이디 (4~12자)" class="form_control" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디" minlength="4" maxlength="12"/>
 							<span class="usable" style="display:block;"></span><!-- display:block / display:none 으로 control -->
 						</div>
-					</div>
-					<!-- //아이디 사용가능시 -->
-					<!-- 아이디 사용불가시 -->
-					<div class="form_field">
-						<label class="input_label sr-only">아이디</label>
-						<div class="input_wrap form_full">
-							<input type="text" name="userId" placeholder="아이디" value="abcd1234" class="form_control err" id="txtId"><!-- 잘못기입된 경우 class "err" 추가 -->
-							<span class="usable"></span>
-						</div>
-						<div class="help_block">
+						<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" name="userPassword" placeholder="비밀번호 (8~20자 영문, 숫자, 특수문자 중 2가지 이상 조합)" class="form_control" id="txtPassword"><!-- 잘못기입된 경우 class "err" 추가 -->
+							<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 class="c_black2"><i class="ico ico_check black mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)</span><br>
-									<span class="c_red2"><i class="ico ico_check red mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외</span><br>
-									<span class="c_gray"><i class="ico ico_check gray mr5"></i>아이디 제외</span>
+									<span class="c_black2">
+										<i class="ico ico_check black mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br>
+									</span>
+									<span class="c_red2">
+										<i class="ico ico_check red mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외<br>
+									</span>
+									<span class="c_gray">
+										<i class="ico ico_check gray mr5"></i>아이디 제외
+									</span>
 								</p>
 								<!-- //사용불가 비밀번호일경우 -->
 								<!-- 사용가능한 비밀번호일경우 -->
 								<p class="mt10">
-									<span class="c_black2"><i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다</span>
+									<span class="c_black2">
+										<i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다
+									</span>
 								</p>
 								<!-- //사용가능한 비밀번호일경우 -->
 							</div>
@@ -80,7 +81,7 @@
 					<div class="form_field">
 						<label class="input_label sr-only">비밀번호 확인</label>
 						<div class="input_wrap form_full">
-							<input type="password" name="userConfirm" placeholder="비밀번호 확인" class="form_control" id="txtConfirm"><!-- 잘못기입된 경우 class "err" 추가 -->
+							<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">
 								<!-- 비밀번호확인 틀렸을경우 -->
@@ -100,7 +101,7 @@
 					<div class="form_field">
 						<label class="input_label sr-only">이메일</label>
 						<div class="input_wrap form_full">
-							<input type="text" name="userEmail" placeholder="이메일" class="form_control" id="txtEmail"><!-- 잘못기입된 경우 class "err" 추가 -->
+							<input type="text" id="email" name="email" placeholder="이메일" class="form_control" maxlength="30"/><!-- 잘못기입된 경우 class "err" 추가 -->
 							<!-- case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
 							<div class="help_block">
 								<!-- 이메일 형식이 바르지않을경우 -->
@@ -113,8 +114,12 @@
 									이미 가입된 이메일 주소입니다. 다른 이메일 주소를 입력하여 주세요.
 								</p>
 								<div class="mt20">
-									<button type="button" class="btn btn_default btn_sm"><span>로그인</span></button>
-									<button type="button" class="btn btn_default btn_sm"><span>아이디 찾기</span></button>
+									<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>
@@ -124,7 +129,7 @@
 					<div class="form_field">
 						<label class="input_label sr-only">휴대폰번호</label>
 						<div class="input_wrap form_full">
-							<input type="text" name="userTell" placeholder="휴대폰번호" class="form_control" id="txtTell">
+							<input type="text" id="cellPhnno" name="cellPhnno" placeholder="휴대폰번호" class="form_control"/>
 							<!-- case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
 							<div class="help_block">
 								<!-- 휴대폰번호 형식이 맞지 않을경우 -->
@@ -133,7 +138,9 @@
 								<!-- 이미 가입되어있는 핸드폰번호일경우 -->
 								<p class="t_err">I***D로 가입된 핸드폰 번호 입니다.</p>
 								<div class="mt20">
-									<button type="button" class="btn btn_default btn_sm"><span>휴대폰 인증</span></button>
+									<button type="button" class="btn btn_default btn_sm">
+										<span>휴대폰 인증</span>
+									</button>
 								</div>
 								<!-- //이미 가입되어있는 핸드폰번호일경우 -->
 							</div>
@@ -145,8 +152,8 @@
 					</div>
 					<div class="desc_wrap t_c mt20">
 						<p>
-							본인은&nbsp;만 14세 이상이며&nbsp;<a href="" target="_blank">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>,&nbsp;<a href="" target="_blank">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,<br>
-							<a href="" target="_blank">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a> 내용을 확인 하였으며,동의합니다.
+							본인은&nbsp;만 14세 이상이며&nbsp;<a href="javascript:void(0)" target="_blank">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>,&nbsp;<a href="javascript:void(0)" target="_blank">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,<br>
+							<a href="javascript:void(0)" target="_blank">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a> 내용을 확인 하였으며,동의합니다.
 						</p>
 					</div>
 				</form>
@@ -156,8 +163,43 @@
 	</div>
 </div>
 
+<script th:src="@{'/ux/customer/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/customer/customer.js"></script>
 <script th:inline="javascript">
 /*<![CDATA[*/
+	//	중복된 아이디 확인
+	$('#custId').on('blur', function () {
+		let custId = $(this).val();
+		if(!gagajf.isNull(custId)) {
+			let custInfo = {};
+			custInfo.custId = custId;
+			let jsonData = JSON.stringify(custInfo);
+			ajaxJsonSubmit('/customer/id/check', jsonData, fnIdConfirmCallBack)
+		}
+
+	});
+
+	var fnIdConfirmCallBack = function (result) {
+		if (result.isFind) { // 중복된 아이디가 존재
+			fnDisplayCustIdDiv(false);
+		} else {
+			fnDisplayCustIdDiv(true);
+		}
+	};
+
+	var fnDisplayCustIdDiv = function (bool) {
+		let $dupCustIdDiv = $('#dupCustIdDiv');
+		let $custId = $('#custId');
+		if (bool) { // 사용가능
+			$custId.removeClass('err'); //잘못기입된 경우
+			$custId.addClass('usable');
+			$('.usable').show();
+		} else {  // 사용가능 하지 않음
+			$custId.addClass('err'); //잘못기입된 경우
+			$custId.removeClass('usable');
+			$dupCustIdDiv.show();
+			$('.usable').hide();
+		}
+	};
 
 /*]]>*/
 </script>

src/main/webapp/WEB-INF/views/web/customer/PasswordChangeFormWeb.html

@@ -0,0 +1,247 @@
+<!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  : PasswordChangeFormWeb.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">
+<div id="container" class="container mb">
+	<div class="wrap">
+		<div class="content find">
+			<div class="cont_head">
+				<h3>style24</h3>
+			</div>
+			<div class="cont_body show">
+				<form id="resetPasswordForm" name="resetPasswordForm" class="form_wrap form_col_c" role="form" method="post">
+					<div class="form_head">
+						<h4>아이디&#47;비밀번호 찾기</h4>
+					</div>
+					<!-- 비밀번호 재설정 -->
+					<div class="find_result clear" >
+						<input type="hidden" name="custId" th:value="${custId}"/>
+						<div class="form_info">
+							<span class="ico_content_security"></span>
+							<p>안전을 위해 비밀번호를 변경하신 후 이용이 가능합니다.</p>
+						</div>
+						<div class="form_field mt40">
+							<label class="input_label sr-only">신규 비밀번호</label>
+							<div class="ui_col_12">
+								<input type="password" id="passwd" name="passwd" placeholder="신규 비밀번호" minlength="8" maxlength="20"/>
+								<!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
+								<div class="help_block">
+									<!-- 사용불가 비밀번호일경우 c_gray c_black2 c_red2-->
+									<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 class="form_field">
+							<label class="input_label sr-only">비밀번호 확인</label>
+							<div class="ui_col_12">
+								<input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인" minlength="8" maxlength="20"/>
+								<!-- 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="btn_group_block btn_group_md ui_row">
+							<div class="ui_col_12">
+								<button type="button" id="btnSavePassword" class="btn btn_dark btn_block" disabled="disabled">
+									<span>변경 후 다시 로그인</span>
+								</button>
+							</div>
+						</div>
+					</div>
+					<!-- //비밀번호 재설정 -->
+				</form>
+			</div>
+		</div>
+	</div>
+</div>
+
+<script th:src="@{'/ux/customer/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/customer/customer.js"></script>
+<script th:inline="javascript">
+/*<![CDATA[*/
+
+	// 비밀번호 입력
+	$('#resetPasswordForm input[name=passwd]').on('focusout keyup keydown', function () {
+		fnCheckPassword();
+	});
+
+	// 비밀번호 확인 입력
+	$('#resetPasswordForm input[name=confirmPassword]').on('focusout keyup keydown', function () {
+		fnCheckConfirmPassword();
+	});
+
+	// 비밀번호 확인
+	var fnCheckPassword = function () {
+		let custId = $('#resetPasswordForm input[name=custId]').val();
+		let password = $('#resetPasswordForm input[name=passwd]').val();
+		let confirmPassword = $('#resetPasswordForm input[name=confirmPassword]').val();
+		let $firstFailed = $('#firstFailed');
+		let $secondFailed = $('#secondFailed');
+		let $thirdFailed = $('#thirdFailed');
+		let $avlPwd = $('#avlPwd');
+		let pwdCheck = true;
+		let red = 'c_red2';
+		let gray = 'c_gray';
+
+		// 영문, 숫자, 특수문자 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 (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 () {
+		let password = $('#resetPasswordForm input[name=passwd]').val();
+		let confirmPassword = $('#resetPasswordForm input[name=confirmPassword]').val();
+		let $misPwd = $('#misPwd');
+		let $avlConPwd = $('#avlConPwd');
+		let $btnSavePassword = $('#btnSavePassword');
+
+		if (fnValidationPwdSameConfirmPwd(password, confirmPassword)) {
+			$avlConPwd.hide();
+			$misPwd.show();
+			$btnSavePassword.attr('disabled', true);
+		} else {
+			$misPwd.hide();
+			$avlConPwd.show();
+			$btnSavePassword.attr('disabled', false);
+		}
+
+	};
+
+	// 패스워드 저장
+	$('#btnSavePassword').on('click', function () {
+		let resetPasswordForm = $('#resetPasswordForm').serializeObject();
+
+		if (gagajf.isNull(resetPasswordForm.passwd)) {
+			mcxDialog.alert('신규 비밀번호를 입력하신 후 다시 시도해주세요.');
+			return;
+		}
+
+		if (gagajf.isNull(resetPasswordForm.confirmPassword)) {
+			mcxDialog.alert('비밀번호 확인을 입력하신 후 다시 시도해주세요.');
+			return;
+		}
+
+		if (resetPasswordForm.passwd != resetPasswordForm.confirmPassword) {
+			mcxDialog.alert('비밀번호가 일치하지 않습니다. 다시 확인해주세요.');
+			return;
+		}
+
+		fnCheckPassword();
+		fnCheckConfirmPassword();
+		let jsonData = JSON.stringify(resetPasswordForm);
+		ajaxJsonSubmit('/customer/password/reset', jsonData, fnSavePasswordCallback);
+	});
+
+	var fnSavePasswordCallback = function (result) {
+		if (result.isSuccess) {
+		mcxDialog.alertC('비밀번호 변경이 완료 되었습니다.', {
+			sureBtnText: "확인",
+			sureBtnClick: function() {
+				cfnGoToPage(_PAGE_LOGIN);
+			}
+		});
+		} else {
+			mcxDialog.alert('비밀번호 변경이 실패 되었습니다.')
+		}
+	};
+
+
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>

src/main/webapp/WEB-INF/views/web/customer/FindPwdFormWeb.html → src/main/webapp/WEB-INF/views/web/customer/PasswordFindFormWeb.html

@@ -5,7 +5,7 @@
 	layout:decorator="web/common/layout/DefaultLayoutWeb">
 <!--
  *******************************************************************************
- * @source  : FindIdFormWeb.html
+ * @source  : IdFindFormWeb.html
  * @desc    : 아이디 비번 찾기 Page
  *============================================================================
  * STYLE24
@@ -60,7 +60,7 @@
 													<label class="input_label sr-only">아이디</label>
 													<div class="ui_col_12">
 														<div class="input_wrap">
-															<input type="text" name="custId" placeholder="아이디" class="form_control" maxlength="30"/>
+															<input type="text" name="custId" placeholder="아이디" class="form_control" minlength="4" maxlength="12"/>
 															<button type="button" id="btnSearchId" class="btn btn_primary">
 																<span>확인</span>
 															</button>
@@ -142,76 +142,6 @@
 								</ul>
 							</div>
 							<!-- //비밀번호찾기일경우 -->
-							<!-- 비밀번호 재설정 -->
-							<div id="resetPasswordDiv" class="find_result clear" style="display: none;">
-								<form id="resetPasswordForm" name="resetPasswordForm" method="post">
-									<input type="hidden" name="custId"/>
-									<div class="form_info">
-										<span class="ico_content_security"></span>
-										<p>안전을 위해 비밀번호를 변경하신 후 이용이 가능합니다.</p>
-									</div>
-									<div class="form_field mt40">
-										<label class="input_label sr-only">신규 비밀번호</label>
-										<div class="ui_col_12">
-											<input type="password" id="passwd" name="passwd" placeholder="신규 비밀번호" minlength="8" maxlength="20"/>
-											<!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
-											<div class="help_block">
-												<!-- 사용불가 비밀번호일경우 -->
-												<p class="mt10">
-													<span id="firstFailed" class="c_black2 hide">
-														<i class="ico ico_check black mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자) <br/>
-													</span>
-													<span id="secondFailed" class="c_red2 hide">
-														<i class="ico ico_check red mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외 <br/>
-													</span>
-													<span id="thirdFailed" class="c_gray hide">
-														<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 class="form_field">
-										<label class="input_label sr-only">비밀번호 확인</label>
-										<div class="ui_col_12">
-											<input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인" minlength="8" maxlength="20"/>
-											<!-- 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="btn_group_block btn_group_md ui_row">
-										<div class="ui_col_12">
-											<button type="button" id="btnSavePassword" class="btn btn_dark btn_block" disabled="disabled">
-												<span>변경 후 다시 로그인</span>
-											</button>
-										</div>
-									</div>
-								</form>
-							</div>
-							<!-- //비밀번호 재설정 -->
 							<!-- 임시비밀번호 발급 -->
 							<div id="sendEmailDiv" class="find_result clear" style="display: none">
 								<div class="form_info">
@@ -314,7 +244,7 @@
 		custInfo.authMethod = 'custInfo';
 		let jsonData = JSON.stringify(custInfo);
 		//console.log('jsonData', jsonData);
-		ajaxJsonSubmit('/customer/pwd/find/custinfo', jsonData, fnInfoConfirmCallBack);
+		ajaxJsonSubmit('/customer/password/find/custinfo', jsonData, fnInfoConfirmCallBack);
 	});
 
 	// 휴대폰 인증
@@ -346,8 +276,7 @@
 			$('#sendEmailDiv').show();
 		}
 		if (authMethod === 'mobile' || authMethod === 'ipin') {
-			$('#resetPasswordForm input[name=custId]').val(custInfo.custId);
-			$('#resetPasswordDiv').show();
+			cfnGoToPage(_PAGE_CUSTOMER_PWD_CHANGE_FIND);
 		}
 	};
 
@@ -365,59 +294,10 @@
 			custInfo.encData = encData;
 			custInfo.authMethod = authMethod;
 			let jsonData = JSON.stringify(custInfo);
-			ajaxJsonSubmit('/customer/pwd/find/certify', jsonData, fnInfoConfirmCallBack)
+			ajaxJsonSubmit('/customer/password/find/certify', jsonData, fnInfoConfirmCallBack)
 		}
 	};
 
-	// 패스워드 입력
-	$('#resetPasswordForm input[name=passwd]').on('focus focusout keyup keydown', function () {
-		fnCheckPassword('#resetPasswordForm');
-	});
-
-	// 패스워드 확인 입력
-	$('#resetPasswordForm input[name=confirmPassword]').on('focus focusout keyup keydown', function () {
-		fnConfirmPassword('#resetPasswordForm');
-	});
-
-	// 패스워드 저장
-	$('#btnSavePassword').on('click', function () {
-		let resetPasswordForm = $('#resetPasswordForm').serializeObject();
-
-		if (gagajf.isNull(resetPasswordForm.passwd)) {
-			mcxDialog.alert('신규 비밀번호를 입력하신 후 다시 시도해주세요.');
-			return;
-		}
-
-		if (gagajf.isNull(resetPasswordForm.confirmPassword)) {
-			mcxDialog.alert('비밀번호 확인을 입력하신 후 다시 시도해주세요.');
-			return;
-		}
-
-		if (resetPasswordForm.passwd != resetPasswordForm.confirmPassword) {
-			mcxDialog.alert('비밀번호가 일치하지 않습니다. 다시 확인해주세요.');
-			return;
-		}
-
-		fnCheckPassword('#resetPasswordForm');
-		fnConfirmPassword('#resetPasswordForm');
-		let jsonData = JSON.stringify(resetPasswordForm);
-		ajaxJsonSubmit('/customer/password/reset', jsonData, fnSavePasswordCallback);
-	});
-
-	var fnSavePasswordCallback = function (result) {
-		if (result.isSuccess) {
-		mcxDialog.alertC('비밀번호 변경이 완료 되었습니다.', {
-			sureBtnText: "확인",
-			sureBtnClick: function() {
-				cfnGoToPage(_PAGE_LOGIN);
-			}
-		});
-		} else {
-			mcxDialog.alert('비밀번호 변경이 실패 되었습니다.')
-		}
-	};
-
-
 /*]]>*/
 </script>
 

src/main/webapp/ux/customer/customer.js

@@ -43,136 +43,145 @@ var fnToDateFormat =  function(date) {
 };
 
 /**
- * 비밀번호 유효성 체크
- * input name이 custId, password, confirmpassword  동일해야 이 매소드를 사용 할수 있음
- * 실패 텍스트는 아래에 있는 id 값으로 해야함
- * @param form 넘김
+ * 비밀번호 길이확인
+ * @param password - 패스워드
+ * @return boolean 패스워드 길이가 짧거나 길면 true
  * @author jsshin
- * @since 2021. 02. 16
+ * @since 2021. 02. 17
  */
-var fnCheckPassword = function (form) {
-	let custId = $(form + ' input[name=custId]').val();
-	let password = $(form  +' input[name=passwd]').val();
-	let confirmPassword = $(form  + ' input[name=confirmPassword]').val();
-	let $firstFailed = $('#firstFailed');
-	let $secondFailed = $('#secondFailed');
-	let $thirdFailed = $('#thirdFailed');
-	let $avlPwd = $('#avlPwd');
-	let pwdCheck = true;
-
+var fnValidationPwdLength = function (password) {
+	let result;
 	// 길이
 	if(!/^[a-zA-Z0-9!@#$%^&*()?_~]{8,20}$/.test(password)) {
-		pwdCheck = false;
-		$firstFailed.show();
+		result = true;
 	} else {
-		$firstFailed.hide();
+		result = false;
 	}
 
-	// 영문, 숫자, 특수문자 2종 이상 혼용
+	return result;
+};
+
+/**
+ * 비밀번호 영문, 숫자, 특수문자 2종 이상 혼용
+ * @param password - 패스워드
+ * @return boolean 충족이 안되면 true
+ * @author jsshin
+ * @since 2021. 02. 17
+ */
+var fnValidtaionPwdMixedWord = function (password) {
+	let result;
 	let count = 0;
 	if(password.search(/[0-9]/g) != -1 ) count ++;
 	if(password.search(/[a-zA-Z]/ig)  != -1 ) count ++;
 	if(password.search(/[!@#$%^&*()?_~]/g)  != -1  ) count ++;
-	if(count < 2) {
-		pwdCheck = false;
-		$firstFailed.show();
-	} else {
-		$firstFailed.hide();
-	}
 
-	// 동일한 문자/숫자 4이상, 연속된 문자
-	if(/(\w)\1\1\1/.test(password) || isContinuedValue(password)) {
-		pwdCheck = false;
-		$secondFailed.show();
+	if (count < 2) {
+		result = true;
 	} else {
-		$secondFailed.hide();
-	}
-
-	// 아이디 포함 여부
-	if(password.search(custId) > -1) {
-		pwdCheck = false;
-		$thirdFailed.show();
-	} else {
-		$thirdFailed.hide();
-	}
-
-	// 사용 가능한 비밀번호인지
-	if (pwdCheck) {
-		$avlPwd.show();
-	} else {
-		$avlPwd.hide();
-	}
-
-	if (!gagajf.isNull(confirmPassword)) {
-		fnConfirmPassword(form);
+		result = false;
 	}
 
+	return result;
 };
 
+
 /**
- * 확인 비밀번호 유효성 체크
- * input name이 custId, password, confirmpassword  동일해야 이 매소드를 사용 할수 있음
- * 실패 텍스트는 아래에 있는 id 값으로 해야함
- * @param form 넘김
+ * 동일한 문자 숫자 4자이상 인지확인
+ * @param password - 패스워드
+ * @return boolean 동일한 문자가 있으면 true
  * @author jsshin
- * @since 2021. 02. 16
+ * @since 2021. 02. 17
  */
-var fnConfirmPassword = function (form) {
-	let password = $(form  +' input[name=passwd]').val();
-	let confirmPassword = $(form  + ' input[name=confirmPassword]').val();
-	let $misPwd = $('#misPwd');
-	let $avlConPwd = $('#avlConPwd');
-	let $btnSavePassword = $('#btnSavePassword');
-
-	// 재입력 일치 여부
-	if (password != confirmPassword) {
-		$avlConPwd.hide();
-		$misPwd.show();
-		$btnSavePassword.attr('disabled', true);
+var fnValidationPwdSameWord = function (password) {
+	let result;
+	if (/(\w)\1\1\1/.test(password)) {
+		result = true;
 	} else {
-		$misPwd.hide();
-		$avlConPwd.show();
-		$btnSavePassword.attr('disabled', false);
+		result = false;
 	}
-}
+	return result;
+};
 
 /**
- * 연속되는 문자가 있는지 확인
- * @param form 넘김
- * @return true/false
+ * 연속되는 문자가 4자이상 인지확인
+ * @param password - 패스워드
+ * @return boolean 연속된 문자가 있으면 true
  * @author jsshin
- * @since 2021. 02. 16
+ * @since 2021. 02. 17
  */
-var isContinuedValue = function (password) {
-	var intCnt1 = 0;
-	var intCnt2 = 0;
-	var temp0 = "";
-	var temp1 = "";
-	var temp2 = "";
-	var temp3 = "";
+var fnValidtaionPwdCntnsWord = function (password) {
+	let result;
+	let intCnt1 = 0;
+	let intCnt2 = 0;
+	let wordZero = '';
+	let wordOne = '';
+	let wordTwo = '';
+	let wordThree = '';
 
 	for (var i = 0; i < password.length-3; i++) {
-		temp0 = password.charAt(i);
-		temp1 = password.charAt(i + 1);
-		temp2 = password.charAt(i + 2);
-		temp3 = password.charAt(i + 3);
-
-		if (temp0.charCodeAt(0) - temp1.charCodeAt(0) == 1
-			&& temp1.charCodeAt(0) - temp2.charCodeAt(0) == 1
-			&& temp2.charCodeAt(0) - temp3.charCodeAt(0) == 1) {
+		wordZero = password.charAt(i);
+		wordOne = password.charAt(i + 1);
+		wordTwo = password.charAt(i + 2);
+		wordThree = password.charAt(i + 3);
+
+		if (wordZero.charCodeAt(0) - wordOne.charCodeAt(0) == 1
+			&& wordOne.charCodeAt(0) - wordTwo.charCodeAt(0) == 1
+			&& wordTwo.charCodeAt(0) - wordThree.charCodeAt(0) == 1) {
 			intCnt1 = intCnt1 + 1;
 		}
 
-		if (temp0.charCodeAt(0) - temp1.charCodeAt(0) == -1
-			&& temp1.charCodeAt(0) - temp2.charCodeAt(0) == -1
-			&& temp2.charCodeAt(0) - temp3.charCodeAt(0) == -1) {
+		if (wordZero.charCodeAt(0) - wordOne.charCodeAt(0) == -1
+			&& wordOne.charCodeAt(0) - wordTwo.charCodeAt(0) == -1
+			&& wordTwo.charCodeAt(0) - wordThree.charCodeAt(0) == -1) {
 			intCnt2 = intCnt2 + 1;
 		}
+	}
+
+	if (intCnt1 > 0 || intCnt2 > 0) {
+		result = true;
+	} else {
+		result = false;
+	}
+	return result;
+}
 
+/**
+ * 비밀번호가 아이디랑 동일한지 확인
+ * @param password - 패스워드
+ * @param custId - 고객아이디
+ * @return boolean 아이디랑 동일한게 있으면 true
+ * @author jsshin
+ * @since 2021. 02. 17
+ */
+var fnValidationPwdSameId = function (password, custId) {
+	let result;
+
+	if (password.search(custId) > -1) {
+		result = true;
+	} else {
+		result = false;
 	}
-	return (intCnt1 > 0 || intCnt2 > 0);
+	return result;
 }
 
+/**
+ * 확인 비밀번호 유효성 체크
+ * @param password - 비밀번호
+ * @param confirmPassword - 확인 비밀번호
+ * @author jsshin
+ * @since 2021. 02. 17
+ */
+var fnValidationPwdSameConfirmPwd = function (password, confirmPassword) {
+	let result;
+	if (password != confirmPassword) {
+		result = true;
+	} else {
+		result = false;
+	}
+	return result;
+};
+
+
 
 /*
 * 임시사용

src/main/webapp/ux/style24_link.js

@@ -8,12 +8,14 @@ const _PAGE_LOGOUT = _frontUrl + "/logout";	// GNB > 로그아웃
 const _PAGE_MAIN = _frontUrl + "/display/mall/main/form";	// 몰메인
 
 //== 고객 ==/
-const _PAGE_CUSTOMER_JOIN = _frontUrl + "/customer/join/form";						// 고객 > 회원가입
-const _PAGE_CUSTOMER_SNS_JOIN = _frontUrl + "/customer/sns/join/form";				// 고객 > SNS가입
-const _PAGE_CUSTOMER_JOIN_COMPLETE = _frontUrl + "/customer/join/complete/form";	// 고객 > 고객가입 > 완료페이지
-const _PAGE_CUSTOMER_ID_FIND = _frontUrl + "/customer/id/find/form";				// 고객 > 아이디 찾기
-const _PAGE_CUSTOMER_PWD_FIND = _frontUrl + "/customer/pwd/find/form";				// 고객 > 비밀번호 찾기
-const _PAGE_CUSTOMER_DORMANT = _frontUrl + "/customer/dormant/certify/form";		// 고객 > 휴면회원
+const _PAGE_CUSTOMER_JOIN = _frontUrl + "/customer/join/form";										// 고객 > 회원가입
+const _PAGE_CUSTOMER_SNS_JOIN = _frontUrl + "/customer/sns/join/form";								// 고객 > SNS가입
+const _PAGE_CUSTOMER_JOIN_COMPLETE = _frontUrl + "/customer/join/complete/form";					// 고객 > 고객가입 > 완료페이지
+const _PAGE_CUSTOMER_ID_FIND = _frontUrl + "/customer/id/find/form";								// 고객 > 아이디 찾기
+const _PAGE_CUSTOMER_PWD_FIND = _frontUrl + "/customer/password/find/form";							// 고객 > 비밀번호 찾기
+const _PAGE_CUSTOMER_PWD_CHANGE_FIND = _frontUrl + "/customer/password/change/form?pageGb=find";	// 고객 > 비밀번호 찾기> 비밀번호 변경 화면
+const _PAGE_CUSTOMER_PWD_CHANGE_TEMP = _frontUrl + "/customer/password/change/form?pageGb=temp";	// 고객 > 임시비밀번호 로그인 > 비밀번호 변경 화면
+const _PAGE_CUSTOMER_DORMANT = _frontUrl + "/customer/dormant/certify/form";						// 고객 > 휴면회원
 
 //== 상품상세 ==/
 
@@ -82,8 +84,8 @@ var cfnGoToPage = function(page, ithrCd) {
  */
 var cfnOpenCellphoneCertify = function (redirectUrl, custparams) {
 	var actionUrl = _frontUrl + "/customer/nice/cellphone/form";
-	var popupWidth = 450;
-	var popupHeight = 700;
+	var popupWidth = 420;
+	var popupHeight = 720;
 	var popupX = (window.screen.width / 2) - (popupWidth / 2);
 	var popupY = (window.screen.height / 3) - (popupHeight / 3);
 	if ('P' === _frontGb) {
@@ -102,7 +104,7 @@ var cfnOpenCellphoneCertify = function (redirectUrl, custparams) {
 /**
  * @type   : function
  * @access : public
- * @desc   : 나이스 휴대폰 인증
+ * @desc   : 나이스 아이핀 인증
  * <pre>
  *     cfnOpenIpinCertify();
  *     호출된 페이지에서
@@ -114,8 +116,8 @@ var cfnOpenCellphoneCertify = function (redirectUrl, custparams) {
  */
 var cfnOpenIpinCertify = function (redirectUrl) {
 	var actionUrl = _frontUrl + "/customer/nice/ipin/form";
-	var popupWidth = 450;
-	var popupHeight = 700;
+	var popupWidth = 445;
+	var popupHeight = 550;
 	var popupX = (window.screen.width / 2) - (popupWidth / 2);
 	var popupY = (window.screen.height / 3) - (popupHeight / 3);
 	if ('P' === _frontGb) {