Spring Boot Board Project_10 회원 가입 완료

회원가입 form 태그에 제출 버튼 눌렀을 때 정보 넘어가게

1. 제출하기 버튼 눌렀을 때 form 태그 안에 내용이 Controller 로 넘어감 Controller 에서 요청 받아주기

signup.html

<form action="/member/signup" method="POST" name="signUpForm" id="signUpForm">

html 에서 넘겨주는 값들에 name 속성이 Member DTO 필드명과 같게 설정해둬서 Controller 에서 받아줄 때 커맨드 객체로 받아줌
(커맨드 객체 앞에 @ModelAttribute 어노테이션 생략 가능)

MemberController

	@PostMapping("signup")
	public String signup(Member inputMember,
			@RequestParam("memberAddress") String[] memberAddress,
			RedirectAttributes ra) {
		
		// 회원 가입 서비스 호출
		int result = service.signup(inputMember, memberAddress);

2. ServiceImpl 에서 서비스로직 처리

주소는 필수 항목 X
주소가 입력되지 않았을 때
inputMember.getMemberAddress() -> ",," 구분자만 남아있음
memberAddress -> [,,]
-> 주소 안에 , 가 들어가는 경우가 있어서 구분자가 , 이렇게 돼있으면 다루기 힘듦

1. 입력 받은 주소가 있는지 없는 지 검사
   입력된 주소가 있을 때

MemberServiceImpl

		if(!inputMember.getMemberAddress().equals(",,")) {
			
			// Stirng.join("구분자", 배열)
			// -> 배열의 모든 요소 사이에 "구분자"를 추가하여
			// 하나의 문자열로 만들어 반환하는 메서드
			
			// 구분자로 "^^^" 쓴 이유 :
			// -> 주소, 상세주소에 없는 특수문자 작성
			// -> 나중에 다시 3분할할 때 구분자로 이용할 예정
			String address = String.join("^^^", memberAddress);
			
			// inputMember 주소로 합쳐진 주소를 세팅
			inputMember.setMemberAddress(address);

2. 입력 받은 주소가 없을 때

		} else {
			inputMember.setMemberAddress(null); // null 저장
		}

3. 입력 받은 회원정보를 mapper 호출해서 넘겨줘야하는데 받아온 평문 비밀번호를 DB 에 저장하려면 암호화해줘야함
   다시 setting

		String encPw = bcrypt.encode(inputMember.getMemberPw());
		inputMember.setMemberPw(encPw);
		
		// 회원 가입 mapper 메서드 호출하기
		return mapper.signup(inputMember);
	}

3. mapper.xml 회원정보 삽입

member-mapper.xml

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

4. Controller 로 돌아온 결과 값 가지고 분기처리

MemberController

		// insert 성공하면 1 실패했으면 0
		
		String path = null;
		String message = null;
		
		if(result > 0) {
			// 성공
			message = inputMember.getMemberNickname() + "님의 가입을 환영 합니다.";
			path = "/";
		} else {
			// 실패
			message = "회원 가입 실패";
			path = "signup";
		}
		
		ra.addFlashAttribute("message", message);
		
		return "redirect:" + path;
	}

5. signup.js 에서 유효성 검사가 다 true 일 때만 제출되도록 설정

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 태그 기본 이벤트(제출) 막기
            return;
        }
    }
});