마이페이지 footer 임시적으로 바닥에 붙이기? 필요 있나?
뷰포트 줄어들 때 로고 아이콘 형태로 변경
마이페이지 별모양이랑 평점 넣기 - api 변경됨
<i class="bx bxs-star bx-flip-horizontal"></i>
getStarRankMovies()는 박스오피스 영화를 가져오게 되어 있는데 유저아이디에 해당하는 별점 배열을 가져오는 함수로 변경하고 그 영화에 맞는 정보를 합쳐야함
별점 그래프
메시지 안건드림
detailPage에 average 필요
모델에서 3.7인데 받아오는 값은 3.42임
아래부터 정렬되도록 바꾸기 bottom: 0px;(position:absolute)
this로 dataset에 접근하므로 화살표함수로 하면 오작동
d3.selectAll('.stars-graph-item')
.datum(function () {
return this.dataset;
})
.style('height', '10%')
.transition()
.duration(1500)
.style('height', d => d.val + '%');
JavaScript
복사
중앙정렬로 바꾸고 바닥부터 시작하기 margin-top: auto;
.detail-container__graph-container {
position: absolute;
bottom: 0;
width: 100%;
}
.detail-container__graph-container > svg {
}
/* & : stars-graph */
.stars-graph-container {
position: relative;
border: 1px solid #fff;
height: 131px;
margin-top: 80px;
margin-bottom: 40px;
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
}
.stars-graph-container .bar--color-normal {
background: rgb(255, 221, 99);
}
.stars-graph-container .bar--color-most {
background: rgb(255, 161, 54);
}
.stars-graph-container span {
font-size: 20px;
line-height: 1.8em;
color: #fff;
text-align: center;
margin-top: auto;
width: 36px;
}
CSS
복사
0점은 없어서 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5점까지 10구간으로 나뉨
$starsGraph.innerHTML = `
<span class="stars-graph-item bar--color-normal" data-val='20' data-score="0.5"></span>
<span class="stars-graph-item bar--color-normal" data-val='80' data-score="1.0"></span>
<span class="stars-graph-item bar--color-normal" data-val='80' data-score="1.5"></span>
<span class="stars-graph-item bar--color-normal" data-val='80' data-score="2.0"></span>
<span class="stars-graph-item bar--color-normal" data-val='80' data-score="2.5"></span>
<span class="stars-graph-item bar--color-most" data-val='60' data-score="3.0"></span>
<span class="stars-graph-item bar--color-normal" data-val='60' data-score="3.5"></span>
<span class="stars-graph-item bar--color-normal" data-val='60' data-score="4.0"></span>
<span class="stars-graph-item bar--color-normal" data-val='60' data-score="4.5"></span>
<span class="stars-graph-item bar--color-normal" data-val='100' data-score="5.0"></span>`;
JavaScript
복사
0.5점이 없으므로 5구간이 됨
