리액트 styled-components 배경 꽉채우기

developer.do·2023년 2월 10일
0

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 /> // global style 추가하기
      <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;

0개의 댓글