Movie API - Moviedetail

List에 나온 영화들에서 포스터를 클릭하면 해당 영화의 detail 페이지로 넘어간다.

import { useParams } from "react-router-dom";
import { API_KEY } from "../constant";
import { useState } from "react";
import useGetData from "../hooks/useGetData";
import "./detail.css";

const DetailPage = () => {
  const { id } = useParams();
  const detailData = useGetData(`https://api.themoviedb.org/3/movie/${id}`, {
    headers: {
      Authorization: API_KEY,
    },
  });

  console.log(detailData);

  return (
  
    <div className="detail_container">

      {detailData && (
        <>
          <div className="detail_title">{detailData.title}</div>
          <div className="detail_tagline">{detailData.tagline}</div>
          <div className="detail_info">
            <div className="detail_overview">{detailData.overview}</div>
            <div className="detail_runtime">
              {detailData.release_date} / {detailData.runtime} minutes
            </div>
          </div>
        </>
      )}
    </div>
    
  );
};

export default DetailPage;

마찬가지로 API에서 오는 데이터의 형식을 확인해야한다. 또한 불러오는 조건도 다르기에 데이터를 불러올 때 유의해야한다.

useParams 후크는 현재 URL에서 와 일치하는 동적 파라미터의 키/값 쌍 객체를 반환합니다. 하위 경로는 상위 경로에서 모든 매개 변수를 상속합니다.

출처 : React Router

영화에 id가 필요했기에 movielist에서 사용했던 id를 useParams로 가져올 수 있었다.

useGetData는 custom hook으로 내가 만든 hook을 사용한 것이다.
constant와 함께 따로 정리하겠다.

CSS

  .detail_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 50px;
  font-weight: 200;
  margin-top: 100px;
}

.detail_tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 150;
  margin-top: 10px;
}

.detail_info {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  font-weight: 100;
}

.detail_overview {
  margin-top: 20px;
  font-weight: 100;
  margin: 0 300px;
}

.detail_runtime {
  margin-top: 10px;
  font-weight: 100;
  margin-top: 10px;
  margin-left: 300px;
}