[React] YTS API로 영화 소개 페이지 만들기(2)

상세 페이지 만들기

function MovieDetail(
    {
    title,
    genres,
    description,
    rating,
    runtime,
    bgImg,
    coverImg,
    }){
    return(
    <div>
        <div id='detail-body'>
            <div id='cover-img'>
            <img src={coverImg} alt="coverImg" />
            </div>
        <div id="title">
        <span>
        {title}
        </span>
        </div>
        <div id="rating-genres-runtime">
            <div>
            Rating: {rating} / 10
            </div>
            <div>
                {genres.map(item=>`${item}`).join(`/`)}
            </div>
            <div>
            Runtime: {runtime} minute
            </div>
        </div>

        <div id="description">
            <div>
            {description}
            </div>
        </div>

        </div>

    </div>
    )
}

상세 페이지에 쓸 커버 이미지와 rating, genres, runtime을 넣어주고 하단에 줄거리를 출력하기 위해 description을 사용했다.

 

로딩 페이지 만들기

내가 만든 로딩 페이지는 사실상 로딩 gif를 화면에 출력하는 것 밖에 없다...

import React from "react";
import Loading from '../img/loading.gif'

function LoadingPage() {
    return(
        <div id="loading-body">
            <img src={Loading} alt="loadimg" />
        </div>
    )
}

 

React-slick 라이브러리를 사용하여 Slide(Carousel) 만들기

나는 영화 포스터가 Slide(해외에선 Carousel 이라고 부른다고 한다.) 되길 원하기 때문에 라이브러리를 사용했다.

npm i react-slick

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

이렇게 설치 후 css까지 사용할 것이기 때문에 css 까지 import까지 해준다.

React-slick에 대해선 다음 포스팅에서 자세하게 정리해야겠다.