import React, { useEffect, useState } from "react";
import styled, { createGlobalStyle } from "styled-components";
import Movie from "../components/Movie";
const GlobalStyle = createGlobalStyle` // 배경꽉채우기
body{
padding: 0;
margin: 0;
}
`;
const Home = () => {
const [loading, setLoading] = useState(true);
const [movies, setMovies] = useState([]);
const getMovies = async () => {
const response = await fetch(
"https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year"
)
.then((res) => res.json())
.then((json) => {
setMovies(json.data.movies);
setLoading(false);
});
};
useEffect(() => {
getMovies();
}, []);
console.log(movies);
return (
<StyleContainer>
<GlobalStyle />
<h1>Movie App</h1>
{loading ? (
<h1>Loading...</h1>
) : (
<StyleBackground>
{movies.map((movie) => (
<Movie movie={movie} key={movie.id} />
))}
</StyleBackground>
)}
</StyleContainer>
);
};
const StyleContainer = styled.body`
background-color: green;
/* width: 100%; */
/* height: 100%; */
display: flex;
padding: 20px;
/* position: fixed; */
/* left: 0; */
/* top: 0; */
`;
const StyleBackground = styled.div`
background-color: beige;
/* width: 100%; */
/* height: 800px; */
display: flex;
padding: 20px;
/* justify-content: center; */
/* align-items: center; */
`;
export default Home;