[2024.05.01] TIL 13일차

[ 본캠프 13일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

3주차 팀프로젝트 시작

1. 팀프로젝트 시작

• 상세페이지 구현 + 상세페이지에서 메인페이지로 이동 기능까지
• 상세 페이지 영화 리뷰 작성 기능 구현
• UX를 고려한 validation check

2. 내가 맡은 부분 : 상세페이지 구현 및 메인페이지 이동 버튼

• 영화 카드 클릭했을때 영화 id값과 함께 영화 상세페이지로 이동

    movieCard.addEventListener("click", () => {
      window.location.href = `./DetailPage/detail.html?id=${movies.id}`;
    });

• 페이지 주소로 넘어온 아이디 값을 받아와 영화 detail api 주소에 넣어줌

const urlParams = new URLSearchParams(window.location.search);
const movieId = urlParams.get("id");

getmovieData(movieId);

function getmovieData(id) {
  const apiKey = "f5475cb87195d22e7fbee353e3247ba5";
  const movieUrl = `https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}&language=en-US&page=1`;

  fetch(movieUrl)
    .then((response) => response.json())
    .then((data) => {
      movieData(data);
    })
    .catch((error) => console.error("Error fetching movie details:", error));
}

• Api에서 영화 데이터 가져오기

function movieData(movie) {
  const detailFlex = document.getElementById("movieDetail");
  const detailCard = movieDetailInfo(movie);
  detailFlex.appendChild(detailCard);
}