Disney+ 사이트 클론 - 3

헤더는 완성했으니 홈을 만들면 되겠다.
Home.js로 가서 똑같이 필요한것들을 import한 뒤 기본 코드를 작성하고 몇가지css를 주면

import React from "react";
import styled from "styled-components";

function Home() {
  return <Container>Home</Container>;
}

export default Home;

const Container = styled.main`
  min-height: calc(100vh - 70px);
  padding: 0 calc(3.5vw + 5px);
  background: blue;
`;

vh, vw에 대해 잘 모르겠다면 자료를 찾아보자, 간단히 말하면 뷰포트의 비율이라고 할 수 있는데 100vh는 즉 viewportheight의 100%라는 말이고 3.5vw는 viewportwidth의 3.5%라는 말이다.
잘 작동하는걸 확인했으니 배경화면은 어차피 전체적으로 적용할 요소이므로 index.css에서

body {
  ...
  background-color: #040714;
  ...
}

이제 앞의 헤더와 반대되는 &:before를 사용해보자

const Container = styled.main`
  ...
  
  &:before {
    background: url("/images/home-background.png") center center / cover
      no-repeat fixed;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
`;

Container가 렌더링 되기 이전에 before내의 코드를 먼저 실행한다.

background가 잘 적용되었으니 이제 이미지 슬라이더를 만들어보자.
ImgSlider.js 를 만들고

import React from "react";

function ImgSlider() {
  return <div>ImgSlider</div>;
}

export default ImgSlider;

Home.js에 import하고 Container사이에 넣어준다.

...
import ImgSlider from "./ImgSlider";

function Home() {
  return (
    <Container>
      <ImgSlider />
    </Container>
  );
}
...

기존의 Home대신에 ImgSlider가 들어가있다.
이제 ImgSlider.js안에 이미지 슬라이더에 해당하는 코드를 작성해주면 된다.
여기선 react-slick이란 패키지를 사용할거다.
https://react-slick.neostack.com/
사용법은 이곳을 보자.

npm i react-slick --save
npm i slick-carousel


import styled from "styled-components";
import Slider from "react-slick";
import "~slick-carousel/slick/slick.css";
import "~slick-carousel/slick/slick-theme.css";

function ImgSlider() {
  let settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
  };
  return (
    <Carousel {...settings}>
      <Wrap>
        <img src="/images/slider-badging.jpg" alt="" />
      </Wrap>
      <Wrap>
        <img src="/images/slider-badging.jpg" alt="" />
      </Wrap>
    </Carousel>
  );
}

export default ImgSlider;

const Carousel = styled(Slider)``;

const Wrap = styled.div``;

사용법 대로 settings에 필요한 세팅들을 넣어주고 Warp이라는 div태그로 감싼 이미지들을 넣어줬다.

이미지가 잘 슬라이드 되긴 하지만 스타일을 지정해주지 않아 어색하다.

const Carousel = styled(Slider)`
  margin-top: 20px;

  ul li button {
    &:before {
      font-size: 10px;
      color: white;
    }
  }

  li.slick-active button::before {
    color: white;
  }

  .slick-list {
    overflow: visible;
  }

  button {
    z-index: 1;
  }
`;

const Wrap = styled.div`
  img {
    border: 4px solid transparent;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px,
      rgb(0 0 0 / 73%) 0px 16px 10px -10px;
  }
`;

App.css

* {
  box-sizing: border-box;
}

스타일을 좀 추가해주면 이미지 크기와 그림자 등이 적용된다.
hover event도 추가해주면

const Wrap = styled.div`
  cursor: pointer;

  img {
    ...
    transition-duration: 300ms;

    &:hover {
      border: 4px solid rgba(249, 249, 249, 0.8);
    }
  }
`;

그런데 아래 스크롤을 보니 문제가 좀 있다.

캐러셀에서 overflow된 부분이 그대로 나타난다. Home.js와 Header.js에서 overflow된 부분을 숨기자

const Container = styled.main`
  ...
  overflow-x: hidden;
  
const Nav = styled.nav`
  ...
  overflow-x: hidden;
`;

이미지 슬라이더가 모두 완성되었다.

다음에는 viewer 카드섹션을 만들어보자