영화 별점 매기기 toggle - 진행 상황

[letsgolgtwins]

아마도 제일 오래 걸릴 예정

• [x] 영화 별점 toggle 매기기 기능
• [x] 별점 toggle 효과 구현 - 비워진 별 / 채워진 별

[별점 매기기 toggle 방식] #별점 클릭

1번 별 누르면 1점 2번 별 누르면 2점 3번 별 누르면 3점 4번 별 누르면 4점 5번 별 누르면 5점

#별점 재클릭

1번 별 재클릭 시 0점 2번 별 재클릭 시 0점 3번 별 재클릭 시 0점 4번 별 재클릭 시 0점 5번 별 재클릭 시 0점

#별점을 매긴 상태에서 다른 별 클릭

그 새롭게 매긴 별점으로 수정

남은 할 일

별 클릭 시, 채워진 별로 바뀌는 기능 별 재클릭 시, 채워진 별에서 비워진 별로 바뀌는 기능

[letsgolgtwins]

별점 토글 기능에 대해..

StarRestController

• [ ] 별점 toggle API
  • movieId는 PathVariable로, userOriginId는 session으로, point는 RequestParam으로 가져옴

StarBO

• [ ] select count 메소드
• [ ] 별점 toggle 메소드 // count가 0일 경우 insert메소드 // count가 0이 아닐 경우 > 점수랑 이미 매겨진 점수랑 같으면 delete 메소드 / 다르면 update 메소드
• [ ] insert 메소드 (별점 매기기)
• [ ] update 메소드 (별점 수정)
• [ ] delete 메소드 (별점 삭제)

StarMapper 인터페이스

• [ ] select count
• [ ] insert
• [ ] delete

StarXML

• [ ] movieId, userOriginId가 일치하는 데이터의 count를 star 테이블에서 select 하는 쿼리(결과는 1 아니면 0)
• [ ] movieid, userOriginId, point를 star 테이블에 insert 하는 쿼리 (별점 매기기)
• [ ] movieid, userOriginId가 일치하는 데이터를 star 테이블에서 point를 update하는 쿼리 (별점 수정)
• [ ] movieid, userOriginId가 일치하는 데이터를 star 테이블에서 delete 하는 쿼리 (별점 삭제)

movieDetail.html (view)

<a href="#" class="starBtn">
  <img th:data-point-one="1" id="emptyStar1" class="emptyStar1" alt="비워진별점" src="/image/empty_star.png">
  <img id="fullStar1" class="fullStar1 d-none" alt="채워진별점" src="/image/full_star.png">
</a>

1번 별, 2번 별, 3번 별, 4번 별, 5번 별 각각의 별에 th:data-point-*="숫자" 타임리프 문법으로 data를 넣어놓는다.

그리고 script 영역의 starBtn 클릭 이벤트에서,

movieId, userOriginId, point 세 개의 파라미터가 들어오는 상황인데

• movieId는 URLSearchParams를 이용해 getQueryParam으로 가져오고, userOriginId는 session에서 받아온다. 근데 문제는 point였다.

그래서 첫 번째로 해본 시도는

if ($("#emptyStar1").on('click')) {  // 1번 별을 클릭한 경우
  let point = $("#emptyStar1").data("point-one"); // 1점
} else if ($("#emptyStar2").on('click')) { // 2번 별을 클릭한 경우
  let point = $("#emptyStar2").data("point-two"); // 2점
} else if ($("#emptyStar3").on('click')) { // 3번 별을 클릭한 경우
  let point = $("#emptyStar3").data("point-three"); // 3점
} else if ($("#emptyStar4").on('click')) { // 4번 별을 클릭한 경우
  let point = $("#emptyStar4").data("point-four"); // 4점
} else { // 5번 별을 클릭한 경우
  let point = $("#emptyStar5").data("point-five"); // 5점
}

이런 방법으로 접근해 봤다. 근데 기능이 안 먹혔다. 문제 원인은 if문의 조건문에 click 이벤트를 넣은 것이었다.

근데 막상 테스트했을 땐 잘만 되긴 했다.

테스트
if ($("#emptyStar2").on('click')) { 
  alert($("#emptyStar2").data("point-two"));
} 
alert 창에 숫자 2가 잘만 떴었다.

다행히 검색을 해본 결과, find()를 쓰는 방법이 있었다. $(this).find("img").data("point-one") 이 의미하는 건 내가 클릭한 태그의 안쪽에서 태그를 찾은 뒤, 그 태그 내부에 있는 data-* 속성값을 찾는다는 의미이다.

즉, 이제 point를 validation 해줌에 있어서

let point = 
$(this).find("img").data("point-one") || 
$(this).find("img").data("point-two") || 
$(this).find("img").data("point-three") || 
$(this).find("img").data("point-four") || 
$(this).find("img").data("point-five");

이렇게 해주면 가장 처음으로 값이 존재하는 할 때 그 data("point-*")의 값을 let point에 할당하게 된다.

해결 완료. 이다음부턴 formData로 해주었다.

[클릭 > 채워진 별 / 재클릭 > 빈 별]

1번빈별은 0점일 때 보여짐 (=1,2,3,4,5점이 아닐 때) 1번채워진별은 1점, 2점, 3점, 4점, 5점일 때 보여짐

2번빈별은 0점, 1점일 때 보여짐 (=2,3,4,5점이 아닐 때) 2번채워진별은 2점, 3점, 4점, 5점일 때 보여짐

3번빈별은 0점, 1점, 2점일 때 보여짐 (=3,4,5점이 아닐 때) 3번채워진별은 3점, 4점, 5점일 때 보여짐

4번빈별은 0점, 1점, 2점, 3점일 때 보여짐 (=4,5점이 아닐 때) 4번채워진별은 4점, 5점일 때 보여짐

5번빈별은 0점, 1점, 2점, 3점, 4점일 때 보여짐 (=5점이 아닐 때) 5번채워진별은 5점일 때 보여짐

자, 이제 이걸 타임리프 문법으로 만들면 끝난다.

별점 토글 끝.

[letsgolgtwins]

근데 이걸 대소비교로 더 간단하게 만들어보자