24.07.31 자바스크립트 팀 프로젝트

기존 페이지

이번 프로젝트는 팀원들의 개인 프로젝트 중 하나를 골라 업그레이드 하는 것이 목표이다.

이번 mvp는 아래와 같다.

 

메인페이지

무한스크롤로 pagenum에 따라 api 요청하기

검색기능과 정렬필터 제작하기

 

디테일페이지

영화 카드를 누르면 상세 페이지로 이동하여 내용을 보여주는것

리뷰를 로컬스토리지를 활용하여 작성 및 조회하는 것

 

4가지 조건 중 영화카드를 상세 페이지에서 보여주는 것을 내 역할로 잡았다.

와이어프레임

위 사진의 위에 부분을 진행하는 것이다.

어려운 부분이 없어 금방 끝낼 것이라고 생각하여 api에서 제공해주는 유튜브 링크로

위 디테일 카드에 마우스 오버를 하면 유튜브영상이 재생되는 것을 더해볼 생각이다.

 

현재까지 작업상황은 위와 같다.

영화 id에 따라서 해당 영화의 디테일내용을 받아오는 api를 사용했으며, 아직 스타일 작업은 많이 남아있다.

반응형 작업도 필수적일 것이라고 생각한다.

 

오늘 작업 시간은 짧았지만, 작업 중 문제가 있었던 점은 평점에 따라 별을 채우는 것이었다.

평점이 api로 8.5932이런 형태로 들어오기 때문에, 해당 평점을 별 색깔을 채워 직관적으로 보이게 하고싶었다.

<p class="movieVote">
	<span class='blankStar'>☆☆☆☆☆</p>
	<span style='width: ${starWidth}%' class='filledStar'>★★★★★</p>
</p>

처음 구성은 이러했는데, p태그 속에서 span태그의 width값을 조절하려고 하니, display: inline속성이 적용되어있어 채워진 별의 width값을 조절하지 못했다.

따라서 p태그를 div태그로, span태그를 p태그로 변경하여 style값에 어떤 값을 넣었을 때 width가 달라지도록 설정했다.

<div class="movieVote">
	<p class='blankStar'>☆☆☆☆☆</p>
	<p style='width: ${starWidth}%' class='filledStar'>★★★★★</p>
</div>

이렇게 작성했더니 잘 작동하였다.

 

그런데, 별의 크기를 키우려고 font-size를 조정하니 평점에 맞게 별이 채워지지 않았다.

font-size에 따라 width값이 늘어나는데, 기본 100%는 p태그의 기본 사이즈인 16px에 맞춰져 있는 것이 문제였다.

따라서 font-size를 32px로 조절하고, width값을 계산하는 것을 2배 처리 해주었다.

let starWidth = (vote_average / 10) * 100 * 2;