내 프로젝트에서는 로그인을 한 뒤에 글을 쓰거나 댓글을 쓰는등 가장 우선시 되는 것이 로그인 기능이다.

그래서 가장 첫번째로 건든 부분이 회원가입/로그인 부분이다.

signup.html

회원 가입 기능

가장 회원 가입이 되기 위한 조건은

1. 사용 가능한 ID (사용중인 ID 사용 불가)

2. 비밀번호 확인 (비밀번호가 같아야 함)

3. 이름과 닉네임이 같으면 안된다.(필요할 것 같아서 넣음)

4. 회원가입

이렇게 3가지가 필요하다.

1. 사용 가능한 ID

사실 기본 회원가입과 비슷하게 ID를 입력 후 중복체크하는 버튼을 만드려고 했다.

하지만, 우리가 만든 디자인과는 중복체크 버튼은 어울리지 않았고, 결국 keyup 기능을 이용하여 중복체크를 하기로 했다.

$('.idInput').on("propertychange change keyup paste input", function(){
  // console.log("keyup 테스트");
  var userId = $(".idInput").val();
  var data = {userId : userId}

  $.ajax({
    type: "post",
    url: "/check/id",
    data : data,
    success : function(result){
      //사용 가능
      if(result === 0){
        $(".condition1").css("display", "flex");
        $(".id_input_re_1").css("display","inline-block");
				$(".id_input_re_2").css("display", "none");
        console.log("사용 가능");
      }
      // 아이디 중복
      if(result === 1){
        $(".condition1").css("display", "flex");
        $(".id_input_re_1").css("display","none");
				$(".id_input_re_2").css("display", "inline-block");
        console.log("아이디 중복!");
      }
    }
  });
});

propertychange change keyup paste input을 이용하여 input값에 입력되는 값을 실시간으로 처리할 수 있도록 만들었다.

이후 ajax를 이용하여 ID 중복체크 메서드를 실행시켜 사용 가능한지 중복인지 판별하는 기능을 만들었다.

service 부분

public int checkDuplicateNickName(String userNickName) {
        Optional<UserEntity> find = userRepository.findByUserNickName(userNickName);
        if(find.isEmpty()){
            System.out.println("possible NickName!!");
            return 0;
        }
        else{
            System.out.println("duplicate NickName!!");
            return 1;
        }
    }

keyup 된 ID를 가져와서 만약 해당 ID를 갖고 있는 사용자가 있다면, 1을 반환하고, 사용가능한 아이디라면 0을 반환하도록 만들었다.

2. 비밀번호 체크

대부분 회원가입 페이지를 보면 비밀번호를 누르고 한번더 비밀번호를 입력하라고 한다.

그 부분을 만들었다.

이 부분은 회원가입을 누를 때 체크하는 기능으로, 비밀번호와 한번더 입력한 비밀번호 값이 같지 않다면 회원가입이 되지 않게 만들었다.

$(document).ready(() => {
  $("button").click((event) => {
    var password = $(".passwordInput").val();
    var passwordCheck = $(".passwordCheckInput").val();

    if(password !== passwordCheck) {
      $(".condition2").css("display", "");
      event.preventDefault();
    }
    if(password === passwordCheck) {
      $(".condition2").css("display", "none");
    }
  })
})

해당 input 값들을 가져와 같은지 판별하였다.

3. 이름과 닉네임이 같으면 안된다.

이 부분도 2번과 똑같이 두 input 값을 가져와 비교하여 판별하였다.

$(document).ready(() => {
  $("button").click((event) => {
    var nameVal = $(".nameInput").val();
    var nickNameVal = $(".nickNameInput").val();
    if (nameVal === nickNameVal) {
      $(".condition").css("display", "");
      event.preventDefault();
    }
    if (nameVal !== nickNameVal) {
      $(".condition").css("display", "none");
      event.preventDefault();
    }
  });
});

4. 회원 가입

모든 유효성 검사에 가능해지면 회원가입을 할 수 있다.

회원 가입은 ajax를 통해 회원가입이 이루어지게 만들었다.

$(document).ready(() => {
  $(".join_button").click((event) => {
    var nameVal = $(".nameInput").val();
    var nickNameVal = $(".nickNameInput").val();
    var password = $(".passwordInput").val();
    var passwordCheck = $(".passwordCheckInput").val();

    var userId = $(".idInput").val();
    var data = {
      userId : $(".idInput").val(),
      userNickName : $(".nickNameInput").val()
    };

    $.ajax({
      type: "post",
      url: "/check",
      data : data,
      success : function(result){
        if(nameVal !== nickNameVal){
          if(password === passwordCheck){
            if(result === 3){
              alert("회원가입되었습니다.");
              document.getElementById("signup").submit();
            }
            else if(result === 2){
              alert("닉네임이 중복됩니다.");
            }
          }
        }
      }
    })
  })
})

회원가입에 필요한 input값들을 data 로 만들어 ajax로 서버에 보낸다.

그후 js로만 만든 유효성 검사를 if문으로 판별한 후 서버에서 받아온 값을 또 확인 하여 회원가입 시켰다.

이때 서버에서 받아오는 값은 아이디 닉네임이 중복되는지 안되는지를 판별하는 것이다.

회원가입은 form태그를 이용하여 설정하였다.

 @PostMapping("/check")
    public ResponseEntity<Integer> checkIdAndNick(@RequestParam String userId, @RequestParam String userNickName){
        int checkId = userService.checkDuplicateId(userId);
        int checkNick = userService.checkDuplicateNickName(userNickName);
        //아이디 닉네임 둘다 중복될 때
        if(checkId == 1 && checkNick == 1){
            return new ResponseEntity<>(0, HttpStatus.BAD_REQUEST);
        }
        //아이디 중복될 때
        if(checkId == 1 && checkNick == 0){
            return new ResponseEntity<>(1, HttpStatus.BAD_REQUEST);
        }
        //닉네임 중복될 때
        if(checkId == 0 && checkNick == 1){
            return new ResponseEntity<>(2, HttpStatus.OK);

        }
        //아이디 닉네임 둘다 사용 가능할 때
        if(checkId == 0 && checkNick == 0){
            return new ResponseEntity<>(3, HttpStatus.OK);   
        }
        else
            return new ResponseEntity<>(null, HttpStatus.BAD_GATEWAY);
        
    }

이렇게 회원가입 부분을 만들었다.

로그인 기능

로그인 기능은 아주 쉽게 만들었다.

function login() {
  var idInput = document.querySelector(".idInput").value;
  var passwordInput = document.querySelector(".passwordInput").value;

  let data = {
    userId: $(".idInput").val(),
    userPassword: $(".passwordInput").val(),
  };
  $.ajax({
    type: "POST",
    url: "/login",
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
      alert("로그인 되었습니다.");
      window.location.replace("/"); // Redirect to the main page
    },
    error: function () {
      alert("존재하지 않는 정보입니다.");
      window.location.href = "/login";
    },
  });
}

ID와 비밀번호 input 값을 가져와 서버에 반환해 로그인 시키는 기능이다.