Usage with RedwoodJS

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

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

출처: 문서

본문

템플릿으로 시작하기

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

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

  • redwood-template — RedwoodJS + 기본 설정 — Use template

새 애플리케이션 생성

Redwood getting started guide를 따라 새 Redwood 애플리케이션을 만들어요:

yarn create redwood-app my-redwood-project --typescript

설치

의존성을 설치할 때는 npm 대신 yarn을 사용하는 것이 좋아요.

의존성을 설치하기 전에 web 디렉터리로 이동하세요:

cd web

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

패키지 설명
@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

web 디렉터리에 postcss.config.js 파일을 만들고 다음 내용을 넣어요:

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',
      },
    },
  },
};

설정

web/src/App.tsx 파일에 스타일 import, MantineProvider, ColorSchemeScript를 추가해요:

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

import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web';
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo';
import FatalErrorPage from 'src/pages/FatalErrorPage';
import Routes from 'src/Routes';
import { ColorSchemeScript, MantineProvider } from '@mantine/core';

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
      <ColorSchemeScript />
      <MantineProvider>
        <RedwoodApolloProvider>
          <Routes />
        </RedwoodApolloProvider>
      </MantineProvider>
    </RedwoodProvider>
  </FatalErrorBoundary>
);

export default App;

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

yarn rw dev

더 알아보기 (Learn more)