📐레이아웃 만들기
컨테이너 설정을 통해 프로젝트의 레이아웃을 만들어봅니다.
중단점을 설정한 것과 마찬가지로 컨테이너 또한 분기별로 스타일링을 할 수 있습니다.
기본적으로 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;