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

# 레이아웃 만들기

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

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



{% tabs %}
{% tab title="Breakpoints" %}
```javascript
// 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
};
```
{% endtab %}

{% tab title="Container" %}
```javascript
// src/styles/theme/components/single/Container.ts
import { ComponentSingleStyleConfig } from '@chakra-ui/theme';

export const Container: ComponentSingleStyleConfig = {
  baseStyle: {
    maxW: {
      base: '100%',
      sm: '780px',
      md: '980px',
      lg: '1280px',
      xl: '1480px',
      '2xl': '1780px',
    },
  },
  defaultProps: {},
  sizes: {},
  variants: {},
};
```
{% endtab %}
{% endtabs %}



## 레이아웃 만들기

// TODO 보기 쉽게

{% embed url="https://codesandbox.io/s/chakra-ui-container-width-breakpoints-demonstration-jp1w5?file=/src/App.js" %}

{% tabs %}
{% tab title="Layout 설정" %}
공통으로 가지는 Header, Footer를 적용하고 Content가 들어가는 영역에는 Container를 감싸주어 테마에 설정해 둔 분기별 max-width 가 동작되게 됩니다. &#x20;

```tsx
//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;

```
{% endtab %}

{% tab title="Layout 적용" %}
설정한 Layout 을 페이지에 적용해줍니다.&#x20;

```tsx
// src/pages/index.tsx
import Head from 'next/head';
import React from 'react';

import HomePage from '@components/HomePage';
import HomeLayout from '@components/common/@Layout/HomeLayout';

function Home() {
  return (
    <>
      <Head>
        {/* ex) Your App Name | Page Name */}
        <title>똑똑한 개발자 | 메인</title>
      </Head>
      <HomeLayout content={<HomePage />} />
    </>
  );
}

export default Home;
```
{% endtab %}
{% endtabs %}









