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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

import axios from "../api/axios";
import React, { useEffect, useState } from 'react'
import requests from '../api/requests';
import "./Banner.css"
import styled from "styled-components";
export default function Banner() {
    const [movie, setMovie] = useState([]);
    const [isClicked, setIsClicked] = useState(false);

    useEffect(() => {
        fetchData();
    }, []);
    const fetchData = async() => {
        //현재 상영중인 영화 정보를 가져오기 (여러 영화)
        const request = await axios.get(requests.fetchNowPlaying);
        //여러 영화 중 영화 하나의 ID를 가져오기
        const movieId = request.data.results[
          Math.floor(Math.random() * request.data.results.length)
        ].id;

        //특정 영화의 더 상세한 정보를 가져오기 (비디오 정보도 포함)
        const {data: movieDetail} = await axios.get(`movie/${movieId}`, 
          {
            params: {append_to_response: "videos"},
          });
          setMovie(movieDetail);
    }
const truncate = (str, n) => {
  return str?.length > n ? str.substr(0, n - 1) + "..." : str;
}
console.log('movie', movie);
if(!isClicked) {
return (
    <header
    className="banner"
    style={{
      backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`,
      backgroundPosition: "top center",
      backgroundSize: "cover",
    }}>
      <div className="banner__contents">
        <h1 className="banner__title">
          {movie.title || movie.name || movie.original_name} 
          </h1>
          <div className="banner__buttons">
            <button 
            className="banner__button play" 
            onClick={() => setIsClicked(true)}
            >
              Play</button>
            <button className="banner__button info">More Information</button>

          </div>

          <h1 className="banner_description"> {truncate(movie.overview, 100)}
        </h1>
      </div>
      <div className="banner--fadeBottom"></div>
    </header>
  );
} else{
  return (
    <Container>
      <HomeContainer>
        <Iframe 
        width="640"
        height="360" 
        src={`https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}`}
        title="YouTube video player" 
        allow="autoplay; fullscreen" 
        ></Iframe>
      </HomeContainer>
    </Container>
  );
}
}

const Iframe = styled.iframe`
width: 100%;
height: 100%;
opacity: 0.65;
border: none;

&::after {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}`
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100vh;
`

const HomeContainer = styled.div`
width: 100vw;
height: 100vh;`