📐레이아웃 만들기

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

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

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

// 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
};

// 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: {},
};

레이아웃 만들기

// TODO 보기 쉽게

공통으로 가지는 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 을 페이지에 적용해줍니다.

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

Previous중단점(Breakpoint) 설정하기 Next예제

Last updated 1 year ago

// 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 };

// 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: {}, };

레이아웃 만들기

// TODO 보기 쉽게

공통으로 가지는 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 을 페이지에 적용해줍니다.

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