[리액트를 다루는 기술] fixed된 헤더 아래부터 게시물 보이게 하기(feat: Spacer)

쿼카쿼카·2023년 2월 21일
0

코드

// components/common/Header.js
import styled from "styled-components";
import { Link } from "../../../node_modules/react-router-dom/dist/index";
import Button from "./Buttons";
import Responsive from "./Responsive";

const HeaderBlock = styled.div`
  position: fixed;
  width: 100%;
  background: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
`;

// Responsive 컴포넌트 속성에 스타일을 추가해서 새로운 컴포넌트 생성

const Wrapper = styled(Responsive)`
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between; // 자식 엘리먼트 사이의 여백을 최대로 설정

  .logo {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 2px;
  }
  .right {
    display: flex;
    align-items: center;
  }
`;

// 헤더가 fixed로 되어있어 페이지의 콘텐츠가 4rem 아래로 나타나도록 해주는 컴포넌트

const Spacer = styled.div`
  height: 4rem;
`;

export default function Header() {
  return (
    <>
      <HeaderBlock>
        <Wrapper>
          <Link to="/" className="logo">
            REACTERS
          </Link>
          <div className="right">
            <Button to="/login">로그인</Button>
          </div>
        </Wrapper>
      </HeaderBlock>
      <Spacer />
    </>
  )
}
// pages/PostListPage.js
import Header from "../components/common/Header";

export default function PostListPage() {
  return (
    <>
      <Header />
      <div>안녕하세요.</div>
    </>
  )
}

Header의 position

  • fixed를 사용하면 스크롤을 내려도 화면 상 고정한 곳에 위치
  • 다른 게시물을 가릴 수 있음

Wrapper

  • Header의 children으로 Wrapper가 있는데 높이가 4rem

Spacer

  • HeaderBlock이 끝나고 존재하는 공간 창출 컴포넌트

PostListPage

  • Header를 넣고 그 아래 게시물을 작성했다.
  • Header의 크기가 4rem이고 그 밑 Spacer가 4rem
  • 안녕하세요는 4rem 이후에 나옴
profile
쿼카에요

0개의 댓글