각 이미지를 클릭하면 팝업 이미지가 나오게 하는 부분인데 이미지가 엑박이 떠서 질문 드립니다. 어느부분을 수정하면 될까요 ??
import React, { useEffect, useState } from 'react'
import axios from "../api/axios"
import MovieModal from './MovieModal'
import "./Row.css"
const Row = ({ title, fetchURL, id, isLargeRow}) => {
const [movies, setMovies] = useState([])
const [modalOpen, setModalOpen] = useState(false)
const [movieSelected, setMovieSelected] = useState({})
useEffect(()=> {
fetchMovieData()
},[])
const fetchMovieData = async ()=> {
const request = await axios.get(fetchURL)
setMovies(request.data.results)
}
const handleClick = (movie) => {
setModalOpen(true)
setMovieSelected(movie)
}
return (
<section>
<h2>{title}</h2>
<div className="slider">
<div className="slider__arrow-left">
<span className="arrow" onClick={() => {document.getElementById(id).scrollLeft -= window.innerWidth - 80}}>
{"<"}
</span>
</div>
<div id={id} className="row__posters" >
{movies.map((movie) =>(
<img
key={movie.id}
className={`row__poster ${isLargeRow && "row__posterLarge"}`}
src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path : movie.backdrop_path}`}
loading="lazy"
alt={movie.name}
onClick={()=> handleClick(movie)}
/>
))}
</div>
<div className="slider__arrow-right">
<span className="arrow" onClick={() => {document.getElementById(id).scrollLeft += window.innerWidth - 80}}>
{">"}
</span>
</div>
</div>
{
modalOpen && (<MovieModal {...setMovieSelected} setModalOpen={setModalOpen} />)
}
</section>
)
}
export default Row
moviemodal.js
------
import React from 'react'
import "./MovieModal.css"
const MovieModal = ({ backdrop_path, title, overview, name, release_date, first_air_date, vote_average, setModalOpen}) => {
return (
<div className="presendation">
<div className="wrapper-modal">
<div className="modal">
<span className="modal-close" onClick={()=> setModalOpen(false)}>X</span>
<img
className='modal__poster-img'
src={`https://image.tmdb.org/t/p/original/${backdrop_path}`}
alt='moviemodal'
/>
<div className="modal__content">
<p className="modal__details">
<span className="modal__user_perc">100% for you</span>
{release_date ? release_date : first_air_date}
</p>
<h2 className="modal__title">{title ? title : name}</h2>
<p className="modal__overvie">평점: {vote_average}</p>
<p className="modal__overview">{overview}</p>
</div>
</div>
</div>
</div>
)
}
export default MovieModal
