영화 예매 사이트 (MoVieCinema) - 영화 리뷰 목록에 작성자 표시

회원 가입 후 영화 리뷰 작성 시 작성자가 나오도록 수정해준다. 

현재는 로그인 기능을 구현하지 않아 작성자 란에 null이 나오고, 로그인을 하지 않은 사용자들도 리뷰를 남길 수 있도록 구현이 되어있다.
로그인 기능을 구현하였으니 이제 로그인한 회원이 댓글을 작성하면 작성자가 리뷰 목록에 나오도록하고, 로그인 하지 않은 회원이 리뷰를 작성하려하면 로그인 창으로 이동하도록 하였다.
또, 리뷰 내용을 작성하지 않고 작성 버튼을 누를경우 내용을 작성해달라는 문구를 띄우도록 했다.

ReviewController

@PostMapping("/reviewInsert")
@ResponseBody
public String insertReview(Review review, HttpSession session) {

    if(session.getAttribute("loginUser") == null) {
        return "fail";
    }
    reviewService.reviewInsert(review);
    return "success";
}

세션에 담은 loginUser에 대한 정보가 없으면( 로그인을 하지 않으면 ) 리뷰 작성이 되지 않도록 AJAX 요청을 fail처리 한다.

review.jsp

var movieId = ${movie.movieId};
var loginUsername = "<c:out value='${loginUser.username}'/>";

  $(document).ready(function() {
         updateReviewList(movieId);
     });

 function insertReview() {
    var reviewContent =  $("#reviewContent").val();
    if (!reviewContent.trim()) {
            alert('리뷰 내용 작성은 필수입니다.');
            $("#reviewContent").focus();
            return;
        }
     $.ajax({
         url: "reviewInsert",
         data: {
             movieNo: movieId,
             reviewWriter: loginUsername,
             reviewContent: $("#reviewContent").val()
         },
         type: "post",
         success: function (result) {
            if(result === "fail") {
                const yn = confirm('로그인 후에 리뷰 작성 가능합니다. 로그인 창으로 이동할까요 ?');
                    if(yn) {
                            returnUrl = '/showDetail?movieId=${movie.movieId}'
                            location.href='/member/login?returnUrl=' + returnUrl;
                           }
            } else {
                 updateReviewList(movieId);
                 $("#reviewContent").val("");
            }
         },
         error: function () {
             console.log("리뷰 등록 ajax통신 실패");
         }
     });
 }

리뷰 목록에 작성자도 표시되도록 추가한다.

원래는 

 data: {
     movieNo: movieId,
     reviewWriter: ${sessionscope.loginUser.username},
     reviewContent: $("#reviewContent").val()
 },

reviewWriter에 위의 코드처럼 세션에 담은 loginUser 값을 넣어주었는데 왜인지 자꾸 DB에 들어가지를 않았다.
그래서 따로 변수를 지정해서 값을 넣어주니 DB에 잘들어갔다. 무슨 문제 때문인지는 잘 모르겠다ㅠㅠ

var loginUsername = "<c:out value='${loginUser.username}'/>"; 

data: {
     movieNo: movieId,
     reviewWriter: loginUsername,
     reviewContent: $("#reviewContent").val()
 },

여기서 사용된 JSTL 코드인 <c:out>는 출력 태그로, HTML 특수 문자를 escape하여 안전하게 출력하는 역할을 한다.
이렇게 함으로써 JavaScript 변수에 할당되는 값이 HTML 특수 문자에 의해 깨지는 것을 방지한다.

그러면 이렇게 작성자가 리뷰 목록에 잘 뜨는 것을 확인할 수 있다. 

 success: function (result) {
  if(result === "fail") {
      const yn = confirm('로그인 후에 리뷰 작성 가능합니다. 로그인 창으로 이동할까요 ?');
          if(yn) {
                  returnUrl = '/showDetail?movieId=${movie.movieId}'
                  location.href='/member/login?returnUrl=' + returnUrl;
                 }
  } else {
       updateReviewList(movieId);
       $("#reviewContent").val("");
  }
},

그리고 이 부분이 로그인을 하지 않은 사용자가 리뷰를 작성하려고 시도했을 때 컨트롤러에서 fail을 반환한다. 
jsp에서 fail을 반환 받으면 로그인을 하도록 창을 띄우고 확인을 누르면 로그인 창으로 이동하도록 한다.

var reviewContent =  $("#reviewContent").val();
if (!reviewContent.trim()) {
    alert('리뷰 내용 작성은 필수입니다.');
    $("#reviewContent").focus();
    return;
}

이 코드는 사용자가 리뷰 내용을 작성하지 않고 작성 버튼을 누를 경우 작성 안내를 하도록 작성한 부분이다.