[Tistory] 유저네임 중복체크 (Ajax key event)

1. keyup 이벤트를 사용할 것 - Ajax는 Get요청

일단 keyup 이벤트 콘솔창 찍히는지만 확인
data 쓰지 말고, 쿼리 스트링으로 바로 보내기 ? +username 하기 

2. Get은 쿼리스트링으로 받기 - joinForm.mustache

<!-- username 중복 체크 -->
// 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가
    $("#username").on('keyup', function() {
        // 입력된 비밀번호 값을 가져와서 콘솔에 출력
        console.log($(this).val());
        let username = $(this).val();

       //data 쓰지 말고
        $.ajax({
            url: '/username-check',
            data: {username: username},
            type: 'GET

<!-- username 중복 체크 -->
// 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가
    $("#username").on('keyup', function() {
        // 입력된 비밀번호 값을 가져와서 콘솔에 출력
        console.log($(this).val());
        let username = $(this).val();

        //쿼리 스트링으로
        $.ajax({
            url: '/username-check?username=' + username,
            type: 'GET'
            

    @Query("select u from User u where u.username = :username")
    Optional<User> findByUsername(@Param("username") String username);

// username 중복 검색
    public void usernameCheck(String username) {
        Optional<User> userOP = userJPARepo.findByUsername(username);
        System.out.println("userOP = " + userOP);
    }

@GetMapping("/username-check")
    public ResponseEntity<?> usernameCheck(String username) {
        System.out.println("username = " + username);
        userService.usernameCheck(username);
        return null;

    }

3. 유저네임 중복체크 - Enum을 사용

[ UserEnum ]

package site.metacoding.blogv3.user;

public enum UserEnum {
    USER_EXIST,
    USER_NO_EXIST
}

[ UserService ]

// username 중복 검색
    public UserEnum usernameCheck(String username) {
        // 주어진 username으로 사용자 정보를 조회
        Optional<User> userOP = userJPARepo.findByUsername(username);

        //System.out.println("username = " + username);
        //System.out.println("userOP = " + userOP);

        // UserEnum 타입의 변수를 선언
        UserEnum userStatus;
        
        // 조회된 사용자 정보가 있을 경우
        if (userOP.isPresent()) {
            userStatus = UserEnum.USER_EXIST; // 사용자 존재 상태를 설정(유저 중복)
            return userStatus; // 설정된 상태를 반환

        } else {
            // 조회된 사용자 정보가 없을 경우
            userStatus = UserEnum.USER_NO_EXIST; // 사용자 미존재 상태를 설정(유저 네임 사용 가능)
        }
        return userStatus; // USER_EXIST 또는 USER_NO_EXIST 반환

    }

    

[ UserController ]

    @GetMapping("/username-check")
    public ResponseEntity<?> usernameCheck(String username) {
//        System.out.println("username = " + username);
        UserEnum usernameCheck = userService.usernameCheck(username);

//        System.out.println("usernameCheck = " + usernameCheck);
        
        return ResponseEntity.ok(new ApiUtil<>(usernameCheck));

    }

4. 결과 값을 볼 때 제일 좋은 방법은 JSON - done의 res 찍어보기

console.log("Res " + res); 라고만 하니까 문자열로만 나온다.
내가 원하는 값을 보려면 JSON으로 변환해서 봐야함  

}).done((res) => {
  console.log("Res " + JSON.stringify(res));

5. joinForm.mustache

<!-- username 중복 체크 -->
    // 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가
    $("#username").on('keyup', function() {
        // 입력된 비밀번호 값을 가져와서 콘솔에 출력
        console.log($(this).val());
        let username = $(this).val();

        $.ajax({
            url: '/username-check?username=' + username,
            type: 'GET'

        }).done((res) => {
            console.log("Res " + JSON.stringify(res));

            // 응답 구조에 따라 확인
            if (username === "") {
                // 입력란이 빈 경우 텍스트 숨기기
                $("#usernameError, #usernameSuccess").addClass("my_hidden").hide();
            } else if (res.body === "USER_EXIST") {
                showError(); // 에러 메시지 표시
            } else if (res.body === "USER_NO_EXIST") {
                showSuccess(); // 성공 메시지 표시
            }
        }).fail((res) => {
            alert("오류가 발생했습니다. 다시 시도해 주세요.");
        });

    });

   // 에러 메시지를 표시하고 성공 메시지를 숨기는 함수
    function showError() {
        $("#usernameError").removeClass("my_hidden").show();
        $("#usernameSuccess").addClass("my_hidden").hide();
    }

    // 성공 메시지를 표시하고 에러 메시지를 숨기는 함수
    function showSuccess() {
        $("#usernameSuccess").removeClass("my_hidden").show();
        $("#usernameError").addClass("my_hidden").hide();
    }

6. 화면