Header 만들기

Header 만들기

내 프로젝트에서 공통적으로 사용될 헤더 부분을 만들어보겠다.
헤더에는 홈으로 이동할 수 있는 홈 아이콘과 프로젝트 타이틀인 My Journal이 들어가야한다.

// Header.jsx
import React from "react";
import styled from "styled-components";
import { AiFillHome } from "react-icons/ai";

const Header = () => {
  return (
    <StContainer>
      <AiFillHome style={{ width: "24px", height: "24px" }} />
      <StTitle>My Journal</StTitle>
    </StContainer>
  );
};

// styled components
const StContainer = styled.header`
  height: 50px;
  border: 1px solid gray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 24px;
`;

const StTitle = styled.h1`
  font-weight: 700;
`;

export default Header;

icon을 사용하기 위해 react-icons을 import해서 사용했다.
로직은 없어서 간단하게 이렇게 마무리!
추후에 스타일링 해줘야겠다.