모달 컴포넌트 생성

클릭한 영화의 정보를 가져오기 위해 Modal UI를 생성해주었다. modal을 클릭할 때 movie의 데티어를 movieSelected라는 state에 넣어주고, movieModal 자녀 컴포넌트에 state를 내려줄 때 spread operater을 사용해서 내려줄 때와 그렇지 않을 때 차이점도 있었다.

#components>MovieModal.js

import React, { useRef } from 'react'
import useOnClickOutside from '../../hooks/useOnClickOutside';
import './MovieModal.css';

const MovieModal = ({ //props 가져오기
    backdrop_path,
    title,
    overview,
    name,
    release_date,
    first_air_date,
    vote_average,
    setIsModalOpen
}) => {

    const ref = useRef();

    useOnClickOutside(ref, () => setIsModalOpen(false))

    return (
        <div className='presentation'>
            <div className='wrapper-modal'>
                <div className='modal' ref={ref}>
                    <span className='modal-close'
                        onClick={() => setIsModalOpen(false)}
                    >X</span>

                    <img
                        className='modal__poster-img'
                        src={`https://image.tmdb.org/t/p/original${backdrop_path}`}
                        alt="modal__poster-img"
                    />

                    <div className='modal__content'>
                        <p className='modal__details'>
                            <span>
                                100% for you
                            </span>
                            {release_date ? release_date : first_air_date}
                        </p>
                        <h2 className='modal__title'>{title ? title : name}</h2>
                        <p className='modal__overview'>평점: {vote_average}</p>
                        <p className='modal__overview'>{overview}</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default MovieModal

#패스트캠퍼스 #패스트캠퍼스부트캠프 #프론트엔드프로젝트십