Usage with Gatsby

Usage with Gatsby (Gatsby와 함께 사용하기)

Gatsby에서 Mantine을 설정하는 방법을 안내해 드릴게요. 템플릿으로 시작하거나 직접 앱을 생성해 PostCSS와 Provider를 설정하는 순서를 설명해요.

출처: 문서

본문

템플릿으로 시작하기

가장 쉬운 시작 방법은 템플릿 중 하나를 사용하는 것이에요. 모든 템플릿은 올바르게 구성되어 있어요. PostCSS 설정, ColorSchemeScript와 다른 필수 기능을 포함해요. 일부 템플릿에는 Jest, Storybook, oxlint 같은 추가 기능도 있어요.

GitHub에 익숙하지 않다면 이 페이지에서 템플릿으로 프로젝트를 부트스트랩하는 자세한 방법을 볼 수 있어요.

  • gatsby-template — Gatsby + 기본 설정 — Use template

새 애플리케이션 생성

Gatsby quick start 가이드를 따라 새 Gatsby 애플리케이션을 만들어요:

yarn create gatsby

"Would you like to install a styling system?" 질문에 PostCSS를 선택하세요.

설치

애플리케이션에서 사용할 패키지를 선택하세요:

패키지 설명
@mantine/hooks 상태 및 UI 관리를 위한 훅
@mantine/core 핵심 컴포넌트 라이브러리: 입력, 버튼, 오버레이 등
@mantine/form 폼 관리 라이브러리
@mantine/dates 날짜 입력, 캘린더
@mantine/charts Recharts 기반 차트 라이브러리
@mantine/notifications 알림 시스템
@mantine/code-highlight 테마 색상과 스타일을 적용한 코드 하이라이트
@mantine/tiptap Tiptap 기반 리치 텍스트 에디터
@mantine/dropzone 드래그 앤 드롭으로 파일 받기
@mantine/carousel Embla 기반 캐러셀 컴포넌트
@mantine/lightbox 캐러셀 내비게이션이 있는 전체 화면 미디어 라이트박스
@mantine/spotlight 오버레이 커맨드 센터
@mantine/modals 중앙화된 모달 관리자
@mantine/nprogress 내비게이션 진행률

의존성을 설치해요:

yarn add @mantine/core @mantine/hooks

PostCSS 설정

PostCSS 플러그인과 postcss-preset-mantine을 설치해요:

yarn add --dev postcss postcss-preset-mantine postcss-simple-vars

애플리케이션 루트에 postcss.config.cjs 파일을 만들고 다음 내용을 넣어요:

module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};

설정

테마 오버라이드가 있는 src/theme.ts 파일을 만들어요:

// src/theme.ts
import { createTheme } from '@mantine/core';

export const theme = createTheme({
  fontFamily: 'serif',
  // ... other theme override properties
});

다음 내용으로 gatsby-ssr.tsx 파일을 만들어요:

import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { theme } from './src/theme';

export const onPreRenderHTML = ({
  getHeadComponents,
  replaceHeadComponents,
}) => {
  const headComponents = getHeadComponents();
  replaceHeadComponents([
    ...headComponents,
    <ColorSchemeScript key="color-scheme-script" />,
  ]);
};

export const wrapPageElement = ({ element }) => {
  return <MantineProvider theme={theme}>{element}</MantineProvider>;
};

다음 내용으로 gatsby-browser.tsx 파일을 만들어요:

// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';

import { MantineProvider } from '@mantine/core';
import { theme } from './src/theme';

export const wrapPageElement = ({ element }) => {
  return <MantineProvider theme={theme}>{element}</MantineProvider>;
};

모든 준비가 끝났어요. 개발 서버를 시작해요:

npm run develop

CSS modules

기본적으로 Gatsby는 CSS 모듈 import에 다른 문법을 사용해요:

// Default syntax – will not work in Gatsby
import classes from './Demo.module.css';

// Gatsby syntax
import * as classes from './Demo.module.css';

더 알아보기 (Learn more)