# Adeo Mozaic 디자인 시스템

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

수량을 입력하거나 단계별로 조정하고, 한계를 시험하며 로컬 자재 목록을 준비하세요.

## Adeo Mozaic 디자인 시스템 디자인 레퍼런스

Mozaic SCSS/BEM 문서: 기초 및 설치 페이지는 v1.85.0을, 수량 코드 레퍼런스는 v1.76.0을 명시합니다. 이는 문서화된 레퍼런스 계약이며, 모든 페이지가 하나의 최신 패키지 버전을 추종한다는 주장이 아닙니다.

### 매직 유닛 레퍼런스

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| mu025 | 4px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu050 | 8px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu075 | 12px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu100 | 16px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu125 | 20px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu150 | 24px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu175 | 28px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu200 | 32px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu250 | 40px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu300 | 48px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu350 | 56px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu400 | 64px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu500 | 80px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu600 | 96px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
| mu700 | 112px | rem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다. |
### 버튼 크기

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Small height | 32px / 2mu | 컴팩트한 컨트롤. |
| Medium height | 48px / 3mu | 모바일 수량 구성에 사용합니다. |
| Large height | 56px / 3.5mu | 강조도가 높은 대형 액션. |
| Text + icon, small / medium | 24px icon | 아이콘과 레이블의 균형을 유지합니다. |
| Text + icon, large | 32px icon | 대형 버튼. |
| Icon-only, medium / large | 32px icon | 정사각형 컨트롤. |
### 본문 위계

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| mt-body-m | 16px regular | 기본 본문. |
| Small body | 14px | 여러 줄 본문의 최소 권장 크기. |
| Large body | 18px | 단락의 권장 최대 크기. |
### 수량 컴포넌트 구조

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| mc-quantity-selector | Wrapper | 두 개의 컨트롤과 입력 필드를 담습니다. |
| mc-quantity-selector__input | Input element | mc-text-input도 함께 적용하세요. |
| mc-quantity-selector__button-left | Decrement element | mc-button--square와 --bordered도 함께 적용하세요. |
| mc-quantity-selector__button-right | Increment element | mc-button--square와 --bordered도 함께 적용하세요. |
| Small composition | mc-text-input--s + mc-button--s | 전체 그룹을 한꺼번에 변경하세요. |
| is-disabled | Visual state class | 실제 동작에는 네이티브 disabled를 함께 사용하세요. |
### 빌드와 커스터마이징

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| postcssPluginConfig | @mozaic-ds/css-dev-tools/postcssPluginConfig | 필수 플러그인 목록. |
| Parser | postcss-scss | SCSS 소스를 확인하세요. |
| Production environment | MOZAIC_ENV=production | 프로덕션 플러그인 구성을 활성화합니다. |
### 간격 유틸리티

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| mu-mb-100 | 16px bottom margin | 컴포넌트 사이의 간격. |
| mu-pl-050 | 8px left padding | 유틸리티 간격. |
| make-space-util(m, t, 075) | Top margin at mu075 | 선택한 유틸리티를 생성합니다. |
## Adeo Mozaic 디자인 시스템 완전 가이드

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

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

## 구성 가능한 리테일 아이덴티티를 갖춘 Adeo Mozaic 디자인 시스템 SCSS 컴포넌트

### ADEO는 조직이며 기본 프리셋이 아닙니다

> Mozaic은 소스 스타일과 토큰을 폰트 및 SVG 아이콘과 별도로 제공합니다. 기본 토큰 테마는 Leroy Merlin이며, ADEO는 명시적으로 지정하는 프리셋입니다. 따라서 녹색의 독자적 미리보기는 공식 ADEO 기업 색상의 증거가 아닙니다.

ADEO 프리셋을 사용하려면 preset: "adeo"와 tokens.localTokensExportPath를 지정한 mozaic.config.js를 만들고 npx mozaic-tokens-build를 실행하세요. 사용자 정의 토큰 디렉터리는 관련 없는 값을 대체하지 않고 해당 JSON 경로를 깊게 병합합니다. 테마 생성과 컴포넌트 스타일링은 별개의 빌드 단계입니다.

- styles는 SCSS 컴포넌트를 제공합니다.

- tokens는 소스 및 생성된 토큰 형식을 제공합니다.

- web-fonts와 icons는 별도의 에셋을 제공합니다.

- css-dev-tools는 빌드 및 린트 구성을 제공합니다.

지원 사양 읽기

## Adeo Mozaic 디자인 시스템 텍스트 컨테이너를 고정하지 않고 매직 유닛 사용하기

### rem 기반 16px 레퍼런스

Mozaic 스케일의 작은 쪽은 1/4 유닛 증분을, 중간은 0.5 유닛을, 더 큰 거리는 정수 유닛을 사용합니다. 레퍼런스 표를 보면 별도의 두 번째 간격 체계를 만들어내지 않고도 실제로 명명된 단계를 그대로 활용할 수 있습니다.

플래너는 16px 간격, 24px 내부 여백, 48px 컨트롤 높이를 사용합니다. 이 선택 덕분에 컴포넌트는 같은 리듬 위에 놓이면서 주변 카드와 텍스트는 커질 수 있습니다. 번역되거나 확대된 레이블을 고정 높이 콘텐츠 박스에 잘라 넣기보다는 최소 컨트롤 높이를 두는 편이 낫습니다.

지원 사양 읽기

## Adeo Mozaic 디자인 시스템 밀집된 컨트롤 옆에서도 본문 가독성 유지

### 세 가지 실용적인 본문 크기

문서화된 본문 스케일은 16px 레귤러를 중심으로 합니다. 여러 줄 텍스트에는 14px이 하한 권장치이고, 18px은 단락의 상한 권장치입니다. 미리보기는 시스템 폰트 폴백을 사용하며 Mozaic의 웹폰트 패키지를 함께 제공하는 것처럼 꾸미지 않습니다.

더 큰 제목은 프로젝트 이름을, 본문 텍스트는 계산 과정을 설명하고, 더 작은 보조 줄은 예시의 범위를 밝히는 데 사용하세요. 자재 값은 선반 일러스트에 그려 넣은 텍스트가 아니라 실제 텍스트로 유지됩니다.

지원 사양 읽기

## Adeo Mozaic 디자인 시스템 하나의 컴포넌트, 세 가지 조화된 요소

### 래퍼는 애플리케이션 상태를 제공하지 않습니다

수량 선택기는 테두리가 있는 정사각형 감소 버튼, 숫자 입력 필드, 그리고 이에 맞는 증가 버튼을 결합합니다. 텍스트 입력과 버튼을 포함한 세 컴포넌트 스타일을 모두 임포트하세요. quantity-selector만 임포트하는 것은 문서화된 구성에 해당하지 않습니다.

컴팩트 변형을 사용하려면 버튼과 입력 필드의 크기를 함께 변경하세요. 사용 지침에서는 작은 화면에서도 중간 크기를 사용하도록 안내하므로, 휴대전화에서 모든 요소를 줄이는 것은 적절한 최적화가 아닙니다. 미리보기에서는 컨트롤을 48px로 유지하고 주변 구성을 세로로 배치합니다.

지원 사양 읽기

## Adeo Mozaic 디자인 시스템의 경계 스타일은 실제 동작과 일치해야 합니다

### 직접 입력에는 더하기와 빼기 외에도 다양한 상태가 있습니다

원래 예제에서는 1부터 12까지의 정수를 검증합니다. 값이 1이면 감소 버튼이 실제로 비활성화되고, 12이면 증가 버튼이 비활성화됩니다. is-disabled 클래스만으로는 키보드 활성화를 막을 수 없습니다. 네이티브 disabled 속성과 시각적 클래스가 동기화됩니다.

비어 있거나 소수인 입력값을 그럴듯한 자재 목록으로 임의 변환하지 않습니다. 제출하면 허용되는 범위를 안내하고 입력 필드에 포커스를 둡니다. 이후 값을 수정하면 이전 수량을 기준으로 한 결과이므로, 기존에 준비된 결과를 지웁니다. 선반 계산은 허구의 예시 데이터이며 구조나 구매에 관한 조언이 아닙니다.

1. 빈 문자열을 0으로 처리하지 않고 입력값을 읽습니다.

2. 예시 수량을 계산하기 전에 정수인지, 허용 범위 안에 있는지 확인합니다.

3. 경계 버튼과 접근성 오류 상태를 모두 업데이트합니다.

4. 검증을 통과한 뒤에만 로컬 스냅샷을 생성합니다.

지원 사양 읽기

## Adeo Mozaic 디자인 시스템: 프로젝트 결과를 위한 단일 솔리드 액션 사용

### 단계별 값 변경과 준비 작업 구분하기

스테퍼는 입력값을 변경하므로 절제된 테두리 사각형 컨트롤을 사용합니다. 솔리드 스타일의 ‘자재 목록 준비’ 버튼은 전체 양식에 작업을 수행합니다. 같은 색상의 솔리드 액션 두 개를 나란히 배치하면 이러한 차이가 불분명해집니다.

결과 메시지에는 아무것도 주문되지 않았다는 점을 명확히 표시합니다. 가짜 로딩 상태나 결제 절차, 네트워크 제출은 없습니다. 값과 액션의 관계를 보여 주기에는 구체적인 요약만으로 충분합니다.

지원 사양 읽기

## Adeo Mozaic 디자인 시스템: Mozaic 파이프라인에서 문서화된 import 컴파일하기

### 설정을 먼저, 컴포넌트 출력을 다음에

전체 설정을 불러오는 import는 변수, 함수, 믹스인을 제공하지만, 그 자체로 컴포넌트 CSS를 출력하지는 않습니다. 제공된 번들에서는 그 뒤에 text-input, button, quantity-selector를 불러옵니다. 제공된 플러그인 설정은 Mozaic import 경로를 확인하고 필요한 변환을 실행합니다.

플러그인 패키지에 CLI 실행기가 포함되어 있지 않으므로, 설정에는 PostCSS CLI 실행기가 필요합니다. 프로덕션 환경에서는 MOZAIC_ENV에 따라 플러그인 설정이 달라집니다. 설치 페이지에서는 이제 Node 20+를 요구하고 Dart Sass를 권장합니다. Node Sass를 설명하는 오래된 문구를 deprecated 컴파일러 설치의 근거로 삼지 마세요.

지원 사양 읽기

## Adeo Mozaic 디자인 시스템: 컴포넌트 내부에서 유틸리티 간격을 분리하세요

### 컴포넌트가 레이아웃을 담당하는 곳에는 스케일 값을 사용하세요

Mozaic의 margin 및 padding 유틸리티는 컴포넌트 사이의 간격을 위한 것입니다. 새 컴포넌트 내부에서는 SCSS 매직 유닛 변수를 사용해 컴포넌트가 독립적으로 유지되도록 하세요. 목표 치수를 유지하려면 테두리 크기를 빼야 할 수 있습니다. 예를 들어 calc($mu025 - 1px)을 사용하면 의도한 리듬을 유지할 수 있습니다.

오프라인 예제는 네이티브 Mozaic CSS 실행을 주장하지 않습니다. 문서화된 치수와 수량 구성을 독자적인 색상, CSS 선반 일러스트레이션, 로컬 전용 상호작용으로 해석합니다. 별도의 코드 블록이 실제 라이브러리 클래스와 빌드 연결을 제공합니다.

지원 사양 읽기

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

### 완전한 독립형 인터랙티브 예제

전체 문서를 index.html로 저장하고 브라우저에서 여십시오. Mozaic의 매직 유닛과 medium 수량 컨트롤을 독자적으로 오프라인 해석한 HTML/CSS이며, 네이티브 라이브러리 CSS이 아닌 독자적 일러스트레이션과 애플리케이션 팔레트를 사용합니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Shelf materials planner</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5ef;color:#242920;font:16px/1.5 Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #23682c;outline-offset:4px}header{border-bottom:1px solid #d9ddd1;padding:16px 32px;display:flex;justify-content:space-between;gap:16px}header b{font-size:18px}header span,.note{font-size:14px;color:#5a6154}main{max-width:1056px;margin:auto;padding:32px}h1{font-size:36px;line-height:1.1;letter-spacing:-1px;margin:8px 0 16px}p{margin:0 0 16px}.eyebrow{font-size:12px;letter-spacing:2px;color:#23682c;font-weight:bold}.layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px}.art{background:#e5eadc;border-radius:4px;min-height:350px;display:grid;place-items:center;position:relative;overflow:hidden}.wall{width:78%;height:220px;background:linear-gradient(90deg,transparent 49.6%,#d8dfcf 50%,transparent 50.4%);position:relative}.board{position:absolute;left:0;right:0;top:130px;height:18px;background:repeating-linear-gradient(0deg,#bd9b6e 0 3px,#c6a477 3px 7px);box-shadow:0 10px 12px #26341b20;transform:skewY(-3deg)}.bracket{position:absolute;top:148px;width:12px;height:62px;background:#727867;transform:skewY(-3deg)}.bracket.a{left:15%}.bracket.b{right:15%}.pot{position:absolute;left:23%;top:58px;width:47px;height:72px;background:#c88462;border-radius:3px 3px 15px 15px}.leaf{position:absolute;width:52px;height:34px;background:#3d6e38;left:4px;top:-22px;border-radius:100% 0 100% 0;transform:rotate(-25deg)}.leaf:after{content:'';position:absolute;width:45px;height:30px;background:#638a47;left:20px;top:-15px;border-radius:0 100% 0 100%;transform:rotate(45deg)}.books{position:absolute;top:48px;right:20%;height:80px;display:flex;gap:4px;align-items:end}.books i{width:18px;height:76px;background:#f4efe4;display:block;border-top:6px solid #7f9673}.books i:nth-child(2){height:88px;background:#d3b795}.books i:nth-child(3){height:68px;background:#718268;transform:rotate(-10deg)}.art small{position:absolute;bottom:16px;left:24px;color:#526448}.panel{background:#fff;padding:24px;border:1px solid #d9ddd1;border-radius:4px}h2{font-size:24px;line-height:1.25;margin:0 0 8px}label{display:block;font-weight:bold;margin:24px 0 8px}.quantity{display:flex;max-width:240px;margin-bottom:8px}.quantity button,.quantity input{height:48px;border:1px solid #727a6a;background:#fff}.quantity button{width:48px;color:#23682c;font-size:24px;flex-shrink:0}.quantity button:first-child{border-radius:4px 0 0 4px}.quantity button:last-child{border-radius:0 4px 4px 0}.quantity input{width:96px;min-width:0;border-left:0;border-right:0;text-align:center;appearance:textfield}.quantity input::-webkit-inner-spin-button{appearance:none}button:disabled{color:#a2a69b;background:#f1f2ed;cursor:default}.materials{margin:24px 0;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #d9ddd1;padding:16px 0}.materials strong{font-size:24px;display:block}.materials span{font-size:14px;color:#62695c}.primary{min-height:48px;padding:12px 24px;background:#23682c;color:#fff;border:0;border-radius:4px;width:100%;font-weight:bold}.error{color:#ac2323;margin:8px 0;font-size:14px}.result{margin-top:16px;background:#eaf3e2;padding:16px;border-left:4px solid #23682c}.result:empty{display:none}footer{padding-top:24px;font-size:14px;color:#62695c}@media(max-width:650px){header{padding:16px}header span{max-width:140px}main{padding:24px 16px}h1{font-size:32px}.layout{grid-template-columns:1fr;gap:16px}.art{min-height:260px}.panel{padding:24px}.materials{gap:12px}}
</style><header><b>PROJECT WORKSHOP</b><span>Original Mozaic interpretation</span></header><main><p class="eyebrow">SMALL PROJECT · BIG DIFFERENCE</p><h1>Make room for what matters.</h1><p>Plan a simple shelf arrangement and prepare its sample materials list.</p><div class="layout"><div class="art" role="img" aria-label="Original illustration of a wooden shelf with books and a potted plant"><div class="wall"><div class="board"></div><div class="bracket a"></div><div class="bracket b"></div><div class="pot"><div class="leaf"></div></div><div class="books"><i></i><i></i><i></i></div></div><small>Original shelf illustration</small></div><form class="panel" id="planner" novalidate><h2>Your shelf project</h2><p class="note">Each sample shelf uses one board, two brackets and four screws.</p><label for="quantity">Number of shelves</label><div class="quantity"><button id="minus" type="button" aria-label="Remove one shelf" aria-controls="quantity">−</button><input id="quantity" type="number" min="1" max="12" step="1" required value="2" aria-describedby="hint error"><button id="plus" type="button" aria-label="Add one shelf" aria-controls="quantity">+</button></div><p class="note" id="hint">Choose a whole number from 1 to 12.</p><p class="error" id="error" role="alert"></p><div class="materials" aria-live="polite"><div><strong id="boards">2</strong><span>Boards</span></div><div><strong id="brackets">4</strong><span>Brackets</span></div><div><strong id="screws">8</strong><span>Screws</span></div></div><button type="submit" class="primary">Prepare materials list</button><div id="result" class="result" role="status"></div></form></div><footer>Local interaction example. No order is placed. Sample quantities are illustrative, not structural guidance.</footer></main><script>const input=document.querySelector('#quantity'),minus=document.querySelector('#minus'),plus=document.querySelector('#plus'),error=document.querySelector('#error'),result=document.querySelector('#result');function number(){return input.value.trim()===''?NaN:Number(input.value)}function valid(n){return Number.isInteger(n)&&n>=1&&n<=12}function update(show=false){const n=number(),ok=valid(n);result.textContent='';minus.disabled=ok&&n===1;plus.disabled=ok&&n===12;input.setAttribute('aria-invalid',String(!ok&&show));error.textContent=!ok&&show?'Enter a whole number from 1 to 12.':'';document.querySelector('#boards').textContent=ok?n:'—';document.querySelector('#brackets').textContent=ok?n*2:'—';document.querySelector('#screws').textContent=ok?n*4:'—';return ok}minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update()};plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update()};input.oninput=()=>update();document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`};update();</script></html>
```

코드 참조

- 선반 수량은 주문서가 아니라 자재 목록을 만들어 냅니다. 네이티브 마크업에는 문서화된 Mozaic PostCSS 출력이 필요하며, 이 독립형 문서에는 자체 해석 스타일이 포함되어 있습니다.

### 범위가 제한된 선반 수량과 그에서 산출된 자재 목록

실제 Mozaic 클래스가 네이티브 숫자 입력을 감쌉니다. 독자적인 JavaScript가 정수 검증, 경계값 비활성화, 로컬 전용 요약을 제공합니다.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./mozaic.css"><title>Shelf materials</title>
<main><h1>Plan a shelf project</h1>
<form id="planner" novalidate>
<label for="quantity">Number of shelves</label>
<p id="hint">Choose 1 to 12. Each sample shelf needs two brackets and four screws.</p>
<div class="mc-quantity-selector">
<button type="button" id="minus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left" aria-controls="quantity" aria-label="Remove one shelf">−</button>
<input id="quantity" name="quantity" class="mc-text-input mc-quantity-selector__input" type="number" min="1" max="12" step="1" value="2" required aria-describedby="hint error">
<button type="button" id="plus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right" aria-controls="quantity" aria-label="Add one shelf">+</button>
</div>
<p id="error" role="alert"></p><p id="counts" aria-live="polite"></p>
<button type="submit" class="mc-button">Prepare materials list</button>
<p id="result" role="status"></p></form></main>
<script>
const input=document.querySelector('#quantity'), minus=document.querySelector('#minus'), plus=document.querySelector('#plus');
const error=document.querySelector('#error'), counts=document.querySelector('#counts'), result=document.querySelector('#result');
function number(){return input.value.trim()===''?NaN:Number(input.value);}
function valid(n){return Number.isInteger(n)&&n>=1&&n<=12;}
function update(showError=false){
 const n=number(),ok=valid(n); result.textContent='';
 minus.disabled=ok&&n===1; plus.disabled=ok&&n===12;
 minus.classList.toggle('is-disabled',minus.disabled);plus.classList.toggle('is-disabled',plus.disabled);
 input.setAttribute('aria-invalid',String(!ok&&showError));
 error.textContent=!ok&&showError?'Enter a whole number from 1 to 12.':'';
 counts.textContent=ok?`${n} boards · ${n*2} brackets · ${n*4} screws`:'Enter a quantity to calculate materials.';
 return ok;
}
minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update();};
plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update();};
input.oninput=()=>update();
document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return;}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`;};
update();
</script></html>
```

코드 참조

- 두 개의 스테퍼 버튼은 type="button"을 사용하므로 양식을 제출하지 않습니다.

- 네이티브 min/max/step은 그대로 의미를 가지며, 사용자 정의 검증이 빈 값과 소수점 입력을 처리합니다.

- 수량을 변경하면 이전에 준비된 스냅샷이 무효화됩니다.

## Adeo Mozaic 디자인 시스템 AI 에이전트 설정

### 구현 시작점

문서화된 PostCSS 구성을 사용하는 공개 SCSS 워크플로입니다. HTML 예제는 public/index.html 아래에 저장하십시오. 여기서는 네이티브 패키지 빌드를 실행하지 않았으며, 오프라인 미리보기는 독자적인 해석입니다. 현재 설치 안내는 Dart Sass를 사용하며, 이는 예전 PostCSS 페이지의 Node Sass 표기를 대체합니다.

```
# Node 20+. Use a CommonJS project for this configuration.
npm install @mozaic-ds/styles sass
npm install --save-dev @mozaic-ds/css-dev-tools postcss postcss-cli postcss-scss
# Save the configuration and SCSS below, then build:
npx postcss src/bundle.scss --output public/mozaic.css
# Production build on a POSIX shell:
MOZAIC_ENV=production npx postcss src/bundle.scss --output public/mozaic.css

// postcss.config.js
module.exports = {
  syntax: require('postcss-scss'),
  plugins: require('@mozaic-ds/css-dev-tools/postcssPluginConfig')
};

// src/bundle.scss — settings must precede components.
@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.button';
@import 'components/c.quantity-selector';
```

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

```
settings-tools/all-settings를 사용해 text-input, button, quantity-selector보다 먼저 Mozaic SCSS 구성을 만드십시오. 작은 화면에서는 48px medium 컨트롤을 맞추고, 경계값 버튼은 네이티브로 비활성화하며, 입력된 정수를 검증하고 로컬 전용 요약을 만드십시오. 문서화된 PostCSS 파이프라인을 사용하고 기본 Leroy Merlin 테마와 ADEO 프리셋을 구분하십시오.
```

## Adeo Mozaic 디자인 시스템 출처와 범위

Mozaic에 대한 독자적인 OpenDesign 레퍼런스입니다. 이 샘플은 ADEO나 Leroy Merlin 스토어프런트도, 실제 주문도, 구조적 안내도 아닙니다. 문서 스냅샷마다 버전 표기가 다릅니다.

- 설치 패키지, Node, Dart Sass.

- PostCSS 구성 필수 플러그인 파이프라인.

- SCSS 가져오기 설정 의존성과 가져오기 순서.

- 매직 유닛 실제 간격 단계.

- 본문 스타일 문서화된 단락 크기.

- 버튼 치수와 액션 위계.

- 수량 사용법 반응형 크기와 의도된 용도.

- 수량 코드 BEM 구조와 의존성 가져오기.

- 토큰 사용자 정의 기본 테마와 재정의.

- 간격 유틸리티 유틸리티 클래스와 컴포넌트 간격.

## Adeo Mozaic 디자인 시스템 관련 리소스

### Adobe Spectrum

선택 가능한 크리에이티브 에셋 테이블과 내보내기 프리셋 인스펙터를 통해 React Spectrum v3를 살펴보십시오. Provider 테마와 입력 스케일, 지원되는 스타일 props, 키가 지정된 컬렉션, 그리고 v3와 더 새로운 Spectrum 2 구현 사이의 경계를 이해하십시오.

### Alaska Airlines Auro

실제 시맨틱 색상과 타입 토큰, 클래스 기반 타이포그래피, 네이티브 flight 컴포넌트를 통해 Auro의 Alaska 테마를 살펴보십시오. 두 개의 독자적인 항공편 레코드가 항공사 재고나 예약을 나타내지 않으면서 로컬 필터링과 선택을 보여줍니다.

### Arco Design

Arco의 제어형 Transfer 컴포넌트로 보고서 섹션 선택기를 만드십시오. 실제 간격과 크기 스케일, CSS 변수 규칙, 시맨틱 서피스를 살펴보고, 행을 선택하는 것과 이동하는 것의 차이를 이해하십시오.


- [구현 레퍼런스](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [출처](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [출처](https://mozaic.adeo.cloud/components/buttons/)
- [출처](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [출처](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [출처](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/)
- [출처](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)
- [지원 사양 읽기](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/)
- [지원 사양 읽기](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [지원 사양 읽기](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [지원 사양 읽기](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [지원 사양 읽기](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [지원 사양 읽기](https://mozaic.adeo.cloud/components/buttons/)
- [지원 사양 읽기](https://mozaic.adeo.cloud/get-started/developers/installation/import/)
- [지원 사양 읽기](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)
- [코드 참조](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [코드 참조](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [설치 패키지, Node, Dart Sass.](https://mozaic.adeo.cloud/get-started/developers/installation/)
- [PostCSS 구성 필수 플러그인 파이프라인.](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/)
- [SCSS 가져오기 설정 의존성과 가져오기 순서.](https://mozaic.adeo.cloud/get-started/developers/installation/import/)
- [매직 유닛 실제 간격 단계.](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [본문 스타일 문서화된 단락 크기.](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [버튼 치수와 액션 위계.](https://mozaic.adeo.cloud/components/buttons/)
- [수량 사용법 반응형 크기와 의도된 용도.](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [수량 코드 BEM 구조와 의존성 가져오기.](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [토큰 사용자 정의 기본 테마와 재정의.](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/)
- [간격 유틸리티 유틸리티 클래스와 컴포넌트 간격.](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)