회원가입 기능 구현

기획의도:

• 가입 id 중복체크
  
  

• 비밀번호 두번 일치하게 입력 여부 체크
  

• '중복확인' 버튼 안 누르고 제출할 경우 대비 경고문 출력
  

UserVo에 아래 필드 2개 추가

	private String upw; //첫째 비밀번호
	private String confirmUpw; //비밀번호 재확인용

UserMapper

    //가입 시 uid 중복확인
    @Select("select count(*) from users where uid=#{uid}")
    int duplication(@Param("uid") String uid);
    
    //가입
    @Insert("insert into users (uid, upw, uname, utel, umail, uadd, detailAddress) values ( "
    		+ "#{uid}, "
    		+ "AES_ENCRYPT(#{upw}, 'encryption_key'), "
    		+ "#{uname}, "
    		+ "#{utel}, "
    		+ "#{umail}, "
    		+ "#{uadd}, "
    		+ "#{detailAddress})")    
    void join(UserVo vo);

UserService

    //가입 시 uid 중복확인
    public boolean duplication(String uid) {
		int count = userMapper.duplication(uid);
		return count > 0;
	}
    
    //가입
    public void join(UserVo vo) {
    	userMapper.join(vo);
	}

JoinCtrl

	@GetMapping("joinForm")
	public String joinForm() {
		System.out.println("joinForm");
		return "user/joinForm";
	}
    
    @GetMapping("checkDup") //uid 중복 체크
	@ResponseBody
	public Map<String, Boolean> checkDuplication(@RequestParam("uid") String uid) {
		System.out.println("checkDup");
		
	    boolean isDuplicate = userService.duplication(uid);
	    Map<String, Boolean> response = new HashMap<>();
	    response.put("isDuplicate", isDuplicate);
	    
	    System.out.println("시도한 id: " + uid);
	    
	    return response;
	}
	
	@PostMapping("join")
	public String join(UserVo vo) {
		System.out.println("join");
		
        // 중복 확인
	    boolean isDuplicate = userService.duplication(vo.getUid());
	    if (isDuplicate) {
	        // 중복된 경우 처리
	        throw new IllegalArgumentException("이미 존재하는 id입니다.");
	    }
        
		userService.join(vo);
		
		return "user/firstLogin";
	}

html

<form action="/user/join" method="post" id="joinForm">
    <div class="joinForm-container">    
        <div class="form-group">
            <label for="uid"><strong>uid</strong></label>
            <input type="text" id="uid" name="uid" required>
            <button type="button" id="checkDup" class="findAddr">중복확인</button>
        </div>
        <div class="form-group">
            <label for="upw"><strong>upw</strong></label>
            <input type="password" id="upw" name="upw" required>
            <input type="password" id="confirm_upw" name="confirm_upw" placeholder="비밀번호 다시 입력합니다." required>
        </div>
        ...
	</div> <!-- orderForm-container 끝 -->
			
    <button type="submit" class="button" >회원가입</button>
    &emsp;
    <button type="reset" class="subbtn" >다시 입력</button>	
</form>

js (id, pw 체크 부분만)

<script>
// 중복 확인 여부 플래그
let isUidChecked = false;

//uid 중복 체크
document.getElementById("checkDup").addEventListener("click", function() {
    const uid = document.getElementById("uid").value;
    
    if (!uid) {
        alert("uid를 입력해주세요.");
        return;
    }

    // Ajax 요청으로 서버에 중복 체크 요청
    fetch(`/user/checkDup?uid=${uid}`)
        .then(response => response.json())
        .then(data => {
            if (data.isDuplicate) {
                alert("이미 존재하는 id입니다.");
                isUidChecked = false; // 중복된 uid이므로 false로 설정
                
            } else {
                alert("사용 가능한 id입니다.");
                isUidChecked = true; // 중복 확인 완료
            }
        })
        .catch(error => console.error("Error:", error));
});

//upw 일치 여부 체크
function checkPasswordMatch() {
    const password = document.getElementById("upw").value;
    const confirmPassword = document.getElementsByName("confirm_upw")[0].value;
    //getElementsByName은 배열을 반환하므로, [0] 인덱스를 사용해 값을 가져옴
    
    if (password !== confirmPassword) {
        alert("비밀번호가 일치하지 않습니다.");
        return false;
    }
    return true;
}

//제출 시 중복 확인 및 비밀번호 일치 여부 체크
document.getElementById("joinForm").addEventListener("submit", function(event) {
    // 중복 확인 안 했을 경우 제출 막기
    if (!isUidChecked) {
        alert("id 중복확인 버튼을 눌러주세요.");
        event.preventDefault();
        return;
    }

    // 비밀번호 불일치 시 제출 막기
    if (!checkPasswordMatch()) {
        event.preventDefault();
    }
});
</script>

+) 가입 성공 시 환영문구에 사용자명도 함께 출력하고 싶어 아래를 추가했다.

Mapper

    //가입인사 위해 사용자명 조회
    @Select("select uname from users where uid=#{uid}")
    String selectUname(@Param("uid") String uid);

Svc

    public String selectUname(String uid) {
		return userMapper.selectUname(uid);
	}

Ctrl

	@PostMapping("join")
	public String join(UserVo vo) {
		System.out.println("join");
		
		// 중복 확인
	    boolean isDuplicate = userService.duplication(vo.getUid());
	    if (isDuplicate) { // 중복된 경우 처리
	        throw new IllegalArgumentException("이미 존재하는 id입니다.");
	    }
	    
		userService.join(vo);
		
		return "redirect:firstLogin?uid=" + vo.getUid();
	}	

	@GetMapping("firstLogin")
	public String firstLogin(@RequestParam("uid") String uid, Model model) {
		System.out.println("firstLogin");
		
		String uname = userService.selectUname(uid);
		model.addAttribute("welcome", uname);
		System.out.println(uname);
		
		return "user/firstLogin";
	}

Front

<span th:utext="'<strong>'+${welcome} + '</strong>님,'"></span>
<div>회원가입하신 것을 축하드립니다!</div>
<!--login form -->