영화 예매 사이트 (MoVieCinema) - 마이페이지 : 나의 리뷰 조회 항목

나의 리뷰 조회는 로그인한 사용자의 아이디를 찾아 리뷰의 작성자와 동일한 리뷰들을 모두 조회해 오도록 했다.

컨트롤러

서비스에 파라미터로 로그인 유저의 아이디와, 페이징 처리를 위한, pageable, model을 넘겨주었다.

서비스

리파지터리

⇒ 리뷰 테이블의 reviewWriter와 username이 같은 리뷰들을 조회한다.

myReviews.jsp

<section>
    <div class="myReview">
        <table class="myReviewList">
            <thead>
                <tr id="myReviewTitle">
                    <th colspan="7">나의 영화 후기 목록</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="myReview" items="${myReviewList}">
                    <tr id="myReviewItem">
                        <td>${myReview.reviewId}</td>
                        <td>${myReview.reviewWriter}</td>
                        <td>
                            <!-- 별점 표시 부분 -->
                            <c:forEach var="i" begin="1" end="${myReview.starRating}">
                                <span class="yellow-star">★</span>
                            </c:forEach>
                            <c:forEach var="i" begin="${myReview.starRating + 1}" end="5">
                                <span class="gray-star">★</span>
                            </c:forEach>
                        </td>
                        <td id="myReviewContent"><a href="/showDetail?movieId=${myReview.movieNo}">${myReview.reviewContent}</a></td>
                        <td>${fn:substringBefore(myReview.createReviewDate.toString(), 'T')}</td>
                   </tr>
                </c:forEach>
             </tbody>
        </table>
        <div class="myReviewPagination">
            <c:if test="${nowPage > 0}">
                <a href="member/myReviews?page=${nowPage - 1}">이전</a>
            </c:if>
            <c:forEach begin="${startPage}" end="${endPage}" var="page">
                <a href="member/myReviews?page=${page}" class="${page == nowPage ? 'active' : ''}">${page + 1}</a>
            </c:forEach>
            <c:if test="${nowPage + 1 < totalPages}">
                <a href="member/myReviews?page=${nowPage + 1}">다음</a>
            </c:if>
        </div>
</div>
</section>

마이페이지에서 리뷰 보기를 누르면 내가 작성한 리뷰 목록 조회 - myReviews.jsp로 가도록 ajax 처리해주었다.

$("#showMyReviews").click(function(e) {
  e.preventDefault();
  loadPage(0);

  function loadPage(pageNumber) {
      $.ajax({
          url: '/member/myReviews?page=' + pageNumber,
          type: 'GET',
          data: {
              page: pageNumber
          },
          success: function(data) {
              $('.showPage').html(data);
          }
      });
  }
});

기존에 내 정보 수정과 비밀번호 재 설정처럼 이런 식으로 코드를 작성했더니 문제가 발생했다.
현재 목록 조회와 페이징 처리는 정적으로 처리하였고, 페이지를 로드하는 작업만 AJAX로 구현했기 때문에  정적으로 생성한 페이징을 동적으로 띄우는 처리를 해주어야 했다. 그걸 안 해서 자꾸 오류가 났다.

리뷰 보기를 누르면, #showMyReviews" 버튼 클릭 이벤트 안에 loadPage 함수를 정의한다.

loadPage( ) 메서드는 리뷰 페이지 번호를 인자로 받아, 해당 페이지의 리뷰 데이터를 AJAX를 통해 불러온다.
loadPage 메서드를 전역 스코프에 정의하고, 해당 함수를 페이징 링크에서도 호출할 수 있도록 한다.
그래야만 myReviews.jsp에서도 사용할 수 있다.

그리고 myReivews에서도 페이징 부분을 수정해주어야 한다.

페이지를 이동할 때 해당 페이지로 데이터를 동적으로 로드할 수 있도록 JavaScript 함수 loadPage를 호출하여 처리를 해주도록 하면, 정적 페이징을 동적으로 불러올 수 있게 된다.
그리고 해당 리뷰 내용을 누르면 해당 리뷰가 작성된 영화의 상세 페이지로 이동하도록 링크를 걸어주었다.

<td id="myReviewContent">
	<a href="/showDetail?movieId=${myReview.movieNo}">${myReview.reviewContent}</a>
</td>