[JavaScript 개인과제_기초 주차] 4일차: 영화 상세 페이지 구현

오늘의 학습내용 :  영화 상세 페이지 구현하기, 모달, 이벤트 버블링

4일차 목표

클릭된 영화의 ID를 활용해서 TMDB API로부터 영화 정보 요청하기

영화 상세 정보를 모달 창으로 표시하기

모달에서 메인 페이지로 돌아가는 닫기 버튼 구현하기

 

◆ HTML, CSS 사용하여 모달창 만들기

각각의 영화 카드를 클릭했을 때 영화의 상세 정보가 화면에 표시되도록 모달을 이용해 구현한다. 영화 이미지, 제목, 줄거리 요약과 개봉일을 modal-content 에 넣어서 HTML과 CSS로 간단하게 모달창을 만들었다. 모달창 닫기 버튼도 미리 만들었는데, 구글링을 통해 &times 로 가위표 모양을 보기 좋게 표현할 수 있다는 조언을 얻었다. 

<!-- modal div -->
	<div id="movieModal" class="modal">
		<div class="modalContent">
			<span class="close">&times;</span>
			<div class="modalBody">
				<img id="moviePoster" src="" alt="no image">
				<h2 id="movieTitle"></h2>
				<p id="movieOverview"></p>
				<p id="movieReleaseDate"></p>
			</div>
		</div>
	</div>

.modal {
    display: none;
    position: fixed; /* 브라우저 상에서 요소의 위치 고정 */
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

.modalContent {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    text-align: left;
    max-height: 80%; 
    overflow-y: auto;
    margin: auto;
    margin-top: 5%;
}

.close {
    color: gray;
    float: right;
    font-size: 30px;
}

 

◆ 영화의 상세 정보 가져오기

async function fetchmovieDetails(movieId) {
    const movieDetailsURL = `https://api.themoviedb.org/3/movie/
    ${movieId}?${apiKey}&language=ko`
    const response = await fetch(movieDetailsURL);
    const movie = await response.json();

 

◆ 영화 카드에 click 이벤트 추가하기 : getAttribute, closest

    // 영화 카드에 click event 추가하기
    movieContainer.addEventListener('click', (event) => {
        const card = event.target.closest('.movieCard');
        const id = card.getAttribute('data-id');

        fetchmovieDetails(id);
    })

 

◆ 모달에 영화 정보 표시하기

// 모달에 영화 정보 표시
    const modalImage = document.querySelector("#moviePoster");
    const modalTitle = document.querySelector("#movieTitle");
    const modalOverview = document.querySelector("#movieOverview");
    const modalReleaseDate = document.querySelector("#movieReleaseDate");

    modalImage.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`;
    modalTitle.textContent = movie.title;
    modalOverview.textContent = movie.overview;
    modalReleaseDate.textContent = `개봉일: ${movie.release_date}`;

    // 모달을 화면에 표시
    const movieModal = document.querySelector("#movieModal");
    movieModal.style.display = "block";
};

 

◆ 모달 닫기 버튼 만들기

// 모달 닫기
const closeModal = document.querySelector(".close")
closeModal.addEventListener('click', () => {
    movieModal.style.display = 'none';
});