project movie 10

디테일 페이지

Slick Carousel Example

추천영화

<script>
    // 영화 목록을 가져와서 JavaScript 배열로 변환
    var movieList = [
        <% List<CgvVO> movies = new CgvDAO().getMovies(); %>
        <% for (int i = 0; i < movies.size(); i++) { %>
            <% CgvVO movie = movies.get(i); %>
            {
                title: "<%= movie.getTitle() %>",
                image: "<%= movie.getImage() %>",
                genre: "<%= movie.getGenre() %>"
            }
            <% if (i < movies.size() - 1) { %>,<% } %>
        <% } %>
    ];

    // 이미지 URL 배열 초기화
    var imageUrls = [];

    // 영화 목록의 이미지 URL을 imageUrls 배열에 추가
    for (var i = 0; i < movieList.length; i++) {
        imageUrls.push(movieList[i].image);
    }

    // 카드 요소 가져오기
    var cardElements = document.querySelectorAll(".card");

    // 이미지 URL을 카드에 설정하고 클릭 이벤트 리스너 추가
    for (var i = 0; i < cardElements.length; i++) {
        if (i < imageUrls.length) {
            var imgElement = cardElements[i].querySelector("img");
            imgElement.src = imageUrls[i];
            cardElements[i].addEventListener("click", handleCardClick); // 클릭 이벤트 리스너 추가
            cardElements[i].setAttribute("data-index", i); // 각 카드에 인덱스 속성 추가
        } else {
            console.error("이미지 URL이 부족합니다.");
        }
    }

    function handleCardClick(event) {
        var index = event.currentTarget.getAttribute("data-index"); // 클릭한 카드의 인덱스 가져오기
        // "detail.jsp" 페이지로 이동하면서 index를 전달
        window.location.href = "../article/detail?index=" + index;
    }
</script>

영화의 이미지를 눌렀을때 그에 맞는 디테일 페이지 구현

              <h1>Movie Detail</h1>
<%-- 영화 목록을 가져와서 JavaScript 배열로 변환 --%>
<%
    List<CgvVO> movies = new CgvDAO().getMovies();
    int index = Integer.parseInt(request.getParameter("index")); // URL 매개변수에서 영화의 인덱스를 가져옴
    CgvVO movie = movies.get(index); // 해당 인덱스의 영화를 가져옴
%>
<div>
    <!-- 영화 상세 정보를 표시하는 부분 -->
    <div>
        <img src="<%= movie.getImage() %>" alt="<%= movie.getTitle() %>">
    </div>
    <div>
        <h2><%= movie.getTitle() %></h2>
        <p><strong>장르:</strong> <%= movie.getGenre() %></p>
        <!-- 기타 영화의 상세 정보를 표시할 수 있습니다 -->
    </div>
</div>
<a href="../main.jsp">돌아가기</a> <!-- 메인 페이지로 돌아가는 링크 -->

@RequestMapping("/usr/article/detail")
public String showDetail(HttpServletRequest req, Model model,
@RequestParam(required = false) Integer index) {
Rq rq = (Rq) req.getAttribute("rq");

    // 인덱스로부터 해당하는 게시물을 가져오는 로직 추가
    List<Article> articles = articleService.getForPrintArticles(1, 10, 1, "title,body", ""); // 임시로 boardId, itemsInAPage, page, searchKeywordTypeCode, searchKeyword을 지정
    
    if (index == null || index < 0 || index >= articles.size()) {
        return rq.historyBackOnView("존재하지 않는 게시물입니다.");
    }
    
    Article article = articles.get(index);
    ResultData usersReactionRd = reactionPointService.usersReaction(rq.getLoginedMemberId(), "article", article.getId());

    if (usersReactionRd.isSuccess()) {
        model.addAttribute("userCanMakeReaction", usersReactionRd.isSuccess());
    }

    List<Reply> replies = replyService.getForPrintReplies(rq.getLoginedMemberId(), "article", article.getId());

    int repliesCount = replies.size();

    model.addAttribute("article", article);
    model.addAttribute("replies", replies);
    model.addAttribute("repliesCount", repliesCount);
    model.addAttribute("isAlreadyAddGoodRp", reactionPointService.isAlreadyAddGoodRp(rq.getLoginedMemberId(), article.getId(), "article"));
    model.addAttribute("isAlreadyAddBadRp", reactionPointService.isAlreadyAddBadRp(rq.getLoginedMemberId(), article.getId(), "article"));

    // 나머지 로직 생략...

    return "usr/article/detail";
}

원래 코드는 id값을 받아와서 보여주는 코드였는데 인덱스 값으로 보여주게 바꿨다.
이제 영화 디테일에서 댓글 기능을 추가해보자!