sellmate-design-system-react 9.0.0-beta.51 → 9.0.0-beta.52

package/AGENTS.md

@@ -219,7 +219,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 1. 페이지 제목        `SPageHeader`  (SGnb 와 SPage 사이. 가이드·매뉴얼 링크는 slot, 액션 버튼은 오지 않는다 §4-2)
 2. 상시 안내          SCallout
 3. 필터               SKeyValueTable · SChipFilter (§3-7-11)
-4. 툴바               STableBar   (건수 요약 + 액션)
+4. 툴바               STableBar   (제목 slot + 건수 요약 + 액션)
 5. 본문               STable · 섹션 카드들 · SList …
 6. 페이지네이션        SPagination (STable 이 pagination prop 으로 직접 그린다)
 7. 하단 액션          되돌리기 왼쪽 · 실행 오른쪽 (§4-3)
@@ -233,11 +233,15 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 ```tsx
 <div className="flex min-h-0 flex-1 flex-col">   {/* 툴바+표 = 한 블록 */}
-  <STableBar className="border-b-0" … />
+  <STableBar className="border-b-0" title="주문 목록" … />
   <STable className="min-h-0 flex-1" … />
 </div>
 ```
 
+**표의 이름은 `STableBar` 의 `title` 슬롯에 넣는다.** 이름만 적자고 그 위에 `SSectionHeaderCard`
+를 따로 세우지 않는다 — 블록이 한 칸 늘어 툴바와 표가 멀어지고, 위에서 막은 "둘 사이를 벌리지
+않는다" 를 스스로 어기게 된다. 섹션 카드는 표 말고도 여러 블록을 함께 담을 때 쓴다.
+
 - **맞닿는 가로선은 표가 그린다 — 툴바에 `border-b-0` 을 준다.** 둘 다 1px 테두리를 가진 상자라, 그냥 붙이면 그 변만 1px+1px=2px 로 두꺼워진다. 표에는 아무것도 주지 않는다.
 - **`gap-sd-12` 는 이 덩어리 바깥에만 걸린다.** 필터 ↔ (툴바+표) 는 여느 블록 사이와 같다.
 - **`min-h-0 flex-1` 사슬은 이 `div` 를 한 칸 더 지난다** — 감싸는 `div` 에도 붙여야 표가 남은 높이를 잡는다(§4-2).
@@ -563,7 +567,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 날짜별 일정을 한 달치 격자로 펼쳐 보여준다 | `SCalendarBoard` | §3-7-4 |
 | 항목끼리 크기를 눈으로 견주게 한다 (기간별 추이·채널별 비중) | `SBarChart` | 정확한 값을 읽어야 하면 `STable` — 그래프는 "어느 쪽이 큰가" 를 답하지 "얼마인가" 를 답하지 않는다 |
 | 항목의 크기와 **그 안의 구성**을 함께 보여준다 (주문 상태별 내역, 유입 경로별 몫) | `SBarChart stacked` | 계열끼리 견주는 것이 목적이면 `stacked` 없이 나란히 세운다. 더해서 뜻이 없는 값(비율·평균)은 쌓지 않는다 — 합계 라벨이 거짓말이 된다 |
-| 표 위에 건수 요약과 액션을 얹는다 | `STableBar` | §4-2 |
+| 표 위에 건수 요약과 액션을 얹는다 | `STableBar` | 표의 이름도 여기 `title` 슬롯에 넣는다 — 제목만으로 블록을 따로 세우지 않는다. §4-2 |
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
 | 아이콘을 넣는다 | `SIcon` | |

package/dist/components/SLoginCard/sellmate-wordmark.d.ts

@@ -6,7 +6,8 @@
  * (가장 가까운 `--color-primary-90` 도 `#002B5E` 로 다른 색이다), 있더라도 로고 색은
  * 테마를 따라 바뀌면 안 되는 값이다. `scripts/check-hardcoded.mjs` 의 ALLOW 에 등록해 둔다.
  *
- * 원본 비율은 276×40 이다. 크기를 바꾸려면 `className` 으로 높이만 주고 폭은 비율에 맡긴다.
+ * 원본 비율은 276:40 이다. 기본 크기는 높이 32px 이고 폭(220.8px)은 그 비율에서 나온다.
+ * 크기를 바꾸려면 `className` 으로 높이만 주고 폭은 비율에 맡긴다.
  */
 export declare function SellmateWordmark({ className }: {
     className?: string;

package/dist/components/SScrollArea/README.md

@@ -13,6 +13,7 @@
 | `bordered?` | `boolean` | `false` | true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. |
 | `maxHeight?` | `string` | — | viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. |
 | `maxWidth?` | `string` | — | viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. |
+| `overlayScrollbar?` | `boolean` | `false` | true면 네이티브 스크롤바를 숨기고 영역 위에 오버레이 스크롤바를 얹는다. 스크롤바가 레이아웃 폭을 차지하지 않아 스크롤이 생겨도 안쪽 콘텐츠 폭이 줄지 않는다. **막대는 스크롤하는 동안에만 보인다.** 멎으면 페이드로 사라진다 — 자리를 차지하지 않는 막대는 늘 떠 있을 이유도 없다. 끌고 있는 동안에는 사라지지 않는다. (`SPage` 의 같은 이름 prop 은 막대를 항상 보인다. 페이지는 스크롤이 늘 있는 자리라 "여기는 스크롤된다"는 신호를 남겨 둔 쪽이다.) **켜면 구조가 한 겹 늘어난다.** `className`·`style`·`maxHeight`·`maxWidth` 가 바깥 상자로 가고 스크롤 요소가 그 안을 채운다 — 막대를 얹을 기준 상자가 필요해서다. 크기·자리를 잡는 클래스(`h-*`·`flex-1`·`min-h-0`)는 그대로 듣지만, 패딩은 스크롤 요소가 아니라 바깥 상자에 걸리므로 콘텐츠가 그 여백 아래로 흘러 들어가지 않는다. `background`·`bordered` 는 네이티브 트랙을 꾸미는 값이라 이때 무시된다. |
 
 ## Types
 

package/dist/components/SScrollArea/SScrollArea.d.ts

@@ -11,6 +11,23 @@ export interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     maxHeight?: string;
     /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */
     maxWidth?: string;
+    /**
+     * true면 네이티브 스크롤바를 숨기고 영역 위에 오버레이 스크롤바를 얹는다.
+     * 스크롤바가 레이아웃 폭을 차지하지 않아 스크롤이 생겨도 안쪽 콘텐츠 폭이 줄지 않는다.
+     *
+     * **막대는 스크롤하는 동안에만 보인다.** 멎으면 페이드로 사라진다 — 자리를 차지하지
+     * 않는 막대는 늘 떠 있을 이유도 없다. 끌고 있는 동안에는 사라지지 않는다.
+     * (`SPage` 의 같은 이름 prop 은 막대를 항상 보인다. 페이지는 스크롤이 늘 있는 자리라
+     * "여기는 스크롤된다"는 신호를 남겨 둔 쪽이다.)
+     *
+     * **켜면 구조가 한 겹 늘어난다.** `className`·`style`·`maxHeight`·`maxWidth` 가 바깥
+     * 상자로 가고 스크롤 요소가 그 안을 채운다 — 막대를 얹을 기준 상자가 필요해서다.
+     * 크기·자리를 잡는 클래스(`h-*`·`flex-1`·`min-h-0`)는 그대로 듣지만, 패딩은 스크롤
+     * 요소가 아니라 바깥 상자에 걸리므로 콘텐츠가 그 여백 아래로 흘러 들어가지 않는다.
+     *
+     * `background`·`bordered` 는 네이티브 트랙을 꾸미는 값이라 이때 무시된다.
+     */
+    overlayScrollbar?: boolean;
 }
 /**
  * SScrollArea — sd-scroll-area 포팅.

package/dist/components/STableBar/README.md

@@ -8,6 +8,7 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `title?` | `ReactNode` | — | 건수 앞에 서는 제목 슬롯. 이 바가 무엇의 목록인지 말한다. 문자열을 주면 바의 기본 타이포로 그린다. 다른 모양이 필요하면 요소를 통째로 넘긴다 — 슬롯이라 안에 무엇이 오든 자리만 잡아 준다. |
 | `total?` | `number` | — | 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동) |
 | `selected?` | `number` | — | 선택 건수. 지정하면 "N건 선택" 을 표시한다 |
 | `actions?` | `ReactNode` | — | 구분선 오른쪽 좌측 액션 영역 |

package/dist/components/STableBar/STableBar.d.ts

@@ -1,5 +1,12 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-export interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /**
+     * 건수 앞에 서는 제목 슬롯. 이 바가 무엇의 목록인지 말한다.
+     *
+     * 문자열을 주면 바의 기본 타이포로 그린다. 다른 모양이 필요하면 요소를 통째로 넘긴다 —
+     * 슬롯이라 안에 무엇이 오든 자리만 잡아 준다.
+     */
+    title?: ReactNode;
     /** 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동) */
     total?: number;
     /** 선택 건수. 지정하면 "N건 선택" 을 표시한다 */