9-1. 반응형 컴포넌트 PageWrapper 만들기

현재 헤더가 position: fixed 로 최상단에 위치하다보니, 컴포넌트 하단에 다른 뷰를 렌더링 하게 된다면, 헤더의 크기만큼 가려질 것입니다.

그러므로, 우리는 헤더 하단의 내용을 감싸주고 상단 여백 58px (헤더의 크기를) 주는 래핑 컴포넌트를 만들고 추가적으로 이 컴포넌트에 반응형 디자인 속성을 적용하여 브라우저의 크기에 따라 width 가 설정되도록 만들어보겠습니다.

이 컴포넌트는 프로젝트 기반에 관련된 컴포넌트 이므로 Base 로 분류하겠습니다.

src/components/Base/PageWrapper.js

import React from 'react';
import styled from 'styled-components';
import { media } from 'lib/styleUtils';

// 헤더 아래에 위치하도록 상단 패딩
const Wrapper = styled.div`
    margin-top: 58px;
    padding: 1rem;

    width: 1200px;
    margin-left: auto;
    margin-right: auto;

    ${media.wide`
        width: 992px;
    `}

    ${media.desktop`
        width: 100%;
    `}
`;

const PageWrapper = ({responsive, children}) => (
    <Wrapper responsive={responsive}>
        {children}
    </Wrapper>
);

export default PageWrapper;

이제, 이 컴포넌트를 Home 페이지에서 불러와볼까요?

src/pages/Home.js

import React, { Component } from 'react';
import PageWrapper from 'components/Base/PageWrapper';

class Home extends Component {
    render() {
        return (
            <PageWrapper>
                Home
            </PageWrapper>
        );
    }
}

export default Home

이제, 내용이 헤더에 가려지지 않고, 브라우저가 너비에 따라 PageWrapper 의 크기가 알맞게 조정이 되고 페이지의 중앙에 위치하게 됩니다.

수정사항

9-1 이전에 git clone 을 한 경우에는 Header 컴포넌트의 Positioner 부분에 top: 0px 가 누락되어있습니다. 프로젝트를 클론했었더라면 Header 컴포넌트의 Positioner 를 다음과 같이 수정하세요:

const Positioner = styled.div`
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    top: 0px;
    ${shadow(1)}
    z-index: 10;
`;

클론을 하지 않은 경우엔 이 부분은 무시하시면 됩니다.