Spring 클론코딩 프로젝트 취향분석( 유저정보, 평가수, 별점분포)

🎬 취향분석 유저 아이디 타임리프 입력 부분 

<h1 class="css-1bmxwx8"><span class="css-1haseg">취향분석</span>
  <div class="css-1yyol1o">
    <div class="css-170kft5">
      <div class="css-fom973-ProfilePhotoImage"></div>
    </div>
    <div class="css-mp2a8y" th:text="${userName}">ㅁㄴㅇ</div>
  </div>
</h1>

tb_user 테이블에 있는 해당 로그인한 정보를 출력하는 부분이다.
 
🎬 취향분석 유저 평가수 타임리프 부분

<ul class="css-1ai3iwk-VisualUl">
  <li class="css-1666h6g">
    <div class="css-1caz78i" th:text="${starSum.get('movie')}">37</div>
    <div class="css-1fak39c">영화</div>
  </li>
  <li class="css-1666h6g">
    <div class="css-1caz78i" th:text="${starSum.get('tv')}">21</div>
    <div class="css-1fak39c">TV 프로그램</div>
  </li>
  <li class="css-1666h6g">
    <div class="css-1caz78i" th:text="${starSum.get('book')}">11</div>
    <div class="css-1fak39c">책</div>
  </li>
  <li class="css-1666h6g">
    <div class="css-1caz78i" th:text="${starSum.get('webtoon')}">20</div>
    <div class="css-1fak39c">웹툰</div>
  </li>
</ul>

해당 콘텐츠에 대한 별점의 수를 합처 출력하는 부분이다.
 
🎬 취향분석 유저 평가 별점 분포 타임리프 부분

<div class="css-1y901al-Row emmoxnt0">
  <h3 class="css-d98475" th:text="${starAvg} <= 2? '웬만해서는 호평을 하지 않는 매서운 \'독수리파\'':
            (${starAvg} <= 3? '웬만해서는 호평을 하지 않는 매서운 \'독수리파\'':(${starAvg} <= 4? '대중의 평가에 잘 휘둘리지 않는 \'지조파\'':
            '남 작품에 욕 잘 못하는 착한 품성의 \'돌고래 파\''))">대중의 평가에 잘 휘둘리지 않는 '지조파'</h3>
  <div class="css-baz663">
    <div class="css-g1q7ln">
      <div class="css-hugi8h"><span prefix="1" th:class="'css-111q860-Bar'"
        th:styleappend="'height:' + (${starMax} == 1?'88':${starGraph.get(1)})+'px;'+
                    (${starMax} == 1 ? 'background-color:#ffa136;':_)"></span></div>
      <div class="css-hugi8h"><span prefix="2" th:class="'css-r41bl-Bar'"
        th:styleappend="'height:' + (${starMax} == 2?'88':${starGraph.get(2)})+'px;'+
                    (${starMax} == 2 ? 'background-color:#ffa136;':_)"></span></div>
      <div class="css-hugi8h"><span prefix="3" th:class="'css-z5uyqq-Bar'"
        th:styleappend="'height:' + (${starMax} == 3?'88':${starGraph.get(3)})+'px;'+
                    (${starMax} == 3 ? 'background-color:#ffa136;':_)"></span></div>
      <div class="css-hugi8h"><span prefix="4" th:class="'css-1hp04q9-Bar'"
        th:styleappend="'height:' + (${starMax} == 4?'88':${starGraph.get(4)})+'px;'+
                    (${starMax} == 4 ? 'background-color:#ffa136;':_)"></span></div>
      <div class="css-hugi8h"><span prefix="5" th:class="'css-fa6pmb-Bar'"
        th:styleappend="'height:' + (${starMax} == 5?'88':${starGraph.get(5)})+'px;'+
                    (${starMax} == 5 ? 'background-color:#ffa136;':_)"></span></div>
    </div>
  </div>

해당 사용자가 준 별점의 평가를 기준으로 사용자의 성향을 글로 표현하였다. 기존 왓챠피디아는 20여개 이상의 별점 성향이 존재하지만 클론코딩간 많은 데이터가 존재하지 않고 동일한 기능의 반복이기 때문에 '독수리파'와 같이 특정 3개의 성향을 표출하였다. 그래프 표현 방식은 기존 DetailPage의 그래프 방식과 유사하다.
 
🎬 취향분석 유저 평가 별점 분포 선호도 타임리프 부분

<ul class="css-1ai3iwk-VisualUl">
  <li class="css-poewkh">
    <div class="css-1caz78i" th:text="${starAvg}">3.6</div>
    <div class="css-1fak39c">별점 평균</div>
  </li>
  <li class="css-poewkh">
    <div class="css-1caz78i" th:text="${starCnt}">89</div>
    <div class="css-1fak39c">별점 개수</div>
  </li>
  <li class="css-poewkh">
    <div class="css-1caz78i" th:text="${starMax}">3.0</div>
    <div class="css-1fak39c">많이 준 별점</div>
  </li>
</ul>

기존 별점을 표출한것과 유사하며 starCnt, starMax 를 추가하여 사용자가 얼마나 평가를 했는지 그리고 어떤 별점을 가장 많이 주었는지 카운트를 하여 사용자의 정보를 가지고 왔다.
 
🎬 취향분석 해당 전체 출력화면