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

package/dist/data/playbook/overlay.md

@@ -1,95 +1,96 @@
 # MDS Playbook — Overlay (Modal / Drawer / Sheet / Dialog / Popover)
 
-화면 위 떠다니는 컨테이너 의 선택 표.
+화면 위 떠다니는 컨테이너 선택 가이드.
 
-> mds 의 overlay 군 — **Modal / Drawer / Sheet / Dialog / Popover** 5종.
-> 각자 의도 분명. 헷갈리면 잘못된 mental model.
+> mds 의 overlay 군 — **Modal / Drawer / Sheet / Dialog / Popover** 5종. 각자
+> 의도 분명. 헷갈리면 잘못된 mental model.
 
 ---
 
 ## 1. 5 Overlay 의도 분리
 
-| Overlay | 의도 | mental model | 사용 예 |
-|---|---|---|---|
-| **Modal** | **메인 작업 중단 + 작은 sub-task** (form 입력, 확인) | 페이지 위 작은 창 | 회원 생성, 쿠폰 발급, 설정 변경 |
-| **Drawer** | **목록 컨텍스트 유지 + side-by-side 편집** | 메인 옆 슬라이드 | 주문 행 클릭 → drawer 에서 상세, variant 편집 |
-| **Sheet** | **모바일 bottom 시트** (mobile-friendly drawer) | 아래에서 올라오는 시트 | 모바일 의 모든 overlay (Modal / Drawer auto 변환) |
-| **Dialog** | **확인 / 알림 / prompt** (form 아님, action 만) | 짧은 결정 강제 | "정말 삭제?", "환불 처리하시겠습니까?" |
-| **Popover** | **inline 부가 정보 / 작은 picker** | trigger 옆 floating | DatePicker, ColorPicker, dropdown menu |
+| Overlay     | 의도                                                 | mental model           | 사용 예                                           |
+| ----------- | ---------------------------------------------------- | ---------------------- | ------------------------------------------------- |
+| **Modal**   | **메인 작업 중단 + 작은 sub-task** (form 입력, 확인) | 페이지 위 작은 창      | 회원 생성, 쿠폰 발급, 설정 변경                   |
+| **Drawer**  | **목록 컨텍스트 유지 + side-by-side 편집**           | 메인 옆 슬라이드       | 주문 행 클릭 → drawer 에서 상세, variant 편집     |
+| **Sheet**   | **모바일 bottom 시트** (mobile-friendly drawer)      | 아래에서 올라오는 시트 | 모바일 의 모든 overlay (Modal / Drawer auto 변환) |
+| **Dialog**  | **확인 / 알림 / prompt** (form 아님, action 만)      | 짧은 결정 강제         | "정말 삭제?", "환불 처리하시겠습니까?"            |
+| **Popover** | **inline 부가 정보 / 작은 picker**                   | trigger 옆 floating    | DatePicker, ColorPicker, dropdown menu            |
 
 ### 결정 기준
 
-| 의도 | overlay |
-|---|---|
-| Form 입력 필요 (sub-entity 생성 / 수정) | Modal (페이지 작업 X) 또는 Drawer (목록 컨텍스트 유지) |
-| 확인 / 경고 / 짧은 prompt | Dialog (`Modal.confirm` / `Modal.alert` / `Modal.prompt`) |
-| 목록 + 행 클릭 → 상세 | Drawer |
-| 모바일 first | Sheet |
-| inline trigger 옆 작은 UI | Popover |
+| 의도                                    | overlay                                                   |
+| --------------------------------------- | --------------------------------------------------------- |
+| Form 입력 필요 (sub-entity 생성 / 수정) | Modal (페이지 작업 X) 또는 Drawer (목록 컨텍스트 유지)    |
+| 확인 / 경고 / 짧은 prompt               | Dialog (`Modal.confirm` / `Modal.alert` / `Modal.prompt`) |
+| 목록 + 행 클릭 → 상세                   | Drawer                                                    |
+| 모바일 first                            | Sheet                                                     |
+| inline trigger 옆 작은 UI               | Popover                                                   |
 
 ---
 
 ## 2. 선택 표 (lookup)
 
-| 케이스 | 답 |
-|---|---|
-| "고객 새로 만들기 from 페이지" | Modal (sub-task) |
-| "고객 행 클릭 → 상세 편집" | Drawer (목록 컨텍스트 유지) |
-| "정말 삭제?" | `Modal.confirm` (Dialog) |
-| "환불 처리하시겠습니까?" + 사유 입력 | `Modal.prompt` (Dialog with input) |
-| "라이선스 만료 임박" 영속 알림 | Banner (Step 4.2 feedback) — Modal 아님 |
-| "DatePicker / TimePicker" | Popover (자체 컴포넌트가 사용) |
-| "DropdownMenu" | Popover (Menu.* 사용) |
-| "큰 form (상품 등록)" | page-form (overlay 아님) |
-| "모바일 의 form" | Sheet 또는 full-screen page-form |
-| "Variant 추가 in 상품 등록 form" | nested Drawer (modal 안 modal 금지) |
+| 케이스                               | 답                                      |
+| ------------------------------------ | --------------------------------------- |
+| "고객 새로 만들기 from 페이지"       | Modal (sub-task)                        |
+| "고객 행 클릭 → 상세 편집"           | Drawer (목록 컨텍스트 유지)             |
+| "정말 삭제?"                         | `Modal.confirm` (Dialog)                |
+| "환불 처리하시겠습니까?" + 사유 입력 | `Modal.prompt` (Dialog with input)      |
+| "라이선스 만료 임박" 영속 알림       | Banner (Step 4.2 feedback) — Modal 아님 |
+| "DatePicker / TimePicker"            | Popover (자체 컴포넌트가 사용)          |
+| "DropdownMenu"                       | Popover (Menu.\* 사용)                  |
+| "큰 form (상품 등록)"                | page-form (overlay 아님)                |
+| "모바일 의 form"                     | Sheet 또는 full-screen page-form        |
+| "Variant 추가 in 상품 등록 form"     | nested Drawer (modal 안 modal 금지)     |
 
 ---
 
 ## 3. Modal — sub-task 표준
 
-| Slot | mds 컴포넌트 |
-|---|---|
-| Trigger | imperative API (`Modal.open(...)`) — overlay 가 stack-managed |
-| Root | `Modal.Root` (Radix Dialog 의 wrapper) |
-| Overlay (backdrop) | `Modal.Overlay` (자동) |
-| Container | `Modal.Content` (centered, size variant) |
-| Header | `Modal.Header` (title + close button) |
-| Body | `Modal.Body` |
-| Footer | `Modal.Footer` (cancel + confirm primary, 우측 정렬) |
+| Slot               | mds 컴포넌트                                                  |
+| ------------------ | ------------------------------------------------------------- |
+| Trigger            | imperative API (`Modal.open(...)`) — overlay 가 stack-managed |
+| Root               | `Modal.Root` (Radix Dialog 의 wrapper)                        |
+| Overlay (backdrop) | `Modal.Overlay` (자동)                                        |
+| Container          | `Modal.Content` (centered, size variant)                      |
+| Header             | `Modal.Header` (title + close button)                         |
+| Body               | `Modal.Body`                                                  |
+| Footer             | `Modal.Footer` (cancel + confirm primary, 우측 정렬)          |
 
 ### Size variant
 
-| Size | Width | 사용 |
-|---|---|---|
-| xs | 320px | 짧은 confirm dialog |
-| sm | 400px | 단순 form (3-5 필드) |
-| md (default) | 480px | 기본 form |
-| lg | 640px | 복잡 form / 데이터 list |
-| xl | 800px | 대형 (편집기 / 설정 다단) |
+| Size         | Width | 사용                      |
+| ------------ | ----- | ------------------------- |
+| xs           | 320px | 짧은 confirm dialog       |
+| sm           | 400px | 단순 form (3-5 필드)      |
+| md (default) | 480px | 기본 form                 |
+| lg           | 640px | 복잡 form / 데이터 list   |
+| xl           | 800px | 대형 (편집기 / 설정 다단) |
 
-> Mobile 변형 — md 이상 = full-screen Sheet (자동 변환 — Step 3.4 의 useBreakpoint 활용)
+> Mobile 변형 — md 이상 = full-screen Sheet (자동 변환 — Step 3.4 의
+> useBreakpoint 활용)
 
 ---
 
 ## 4. Drawer — 목록 컨텍스트 표준
 
-| Slot | mds 컴포넌트 |
-|---|---|
-| Trigger | row click handler (의도된 사용) |
-| Root | `Drawer.Root` |
-| Container | `Drawer.Content` (side variant) |
-| Header | `Drawer.Header` (title + close) |
-| Body | `Drawer.Body` (scroll) |
-| Footer | `Drawer.Footer` (action — Modal 과 동일 패턴) |
+| Slot      | mds 컴포넌트                                  |
+| --------- | --------------------------------------------- |
+| Trigger   | row click handler (의도된 사용)               |
+| Root      | `Drawer.Root`                                 |
+| Container | `Drawer.Content` (side variant)               |
+| Header    | `Drawer.Header` (title + close)               |
+| Body      | `Drawer.Body` (scroll)                        |
+| Footer    | `Drawer.Footer` (action — Modal 과 동일 패턴) |
 
 ### Side variant
 
-| Side | 사용 | Default size |
-|---|---|---|
-| right (default) | 메인 옆 슬라이드 in (가장 일반) | 480px (--size-drawer-default-horizontal) |
-| left | 별 사용 안 함 (sidebar 와 헷갈림) | 480px |
-| top / bottom | 모바일 bottom Sheet / 알림 | 320px (--size-drawer-default-vertical) |
+| Side            | 사용                              | Default size                             |
+| --------------- | --------------------------------- | ---------------------------------------- |
+| right (default) | 메인 옆 슬라이드 in (가장 일반)   | 480px (--size-drawer-default-horizontal) |
+| left            | 별 사용 안 함 (sidebar 와 헷갈림) | 480px                                    |
+| top / bottom    | 모바일 bottom Sheet / 알림        | 320px (--size-drawer-default-vertical)   |
 
 ### Drawer vs Modal 결정
 
@@ -127,17 +128,18 @@ const reason = await Modal.prompt({
 });
 ```
 
-> mds 의 ConfirmDialog / AlertDialog / PromptDialog — `imperative API` (forwardRef-required 룰 예외).
+> mds 의 ConfirmDialog / AlertDialog / PromptDialog — `imperative API`
+> (forwardRef-required 룰 예외).
 
 ---
 
 ## 6. Popover — inline floating
 
-| Slot | mds 컴포넌트 |
-|---|---|
+| Slot    | mds 컴포넌트                                   |
+| ------- | ---------------------------------------------- |
 | Trigger | `Popover.Trigger` (자체 컴포넌트 또는 asChild) |
-| Content | `Popover.Content` (자동 positioning by Radix) |
-| Arrow | `Popover.Arrow` (선택) |
+| Content | `Popover.Content` (자동 positioning by Radix)  |
+| Arrow   | `Popover.Arrow` (선택)                         |
 
 ### Popover vs Modal
 
@@ -150,33 +152,35 @@ const reason = await Modal.prompt({
 
 ### 허용 합성
 
-| 합성 | 사용 |
-|---|---|
-| Modal 안 Form | sub-task 의 form (modal-form) |
-| Drawer 안 Form | 목록 옆 편집 (drawer-form) |
-| Modal 안 Popover | DatePicker / DropdownMenu 가 modal 안 ok |
-| Drawer 안 Popover | 동일 |
+| 합성              | 사용                                                         |
+| ----------------- | ------------------------------------------------------------ |
+| Modal 안 Form     | sub-task 의 form (modal-form)                                |
+| Drawer 안 Form    | 목록 옆 편집 (drawer-form)                                   |
+| Modal 안 Popover  | DatePicker / DropdownMenu 가 modal 안 ok                     |
+| Drawer 안 Popover | 동일                                                         |
 | **nested Drawer** | 메인 form (page or drawer) 안 sub-entity 편집 (variant 추가) |
 
 ### 절대 금지
 
 - ❌ **Modal 안 Modal** — 3단 mental stack. drawer 또는 페이지 이동
 - ❌ **Drawer 안 Drawer** — 동일 이유
-- ❌ **Modal 안 Drawer** / **Drawer 안 Modal** — sub-overlay 의 layer / focus 충돌
-- ❌ **Popover 안 Popover** — Radix Popover Root 의 자식이 또 다른 Popover (auto-position 충돌)
+- ❌ **Modal 안 Drawer** / **Drawer 안 Modal** — sub-overlay 의 layer / focus
+  충돌
+- ❌ **Popover 안 Popover** — Radix Popover Root 의 자식이 또 다른 Popover
+  (auto-position 충돌)
 
 ---
 
 ## 8. Mobile 변형
 
-| Desktop | Mobile (< md) |
-|---|---|
-| Modal (xs / sm) | 그대로 (작아서 모바일 OK) |
-| Modal (md+) | full-screen Sheet 또는 그대로 |
+| Desktop               | Mobile (< md)                  |
+| --------------------- | ------------------------------ |
+| Modal (xs / sm)       | 그대로 (작아서 모바일 OK)      |
+| Modal (md+)           | full-screen Sheet 또는 그대로  |
 | Drawer (right / left) | bottom Sheet (`side="bottom"`) |
-| Sheet | 그대로 |
-| Dialog | 그대로 |
-| Popover | 그대로 (자체 positioning) |
+| Sheet                 | 그대로                         |
+| Dialog                | 그대로                         |
+| Popover               | 그대로 (자체 positioning)      |
 
 > Mobile 변환 mechanism — `useIsBreakpointUp('md')` hook 으로 caller 가 명시.
 > 자동 변환 — mds 의 SheetAdapter 추가 (TBD).
@@ -186,7 +190,8 @@ const reason = await Modal.prompt({
 ## 9. 안티 패턴
 
 - ❌ Modal 안 Modal (nested form 강제)
-- ❌ Dialog (`Modal.confirm`) 안 form (input multiple) — `Modal.prompt` 또는 form Modal 사용
+- ❌ Dialog (`Modal.confirm`) 안 form (input multiple) — `Modal.prompt` 또는
+  form Modal 사용
 - ❌ Popover 안 큰 form — Popover 의 의도 (작은 inline) 아님
 - ❌ Drawer 의 width 변경 (사용자 resize 가능) — caller 가 fix size
 - ❌ Modal close 시 force confirmation 없음 — `isDirty` 시 confirm
@@ -196,20 +201,22 @@ const reason = await Modal.prompt({
 
 ## 10. Cross-cutting
 
-| Axis | 적용 |
-|---|---|
-| **Responsive** | useIsBreakpointUp + side 변환 |
-| **A11y** | Radix Dialog 기반 — focus trap / aria / esc 자동 |
+| Axis               | 적용                                                                    |
+| ------------------ | ----------------------------------------------------------------------- |
+| **Responsive**     | useIsBreakpointUp + side 변환                                           |
+| **A11y**           | Radix Dialog 기반 — focus trap / aria / esc 자동                        |
 | **Imperative API** | Modal.confirm / Modal.open — overlay stack 관리 (caller 가 ref 안 받음) |
-| **Telemetry** | overlay 의 open/close 추적 (Step 7) |
+| **Telemetry**      | overlay 의 open/close 추적 (Step 7)                                     |
 
 ---
 
 ## 11. TBD
 
-1. **SheetAdapter 자동 변환** — `<Modal>` 가 mobile 에서 `<Sheet>` 자동 변환 컴포넌트 추가 여부
+1. **SheetAdapter 자동 변환** — `<Modal>` 가 mobile 에서 `<Sheet>` 자동 변환
+   컴포넌트 추가 여부
 2. **isDirty 감지** — form 안 dirty 자동 confirm dialog (RHF 의 isDirty 의존)
-3. **Modal stacking** 최대 depth — 1 default, 2 까지 허용? (현재 nested Drawer 만)
+3. **Modal stacking** 최대 depth — 1 default, 2 까지 허용? (현재 nested Drawer
+   만)
 4. **Drawer resize handle** — 사용자 resize 가능 vs caller fix
 5. **Sheet 의 default snap point** — 30% / 60% / 100% (Vaul 같은 패턴)
 
@@ -218,5 +225,7 @@ const reason = await Modal.prompt({
 ## Related Playbooks
 
 - [form.md](./form.md) — Modal-form / Drawer-form / nested-drawer (Step 4.1)
-- [feedback.md](./feedback.md) — Toast / Notification / Banner / Modal Dialog (Step 4.2)
-- [page-layout.md](./page-layout.md) — Page Shell / Sidebar 와 overlay 관계 (Step 4.5)
+- [feedback.md](./feedback.md) — Toast / Notification / Banner / Modal Dialog
+  (Step 4.2)
+- [page-layout.md](./page-layout.md) — Page Shell / Sidebar 와 overlay 관계
+  (Step 4.5)

package/dist/data/playbook/page-layout.md

@@ -1,8 +1,9 @@
 # MDS Playbook — Page Layout (Shell / Sidebar / PageHeader / padding / max-width)
 
-페이지 의 layout 약속.
+페이지 layout 에 대한 약속.
 
-> 모든 셀러 admin 페이지가 **같은 layout structure** 따라야 균일. mds 의 shells 활용.
+> 모든 셀러 admin 페이지가 **같은 layout structure** 따라야 균일. mds 의 shells
+> 활용.
 
 ---
 
@@ -20,14 +21,14 @@
 </AppShell>
 ```
 
-| Shell 컴포넌트 | 역할 | 위치 |
-|---|---|---|
-| `AppShell` | top-level wrapper (Sidebar + Page) | route layout (Next.js) |
-| `Sidebar` | nav menu (sticky left) | desktop left, mobile drawer |
-| `Topbar` (선택) | global header (logo / user / breadcrumb) | top sticky |
-| `Page` | content area | sidebar 우측 |
-| `PageHeader` | title + breadcrumb + actions | content 상단 |
-| `Section` (선택) | content 안 의미 단위 분할 | Page 안 |
+| Shell 컴포넌트   | 역할                                     | 위치                        |
+| ---------------- | ---------------------------------------- | --------------------------- |
+| `AppShell`       | top-level wrapper (Sidebar + Page)       | route layout (Next.js)      |
+| `Sidebar`        | nav menu (sticky left)                   | desktop left, mobile drawer |
+| `Topbar` (선택)  | global header (logo / user / breadcrumb) | top sticky                  |
+| `Page`           | content area                             | sidebar 우측                |
+| `PageHeader`     | title + breadcrumb + actions             | content 상단                |
+| `Section` (선택) | content 안 의미 단위 분할                | Page 안                     |
 
 ---
 
@@ -35,19 +36,21 @@
 
 ### 결정 표
 
-| 페이지 종류 | max-width | 이유 |
-|---|---|---|
-| **DataGrid list 페이지** (customers / orders) | **full-bleed** (max-width X) | table 의 column 다 보임. 큰 모니터에서 더 좋음 |
-| **단순 form 페이지** (회원가입 / 단일 entity) | **640px** (modal-sm 와 같음) | 가독성 (긴 가로 input 어색) |
-| **복잡 form 페이지** (상품 등록 — Section + AnchorNav) | **content 자체 max-width X**, AnchorNav 좌측 + form 우측 (둘 다 fill) | 큰 form 은 넓은 공간 활용 |
-| **분석 / dashboard** (KPI + chart) | **full-bleed** | grid layout 의 cols 활용 |
-| **정보 페이지** (about / docs / blog) | **800-960px** | 글 가독성 |
+| 페이지 종류                                            | max-width                                                             | 이유                                           |
+| ------------------------------------------------------ | --------------------------------------------------------------------- | ---------------------------------------------- |
+| **DataGrid list 페이지** (customers / orders)          | **full-bleed** (max-width X)                                          | table 의 column 다 보임. 큰 모니터에서 더 좋음 |
+| **단순 form 페이지** (회원가입 / 단일 entity)          | **640px** (modal-sm 와 같음)                                          | 가독성 (긴 가로 input 어색)                    |
+| **복잡 form 페이지** (상품 등록 — Section + AnchorNav) | **content 자체 max-width X**, AnchorNav 좌측 + form 우측 (둘 다 fill) | 큰 form 은 넓은 공간 활용                      |
+| **분석 / dashboard** (KPI + chart)                     | **full-bleed**                                                        | grid layout 의 cols 활용                       |
+| **정보 페이지** (about / docs / blog)                  | **800-960px**                                                         | 글 가독성                                      |
 
 → **default = full-bleed**. 가독성 필요한 경우 (form / 정보) 만 max-width.
 
 ### 이전 발견 (apps/web 의 max-width 답답함)
 
-기존 apps/web 의 content 가 `max-w-7xl` (1280px) 같은 작은 fix → 1920px+ 모니터에서 양쪽 빔. **수정 필요**:
+기존 apps/web 의 content 가 `max-w-7xl` (1280px) 같은 작은 fix → 1920px+
+모니터에서 양쪽 빔. **수정 필요**:
+
 - DataGrid 페이지 → full-bleed
 - form 페이지 → 명시적 max-width (640 or 800)
 
@@ -55,25 +58,26 @@
 
 ## 3. Padding 표준
 
-| Level | Padding token | 사용 |
-|---|---|---|
-| Page (content area 의 outer) | `var(--space-6)` ~ `var(--space-8)` (24~32px) | desktop |
-| Page (mobile) | `var(--space-4)` (16px) | mobile |
-| Section gap | `var(--section-gap)` (theme 별 — admin-light = 48px) | section 사이 |
-| Card padding | `var(--space-4)` (16px) — default | Card 안 |
-| Form 안 row gap | `var(--space-3)` (12px) | field 사이 |
+| Level                        | Padding token                                        | 사용         |
+| ---------------------------- | ---------------------------------------------------- | ------------ |
+| Page (content area 의 outer) | `var(--space-6)` ~ `var(--space-8)` (24~32px)        | desktop      |
+| Page (mobile)                | `var(--space-4)` (16px)                              | mobile       |
+| Section gap                  | `var(--section-gap)` (theme 별 — admin-light = 48px) | section 사이 |
+| Card padding                 | `var(--space-4)` (16px) — default                    | Card 안      |
+| Form 안 row gap              | `var(--space-3)` (12px)                              | field 사이   |
 
-> Padding 의 mobile 자동 — Page shell 의 prop 또는 SCSS `@media (max-width: 768px)` 분기.
+> Padding 의 mobile 자동 — Page shell 의 prop 또는 SCSS
+> `@media (max-width: 768px)` 분기.
 
 ---
 
 ## 4. Sidebar — desktop vs mobile
 
-| State | Desktop | Mobile |
-|---|---|---|
-| 항상 표시 | `Sidebar` (sticky left) | drawer (top trigger 의 hamburger menu) |
-| Collapsed (icon only) | `Sidebar collapsed` | drawer + 그대로 |
-| Active route | `Sidebar.SubItem` 의 `data-active="true"` (Sidebar.subItemActive style) | drawer 안 동일 |
+| State                 | Desktop                                                                 | Mobile                                 |
+| --------------------- | ----------------------------------------------------------------------- | -------------------------------------- |
+| 항상 표시             | `Sidebar` (sticky left)                                                 | drawer (top trigger 의 hamburger menu) |
+| Collapsed (icon only) | `Sidebar collapsed`                                                     | drawer + 그대로                        |
+| Active route          | `Sidebar.SubItem` 의 `data-active="true"` (Sidebar.subItemActive style) | drawer 안 동일                         |
 
 > Mobile 변환 — `useIsBreakpointUp('lg')` (1024px) — 그 미만 = drawer.
 
@@ -95,15 +99,16 @@
 />
 ```
 
-| Slot | 사용 |
-|---|---|
-| `title` | h1 — 페이지 이름 |
-| `description` | 부제 (optional) |
-| `breadcrumb` | 위치 (홈 → category → 현 페이지) |
-| `actions` | 우측 primary / secondary buttons (예: "+ 새 주문") |
-| `tabs` | (선택) 페이지 안 sub-section 탭 |
+| Slot          | 사용                                               |
+| ------------- | -------------------------------------------------- |
+| `title`       | h1 — 페이지 이름                                   |
+| `description` | 부제 (optional)                                    |
+| `breadcrumb`  | 위치 (홈 → category → 현 페이지)                   |
+| `actions`     | 우측 primary / secondary buttons (예: "+ 새 주문") |
+| `tabs`        | (선택) 페이지 안 sub-section 탭                    |
 
-> PageHeader 의 actions = **페이지 단위 primary action**. row-level action 은 DataGrid 의 column action.
+> PageHeader 의 actions = **페이지 단위 primary action**. row-level action 은
+> DataGrid 의 column action.
 
 ---
 
@@ -119,15 +124,25 @@
 ```tsx
 <Page>
   <PageHeader title="상품 등록" actions={<Button>저장</Button>} />
-  <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 'var(--space-6)' }}>
+  <div
+    style={{
+      display: 'grid',
+      gridTemplateColumns: '200px 1fr',
+      gap: 'var(--space-6)',
+    }}
+  >
     <AnchorNav sticky>
       <AnchorNav.Item href="#basic">기본 정보</AnchorNav.Item>
       <AnchorNav.Item href="#images">이미지</AnchorNav.Item>
       {/* ... */}
     </AnchorNav>
     <div>
-      <Section id="basic" title="기본 정보">...</Section>
-      <Section id="images" title="이미지">...</Section>
+      <Section id="basic" title="기본 정보">
+        ...
+      </Section>
+      <Section id="images" title="이미지">
+        ...
+      </Section>
       {/* ... */}
     </div>
   </div>
@@ -140,38 +155,40 @@
 
 ## 7. 결정 표 (lookup)
 
-| 케이스 | 답 |
-|---|---|
-| "list 페이지 (DataGrid)" | full-bleed AppShell + PageHeader + DataGrid |
-| "단일 entity form" | AppShell + PageHeader + max-width 640 form |
-| "큰 form (상품 등록)" | AppShell + PageHeader + Section/AnchorNav layout |
-| "dashboard (KPI + chart)" | full-bleed AppShell + Grid cols=4 (KPI) + Grid cols=2 (chart) |
-| "단순 정보 페이지" | AppShell + max-width 800 + body text |
-| "mobile" | Sidebar → drawer (`useIsBreakpointUp('lg')`) + Page padding 축소 |
-| "settings 페이지 (다 section)" | AppShell + PageHeader + Section/AnchorNav (left nav) |
-| "page 안 sub-page tabs" | PageHeader 의 `tabs` slot |
+| 케이스                         | 답                                                               |
+| ------------------------------ | ---------------------------------------------------------------- |
+| "list 페이지 (DataGrid)"       | full-bleed AppShell + PageHeader + DataGrid                      |
+| "단일 entity form"             | AppShell + PageHeader + max-width 640 form                       |
+| "큰 form (상품 등록)"          | AppShell + PageHeader + Section/AnchorNav layout                 |
+| "dashboard (KPI + chart)"      | full-bleed AppShell + Grid cols=4 (KPI) + Grid cols=2 (chart)    |
+| "단순 정보 페이지"             | AppShell + max-width 800 + body text                             |
+| "mobile"                       | Sidebar → drawer (`useIsBreakpointUp('lg')`) + Page padding 축소 |
+| "settings 페이지 (다 section)" | AppShell + PageHeader + Section/AnchorNav (left nav)             |
+| "page 안 sub-page tabs"        | PageHeader 의 `tabs` slot                                        |
 
 ---
 
 ## 8. Mobile 변형
 
-| Desktop | Mobile (< lg) |
-|---|---|
-| Sidebar (left sticky) | Drawer (top trigger의 hamburger) |
-| Page padding (24-32px) | Page padding 16px |
-| Section/AnchorNav (2-col) | Section only + AnchorNav drawer |
-| DataGrid (table) | Card list (data-grid.md §3) |
-| PageHeader (1줄) | PageHeader (vertical stack — title / breadcrumb / actions 분리) |
-| max-width 640 form | full-width form |
+| Desktop                   | Mobile (< lg)                                                   |
+| ------------------------- | --------------------------------------------------------------- |
+| Sidebar (left sticky)     | Drawer (top trigger의 hamburger)                                |
+| Page padding (24-32px)    | Page padding 16px                                               |
+| Section/AnchorNav (2-col) | Section only + AnchorNav drawer                                 |
+| DataGrid (table)          | Card list (data-grid.md §3)                                     |
+| PageHeader (1줄)          | PageHeader (vertical stack — title / breadcrumb / actions 분리) |
+| max-width 640 form        | full-width form                                                 |
 
 ---
 
 ## 9. 안티 패턴
 
-- ❌ **Page 마다 다른 layout** (사용자 mental model 깨짐) — 모든 페이지 같은 AppShell + PageHeader
+- ❌ **Page 마다 다른 layout** (사용자 mental model 깨짐) — 모든 페이지 같은
+  AppShell + PageHeader
 - ❌ **DataGrid 페이지에 max-width** — content 가 자연스럽지 못함. full-bleed
 - ❌ **form 페이지에 max-width 없음** — 1920px 의 가로 input 한 줄 어색
-- ❌ **PageHeader 의 actions 가 row-level** (예: row 의 "edit" 버튼) — DataGrid column action
+- ❌ **PageHeader 의 actions 가 row-level** (예: row 의 "edit" 버튼) — DataGrid
+  column action
 - ❌ **Sidebar 안 sub-Item 3 단계 이상** — 깊이 제한 (mental load)
 - ❌ **section 사이 gap 의 hardcoded px** — `var(--section-gap)` 사용
 - ❌ **page padding 의 hardcoded** — `var(--space-*)` token
@@ -181,36 +198,38 @@
 
 ## 10. Cross-cutting
 
-| Axis | 적용 |
-|---|---|
+| Axis           | 적용                                                                            |
+| -------------- | ------------------------------------------------------------------------------- |
 | **Responsive** | Sidebar → drawer / padding 축소 / Section/AnchorNav 변환 / DataGrid → card list |
-| **A11y** | Sidebar `<nav>` semantic / PageHeader `<h1>` / Breadcrumb aria-label |
-| **i18n** | nav label / title / breadcrumb 모두 `t()` |
-| **Permission** | Sidebar.Item 의 권한별 hide (Step 7 Web Playbook) |
-| **Telemetry** | nav click / page view 자동 log (Step 7) |
+| **A11y**       | Sidebar `<nav>` semantic / PageHeader `<h1>` / Breadcrumb aria-label            |
+| **i18n**       | nav label / title / breadcrumb 모두 `t()`                                       |
+| **Permission** | Sidebar.Item 의 권한별 hide (Step 7 Web Playbook)                               |
+| **Telemetry**  | nav click / page view 자동 log (Step 7)                                         |
 
 ---
 
 ## 11. apps/web 의 실 사용 (Step 7 Web Playbook 의 baseline)
 
-| Route | Layout |
-|---|---|
-| `/merchant/customers`, `/merchant/orders` etc. | AppShell + PageHeader + DataGrid (full-bleed) |
-| `/merchant/products/new`, `/merchant/products/[id]` | AppShell + PageHeader + Section/AnchorNav (큰 form) |
-| `/merchant/shop/business-info`, `/merchant/account/security` | AppShell + PageHeader + max-width 640 단순 form |
-| `/merchant/dashboard` (home) | AppShell + PageHeader + Grid (KPI / chart) full-bleed |
-| `/merchant/shop` (settings 종합) | AppShell + PageHeader + Section/AnchorNav (다 section) |
+| Route                                                        | Layout                                                 |
+| ------------------------------------------------------------ | ------------------------------------------------------ |
+| `/merchant/customers`, `/merchant/orders` etc.               | AppShell + PageHeader + DataGrid (full-bleed)          |
+| `/merchant/products/new`, `/merchant/products/[id]`          | AppShell + PageHeader + Section/AnchorNav (큰 form)    |
+| `/merchant/shop/business-info`, `/merchant/account/security` | AppShell + PageHeader + max-width 640 단순 form        |
+| `/merchant/dashboard` (home)                                 | AppShell + PageHeader + Grid (KPI / chart) full-bleed  |
+| `/merchant/shop` (settings 종합)                             | AppShell + PageHeader + Section/AnchorNav (다 section) |
 
 ---
 
 ## 12. TBD
 
 1. **max-width 정확 px** — form 640? 720? 800? 페이지 종류별 정확 token
-2. **Sidebar collapsed (icon only) trigger** — 자동 (viewport 작음) vs 사용자 button
+2. **Sidebar collapsed (icon only) trigger** — 자동 (viewport 작음) vs 사용자
+   button
 3. **PageHeader sticky** — 스크롤 시 항상 위 또는 page top 만
 4. **AnchorNav drawer (mobile)** — top trigger vs bottom Sheet
 5. **Section gap responsive** — desktop 48px / mobile 32px 자동
-6. **container queries** — Page 안 Card 의 internal layout 이 Page width 아닌 Card width 기반
+6. **container queries** — Page 안 Card 의 internal layout 이 Page width 아닌
+   Card width 기반
 
 ---