쇼핑몰 프로젝트(4) 회원 가입 기능

ID check 버튼을 클릭하면 중복여부를 체크

중복 체크 쿼리 작성

	<!-- 아이디 중복 체크 -->
	<select id="isDuplicateMemId" resultType="int">
		SELECT COUNT(MEM_ID)
		FROM SHOP_MEMBER
		WHERE MEM_ID = #{memId}
		
	</select>

MemberService  메소드 작성

자료형 boolean으로 줌. 참 거짓을 알면 되기 때문에 기본은 int임.

데이터 들고올 때는 int로 들고옴.

	//아이디 중복 체크
	boolean isDuplicateMemId(String memId);

MemberServiceImpl  메소드 구현

	//아이디 중복 체크
	@Override
	public boolean isDuplicateMemId(String memId) {
		//데이터 int로 받아오기 때문에 int로 받아줌
		int result = sqlsession.selectOne("memberMapper.isDuplicateMemId", memId);
		//중복이면 true, 아니면 false
		return result != 0 ? true : false;
	}

header.html의 ID check 버튼을 클릭 시 js로 이동

<div class="col-3 d-grid">
	<label for="check_id" class="form-label">&nbsp;</label>
	<input type="button" class="btn btn-secondary" value="ID check" id="check_id" onclick="isDuplicateMemId();">
</div>

중복 체크 하려면 memId가 필요함.

js에서 id 입력하는 태그 자체를 가지고 옴. 그 태그의 value값 가져오는 방식 사용.

화면이 바뀌면 안 되기 때문에 ajax 사용.

중복 체크 함수에서 memId가 빈 값이면 ID 입력하라는 alert창도 추가로 띄워줌.

//id check 버튼 클릭 시 중복 체크  
function isDuplicateMemId(){
	//회원 id를 입력하는 태그             joinModal 태그의 자손 memId
	const memIdTag = document.querySelector('#joinModal #memId');
	//입력한 회원 id
    const memId = memIdTag.value;
	
	if(memId == ''){
		alert('ID를 입력하십시오')
	}
	
	//ajax start
	$.ajax({
		url: '/member/isDuplicateMemId', //요청경로
		type: 'post',
		async : false, //동기 방식으로 실행, 작성하지 않으면 기본으로 true
		data: {'memId' : memId}, //필요한 데이터
		//success는 함수를 정의한 것.
		success: function(result) {
			}
		},
		error: function() {
			alert('실패');
		}
	});
//ajax end
}

MemberController에서 자료형 boolean으로 받아서 메소드 실행 후 리턴.

	//아이디 중복 체크
	@ResponseBody
	@PostMapping("/isDuplicateMemId")
	public boolean isDuplicateMemId(String memId) {
		
		return memberService.isDuplicateMemId(memId);
	}

js로 돌아와서 return된 result값 사용하여 중복 체크

result가  true면 아이디 중복임.

ID 중복 : 중복된  ID라는 alert창 띄우기

ID 중복 아님 : 사용 가능한 ID alert 띄우기

//id check 버튼 클릭 시 중복 체크  
function isDuplicateMemId(){
	//회원 id를 입력하는 태그             joinModal 태그의 자손 memId
	const memIdTag = document.querySelector('#joinModal #memId');
	const memId = memIdTag.value;
	
	if(memId == ''){
		alert('ID를 입력하십시오')
	}
	
	//ajax start
	$.ajax({
		url: '/member/isDuplicateMemId', //요청경로
		type: 'post',
		async : false, //동기 방식으로 실행, 작성하지 않으면 기본으로 true
		data: {'memId' : memId}, //필요한 데이터
		//success는 함수를 정의한 것.
		success: function(result) {
			//result == true : 아이디 중복
			if(result) {   
				alert('중복된 ID입니다.');
			}
			else{
				alert('사용 가능한 ID입니다.');	
			}
		},
		error: function() {
			alert('실패');
		}
	});
//ajax end
}

 

 

실질적인 회원 가입 기능.

joinmodal에 입력한 회원 가입 데이터들을 form로 감싸서 MemberController 보내기

보낸 데이터 커맨드 객체로 받음, 그러나 연락처 정보 못 받아옴.

연락처 정보 입력 태그들 name을 memTells로 지정해놓은 상태이기 때문에

MemberVO에 String 배열로 memTells 변수 추가

	//회원 가입
	@PostMapping("/join")
	public String join(MemberVO memberVO) { //연락처 정보는 못 가져옴, 
		//memverVO는 memTell만 있고 memTells는 없음 > VO에 memTells 배열로 변수 작성
		
		return "redirect:/"; //인덱스 컨트롤러로 이동 > 상품목록화면으로 감
	}

 

회원 가입 쿼리 작성

	<!-- 회원 가입 -->
	<insert id="join">
		INSERT INTO SHOP_MEMBER (
			MEM_ID
			, MEM_PW
			, MEM NAME
			, GENDER
			, MEM_TELL
			, MEM_ADDR
			, ADDR_DETAIL
		) VALUES (
			#{memId}
			, #{memPw}
			, #{memName}
			, #{gender}
			, #{memTell}
			, #{memAddr}
			, #{addrDetail}
		)
	</insert>

MemberService 메소드 작성

	//회원 등록
	void join(MemberVO memberVO);

MemberService Impl 메소드 구현

	//회원 가입
	@Override
	public void join(MemberVO memberVO) {
		sqlsession.insert("memberMapper.join", memberVO);
		
	}

MemberController에서 메소드 실행

	//회원 가입
	@PostMapping("/join")
	public String join(MemberVO memberVO) { //커맨드 객체가 연락처 정보는 못 가져오는 상태
		 memberService.join(memberVO);
		
		return "redirect:/"; //인덱스 컨트롤러로 이동 > 상품목록화면으로 감
	}

 

**memTell 데이터 

현재 상태 쿼리 작성한 것을 보면 연락처 정보를 memTell로 빈값 채우는데 memTell 값 못 가져옴.

쿼리문 빈값은 getter 호출해서 가져오기 때문 memTell은 null임 (memTells에 연락처 정보가 있음)

그럼 쿼리문을 수정하여 실제 연락처 정보가 있는 memTells로 받으면 가능?

❌❌ getter는 배열 데이터 제대로 못 받아옴.

for문과 REPLACE 사용 > 쿼리 수정

REPLACE : 첫번째 매개변수에서 두번째 매개변수 글자를 세번째 매개변수 글자로 대체

	<!-- 회원 가입 -->
	<insert id="join">
		INSERT INTO SHOP_MEMBER (
			MEM_ID
			, MEM_PW
			, MEM_NAME
			, GENDER
			, MEM_TELL
			, MEM_ADDR
			, ADDR_DETAIL
		) VALUES (
			#{memId}
			, #{memPw}															<!-- open : 반복 실행 시 처음에 최초 한번 -->
			, #{memName}														<!-- separator : 반복문 1번 끝난 뒤마다 (마지막은 작동x) -->
			, #{gender}   <!--mybatis의 if문이나 for문은 getter로 인식  -->     <!-- close :  반복문 종료 시 마지막에 최초에 한번-->
			, REPLACE(
			<foreach collection="memTells" item="tell" open="'" separator="-" close="'">
				${tell} <!-- $로 붙이고 데이터 받으면 '' 안 붙어서 나옴 -->   <!-- for문 돌면 ' 010 - 1111 - 2222 ' -->
			</foreach>, ' ', '') <!-- REPLACE로 공백을 빈문자로 대체 -->
			, #{memAddr}
			, #{addrDetail}
		)
	</insert>

 

추가 기능.

ID check 안 하면 join 못 하게 설정해야 함. (중복 체크 안 하고 join 눌렀을 때 id가 중복되면 쿼리 오류남)

처음 조인창 뜨면 조인 버튼 막음.

<div class="col-12 d-grid">               <!-- ID Check해야 가입할 수 있게 처음엔 버튼 막음 -->
	<button type="submit" class="btn btn-primary" disabled>JOIN</button
</div>

js에서 중복 체크 할 때 memId가 공백이면 ID 입력 alert 뜨게 설정

ID Check 버튼을 눌러서 중복이 아니면 join 버튼 활성화 시키기.

//id check 버튼 클릭 시 중복 체크  
function isDuplicateMemId(){
	//회원 id를 입력하는 태그             joinModal 태그의 자손 memId
	const memIdTag = document.querySelector('#joinModal #memId');
	const memId = memIdTag.value;
	
	
	if(memId == ''){
		alert('ID를 입력하십시오')
		
	}
	
	
	//ajax start
	$.ajax({
		url: '/member/isDuplicateMemId', //요청경로
		type: 'post',
		async : false, //동기 방식으로 실행, 작성하지 않으면 기본으로 true
		data: {'memId' : memId}, //필요한 데이터
		//success는 함수를 정의한 것.
		success: function(result) {
			//result == true : 아이디 중복
			if(result) {   
				alert('중복된 ID입니다.');
			}
			else{
				alert('사용 가능한 ID입니다.');
				//join 버튼 disabled 속성 제거(변경)
				document.querySelector('#joinModal button[type="submit"]').disabled = false;
				
			}
		},
		error: function() {
			alert('실패');
		}
	});
//ajax end
}

 

문제점.

ID Check 후 다시 ID 값을 바꾸면 중복된 ID라도 join버튼이 활성화 됨

이런 오류를 막기 위해 ID 입력 input 태그에 키보드 사용을 했을 때 다시 join버튼 비활성화 기능 설정.

onkeyup 속성(키보드 사용) 사용.

<div class="col-9">
	<label for="memId" class="form-label">ID</label>           <!-- 키보드로 입력 했을 때 -->
	<input type="text" class="form-control" id="memId" name="memId" onkeyup="setDisabled();">
</div>

js에서 함수 작성

//회원가입 버튼 비활성화
function setDisabled(){
	document.querySelector('#joinModal button[type="submit"]').disabled = true;
	
}

 

★★validation 처리(데이터 유효성)

 

현재 상태

회원가입할 때 버튼 누르면 form 태그 타고 회원가입 하러 감.

수정 필요

> 회원가입을 버튼을 submit이 아니라 button으로 바꾸고 버튼 누르면 join 함수 실행 되게 설정.

이전에 작성한 활성화 비활성화 작업 함수 수정 (이전에 submit으로 선택했기 때문에)

join 버튼에 id 부여하여 태그 선택할 때 id로 선택하게 수정

<div class="col-12 d-grid">                 		<!-- ID Check해야 가입할 수 있게 disabled 속성 -->
	<button id="joinBtn" type="button" class="btn btn-primary" disabled onclick="join();">JOIN</button>
</div>

js 수정

//회원가입 버튼 비활성화
function setDisabled(){
	document.querySelector('#joinBtn').disabled = true;
	
}

중복 체크 함수 안에 활성화 코드도 수정

//id check 버튼 클릭 시 중복 체크  
function isDuplicateMemId(){
	//회원 id를 입력하는 태그             joinModal 태그의 자손 memId
	const memIdTag = document.querySelector('#joinModal #memId');
	const memId = memIdTag.value;
	
	if(memId == ''){
		alert('ID를 입력하십시오')
	}
	
	//ajax start
	$.ajax({
		url: '/member/isDuplicateMemId', //요청경로
		type: 'post',
		async : false, //동기 방식으로 실행, 작성하지 않으면 기본으로 true
		data: {'memId' : memId}, //필요한 데이터
		//success는 함수를 정의한 것.
		success: function(result) {
			//result == true : 아이디 중복
			if(result) {   
				alert('중복된 ID입니다.');
			}
			else{
				alert('사용 가능한 ID입니다.');
				//join 버튼 disabled 속성 제거(변경)
				document.querySelector('#joinBtn').disabled = false;
				
			}
		},
		error: function() {
			alert('실패');
		}
	});
//ajax end
}

js에 join 함수 작성

유효성 검사 하는 기능 따로 빼서 joinValidate 함수 작성.

//회원 가입 진행 시 데이터 유효성 검사
function joinValidate(){
	//validation 처리
	const memId = document.querySelector('#joinModal #memId').value;
	if(memId == ''){
		alert('ID는 필수 입력입니다.');
		return false;
		
	}
	else if(memId.length < 4){
		alert('ID는 4글자 이상이어야 합니다.');	
		return false;
	}
	
	return true; //데이터 유효성 검사 잘 되면 true
}

join 함수 실행될 때 joinValidate 함수 사용 후 회원가입 진행

//회원가입 함수
function join(){
	//유효성 검사 진행
	const isValid = joinValidate(); //데이터 검사 잘 되면 true / 유효하지 않으면 false
	
	//유효하지 않으면 if문 조건이 true가 되기 때문에 return으로 함수 종료.
	if(!isValid){
		return ;
	}

	//회원가입 진행	
	document.querySelector('#joinForm').submit();
}

 

id가 4글자 이하면 아래 그림처럼 오류? 글자 띄워주기.

 

유효성 검사 시 아래 작게 나오는 글자들에 css 속성 줌.

> 유효성 검사 하는 모든 페이지에서 같이 적용될 수 있도록 common.css에 작성

.my-invalid{
	margin-top: 0px;
	font-size: 0.8rem;
	color: red;
}

 

유효성 검사 시 alert 창으로 오류 띄우는 것이 아니라 입력 태그 아래 뜨게  js 수정

오류메시지를 가지는 변수 str 생성하여 유효성 검사 시 오류 메시지를 저장 시킨다.

함수의 리턴 결과를 저장하는 변수 result 생성하여 기본값 true로 줌

데이터 유효성 검사 잘 되면 true임

유효성 검사 실패 시 false

실패시 오류 메세지를 출력해준다.

joinForm div를 divs로 받아서 div중 첫번째 div 끝(아이디 중복 검사 버튼 뒤)에 오류 메세지 출력되게 html insert

//회원 가입 진행 시 데이터 유효성 검사
function joinValidate(){
	//함수의 리턴 결과를 저장하는 변수
	let result = true;
	
	//오류 메세지 
	let str = '';
	
	//회원가입 form 태그의 자식 div들 전체 선택
	const divs = document.querySelectorAll('#joinForm > div');
	
	//validation 처리
	const memId = document.querySelector('#joinModal #memId').value;
	if(memId == ''){
		str = 'ID는 필수 입력입니다.';
		result = false;
		
	}
	else if(memId.length < 4){
		str = 'ID는 4글자 이상이어야 합니다.';
		result = false;
	}
	//유효성 검사 실패 시 오류 메세지 출력
	if(!result){
		const errorHTML = `<div class="my-invalid">${str}</div>`;
		divs[1].insertAdjacentHTML('afterend', errorHTML);
	}
	
	return result; //데이터 유효성 검사 잘 되면 result는 그대로 true
}

문제점.

데이터 유효 검사 실패 시 join 버튼 누를 때 마다 오류 메세지가 아래로 추가 됨.

문제점 보완 > 기존의 오류 메세지 전부 삭제 해주면 됨.

오류 메세지 삭제 함수 생성.

//오류 메시지 div 전체 제거
function deleteErrorDiv(){
	
	//기존의 오류 메세지 삭제(조인 버튼 눌러도 계속 오류 메세지 추가되지 않게)
	const errorDivs = document.querySelectorAll('div[class="my-invalid"]');	
	
	for(const errorDiv of errorDivs){
		errorDiv.remove();
	}
}

 

오류메세지가 뜬 상태에서 모달창을 껐다가 켜도 오류 메세지 남아 있음

모달창이 닫힐 때도 오류 메세지 전부 삭제해야 됨.

모달창 닫히는 이벤트가 있는 함수 init에 로그인, 조인 모달창 닫힐 때 각각 deleteErrorDiv(); 실행시켜주기.

function init(){
	
	//로그인 모달창(태그) 선택
	const loginModal = document.querySelector('#loginModal');
	
	//로그인 모달창이 닫힐 때마다 실행되는 이벤트
								//언제 이벤트? , 어떤 이벤트
	loginModal.addEventListener('hidden.bs.modal', function(e){ //e : 이벤트 매개변수
		//로그인 모달창의 모든 input 태그 초기화
		document.querySelector('#loginForm').reset();
		deleteErrorDiv();
		
	});
	
	
	
	//회원가입 모달창(태그) 선택
	const joinModal = document.querySelector('#joinModal');
	
	//회원가입 모달창이 닫힐 때마다 실행되는 이벤트
	joinModal.addEventListener('hidden.bs.modal', function(e){ //e : 이벤트 매개변수
		//회원가입 모달창의 모든 input 태그 초기화
		document.querySelector('#joinForm').reset();
		deleteErrorDiv();
	});
	
}

 

 

비밀번호 유효성 검사

비밀번호는 필수 입력이며, 영문+숫자, 6~12자리 들어오게 Validation 처리

- 정규식(정규 표현식) 사용

복잡해서 외우기 어려움 google에 정규식 치면 코드 볼 수 있다.

숫자와 문자 포함 형태의 6~12자리 이내의 암호 정규식 /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,12}$/

 

//---------pw 유효성 검사---------
	
	const memPw = document.querySelector('#joinModal #memPw').value;
	
	//문자 + 숫자의 6~12자리의 글자인지 체크하는 정규식
	//정규식에 부합하지 않으면 null이 return
	const regExp = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,12}$/;
	//const aaa = memPw.match(regExp);
	//alert(aaa);
	
	if(memPw == ''){
		str_memPw = '*Password는 필수 입력입니다.';
		result_memPw = false;
	}
	else if(memPw.match(regExp) == null){
		str_memPw = '*영문과 숫자가 조합된 6~12글자를 입력하십시오.';
		result_memPw = false;
	}

 

아이디, 비밀번호 다 틀린 경우 오류 메세지 같이 뜨게 해야 함.

result와 str 변수를 2개씩 선언 초기화.

memId, memPw의 오류 메세지 str과 result를 분리시켜야 됨.

코드 아래처럼 전체적인 수정 필요

//회원 가입 진행 시 데이터 유효성 검사
function joinValidate(){

	//이전 오류 메세지 지워주는 함수
    deleteErrorDiv();
	
	//함수의 리턴 결과를 저장하는 변수
	let result_memId = true;
	let result_memPw = true;
	
	//오류 메세지 
	let str_memId = '';
	let str_memPw = '';
	
	//회원가입 form 태그의 자식 div들 전체 선택
	const divs = document.querySelectorAll('#joinForm > div');
	
	//---------id 유효성 검사---------
	
	//validation 처리
	const memId = document.querySelector('#joinModal #memId').value;
	if(memId == ''){
		str_memId = '*ID는 필수 입력입니다.';
		result_memId = false;
		
	}
	else if(memId.length < 4){
		str_memId = '*ID는 4글자 이상이어야 합니다.';
		
		result_memId = false;
	}
	
	//---------pw 유효성 검사---------
	
	const memPw = document.querySelector('#joinModal #memPw').value;
	
	//문자 + 숫자의 6~12자리의 글자인지 체크하는 정규식
	//정규식에 부합하지 않으면 null이 return
	const regExp = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,12}$/;
	//const aaa = memPw.match(regExp);
	//alert(aaa);
	
	if(memPw == ''){
		str_memPw = '*Password는 필수 입력입니다.';
		result_memPw = false;
	}
	else if(memPw.match(regExp) == null){
		str_memPw = '*영문과 숫자가 조합된 6~12글자를 입력하십시오.';
		result_memPw = false;
	}
	
	
	//유효성 검사 실패 시 오류 메세지 출력
	if(!result_memId){
		const errorHTML = `<div class="my-invalid">${str_memId}</div>`;
		divs[1].insertAdjacentHTML('afterend', errorHTML);
	}
	
	if(!result_memPw){
		const errorHTML = `<div class="my-invalid">${str_memPw}</div>`;
		divs[2].insertAdjacentHTML('afterend', errorHTML);
	}
	
	return result_memId && result_memPw; //데이터 유효성 검사 잘 되면 result는 그대로 true
}

 

 

search 버튼 클릭 시 다음 주소록 api 사용

다음 api 주소록 사용

아래 코드 user_layout.html과 admin_layout.html에 붙여넣기

작성 위치 : content 페이지 js 코드 위

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

header.html의 join모달창의 search 버튼 클릭 시 사용할 수 있어야 하기 때문에 onclick 속성 사용하여 js로 이동

\<div class="col-3 d-grid">
	<label for="search_btn" class="form-label">&nbsp;</label>
	<input type="button" class="btn btn-secondary" value="search" id="search_btn" onclick="searchAddr();">
\</div>

js에서 searchAddr 함수 작성

//우편번호 검색 api 사용
function searchAddr(){

    new daum.Postcode({
        oncomplete: function(data) {
           //도로명 주소
           const roadAddr = data.roadAddress; 
           
           //원하는 input 태그에 넣어주면 됨.
           //도로명 주소 세팅
           document.querySelector('#memAddr').value = roadAddr;
        }
    }).open();
	
}

 

addr input 태그에는 읽기 전용으로 설정 readonlyt 속성 사용. > 잘못된 데이터 입력 방지

그리고 주소 입력창을 클릭해도 api 주소록 사용할 수 있게 onclick으로 함수 실행.

<div class="col-9">
	<label for="memAddr" class="form-label">ADDRESS</label>
	<input type="text" class="form-control" id="memAddr" name="memAddr" onclick="searchAddr();" readonly>
</div>