Spring 클론코딩 프로젝트 콘텐츠 DetailPage(별점,별점 그래프, 해당 유저 별점 달았는지)

✔ MovieController - @RequesdtMapping("/movie") 기본 주소

@Controller
@RequestMapping("/movie")
@RequiredArgsConstructor

✔     @GetMapping("/{movieIdx}") // http://localhost:8080/movie/1 

    @GetMapping("/{movieIdx}") // http://localhost:8080/movie/1
    public String movieDetail(
            @PathVariable Long movieIdx,
            @PageableDefault(size = 5, sort = "commIdx", direction = Sort.Direction.DESC) Pageable pageable,
            ModelMap map,
            HttpSession session
    ){
        UserSessionDto dto = (UserSessionDto) session.getAttribute("userSession");

@PathVariable Long movieIdx 를 사용하여 영화 디테일 페이지 해당 프라이머리 값인 Idx를 통해 페이지를 이동한다.

 

MovieService의 movieView

@Transactional(readOnly = true)
public MovieResponse movieView(Long movieIdx){
    MovieDto mov = movieRepository.findById(movieIdx).map(MovieDto::from).get();
    return MovieResponse.from(mov);
}

 

 

✔ 평균 별점 구하는 부분

  MovieResponse movie = movieService.movieView(movieIdx);
//      평균 별점
        double sum = 0;
        double avgStar = 0;
        if(movie.starList().size() == 1){
            avgStar = movie.starList().get(0).getStarPoint();
        }else if(movie.starList().size() > 0){
            for(int i=0; i<movie.starList().size(); i++){
                sum += movie.starList().get(i).getStarPoint();
            }
            avgStar = Math.round((sum / movie.starList().size()) * 10.0) / 10.0;
        }

영화 별점이 있는지 없는지에 따라  1개의 별점만 있으면 한 값만 출력하지만 if-else문을 사용하여 여러개일 경우 for문을 사용하여 반복하여 별점의 합을 구하고 별점들의 평균을 출력해주는 부분이다. 평균을 구하기 위해 나누기를 해야하기 때문에 double형을 사용하였다.

 

 

✔ 별점 중복문제와 로그인 했을 경우 

        StarResponse hasStar = null;
        if(dto!=null) {
//        해당 유저가 별점을 매겼는지
            hasStar = starService.findStar("movie", movie.idx(), dto.userIdx());
        }

콘텐츠 중 해당 영화에 로그인한 유저 정보가 평가한 기록이 있는지 확인하는 컨트롤러에서의 기능 부분

 

✔ 별점 그래프 출력

//        별점 그래프
        HashMap<Long, Integer> starGraph = new HashMap<Long,Integer>(){{
            put(1L,0);put(2L,0);put(3L,0);put(4L,0);put(5L,0);
        }};
        if(movie.starList().size() > 0){
            int graphPx = 88 / movie.starList().size();
            for(Star star : movie.starList()){
                for(Long i=1L; i<=5L; i++){
                    if(star.getStarPoint() == i){
                        starGraph.put(i,starGraph.get(i) + graphPx);
                    }
                }
            }
        }
        Long bigStar = starGraph.entrySet().stream().max((m1, m2) -> m1.getValue() > m2.getValue() ? 1 : -1).get().getKey();

별점 그래프를 출력하기 위한 Controller 부분의 기능

 

✔ 별점 그래프 타임리프 

<!--    별점 그래프-->
<attr sel="section[data-rowindex='8']" th:if="${movie.starList().size()} >= 5">
    <attr sel="span.css-14yj34l-RatingStatHeaderTopRight/h4" th:text="'평균 ★' + ${avg}"/>
    <attr sel="span.css-14yj34l-RatingStatHeaderTopRight/strong" th:text="'(' + ${movie.starList().size()} + '명)'"/>
    <!--        그래프 부분-->
    <attr sel="div.css-g1q7ln" th:object="${graph}">
        <attr sel="span.css-111q860-Bar" th:style="*{get(1L)} == 0 ? 'height:1px;' : (${bigStar} == 1 ? 'height: 88px; background-color: #ffa136;' : 'height:'+ *{get(1L)} +'px;')"/>
        <attr sel="span.css-5vyahd-Bar" th:style="*{get(2L)} == 0 ? 'height:1px;' : (${bigStar} == 2 ? 'height: 88px; background-color: #ffa136;' : 'height:'+ *{get(2L)} +'px;')"/>
        <attr sel="span.css-himw0d-Bar" th:style="*{get(3L)} == 0 ? 'height:1px;' : (${bigStar} == 3 ? 'height: 88px; background-color: #ffa136;' : 'height:'+ *{get(3L)} +'px;')"/>
        <attr sel="span.css-3zcnds-Bar" th:style="*{get(4L)} == 0 ? 'height:1px;' : (${bigStar} == 4 ? 'height: 88px; background-color: #ffa136;' : 'height:'+ *{get(4L)} +'px;')"/>
        <attr sel="span.css-mr14ik-Bar" th:style="*{get(5L)} == 0 ? 'height:1px;' : (${bigStar} == 5 ? 'height: 88px; background-color: #ffa136;' : 'height:'+ *{get(5L)} +'px;')"/>
    </attr>
</attr>

별점의 수가 5개 이상일 때 부터 출력하기 위해 th:if 문을 사용하였으며 그래프 표기를 하기 위해 5개로 나눠서 해당하는 부분이 증가할 수 있도록 구성

 

✔ 별점 그래프 출력 화면