24.3.1 헤더 컴포넌트 만들기

헤더 컴포넌트를 만들기 전에 Responsive라는 컴포넌트를 작성하겠습니다. 반응형 디자인을 할 때 더 편하게 작업하기 위해서입니다. Responsive 컴포넌트는 추후 다양한 컴포넌트에서 사용할 수 있기 때문에 common 디렉터리로 분류합니다.

components/common/Responsive.js

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

const ResponsiveBlock = styled.div`
  padding-left: 1rem;
  padding-right: 1rem;
  width: 1024px;
  margin: 0 auto; /* 중앙 정렬 */

  /* 브라우저 크기에 따라 가로 크기 변경 */
  @media (max-width: 1024px) {
    width: 768px;
  }
  @media (max-width: 768px) {
    width: 100%;
  }
`;

const Responsive = ({ children, ...rest }) => {
  // style, className, onClick, onMouseMove 등의 props를 사용할 수 있도록
  // ...rest를 사용하여 ResponsiveBlock에게 전달
  return <ResponsiveBlock {...rest}>{children}</ResponsiveBlock>;
};

export default Responsive;

---