import React, { useEffect, useState } from "react";
import { fetchData } from "../api/axios";
import {
HeaderBanner,
BannerContents,
BannerTitle,
BannerButtons,
BannerButton,
BannerDescription,
BannerFadeBottom,
} from "./Banner.styled";
const Banner = () => {
const [movie, setMovie] = useState([]);
/* play 버튼 클릭 여부 상태 */
const [isClicked, setClicked] = useState(false);
useEffect(() => {
fetchData(setMovie);
}, []);
// Description 컴포넌트 내
// 설명글이 100자 이상이면, 100자 이전 까지 자른 후, 100자부터 "..."로 마무리한다.
const truncatOverview = (str, n) => {
return str?.length > n ? str.substring(0, n) + "..." : str;
};
const playHandle = (e) => setClicked(true);
/* play 버튼이 클릭되었다면(true) video string react element 랜더링 */
if (isClicked) {
console.log(isClicked);
return <div>video!</div>;
}
return (
<HeaderBanner
movie={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
>
<BannerContents>
<BannerTitle>
{movie.title || movie.name || movie.original_name}
</BannerTitle>
<BannerButtons>
{movie?.videos?.results[0]?.key && (
<BannerButton play onClick={playHandle}>
Play
</BannerButton>
)}
</BannerButtons>
<BannerDescription>
{truncatOverview(movie?.overview, 100)}
</BannerDescription>
</BannerContents>
<BannerFadeBottom />
</HeaderBanner>
);
};
export default Banner;
원하는 결과를 얻을 수 있었다.
이제 video react element를 만들면 된다.
styled component를 사용한 UI 생성
Container
1. 배치 : 정 가운데로 배치
2. 쌓임순서 : 수직 방향으로 쌓아서, 비디오 -> X 버튼 순으로 쌓이도록 설정
3. 크기 : 전체 사용
export const Container = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%; /* App.styled.js 의 Container가 main tag이므로 참고 */
height: 100vh; /* App.styled.js 의 Container 참고 */
`;
HomContainer
1. 크기 : Continer 전체 사용
export const HomeContainer = styled.div`
width: 100%;
height: 100%;
`;
Iframe
export const Iframe = styled.iframe`
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.65;
border: none;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
`;
`
Iframe : The Inline Frame element
The "iframe" HTML element represents a nested browsing context, embedding another HTML page into the current one.
Iframe은 inline frame의 약자이며,
효과적으로 다른 HTML페이지를 현재 페이지에 포함시킬 때 사용할 수 있다.
따라서, Iframe 요소를 사용하면, 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불어와서 삽입 할 수 있다.
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/k_3E2y5l_rw"
/* src="https://www.youtube.com/embed/{videoID}?option" */
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>;
if (isClicked) {
console.log(isClicked);
return (
<>
<Container>
<HomeContainer>
<Iframe
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}`}
width="640"
height="360"
frameborder="0"
allow="autoplay; fullscreen"
></Iframe>
</HomeContainer>
</Container>
<button onClick={() => setClicked(false)}>X</button>
</>
);
}