@makitt.io/mds-mcp-server 0.1.3 → 0.2.0

package/dist/data/playbook/array-input.md

@@ -8,25 +8,25 @@
 
 ## 1. 4 패턴 분리
 
-| 패턴 | 사용 시점 | 컴포넌트 |
-|---|---|---|
-| **짧은 동질 배열** (태그 / 카테고리) | item = 단순 string, ≤ 20 개 | `<ChipToggle>` (compounds) |
-| **가변 row sub-form** | item 이 small form (예: variant 가격) | `useFieldArray` + `<Stack>` row + add/remove |
-| **nested entity 다수** (정책 / 결제 옵션) | item 이 큰 form, 별 entity | `useFieldArray` row 요약 + click → **Drawer 편집** |
-| **reorder 가능** | drag handle 으로 순서 변경 | `<Tree>` (compounds) 또는 `useFieldArray` + dnd-kit |
+| 패턴                                      | 사용 시점                             | 컴포넌트                                            |
+| ----------------------------------------- | ------------------------------------- | --------------------------------------------------- |
+| **짧은 동질 배열** (태그 / 카테고리)      | item = 단순 string, ≤ 20 개           | `<ChipToggle>` (compounds)                          |
+| **가변 row sub-form**                     | item 이 small form (예: variant 가격) | `useFieldArray` + `<Stack>` row + add/remove        |
+| **nested entity 다수** (정책 / 결제 옵션) | item 이 큰 form, 별 entity            | `useFieldArray` row 요약 + click → **Drawer 편집**  |
+| **reorder 가능**                          | drag handle 으로 순서 변경            | `<Tree>` (compounds) 또는 `useFieldArray` + dnd-kit |
 
 ---
 
 ## 2. 사용 시점 결정표
 
-| 케이스 | 답 |
-|---|---|
-| "상품 태그 (text chip 다수)" | `<ChipToggle>` (다중 토글) |
-| "주문 항목 (상품 + 수량 + 가격 3 필드 row)" | `useFieldArray` + Stack row + IconButton remove |
+| 케이스                                                         | 답                                                     |
+| -------------------------------------------------------------- | ------------------------------------------------------ |
+| "상품 태그 (text chip 다수)"                                   | `<ChipToggle>` (다중 토글)                             |
+| "주문 항목 (상품 + 수량 + 가격 3 필드 row)"                    | `useFieldArray` + Stack row + IconButton remove        |
 | "변형 (variant: 색 / size / 가격 / 재고 4 필드, 각 row 가 큼)" | `useFieldArray` + 행 요약 + click → Drawer 의 sub-form |
-| "정책 (각 정책이 큰 entity)" | nested drawer-form (overlay.md §7) |
-| "image 다수 + reorder" | `<Tree>` (compounds) 또는 dnd-kit + useFieldArray |
-| "FAQ list (질문/답 row, 다수)" | useFieldArray + Stack + Drawer 의 큰 답변 input |
+| "정책 (각 정책이 큰 entity)"                                   | nested drawer-form (overlay.md §7)                     |
+| "image 다수 + reorder"                                         | `<Tree>` (compounds) 또는 dnd-kit + useFieldArray      |
+| "FAQ list (질문/답 row, 다수)"                                 | useFieldArray + Stack + Drawer 의 큰 답변 input        |
 
 ---
 
@@ -39,7 +39,11 @@
     name="tags"
     control={control}
     render={({ field }) => (
-      <ChipToggle.Group value={field.value} onValueChange={field.onChange} multiple>
+      <ChipToggle.Group
+        value={field.value}
+        onValueChange={field.onChange}
+        multiple
+      >
         <ChipToggle.Item value="new">신상</ChipToggle.Item>
         <ChipToggle.Item value="sale">세일</ChipToggle.Item>
         <ChipToggle.Item value="featured">추천</ChipToggle.Item>
@@ -51,7 +55,8 @@
 
 - 다중 선택 = `multiple` prop
 - 단일 선택 = 그 prop 없음 (default)
-- caller 가 새 chip 추가 불가 (predefined list 만) — 새 추가 = `Combobox` 또는 별도 input
+- caller 가 새 chip 추가 불가 (predefined list 만) — 새 추가 = `Combobox` 또는
+  별도 input
 
 ---
 
@@ -73,11 +78,18 @@ function VariantPriceForm() {
           <Stack key={field.id} direction="row" gap="2" align="center">
             <Field.Root>
               <Field.Label visuallyHidden>이름</Field.Label>
-              <TextField {...register(`variants.${idx}.name`)} placeholder="이름" />
+              <TextField
+                {...register(`variants.${idx}.name`)}
+                placeholder="이름"
+              />
             </Field.Root>
             <Field.Root>
               <Field.Label visuallyHidden>가격</Field.Label>
-              <NumberInput {...register(`variants.${idx}.price`)} step={100} suffix="원" />
+              <NumberInput
+                {...register(`variants.${idx}.price`)}
+                step={100}
+                suffix="원"
+              />
             </Field.Root>
             <IconButton
               aria-label={`${field.name} 삭제`}
@@ -103,21 +115,25 @@ function VariantPriceForm() {
 
 ### Add / Remove UI 표준
 
-| 위치 | 컴포넌트 | 라벨 |
-|---|---|---|
-| Add 버튼 | row 마지막 아래 (또는 위) | `Button variant="ghost" leadingIcon=<PlusIcon>{...}추가` |
-| Remove 버튼 | row 끝 우측 | `IconButton variant="ghost"` + aria-label |
-| 위험 (이미 저장된 entity 삭제) | `Modal.confirm` 확인 후 remove | — |
+| 위치                           | 컴포넌트                       | 라벨                                                     |
+| ------------------------------ | ------------------------------ | -------------------------------------------------------- |
+| Add 버튼                       | row 마지막 아래 (또는 위)      | `Button variant="ghost" leadingIcon=<PlusIcon>{...}추가` |
+| Remove 버튼                    | row 끝 우측                    | `IconButton variant="ghost"` + aria-label                |
+| 위험 (이미 저장된 entity 삭제) | `Modal.confirm` 확인 후 remove | —                                                        |
 
 ---
 
 ## 5. nested entity 다수 — drawer 편집
 
-큰 sub-entity (variant / 정책 / 결제 옵션) — 행 요약 + click → Drawer 의 full form.
+큰 sub-entity (variant / 정책 / 결제 옵션) — 행 요약 + click → Drawer 의 full
+form.
 
 ```tsx
 function PolicyList() {
-  const { fields, append, remove, update } = useFieldArray({ control, name: 'policies' });
+  const { fields, append, remove, update } = useFieldArray({
+    control,
+    name: 'policies',
+  });
   const [editIdx, setEditIdx] = useState<number | null>(null);
 
   return (
@@ -135,21 +151,38 @@ function PolicyList() {
           </Card.Root>
         ))}
       </Stack>
-      <Button variant="ghost" leadingIcon={<PlusIcon />} onClick={() => setEditIdx(fields.length)}>
+      <Button
+        variant="ghost"
+        leadingIcon={<PlusIcon />}
+        onClick={() => setEditIdx(fields.length)}
+      >
         정책 추가
       </Button>
-      <Drawer.Root open={editIdx !== null} onOpenChange={(o) => !o && setEditIdx(null)}>
+      <Drawer.Root
+        open={editIdx !== null}
+        onOpenChange={(o) => !o && setEditIdx(null)}
+      >
         <Drawer.Content side="right">
           <PolicyForm
-            initialValue={editIdx !== null && editIdx < fields.length ? fields[editIdx] : undefined}
+            initialValue={
+              editIdx !== null && editIdx < fields.length
+                ? fields[editIdx]
+                : undefined
+            }
             onSubmit={(data) => {
-              if (editIdx !== null && editIdx < fields.length) update(editIdx, data);
+              if (editIdx !== null && editIdx < fields.length)
+                update(editIdx, data);
               else append(data);
               setEditIdx(null);
             }}
-            onDelete={editIdx !== null && editIdx < fields.length
-              ? () => { remove(editIdx); setEditIdx(null); }
-              : undefined}
+            onDelete={
+              editIdx !== null && editIdx < fields.length
+                ? () => {
+                    remove(editIdx);
+                    setEditIdx(null);
+                  }
+                : undefined
+            }
           />
         </Drawer.Content>
       </Drawer.Root>
@@ -166,12 +199,17 @@ function PolicyList() {
 ## 6. Reorder
 
 mds 의 자체 dnd 없음. 옵션:
+
 - **Tree (compounds)** — Radix 기반 nested reorder
 - **useFieldArray + dnd-kit** — drag handle 의 manual integration
 
 ```tsx
 import { DndContext, closestCenter } from '@dnd-kit/core';
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
 
 function SortableArray() {
   const { fields, move } = useFieldArray({ control, name: 'items' });
@@ -184,7 +222,10 @@ function SortableArray() {
         if (oldIndex !== -1 && newIndex !== -1) move(oldIndex, newIndex);
       }}
     >
-      <SortableContext items={fields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
+      <SortableContext
+        items={fields.map((f) => f.id)}
+        strategy={verticalListSortingStrategy}
+      >
         {fields.map((field, idx) => (
           <SortableRow key={field.id} id={field.id} {...field} />
         ))}
@@ -198,43 +239,46 @@ function SortableArray() {
 
 ## 7. Mobile 변형
 
-| Pattern | Mobile |
-|---|---|
-| ChipToggle | wrap full-width, scroll horizontal if many |
+| Pattern                     | Mobile                                                |
+| --------------------------- | ----------------------------------------------------- |
+| ChipToggle                  | wrap full-width, scroll horizontal if many            |
 | useFieldArray + Stack (row) | `direction="column"` (vertical) + add / remove 그대로 |
-| nested entity (Drawer) | Drawer → bottom Sheet (overlay.md §8) |
-| Reorder (dnd-kit) | touch-friendly drag handle |
+| nested entity (Drawer)      | Drawer → bottom Sheet (overlay.md §8)                 |
+| Reorder (dnd-kit)           | touch-friendly drag handle                            |
 
 ---
 
 ## 8. 안티 패턴
 
-- ❌ **무한 깊은 nested** (drawer 안 drawer 안 drawer) — 2 단 max (메인 form + sub-entity drawer)
+- ❌ **무한 깊은 nested** (drawer 안 drawer 안 drawer) — 2 단 max (메인 form +
+  sub-entity drawer)
 - ❌ **inline edit + drawer 편집 동시** — 한쪽만
 - ❌ **add 버튼이 row 사이** — row 끝에만 (mental scan 깨짐)
 - ❌ **remove 의 confirm 없음** (이미 저장된 entity) — `Modal.confirm`
 - ❌ **0 row 의 empty state 없음** — `<EmptyState size="sm">` 또는 placeholder
-- ❌ **row 의 a11y 없는 reorder** (drag only) — keyboard 도 가능 (dnd-kit 자체 keyboard sensor)
+- ❌ **row 의 a11y 없는 reorder** (drag only) — keyboard 도 가능 (dnd-kit 자체
+  keyboard sensor)
 - ❌ **submit 시 useFieldArray 의 빈 row 도 valid** — Zod schema 의 .min(1) 검증
 
 ---
 
 ## 9. Cross-cutting
 
-| Axis | 적용 |
-|---|---|
-| **Responsive** | row → column (mobile) |
-| **A11y** | each row 의 aria-label / remove button aria-label / dnd-kit keyboard support |
-| **i18n** | "추가" / "삭제" / "변형" 등 모두 `t()` |
-| **Catalog** | useFieldArray 의 standard pattern 자동 catalog |
-| **Validation** | Zod `array().min(N).max(N)` |
+| Axis           | 적용                                                                         |
+| -------------- | ---------------------------------------------------------------------------- |
+| **Responsive** | row → column (mobile)                                                        |
+| **A11y**       | each row 의 aria-label / remove button aria-label / dnd-kit keyboard support |
+| **i18n**       | "추가" / "삭제" / "변형" 등 모두 `t()`                                       |
+| **Catalog**    | useFieldArray 의 standard pattern 자동 catalog                               |
+| **Validation** | Zod `array().min(N).max(N)`                                                  |
 
 ---
 
 ## 10. TBD
 
 1. **dnd-kit mds 통합** — `<SortableArray>` 같은 mds wrapper 컴포넌트 추가
-2. **drawer 안 isDirty confirm** — 메인 form isDirty 와 drawer isDirty 의 통합 처리
+2. **drawer 안 isDirty confirm** — 메인 form isDirty 와 drawer isDirty 의 통합
+   처리
 3. **add 위치** — row 끝 vs row 사이 (행간 + 버튼) 둘 다 허용 vs 표준화
 4. **empty state 표준** — useFieldArray 의 0 row 시 표시 패턴
 5. **Bulk add** — CSV / paste 로 다 row 한 번에 (변형 가격 list 같은)
@@ -246,4 +290,5 @@ function SortableArray() {
 - [form.md](./form.md) — useFieldArray 의 form 안 통합 (Step 4.1)
 - [overlay.md](./overlay.md) — nested drawer 합성 규칙 (Step 4.4)
 - [async-states.md](./async-states.md) — 0 row 의 empty state (Step 4.7)
-- [data-grid.md](./data-grid.md) — DataGrid 의 row 자체가 다른 entity 의 array (Step 4.3)
+- [data-grid.md](./data-grid.md) — DataGrid 의 row 자체가 다른 entity 의 array
+  (Step 4.3)

package/dist/data/playbook/async-states.md

@@ -9,15 +9,16 @@
 
 ## 1. 5 Micro-pattern 분리
 
-| Pattern | 언제 | 컴포넌트 | UX |
-|---|---|---|---|
-| **Page-level loading** | route 진입 시 초기 데이터 fetch (예: `/customers` 진입) | `SkeletonRows` (DataGrid) / `<Skeleton variant="page">` / Next.js `loading.tsx` | shell + sidebar 유지 + content area 만 skeleton |
-| **Section-level loading** | Card / Section 안 일부 데이터 fetch | `<Skeleton>` 내부 fill | 다른 section 은 정상 |
-| **Inline loading** | DataGrid row / Table cell 내부 | `SkeletonRows` (Table.Body 안) | row 자리 차지 + animation |
-| **Action loading** | mutation 진행 중 (button click → 응답 대기) | `<Button loading>` (자체 spinner + 비활성) | 사용자가 누른 button 만 loading |
-| **Background loading** | refetch / polling (사용자가 trigger 안 함) | indicator X 또는 corner toast | 화면 멈춤 X |
+| Pattern                   | 언제                                                    | 컴포넌트                                                                        | UX                                              |
+| ------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------- |
+| **Page-level loading**    | route 진입 시 초기 데이터 fetch (예: `/customers` 진입) | `SkeletonRows` (DataGrid) / `<Skeleton variant="page">` / Next.js `loading.tsx` | shell + sidebar 유지 + content area 만 skeleton |
+| **Section-level loading** | Card / Section 안 일부 데이터 fetch                     | `<Skeleton>` 내부 fill                                                          | 다른 section 은 정상                            |
+| **Inline loading**        | DataGrid row / Table cell 내부                          | `SkeletonRows` (Table.Body 안)                                                  | row 자리 차지 + animation                       |
+| **Action loading**        | mutation 진행 중 (button click → 응답 대기)             | `<Button loading>` (자체 spinner + 비활성)                                      | 사용자가 누른 button 만 loading                 |
+| **Background loading**    | refetch / polling (사용자가 trigger 안 함)              | indicator X 또는 corner toast                                                   | 화면 멈춤 X                                     |
 
 > **핵심 차이** — 사용자 의식 여부.
+>
 > - Page / Section / Inline = 사용자가 보고 있음 → skeleton (예상 layout)
 > - Action = 사용자가 trigger → button loading (응답 대기 명확)
 > - Background = 사용자 모름 → indicator 없음 또는 작게
@@ -26,28 +27,29 @@
 
 ## 2. Error 상태
 
-| 상황 | 컴포넌트 | 위치 |
-|---|---|---|
-| **Page-level error** (route 진입 시 fetch 실패) | `ErrorState` (patterns) — error icon + 메시지 + "다시 시도" 버튼 | content area 전체 |
-| **Section-level error** | `ErrorState size="sm"` 또는 inline error message | Card / Section 안 |
-| **DataGrid 의 error** | `DataGrid errorState` prop — default `ErrorState` 또는 caller override | toolbar 아래 |
-| **Action error** (mutation 실패) | `toast.error("저장 실패", { description: getErrorDisplayMessage(error) })` | global toast |
-| **Form 422** | `Banner` 상단 + `Field.Error` inline (form.md §4 참조) | form 안 |
-| **Field 검증 error** | `Field.Error` slot | input 아래 |
+| 상황                                            | 컴포넌트                                                                   | 위치              |
+| ----------------------------------------------- | -------------------------------------------------------------------------- | ----------------- |
+| **Page-level error** (route 진입 시 fetch 실패) | `ErrorState` (patterns) — error icon + 메시지 + "다시 시도" 버튼           | content area 전체 |
+| **Section-level error**                         | `ErrorState size="sm"` 또는 inline error message                           | Card / Section 안 |
+| **DataGrid 의 error**                           | `DataGrid errorState` prop — default `ErrorState` 또는 caller override     | toolbar 아래      |
+| **Action error** (mutation 실패)                | `toast.error("저장 실패", { description: getErrorDisplayMessage(error) })` | global toast      |
+| **Form 422**                                    | `Banner` 상단 + `Field.Error` inline (form.md §4 참조)                     | form 안           |
+| **Field 검증 error**                            | `Field.Error` slot                                                         | input 아래        |
 
-> **mds 의 `ErrorState`** = `EmptyState variant="error"` 의 wrapper.
-> `error` prop 으로 unknown 받아 자동 description 추출 (`getErrorDisplayMessage` from `@makitt/shared-utils`).
+> **mds 의 `ErrorState`** = `EmptyState variant="error"` 의 wrapper. `error`
+> prop 으로 unknown 받아 자동 description 추출 (`getErrorDisplayMessage` from
+> `@makitt/shared-utils`).
 
 ---
 
 ## 3. Empty 상태
 
-| 상황 | 컴포넌트 | 메시지 패턴 |
-|---|---|---|
-| **첫 사용자** (한 번도 안 만들었음) | `EmptyState variant="onboarding"` | icon + 안내 + primary action ("첫 X 만들기") |
-| **필터 결과 0** | `EmptyState variant="search"` | icon + "검색 결과 없음" + "필터 초기화" |
-| **이전엔 있었지만 지금 0** (예: 모두 삭제) | `EmptyState variant="default"` | icon + 메시지 만 (action 없음 또는 secondary) |
-| **DataGrid empty** | `DataGrid emptyState` prop default — `EmptyState` | toolbar 아래 |
+| 상황                                       | 컴포넌트                                          | 메시지 패턴                                   |
+| ------------------------------------------ | ------------------------------------------------- | --------------------------------------------- |
+| **첫 사용자** (한 번도 안 만들었음)        | `EmptyState variant="onboarding"`                 | icon + 안내 + primary action ("첫 X 만들기")  |
+| **필터 결과 0**                            | `EmptyState variant="search"`                     | icon + "검색 결과 없음" + "필터 초기화"       |
+| **이전엔 있었지만 지금 0** (예: 모두 삭제) | `EmptyState variant="default"`                    | icon + 메시지 만 (action 없음 또는 secondary) |
+| **DataGrid empty**                         | `DataGrid emptyState` prop default — `EmptyState` | toolbar 아래                                  |
 
 ### Empty 의 의도 명확화
 
@@ -59,72 +61,78 @@
 
 ## 4. 결정표 (lookup)
 
-| 케이스 | 답 |
-|---|---|
-| "page 진입 시 list 로딩 중" | `SkeletonRows` (table) / `Skeleton` (page) |
-| "card 안 stat 로딩 중" | `<Skeleton variant="text">` 또는 `<Skeleton variant="rect">` |
-| "button click → mutation 응답 대기" | `<Button loading>` |
-| "background refetch" | indicator 없음 (또는 corner `toast.info("동기화 중")`) |
-| "page 진입 실패 (네트워크)" | `<ErrorState error={err} onRetry={refetch}>` content area |
-| "list 의 검색 결과 0" | `<EmptyState variant="search" action={resetFilters}>` |
-| "고객 한 번도 안 만들었음" | `<EmptyState variant="onboarding" action={createCustomer}>` |
-| "form submit → 422 검증" | `<Banner>` 상단 요약 + `<Field.Error>` 분배 |
-| "form submit → 500 네트워크" | `toast.error(...)` |
-| "mutation success 즉시 toast" | `toast.success(...)` |
+| 케이스                              | 답                                                           |
+| ----------------------------------- | ------------------------------------------------------------ |
+| "page 진입 시 list 로딩 중"         | `SkeletonRows` (table) / `Skeleton` (page)                   |
+| "card 안 stat 로딩 중"              | `<Skeleton variant="text">` 또는 `<Skeleton variant="rect">` |
+| "button click → mutation 응답 대기" | `<Button loading>`                                           |
+| "background refetch"                | indicator 없음 (또는 corner `toast.info("동기화 중")`)       |
+| "page 진입 실패 (네트워크)"         | `<ErrorState error={err} onRetry={refetch}>` content area    |
+| "list 의 검색 결과 0"               | `<EmptyState variant="search" action={resetFilters}>`        |
+| "고객 한 번도 안 만들었음"          | `<EmptyState variant="onboarding" action={createCustomer}>`  |
+| "form submit → 422 검증"            | `<Banner>` 상단 요약 + `<Field.Error>` 분배                  |
+| "form submit → 500 네트워크"        | `toast.error(...)`                                           |
+| "mutation success 즉시 toast"       | `toast.success(...)`                                         |
 
 ---
 
 ## 5. Mobile 변형
 
-| Pattern | Mobile 변형 |
-|---|---|
-| Page-level skeleton | shell sidebar → drawer (Step 4.5 Page Layout) + content full-width skeleton |
-| Section skeleton | 그대로 (vertical stack) |
-| Inline (table row) skeleton | DataGrid → card list (Step 4.3) 의 card skeleton |
-| Action button loading | 그대로 (full-width 가능) |
-| Background | 그대로 |
+| Pattern                     | Mobile 변형                                                                 |
+| --------------------------- | --------------------------------------------------------------------------- |
+| Page-level skeleton         | shell sidebar → drawer (Step 4.5 Page Layout) + content full-width skeleton |
+| Section skeleton            | 그대로 (vertical stack)                                                     |
+| Inline (table row) skeleton | DataGrid → card list (Step 4.3) 의 card skeleton                            |
+| Action button loading       | 그대로 (full-width 가능)                                                    |
+| Background                  | 그대로                                                                      |
 
 ---
 
 ## 6. 안티 패턴
 
-- ❌ **Spinner 사용** (`<Spinner>`) — skeleton 우선. Spinner 는 의도 모호 / placeholder X / 시간 불확실
-- ❌ **Loading 중 화면 깜빡임** — skeleton 의 시간 = 최소 200ms (너무 빨리 사라지면 깜빡임)
+- ❌ **Spinner 사용** (`<Spinner>`) — skeleton 우선. Spinner 는 의도 모호 /
+  placeholder X / 시간 불확실
+- ❌ **Loading 중 화면 깜빡임** — skeleton 의 시간 = 최소 200ms (너무 빨리
+  사라지면 깜빡임)
 - ❌ **Action button loading 외 indicator** (button + 별도 progress bar) — 중복
 - ❌ **Background 의 modal loading** — 사용자 인터럽트
 - ❌ **Empty 의 "다시 시도" 만** — empty != error. `EmptyState` 의 의도 다름
-- ❌ **Error 시 toast 만** — page-level 은 ErrorState content area. toast 는 background / action
-- ❌ **Skeleton 의 정확하지 않은 layout** — skeleton 가 실 content 와 다른 shape → 깜빡임 효과
+- ❌ **Error 시 toast 만** — page-level 은 ErrorState content area. toast 는
+  background / action
+- ❌ **Skeleton 의 정확하지 않은 layout** — skeleton 가 실 content 와 다른 shape
+  → 깜빡임 효과
 
 ---
 
 ## 7. Cross-cutting
 
-| Axis | 적용 |
-|---|---|
-| **Responsive** | 모든 micro-pattern 의 mobile 변형 명시 |
-| **A11y** | Skeleton 의 `aria-busy="true"` + `aria-label="로딩 중"`. ErrorState 의 `role="alert"` |
-| **Telemetry** | error 의 자동 log (Sentry 등) — Step 7 Web Playbook |
-| **i18n** | Error / Empty 메시지 모두 `t()` 통과 |
+| Axis           | 적용                                                                                  |
+| -------------- | ------------------------------------------------------------------------------------- |
+| **Responsive** | 모든 micro-pattern 의 mobile 변형 명시                                                |
+| **A11y**       | Skeleton 의 `aria-busy="true"` + `aria-label="로딩 중"`. ErrorState 의 `role="alert"` |
+| **Telemetry**  | error 의 자동 log (Sentry 등) — Step 7 Web Playbook                                   |
+| **i18n**       | Error / Empty 메시지 모두 `t()` 통과                                                  |
 
 ---
 
 ## 8. 5 Pattern 의 실 사용 예 (apps/web 도메인)
 
-| 페이지 | Pattern 사용 |
-|---|---|
-| `/merchant/customers` (list) | Page (SkeletonRows) + Section (KPI card stat skeleton) + Inline (row sparkline skeleton) + Action (bulk action button) + Background (auto-refresh polling) |
-| `/merchant/products/new` (form) | Section (form 안 reference data fetch skeleton) + Action (Save button) + Form Error (422 → Banner + Field.Error) |
-| `/merchant/orders/[orderId]` (detail) | Page (header + body skeleton) + Action (status change) + Background (poll for refund webhook) |
+| 페이지                                | Pattern 사용                                                                                                                                               |
+| ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `/merchant/customers` (list)          | Page (SkeletonRows) + Section (KPI card stat skeleton) + Inline (row sparkline skeleton) + Action (bulk action button) + Background (auto-refresh polling) |
+| `/merchant/products/new` (form)       | Section (form 안 reference data fetch skeleton) + Action (Save button) + Form Error (422 → Banner + Field.Error)                                           |
+| `/merchant/orders/[orderId]` (detail) | Page (header + body skeleton) + Action (status change) + Background (poll for refund webhook)                                                              |
 
 ---
 
 ## 9. TBD — 사용자 합의 대기
 
-1. **Spinner 사용 정책** — 완전 금지 vs 특수 case (예: button 안 inline, 또는 background corner indicator)
+1. **Spinner 사용 정책** — 완전 금지 vs 특수 case (예: button 안 inline, 또는
+   background corner indicator)
 2. **Skeleton 의 최소 표시 시간** — 200ms 깜빡임 방지. 정확 ms 결정
 3. **Background refetch indicator** — 완전 silent vs corner toast / progress bar
-4. **Empty 의 자동 onboarding 감지** — first-time user 판단 방법 (서버 flag / localStorage / row 0 시 모두 onboarding)
+4. **Empty 의 자동 onboarding 감지** — first-time user 판단 방법 (서버 flag /
+   localStorage / row 0 시 모두 onboarding)
 5. **Polling interval** — 표준 ms (예: 30s) 또는 page 마다 다름
 
 ---
@@ -133,5 +141,7 @@
 
 - [form.md](./form.md) — Form 의 검증 / 저장 / submit 흐름 (Step 4.1)
 - [feedback.md](./feedback.md) — Toast / Notification 의 일시 vs 영속 (Step 4.2)
-- [data-grid.md](./data-grid.md) — DataGrid 의 loading/error/empty state prop (Step 4.3)
-- [page-layout.md](./page-layout.md) — Page-level skeleton 의 shell 위치 (Step 4.5)
+- [data-grid.md](./data-grid.md) — DataGrid 의 loading/error/empty state prop
+  (Step 4.3)
+- [page-layout.md](./page-layout.md) — Page-level skeleton 의 shell 위치 (Step
+  4.5)