스프링으로 쇼핑몰을 만들어보자6 - 인증번호 이메일 전송3

기능구현

• 회원가입(주소API연동, 이메일 인증, ajax를 사용하여 아이디 중복검사)
• 관리자 페이지(인터셉터 적용, 상품관리, 회원관리)
• 업로드(이미지 등록, 수정, 삭제)
• 검색
• 페이징
• 구매(장바구니, 포인트사용)
• 댓글(등록,수정,삭제)
• 중간에 막혔거나 에러 해결 못하겠으면 yoonbitnara@gmail.com 으로 문의

목차

• 인증번호 입력란 변환기능 구현
• 인증번호 일치여부 검사 기능
• 테스트

인증번호 입력란 변환

• 인증번호 입력란에 사용할 수 있도록 하기 위해 두가지의 기능이 실행되어야 한다.
  • 인증번호 입력란 태그의 속성 disabled 속성 값 변경
  • 인증번호 입력란의 배경색 변경
• 위 기능은 인증번호 전송이 정상적으로 작동하였을 때만 실행된다.
• 명령코드는 ajax내에 있는 success코드에 작성되어야 한다.

join.jsp

• 변경이 되어야 할 대상 $(".mail_check_input), $(".mail_check_input_box)를 쉽게 사용하기 위해서 checkBox, boxWrap변수를 선언 및 할당 한다.

/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
    
    var email = $(".mail_input").val();        // 입력한 이메일
    var checkBox = $(".mail_check_input");	  // 인증번호 입력란
    var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
    
    $.ajax({
        
        type:"GET",
        url:"mailCheck?email=" + email,
        success: function (data) {
			
        	//console.log("data : " + data);
		}
                
    });
    
});

• success코드 안에 이메일 인증 입력란이 입력가능하도록 속성을 변경해주는 코드를 추가한다.
• success 코드 안에 이메일 입력란의 색상이 변경되도록 해당 태그 id 속성값을 변경해주는 코드를 추가한다.

/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
    
    var email = $(".mail_input").val();        // 입력한 이메일
    var checkBox = $(".mail_check_input");	  // 인증번호 입력란
    var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
    
    $.ajax({
        
        type:"GET",
        url:"mailCheck?email=" + email,
        success: function (data) {
			
        	//console.log("data : " + data);
        	checkBox.attr("disabled", false);
        	boxWap.attr("id", "mail_check_input_box_true");
		}
                
    });
    
});

인증번호 일치 여부 검사 기능

• Controller로부터 전달받은 인증번호를 뷰에 저장하는 코드를 추가한다. 사용하가 입력한 인증번호와 비교할 수 있도록 하기 위함.
  • 스크립트 제일 상단에 code 변수를 선언한다.

var code = "";       // 이메일 전송 인증번호 저장 코드

/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
    
    var email = $(".mail_input").val();        // 입력한 이메일
    var checkBox = $(".mail_check_input");	  // 인증번호 입력란
    var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
    
    $.ajax({
        
        type:"GET",
        url:"mailCheck?email=" + email,
        success: function (data) {
			
        	//console.log("data : " + data);
        	checkBox.attr("disabled", false);
        	boxWap.attr("id", "mail_check_input_box_true");
		}
                
    });
    
});

• 인증번호 이메일 전송 메서드 내의 ajax sucess코드에 Controller에서 전달받은 인증번호를 위에서 선언한 code에 저장시키는 코드를 추가한다.

var code = "";       // 이메일 전송 인증번호 저장 코드

/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
    
    var email = $(".mail_input").val();        // 입력한 이메일
    var checkBox = $(".mail_check_input");	  // 인증번호 입력란
    var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
    
    $.ajax({
        
        type:"GET",
        url:"mailCheck?email=" + email,
        success: function (data) {
			
        	//console.log("data : " + data);
        	checkBox.attr("disabled", false);
        	boxWap.attr("id", "mail_check_input_box_true");
        	code = data;
		}
                
    });
    
});

• div class = "mail_check_wrap태그 제일 아래에 span태그를 추가해준다. id는 mail_check_input_box_wran으로 한다.

				<div class="mail_check_wrap">
					<div class="mail_check_input_box" id="mail_check_input_box_false">
						<input class="mail_check_input" disabled="disabled">
					</div>
					<div class="mail_check_button">
						<span>인증번호 전송</span>
					</div>
					<div class="clearfix"></div>
					<span id="mail_check_input_box_wran"></span>
				</div>

• join.css에 인증번호의 일치여부에 따라 색상을 변경할 속성을 추가해준다.

.correct {

	color: green;
}

.incorrect {
	color: red;
}

• 인증번호 비교를 위한 메서드를 추가한다. 해당 메서드는 인증번호 입력란에 데이터를 입력한 뒤 마우스로 다른 곳을 클릭 시에 실행 된다.

var code = "";       // 이메일 전송 인증번호 저장 코드

/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
    
    var email = $(".mail_input").val();        // 입력한 이메일
    var checkBox = $(".mail_check_input");	  // 인증번호 입력란
    var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
    
    $.ajax({
        
        type:"GET",
        url:"mailCheck?email=" + email,
        success: function (data) {
			
        	//console.log("data : " + data);
        	checkBox.attr("disabled", false);
        	boxWap.attr("id", "mail_check_input_box_true");
        	code = data;
		}
                
    });
    
});

/* 인증번호 비교 */
$(".mail_check_input").blur(function () {
	
});

• 편의를 위해 아래의 변수를 선언 및 할당하는 코드를 추가해준다.
  • inputCode
    • 사용자가 입력하는 인증번호
  • checkResult
    • 위에서 추가한 span 태그

/* 인증번호 비교 */
$(".mail_check_input").blur(function () {
	
	var inputCode = $(".mail_check_input").val(); // 입력코드
	var checkResult = $("#mail_check_input_box_warn"); // 비교결과
	
});

• 인증번호 일치 여부에 따라 다른 코드가 실행되도록 if문을 추가한다.
  • 비교값은 inputCode == code로 하였다.
  • inputCode
    • 사용자 입력 번호
  • code
    • 이메일로 전송된 인증번호
  • 일치할 경우 (inputCode == checkCode) span태그에 “인증번호가 일치합니다.”라는 문구와 class 속성이 correct(초록색)로 변경된다.
  • 불일치인 경우 (inputCode != checkCode) span 태그에 “인증번호를 다시 확인해주세요.”라는 문구와 class 속성이 incorrect(빨간색)로 변경된다.

/* 인증번호 비교 */
$(".mail_check_input").blur(function () {
	
	var inputCode = $(".mail_check_input").val(); // 입력코드
	var checkResult = $("#mail_check_input_box_warn"); // 비교결과
	
	if (inputCode == code) { // 일치
		checkResult.html("인증번호가 일치합니다.");
		checkResult.attr("class", "correct");
	} else { // 불일치
		checkResult.html("인증번호를 다시 확인해주세요.");
		checkResult.attr("class", "incorrect");
		
	}
	
});

Test