# Quasar 디자인 시스템

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

세션 이름을 정하고 형식을 선택한 뒤, 그룹 규모를 조정하고 로컬 안내 내용을 저장하세요.

## Quasar 디자인 시스템 디자인 레퍼런스

Quasar 2.34.0 및 Vue 3. 색상에는 실제 --q-* 런타임 변수를 사용하고, 간격 및 타이포그래피는 Sass 기본값을 참조합니다. 애플리케이션 제목, 일정 일러스트레이션 및 시스템 글꼴 재정의는 독자적으로 구성했습니다. Material Icons는 @quasar/extras 2.1.0을 통해 로컬로 제공합니다.

### Quasar 기본 브랜드 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --q-primary | #1976D2 | 스테퍼 상태, 기본 동작 및 슬라이더 |
| --q-secondary | #26A69A | 보조 역할입니다. |
| --q-accent | #9C27B0 | 강조 역할 |
| --q-positive | #21BA45 | 긍정 피드백 역할 |
| --q-negative | #C10015 | 유효성 검사/오류 역할 |
| --q-info | #31CCEC | 정보 역할입니다. |
| --q-warning | #F2C037 | 경고 역할입니다. |
### 네이티브 간격 헬퍼

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| $space-base | 16px | Sass 기본 간격 단위 |
| q-pa-xs / q-ma-xs | 4px | 기본 간격의 1/4 |
| q-pa-sm / q-ma-sm | 8px | 기본 간격의 1/2 |
| q-pa-md / q-ma-md | 16px | 기본 간격 |
| q-pa-lg / q-ma-lg | 24px | 기본 간격의 1.5배 |
| q-pa-xl / q-ma-xl | 48px | 기본 간격의 3배 |
| q-mt-md | 16px top margin | 원격 참여 토글 위쪽에 사용 |
| q-ml-sm | 8px left margin | 탐색 동작 사이에 사용 |
### 네이티브 타이포그래피 클래스 단계

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| text-h4 | 2.125rem / 2.5rem, weight 400 | 기본 디스플레이 제목 유틸리티 |
| text-h5 | 1.5rem / 2rem, weight 400 | 기본 섹션 제목 유틸리티 |
| text-h6 | 1.25rem / 2rem, weight 500 | 기본 소제목 유틸리티 |
| text-body1 | 1rem / 1.5rem, weight 400 | 기본 큰 본문 유틸리티 |
| text-body2 | 0.875rem / 1.25rem, weight 400 | 기본 간결한 본문 유틸리티 |
| Application font | system-ui, sans-serif | 명시적으로 지정한 독자적 재정의입니다. 여기서는 Quasar의 기본 Roboto 글꼴을 내려받지 않습니다. |
### 중단점 및 명시적으로 지정한 애플리케이션 레이아웃

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| sm minimum | 600px | 네이티브 Quasar 중단점 시작값 |
| md minimum | 1024px | 네이티브 Quasar 중단점 시작값 |
| lg minimum | 1440px | 네이티브 Quasar 중단점 시작값 |
| xl minimum | 1920px | 네이티브 Quasar 중단점 시작값 |
| Application stack breakpoint | 740px | 독자적으로 지정한 2열에서 세로 배열로의 전환 |
| Page title | 34px / 1.15; 29px mobile | 독자적으로 구성한 타이포그래피 계층 |
| Page gap / padding | 24px / 32px | 독자적으로 구성한 주변 레이아웃 |
| Participants slider | min 2, max 16, step 1 | 시각적 표현만을 위한 범위 입력이 아닌 실제 QSlider 속성 |
## Quasar 디자인 시스템 전체 가이드

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

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

## Quasar 디자인 시스템 컴포넌트로 완성하는 단계별 작업

### Quasar 컴포넌트로 완성하는 단계별 작업

> Quasar는 Vue 컴포넌트와 스타일링 헬퍼, 애플리케이션 프레임워크를 제공합니다. 이 예시에서는 Vue 3 진입점에서 컴포넌트를 직접 사용합니다. 네이티브 스테퍼가 양식, 라디오 그룹, 슬라이더, 토글 및 최종 확인 단계를 조율합니다. 이러한 컨트롤을 보여주기 위해 전체 화면 QLayout 셸을 사용할 필요는 없습니다.

세션 안내의 목적은 명확합니다. 진행 형식과 그룹 구성을 선택하고, 그에 맞는 일정을 확인할 수 있습니다. 컴포넌트 라이브러리는 컨트롤과 탐색 상태를 제공하며, 독자적으로 구성한 세 가지 일정과 각 일정의 45분 구성은 애플리케이션 콘텐츠입니다. 일정 관리 서비스가 제공되는 것은 아닙니다.

지원 사양 읽기

## Quasar 디자인 시스템에서는 브랜드 변수와 이름이 지정된 팔레트 클래스가 함께 사용됩니다

### 브랜드 변수와 이름이 지정된 팔레트 클래스의 공존

검증된 기본 스타일시트에서 런타임 --q-primary 값은 #1976D2입니다. QStepper, QBtn 및 QSlider에 color="primary"를 지정하면 주 색상 스타일이 해당 역할을 따릅니다. secondary, accent, positive, negative, info 및 warning은 각 컨트롤마다 임의의 색상을 지정하는 대신 서로 구분된 이름 있는 역할로 유지됩니다.

저장 완료 배너에는 이름이 지정된 녹색 팔레트 유틸리티를 사용해 연한 배경과 어두운 텍스트를 적용합니다. 성공을 색상뿐 아니라 명시적인 문장으로도 전달합니다. 파란색 링 일러스트레이션은 독자적으로 만든 장식이며 보조 기술에서 숨겨집니다. 이 일러스트레이션은 양식 상태를 추가로 나타내지 않습니다.

지원 사양 읽기

## Quasar 디자인 시스템 간격 접미사의 의미를 정확히 파악하세요

### Quasar 간격 접미사의 의미를 정확히 파악하세요

Quasar 간격 클래스는 유형, 방향 및 크기를 조합합니다. q-mt-md는 중간 크기의 위쪽 여백을 뜻하며, q-ml-sm은 왼쪽에 작은 여백을 더합니다. 기본 간격은 16픽셀이고 xs는 4, sm은 8, md는 16, lg는 24, xl은 48픽셀입니다. xl로 갈 때는 기본 간격의 3배만큼 늘어나며, 임의로 32픽셀 단계를 가정하지 않습니다.

컨트롤 내부에는 이러한 네이티브 헬퍼를 사용하고, 더 넓은 레이아웃에는 독자적으로 구성한 CSS를 사용합니다. 기본 타이포그래피 유틸리티에는 0.875rem 크기의 text-body2와 1.5rem 크기의 text-h5가 포함됩니다. 페이지 제목은 독자적으로 지정한 34픽셀이며, 글꼴은 system-ui로 명시적으로 전환하고 네이티브 컴포넌트 아이콘에는 Material Icons를 유지합니다.

지원 사양 읽기

## Quasar 디자인 시스템: 스테퍼만으로는 양식을 검증할 수 없습니다

### 스테퍼만으로는 양식을 검증할 수 없습니다

QStepper는 현재 단계 번호를 관리하고 이름이 지정된 세 개의 QStep 섹션을 포함합니다. 이전 단계로 이동한 뒤에만 해당 단계가 완료로 표시됩니다. 두 레이아웃 모두 세로 방향을 사용해, 휴대폰 화면에서 가로 헤더 세 개를 비좁게 배치하지 않고도 순서를 명확히 보여 줍니다.

첫 번째 계속 작업은 QForm에 속합니다. 핸들러는 validate가 완료될 때까지 기다린 다음 step을 2로 설정합니다. 헤더를 통한 탐색은 활성화되어 있지 않으므로, 이후 단계의 제목을 클릭해 이 검증 과정을 건너뛸 수 없습니다. 뒤로 이동해도 제목, 형식, 그룹 값은 그대로 유지됩니다. 해당 모델은 마운트 해제되는 필드 안이 아니라 부모 SFC에 있기 때문입니다.

지원 사양 읽기

## Quasar 디자인 시스템: QForm은 모든 네이티브 제약 조건이 아니라 내부 규칙을 사용합니다

### QForm은 모든 네이티브 제약 조건이 아니라 내부 규칙을 사용합니다

제목 QInput에는 공백을 제거하고 의미 있는 문자가 5자 이상인지 확인하는 내부 rules 배열이 있습니다. 이 규칙은 QForm.validate에 적용됩니다. 프로그래밍 방식으로 validate를 호출할 때 네이티브 required 또는 email 속성만으로는 규칙을 대체할 수 없으므로, 작동하는 예제에서는 실제 제약 조건을 직접 표현합니다.

잘못된 값을 제출하면 필드 오류가 표시되고 첫 번째 단계에 그대로 머뭅니다. 입력을 수정하면 같은 계속 버튼으로 다음 단계로 이동할 수 있습니다. 60자 제한과 표시되는 글자 수 카운터는 제목 길이를 적절하게 유지하도록 돕고, 인라인 규칙은 제목이 너무 짧거나 비어 있으면 진행할 수 없는 이유를 설명합니다.

1. 제목을 비워 둔 채 첫 번째 단계를 제출해 유효성 검사 메시지를 확인하세요.

2. 의미 있는 제목을 입력하고 세션 형식을 선택하세요.

3. 계속을 누른 뒤 뒤로 돌아와 입력값이 유지되는지 확인하세요.

지원 사양 읽기

## Quasar 디자인 시스템: 라디오, 슬라이더, 토글은 서로 다른 결정을 나타냅니다

### 라디오 버튼, 슬라이더, 토글은 서로 다른 선택을 나타냅니다

QOptionGroup은 Design critique, Sketching session, Research synthesis 중 하나를 선택하는 데 사용됩니다. 선택을 바꾸면 해당 형식에 맞는 의제 배열이 적용됩니다. 의제는 길이가 고정된 샘플 콘텐츠이므로 형식을 바꾸면 활동 항목은 달라지지만 총 45분은 유지됩니다.

QSlider는 참가자 수를 2~16의 정수로 설정합니다. QToggle은 원격 참가자의 포함 여부를 기록합니다. 옆의 안내 문구는 모두 함께 쓰는 테이블에서 공유 보드와 원격 진행 안내로 바뀝니다. 이러한 컨트롤은 단순히 분리된 데모 위젯으로 작동하는 것이 아니라, 화면에 표시되는 세션 안내 내용을 바꿉니다.

지원 사양 읽기

## Quasar 디자인 시스템: 초기화할 때까지 마지막 단계의 로컬 결과를 고정합니다

### 초기화할 때까지 마지막 단계의 로컬 결과를 고정합니다

검토 단계에는 공백을 제거한 제목, 형식, 참가자 수, 참여 방식이 다시 표시됩니다. 저장을 누르면 로컬 저장 상태가 변경되고 저장 및 뒤로 버튼이 비활성화되며, 그룹 규모를 알리는 배너가 표시됩니다. 다른 항목 시작을 누르면 모든 모델이 초기화되고 첫 번째 단계로 돌아가므로 예제의 전체 흐름을 직접 확인할 수 있습니다.

캘린더나 메시지 API로 요청을 보내지 않습니다. 배너에는 초대장이 발송되지 않았다고 명시하고, 검토 안내에는 저장해도 일정이 생성되지 않는다고 설명합니다. 실제 서비스에서 이러한 내용을 알리려면 날짜, 시간대, 수신자 및 백엔드의 실제 응답이 필요합니다.

지원 사양 읽기

## Quasar 디자인 시스템: 네이티브 컴포넌트의 의미를 활용하고 실제 포커스 테스트를 수행합니다

### 네이티브 컴포넌트의 의미를 활용하고 실제 포커스 테스트를 수행합니다

네이티브 컨트롤은 라디오, 슬라이더, 스위치 역할을 제공합니다. 슬라이더에는 Participants라는 레이블이 있고, 제목 필드에는 보이는 레이블과 필드 수준의 유효성 검사 메시지가 있습니다. 스테퍼는 현재 단계를 표시하고 단계 제목을 사용해 콘텐츠에 레이블을 지정합니다. 예제에서는 장식용 그래픽을 접근성 읽기 순서에서 제외합니다.

로컬 테스트에서는 키보드로 슬라이더를 조작하고, 원격 참여를 켜고 끄고, 유효성 검사를 통과한 뒤 9명 규모의 하이브리드 세션 안내를 저장했습니다. 좁은 화면 레이아웃도 확인했습니다. 스테퍼의 정적인 이미지만으로는 이러한 관계를 구현할 수 없으며 유효성 검사 과정이 연결되어 있는지도 입증할 수 없습니다.

- 현재 단계와 해당 콘텐츠의 제목을 일치시키세요.

- 단계 모델을 변경하기 전에 규칙을 통해 유효성을 검사하세요.

- 로컬에서 실제로 수행된 작업을 정확히 설명하는 상태 배너를 사용하세요.

지원 사양 읽기

## Quasar 디자인 시스템 CSS과 필요한 아이콘 세트를 포함합니다

### Quasar CSS와 해당 아이콘 세트를 포함하세요

엔트리 파일에서 Quasar를 가져오고 플러그인을 등록한 다음 quasar/dist/quasar.css를 불러오고 @quasar/extras의 Material Icons 스타일시트를 가져옵니다. SFC에서는 사용하는 컴포넌트를 가져옵니다. 로컬 번들에 아이콘 폰트 파일을 인라인으로 포함해 원격 폰트를 요청하지 않아도 체크 표시와 수정 표시가 렌더링됩니다.

원본 스타일시트는 Quasar CSS을 따르며, 임베딩에 맞게 문서 높이를 콘텐츠에 맞춰 초기화합니다. 모든 네이티브 컴포넌트에 전역 스타일을 적용하거나 별도의 간격 체계를 만들어 내지 않습니다. 전체 Quasar CLI 또는 Vite 플러그인 애플리케이션에서는 표준 빌드 통합을 사용할 수 있습니다. 이 완성된 샘플은 작은 Vue 엔트리에서 동일한 컴포넌트를 사용하는 방법을 보여 줍니다.

지원 사양 읽기

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

### 완성된 네이티브 스테퍼 워크플로

QStepper/QStep, QForm/QInput, QOptionGroup, QSlider, QToggle 및 파생 의제를 사용합니다.

```
<script setup>
import {ref,computed} from 'vue';import {QStepper,QStep,QStepperNavigation,QForm,QInput,QOptionGroup,QSlider,QToggle,QBtn,QCard,QCardSection,QBadge,QBanner} from 'quasar';
const step=ref(1),title=ref(''),format=ref('critique'),people=ref(8),remote=ref(false),saved=ref(false),form=ref();const formats=[{label:'Design critique',value:'critique'},{label:'Sketching session',value:'sketch'},{label:'Research synthesis',value:'research'}];const names={critique:'Design critique',sketch:'Sketching session',research:'Research synthesis'};const agenda=computed(()=>format.value==='critique'?[['10 min','Set the question'],['25 min','Review the work'],['10 min','Choose next actions']]:format.value==='sketch'?[['5 min','Frame the prompt'],['25 min','Sketch independently'],['15 min','Compare directions']]:[['10 min','Sort observations'],['20 min','Name the patterns'],['15 min','Record open questions']]);async function next(){if(await form.value.validate())step.value=2;}function reset(){step.value=1;title.value='';format.value='critique';people.value=8;remote.value=false;saved.value=false;}
</script>
<template><main class="session-builder"><header><div><p class="eyebrow">QUASAR · GUIDED WORKFLOW</p><h1>Make time for better work.</h1><p class="intro">Build a small session brief with a native stepper, validated fields and a live agenda.</p></div><QBadge color="primary" label="45 MINUTES"/></header><div class="builder-grid"><QStepper v-model="step" vertical color="primary" animated flat bordered class="session-stepper"><QStep :name="1" prefix="1" title="Name the session" caption="Purpose and format" :done="step>1"><QForm ref="form" @submit="next"><QInput v-model="title" outlined label="Session title" maxlength="60" counter lazy-rules :rules="[v=>v.trim().length>=5||'Use at least five non-space characters.']"/><p class="field-label">Session format</p><QOptionGroup v-model="format" :options="formats" color="primary"/><QStepperNavigation><QBtn color="primary" label="Continue" type="submit" no-caps/></QStepperNavigation></QForm></QStep><QStep :name="2" prefix="2" title="Shape the group" caption="People and participation" :done="step>2"><p class="field-label">Participants: <strong>{{people}}</strong></p><QSlider v-model="people" :min="2" :max="16" :step="1" label color="primary" aria-label="Participants"/><QToggle v-model="remote" label="Include remote participants" color="primary" class="q-mt-md"/><p class="hint">{{remote?'Reserve a shared board and a facilitator for the remote group.':'Use one shared table and keep the work visible to everyone.'}}</p><QStepperNavigation><QBtn color="primary" label="Review brief" no-caps @click="step=3"/><QBtn flat label="Back" no-caps class="q-ml-sm" @click="step=1"/></QStepperNavigation></QStep><QStep :name="3" prefix="3" title="Review the brief" caption="Save a local snapshot"><p class="review-title">{{title.trim()}}</p><p>{{names[format]}} · {{people}} people · {{remote?'Hybrid':'In person'}}</p><p class="hint">The agenda totals 45 minutes. Saving does not create a calendar event or invite anyone.</p><QStepperNavigation><QBtn color="primary" :label="saved?'Saved locally':'Save local brief'" :disable="saved" no-caps @click="saved=true"/><QBtn flat label="Back" no-caps class="q-ml-sm" :disable="saved" @click="step=2"/></QStepperNavigation><QBanner v-if="saved" rounded class="bg-green-1 text-green-10 q-mt-lg" role="status">Local brief saved for {{people}} people. No invitation was sent.<template #action><QBtn flat label="Start another" no-caps @click="reset"/></template></QBanner></QStep></QStepper><QCard flat bordered class="agenda-card"><QCardSection><p class="eyebrow">LIVE AGENDA</p><h2>{{title.trim()||'Your next working session'}}</h2><p class="agenda-format">{{names[format]}}</p><div class="time-art" aria-hidden="true"><i></i><i></i><i></i><span>45′</span></div><ol class="agenda-list"><li v-for="row in agenda" :key="row[1]"><span>{{row[0]}}</span><strong>{{row[1]}}</strong></li></ol><div class="session-meta"><span>{{people}} participants</span><span>{{remote?'Hybrid setup':'One shared table'}}</span></div><p class="local-note">Original sample agenda. Quasar supplies the form and navigation components.</p></QCardSection></QCard></div></main></template>
```

코드 참조

- 첫 번째 단계 전환은 QForm.validate()가 완료될 때까지 기다립니다.

- 제목 규칙은 공백을 제거한 뒤 의미 있는 글자 수를 확인합니다.

- 검토 단계에서는 캘린더 일정이 생성되지 않습니다.

### 원본 의제 구성

네이티브 Quasar 컴포넌트 주위에 반응형 레이아웃과 장식용 시간 일러스트를 배치합니다.

```
html,body{height:auto;min-height:0}body{background:#f3f5f8;font-family:system-ui,sans-serif}.session-builder{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.13em;color:#5c6c80}h1{font-size:34px;line-height:1.15;font-weight:650;margin:14px 0;letter-spacing:-.02em}.intro{font-size:15px;line-height:1.7;max-width:610px;color:#5c6c80}.builder-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}.field-label{font-size:14px;font-weight:600;margin:20px 0 8px}.hint,.local-note{font-size:12px;line-height:1.7;color:#647187}.review-title{font-size:20px;font-weight:650;line-height:1.4}.agenda-card .q-card__section{padding:24px}.agenda-card h2{font-size:25px;line-height:1.25;font-weight:600;margin:16px 0 8px;letter-spacing:0}.agenda-format{font-size:14px;color:#647187}.time-art{height:140px;background:#e6eef8;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:24px 0}.time-art i{position:absolute;width:130px;height:130px;border:18px solid #8db8e8;border-radius:50%;left:10%;top:45%}.time-art i:nth-child(2){border-color:#c1d7ef;width:170px;height:170px;left:35%;top:-30%}.time-art i:nth-child(3){border-color:#d8e5f5;width:150px;height:150px;left:65%;top:40%}.time-art span{font-size:45px;font-weight:700;position:relative;color:#175a9e}.agenda-list{list-style:none;padding:0;margin:0}.agenda-list li{display:grid;grid-template-columns:65px 1fr;gap:16px;border-bottom:1px solid #dfe5ec;padding:16px 0;font-size:14px}.agenda-list span{color:#657991;font-size:12px}.agenda-list strong{font-weight:600}.session-meta{display:flex;justify-content:space-between;gap:12px;margin:24px 0;font-size:12px;color:#5c6c80}.local-note{margin-bottom:0}@media(max-width:740px){.session-builder{padding:24px 14px}header{flex-direction:column;gap:4px}h1{font-size:29px}.builder-grid{grid-template-columns:1fr}.session-stepper .q-stepper__step-inner{padding-right:18px}.agenda-card .q-card__section{padding:22px}}
```

코드 참조

- 페이지 임베딩에 콘텐츠 높이를 사용합니다.

- 애플리케이션 글꼴 재정의를 명시적으로 지정합니다.

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

### 구현 시작점

Vue 3에서 Quasar 2.34.0 및 @quasar/extras 2.1.0을 확인했습니다. 기본 단계 표시기에 필요한 로컬 에셋으로 아이콘 폰트를 사용합니다.

```
// Create the project first:
// npm create vite@latest quasar-specimen -- --template vue
// cd quasar-specimen && npm install
// In a Vite Vue 3 project:
// npm install quasar@2.34.0 @quasar/extras@2.1.0
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import {Quasar} from 'quasar';
import 'quasar/dist/quasar.css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(Quasar, {plugins: {}}).mount('#app');
// index.html contains <div id="app"></div>.
// Components are explicitly imported in App.vue; no auto-import plugin is required here.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

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

```
Quasar 2.34.0과 제공된 세션 안내 예제를 사용하세요. QStepper, QForm, QInput의 유효성 검사, 세션 형식 라디오 컨트롤, 참가자 슬라이더, 의제 토글을 유지하세요. 다음 단계로 이동하기 전에 폼 유효성 검사가 끝날 때까지 기다리고, 뒤로 이동해도 입력값을 보존하며, 동일한 값에서 검토 요약을 구성하세요. 저장 작업은 세션 안내를 로컬에 기록하고, 이후 내용이 변경되면 저장 상태를 무효화합니다. Quasar 스타일시트와 로컬 Material Icons 설정을 포함하고, 전송이나 예약 서비스를 만들어 내지 않으면서 좁은 화면에서도 사용하기 편하도록 하세요.
```

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

Quasar 2.34.0에는 기본 구성 요소와 로컬 Material Icons가 포함되어 있습니다. 원본 일정과 시각 자료는 샘플 콘텐츠입니다. 저장해도 캘린더 일정이 생성되거나 초대장이 발송되지 않습니다.

- 스테퍼 단계 상태, 탐색 및 접근성입니다.

- Form 내부 규칙 검증 및 제출 동작입니다.

- 입력 레이블, 글자 수 표시 및 규칙입니다.

- 옵션 그룹 서로 배타적인 형식 선택 항목입니다.

- 슬라이더 숫자 키보드 및 포인터 제어입니다.

- 색상 런타임 브랜드 역할입니다.

- 간격 기본 간격 도우미 구문입니다.

- 타이포그래피 기본 타이포그래피 유틸리티입니다.

- 통합 Vue/Vite 통합 참조입니다.

## Quasar 디자인 시스템 관련 리소스

### React Native Elements

React Native Elements 5.0.0으로 완성도 높은 집중 계획 작성기를 만들어 보세요. 실제 테마 역할, 제어 가능한 입력과 선택 항목, 유효성 검사, 로컬 확인 기능을 구현하고 웹 빌드까지 테스트합니다.

### React Suite

기본 React Suite 검토 캘린더입니다. 검증된 v6 CSS 변수, 날짜 셀 표시, 선택한 날짜의 일정, 모달 유효성 검사 및 명시적인 로컬 일정 관리 규칙을 포함합니다.

### Skeleton

완성된 독서 데스크에서 Skeleton 5.0.1의 Cerberus, Mint, Rose 테마를 살펴보세요. 토큰을 실시간으로 확인하고 어두운 표면 조합을 비교하며 로컬 상태를 자유롭게 되돌릴 수 있습니다.


- [구현 레퍼런스](https://quasar.dev/vue-components/stepper/)
- [출처](https://quasar.dev/style/color-palette/)
- [출처](https://quasar.dev/style/spacing/)
- [출처](https://quasar.dev/style/typography/)
- [출처](https://quasar.dev/style/breakpoints/)
- [지원 사양 읽기](https://quasar.dev/start/vite-plugin/)
- [지원 사양 읽기](https://quasar.dev/style/color-palette/)
- [지원 사양 읽기](https://quasar.dev/style/spacing/)
- [지원 사양 읽기](https://quasar.dev/vue-components/stepper/)
- [지원 사양 읽기](https://quasar.dev/vue-components/form/)
- [지원 사양 읽기](https://quasar.dev/vue-components/option-group/)
- [지원 사양 읽기](https://quasar.dev/vue-components/banner/)
- [코드 참조](https://quasar.dev/vue-components/stepper/)
- [코드 참조](https://quasar.dev/style/spacing/)
- [스테퍼 단계 상태, 탐색 및 접근성입니다.](https://quasar.dev/vue-components/stepper/)
- [Form 내부 규칙 검증 및 제출 동작입니다.](https://quasar.dev/vue-components/form/)
- [입력 레이블, 글자 수 표시 및 규칙입니다.](https://quasar.dev/vue-components/input/)
- [옵션 그룹 서로 배타적인 형식 선택 항목입니다.](https://quasar.dev/vue-components/option-group/)
- [슬라이더 숫자 키보드 및 포인터 제어입니다.](https://quasar.dev/vue-components/slider/)
- [색상 런타임 브랜드 역할입니다.](https://quasar.dev/style/color-palette/)
- [간격 기본 간격 도우미 구문입니다.](https://quasar.dev/style/spacing/)
- [타이포그래피 기본 타이포그래피 유틸리티입니다.](https://quasar.dev/style/typography/)
- [통합 Vue/Vite 통합 참조입니다.](https://quasar.dev/start/vite-plugin/)