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

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` | |
@@ -2333,6 +2337,9 @@ export default function ProductDetailPage() {
     description="(사내 답변은 사내 문서를 기반으로 답변합니다.)"
     onLogin={signIn}
     footerNote="계정이 없다면 담당자에게 문의를 요청해 주세요."
+    bottomAction={
+      <STextLink label="관리자 로그인" icon="settingOutline" rightArrow="chevron" onClick={goAdmin} />
+    }
   />
 </div>
 ```
@@ -2350,8 +2357,11 @@ export default function ProductDetailPage() {
 | `description` | 소개 바로 아래 붙는 보조 설명. 소개와 한 문단으로 읽힌다 — 없으면 생략한다 |
 | `onLogin` | 로그인 버튼을 눌렀을 때. **버튼은 카드가 그리므로 동작만 넘긴다** — 문구·색·크기는 세 제품에서 같아야 한다 |
 | `footerNote` | 버튼 아래 안내 문구 |
+| `bottomAction` | 카드 **맨 아래**에 서는 보조 진입점 (예: 관리자 로그인). `STextLink` 하나만 넣는다 — 없으면 생략한다 |
+
+**`bottomAction` 은 로그인과 성격이 다른 진입점만 받는다.** 관리자 로그인처럼 "이 화면의 주인공은 아니지만 여기서만 갈 수 있는 곳"이 그 자리다. 카드가 바닥에 붙여 세우고, 가운데 덩어리는 그만큼 밀리지 않고 한가운데에 그대로 선다. **버튼을 세우지 않는다** — 로그인 버튼과 무게가 같아지는 순간 「이 화면에서 눌러야 하는 것」이 흐려진다. 읽을 문장은 여기가 아니라 `description`·`footerNote` 로 간다.
 
-**문구 말고는 주지 않는다.** 라운드·간격·타이포·버튼 색은 카드가 쥐고 있어 제품이 달라도 같은 화면이 선다.
+**문구와 `bottomAction` 말고는 주지 않는다.** 라운드·간격·타이포·버튼 색은 카드가 쥐고 있어 제품이 달라도 같은 화면이 선다.
 
 **크기는 부모가 정한다 — `className` 으로 폭을 박지 않는다.** 카드는 폭을 368~640px 사이에서 부모에 맞추고 높이도 부모가 준 만큼 채운다. 밖에서 고정하면 상하한이 무의미해져, 좁은 화면에서 함께 좁아져야 할 카드가 그대로 남아 넘친다. 좁게 세워야 하면 카드가 아니라 바깥 한 겹을 좁힌다.
 

package/dist/components/SIcon/icons.gen.d.ts

@@ -44,6 +44,7 @@ export declare const ICONS: {
     readonly clockOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly close: (p: IconRenderProps) => import("react").JSX.Element;
     readonly company: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly connect: (p: IconRenderProps) => import("react").JSX.Element;
     readonly copy: (p: IconRenderProps) => import("react").JSX.Element;
     readonly counsel: (p: IconRenderProps) => import("react").JSX.Element;
     readonly coupon: (p: IconRenderProps) => import("react").JSX.Element;
@@ -69,6 +70,9 @@ export declare const ICONS: {
     readonly link: (p: IconRenderProps) => import("react").JSX.Element;
     readonly location: (p: IconRenderProps) => import("react").JSX.Element;
     readonly logout: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly megaphone: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly messageClose: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly messageOpen: (p: IconRenderProps) => import("react").JSX.Element;
     readonly minus: (p: IconRenderProps) => import("react").JSX.Element;
     readonly monitor: (p: IconRenderProps) => import("react").JSX.Element;
     readonly new: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SLoginCard/README.md

@@ -12,6 +12,7 @@
 | `title` | `ReactNode` | — | 제품을 한 줄로 소개하는 문장 |
 | `description?` | `ReactNode` | — | 소개 문장 바로 아래 붙는 보조 설명. 소개와 한 덩어리로 읽힌다 |
 | `footerNote?` | `ReactNode` | — | 버튼 아래 안내 문구 (예: 계정 발급 문의 안내) |
+| `bottomAction?` | `ReactNode` | — | 카드 **맨 아래**에 서는 보조 진입점 (예: 관리자 로그인). 가운데 덩어리와 섞이지 않도록 바닥에 붙고, 위 덩어리는 카드 한가운데에 그대로 선다. `STextLink` 하나만 넣는다 — 이 자리는 "이 화면에서 할 일은 로그인 하나"라는 뜻을 깨지 않을 만큼만 작아야 해서, 버튼이나 문단이 서는 자리가 아니다. |
 
 #### Events
 

package/dist/components/SLoginCard/SLoginCard.d.ts

@@ -13,6 +13,14 @@ export interface SLoginCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     onLogin?: () => void;
     /** 버튼 아래 안내 문구 (예: 계정 발급 문의 안내) */
     footerNote?: ReactNode;
+    /**
+     * 카드 **맨 아래**에 서는 보조 진입점 (예: 관리자 로그인). 가운데 덩어리와 섞이지 않도록
+     * 바닥에 붙고, 위 덩어리는 카드 한가운데에 그대로 선다.
+     *
+     * `STextLink` 하나만 넣는다 — 이 자리는 "이 화면에서 할 일은 로그인 하나"라는 뜻을 깨지 않을
+     * 만큼만 작아야 해서, 버튼이나 문단이 서는 자리가 아니다.
+     */
+    bottomAction?: ReactNode;
 }
 /**
  * SLoginCard — 통합 계정 로그인 화면의 카드.
@@ -22,6 +30,9 @@ export interface SLoginCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
  *
  * **크기는 부모가 정한다** — 폭은 368~640px 사이에서 부모를 채우고, 높이도 부모가 준 만큼 채운다.
  *
+ * 관리자 로그인 같은 보조 진입점은 `bottomAction` 으로 카드 바닥에 세운다 — 가운데 덩어리는
+ * 그만큼 밀리지 않고 카드 한가운데에 그대로 선다.
+ *
  * **카드는 화면을 잡지 않는다** — 회색 바탕과 가운데 정렬은 앱이 만드는 한 겹이다 (AGENTS.md §4-6).
  * 덕분에 로그인 화면 밖(세션 만료 재인증 등)에서도 같은 카드를 그대로 쓸 수 있다.
  */

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건 선택" 을 표시한다 */