상세페이지 구현

//영화카드 클릭시 상세페이지 이동
    movieCard.addEventListener('click', () => {
      localStorage.setItem('movie', JSON.stringify(movie));
      //새로운 페이지 URL 생성
      const newPageURL = `movie-detail.html`;
      // 새로운 페이지로 이동
      window.location.href = newPageURL;
    })

 

영화 카드를 누르면 새로운 html페이지로 이동한다. 이 때 TMDB에서 받아온 movie정보를 새로운 페이지에 넘겨주기 위해서 localStorage에 movie의 정보를 JSON으로 저장한다.

 

document.addEventListener('DOMContentLoaded', function () {
            //로컬 스토리지에 저장되어 있는 movie가져오기
            const movie = JSON.parse(localStorage.getItem('movie'));

            // 영화 정보가 로컬 스토리지에 저장되어 있는지 확인
            if (movie) {
                const movieDetailContainer = document.getElementById('movie-detail');
                movieDetailContainer.innerHTML = `
                <div class="card mb-3" style="max-width: 100%;" id="${movie.id}">
                    <div class="row g-0">
                        <div class="col-md-4">
                            <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" class="img-fluid rounded-start" alt="...">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title">${movie.title}</h5>
                                <p class="card-text">${movie.overview}</p>
                                <p class="card-text"><small class="text-body-secondary"> Rating : ${movie.vote_average}</small></p>
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary" id="back-button">Back</button>
                    </div>
                 </div>`;
            } else {
                console.error('영화 정보를 찾을 수 없습니다.');
            }

            //돌아가기 버튼 기능
            const backBtn = document.getElementById("back-button");
            backBtn.addEventListener('click', () => {
                // 타이틀 페이지로 이동
                window.location.href = 'index.html';
            });

        });

 

localStorage에 저장되는 movie를 받아와서 카드에 표시해준다.