팀프로젝트
[영화 검색사이트]인물 상세페이지 개발2 인물의 필모크래피와 방송출연 정보를 탭매뉴로 보여주기
dtLee
2023. 11. 6. 20:57
출연작품 탭매뉴
배우의 출연작품은 영화와 방송출연으로 나뉜다.
이 부분을 탭매뉴로 만들었다.
먼저 탭매뉴의 제목을 클릭하면 해당매뉴가 불이 들어온다.'

클릭하면 focus되는 부분은 css로 해결하였다.
.appearance_title_box > div.active {
font-weight: bold;
border-bottom: 2px solid #000;
}
.appearance_title_box > div에 active라는 클레스가 붙으면 적용되는 css이다.
addEventListenrer의 클릭이벤트로 클릭하면 class가 붙혀지게 만들었다.
// 출연작품 탭매뉴 버튼
appearance_title[0].addEventListener("click", () => {
appearance_title[0].classList.add("active");
appearance_title[1].classList.remove("active");
result = "";
makePersonDetail();
});
appearance_title[1].addEventListener("click", () => {
appearance_title[1].classList.add("active");
appearance_title[0].classList.remove("active");
result = "";
makePersonDetail();
});
탭매뉴를 클릭했을때 클릭한 탭매뉴에 acive라는 클레스가 붙고 클릭하지 않는 탭매뉴는 active클레스가 떨어진다.
그리고 클래스의 유무에 따라 리스트의 요소를 변경하였다.]
// 출연작품
let appBool1 = appearance_title[0].classList.contains("active");
let castFor = appBool1 === true ? movies.cast : tvSeries.cast;
for (let i = 0; i < castFor.length; i++) {
let madiaId = appBool1 === true ? movies.cast[i].id : tvSeries.cast[i].id
let madiaFind = appBool1 === true ? 'movie' : 'tv';
let appList = `<li onclick="movieDetail(${madiaId},'${madiaFind}')">
<div class="app_img_box">
<img src="https://image.tmdb.org/t/p/w500/${
appBool1 === true ? movies.cast[i].poster_path : tvSeries.cast[i].poster_path
}" alt="">
</div>
<div class="app_infor_box">
<div class="title"><p>제목</p><p> : </p><p>${
appBool1 === true ? movies.cast[i].title : tvSeries.cast[i].name
}</p><p>${appBool1 === true ? movies.cast[i].character : tvSeries.cast[i].character}</p></div>
<div class="release_date"><p>${appBool1 === true ? "개봉날짜" : "방영일"}</p><p> : </p><p>${
appBool1 === true ? movies.cast[i].release_date : tvSeries.cast[i].first_air_date
}</p></div>
<div class="vote_average"><p>${appBool1 === true ? "평점" : "방송횟수"}</p><p> : </p><p>${
appBool1 === true ? movies.cast[i].vote_average : tvSeries.cast[i].episode_count + " 부작"
}</p></div>
<div class="overview"><p>줄거리</p><p> : </p><p onclick="appListFunc(${i})">"${
appBool1 === true ? movies.cast[i].overview : tvSeries.cast[i].overview
}</p></div>
</div>
</li>`;
result += appList;
appearance_list.innerHTML = result;
}
classList.contains()라는 메서드는 해당dom에 클레스가 있는지 없는지를 true/false로 알려준다.
이것을 이용하여 출연영화 탭매뉴에 active클래스가 붙어 있다면 영화의 정보를 요청하고 없다면 tv의 정보를 요청한다.
정렬
리스트를 최신순으로 정렬하였다.
// 엉화
movies.cast.sort((a, b) => {
if (a.release_date > b.release_date) {
return -1;
} else if (a.release_date < b.release_date) {
return 1;
} else {
return 0;
}
});
// tv시리즈
tvSeries.cast.sort((a, b) => {
if (a.first_air_date > b.first_air_date) {
return -1;
} else if (a.first_air_date < b.first_air_date) {
return 1;
} else {
return 0;
}
});
필모그래피

방송출연

미디어 상세페이지 이동
영화/tv상세정보페이지로 이동하기 위한 함수
세션스토리지에 영화의 id와 media를 저장한다.
// 영화상세보기로 넘어가는 이벤트
let movieDetail = (id, media) => {
const data = {
id: id,
media: media
};
sessionStorage.setItem("data", JSON.stringify(data));
window.location.href = "/detail.html";
};