# Mantine 디자인 시스템

## Mantine 디자인 시스템 인터페이스 미리보기

서랍을 열고, 필드 유효성 검사를 실행하고, 연구와 날짜를 선택하고, 참가자를 로컬로 추가한 다음, 예시 동의를 철회해 보세요.

## Mantine 디자인 시스템 디자인 참고 자료

@mantine/core 9.6.3에서 선택한 DEFAULT_THEME 값을 확인했습니다. 픽셀 환산값은 루트 크기 16px, theme.scale=1을 가정하며, 배율이 적용되는 토큰은 --mantine-scale을 통해 계산됩니다. 시안 기본 색상, 음영 8, 모서리 반경 md는 애플리케이션에서 명시적으로 재정의한 값입니다.

### 예시에서 사용하는 시안 팔레트

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| colors.cyan[0] | #e3fafc | 절제된 테마 요약 표면. |
| colors.cyan[1] | #c5f6fa | 밝은 색조입니다. |
| colors.cyan[2] | #99e9f2 | 옅은 색조. |
| colors.cyan[3] | #66d9e8 | 옅은 색조. |
| colors.cyan[4] | #3bc9db | 중간 색조. |
| colors.cyan[5] | #22b8cf | 중간 음영. |
| colors.cyan[6] | #15aabf | 팔레트의 기본 음영. |
| colors.cyan[7] | #1098ad | 더 짙은 음영. |
| colors.cyan[8] | #0c8599 | 기본 액션에 선택한 음영. |
| colors.cyan[9] | #0b7285 | 강조 텍스트 색상. |
### 배율 1의 타이포그래피 크기 체계

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| fontSizes.xs / sm | 12px / 14px | 레코드 ID / 보조 텍스트. |
| fontSizes.md / lg / xl | 16px / 18px / 20px | 기본 본문 및 큰 텍스트. |
| lineHeights.xs / sm / md | 1.4 / 1.45 / 1.55 | 서로 대응하는 본문 크기. |
| lineHeights.lg / xl | 1.6 / 1.65 | 더 큰 읽기용 텍스트 크기. |
| headings.h1 | 34px / 1.3 | 참가자 세션 제목. |
| headings.h2 / h3 | 26px / 1.35; 22px / 1.4 | 사용 가능한 제목 단계. |
| fontFamily | Platform sans-serif stack | 글꼴을 다운로드하지 않아도 됩니다. |
### 배율 1의 간격 및 모서리 반경

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| spacing.xs / sm | 10px / 12px | 좁은 간격. |
| spacing.md / lg / xl | 16px / 20px / 32px | 모바일 여백 / 필드 간격 / 섹션 간격. |
| radius.xs / sm | 2px / 4px | 작은 형태 요소. |
| radius.md / lg / xl | 8px / 16px / 32px | 기본 및 확대 모서리 반경 예시. |
| defaultRadius | md (application override) | createTheme에서 중앙 설정으로 적용됩니다. |
### 중단점

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| breakpoints.xs | 36em | 기본값 16px 기준 576px. |
| breakpoints.sm | 48em | 요약 카드가 3열로 배치됩니다. |
| breakpoints.md | 62em | 기본값 16px 기준 992px. |
| breakpoints.lg / xl | 75em / 88em | 기본값 16px 기준 1200px / 1408px. |
### CSS 및 컴포넌트 매핑

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --mantine-primary-color-filled | Resolved from primaryColor and primaryShade | 예시에서는 시안 팔레트의 음영 8을 선택합니다. |
| --mantine-spacing-lg | calc(1.25rem * var(--mantine-scale)) | Stack 간격 lg 및 패널 패딩 lg. |
| --mantine-radius-md | calc(0.5rem * var(--mantine-scale)) | 기본 둥근 모서리 패널. |
| --mantine-font-size-sm | calc(0.875rem * var(--mantine-scale)) | 표의 레코드 라벨. |
| Button.extend defaultProps | size: sm | 애플리케이션에서 명시적으로 지정한 기본값. |
| TextInput.extend defaultProps | size: md | 애플리케이션에서 명시적으로 지정한 기본값. |
## Mantine 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## Mantine 디자인 시스템: Mantine의 테마 및 패키지 경계

### 하나의 Provider, 세 개의 기능 패키지

> 예시에서는 인터페이스에 core, 유효성 검사와 바인딩에 form, 달력 입력에 dates를 사용합니다. MantineProvider에는 createTheme 재정의를 전달합니다. core와 dates의 CSS를 모두 가져오므로, React 컴포넌트만 불러와서는 스타일이 적용된 달력을 재현할 수 없습니다.

테마는 primaryShade 8 및 defaultRadius md와 함께 시안을 선택합니다. Button.extend는 작은 버튼을 애플리케이션 기본값으로 지정하고, TextInput.extend는 중간 크기 컨트롤을 선택합니다. 이는 소스에 명시된 의도적인 설정이며, 모든 Mantine 제품에 적용해야 한다는 뜻은 아닙니다.

지원 사양 읽기

## Mantine 디자인 시스템: 팔레트 인덱스와 계산된 색상 역할 사용

### 순서가 있는 팔레트는 서로 무관한 색상 견본의 모음이 아닙니다

Mantine 색상은 인덱스가 지정된 음영 배열입니다. 이 예시에서는 절제된 요약 패널에 cyan.0, 강조 텍스트에 cyan.9, 채워진 액션에 설정된 기본 음영을 사용합니다. 참고 자료에는 이 테마에 사용된 cyan 색상 단계 전체가 나와 있습니다.

표에서 확인됨 배지는 밝은 시안 변형을, 철회됨 배지는 주황색을 사용합니다. 각 상태는 텍스트로도 표시됩니다. 철회하면 동의 상태가 변경되지만 이전 세션은 그대로 유지되므로 색상만 바뀌면서 기록이 사라지지 않습니다.

지원 사양 읽기

### 테마 색상과 임의의 CSS 값

컴포넌트의 color 속성에는 이름이 지정된 팔레트를 사용할 수 있습니다. 별도로 지정한 원시 16진수 배경색은 일부 변형 로직을 우회할 수 있습니다. 일반 CSS를 사용하는 경우, 반복해서 적용할 테마 값에는 생성된 변수를 사용하세요. 예시의 CSS 변수 매핑은 어떤 값이 배율 및 기본 색상과 계속 연동되는지 설명합니다.

지원 사양 읽기

## Mantine 디자인 시스템: 내보낸 글꼴과 제목 크기 단계 적용

### 계층 구조 재현

표에서는 이름과 연구 라벨에 sm 텍스트를, 식별자와 날짜에 xs를 사용합니다. Title order={1}은 h1 크기 단계를 사용합니다. 드로어의 의미상 제목은 h2이지만 size="h3"로 렌더링해 시각적으로 더 작게 표시합니다. 이러한 설정은 입력 컴포넌트에 전달하는 라벨 및 도움말 텍스트와는 별개입니다.

Mantine의 플랫폼 글꼴 스택은 원격 글꼴을 다운로드하지 않습니다. 글꼴 크기 조정 값에는 --mantine-scale이 포함되며, 참고 예제의 픽셀 값은 스케일 1을 기준으로 합니다. 애플리케이션에서 스케일을 변경하는 경우 픽셀 환산 값을 변하지 않는 값으로 취급하지 마세요.

지원 사양 읽기

## Mantine 디자인 시스템: useForm을 실제 입력 컴포넌트에 연결

### 유효성 검사는 폼 모델에서 처리

initialValues에는 이름, 연구, null 허용 날짜, 동의 여부를 나타내는 불리언 값이 포함됩니다. validate는 이름, 날짜, 동의 필드에 대해 오류 문자열 또는 null을 반환합니다. form.onSubmit은 로컬 목록에 행을 추가하기 전에 유효성 검사를 실행합니다. 오류 라벨을 별도로 수동 작성할 필요가 없습니다.

TextInput과 DatePickerInput에는 필드 경로에 해당하는 getInputProps를 전달합니다. Checkbox는 checked 값이 올바르게 바인딩되도록 type:"checkbox"도 지정합니다. Select에는 고정된 연구 목록과 allowDeselect={false}를 사용하므로 이 흐름에서는 연구 항목을 비워 둘 수 없습니다.

지원 사양 읽기

### 날짜 값과 표시 형식

날짜 컴포넌트는 @mantine/dates에서 제공하며, 해당 스타일시트는 코어 스타일 다음에 가져옵니다. 예제 패키지에서는 날짜 값을 문자열로 사용합니다. 표시 형식인 DD MMM YYYY는 표에 표시되는 저장된 날짜 문자열과 별개입니다. defaultDate는 유효한 세션 날짜를 미리 입력하지 않고 예제 월에 달력이 열리도록 설정합니다.

지원 사양 읽기

## Mantine 디자인 시스템: 컴포넌트 경계에서 밀도와 오버플로 제어

### 표를 자체 스크롤 영역 안에 배치

Table.ScrollContainer는 minWidth={580}을 사용해 좁은 화면에서도 네 개 열을 읽기 쉽게 유지합니다. 문서 자체는 뷰포트 안에 머물고, 필요한 경우 데이터 영역만 가로로 스크롤됩니다. horizontalSpacing="lg"와 verticalSpacing="md"는 별도의 셀 패딩이 아니라 테마 간격을 사용합니다.

세 개의 요약 카드는 기본 열 하나와 sm부터 세 개 열을 사용하는 SimpleGrid로 구성됩니다. 페이지 여백도 md에서 xl로 변경됩니다. 이는 반응형 스타일 객체를 사용한 설정이며, 표의 최소 너비는 콘텐츠에 따라 명시적으로 지정한 값입니다.

지원 사양 읽기

## Mantine 디자인 시스템: 잘못된 등록과 동의 철회 구분

### 이 예제에는 서로 다른 두 가지 변경 동작이 있습니다

이름, 세션 날짜, 예시 동의 항목이 유효하지 않으면 일정 등록 폼에서 행을 추가할 수 없습니다. 로컬에 성공적으로 추가되면 드로어가 닫히고 기록 하나가 추가되며 요약 수치가 업데이트됩니다. 알림에는 연구 기록이 저장되지 않았다고 표시됩니다.

철회 동작은 선택한 행의 상태만 변경하고 해당 행의 동작을 비활성화합니다. 날짜는 기록으로 계속 표시되며, 예정 건수에는 철회된 행이 포함되지 않습니다. 이는 예시에서 정한 정책이지 실제 연구 데이터 보존 규칙이 아닙니다.

- 폼이 유효하지 않은 경우: 입력 수준의 오류를 표시하고 드로어를 열린 상태로 유지합니다.

- 로컬 항목 등록 성공: 행을 한 번 추가하고 다음 초안의 입력값을 초기화합니다.

- 예시 동의 철회: 기록은 유지하고 추가 철회 동작은 비활성화합니다.

## Mantine 디자인 시스템: 드로어와 입력 필드의 의미를 함께 고려

### 포커스와 라벨

드로어에는 제목을 전달하고 기본 포커스 관리를 사용합니다. 이름 입력에는 data-autofocus가 지정되어 있습니다. 모든 폼 컨트롤에는 눈에 보이는 라벨이 있으며, 유효성 검사 메시지는 바인딩된 error prop에서 가져옵니다. 철회 버튼의 접근 가능한 이름에는 참여자 이름이 포함되어 시각적으로 같은 라벨이 여러 개 있어도 구분할 수 있습니다.

이 예제에서는 드로어를 닫으면 초안이 취소됩니다. Add participant를 다시 열면 폼이 초기화됩니다. 달력은 드로어 안에 표시되는 기본 Mantine 팝업입니다. 각각 접근성을 갖춘 두 컴포넌트가 항상 올바르게 조합된다고 가정하지 말고, 주변 포커스 트랩과 함께 키보드 동작을 테스트하세요.

지원 사양 읽기

## Mantine 디자인 시스템: 버전에 맞는 패키지와 두 스타일시트 설치

### 필요한 설정을 모두 제공합니다

아래 터미널 명령을 실행하고 App.jsx를 전체 구성 코드로 바꾼 다음, 제공된 main.jsx로 마운트하세요. Mantine 패키지 네 개의 버전은 의도적으로 서로 맞춰져 있습니다. App.jsx에 provider와 테마가 포함되어 있으므로 별도의 숨겨진 provider 파일은 필요하지 않습니다.

날짜 값의 유형을 확인하지 않은 채 다른 메이저 버전의 예제를 복사하지 마세요. 폼의 초기 날짜와 유효성 검사 설정이 실제 DatePickerInput API에 맞는지 확인하세요. 이 예제는 오래된 튜토리얼을 바탕으로 추측한 것이 아니라 지정된 패키지 버전으로 작성되었습니다.

1. core, hooks, form, dates와 dates의 종속성인 dayjs를 설치합니다.

2. 애플리케이션 경계에서 core/styles.css와 dates/styles.css를 각각 한 번씩 가져옵니다.

3. 폼을 실행하고 날짜가 지정된 기록을 추가한 다음, 표와 철회 결과를 확인합니다.

## Mantine 디자인 시스템: 달력, 폼, 표를 하나의 단위로 검증

### 테스트해 볼 항목

빈 드로어에서 제출해 이름, 날짜, 동의 오류를 확인합니다. 이름을 입력하고 달력에서 날짜를 선택한 다음, 예시 동의를 확인하고 다시 제출하세요. 새 참여자가 선택한 날짜 및 고유한 미리보기 ID와 함께 표시되어야 합니다. 그런 다음 해당 참여자의 동의를 철회하고 행과 요약이 모두 업데이트되는지 확인합니다.

데이터 모델은 의도적으로 간결하며 메모리에서만 동작합니다. 연구 참여자 모집, 동의 수집, 서버 저장, 시간대 변환은 없습니다. 이 예제의 핵심 가치는 기본 패키지 통합과 눈에 보이는 컨트롤 동작에 있으며, 연구 관리 백엔드가 제공된다는 의미는 아닙니다.

## Mantine 디자인 시스템 컴포넌트 예제

### App.jsx — provider, 테마, 표, 일정 등록 드로어

완전한 기본 Mantine 예제입니다. 테마 재정의, useForm 유효성 검사, DatePickerInput, 표 업데이트, 동의 상태 변경을 포함합니다.

```
import React, {useState} from 'react';
import {MantineProvider, createTheme, Box, Group, Stack, Title, Text, Button, Paper, Badge, Table, Drawer, TextInput, Select, Checkbox, Alert, SimpleGrid} from '@mantine/core';
import {useForm} from '@mantine/form';
import {DatePickerInput} from '@mantine/dates';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
const theme=createTheme({primaryColor:'cyan',primaryShade:8,defaultRadius:'md',components:{Button:Button.extend({defaultProps:{size:'sm'}}),TextInput:TextInput.extend({defaultProps:{size:'md'}})}});
function Tracker(){
 const[opened,setOpened]=useState(false),[notice,setNotice]=useState(''),[rows,setRows]=useState([{name:'Alex Morgan',study:'Navigation study',date:'2026-10-14',status:'Confirmed'},{name:'Sam Rivera',study:'Editor study',date:'2026-10-16',status:'Confirmed'}]);
 const form=useForm({initialValues:{name:'',study:'Navigation study',date:null,consent:false},validate:{name:v=>v.trim().length<2?'Enter a name with at least two characters.':null,date:v=>!v?'Choose a session date.':null,consent:v=>!v?'Confirm consent before scheduling this example.':null}});
 const submit=values=>{setRows([...rows,{name:values.name.trim(),study:values.study,date:values.date,status:'Confirmed'}]);setOpened(false);setNotice('Participant added in this browser only. No research record was stored.');form.reset();};
 return <Box p={{base:'md',sm:'xl'}} bg='gray.0'><Box maw={1040} mx='auto'>
 <Group justify='space-between' align='flex-start' mb='xl'><Box><Text c='cyan.9' fw={700} size='xs' tt='uppercase' mb='xs'>Mantine · Research operations</Text><Title order={1}>Participant sessions</Title><Text c='dimmed' mt='xs'>Consent and scheduling stay visible in the same working view.</Text></Box><Button onClick={()=>{form.reset();setOpened(true)}}>Add participant</Button></Group>
 <SimpleGrid cols={{base:1,sm:3}} mb='xl'><Paper withBorder p='lg'><Text size='sm' c='dimmed'>In this preview</Text><Text fz={32} fw={700}>{rows.length}</Text><Text size='sm'>Participant records</Text></Paper><Paper withBorder p='lg'><Text size='sm' c='dimmed'>Scheduled</Text><Text fz={32} fw={700}>{rows.filter(r=>r.status==='Confirmed').length}</Text><Text size='sm'>With confirmed example consent</Text></Paper><Paper withBorder p='lg' bg='cyan.0'><Text size='sm' c='cyan.9' fw={600}>Working theme</Text><Text mt='xs' size='sm'>cyan.8 action · radius md<br/>spacing lg · body md</Text></Paper></SimpleGrid>
 {notice&&<Alert title='Local change' color='cyan' mb='md' withCloseButton onClose={()=>setNotice('')}>{notice}</Alert>}
 <Paper withBorder radius='md'><Table.ScrollContainer minWidth={580}><Table verticalSpacing='md' horizontalSpacing='lg' highlightOnHover><Table.Thead><Table.Tr><Table.Th>Participant</Table.Th><Table.Th>Study / session</Table.Th><Table.Th>Consent</Table.Th><Table.Th>Action</Table.Th></Table.Tr></Table.Thead><Table.Tbody>{rows.map((r,i)=><Table.Tr key={i}><Table.Td><Text fw={600} size='sm'>{r.name}</Text><Text size='xs' c='dimmed'>P-{String(i+1).padStart(3,'0')}</Text></Table.Td><Table.Td><Text size='sm'>{r.study}</Text><Text size='xs' c='dimmed'>{r.date}</Text></Table.Td><Table.Td><Badge variant='light' color={r.status==='Confirmed'?'cyan':'orange'}>{r.status}</Badge></Table.Td><Table.Td><Button variant='subtle' color='gray' disabled={r.status==='Withdrawn'} aria-label={'Withdraw consent for '+r.name} onClick={()=>{setRows(rows.map((x,j)=>j===i?{...x,status:'Withdrawn'}:x));setNotice('Consent withdrawn in the preview. The prior session remains visible as history.')}}>Withdraw</Button></Table.Td></Table.Tr>)}</Table.Tbody></Table></Table.ScrollContainer></Paper>
 <Text size='xs' c='dimmed' mt='lg'>Native Mantine 9.6.3: Table, Drawer, useForm, DatePickerInput, and input error styles. All records are memory-only examples.</Text>
 <Drawer opened={opened} onClose={()=>setOpened(false)} position='right' size='md' title={<Title order={2} size='h3'>Schedule a participant</Title>}><form onSubmit={form.onSubmit(submit)} noValidate><Stack gap='lg'><Text size='sm' c='dimmed'>All fields below belong to this one study enrollment. Closing discards the draft.</Text><TextInput label='Participant name' placeholder='Jules Davis' data-autofocus {...form.getInputProps('name')}/><Select label='Study' data={['Navigation study','Editor study']} allowDeselect={false} {...form.getInputProps('study')}/><DatePickerInput label='Session date' placeholder='Choose a date' valueFormat='DD MMM YYYY' defaultDate='2026-10-01' {...form.getInputProps('date')}/><Checkbox label='Consent is confirmed for this example study' {...form.getInputProps('consent',{type:'checkbox'})}/><Button type='submit'>Add to preview</Button><Text size='xs' c='dimmed'>This checkbox demonstrates validation; it is not a research consent collection process.</Text></Stack></form></Drawer>
 </Box></Box>;
}
export default function App(){return <MantineProvider theme={theme} forceColorScheme='light'><Tracker/></MantineProvider>}
```

코드 참조

- core와 dates CSS를 모두 가져옵니다.

- 동의 체크박스는 유효성 검사를 위한 예시 조건이며, 실제 동의 수집 절차가 아닙니다.

## Mantine 디자인 시스템 에이전트 설정

### 구현 시작점

선택한 Vite 템플릿이 지원하는 Node 릴리스를 사용하세요. 소스에는 provider, 테마, 스타일시트 가져오기가 포함되어 있으므로, 예시 흐름을 구현하는 데 백엔드나 사용자 지정 CSS는 필요하지 않습니다.

```
# Terminal
npm create vite@latest participant-demo -- --template react
cd participant-demo
npm install
npm install @mantine/core@9.6.3 @mantine/hooks@9.6.3 @mantine/form@9.6.3 @mantine/dates@9.6.3 dayjs

# Save the complete example as src/App.jsx.
# Replace src/main.jsx with:
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')).render(<App/>);

# Terminal
npm run dev
```

### 프로젝트를 위한 프롬프트

```
제공된 Mantine 9.6.3 구성을 사용하고 core/form/dates 버전을 동일하게 유지하세요. provider, 두 개의 CSS 가져오기, getInputProps 바인딩, 날짜 값 유형, 테이블 스크롤 경계를 그대로 유지하세요. 동의 및 데이터 보존 정책을 먼저 정의한 뒤 실제 서비스를 연결하세요. 동의 철회와 삭제를 구분하고, 입력 오류를 읽기 쉽게 표시하며 드로어의 포커스를 유지하세요.
```

## Mantine 디자인 시스템 출처 및 범위

Mantine 9.6.3을 사용한 원본 OpenDesign 예시입니다. 기본 테마 값과 시안 및 도형 애플리케이션 오버라이드를 구분합니다. 기본 미리보기에서는 로컬 레코드와 유효성 검사만 보여 주며, 동의를 수집하거나 연구 데이터를 저장하지 않습니다.

- 테마 참고 자료 테마에 관한 Mantine 공식 문서입니다.

- 색상 참고 자료 색상에 관한 Mantine 공식 문서입니다.

- 변수 참고 자료 변수에 관한 Mantine 공식 문서입니다.

- Provider 참고 자료 provider에 관한 Mantine 공식 문서입니다.

- 폼 참고 자료 폼에 관한 Mantine 공식 문서입니다.

- 날짜 참고 자료 날짜에 관한 Mantine 공식 문서입니다.

- 드로어 참고 자료 드로어에 관한 Mantine 공식 문서입니다.

- 테이블 참고 자료 테이블에 관한 Mantine 공식 문서입니다.

- 스타일 참고 자료 스타일에 관한 Mantine 공식 문서입니다.

- Select 참고 자료 select에 관한 Mantine 공식 문서입니다.

- Input 참고 자료 input에 관한 Mantine 공식 문서입니다.

## Mantine 디자인 시스템 관련 자료

### Melt UI

Melt UI의 스토어/액션 빌더는 사용자가 소유한 Svelte 마크업에 접근성 동작을 연결합니다. 이 가이드에서는 @melt-ui/svelte 0.86.6을 사용해 속성, 액션, 쓰기 가능한 스토어를 통해 라디오, 슬라이더, 스위치 빌더를 연결합니다. 이는 최신 runes API와는 별개입니다.

### Naive UI

테마 객체의 값을 검증할 수 있는 네이티브 Naive UI 데이터 테이블 작업 화면입니다. 행 선택, 펼치기, 정렬, 페이지 이동 및 로컬 일괄 검토 기능을 제공합니다.

### Nuxt UI

실제 Vue 컴포넌트, 의미에 맞는 테마 참조, 입력 유효성 검사, 명확한 로컬 임시 저장 동작을 갖춘 완전한 Nuxt UI 4.11.3 브리프 작성기를 만드세요.


- [구현 레퍼런스](https://mantine.dev/form/use-form/)
- [출처](https://mantine.dev/theming/colors/)
- [출처](https://mantine.dev/theming/theme-object/)
- [출처](https://mantine.dev/styles/css-variables/)
- [지원 사양 읽기](https://mantine.dev/theming/theme-object/)
- [지원 사양 읽기](https://mantine.dev/theming/colors/)
- [지원 사양 읽기](https://mantine.dev/styles/css-variables/)
- [지원 사양 읽기](https://mantine.dev/form/use-form/)
- [지원 사양 읽기](https://mantine.dev/dates/date-picker-input/)
- [지원 사양 읽기](https://mantine.dev/core/table/)
- [지원 사양 읽기](https://mantine.dev/core/drawer/)
- [코드 참조](https://mantine.dev/form/use-form/)
- [테마 참고 자료 테마에 관한 Mantine 공식 문서입니다.](https://mantine.dev/theming/theme-object/)
- [색상 참고 자료 색상에 관한 Mantine 공식 문서입니다.](https://mantine.dev/theming/colors/)
- [변수 참고 자료 변수에 관한 Mantine 공식 문서입니다.](https://mantine.dev/styles/css-variables/)
- [Provider 참고 자료 provider에 관한 Mantine 공식 문서입니다.](https://mantine.dev/theming/mantine-provider/)
- [폼 참고 자료 폼에 관한 Mantine 공식 문서입니다.](https://mantine.dev/form/use-form/)
- [날짜 참고 자료 날짜에 관한 Mantine 공식 문서입니다.](https://mantine.dev/dates/date-picker-input/)
- [드로어 참고 자료 드로어에 관한 Mantine 공식 문서입니다.](https://mantine.dev/core/drawer/)
- [테이블 참고 자료 테이블에 관한 Mantine 공식 문서입니다.](https://mantine.dev/core/table/)
- [스타일 참고 자료 스타일에 관한 Mantine 공식 문서입니다.](https://mantine.dev/styles/styles-api/)
- [Select 참고 자료 select에 관한 Mantine 공식 문서입니다.](https://mantine.dev/core/select/)
- [Input 참고 자료 input에 관한 Mantine 공식 문서입니다.](https://mantine.dev/core/text-input/)