📐레이아웃 만들기

컨테이너 설정을 통해 프로젝트의 레이아웃을 만들어봅니다.

중단점을 설정한 것과 마찬가지로 컨테이너 또한 분기별로 스타일링을 할 수 있습니다.

기본적으로 next.init 에서는 중단점을 분기점으로 한 max-width 가 기본적으로 적용되어있습니다.

Breakpoints

// Some code//styles/theme/foundations/breakpoints.ts
const breakpoints = {
  // base <780px
  base: '0px',
  sm: '780px', // ≥780px
  md: '980px', // ≥980px
  lg: '1280px', // ≥1280px
  xl: '1480px', // ≥1480px
  '2xl': '1920px', // ≥1920px
};

Container

레이아웃 만들기

// TODO 보기 쉽게

Layout 설정

공통으로 가지는 Header, Footer를 적용하고 Content가 들어가는 영역에는 Container를 감싸주어 테마에 설정해 둔 분기별 max-width 가 동작되게 됩니다.

//src/components/common/@Layout/HomeLayout/HomeLayout.tsx
import React from 'react';

import { Container, ContainerProps } from '@chakra-ui/react';

import { LAYOUT } from '@constants/layout';

import HomeHeader from './_fragments/HomeHeader';

interface HomeLayoutProps {
  header?: JSX.Element;
  footer?: JSX.Element;
  content?: JSX.Element;
  containerProps?: ContainerProps;
}

const HomeLayout = ({
  //
  header = <HomeHeader />,
  footer,
  containerProps,
  content,
}: HomeLayoutProps) => {
  return (
    <>
      {header}
      <Container pt={LAYOUT.HEADER.HEIGHT} {...containerProps}>
        {content}
      </Container>
      {footer}
    </>
  );
};

export default HomeLayout;

Layout 적용