로그인 실패 시 모달창을 띄우려 합니다

우선 컨트롤러부터

구현

---

Controller

@PostMapping("/login")
    public ResponseEntity<?> login(String member_id, String password, HttpSession session) {
        User user = loginService.login(member_id, password);
        if (user != null) {
            session.setAttribute("user", user);
            return ResponseEntity.ok().body(Map.of("status", "success"));
        } else {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(Map.of("status", "error", "message", "아이디 또는 비밀번호를 확인해주세요"));
        }
    }

user 객체를 받아서 null인지 null이 아닌지부터 확인!

null이 아니라면? -> 세션에 user객체를 담아서 전달!
null이라면? -> HttpStatus.UNAUTHORIZED로 전달하면서 message도 전달!

Javascript

$("#loginForm").submit(function(event) {
  event.preventDefault(); // 기본 제출 방지

  let formData = {
    member_id: $("#member_id").val(),
    password: $("#password").val()
  };

  $.ajax({
    type: "POST",
    url: "/login",
    data: formData,
    success: function(response) {
      window.location.href = "/main"; // 로그인 성공 시 페이지 이동
    },
    error: function(xhr) {
      let errorMessage = xhr.responseJSON?.message || "로그인 실패";
      $("#modalTitle").text("로그인 실패");
      $("#modalMessage").text(errorMessage);
      $("#Modal").show(); // 모달 표시
    }
  });

  $(".closeBtn").click(function () {
    $("#Modal").hide();
  })
});

member_id와 password를 formData객체에 담아서 '/login'에 POST방식으로 전달!

결과

---

로그인 실패시 모달창 확인!

로그인 성공시 /main으로 이동 확인!

해결~!