아이디 비밀번호 찾기 합침

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

@@ -97,13 +97,15 @@ public class TsfCustomerController extends TsfBaseController {
 	@RequestMapping("/id/pwd/find/form")
 	public ModelAndView idPwdFindForm(@RequestParam(value = "sEncData", required = false) String sEncData
 			, @RequestParam(value = "authMethod", required = false) String authMethod
-			, @RequestParam(value = "custParams", required = false) String custParams) {
+			, @RequestParam(value = "custParams", required = false) String custParams
+			, @RequestParam(value = "pageGb") String pageGb) {
 
 		ModelAndView mav = new ModelAndView();
-
+		String tmpPageGb = StringUtils.isNotBlank(custParams) ? custParams : pageGb;
 		mav.addObject("sEncData", sEncData);
 		mav.addObject("authMethod", authMethod);
 		mav.addObject("custParams", custParams);
+		mav.addObject("pageGb", tmpPageGb);
 
 		mav.setViewName(super.getDeviceViewName("customer/IdAndPwdFindForm"));
 		return mav;

src/main/webapp/WEB-INF/views/mob/SigninFormMob.html

@@ -23,7 +23,7 @@
 		<!-- ★ 컨텐츠 시작 -->
 		<section class="content mb_login">
 			<div class="inner">
-				<div class="close"><a href="javascript:history.back(-1);" class="btn_close"><span></span><span></span></a></div>
+				<div class="close"><a class="btn_close"><span></span><span></span></a></div>
 			</div>
 			<div class="inner">
 				<h2 class="title">로그인</h2>
@@ -395,6 +395,16 @@
 		gagajf.ajaxJsonSubmit('/app/push/update', jsonData);
 	}
 
+	$('.btn_close').on('click', function () {
+		let referrer = document.referrer;
+		if (referrer.indexOf('/customer/password/change/form') > -1 ) {
+			cfnGoToPage(_PAGE_MAIN);
+		} else {
+			history.back(-1);
+		}
+
+	});
+
 
 	$(document).ready(function() {
 

src/main/webapp/WEB-INF/views/mob/customer/IdAndPwdFindFormMob.html

@@ -23,7 +23,7 @@
 		<section class="content mb_idInquiry_1">
 			<div class="inner">
 				<div class="close">
-					<a href="javascript:history.back(-1);" class="btn_close"><span></span><span></span></a>
+					<a class="btn_close"><span></span><span></span></a>
 				</div>
 			</div>
 			<div class="inner">
@@ -32,15 +32,15 @@
 			<div class="inner">
 				<div class="registration_nav">
 					<ul class="tab_btn">
-						<li class="active">아이디찾기</li>
-						<li>비밀번호찾기</li>
+						<li th:class="${pageGb == 'custId'? 'active' : ''}">아이디찾기</li>
+						<li th:class="${pageGb == 'custPwd'? 'active' : ''}">비밀번호찾기</li>
 					</ul>
 				</div>
 				<div class="registration_tap">
 					<!-- 아이디찾기 -->
 					<div class="form_group">
 						<!-- 라디오탭 -->
-						<div id="searchDiv" class="radio_nav">
+						<div id="searchCustIdDiv" class="radio_nav">
 							<ul class="form_field">
 								<li class="ui_col_4 active">
 									<input type="radio" name="radio1" id="rdi1-1" value="1" checked><label for="rdi1-1"> <span>회원정보인증</span> </label>
@@ -60,13 +60,13 @@
 								<form id="searchCustId" name="searchCustId" class="form_wrap form_full" method="post">
 									<div>
 										<div class="form_field mt0">
-											<input type="text" name="custNm" placeholder="이름" id="custNm" class="form_control" maxlength="30"/>
+											<input type="text" name="custNm" placeholder="이름" class="form_control" maxlength="30"/>
 										</div>
 										<div class="form_field">
-											<input type="text" name="birthYmd" placeholder="생년월일 8자리 (예:19880912)" id="birthYmd" class="form_control"/>
+											<input type="text" name="birthYmd" placeholder="생년월일 8자리 (예:19880912)" id="birthYmd" class="form_control" maxlength="8" data-valid-type="numeric"/>
 										</div>
 										<div class="form_field">
-											<input type="text" name="email" placeholder="이메일" id="email" class="form_control"/>
+											<input type="text" name="email" placeholder="이메일" class="form_control"/>
 										</div>
 										<div class="btn_group_flex">
 											<div>
@@ -110,12 +110,88 @@
 								</div>
 							</div>
 						</div>
+						<!-- 아이디찾기 결과 -->
+						<div class="form_wrap form_full">
+							<div id="succeedCustId"  class="find_result clear" style="display: none;">
+								<div class="form_info">
+									<span class="ico_content_find"></span>
+									<p>아이디 찾기 결과 안내</p>
+								</div>
+								<div class="form_print_bar mt40">
+									<ul>
+										<li>
+											<span class="t_span">아이디</span>
+											<span id="resultId" name="resultId" class="c_primary bold" data-font="lato"></span>
+										</li>
+										<li>
+											<span class="t_span">가입일자</span>
+											<span id="joinDt" name="joinDt" class="bold" data-font="lato"></span>
+										</li>
+										<li id="liJoinPath">
+											<span class="t_span">가입경로</span>
+											<span id="joinPath" name="joinPath" class="bold" data-font="lato"></span>
+										</li>
+									</ul>
+								</div>
+								<div class="btn_group_flex">
+									<div>
+										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인 하기</button>
+									</div>
+								</div>
+							</div>
+							<!-- 회원정보로 아이디, 비밀번호 찾기 실패일경우 -->
+							<div id="failCustInfoId" class="form_wrap form_full" style="display: none;">
+								<div class="find_result clear">
+									<div class="form_info">
+										<span class="ico_content_none"></span>
+										<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
+										<p class="t_info mt10">
+											정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
+										</p>
+									</div>
+									<div class="btn_group_flex">
+										<div>
+											<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
+												<span>회원가입</span>
+											</button>
+										</div>
+										<div>
+											<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
+												<span>다시 찾기</span>
+											</button>
+										</div>
+									</div>
+								</div>
+							</div>
+							<!-- 회원정보로 아이디, 비밀번호 찾기 실패일경우 -->
+							<!-- 휴대폰,아이핀 본인인증으로 아이디, 비밀번호찾기 실패일경우 -->
+							<div id="failAuthenticationId" class="form_wrap form_full" style="display: none;">
+								<div class="find_result clear">
+									<div class="form_info">
+										<span class="ico_content_none"></span>
+										<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
+										<p class="t_info mt10">
+											<span class="c_primary">STYLE24의 새로운 가족이 되어 주세요!</span>
+										</p>
+									</div>
+									<div class="btn_group_flex">
+										<div>
+											<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
+												<span>회원가입</span>
+											</button>
+										</div>
+									</div>
+								</div>
+							</div>
+							<!-- //휴대폰,아이핀 본인인증으로 아이디, 비밀번호찾기 실패일경우 -->
+						</div>
+						<!-- //아이디찾기 결과 -->
 					</div>
 					<!-- //아이디찾기 -->
 					<!-- 비밀번호찾기 -->
-					<div class="form_group">
+					<div class="form_group" style="display: none;">
 						<!-- 라디오탭 -->
-						<div class="radio_nav">
+						<div id="searchPwdDiv" class="radio_nav">
 							<ul class="form_field">
 								<li class="ui_col_4">
 									<input type="radio" name="radios" id="rdi-4" value="4" checked><label for="rdi-4"> <span>회원정보인증</span> </label>
@@ -186,86 +262,77 @@
 							</div>
 						</div>
 						 <!-- //라디오탭 -->
-					</div>
-					<!-- //비밀번호찾기 -->
-				</div>
-
-				<!-- 아이디찾기 결과 -->
-				<div id="succeedCustId" class="form_wrap form_full" style="display: none;">
-					<div class="find_result clear">
-						<div class="form_info">
-							<span class="ico_content_find"></span>
-							<p>아이디 찾기 결과 안내</p>
-						</div>
-						<div class="form_print_bar mt40">
-							<ul>
-								<li>
-									<span class="t_span">아이디</span>
-									<span id="resultId" name="resultId" class="c_primary bold" data-font="lato"></span>
-								</li>
-								<li>
-									<span class="t_span">가입일자</span>
-									<span id="joinDt" name="joinDt" class="bold" data-font="lato"></span>
-								</li>
-								<li id="liJoinPath">
-									<span class="t_span">가입경로</span>
-									<span id="joinPath" name="joinPath" class="bold" data-font="lato"></span>
-								</li>
-							</ul>
-						</div>
-						<div class="btn_group_flex">
-							<div>
-								<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인 하기</button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- //아이디찾기 결과 -->
-				<!-- 회원정보로 아이디찾기 실패일경우 -->
-				<div id="failCustId" class="form_wrap form_full" style="display: none;">
-					<div class="find_result clear">
-						<div class="form_info">
-							<span class="ico_content_none"></span>
-							<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
-							<p class="t_info mt10">
-								정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
-							</p>
-						</div>
-						<div class="btn_group_flex">
-							<div>
-								<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
-									<span>회원가입</span>
-								</button>
+						<!-- 임시비밀번호 발급 -->
+						<div class="form_wrap form_full">
+							<div id="sendEmailDiv" class="find_result clear" style="display: none;">
+								<div class="form_info">
+									<span class="ico_content_mail"></span>
+									<p>아래의 이메일로 임시비밀번호가 발급되었습니다.</p>
+									<p class="t_info mt10">
+										로그인 시 비밀번호를 새로 설정하신 후 이용하실 수 있습니다.
+									</p>
+								</div>
+								<div class="form_print_bar mt40">
+									<span id="sendEmail" class="c_primary bold" data-font="lato"></span>
+								</div>
+								<div class="btn_group_block btn_group_md ui_row">
+									<div class="ui_col_12">
+										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">
+											<span>로그인 하기</span>
+										</button>
+									</div>
+								</div>
 							</div>
-							<div>
-								<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
-									<span>다시 찾기</span>
-								</button>
+							<!-- //임시비밀번호 발급 -->
+							<!-- 회원정보로 아이디, 비밀번호 찾기 실패일경우 -->
+							<div id="failCustInfoPwd" class="form_wrap form_full" style="display: none;">
+								<div class="find_result clear">
+									<div class="form_info">
+										<span class="ico_content_none"></span>
+										<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
+										<p class="t_info mt10">
+											정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
+										</p>
+									</div>
+									<div class="btn_group_flex">
+										<div>
+											<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
+												<span>회원가입</span>
+											</button>
+										</div>
+										<div>
+											<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_PWD_FIND);">
+												<span>다시 찾기</span>
+											</button>
+										</div>
+									</div>
+								</div>
 							</div>
-						</div>
-					</div>
-				</div>
-				<!-- //회원정보로 아이디찾기 실패일경우 -->
-				<!-- 휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
-				<div id="failAuthentication" class="form_wrap form_full" style="display: none;">
-					<div class="find_result clear">
-						<div class="form_info">
-							<span class="ico_content_none"></span>
-							<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
-							<p class="t_info mt10">
-								<span class="c_primary">STYLE24의 새로운 가족이 되어 주세요!</span>
-							</p>
-						</div>
-						<div class="btn_group_flex">
-							<div>
-								<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
-									<span>회원가입</span>
-								</button>
+							<!-- 회원정보로 아이디, 비밀번호 찾기 실패일경우 -->
+							<!-- 휴대폰,아이핀 본인인증으로 아이디, 비밀번호찾기 실패일경우 -->
+							<div id="failAuthenticationPwd" class="form_wrap form_full" style="display: none;">
+								<div class="find_result clear">
+									<div class="form_info">
+										<span class="ico_content_none"></span>
+										<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
+										<p class="t_info mt10">
+											<span class="c_primary">STYLE24의 새로운 가족이 되어 주세요!</span>
+										</p>
+									</div>
+									<div class="btn_group_flex">
+										<div>
+											<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
+												<span>회원가입</span>
+											</button>
+										</div>
+									</div>
+								</div>
 							</div>
+							<!-- //휴대폰,아이핀 본인인증으로 아이디, 비밀번호찾기 실패일경우 -->
 						</div>
 					</div>
+					<!-- //비밀번호찾기 -->
 				</div>
-				<!-- //휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
 			</div>
 		</section>
 		<!-- ★ 컨텐츠 종료 -->
@@ -276,6 +343,7 @@
 	const sEncData = [[${sEncData}]];   //인증 후 해당 페이지로 리다이렉트함
 	const authMethod = [[${authMethod}]]; //인증 후 해당 페이지로 리다이렉트함
 	const custParams = [[${custParams}]];
+	const pageGb = [[${pageGb}]];
 
 	// 회원정보로 아이디 찾기
 	$('#btnCustIdConfirm').on('click', function() {
@@ -302,41 +370,11 @@
 		gagajf.ajaxJsonSubmit('/customer/id/find', jsonData, fnCustIdConfirmCallBack);
 	});
 
-	$('#btnCustPwdConfirm').on('click',function() {
-		let custInfo = $('#searchCustPwd').serializeObject();
-
-		if(gagajf.isNull(custInfo.custId)) {
-			mcxDialog.alert("아이디를 입력해주세요.");
-			return;
-		}
-
-		if (gagajf.isNull(custInfo.custNm)) {
-			mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
-			return;
-		}
-
-		if (gagajf.isNull(custInfo.email)) {
-			mcxDialog.alert('이메일을 입력하여 주세요.');
-			return;
-		}
-
-		if (!fnCheckValidationEmail(custInfo.email)) {
-			mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
-			return;
-		}
-
-		custInfo.authMethod = 'custInfo';
-		let jsonData = JSON.stringify(custInfo);
-		//console.log('jsonData', jsonData);
-		gagajf.ajaxJsonSubmit('/customer/password/find/custinfo', jsonData, fnCustPwdConfirmCallBack);
-	});
-
 	// 아이디 찾기결과
 	var fnCustIdConfirmCallBack = function (result) {
 		$('#btnCustIdConfirm').hide();
-		$('#searchDiv').hide();
-		$('.regist_box').hide();
-		$('.form_field').hide();
+		$('#searchCustIdDiv').hide();
+		$('#searchCustId').hide();
 		if (result.isFind) {
 			fnGetDisplayCustIdSucc(result.authMethod, result);
 		} else {
@@ -344,7 +382,7 @@
 		}
 	};
 
-	// 찾기성공
+	// 아이디 찾기성공
 	var fnGetDisplayCustIdSucc = function (authMethod, custInfo) {
 		$('#resultId').text(custInfo.maskingCustId);
 		$('#joinDt').text(fnToDateFormat(custInfo.joinDt));
@@ -356,25 +394,51 @@
 		$('#succeedCustId').show();
 	};
 
-	// 찾기실패
+	// 아이디 찾기실패
 	var fnGetDisplayCustIdFail = function (authMethod) {
-		$('.registration_nav').hide();
 		if (authMethod === 'custInfo') {
-			$('#failCustId').show();
+			$('#failCustInfoId').show();
 		}
 		if (authMethod === 'mobile' || authMethod === 'ipin') {
-			$('#failAuthentication').show();
+			$('#failAuthenticationId').show();
 		}
 	};
 
+	// 비밀번호 찾기
+	$('#btnCustPwdConfirm').on('click',function() {
+		let custInfo = $('#searchCustPwd').serializeObject();
+
+		if(gagajf.isNull(custInfo.custId)) {
+			mcxDialog.alert("아이디를 입력해주세요.");
+			return;
+		}
+
+		if (gagajf.isNull(custInfo.custNm)) {
+			mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
+			return;
+		}
+
+		if (gagajf.isNull(custInfo.email)) {
+			mcxDialog.alert('이메일을 입력하여 주세요.');
+			return;
+		}
+
+		if (!fnCheckValidationEmail(custInfo.email)) {
+			mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
+			return;
+		}
+
+		custInfo.authMethod = 'custInfo';
+		let jsonData = JSON.stringify(custInfo);
+		//console.log('jsonData', jsonData);
+		gagajf.ajaxJsonSubmit('/customer/password/find/custinfo', jsonData, fnCustPwdConfirmCallBack);
+	});
 
 	 // 찾기결과
 	var fnCustPwdConfirmCallBack = function (result) {
-		$('#btnInfoConfirm').hide();
-		$('.form_field').hide();
-		$('.registration_cont').hide();
-		$('.registration_nav').hide();
-		$('#searchDiv').hide();
+		$('#btnCustPwdConfirm').hide();
+		$('#searchPwdDiv').hide();
+		$('#searchCustPwd').hide();
 		if (result.isFind) {
 			fnGetDisplayCustPwdSucc(result.authMethod, result);
 		} else {
@@ -395,13 +459,11 @@
 
  	// 찾기실패
 	var fnGetDisplayCustPwdFail = function (authMethod) {
-		$('.form_head').hide();
-		$('.registration_nav').hide();
 		if (authMethod === 'custInfo') {
-			$('#failCustId').show();
+			$('#failCustInfoPwd').show();
 		}
 		if (authMethod === 'mobile' || authMethod === 'ipin') {
-			$('#failAuthentication').show();
+			$('#failAuthenticationPwd').show();
 		}
 	};
 
@@ -463,10 +525,16 @@
 		}
 	};
 
-	$(document).ready(function () {
-		const $searchCustId = $('#searchCustId');
-		const $searchCustPwd = $('#searchCustPwd');
+	$('.btn_close').on('click', function () {
+		let referrer = document.referrer;
+		if (referrer.indexOf('/customer/nice/certify/callback') > -1 ) {
+			cfnGoToPage(_PAGE_LOGIN);
+		} else {
+			history.back(-1);
+		}
+	});
 
+	$(document).ready(function () {
 		if (!gagajf.isNull(sEncData) && 'custId' === custParams) {
 			fnCustIdNiceCallBack(sEncData, authMethod);
 		}
@@ -474,38 +542,24 @@
 		if (!gagajf.isNull(sEncData) && 'custPwd' === custParams) {
 			fnCustPwdNiceCallBack(sEncData, authMethod);
 		}
-		let index = custParams !== 'custId' ? 1 : 0;
-		// $searchCustId.hide();
-		// $searchCustPwd.hide();
-		//
-		// if (index === 0 ) {
-		// 	$searchCustId.show();
-		// } else {
-		// 	$searchCustPwd.show();
-		// }
-
+		let index = pageGb !== 'custId' ? 1 : 0;
 		$('.registration_tap > .form_group').hide();
 		$('.registration_tap > .form_group').eq(index).show();
 		$(document).on('click','.registration_nav > ul > li',function(e){
-			// $searchCustId.hide();
-			// $searchCustPwd.hide();
+			$('#searchCustId')[0].reset();
+			$('#searchCustPwd')[0].reset();
 			$(this).addClass('active').siblings().removeClass('active');
 			$('.registration_tap > .form_group').hide();
 			$('.registration_tap > .form_group').eq($(this).index()).show();
-			// if ($(this).index() === 0) {
-			// 	$searchCustId.show();
-			// } else {
-			// 	$searchCustPwd.show();
-			// }
 			return false;
 		});
 
 		/* 회원정보인증/휴대폰인증/아이핀인증_taps */
 		$('.radio_tap > .form_group').hide();
-		$('.radio_tap > .form_group').eq(index).show();
+		$('.radio_tap > .form_group').eq(0).show();
 		$('.radio_tap').each(function(){
 			$(this).find('.form_group').hide();
-			$(this).find('.form_group').eq(index).show();
+			$(this).find('.form_group').eq(0).show();
 		});
 
 		$(document).on('click','.radio_nav > ul > li',function(e){

src/main/webapp/WEB-INF/views/mob/customer/IdAndPwdFindFormMob2.html

@@ -1,466 +0,0 @@
-<!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  : IdAndPwdFindFormMob.html
- * @desc    : 아이디 & 비밀번호 찾기 Page
- *============================================================================
- * STYLE24
- * Copyright(C) 2020 TSIT, All rights reserved.
- *============================================================================
- * VER  DATE         AUTHOR      DESCRIPTION
- * ===  ===========  ==========  =============================================
- * 1.0  2021.04.12   jsshin     최초 작성
- *******************************************************************************
- -->
-<body>
-<th:block layout:fragment="content">
-	<main class="container mb">
-		<!-- ★ 컨텐츠 시작 -->
-		<section class="content mb_idInquiry_1">
-			<div class="inner">
-				<div class="close">
-					<a href="javascript:history.back(-1);" class="btn_close"><span></span><span></span></a>
-				</div>
-			</div>
-			<div class="inner">
-				<h2 class="title">아이디/비밀번호찾기</h2>
-			</div>
-			<div class="inner">
-				<div class="registration_nav">
-					<ul class="tab_btn">
-						<li class="active">아이디찾기</li>
-						<li>비밀번호찾기</li>
-					</ul>
-				</div>
-				<div class="registration_tap">
-					<div class="form_group">
-						<!-- 라디오탭 -->
-						<div id="searchDiv" class="radio_nav">
-							<ul class="form_field">
-								<li class="ui_col_4 active">
-									<input type="radio" name="radio1" id="rdi1-1" value="1" checked><label for="rdi1-1"> <span>회원정보인증</span> </label>
-								</li>
-								<li class="ui_col_4">
-									<input type="radio" name="radio1" id="rdi1-2" value="2"><label for="rdi1-2"> <span>휴대폰인증</span> </label>
-								</li>
-								<li class="ui_col_4">
-									<input type="radio" name="radio1" id="rdi1-3" value="3"><label for="rdi1-3"> <span>아이핀인증</span> </label>
-								</li>
-							</ul>
-						</div>
-						<!-- //라디오탭 -->
-						<!-- 라디오탭 -->
-						<div class="radio_tap">
-							<div class="form_group">
-								<form id="searchCustId" name="searchCustId" class="form_wrap form_full" method="post" style="display: none;">
-									<div>
-										<div class="form_field mt0">
-											<input type="text" name="custNm" placeholder="이름" id="custNm" class="form_control" maxlength="30"/>
-										</div>
-										<div class="form_field">
-											<input type="text" name="birthYmd" placeholder="생년월일 8자리 (예:19880912)" id="birthYmd" class="form_control"/>
-										</div>
-										<div class="form_field">
-											<input type="text" name="email" placeholder="이메일" id="email" class="form_control"/>
-										</div>
-										<div class="btn_group_flex">
-											<div>
-												<button type="button" id="btnCustIdConfirm" class="btn btn_dark">확인</button>
-											</div>
-										</div>
-									</div>
-								</form>
-							</div>
-							<div class="form_group">
-								<form id="searchCustPwd" name="searchCustPwd" class="form_wrap form_full" method="post" style="display: none;">
-									<div>
-										<div class="form_field mt0">
-											<input type="text" name="custId" placeholder="아이디" class="form_control" minlength="4" maxlength="12"/>
-										</div>
-										<div class="form_field">
-											<input type="text" name="custNm" placeholder="이름" class="form_control" maxlength="30"/>
-										</div>
-										<div class="form_field">
-											<input type="text" name="email" placeholder="이메일" class="form_control" maxlength="30"/>
-										</div>
-										<div class="btn_group_flex">
-											<div>
-												<button type="button" id="btnCustPwdConfirm" class="btn btn_dark">확인</button>
-											</div>
-										</div>
-									</div>
-								</form>
-							</div>
-							<div class="form_group" style="display: none;">
-								<div class="form_wrap form_full">
-									<div>
-										<div class="txt">
-												회원님의 명의로 등록된 휴대폰으로<br>
-												본인확인을 진행합니다.
-										</div>
-										<div class="btn_group_flex">
-											<div>
-												<button type="button" id="btnCellPhoneCertify" class="btn btn_dark">
-													본인명의 휴대폰으로 인증
-												</button>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="form_group" style="display: none;">
-								<div class="form_wrap form_full">
-									<div>
-										<div class="txt">
-											아이핀 인증을 통해 찾을 수 있습니다.
-										</div>
-										<div class="btn_group_flex">
-											<div>
-												<button type="button" id="btnIpinCertify" class="btn btn_dark">
-													아이핀 인증
-												</button>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- 아이디찾기 결과 -->
-				<div id="succeedCustId" class="form_wrap form_full" style="display: none;">
-					<div class="find_result clear">
-						<div class="form_info">
-							<span class="ico_content_find"></span>
-							<p>아이디 찾기 결과 안내</p>
-						</div>
-						<div class="form_print_bar mt40">
-							<ul>
-								<li>
-									<span class="t_span">아이디</span>
-									<span id="resultId" name="resultId" class="c_primary bold" data-font="lato"></span>
-								</li>
-								<li>
-									<span class="t_span">가입일자</span>
-									<span id="joinDt" name="joinDt" class="bold" data-font="lato"></span>
-								</li>
-								<li id="liJoinPath">
-									<span class="t_span">가입경로</span>
-									<span id="joinPath" name="joinPath" class="bold" data-font="lato"></span>
-								</li>
-							</ul>
-						</div>
-						<div class="btn_group_flex">
-							<div>
-								<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인 하기</button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- //아이디찾기 결과 -->
-				<!-- 회원정보로 아이디찾기 실패일경우 -->
-				<div id="failCustId" class="form_wrap form_full" style="display: none;">
-					<div class="find_result clear">
-						<div class="form_info">
-							<span class="ico_content_none"></span>
-							<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
-							<p class="t_info mt10">
-								정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
-							</p>
-						</div>
-						<div class="btn_group_flex">
-							<div>
-								<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
-									<span>회원가입</span>
-								</button>
-							</div>
-							<div>
-								<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
-									<span>다시 찾기</span>
-								</button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- //회원정보로 아이디찾기 실패일경우 -->
-				<!-- 휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
-				<div id="failAuthentication" class="form_wrap form_full" style="display: none;">
-					<div class="find_result clear">
-						<div class="form_info">
-							<span class="ico_content_none"></span>
-							<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
-							<p class="t_info mt10">
-								<span class="c_primary">STYLE24의 새로운 가족이 되어 주세요!</span>
-							</p>
-						</div>
-						<div class="btn_group_flex">
-							<div>
-								<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
-									<span>회원가입</span>
-								</button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- //휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
-			</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}]]; //인증 후 해당 페이지로 리다이렉트함
-	const custParams = [[${custParams}]];
-
-	// 회원정보로 아이디 찾기
-	$('#btnCustIdConfirm').on('click', function() {
-		let custInfo = $('#searchCustId').serializeObject();
-
-		if (gagajf.isNull(custInfo.custNm)) {
-			mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
-			return;
-		}
-
-		if (gagajf.isNull(custInfo.email)) {
-			mcxDialog.alert('이메일을 입력하여 주세요.');
-			return;
-		}
-
-		if (!fnCheckValidationEmail(custInfo.email)) {
-			mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
-			return;
-		}
-		custInfo.authMethod = 'custInfo';
-
-		let jsonData = JSON.stringify(custInfo);
-		//console.log('jsonData', jsonData);
-		gagajf.ajaxJsonSubmit('/customer/id/find', jsonData, fnCustIdConfirmCallBack);
-	});
-
-	$('#btnCustPwdConfirm').on('click',function() {
-		let custInfo = $('#searchCustPwd').serializeObject();
-
-		if(gagajf.isNull(custInfo.custId)) {
-			mcxDialog.alert("아이디를 입력해주세요.");
-			return;
-		}
-
-		if (gagajf.isNull(custInfo.custNm)) {
-			mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
-			return;
-		}
-
-		if (gagajf.isNull(custInfo.email)) {
-			mcxDialog.alert('이메일을 입력하여 주세요.');
-			return;
-		}
-
-		if (!fnCheckValidationEmail(custInfo.email)) {
-			mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
-			return;
-		}
-
-		custInfo.authMethod = 'custInfo';
-		let jsonData = JSON.stringify(custInfo);
-		//console.log('jsonData', jsonData);
-		gagajf.ajaxJsonSubmit('/customer/password/find/custinfo', jsonData, fnCustPwdConfirmCallBack);
-	});
-
-	// 아이디 찾기결과
-	var fnCustIdConfirmCallBack = function (result) {
-		$('#btnCustIdConfirm').hide();
-		$('#searchDiv').hide();
-		$('.regist_box').hide();
-		$('.form_field').hide();
-		if (result.isFind) {
-			fnGetDisplayCustIdSucc(result.authMethod, result);
-		} else {
-			fnGetDisplayCustIdFail(result.authMethod);
-		}
-	};
-
-	// 찾기성공
-	var fnGetDisplayCustIdSucc = function (authMethod, custInfo) {
-		$('#resultId').text(custInfo.maskingCustId);
-		$('#joinDt').text(fnToDateFormat(custInfo.joinDt));
-		let joinPath = fnSnsJoinPath(custInfo); // 가입경로 : 직접이면 표시 안함, 간편가입 연동 표시
-		if (!gagajf.isNull(joinPath)) {
-			$('#liJoinPath').show();
-			$('#joinPath').text(joinPath);
-		}
-		$('#succeedCustId').show();
-	};
-
-	// 찾기실패
-	var fnGetDisplayCustIdFail = function (authMethod) {
-		$('.registration_nav').hide();
-		if (authMethod === 'custInfo') {
-			$('#failCustId').show();
-		}
-		if (authMethod === 'mobile' || authMethod === 'ipin') {
-			$('#failAuthentication').show();
-		}
-	};
-
-
-	 // 찾기결과
-	var fnCustPwdConfirmCallBack = function (result) {
-		$('#btnInfoConfirm').hide();
-		$('.form_field').hide();
-		$('.registration_cont').hide();
-		$('.registration_nav').hide();
-		$('#searchDiv').hide();
-		if (result.isFind) {
-			fnGetDisplayCustPwdSucc(result.authMethod, result);
-		} else {
-			fnGetDisplayCustPwdFail(result.authMethod);
-		}
-	};
-
-	// 찾기성공
-	var fnGetDisplayCustPwdSucc = function (authMethod, custInfo) {
-		if (custInfo.authMethod === 'custInfo') {
-			$('#sendEmail').text(custInfo.maskingEmail)
-			$('#sendEmailDiv').show();
-		}
-		if (authMethod === 'mobile' || authMethod === 'ipin') {
-			cfnGoToPage(_PAGE_CUSTOMER_PWD_CHANGE_FIND);
-		}
-	};
-
- 	// 찾기실패
-	var fnGetDisplayCustPwdFail = function (authMethod) {
-		$('.form_head').hide();
-		$('.registration_nav').hide();
-		if (authMethod === 'custInfo') {
-			$('#failCustId').show();
-		}
-		if (authMethod === 'mobile' || authMethod === 'ipin') {
-			$('#failAuthentication').show();
-		}
-	};
-
-	// 가입경로
-	var fnSnsJoinPath = function (custInfo) {
-		let snsType = '';
-		if (!gagajf.isNull(custInfo.ysJoinDt)) {
-			snsType += 'YES24';
-		}
-		if (!gagajf.isNull(custInfo.nvJoinDt)) {
-			if (!gagajf.isNull(snsType)) {
-				snsType += '/'
-			}
-			snsType = 'NAVER'
-		}
-		if (!gagajf.isNull(custInfo.kkJoinDt)) {
-			if (!gagajf.isNull(snsType)) {
-				snsType += '/'
-			}
-			snsType += 'KAKAO';
-		}
-		if (!gagajf.isNull(snsType)) {
-			snsType += ' 연동';
-		} else {
-			snsType += 'STYLE24';
-		}
-		return snsType;
-	};
-
-	// 휴대폰 인증
-	$('#btnCellPhoneCertify').on('click', function () {
-		cfnOpenCellphoneCertify(_PAGE_CUSTOMER_ID_FIND, custParams);
-	});
-
-	// 아이핀 인증
-	$('#btnIpinCertify').on('click', function () {
-		cfnOpenIpinCertify(_PAGE_CUSTOMER_ID_FIND, custParams);
-	});
-
-	// 나이스 본인인증 후 콜백
-	var fnCustIdNiceCallBack = function(encData, authMethod) {
-		if (!gagajf.isNull(encData)) {
-			let custInfo = {};
-			custInfo.encData = encData;
-			custInfo.authMethod = authMethod;
-			let jsonData = JSON.stringify(custInfo);
-			gagajf.ajaxJsonSubmit('/customer/id/find', jsonData, fnCustIdConfirmCallBack)
-		}
-	};
-
-	 // 나이스 본인인증 후 콜백
-	var fnCustPwdNiceCallBack = function(encData, authMethod) {
-		if (!gagajf.isNull(encData)) {
-			let custInfo = {};
-			custInfo.encData = encData;
-			custInfo.authMethod = authMethod;
-			let jsonData = JSON.stringify(custInfo);
-			gagajf.ajaxJsonSubmit('/customer/password/find/certify', jsonData, fnCustPwdConfirmCallBack)
-		}
-	};
-
-	$(document).ready(function () {
-		const $searchCustId = $('#searchCustId');
-		const $searchCustPwd = $('#searchCustPwd');
-
-		if (!gagajf.isNull(sEncData) && 'custId' === custParams) {
-			fnCustIdNiceCallBack(sEncData, authMethod);
-		}
-
-		if (!gagajf.isNull(sEncData) && 'custPwd' === custParams) {
-			fnCustPwdNiceCallBack(sEncData, authMethod);
-		}
-		let index = custParams !== 'custId' ? 1 : 0;
-		$searchCustId.hide();
-		$searchCustPwd.hide();
-
-		if (index === 0 ) {
-			$searchCustId.show();
-		} else {
-			$searchCustPwd.show();
-		}
-		// $('.registration_tap > .form_group').hide();
-		// $('.registration_tap > .form_group').eq(index).show();
-		$(document).on('click','.registration_nav > ul > li',function(e){
-			$searchCustId.hide();
-			$searchCustPwd.hide();
-			$(this).addClass('active').siblings().removeClass('active');
-			$('.registration_tap > .form_group').hide();
-			$('.registration_tap > .form_group').eq($(this).index()).show();
-			console.log('$(this).index()', $(this).index());
-			if ($(this).index() === 0) {
-				$searchCustId.show();
-			} else {
-				$searchCustPwd.show();
-			}
-			return false;
-		});
-
-		/* 회원정보인증/휴대폰인증/아이핀인증_taps */
-		$('.radio_tap > .form_group').hide();
-		$('.radio_tap > .form_group').eq(index).show();
-		$('.radio_tap').each(function(){
-			$(this).find('.form_group').hide();
-			$(this).find('.form_group').eq(index).show();
-		});
-
-		$(document).on('click','.radio_nav > ul > li',function(e){
-			$(this).addClass('active').siblings().removeClass('active');
-			$(this).find('input').prop("checked", true);
-			$(this).parent().parent().parent().find('.radio_tap > .form_group').hide();
-			$(this).parent().parent().parent().find('.radio_tap > .form_group').eq($(this).index()).show();
-			return false;
-		});
-	});
-
-/*]]>*/
-</script>
-
-</th:block>
-</body>
-</html>

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

@@ -0,0 +1,549 @@
+<!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  : IdAndPwdFindFormWeb.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"> <!-- 페이지특정 클래스 = find -->
+			<div class="cont_head">
+				<h4>아이디&#47;비밀번호 찾기</h4>
+			</div>
+			<div class="cont_body">
+				<div class="form_wrap form_col_c">
+					<div class="registration_nav">
+						<ul>
+							<li th:class="${pageGb == 'custId'? 'active' : ''}"><a href="javascript:void(0)">아이디 찾기</a></li>
+							<li th:class="${pageGb == 'custPwd'? 'active' : ''}"><a href="javascript:void(0)">비밀번호 찾기</a></li>
+						</ul>
+					</div>
+					<!-- new -->
+					<div class="registration_tap">
+						<div class="form_group">
+							<!-- 아이디찾기일경우 -->
+							<div id="searchCustIdDiv" class="form_field">
+								<div>
+									<input type="radio" name="rdi-mbCertify1" id="rdi-mbCertify11" value="1" checked/>
+									<label for="rdi-mbCertify11"><span>회원정보인증</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-mbCertify1" id="rdi-mbCertify12" value="2"/>
+									<label for="rdi-mbCertify12"><span>휴대폰인증</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-mbCertify1" id="rdi-mbCertify13" value="3"/>
+									<label for="rdi-mbCertify13"><span>아이핀인증</span></label>
+								</div>
+							</div>
+							<div class="registration_cont">
+								<!-- 회원정보인증 -->
+								<div class="regist_box on">
+									<form id="searchCustId" name="searchCustId" method="post">
+										<div class="form_field">
+											<label class="input_label sr-only">이름</label>
+											<div class="ui_col_12">
+												<div class="input_wrap">
+													<input type="text" name="custNm" placeholder="이름" class="form_control" maxlength="30"/>
+												</div>
+											</div>
+										</div>
+										<div class="form_field">
+											<label class="input_label sr-only">생년월일 8자리 (예:19880912)</label>
+											<div class="ui_col_12">
+												<div class="input_wrap">
+													<input type="text" name="birthYmd" placeholder="생년월일 8자리 (예:19880912)" id="birthYmd" class="form_control" maxlength="8" data-valid-type="numeric"/>
+												</div>
+											</div>
+										</div>
+										<div class="form_field">
+											<label class="input_label sr-only">이메일</label>
+											<div class="ui_col_12">
+												<div class="input_wrap">
+													<input type="text" name="email" placeholder="이메일" class="form_control"/>
+												</div>
+											</div>
+										</div>
+										<div class="btn_group_block ui_row mt20">
+											<div class="ui_col_12">
+												<button type="button" id="btnCustIdConfirm" class="btn btn_dark btn_block">
+													<span>확인</span>
+												</button>
+											</div>
+										</div>
+									</form>
+								</div>
+								<!-- //회원정보인증 -->
+								<!-- 휴대폰인증 -->
+								<div class="regist_box" style="display: none;">
+									<div class="txt">
+										<p>회원님의 명의로 등록된 휴대폰으로 본인확인을 진행합니다.</p>
+									</div>
+									<div class="ui_row mt20">
+										<div class="ui_col_12">
+											<button type="button" id="btnIdPhoneCertify" class="btn btn_dark btn_block" onclick="fnCellPhoneCertify('custId');">
+												<span>본인명의 휴대폰으로 인증</span>
+											</button>
+										</div>
+									</div>
+								</div>
+								<!-- //휴대폰인증 -->
+								<!-- 아이핀인증 -->
+								<div class="regist_box" style="display: none;">
+									<div class="txt">
+										<p>아이핀 인증을 통해 찾을 수 있습니다.</p>
+									</div>
+									<div class="ui_row mt20">
+										<div class="ui_col_12">
+											<button type="button" id="btnIdIpinCertify" class="btn btn_dark btn_block" onclick="fnIpinCertify('custId');">
+												<span>아이핀 인증</span>
+											</button>
+										</div>
+									</div>
+								</div>
+								<!-- //아이핀인증 -->
+							</div>
+							<!-- //아이디찾기일경우 -->
+							<!-- 아이디찾기 성공일경우 -->
+							<div id="succeedCustId" class="find_result clear hide">
+								<div class="form_info">
+									<span class="ico_content_find"></span>
+									<p>아이디 찾기 결과 안내</p>
+								</div>
+								<div class="form_print_bar mt40">
+									<ul>
+										<li>
+											<span class="t_span">아이디</span>
+											<span id="resultId" name="resultId" class="c_primary bold" data-font="lato"></span>
+										</li>
+										<li>
+											<span class="t_span">가입일자</span>
+											<span id="joinDt" name="joinDt" class="bold" data-font="lato"></span>
+										</li>
+										<li id="liJoinPath" class="hide">
+											<span class="t_span">가입경로</span>
+											<span id="joinPath" name="joinPath" class="bold" data-font="lato"></span>
+										</li>
+									</ul>
+								</div>
+								<div class="btn_group_block btn_group_md ui_row">
+									<div class="ui_col_12">
+										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">
+											<span>로그인 하기</span>
+										</button>
+									</div>
+								</div>
+							</div>
+							<!-- 회원정보로 아이디찾기 실패일경우 -->
+							<div id="failCustInfoId" class="find_result clear hide">
+								<div class="form_info">
+									<span class="ico_content_none"></span>
+									<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
+									<p class="t_info mt10">
+										정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
+									</p>
+								</div>
+								<div class="btn_group_block btn_group_md ui_row">
+									<div class="ui_col_6">
+										<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
+											<span>회원가입</span>
+										</button>
+									</div>
+									<div class="ui_col_6">
+										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
+											<span>다시 찾기</span>
+										</button>
+									</div>
+								</div>
+							</div>
+							<!-- //회원정보로 아이디찾기 실패일경우 -->
+							<!-- 휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
+							<div id="failAuthenticationId" class="find_result clear hide">
+								<div class="form_info">
+									<span class="ico_content_none"></span>
+									<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
+									<p class="t_info mt10">
+										<span class="c_primary">STYLE24의 새로운 가족이 되어 주세요!</span>
+									</p>
+								</div>
+								<div class="btn_group_block btn_group_md ui_row">
+									<div class="ui_col_12">
+										<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
+											<span>회원가입</span>
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="form_group">
+							<!-- 비밀번호찾기일경우 -->
+							<div id="searchPwdDiv" class="form_field">
+								<div>
+									<input type="radio" name="rdi-mbCertify2" id="rdi-mbCertify21" value="" checked="">
+									<label for="rdi-mbCertify21"><span>회원정보인증</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-mbCertify2" id="rdi-mbCertify22" value="">
+									<label for="rdi-mbCertify22"><span>휴대폰인증</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-mbCertify2" id="rdi-mbCertify23" value="">
+									<label for="rdi-mbCertify23"><span>아이핀인증</span></label>
+								</div>
+							</div>
+							<div class="registration_cont">
+								<!-- 회원정보인증 -->
+								<div class="regist_box on">
+									<form id="searchCustPwd" name="searchCustPwd" method="post">
+										<div class="form_field form_full">
+											<label class="input_label sr-only">아이디</label>
+											<div class="ui_col_12">
+												<div class="input_wrap">
+													<input type="text" name="custId" placeholder="아이디" id="custId" class="form_control" minlength="4" maxlength="12"/>
+												</div>
+											</div>
+										</div>
+										<div class="form_field">
+											<label class="input_label sr-only">이름</label>
+											<div class="ui_col_12">
+												<div class="input_wrap">
+													<input type="text" name="custNm" placeholder="이름" class="form_control"maxlength="30"/>
+												</div>
+											</div>
+										</div>
+										<div class="form_field">
+											<label class="input_label sr-only">이메일</label>
+											<div class="ui_col_12">
+												<div class="input_wrap">
+													<input type="text" name="email" placeholder="이메일"  class="form_control"maxlength="30"/>
+												</div>
+											</div>
+										</div>
+										<div class="btn_group_block ui_row mt20">
+											<div class="ui_col_12">
+												<button type="button" id="btnCustPwdConfirm" class="btn btn_dark btn_block"><span>확인</span></button>
+											</div>
+										</div>
+									</form>
+								</div>
+								<!-- //회원정보인증 -->
+								<!-- 휴대폰인증 -->
+								<div class="regist_box">
+									<div class="txt">
+										<p>회원님의 명의로 등록된 휴대폰으로<br>본인확인을 진행합니다.</p>
+									</div>
+									<div class="ui_row mt20">
+										<div class="ui_col_12">
+											<button type="button" id="btnPwdPhoneCertify" class="btn btn_dark btn_block" onclick="fnCellPhoneCertify('custPwd');">
+												<span>본인명의 휴대폰으로 인증</span>
+											</button>
+										</div>
+									</div>
+								</div>
+								<!-- //휴대폰인증 -->
+								<!-- 아이핀인증 -->
+								<div class="regist_box">
+									<div class="txt">
+										<p>아이핀 인증을 통해 찾을 수 있습니다.</p>
+									</div>
+									<div class="ui_row mt20">
+										<div class="ui_col_12">
+											<button type="button" id="btnPwdIpinCertify" class="btn btn_dark btn_block" onclick="fnIpinCertify('custPwd');">
+												<span>아이핀 인증</span>
+											</button>
+										</div>
+									</div>
+								</div>
+								<!-- //아이핀인증 -->
+							</div>
+							<!-- 임시비밀번호 발급 -->
+							<div id="sendEmailDiv" class="find_result clear hide">
+								<div class="form_info">
+									<span class="ico_content_mail"></span>
+									<p>아래의 이메일로 임시비밀번호가 발급되었습니다.</p>
+									<p class="t_info mt10">
+										로그인 시 비밀번호를 새로 설정하신 후 이용하실 수 있습니다.
+									</p>
+								</div>
+								<div class="form_print_bar mt40">
+									<p id="sendEmail" class="c_primary bold" data-font="lato"></p>
+								</div>
+								<div class="btn_group_block btn_group_md ui_row">
+									<div class="ui_col_12">
+										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">
+											<span>로그인 하기</span>
+										</button>
+									</div>
+								</div>
+							</div>
+							<!-- //임시비밀번호 발급 -->
+							<!-- 회원정보로 아이디찾기 실패일경우 -->
+							<div id="failCustInfoPwd" class="find_result clear hide">
+								<div class="form_info">
+									<span class="ico_content_none"></span>
+									<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
+									<p class="t_info mt10">
+										정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
+									</p>
+								</div>
+								<div class="btn_group_block btn_group_md ui_row">
+									<div class="ui_col_6">
+										<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
+											<span>회원가입</span>
+										</button>
+									</div>
+									<div class="ui_col_6">
+										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_PWD_FIND);">
+											<span>다시 찾기</span>
+										</button>
+									</div>
+								</div>
+							</div>
+							<!-- //회원정보로 아이디찾기 실패일경우 -->
+							<!-- 휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
+							<div id="failAuthenticationPwd" class="find_result clear hide">
+								<div class="form_info">
+									<span class="ico_content_none"></span>
+									<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
+									<p class="t_info mt10">
+										<span class="c_primary">STYLE24의 새로운 가족이 되어 주세요!</span>
+									</p>
+								</div>
+								<div class="btn_group_block btn_group_md ui_row">
+									<div class="ui_col_12">
+										<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
+											<span>회원가입</span>
+										</button>
+									</div>
+								</div>
+							</div>
+							<!-- //휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
+						</div>
+						<!-- //비밀번호찾기일경우 -->
+					</div>
+			</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[*/
+	const pageGb = [[${pageGb}]];
+	let findGb;
+
+	// 회원정보로 아이디 찾기
+	$('#btnCustIdConfirm').on('click', function() {
+		let custInfo = $('#searchCustId').serializeObject();
+
+		if (gagajf.isNull(custInfo.custNm)) {
+			mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
+			return;
+		}
+
+		if (gagajf.isNull(custInfo.email)) {
+			mcxDialog.alert('이메일을 입력하여 주세요.');
+			return;
+		}
+
+		if (!fnCheckValidationEmail(custInfo.email)) {
+			mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
+			return;
+		}
+		custInfo.authMethod = 'custInfo';
+
+		let jsonData = JSON.stringify(custInfo);
+		//console.log('jsonData', jsonData);
+		gagajf.ajaxJsonSubmit('/customer/id/find', jsonData, fnCustIdConfirmCallBack);
+	});
+
+	// 아이디 찾기결과
+	var fnCustIdConfirmCallBack = function (result) {
+		$('#btnCustIdConfirm').hide();
+		$('#searchCustIdDiv').hide();
+		$('#searchCustId').hide();
+		if (result.isFind) {
+			fnGetDisplayCustIdSucc(result.authMethod, result);
+		} else {
+			fnGetDisplayCustIdFail(result.authMethod);
+		}
+	};
+
+	// 아이디 찾기성공
+	var fnGetDisplayCustIdSucc = function (authMethod, custInfo) {
+		$('#resultId').text(custInfo.maskingCustId);
+		$('#joinDt').text(fnToDateFormat(custInfo.joinDt));
+		let joinPath = fnSnsJoinPath(custInfo); // 가입경로 : 직접이면 표시 안함, 간편가입 연동 표시
+		if (!gagajf.isNull(joinPath)) {
+			$('#liJoinPath').show();
+			$('#joinPath').text(joinPath);
+		}
+		$('#succeedCustId').show();
+	};
+
+	// 아이디 찾기실패
+	var fnGetDisplayCustIdFail = function (authMethod) {
+		if (authMethod === 'custInfo') {
+			$('#failCustInfoId').show();
+		}
+		if (authMethod === 'mobile' || authMethod === 'ipin') {
+			$('#failAuthenticationId').show();
+		}
+	};
+
+	$('#btnCustPwdConfirm').on('click', function () {
+		let custInfo = $('#searchCustPwd').serializeObject();
+
+		if(gagajf.isNull(custInfo.custId)) {
+			mcxDialog.alert("아이디를 입력해주세요.");
+			return;
+		}
+
+		if (gagajf.isNull(custInfo.custNm)) {
+			mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
+			return;
+		}
+
+		if (gagajf.isNull(custInfo.email)) {
+			mcxDialog.alert('이메일을 입력하여 주세요.');
+			return;
+		}
+
+		if (!fnCheckValidationEmail(custInfo.email)) {
+			mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
+			return;
+		}
+
+		custInfo.authMethod = 'custInfo';
+		let jsonData = JSON.stringify(custInfo);
+		//console.log('jsonData', jsonData);
+		gagajf.ajaxJsonSubmit('/customer/password/find/custinfo', jsonData, fnCustPwdConfirmCallBack);
+	});
+
+	// 패스워드 찾기결과
+	var fnCustPwdConfirmCallBack = function (result) {
+		$('#btnCustPwdConfirm').hide();
+		$('#searchPwdDiv').hide();
+		$('#searchCustPwd').hide();
+		if (result.isFind) {
+			fnGetDisplayCustPwdSucc(result.authMethod, result);
+		} else {
+			fnGetDisplayCustPwdFail(result.authMethod);
+		}
+	};
+
+	// 패스워드 찾기성공
+	var fnGetDisplayCustPwdSucc = function (authMethod, custInfo) {
+		if (custInfo.authMethod === 'custInfo') {
+			$('#sendEmail').text(custInfo.maskingEmail)
+			$('#sendEmailDiv').show();
+		}
+		if (authMethod === 'mobile' || authMethod === 'ipin') {
+			cfnGoToPage(_PAGE_CUSTOMER_PWD_CHANGE_FIND);
+		}
+	};
+
+	// 패스워드 찾기실패
+	var fnGetDisplayCustPwdFail = function (authMethod) {
+		$('.form_head').hide();
+		$('.registration_nav').hide();
+		if (authMethod === 'custInfo') {
+			$('#failCustInfoPwd').show();
+		}
+		if (authMethod === 'mobile' || authMethod === 'ipin') {
+			$('#failAuthenticationPwd').show();
+		}
+	};
+
+	// 휴대폰 인증
+	var fnCellPhoneCertify = function (param) {
+		findGb = param;
+		cfnOpenCellphoneCertify();
+	};
+
+	// 아이핀 인증
+	var fnIpinCertify = function (param) {
+		findGb = param;
+		cfnOpenIpinCertify();
+	};
+
+
+	// 나이스 본인인증 후 콜백
+	var fnNiceCallBack = function(encData, authMethod) {
+		if (!gagajf.isNull(encData)) {
+			let custInfo = {};
+			custInfo.encData = encData;
+			custInfo.authMethod = authMethod;
+			let jsonData = JSON.stringify(custInfo);
+			if (findGb === 'custId') {
+				gagajf.ajaxJsonSubmit('/customer/id/find', jsonData, fnCustIdConfirmCallBack)
+			} else if (findGb === 'custPwd') {
+				gagajf.ajaxJsonSubmit('/customer/password/find/certify', jsonData, fnCustPwdConfirmCallBack)
+			}
+
+		}
+	};
+
+	// 가입경로
+	var fnSnsJoinPath = function (custInfo) {
+		let snsType = '';
+		if (!gagajf.isNull(custInfo.ysJoinDt)) {
+			snsType += 'YES24';
+		}
+		if (!gagajf.isNull(custInfo.nvJoinDt)) {
+			if (!gagajf.isNull(snsType)) {
+				snsType += '/'
+			}
+			snsType = 'NAVER'
+		}
+		if (!gagajf.isNull(custInfo.kkJoinDt)) {
+			if (!gagajf.isNull(snsType)) {
+				snsType += '/'
+			}
+			snsType += 'KAKAO';
+		}
+		if (!gagajf.isNull(snsType)) {
+			snsType += '연동';
+		} else {
+			snsType += 'STYLE24';
+		}
+		return snsType;
+	};
+
+	$(document).ready( function() {
+		let index = pageGb !== 'custId' ? 1 : 0;
+		$('.registration_tap > .form_group').hide();
+		$('.registration_tap > .form_group').eq(index).show();
+
+		$(document).on('click','.mb .registration_tap > .form_group > .form_field > div',function(e){
+			// form 데이터 리셋
+			$('#searchCustId')[0].reset();
+			$('#searchCustPwd')[0].reset();
+			$(this).find('input').prop('checked', true);
+			$(this).parents('.form_group').find('.regist_box').removeClass('on');
+			$(this).parents('.form_group').find('.regist_box').eq($(this).index()).addClass('on');
+			return false;
+		});
+	});
+
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>

src/main/webapp/ux/style24_link.js

@@ -20,10 +20,8 @@ const _PAGE_CUSTOMER_JOIN_TYPE = _frontUrl + "/customer/join/type/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_ID_FIND = _frontUrl + "/customer/id/pwd/find/form?custParams=custId";			// 고객 > 아이디 찾기
-const _PAGE_CUSTOMER_PWD_FIND = _frontUrl + "/customer/id/pwd/find/form?custParams=custPwd";		// 고객 > 비밀번호 찾기
+const _PAGE_CUSTOMER_ID_FIND = _frontUrl + "/customer/id/pwd/find/form?pageGb=custId";				// 고객 > 아이디 찾기
+const _PAGE_CUSTOMER_PWD_FIND = _frontUrl + "/customer/id/pwd/find/form?pageGb=custPwd";			// 고객 > 비밀번호 찾기
 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";						// 고객 > 휴면회원