08_Spring_240412(금)_63일차(1) - ★BoardProject★ - 4. 회원가입 - 주소 API, 가입하기

4-5) 다음 주소 API 활용하기

signup.js

/* 다음 주소 API 활용*/

function execDaumPostcode() {
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

            // 각 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var addr = ''; // 주소 변수
            var extraAddr = ''; // 참고항목 변수

            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                addr = data.roadAddress;
            } else { // 사용자가 지번 주소를 선택했을 경우(J)
                addr = data.jibunAddress;
            }

            

            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            document.getElementById('postcode').value = data.zonecode;
            document.getElementById("address").value = addr;
            // 커서를 상세주소 필드로 이동한다.
            document.getElementById("detailAddress").focus();
        }
    }).open();
}

// 주소 검색 버튼 클릭 시
document.querySelector("#searchAddress").addEventListener("click", execDaumPostcode);
                                                                // 함수 정의 부분이기 때문에 () 빼야함.

4-6) 가입하기

Member 컨트롤러

/** 회원가입
 * @param inputMember : 입력된 회원정보 (memberEmail, memberPw, 
 * 						memberNickname, memberTel, (memberAddress(별도 처리))
 * 
 * @param memberAddress : 입력된 주소 input 3개의 값을 배열로 전달 [우편번호, 도로명/지번주소, 상세주소]
 * @param ra : 리다이렉트 시 requst scope로 데이터 전달하는 객체
 * @return
 */
@PostMapping("signup")
public String signup(@ModelAttribute Member inputMember,
					@RequestParam("memberAddress") String[] memberAddress,
					RedirectAttributes ra) {
	
	
	// 회원가입 서비스 호출
	int result = service.signup(inputMember, memberAddress);
	
	String path = null;
	String message = null;
	
	if(result > 0) { // 성공 시
		message = inputMember.getMemberNickname() + "님의 가입을 환영합니다 :)";
		path = "/";
		
	} else { // 실패
		message = "회원가입 실패...";
		path = "signup";
	}
	
	ra.addFlashAttribute("message", message);
	
	return "redirect:" + path;
}

ServiceImpl

// 회원가입
@Override
public int signup(Member inputMember, String[] memberAddress) {
	// 주소가 입력되지 않으면
	// inputMember.getMemberAddress() -> ",,"
	// memberAddress -> [,,]
	
	// 주소가 입력 O
	if(!inputMember.getMemberAddress().equals(",,")) {
		
		// String.join("구분자", 배열)
		// -> 배열의 모든 요소 사이에 "구분자"를 추가하여
		// 하나의 문자열로 만들어 반환하는 메서드
		
		// * 구분자로 "^^^" 쓴 이유
		// - 주소, 상세주소에 없는 특수문자 작성
		// - 나중에 다시 3분할 때 구분자로 이용할 예정
		String address = String.join("^^^", memberAddress);
		
		// inputMember 주소로 합쳐진 주소를 세팅 
		inputMember.setMemberAddress(address);
		
	} else { // 주소 입력 X
		
		inputMember.setMemberAddress(null); // null 저장
	}

	
	// 비밀번호를 암호화 하여 input member에 세팅
	String encPw = bcrypt.encode(inputMember.getMemberPw()); 
	
	inputMember.setMemberPw(encPw);
	
	
	// 회원 가입 매퍼 메서드 호출
		return mapper.signup(inputMember);
	}
}

member-mapper.xml

<!-- 회원가입 -->
<insert id="signup">
	INSERT INTO "MEMBER"
	VALUES(SEQ_MEMBER_NO.NEXTVAL, 
		 #{memberEmail},
		 #{memberPw},
		 #{memberNickname},
		 #{memberTel},
		 #{memberAddress},
		 NULL,
		 DEFAULT,
		 DEFAULT,
		 DEFAULT
	)
</insert>

signup.js

/* 회원 가입 버튼 클릭 시 전체 유효성 검사 여부 확인 */

const signUpForm = document.querySelector("#signUpForm");


// 회원 가입 폼 제출 시
signUpForm.addEventListener("submit", e => {
    
    // checkObj의 저장된 값(value) 중
    // 하나라도 false가 있으면 제출 X
    
    // for ~ in (객체 전용 향상된 for문)
    for(let key in checkObj) { // checkObj 요소의 key 값을 순서대로 꺼내옴
        
        if( !checkObj[key] ) { // false 인 경우(유효하지 않음)
            
            let str; // 출력할 메시지를 저장할 변수

            switch(key) {
                case "memberEmail" : 
                    str = "이메일이 유효하지 않습니다."; break;
                
                case "authKey" : 
                    str = "이메일이 인증되지 않았습니다."; break;
                
                case "memberPw" :
                    str = "비밀번호가 유효하지 않습니다."; break;
                
                case "memberPwConfirm" :
                    str = "비밀번호가 일치하지 않습니다."; break;
                
                case "memberNickname" : 
                    str = "닉네임이 유효하지 않습니다."; break;

                case "memberTel" :
                    str = "전화번호가 유효하지 않습니다."; break;
            }

            alert(str);

            document.getElementById(key).focus(); // 초점 이동

            e.preventDefault(); // form 태그 기본 이벤트인 제출(submit) 막기

            return;
        }
    }
});