[영화 검색사이트]인물 상세페이지 개발2 인물의 필모크래피와 방송출연 정보를 탭매뉴로 보여주기

출연작품 탭매뉴

 

배우의 출연작품은 영화와 방송출연으로 나뉜다. 

이 부분을 탭매뉴로 만들었다. 

먼저 탭매뉴의 제목을 클릭하면 해당매뉴가 불이 들어온다.'

 

 

클릭하면 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";
};