sellmate-design-system-react 9.0.0-beta.61 → 9.0.0-beta.63

package/dist/components/SBarChart/README.md

@@ -23,6 +23,7 @@
 | `showTooltip?` | `boolean` | `true` | 막대에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
 | `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SBarChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -103,3 +104,17 @@ export interface SBarChartPoint {
 }
 ```
 
+### SBarChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SBarChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다 */
+  points: SBarChartPoint[];
+}
+```
+

package/dist/components/SBarChart/SBarChart.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 /** 막대가 자라는 방향. */
 export type SBarChartDirection = 'vertical' | 'horizontal';
 /** 범례 위치. */
@@ -25,6 +25,15 @@ export interface SBarChartPoint {
     /** 그 지점의 값 */
     value: number;
 }
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SBarChartTooltipCategory {
+    /** 카테고리 인덱스 */
+    categoryIndex: number;
+    /** 카테고리 이름 */
+    name: string;
+    /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다 */
+    points: SBarChartPoint[];
+}
 /** 한 계열 — 범례 한 줄에 대응한다. */
 export interface SBarChartSeries {
     /** 범례·툴팁에 표시할 이름 */
@@ -69,6 +78,11 @@ export interface SBarChartProps {
     height?: number | string;
     /** 막대를 눌렀을 때 */
     onBarClick?: (point: SBarChartPoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락
+     * (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (category: SBarChartTooltipCategory) => ReactNode;
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SBarChart/index.d.ts

@@ -1,2 +1,2 @@
-export { SBarChart, type SBarChartProps, type SBarChartSeries, type SBarChartPoint, type SBarChartPalette, type SBarChartColor, type SBarChartDirection, type SBarChartLegendPosition, } from './SBarChart';
+export { SBarChart, type SBarChartProps, type SBarChartSeries, type SBarChartPoint, type SBarChartTooltipCategory, type SBarChartPalette, type SBarChartColor, type SBarChartDirection, type SBarChartLegendPosition, } from './SBarChart';
 export { BAR_SIZE_MIN, BAR_SIZE_MAX, BAR_GAP } from './barChart.config';

package/dist/components/SCallout/README.md

@@ -9,6 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `type?` | `SCalloutType` | `'default'` | 콜아웃 타입 (색상·아이콘·타이틀 결정). - `default` — 옅은 회색 면. 흰 페이지(`background="frame"`) 위의 기본 안내. - `white` — 같은 안내인데 배경만 흰 면. 회색 면(`neutral`·`screen`) 위에서 default 가 묻힐 때. - `danger` — 좌측에 주의사항 타이틀이 붙는 경고. |
+| `showTitle?` | `boolean` | `true` | `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`. `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다. |
 | `message?` | `SCalloutMessage[]` | `[]` | 표시할 메시지 목록 (배열 중첩으로 depth 표현). 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다. |
 | `children?` | `ReactNode` | — | message 대신 직접 본문을 넣을 때 |
 | `className?` | `string` | — |  |

package/dist/components/SCallout/SCallout.d.ts

@@ -10,6 +10,11 @@ export interface SCalloutProps {
      * - `danger` — 좌측에 주의사항 타이틀이 붙는 경고.
      */
     type?: SCalloutType;
+    /**
+     * `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`.
+     * `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다.
+     */
+    showTitle?: boolean;
     /**
      * 표시할 메시지 목록 (배열 중첩으로 depth 표현).
      * 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다.
@@ -22,7 +27,7 @@ export interface SCalloutProps {
 }
 /**
  * SCallout — sd-callout 포팅.
- * default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시.
+ * default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시(showTitle 로 끌 수 있다).
  * 색상은 `--cmp-callout-*` 토큰 참조(white 만 예외 — SURFACE 주석 참고).
  * message 각 항목은 sanitizeInlineHtml 로 살균한 뒤 innerHTML 로 렌더한다 (원본 sd-callout 과 동일).
  */

package/dist/components/SDonutChart/README.md

@@ -11,14 +11,12 @@
 | `data` | `SDonutChartSlice[]` | — | 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 |
 | `palette?` | `SDonutChartPalette` | `'multi'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
 | `colors?` | `SDonutChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 |
-| `centerLabel?` | `ReactNode` | — | 가운데 윗줄에 적을 이름 (예: "총 주문") |
-| `centerValue?` | `ReactNode` | — | 가운데 큰 값. 주지 않으면 그려진 조각의 합계를 `formatValue` 로 적는다 |
-| `hideCenter?` | `boolean` | `false` | 가운데를 비운다 — 합계 대신 범례·툴팁만으로 읽게 할 때 |
 | `showValueLabel?` | `boolean` | `false` | 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 |
 | `showLegend?` | `boolean` | `true` | 범례를 보인다 |
 | `legendPosition?` | `SDonutChartLegendPosition` | `'top'` | 범례 위치 |
 | `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
-| `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 — 툴팁과 가운데 합계에 함께 쓰인다 |
+| `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
+| `tooltipFooter?` | `(slice: SDonutChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — | 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SDonutChart/SDonutChart.d.ts

@@ -36,12 +36,6 @@ export interface SDonutChartProps {
     palette?: SDonutChartPalette;
     /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */
     colors?: SDonutChartColor[];
-    /** 가운데 윗줄에 적을 이름 (예: "총 주문") */
-    centerLabel?: ReactNode;
-    /** 가운데 큰 값. 주지 않으면 그려진 조각의 합계를 `formatValue` 로 적는다 */
-    centerValue?: ReactNode;
-    /** 가운데를 비운다 — 합계 대신 범례·툴팁만으로 읽게 할 때 */
-    hideCenter?: boolean;
     /** 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 */
     showValueLabel?: boolean;
     /** 범례를 보인다 */
@@ -50,10 +44,15 @@ export interface SDonutChartProps {
     legendPosition?: SDonutChartLegendPosition;
     /** 조각에 마우스를 올리면 값 상자를 띄운다 */
     showTooltip?: boolean;
-    /** 값 표시 형식 — 툴팁과 가운데 합계에 함께 쓰인다 */
+    /** 값 표시 형식 */
     formatValue?: (value: number) => string;
     /** 조각을 눌렀을 때 */
     onSliceClick?: (slice: SDonutChartSlicePoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락
+     * (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (slice: SDonutChartSlicePoint) => ReactNode;
     /** 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 */
     className?: string;
     style?: CSSProperties;
@@ -61,11 +60,11 @@ export interface SDonutChartProps {
 /**
  * SDonutChart — 도넛 그래프.
  *
- * `SPieChart` 와 같이 **한 시점의 전체를 몫으로 나눈 것**을 보여주되, 가운데에 **합계**
- * (또는 그 전체를 대표하는 값)를 함께 적는다. 몫보다 전체 크기가 먼저 읽혀야 할 때 쓴다.
+ * 가운데가 빈 원그래프. `SPieChart` 와 같이 **한 시점의 전체를 몫으로 나눈 것**을 보여준다.
+ * 가운데 구멍에는 글자를 두지 않는다 — 합계 같은 값은 차트 바깥에 적는다.
  * 조각이 대여섯 개를 넘거나 몫끼리 견주는 것이 목적이면 `SBarChart` 가 맞다.
  *
  * 폭은 부모를 따르고(기본 100%), 그림은 그 폭을 한 변으로 하는 정사각형이다.
- * 고리 두께와 가운데 글자 자리도 폭에 비례해 늘고 준다.
+ * 구멍과 고리 두께도 폭에 비례해 늘고 준다.
  */
 export declare const SDonutChart: import("react").ForwardRefExoticComponent<SDonutChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SGhostButton/README.md

@@ -57,6 +57,7 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
  - [SInput](../SInput)
+ - [SMeatballButton](../SMeatballButton)
  - [SModalContainer](../SModalContainer)
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
@@ -92,6 +93,7 @@ graph TD;
   SGnb --> SGhostButton
   SGuide --> SGhostButton
   SInput --> SGhostButton
+  SMeatballButton --> SGhostButton
   SModalContainer --> SGhostButton
   SOverlayHeader --> SGhostButton
   SPage --> SGhostButton

package/dist/components/SLineChart/README.md

@@ -24,6 +24,7 @@
 | `showTooltip?` | `boolean` | `true` | 항목에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
 | `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SLineChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -104,3 +105,17 @@ export interface SLineChartPoint {
 }
 ```
 
+### SLineChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SLineChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다. 누적이어도 각 계열이 제 몫으로 가진 값이다 */
+  points: SLineChartPoint[];
+}
+```
+

package/dist/components/SLineChart/SLineChart.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 /** 점과 점을 잇는 방식. */
 export type SLineChartCurve = 'linear' | 'smooth';
 /** 범례 위치. */
@@ -25,6 +25,15 @@ export interface SLineChartPoint {
     /** 그 지점의 값. 누적이어도 **그 계열이 제 몫으로 가진 값**이다 */
     value: number;
 }
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SLineChartTooltipCategory {
+    /** 카테고리 인덱스 */
+    categoryIndex: number;
+    /** 카테고리 이름 */
+    name: string;
+    /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다. 누적이어도 각 계열이 제 몫으로 가진 값이다 */
+    points: SLineChartPoint[];
+}
 /** 한 계열 — 선 하나, 범례 한 줄에 대응한다. */
 export interface SLineChartSeries {
     /** 범례·툴팁에 표시할 이름 */
@@ -73,6 +82,11 @@ export interface SLineChartProps {
     height?: number | string;
     /** 점을 눌렀을 때 */
     onPointClick?: (point: SLineChartPoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락
+     * (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (category: SLineChartTooltipCategory) => ReactNode;
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SLineChart/index.d.ts

@@ -1 +1 @@
-export { SLineChart, type SLineChartProps, type SLineChartSeries, type SLineChartPoint, type SLineChartCurve, type SLineChartPalette, type SLineChartColor, type SLineChartLegendPosition, } from './SLineChart';
+export { SLineChart, type SLineChartProps, type SLineChartSeries, type SLineChartPoint, type SLineChartTooltipCategory, type SLineChartCurve, type SLineChartPalette, type SLineChartColor, type SLineChartLegendPosition, } from './SLineChart';

package/dist/components/SLineChart/lineChart.config.d.ts

@@ -47,13 +47,16 @@ export declare const BAND_MIN = 40;
 /** 점과 값 라벨 사이 간격(px) — 막대 차트와 같다. */
 export declare const VALUE_LABEL_GAP = 6;
 /**
- * 영역 채움의 불투명도.
+ * 영역 채움의 불투명도 — 선 바로 아래가 가장 진하고 바닥으로 갈수록 옅어진다.
  *
- * 선은 또렷하게 두고 영역만 물리는 값이다. 계열이 여럿이면 채움끼리 겹쳐 색이 탁해지는데,
- * 그건 채움을 진하게 잡아서가 아니라 겹쳐 그리는 것 자체의 한계다 — 계열이 많으면
- * `area` 를 끄거나 `stacked` 로 쌓는다.
+ * 선은 또렷하게 두고 영역만 물리는 값이다. 세로 그라데이션이라 채움이 바닥에서 거의
+ * 사라져, 계열이 여럿일 때 채움끼리 겹쳐 색이 탁해지는 것도 덜하다. 그래도 겹쳐 그리는
+ * 것 자체의 한계는 남으므로, 계열이 많으면 `area` 를 끄거나 `stacked` 로 쌓는다.
+ *
+ * 위쪽 30% 는 맞는 토큰이 없어 값으로 둔다(불투명도 토큰은 5·8·40·60·80 뿐이다).
  */
-export declare const AREA_OPACITY = "var(--opacity-040)";
+export declare const AREA_OPACITY_TOP = "30%";
+export declare const AREA_OPACITY_BOTTOM = "var(--opacity-005)";
 export declare const LINE_DATA_LABEL_COLOR = "var(--cmp-chart-bar-dataLabel-color-default)";
 /** 값 라벨의 타이포 — 짚은 항목만 굵고 크게 뜬다(막대 차트와 같은 규칙). */
 export declare const LINE_DATA_LABEL_TYPO = "typo-body-sm-medium";

package/dist/components/SMeatballButton/README.md

@@ -0,0 +1,67 @@
+# SMeatballButton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SMeatballButton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size?` | `SMeatballButtonSize` | `'sm'` | 버튼 크기 |
+| `intent?` | `SMeatballButtonIntent` | `'default'` | 색상 의도. 어두운 배경 위에서는 inverse |
+| `items?` | `SMeatballButtonItem[]` | `[]` | 메뉴 항목 목록 |
+| `tooltipText?` | `string` | `'기능 더 보기'` | 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다. |
+| `ariaLabel?` | `string` | — | 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 '기능 더 보기' |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `className?` | `string` | — | 버튼을 감싸는 요소의 클래스. 위치 조정(absolute 배치 등)용 |
+| `style?` | `CSSProperties` | — | 버튼을 감싸는 요소의 스타일. 위치 조정용 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onItemClick` | `(value: string \| number) => void` | 메뉴 항목 선택 |
+| `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `open` | `() => void` | 메뉴 열기 |
+| `close` | `() => void` | 메뉴 닫기 |
+
+## Types
+
+### SMeatballButtonSize
+
+```ts
+export type SMeatballButtonSize = SGhostButtonSize;
+```
+
+### SMeatballButtonIntent
+
+```ts
+export type SMeatballButtonIntent = 'default' | 'inverse';
+```
+
+### SMeatballButtonItem
+
+```ts
+/** 메뉴 항목 — SDropdownButton 과 같은 모양이다 */
+export type SMeatballButtonItem = SDropdownButtonItem;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+
+### Graph
+
+```mermaid
+graph TD;
+  SMeatballButton --> SGhostButton
+  style SMeatballButton fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SMeatballButton/SMeatballButton.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties } from 'react';
+import { type SGhostButtonSize } from '../SGhostButton';
+import type { SDropdownButtonItem } from '../SDropdownButton';
+export type SMeatballButtonSize = SGhostButtonSize;
+export type SMeatballButtonIntent = 'default' | 'inverse';
+/** 메뉴 항목 — SDropdownButton 과 같은 모양이다 */
+export type SMeatballButtonItem = SDropdownButtonItem;
+export interface SMeatballButtonHandle {
+    /** 메뉴 열기 */
+    open: () => void;
+    /** 메뉴 닫기 */
+    close: () => void;
+}
+export interface SMeatballButtonProps {
+    /** 버튼 크기 */
+    size?: SMeatballButtonSize;
+    /** 색상 의도. 어두운 배경 위에서는 inverse */
+    intent?: SMeatballButtonIntent;
+    /** 메뉴 항목 목록 */
+    items?: SMeatballButtonItem[];
+    /** 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다. */
+    tooltipText?: string;
+    /** 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 '기능 더 보기' */
+    ariaLabel?: string;
+    /** 비활성 */
+    disabled?: boolean;
+    /** 메뉴 항목 선택 */
+    onItemClick?: (value: string | number) => void;
+    /** 열림/닫힘 변경 */
+    onOpenChange?: (open: boolean) => void;
+    /** 버튼을 감싸는 요소의 클래스. 위치 조정(absolute 배치 등)용 */
+    className?: string;
+    /** 버튼을 감싸는 요소의 스타일. 위치 조정용 */
+    style?: CSSProperties;
+}
+export declare const SMeatballButton: import("react").ForwardRefExoticComponent<SMeatballButtonProps & import("react").RefAttributes<SMeatballButtonHandle>>;

package/dist/components/SMeatballButton/index.d.ts

@@ -0,0 +1 @@
+export { SMeatballButton, type SMeatballButtonProps, type SMeatballButtonHandle, type SMeatballButtonItem, type SMeatballButtonSize, type SMeatballButtonIntent, } from './SMeatballButton';

package/dist/components/SPage/README.md

@@ -28,6 +28,7 @@
 |------|------|---------|-------------|
 | `background?` | `SPageBackground` | `'frame'` | 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕. 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다. |
 | `scrollEndSpacing?` | `boolean` | `false` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. **기본은 꺼져 있다.** 페이지 스크롤 자체가 예외이기 때문이다 — 대부분의 화면은 본문이 창을 꽉 채우고 스크롤은 각 영역 안에서 일어난다. 여백을 조건 없이 붙이면 내용이 화면에 거의 딱 맞는 페이지까지 그 여백 때문에 스크롤되게 만든다. 페이지가 실제로 스크롤되는 화면(`contentHeight="auto"` + 내용이 창보다 김)에서만 켠다. 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 켜지 않는다. |
+| `padding?` | `SPagePadding` | `'default'` | 본문 안쪽 여백. 기본은 `default` — `--cmp-pageBody-padding-default` 를 사방에 넣는다. `none` 은 필터 바처럼 **가장자리까지 차는 블록이 맨 위에 서는** 화면용이다. 패딩을 끄면 그 아래 블록이 `p-[var(--cmp-pageBody-padding-default)]` 로 같은 토큰의 여백을 직접 잡는다 — `p-sd-*` 로 적으면 토큰이 바뀌어도 따라가지 않는다. 사방 패딩만 끄고 `scrollEndSpacing` 은 그대로다. (`SPopup`·`SSectionHeaderCard` 의 `padding="none"` 과 같은 관용구) |
 | `overlayScrollbar?` | `boolean` | `false` | true면 네이티브 스크롤바를 숨기고 SPage 위에 오버레이 스크롤바를 얹는다. 스크롤바가 레이아웃 폭을 차지하지 않아 내부 콘텐츠 폭이 줄어들지 않는다. |
 | `contentHeight?` | `SPageContentHeight` | `'auto'` | 본문 높이 모드. 기본은 `auto` — 콘텐츠가 흐르고 넘치면 페이지가 스크롤한다. `fill` 은 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다. 표가 자기 안에서 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용이다. 본문 루트에 `h-full` 이 먹으므로 `<div className="flex h-full min-h-0 flex-col">` + `<STable className="min-h-0 flex-1" />` 구성이 성립한다. `fill` 에서는 페이지가 스크롤하지 않으므로 `scrollEndSpacing` 이 무시된다. |
 | `contentWidth?` | `SPageContentWidth` | `'full'` | 본문 가로 폭 모드. 기본은 `full` — 창이 넓어지면 본문도 같이 넓어진다(반응형). `fixed`·`fixedCenter` 는 본문을 **레이아웃 최소 폭일 때의 폭**으로 고정한다. 최소 폭 기준으로 그린 시안이 넓은 모니터에서 늘어나 성기어지는 것을 막는 모드다. 남는 폭은 `fixed` 면 오른쪽에, `fixedCenter` 면 좌우로 나뉘어 페이지 배경으로 남는다. 고정 폭은 GNB 폭·접힘을 반영해 저절로 따라오므로 앱이 숫자를 쓸 일은 없다. 창이 최소 폭보다 좁아지면 세 모드가 모두 같다 — 남는 폭이 없어 규칙이 꺼지고, 모자란 몫을 지금까지처럼 이 영역이 가로 스크롤로 삼킨다. 같은 열에 `SPageHeader` 가 있으면 헤더도 같은 폭·정렬을 따른다(제목과 본문의 좌우 끝이 맞는다). `SLayout` 밖에서는 기준이 될 최소 폭이 없으므로 무시된다. |
@@ -46,6 +47,12 @@ export type SPageHeaderVariant = (typeof PAGE_HEADER_VARIANTS)[number];
 export type SPageBackground = (typeof PAGE_BACKGROUNDS)[number];
 ```
 
+### SPagePadding
+
+```ts
+export type SPagePadding = (typeof PAGE_PADDINGS)[number];
+```
+
 ### SPageContentHeight
 
 ```ts
@@ -82,6 +89,18 @@ export const PAGE_HEADER_VARIANTS = ['plain', 'bar'] as const;
 export const PAGE_BACKGROUNDS = ['frame', 'neutral', 'screen'] as const;
 ```
 
+### PAGE_PADDINGS
+
+```ts
+/**
+ * 본문 안쪽 여백 모드.
+ * - default: SPage 가 --cmp-pageBody-padding-default 로 사방 패딩을 넣는다
+ * - none:    패딩을 끈다. 가장자리까지 차는 블록(필터 바 등)이 맨 위에 서고, 그 아래 블록이
+ *            같은 토큰으로 여백을 직접 잡는 화면용. SPopup·SSectionHeaderCard 의 padding="none" 과 같은 관용구.
+ */
+export const PAGE_PADDINGS = ['default', 'none'] as const;
+```
+
 ### PAGE_CONTENT_HEIGHTS
 
 ```ts

package/dist/components/SPage/SPage.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { SPageBackground, SPageContentHeight, SPageContentWidth } from './page.config';
+import type { SPageBackground, SPageContentHeight, SPageContentWidth, SPagePadding } from './page.config';
 export interface SPageProps extends HTMLAttributes<HTMLElement> {
     /**
      * 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕.
@@ -17,6 +17,15 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
      * 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 켜지 않는다.
      */
     scrollEndSpacing?: boolean;
+    /**
+     * 본문 안쪽 여백. 기본은 `default` — `--cmp-pageBody-padding-default` 를 사방에 넣는다.
+     *
+     * `none` 은 필터 바처럼 **가장자리까지 차는 블록이 맨 위에 서는** 화면용이다. 패딩을 끄면
+     * 그 아래 블록이 `p-[var(--cmp-pageBody-padding-default)]` 로 같은 토큰의 여백을 직접 잡는다 —
+     * `p-sd-*` 로 적으면 토큰이 바뀌어도 따라가지 않는다. 사방 패딩만 끄고 `scrollEndSpacing` 은
+     * 그대로다. (`SPopup`·`SSectionHeaderCard` 의 `padding="none"` 과 같은 관용구)
+     */
+    padding?: SPagePadding;
     /**
      * true면 네이티브 스크롤바를 숨기고 SPage 위에 오버레이 스크롤바를 얹는다.
      * 스크롤바가 레이아웃 폭을 차지하지 않아 내부 콘텐츠 폭이 줄어들지 않는다.
@@ -53,7 +62,7 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
  * SPage — SLayout 안에서 남은 공간을 채우는 스크롤 콘텐츠 영역.
  * 스크롤은 SLayout(overflow:hidden)이 잡아둔 경계 안에서 이 영역에만 생긴다.
  * 창이 SLayout 의 최소 폭보다 좁을 때 생기는 가로 스크롤도 여기 걸린다(문서는 스크롤되지 않는다).
- * 패딩은 className 으로, 배경은 background 로 정한다(className 으로도 덮어쓸 수 있다).
+ * 패딩은 padding 으로, 배경은 background 로 정한다(둘 다 className 으로도 덮어쓸 수 있다).
  *
  * - header="fix": flex 자식으로 남은 가로 공간을 채운다.
  * - header="full": SLayout 이 깐 grid 의 "page" 영역 = 상단바 아래·메뉴 오른쪽 자리를 차지한다.

package/dist/components/SPage/index.d.ts

@@ -1,3 +1,3 @@
 export { SPage, type SPageProps } from './SPage';
-export { PAGE_BACKGROUNDS, type SPageBackground, PAGE_CONTENT_HEIGHTS, type SPageContentHeight, PAGE_CONTENT_WIDTHS, type SPageContentWidth, PAGE_HEADER_VARIANTS, type SPageHeaderVariant, } from './page.config';
+export { PAGE_BACKGROUNDS, type SPageBackground, PAGE_CONTENT_HEIGHTS, type SPageContentHeight, PAGE_CONTENT_WIDTHS, type SPageContentWidth, PAGE_PADDINGS, type SPagePadding, PAGE_HEADER_VARIANTS, type SPageHeaderVariant, } from './page.config';
 export { SPageHeader, type SPageHeaderProps } from './SPageHeader';

package/dist/components/SPage/page.config.d.ts

@@ -14,6 +14,14 @@ export type SPageBackground = (typeof PAGE_BACKGROUNDS)[number];
  */
 export declare const PAGE_CONTENT_HEIGHTS: readonly ["auto", "fill"];
 export type SPageContentHeight = (typeof PAGE_CONTENT_HEIGHTS)[number];
+/**
+ * 본문 안쪽 여백 모드.
+ * - default: SPage 가 --cmp-pageBody-padding-default 로 사방 패딩을 넣는다
+ * - none:    패딩을 끈다. 가장자리까지 차는 블록(필터 바 등)이 맨 위에 서고, 그 아래 블록이
+ *            같은 토큰으로 여백을 직접 잡는 화면용. SPopup·SSectionHeaderCard 의 padding="none" 과 같은 관용구.
+ */
+export declare const PAGE_PADDINGS: readonly ["default", "none"];
+export type SPagePadding = (typeof PAGE_PADDINGS)[number];
 /**
  * 본문 가로 폭 모드 — 창이 레이아웃 최소 폭보다 **넓을 때** 본문이 어떻게 설지.
  * - full:        남는 폭을 본문이 다 쓴다 (반응형)

package/dist/components/SPieChart/README.md

@@ -16,6 +16,7 @@
 | `legendPosition?` | `SPieChartLegendPosition` | `'top'` | 범례 위치 |
 | `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
+| `tooltipFooter?` | `(slice: SPieChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — | 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SPieChart/SPieChart.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 /** 범례 위치. */
 export type SPieChartLegendPosition = 'top' | 'bottom';
 /**
@@ -48,6 +48,11 @@ export interface SPieChartProps {
     formatValue?: (value: number) => string;
     /** 조각을 눌렀을 때 */
     onSliceClick?: (slice: SPieChartSlicePoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락
+     * (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (slice: SPieChartSlicePoint) => ReactNode;
     /** 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 */
     className?: string;
     style?: CSSProperties;

package/dist/docs/RecipeGallery.d.ts

@@ -0,0 +1,13 @@
+/**
+ * "페이지 레시피" 상단의 카드 그리드 — 레시피를 화면으로 먼저 보고 골라 들어가게 한다.
+ *
+ * 미리보기는 그림이 아니라 **레시피 파일 그 자체**를 축소해 렌더한 것이다. 그래서 레시피 코드가
+ * 바뀌면 카드도 함께 바뀌고, 따로 갱신할 자산이 없다. 규칙 설명은 이 아래에 AGENTS.md §4 가
+ * 그대로 렌더되므로 여기에는 쓰지 않는다.
+ *
+ * 레시피는 페이지 **안**의 골격이라 GNB·레이아웃은 그리지 않는다 — 셸 조합은 Layout Builder 의 몫이다.
+ *
+ * 새 레시피를 `src/recipes/` 에 만들면 여기에 한 줄을 더한다.
+ */
+import type { ReactNode } from 'react';
+export default function RecipeGallery(): ReactNode;