Header를 갖는 MainLayout 컴포넌트 구현

[changheedev]

Issue Number

Close #102

새로운 기능

• 헤더를 포함한 MainLayout 컴포넌트를 구현했습니다.
  • 컨텐츠의 width가 무한히 커지는 것을 막고 일정 크기에서 고정되도록 최대 width를 800px로 주었습니다.
  • 헤더(fixed 처리된)의 공간만큼 padding-top을 주어 컨텐츠가 헤더 아래로 가려지지 않게 처리했습니다.
  • 헤더의 z-index 값을 설정하여 다른 컴포넌트보다 위로 올라오도록 처리해주었습니다.
    • 모달의 overlay 영역보다는 낮게 설정했습니다.

코드 예시

import MainLayout from '@/components/common/layouts/MainLayout';

const CalendarPage = (): JSX.Element => {
  return (
    <MainLayout>
      <CalendarContainer></CalendarContainer>
    </MainLayout>
  );
};

작업 유형

• [x] 신규 기능 추가
• [ ] 버그 수정
• [ ] 리펙토링
• [ ] 문서 업데이트

체크리스트

• [x] Merge 하는 브랜치가 올바른가?
• [x] 코딩컨벤션을 준수하는가?
• [x] PR과 관련없는 변경사항이 없는가?
• [x] 내 코드에 대한 자기 검토가 되었는가?
• [ ] 변경사항이 효과적이거나 동작이 작동한다는 것을 보증하는 테스트를 추가하였는가?
• [ ] 새로운 테스트와 기존의 테스트가 변경사항에 대해 만족하는가?

@boostcamp-2020/accountbook_mentor