[Spring][쇼핑몰 프로젝트] 3. 아이디 중복 검사 기능

YB·2023년 2월 6일

Spring 쇼핑몰

쇼핑몰

목록 보기

11/40

목표

회원가입 페이지에서 가입하고자 하는 아이디를 입력
해당 아이디가 이미 가입된 경우 아이디 입력란 안에 빨간색 경고표시, 가입된 아이디가 없을 경우 초록색 경고 표시

1. <span>태그 추가(+css)

속성 클래스가 id_input_box인 div태그 아래에 span태그 두 개를 추가합니다.
각각의 span태그에 class="id_input_re_1"와 class="id_input_re_2" 속성을 추가합니다.
span태그의 내용은 각각 "사용 가능한 아이디입니다.", "아이디가 이미 존재합니다."를 작성합니다.

				<span class="id_input_re_1">사용 가능한 아이디입니다.</span>
				<span class="id_input_re_2">아이디가 이미 존재합니다.</span>

join.css에 아래의 코드를 추가해줍니다.

/* 중복아이디 존재하지 않는 경우 */
.id_input_re_1{
	color : green;
	display : none;
}
/* 중복아이디 존재하는 경우 */
.id_input_re_2{
	color : red;
	display : none;
}

2. 아이디 중복검사 메서드 테스트(Javascript)

join.jsp 하단의 script태그에 아래의 코드를 추가해줍니다.
해당 메서드는 input태그(class="id_input")에 변화가 있을 때마다 실행이 됩니다.
정삭적으로 작동하는지 확인하기 위해서 console.log코드를 작성하였습니다.

//아이디 중복검사
$('.id_input').on("propertychange change keyup paste input", function() {
	
	console.log("keyup 테스트");
	
}); //function 종료

서버를 실행시켜서 해당 메서드가 정삭적으로 실행되는지 확인합니다.

3. ajax 작성

테스트를 위해 작성했던 console.log()를 지우거나 주석처리합니다.
아이디 중복 검사 메서드에 아래의 코드를 추가해줍니다.

	var memberId = $('.id_input').val();	// .id_input에 입력되는 값
	var data = {memberId : memberId}		// '컨트롤에 넘길 데이터 이름' : '데이터(.id_input에 입력되는 값)'
	
	$.ajax({
		type : "post",
		url : "/member/memberIdChk",
		data : data
	}); //ajax 종료

4.Controller 작성

MemberController.java에 아이디 중복검사 실행하는 메서드(memberChkPOST)를 작상합니다.
해당 메서드의 반환 타입은 String로 해줍니다.
@ResponseBody 어노테이션을 사용합니다. 해당 코드를 추가하지 않으면 join.jsp로 메서드의 결과가 반환되지 않습니다.
join.jsp에서 작성한 ajax의 요청을 memberIdChkPOST메서드가 수신받는지 확인하기 위해 logger.info()를 추가해주었습니다.
memberserivce.idCheck(memberId)의 결과를 int형 변수 result에 저장합니다. (존재한다면 '1', 존재하지 않는다면 '0'을 반환하게 됩니다.)
result의 결과가 0이 아니면 "fail"을 반환하고, 1이 아니면 "success"를 반환합니다.

* idCheck가 빨간색 경고표시가 뜨는 이유는 아직 memberservice에서 해당 메서드를 만들지 않았기 때문입니다.

	//아이디 중복 검사
	@RequestMapping(value="memberIdChk", method=RequestMethod.POST)
	@ResponseBody
	public String memberIdChkPOST(String memberId) throws Exception {
		
		logger.info("memberIdChk() 진입");
        
        int result = memberservice.idCheck(memberId);
        
        logger.info("결과값 = " + result);
        
        if (result != 0) {
        	
        	return "fail"; 		//중복 아이디가 존재
        
        } else {
        	
        	return "success"; 	//중복 아이디 X
        	
        }
		
	} //memberIdChkPOST() 종료

5. mapper/service 작성

1) mapper 작성 및 mapper메서드 테스트

MemberMapper.xml에 아래의 코드를 추가해줍니다.

  	<!-- 아이디 중복검사 -->
  	<select id="idCheck" resultType="int">
  		select count(*) from book_member where memberId = #{memberId}
  	</select>

MemberMapper.java 인터페이스에 아래의 코드를 추가해줍니다.

	//아이디 중복 검사
	public int idCheck(String memberId);

작성한 mapper메서드가 작동하는지 확인하기 위해서 MemberMapperTests.java에 코드를 추가하여 테스트를 진행합니다.
기존 회원가입 테스트를 진행하였던 MemberJoin()메서드는 주석처리를 진행한 후 코드를 추가해준 후 테스트를 진행합니다.

	// 아이디 중복검사
	@Test
	public void memberIdChk() throws Exception{
		String id = "admin";	// 존재하는 아이디
		String id2 = "test123";	// 존재하지 않는 아이디
		membermapper.idCheck(id);
		membermapper.idCheck(id2);
	}

2) service 작성

MemberService.java에 코드를 추가해줍니다.

	//아이디 중복 검사
	public int idCheck(String memberId) throws Exception;

MemberServiceImpl.java에 코드를 추가해줍니다.

	@Override
	public int idCheck(String memberId) throws Exception {
		
		return membermapper.idCheck(memberId);
	}

6. ajax success 작성

1) success 코드 추가 및 테스트

작성한 ajax에 success 코드를 추가해줍니다.
success메서드에 먼저 controller로부터 데이터가 정상적으로 넘어오는지 확인하기 위해서 console.log()를 작성합니다.

,
		success : function(result) {
			console.log("성공 여부" + result);
		} //success 종료

서버를 구동시켜 id란에 문자를 기입하여 테스트를 진행합니다.

2) success 내용 추가

정상적으로 테스트가 성공했을 경우 console.log()를 삭제 혹은 주석 처리합니다.
success 메서드의 내용에 아래의 코드를 추가해줍니다.

			//console.log("성공 여부" + result);
			if (result != 'fail') {
				$('.id_input_re_1').css("display", "inline-block");
				$('.id_input_re_2').css("display", "none");				
			} else {
				$('.id_input_re_2').css("display","inline-block");
				$('.id_input_re_1').css("display", "none");	
			}