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

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/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;

package/dist/index.cjs

@@ -12761,6 +12761,10 @@ var BACKGROUND_CLASS = {
   neutral: "bg-[var(--sys-color-bg-neutralLight)]",
   screen: "bg-[var(--sys-color-bg-screen)]"
 };
+var PADDING_CLASS2 = {
+  default: "p-[var(--cmp-pageBody-padding-default)]",
+  none: "p-0"
+};
 var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
   frame: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
   neutral: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
@@ -12776,6 +12780,7 @@ var setForwardedRef = (ref, node) => {
 var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = false,
+  padding = "default",
   overlayScrollbar = false,
   contentHeight = "auto",
   contentWidth = "full",
@@ -12814,7 +12819,8 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
     {
       ref: setMainRef,
       className: cn(
-        "box-border min-h-0 min-w-0 flex-1 overflow-auto p-[var(--cmp-pageBody-padding-default)]",
+        "box-border min-h-0 min-w-0 flex-1 overflow-auto",
+        PADDING_CLASS2[padding],
         overlayScrollbar && "h-full",
         !fill && scrollEndSpacing && "pb-[var(--cmp-pageBody-padding-scrollEnd)]",
         overlayScrollbar ? SCROLLBAR_HIDDEN_CLASS : `${SCROLLBAR_CLASS} ${NATIVE_SCROLLBAR_BACKGROUND_CLASS[background]}`,
@@ -12854,6 +12860,7 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
 // src/components/SPage/page.config.ts
 var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
 var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
+var PAGE_PADDINGS = ["default", "none"];
 var PAGE_CONTENT_WIDTHS = ["full", "fixed", "fixedCenter"];
 var PAGE_HEADER_VARIANTS = ["plain", "bar"];
 var SPageHeader = /* @__PURE__ */ withDisplayName(
@@ -27009,6 +27016,7 @@ exports.PAGE_BACKGROUNDS = PAGE_BACKGROUNDS;
 exports.PAGE_CONTENT_HEIGHTS = PAGE_CONTENT_HEIGHTS;
 exports.PAGE_CONTENT_WIDTHS = PAGE_CONTENT_WIDTHS;
 exports.PAGE_HEADER_VARIANTS = PAGE_HEADER_VARIANTS;
+exports.PAGE_PADDINGS = PAGE_PADDINGS;
 exports.RangeCalendar = RangeCalendar;
 exports.SAccountListBox = SAccountListBox;
 exports.SActionModal = SActionModal;