Usage with Vite

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

Vite에서 Mantine을 설정하는 방법을 안내해 드릴게요. 템플릿, 앱 생성, PostCSS와 Provider 설정까지 설명해요.

출처: 문서

본문

템플릿으로 시작하기

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

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

  • vite-template — Vite + 전체 설정 (Vitest, oxfmt, Storybook, oxlint) — Use template
  • vite-min-template — Vite + 최소 설정 — Use template
  • vite-vanilla-extract-template — Vite + Vanilla Extract 예제 — Use template

새 애플리케이션 생성

Vite getting started 가이드를 따라 새 Vite 애플리케이션을 만들어요:

yarn create vite

설치

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

패키지 설명
@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',
      },
    },
  },
};

설정

애플리케이션 루트 컴포넌트(보통 App.tsx)에 스타일 import와 MantineProvider를 추가해요:

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

export default function App() {
  return <MantineProvider>{/* Your app here */}</MantineProvider>;
}

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

npm run dev

더 알아보기 (Learn more)