6.Movie Detail 페이지 만들기 - 영화사이트 만들기

*1,2,3번을 이번시간에 할 예정이며 4,5,6번을 다음시간에 할 예정임

1. 특정영화에 대한 페이지들어가는 라우터만들기

<Route exact path="/movie/:movieId" component={Auth(MovieDetailPage, null)} />

2.라우터에서 :movieId를 받아서 그 Id로 movie API를 이용하여 세부페이지 만들기 (fetch통신포함)(client-src-components-views-MovieDetailPage-MovieDetailPage.js)

import React, { useEffect, useState } from 'react';
import { API_KEY, API_URL, IMAGE_BASE_URL } from '../../Config';
import MainImage from '../LandingPage/Sections/MainImage';
import MovieInfo from '../MovieDetailPage/Sections/MovieInfo';

function MovieDetailPage(props) {
  console.log(props.match);
  let movieId = props.match.params.movieId;

  const [Movie, setMovie] = useState({});

  useEffect(() => {
    let endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}`;
    let endpointInfo = `${API_URL}movie/${movieId}?api_key=${API_KEY}`;

    fetch(endpointInfo)
      .then((response) => response.json())
      .then((response) => {
        console.log(response);
        setMovie(response);
      });
  }, []);
  return (
    <div>
      {/* Header*/}
      {Movie.backdrop_path && ( //Movie안의 backdrop_path를 가져오는데
        //시간이 오래걸릴 수도있기때문에 근데 가져오는 도중에 렌더링을 할려고하여 오류가발생한다.
        //이를 방지하기위한 코드(실제 콘솔에 이를안해주면 undefined라고 오류발생)
        <MainImage
          image={`${IMAGE_BASE_URL}w1280/${Movie.backdrop_path}`} //영화이미지
          title={Movie.original_title} //영화제목
          text={Movie.overview} //영화에대한설명
        />
      )}

      {/* Body*/}
      <div style={{ width: '85%', margin: '1rem auto' }}>
        {/* Movie Info*/}

        <MovieInfo movie={Movie} />

        <br />
        {/* Actors Grid*/}
        <div
          style={{ display: 'flex', justifyContent: 'center', margin: '2rem' }}
        >
          <button> Toggle Actor View</button>
        </div>
      </div>
    </div>
  );
}

export default MovieDetailPage;

3. 세부적인 영화정보를 제공하는 페이지만들기(MovieDetailPage-Sections-MovieInfo.js)

import React from 'react';
import { Descriptions, Badge } from 'antd';

function MovieInfo(props) {
  let { movie } = props; // let movie={}; movie=props.movie 랑같은코드
  return (
    <Descriptions title="Movie Info" bordered>
      <Descriptions.Item label="Title">
        {movie.original_title}
      </Descriptions.Item>
      <Descriptions.Item label="release_date">
        {movie.release_date}
      </Descriptions.Item>
      <Descriptions.Item label="revenue">{movie.revenue}</Descriptions.Item>
      <Descriptions.Item label="runtime">{movie.runtime}</Descriptions.Item>
      <Descriptions.Item label="vote_average" span={2}>
        {movie.vote_average}
      </Descriptions.Item>
      <Descriptions.Item label="vote_count">
        {movie.vote_count}
      </Descriptions.Item>
      <Descriptions.Item label="status">{movie.status}</Descriptions.Item>
      <Descriptions.Item label="popularity">
        {movie.popularity}
      </Descriptions.Item>
    </Descriptions>
  );
}

export default MovieInfo;

* ant-d 이용

 

실행결과

해당동영상강의