sellmate-design-system-react 4.1.0 → 4.3.0

package/dist/llms-full.txt

@@ -158,15 +158,16 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 ### 2-2. 간격 (spacing)
 
-- **간격 유틸리티는 `sd-` 접두를 붙인다** — `gap-sd-8`, `p-sd-20`, `mt-sd-12`. 숫자 = px 다.
+- **간격 유틸리티는 `sd-` 접두를 붙인다** — `gap-sd-8`, `p-sd-16`, `mt-sd-12`. 숫자 = px 다.
   접두를 빼면 Tailwind 기본 스케일이 적용된다(`gap-8` = 32px). 접두는 속성 뒤, 숫자 앞에 온다.
 - 스케일: `2 4 6 8 10 12 16 19 20 22 24 28 32 36 40 44 48 56 60 62 80`
+- **스케일에 없는 간격이 필요하면 임의 값(`p-[64px]`)으로 우회하지 않는다.** 가까운 스케일 값으로 맞추거나, 디자인상 그 값이어야 하면 **토큰 추가를 요청한다.** 이미 있는 토큰을 정확히 써야 할 때만 `gap-[var(--토큰명)]` 으로 참조한다.
 - 형제 요소 간격은 margin 대신 부모의 `flex`/`grid` + `gap-sd-*`으로 잡는다.
 - 시맨틱 간격 토큰 (텍스트 덩어리·요소 사이 기본 리듬):
 
 | 상황 | 값 |
 | --- | --- |
-| **페이지 콘텐츠 패딩** | **`p-sd-20`** |
+| **페이지 콘텐츠 패딩** | **16px — `SPage` 가 `--cmp-pageBody-padding` 으로 이미 넣는다.** 직접 주지 않는다 (덮어쓰면 토큰이 바뀌어도 안 따라간다). `SPage` 밖에서 같은 패딩이 필요하면 `p-sd-16` |
 | **섹션 ↔ 섹션** | **`gap-sd-12`** |
 | **페이지 내 블록 ↔ 블록** (헤더·필터·툴바·테이블 사이) | **`gap-sd-12`** |
 | 요소 ↔ 요소 | **기본 `gap-sd-8`** (`--sys-space-stack-gap-element-normal`) · 타이트 `gap-sd-4`(`-tight`) · 여유 `gap-sd-12`(`-relaxed`) / `gap-sd-16`(`-wide`) |
@@ -346,7 +347,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - 작은 창이 아니라 **화면 하나가 통째로** 들어간다 — 검색 필터·테이블·페이지네이션이 그대로 있는 목록(`엑셀 파일 관리`), 헤더 카드·탭이 있는 상세(`이동 오더 상세`).
 - 상세를 팝업으로 여는 이유는 **목록을 떠나지 않고 여러 건을 번갈아 보기** 위해서다. 단 상세가 **항상** 팝업인 것은 아니고, 데이터 양이 많을 때 팝업을 쓴다.
 - 구조는 헤더(제목 중앙) + 본문 + 푸터다. **확정할 작업이 있으면 푸터에 `저장`, 조회만이면 `useFooter={false}`** 로 푸터를 없앤다.
-- 본문에는 패딩이 없다 — 콘텐츠가 여백을 담당한다. 팝업 안도 일반 페이지와 같은 규칙(§4)을 따른다: 패딩 `p-sd-20`, 블록 간격 `gap-sd-12`, 표는 `SKeyValueTable` / `STable`.
+- 본문에는 패딩이 없다 — 콘텐츠가 여백을 담당한다. 팝업 안도 일반 페이지와 같은 규칙(§4)을 따른다: 패딩 `p-sd-16`(`SPage` 가 아니라 직접 준다), 블록 간격 `gap-sd-12`, 표는 `SKeyValueTable` / `STable`.
 
 ```tsx
 // 1) 목록에서 별도 창을 연다 — 창 크기 = 콘텐츠 크기
@@ -362,7 +363,7 @@ function openDetailPopup(orderId: string) {
 export default function TransferOrderPopupPage() {
   return (
     <SPopup popupTitle="이동 오더 상세" useFooter={false}>
-      <div className="flex flex-col gap-sd-12 p-sd-20">
+      <div className="flex flex-col gap-sd-12 p-sd-16">
         <SSectionHeaderCard>…</SSectionHeaderCard>
         <STabs value={tab} tabs={TABS} onValueChange={setTab} />
         <STable columns={columns} rows={rows} rowKey="id" />
@@ -498,6 +499,8 @@ const columns: STableColumn[] = [
 | 테이블 **행 내부** 인라인 액션 | `xs` |
 | 화면·목록 액션 (툴바, `STableBar`) | `sm` |
 | **모달·위저드 푸터** | `md` |
+| **페이지 하단 실행 버튼** (폼 저장·상세 수정 등) | `md` |
+| 스크롤 시 헤더로 승격된 버튼 | `sm` (최대) |
 
 `lg` 는 현재 사용처가 없다. 페이지 골격에서 쓰지 않는다.
 
@@ -618,12 +621,42 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
     <SLayout type="box" header="fix">
       {/* type/header/folded 는 SLayout 에만 준다 — SGnb 는 context 에서 읽는다 */}
       <SGnb items={MENU} value={current} onValueChange={navigate} logo={<Logo />} />
-      <SPage background="frame" className="p-sd-20">{children}</SPage>
+      {/* 콘텐츠 패딩(16px)은 SPage 가 토큰으로 넣는다 — p-sd-* 로 덮어쓰지 않는다 */}
+      <SPage background="frame">{children}</SPage>
     </SLayout>
   );
 }
 ```
 
+**상단바 배치는 `header` 가 정한다.** 요소 순서가 달라지므로 슬롯을 채우기 전에 어느 쪽인지부터 정한다.
+
+| `header` | 상단바 배치 | 로고 폭 | `topContent` |
+| --- | --- | --- | --- |
+| `"fix"` (기본) | `[런처 · 로고 … 폴드]` — 상단바가 GNB 컬럼 안에 있고 폴드가 컬럼 오른쪽 끝 | 내용 폭 | **렌더되지 않는다** (놓을 자리가 없다) |
+| `"full"` | `[런처 · 폴드 · 로고 · topContent]` — 상단바가 화면 전폭 | **140px 고정** (런처 없으면 172px) | 로고 오른쪽 남는 폭 전체 |
+
+- `topContent` 는 상단바 로고 오른쪽 슬롯이다. 전역 검색·계정 메뉴·알림처럼 **모든 페이지에 공통인 것만** 넣는다. 페이지별 액션은 여기가 아니라 §4-2 의 `STableBar` 로 간다.
+- 슬롯이 남는 폭을 통째로 받으므로 **정렬은 안에서 직접 잡는다** (좌측 정렬 + 우측은 `ml-auto`).
+- `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다.
+- `onLauncherClick` 을 주지 않으면 런처가 렌더되지 않고, 그 자리(버튼 + 간격)를 로고 슬롯이 이어받아 172px 가 된다. `topContent` 시작점은 런처 유무와 관계없이 같은 자리다.
+
+```tsx
+<SLayout type="box" header="full">
+  <SGnb
+    items={MENU} value={current} onValueChange={navigate}
+    logo={<Logo />}
+    topContent={
+      /* 남는 폭 전체를 받는다 — 왼쪽은 그대로, 오른쪽 끝은 ml-auto */
+      <div className="flex w-full items-center gap-sd-8">
+        <SInput value={keyword} onValueChange={setKeyword} placeholder="통합 검색" />
+        <SButton size="sm" color="neutral" outline label="내 계정" className="ml-auto" onClick={openAccount} />
+      </div>
+    }
+  />
+  <SPage background="frame">{children}</SPage>
+</SLayout>
+```
+
 ### 4-2. 목록 페이지 (필터 + 테이블)
 
 구조: **페이지 헤더(제목 + 가이드 링크) → 필터(`SKeyValueTable`) → `STableBar` → `STable`**
@@ -882,7 +915,7 @@ export default function ProductDetailPage() {
 - [ ] 간격이 전부 `sd-` 접두 스케일 값인가 (`gap-13`·`gap-sd-13` ❌ → `gap-sd-12` ✅)
 - [ ] 본문이 12px(`typo-body-sm-default`)인가 (14px 본문 ❌)
 - [ ] 텍스트 회색 위계를 순차 적용했는가 (기본 → `text-fg-secondary` → `text-fg-tertiary`, 단계 건너뛰기 ❌)
-- [ ] 페이지 패딩이 `p-sd-20`, 블록·섹션 간격이 `gap-sd-12` 인가 (`gap-sd-16`/`gap-sd-24` ❌)
+- [ ] `SPage` 의 기본 패딩(16px)을 `p-sd-*` 로 덮어쓰지 않았는가, 블록·섹션 간격이 `gap-sd-12` 인가 (`gap-sd-16`/`gap-sd-24` ❌)
 - [ ] 같은 컴포넌트를 나열할 때 §2-2 그룹 간격을 썼는가 (체크박스 가로 `gap-sd-24` 등)
 - [ ] 페이지가 §4의 표준 골격에서 시작했는가
 - [ ] 필터·폼·상세 정보를 `SKeyValueTable` 로 만들었는가 (컨트롤을 `div` 로 나열하지 않았는가)
@@ -926,6 +959,8 @@ export default function ProductDetailPage() {
 
 `gap-sd-13` 처럼 스케일 밖 값은 Tailwind v4 에서 **에러 없이 조용히 무시된다**. 반대로 접두를 빠뜨린 `gap-8` 은 Tailwind 기본 스케일이라 **32px 이 적용된다**. 둘 다 "간격이 왜 이러지" 로만 보이므로 반드시 `sd-` 접두 스케일 값을 쓴다. (린트는 기본값에서 앞쪽만 잡는다 — 뒤쪽까지 강제하려면 `requirePrefix: true`)
 
+접두 누락은 **자동 수정되지 않는다.** `p-16` 은 지금 64px 로 동작하는 코드라 `p-sd-16`(16px)으로 바꾸면 여백이 달라지기 때문이다. 린트는 "숫자를 px 로 의도했나(`p-sd-16`)" 와 "현재 값을 유지할 건가(스케일에 있으면 그 값)" 를 제안으로 내놓으니 **의도에 맞는 쪽을 골라 적용한다.**
+
 린트가 잡지 못하는 것(§3 컴포넌트 선택, §4 페이지 골격, 버튼 배치)은 §5 체크리스트로 직접 확인한다.
 
 
@@ -1240,6 +1275,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
  - [SActionModal](../SActionModal)
  - [SConfirmModal](../SConfirmModal)
+ - [SDrawer](../SDrawer)
  - [SDropdownButton](../SDropdownButton)
  - [SKeyValueTable](../SKeyValueTable)
  - [SLoadingModal](../SLoadingModal)
@@ -1814,6 +1850,44 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ---
 
+# SDrawer
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDrawer
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open?` | `boolean` | — | 표시 여부 |
+| `persistent?` | `boolean` | `false` | true면 backdrop·ESC로 닫히지 않고 흔들림 효과를 준다. |
+| `title?` | `string` | `''` | 접근성 제목 및 헤더 제목 |
+| `width?` | `number \| string` | `572` | Drawer 너비. 기본값은 Figma drawer 기준 572px이다. |
+| `footerLeft?` | `ReactNode` | — | footer 좌측 슬롯 |
+| `button?` | `SDrawerButton` | — | 우측 기본 액션 버튼 |
+| `children?` | `ReactNode` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onOpenChange` | `(open: boolean) => void` | 표시 상태 변경 |
+| `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+- [SGhostButton](../SGhostButton)
+
+### Graph
+
+---
+
 # SDropdownButton
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
@@ -2129,6 +2203,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SDrawer](../SDrawer)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
@@ -2168,7 +2243,8 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | `useRail?` | `boolean` | — | 좌측 레일 사용 여부. 켜면 items 의 첫 depth 가 아이콘+라벨 버튼의 세로 레일로 서고, 선택된 레일 아이템의 children 이 오른쪽 메뉴 패널에 깔린다. 미지정 시 SLayout 의 useRail 을 따른다. children 없는 레일 아이템이 활성이면 메뉴 패널은 렌더되지 않고 레일만 남는다. |
 | `value?` | `string` | `''` | 현재 선택된 아이템 value |
 | `folded?` | `boolean` | — | 접힘(레일) 상태. 미지정 시 SLayout 의 folded 를 따른다. |
-| `logo?` | `ReactNode` | — | 상단바 로고 영역 (slot) |
+| `logo?` | `ReactNode` | — | 상단바 로고 영역 (slot). header="full" 이면 폭이 140px 로 고정된다. |
+| `topContent?` | `ReactNode` | — | 상단바 로고 오른쪽 슬롯 (검색·액션 등). 로고와 16px 띄고 남는 폭을 모두 차지하므로 안에서 자유롭게 정렬한다. 상단바가 전폭인 header="full" 에서만 렌더된다 (fix 는 상단바가 좁은 GNB 컬럼 안이라 놓을 자리가 없다). |
 | `railFooter?` | `ReactNode` | — | 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 하단에 붙어 고정된다. useRail 일 때만 렌더된다. |
 | `menuFooter?` | `ReactNode` | — | 메뉴 하단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고 이 슬롯은 메뉴 하단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다. |
 | `foldedFooter?` | `ReactNode` | — | 접힘(fix 레일) 하단 고정 슬롯. 접으면 본문이 빠져나가며 rail/menu footer 도 사라지므로, 48px 폴드 레일 바닥에 붙는 별도 슬롯이다. header="fix" 로 접혔을 때만 나타난다. |

package/dist/llms.txt

@@ -159,15 +159,16 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 ### 2-2. 간격 (spacing)
 
-- **간격 유틸리티는 `sd-` 접두를 붙인다** — `gap-sd-8`, `p-sd-20`, `mt-sd-12`. 숫자 = px 다.
+- **간격 유틸리티는 `sd-` 접두를 붙인다** — `gap-sd-8`, `p-sd-16`, `mt-sd-12`. 숫자 = px 다.
   접두를 빼면 Tailwind 기본 스케일이 적용된다(`gap-8` = 32px). 접두는 속성 뒤, 숫자 앞에 온다.
 - 스케일: `2 4 6 8 10 12 16 19 20 22 24 28 32 36 40 44 48 56 60 62 80`
+- **스케일에 없는 간격이 필요하면 임의 값(`p-[64px]`)으로 우회하지 않는다.** 가까운 스케일 값으로 맞추거나, 디자인상 그 값이어야 하면 **토큰 추가를 요청한다.** 이미 있는 토큰을 정확히 써야 할 때만 `gap-[var(--토큰명)]` 으로 참조한다.
 - 형제 요소 간격은 margin 대신 부모의 `flex`/`grid` + `gap-sd-*`으로 잡는다.
 - 시맨틱 간격 토큰 (텍스트 덩어리·요소 사이 기본 리듬):
 
 | 상황 | 값 |
 | --- | --- |
-| **페이지 콘텐츠 패딩** | **`p-sd-20`** |
+| **페이지 콘텐츠 패딩** | **16px — `SPage` 가 `--cmp-pageBody-padding` 으로 이미 넣는다.** 직접 주지 않는다 (덮어쓰면 토큰이 바뀌어도 안 따라간다). `SPage` 밖에서 같은 패딩이 필요하면 `p-sd-16` |
 | **섹션 ↔ 섹션** | **`gap-sd-12`** |
 | **페이지 내 블록 ↔ 블록** (헤더·필터·툴바·테이블 사이) | **`gap-sd-12`** |
 | 요소 ↔ 요소 | **기본 `gap-sd-8`** (`--sys-space-stack-gap-element-normal`) · 타이트 `gap-sd-4`(`-tight`) · 여유 `gap-sd-12`(`-relaxed`) / `gap-sd-16`(`-wide`) |
@@ -347,7 +348,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - 작은 창이 아니라 **화면 하나가 통째로** 들어간다 — 검색 필터·테이블·페이지네이션이 그대로 있는 목록(`엑셀 파일 관리`), 헤더 카드·탭이 있는 상세(`이동 오더 상세`).
 - 상세를 팝업으로 여는 이유는 **목록을 떠나지 않고 여러 건을 번갈아 보기** 위해서다. 단 상세가 **항상** 팝업인 것은 아니고, 데이터 양이 많을 때 팝업을 쓴다.
 - 구조는 헤더(제목 중앙) + 본문 + 푸터다. **확정할 작업이 있으면 푸터에 `저장`, 조회만이면 `useFooter={false}`** 로 푸터를 없앤다.
-- 본문에는 패딩이 없다 — 콘텐츠가 여백을 담당한다. 팝업 안도 일반 페이지와 같은 규칙(§4)을 따른다: 패딩 `p-sd-20`, 블록 간격 `gap-sd-12`, 표는 `SKeyValueTable` / `STable`.
+- 본문에는 패딩이 없다 — 콘텐츠가 여백을 담당한다. 팝업 안도 일반 페이지와 같은 규칙(§4)을 따른다: 패딩 `p-sd-16`(`SPage` 가 아니라 직접 준다), 블록 간격 `gap-sd-12`, 표는 `SKeyValueTable` / `STable`.
 
 ```tsx
 // 1) 목록에서 별도 창을 연다 — 창 크기 = 콘텐츠 크기
@@ -363,7 +364,7 @@ function openDetailPopup(orderId: string) {
 export default function TransferOrderPopupPage() {
   return (
     <SPopup popupTitle="이동 오더 상세" useFooter={false}>
-      <div className="flex flex-col gap-sd-12 p-sd-20">
+      <div className="flex flex-col gap-sd-12 p-sd-16">
         <SSectionHeaderCard>…</SSectionHeaderCard>
         <STabs value={tab} tabs={TABS} onValueChange={setTab} />
         <STable columns={columns} rows={rows} rowKey="id" />
@@ -499,6 +500,8 @@ const columns: STableColumn[] = [
 | 테이블 **행 내부** 인라인 액션 | `xs` |
 | 화면·목록 액션 (툴바, `STableBar`) | `sm` |
 | **모달·위저드 푸터** | `md` |
+| **페이지 하단 실행 버튼** (폼 저장·상세 수정 등) | `md` |
+| 스크롤 시 헤더로 승격된 버튼 | `sm` (최대) |
 
 `lg` 는 현재 사용처가 없다. 페이지 골격에서 쓰지 않는다.
 
@@ -619,12 +622,42 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
     <SLayout type="box" header="fix">
       {/* type/header/folded 는 SLayout 에만 준다 — SGnb 는 context 에서 읽는다 */}
       <SGnb items={MENU} value={current} onValueChange={navigate} logo={<Logo />} />
-      <SPage background="frame" className="p-sd-20">{children}</SPage>
+      {/* 콘텐츠 패딩(16px)은 SPage 가 토큰으로 넣는다 — p-sd-* 로 덮어쓰지 않는다 */}
+      <SPage background="frame">{children}</SPage>
     </SLayout>
   );
 }
 ```
 
+**상단바 배치는 `header` 가 정한다.** 요소 순서가 달라지므로 슬롯을 채우기 전에 어느 쪽인지부터 정한다.
+
+| `header` | 상단바 배치 | 로고 폭 | `topContent` |
+| --- | --- | --- | --- |
+| `"fix"` (기본) | `[런처 · 로고 … 폴드]` — 상단바가 GNB 컬럼 안에 있고 폴드가 컬럼 오른쪽 끝 | 내용 폭 | **렌더되지 않는다** (놓을 자리가 없다) |
+| `"full"` | `[런처 · 폴드 · 로고 · topContent]` — 상단바가 화면 전폭 | **140px 고정** (런처 없으면 172px) | 로고 오른쪽 남는 폭 전체 |
+
+- `topContent` 는 상단바 로고 오른쪽 슬롯이다. 전역 검색·계정 메뉴·알림처럼 **모든 페이지에 공통인 것만** 넣는다. 페이지별 액션은 여기가 아니라 §4-2 의 `STableBar` 로 간다.
+- 슬롯이 남는 폭을 통째로 받으므로 **정렬은 안에서 직접 잡는다** (좌측 정렬 + 우측은 `ml-auto`).
+- `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다.
+- `onLauncherClick` 을 주지 않으면 런처가 렌더되지 않고, 그 자리(버튼 + 간격)를 로고 슬롯이 이어받아 172px 가 된다. `topContent` 시작점은 런처 유무와 관계없이 같은 자리다.
+
+```tsx
+<SLayout type="box" header="full">
+  <SGnb
+    items={MENU} value={current} onValueChange={navigate}
+    logo={<Logo />}
+    topContent={
+      /* 남는 폭 전체를 받는다 — 왼쪽은 그대로, 오른쪽 끝은 ml-auto */
+      <div className="flex w-full items-center gap-sd-8">
+        <SInput value={keyword} onValueChange={setKeyword} placeholder="통합 검색" />
+        <SButton size="sm" color="neutral" outline label="내 계정" className="ml-auto" onClick={openAccount} />
+      </div>
+    }
+  />
+  <SPage background="frame">{children}</SPage>
+</SLayout>
+```
+
 ### 4-2. 목록 페이지 (필터 + 테이블)
 
 구조: **페이지 헤더(제목 + 가이드 링크) → 필터(`SKeyValueTable`) → `STableBar` → `STable`**
@@ -883,7 +916,7 @@ export default function ProductDetailPage() {
 - [ ] 간격이 전부 `sd-` 접두 스케일 값인가 (`gap-13`·`gap-sd-13` ❌ → `gap-sd-12` ✅)
 - [ ] 본문이 12px(`typo-body-sm-default`)인가 (14px 본문 ❌)
 - [ ] 텍스트 회색 위계를 순차 적용했는가 (기본 → `text-fg-secondary` → `text-fg-tertiary`, 단계 건너뛰기 ❌)
-- [ ] 페이지 패딩이 `p-sd-20`, 블록·섹션 간격이 `gap-sd-12` 인가 (`gap-sd-16`/`gap-sd-24` ❌)
+- [ ] `SPage` 의 기본 패딩(16px)을 `p-sd-*` 로 덮어쓰지 않았는가, 블록·섹션 간격이 `gap-sd-12` 인가 (`gap-sd-16`/`gap-sd-24` ❌)
 - [ ] 같은 컴포넌트를 나열할 때 §2-2 그룹 간격을 썼는가 (체크박스 가로 `gap-sd-24` 등)
 - [ ] 페이지가 §4의 표준 골격에서 시작했는가
 - [ ] 필터·폼·상세 정보를 `SKeyValueTable` 로 만들었는가 (컨트롤을 `div` 로 나열하지 않았는가)
@@ -927,6 +960,8 @@ export default function ProductDetailPage() {
 
 `gap-sd-13` 처럼 스케일 밖 값은 Tailwind v4 에서 **에러 없이 조용히 무시된다**. 반대로 접두를 빠뜨린 `gap-8` 은 Tailwind 기본 스케일이라 **32px 이 적용된다**. 둘 다 "간격이 왜 이러지" 로만 보이므로 반드시 `sd-` 접두 스케일 값을 쓴다. (린트는 기본값에서 앞쪽만 잡는다 — 뒤쪽까지 강제하려면 `requirePrefix: true`)
 
+접두 누락은 **자동 수정되지 않는다.** `p-16` 은 지금 64px 로 동작하는 코드라 `p-sd-16`(16px)으로 바꾸면 여백이 달라지기 때문이다. 린트는 "숫자를 px 로 의도했나(`p-sd-16`)" 와 "현재 값을 유지할 건가(스케일에 있으면 그 값)" 를 제안으로 내놓으니 **의도에 맞는 쪽을 골라 적용한다.**
+
 린트가 잡지 못하는 것(§3 컴포넌트 선택, §4 페이지 골격, 버튼 배치)은 §5 체크리스트로 직접 확인한다.
 
 
@@ -1096,7 +1131,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-link-accent
 --sys-color-navigation-gnb-bg-dark
 
-## 3. 컴포넌트 인덱스 (61종)
+## 3. 컴포넌트 인덱스 (62종)
 
 **Props 는 이 문서에 없다.** 쓸 컴포넌트를 정했으면 그 컴포넌트의 README 를 읽는다.
 
@@ -1105,4 +1140,4 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 예) SButton 을 쓴다면 `dist/components/SButton/README.md`.
 prop 을 추측해서 쓰지 말고 반드시 README 로 확인한다 (분류별 용도는 §1 의 "전체 컴포넌트 인덱스" 참조).
 
-SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDraggableList · SDropdownButton · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSectionHeaderCard · SSelect · SStepper · SSwitch · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree
+SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSectionHeaderCard · SSelect · SStepper · SSwitch · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree

package/dist/styles.css

@@ -377,6 +377,7 @@
     --animate-modal-in: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     --animate-modal-out: modal-out 0.2s ease-in;
     --animate-modal-shake: modal-shake 0.3s ease-out;
+    --animate-drawer-shake: drawer-shake 0.22s ease-out;
     --animate-floating-in-top: floating-in-top 0.35s ease-out;
     --animate-floating-in-bottom: floating-in-bottom 0.35s ease-out;
     --animate-floating-in-left: floating-in-left 0.35s ease-out;
@@ -751,6 +752,9 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mt-9 {
+    margin-top: calc(var(--spacing) * 9);
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
@@ -772,6 +776,9 @@
   .mt-sd-32 {
     margin-top: var(--spacing-sd-32);
   }
+  .mt-sd-36 {
+    margin-top: var(--spacing-sd-36);
+  }
   .-mr-px {
     margin-right: -1px;
   }
@@ -1225,6 +1232,10 @@
     --tw-translate-x: calc(1 / 2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-full {
+    --tw-translate-x: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1247,6 +1258,9 @@
   .animate-circle-spin {
     animation: var(--animate-circle-spin);
   }
+  .animate-drawer-shake {
+    animation: var(--animate-drawer-shake);
+  }
   .animate-linear-indeterminate {
     animation: var(--animate-linear-indeterminate);
   }
@@ -1532,6 +1546,9 @@
   .gap-\[var\(--cmp-textinput-sm-gap\)\] {
     gap: var(--cmp-textinput-sm-gap);
   }
+  .gap-\[var\(--토큰명\)\] {
+    gap: var(--토큰명);
+  }
   .gap-sd-2 {
     gap: var(--spacing-sd-2);
   }
@@ -1824,6 +1841,9 @@
   .\!border-\[\#93C4FF\] {
     border-color: #93C4FF !important;
   }
+  .\!border-border-accentLight {
+    border-color: var(--color-border-accentLight) !important;
+  }
   .border-\(--cmp-listDraggableItem-border-default\) {
     border-color: var(--cmp-listDraggableItem-border-default);
   }
@@ -1884,6 +1904,9 @@
   .border-\[color\:var\(--cmp-datepicker-border-default\)\] {
     border-color: var(--cmp-datepicker-border-default);
   }
+  .border-\[color\:var\(--cmp-drawer-body-border\)\] {
+    border-color: var(--cmp-drawer-body-border);
+  }
   .border-\[color\:var\(--cmp-listBoxItem-depth1-border-color\)\] {
     border-color: var(--cmp-listBoxItem-depth1-border-color);
   }
@@ -2061,6 +2084,9 @@
   .bg-\[var\(--cmp-datepicker-calendar-time-bg-selected\)\] {
     background-color: var(--cmp-datepicker-calendar-time-bg-selected);
   }
+  .bg-\[var\(--cmp-drawer-bg\)\] {
+    background-color: var(--cmp-drawer-bg);
+  }
   .bg-\[var\(--cmp-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
@@ -2079,6 +2105,12 @@
   .bg-\[var\(--cmp-modal-bg\)\] {
     background-color: var(--cmp-modal-bg);
   }
+  .bg-\[var\(--cmp-overlay-footer-bg-default\)\] {
+    background-color: var(--cmp-overlay-footer-bg-default);
+  }
+  .bg-\[var\(--cmp-overlay-header-bg\)\] {
+    background-color: var(--cmp-overlay-header-bg);
+  }
   .bg-\[var\(--cmp-pagination-item-bg-selected\)\] {
     background-color: var(--cmp-pagination-item-bg-selected);
   }
@@ -2199,6 +2231,9 @@
   .p-16 {
     padding: calc(var(--spacing) * 16);
   }
+  .p-64 {
+    padding: calc(var(--spacing) * 64);
+  }
   .p-\[2px\] {
     padding: 2px;
   }
@@ -2214,6 +2249,12 @@
   .p-\[16px\] {
     padding: 16px;
   }
+  .p-\[24px\] {
+    padding: 24px;
+  }
+  .p-\[64px\] {
+    padding: 64px;
+  }
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
@@ -2244,6 +2285,9 @@
   .p-sd-32 {
     padding: var(--spacing-sd-32);
   }
+  .p-sd-62 {
+    padding: var(--spacing-sd-62);
+  }
   .px-\(--cmp-chipInput-md-paddingX\) {
     padding-inline: var(--cmp-chipInput-md-paddingX);
   }
@@ -2316,6 +2360,9 @@
   .px-\[var\(--cmp-overlay-footer-paddingX\)\] {
     padding-inline: var(--cmp-overlay-footer-paddingX);
   }
+  .px-\[var\(--cmp-overlay-header-paddingX\)\] {
+    padding-inline: var(--cmp-overlay-header-paddingX);
+  }
   .px-\[var\(--cmp-pagination-paddingX\)\] {
     padding-inline: var(--cmp-pagination-paddingX);
   }
@@ -2988,6 +3035,10 @@
     --tw-shadow: 5px 0 8px 0 var(--tw-shadow-color, rgba(34,34,34,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[var\(--shadow-overlay\)\] {
+    --tw-shadow: var(--shadow-overlay);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3065,6 +3116,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .duration-\[400ms\] {
     --tw-duration: 400ms;
     transition-duration: 400ms;
@@ -3394,13 +3449,6 @@
       }
     }
   }
-  .hover\:border-\[\#AAAAAA\] {
-    &:hover {
-      @media (hover: hover) {
-        border-color: #AAAAAA;
-      }
-    }
-  }
   .hover\:border-\[color\:var\(--cmp-checkbox-unchecked-border-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3429,6 +3477,13 @@
       }
     }
   }
+  .hover\:border-border-strong {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-strong);
+      }
+    }
+  }
   .hover\:\!bg-\[var\(--cmp-radioButton-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3716,6 +3771,12 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=closed\]\:translate-x-full {
+    &[data-state="closed"] {
+      --tw-translate-x: 100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .data-\[state\=closed\]\:animate-modal-out {
     &[data-state="closed"] {
       animation: var(--animate-modal-out);
@@ -3810,6 +3871,12 @@
       }
     }
   }
+  .data-\[state\=open\]\:translate-x-0 {
+    &[data-state="open"] {
+      --tw-translate-x: 0;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .data-\[state\=open\]\:animate-modal-in {
     &[data-state="open"] {
       animation: var(--animate-modal-in);
@@ -3873,6 +3940,16 @@
       transition-property: none;
     }
   }
+  .md\:p-4 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
+  .md\:p-sd-16 {
+    @media (width >= 48rem) {
+      padding: var(--spacing-sd-16);
+    }
+  }
   .md\:px-sd-24 {
     @media (width >= 48rem) {
       padding-inline: var(--spacing-sd-24);
@@ -4004,9 +4081,9 @@
       border-left: 1px solid var(--sys-color-border-default);
     }
   }
-  .\[\&\:has\(\>button\:hover\)\]\:border-\[\#AAAAAA\] {
+  .\[\&\:has\(\>button\:hover\)\]\:border-border-strong {
     &:has(>button:hover) {
-      border-color: #AAAAAA;
+      border-color: var(--color-border-strong);
     }
   }
   .\[\&\>\*\:not\(\:last-child\)\]\:border-b {
@@ -5484,6 +5561,17 @@
     transform: scale(1.01);
   }
 }
+@keyframes drawer-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  40% {
+    transform: translateX(-3px);
+  }
+  70% {
+    transform: translateX(2px);
+  }
+}
 @keyframes floating-in-top {
   from {
     opacity: 0;

package/dist/theme.css

@@ -1743,6 +1743,7 @@
   --animate-modal-in: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   --animate-modal-out: modal-out 0.2s ease-in;
   --animate-modal-shake: modal-shake 0.3s ease-out;
+  --animate-drawer-shake: drawer-shake 0.22s ease-out;
 
   /* floating(툴팁·팝오버) placement 방향별 슬라이드+페이드 (sd-floating-portal 포팅) */
   --animate-floating-in-top: floating-in-top 0.35s ease-out;
@@ -1783,6 +1784,12 @@
   50% { transform: scale(0.97); }
   75% { transform: scale(1.01); }
 }
+/* persistent Drawer에서 닫기 시도 시 사용하는 낮은 진폭의 흔들림 */
+@keyframes drawer-shake {
+  0%, 100% { transform: translateX(0); }
+  40% { transform: translateX(-3px); }
+  70% { transform: translateX(2px); }
+}
 /* floating(툴팁·팝오버): placement 방향에서 4px 슬라이드 + 페이드 (sd-floating-slide-* 포팅) */
 @keyframes floating-in-top { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes floating-in-bottom { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }