인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

2021신년다짐님의 프로필 이미지
2021신년다짐

작성한 질문수

따라하며 배우는 리액트 A-Z[19버전 반영]

Movie 모달 UI 생성하기

movie 모달 ui 생성하기 팝업 이미지 안나오

작성

·

318

0

각 이미지를 클릭하면 팝업 이미지가 나오게 하는 부분인데 이미지가 엑박이 떠서 질문 드립니다. 어느부분을 수정하면 될까요 ??
 
row.js
------
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
 

답변 1

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요! 

이럴 때는 원인이 되는 부분부터 log를 찍어 보면 됩니다. 

먼저 사진이 안 나오는 부분이 

<img 

className='modal__poster-img' 

src={`https://image.tmdb.org/t/p/original/${backdrop_path}`} 

alt='moviemodal' 

/> 

여기에 backgrop_path가 잘못된 값일 가능성이 많죠! 

그럼 console.log(backdrop_path)를 먼저 해주세요. 

이게 안 나오면 이걸 전달해주고 있는 부모 컴포넌트에서 왜 못 가져오는지를 살펴보시면 됩니다 ^^ 

감사합니다.

2021신년다짐님의 프로필 이미지
2021신년다짐

작성한 질문수

질문하기