sellmate-design-system-react 9.0.0-beta.40 → 9.0.0-beta.41

package/dist/components/SGnb/SGnb.d.ts

@@ -45,19 +45,19 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     type?: SGnbType;
     /**
      * 상단바 구조: fix(GNB 폭 고정) / full(레이아웃 전폭). 미지정 시 SLayout 의 header 를 따른다.
-     * 단, useRail 이고 레일에 children 없는 아이템이 있으면 메뉴 폭이 출렁이므로 full 로 강제된다.
+     * 단, showRail 이고 레일에 children 없는 아이템이 있으면 메뉴 폭이 출렁이므로 full 로 강제된다.
      */
     header?: SGnbHeader;
     /** 색상 테마: light / dark */
     color?: SGnbColor;
-    /** 메뉴 트리 (depth1 → depth2 → depth3). useRail 이면 첫 depth 가 레일이 되고 그 children 이 depth1 이 된다. */
+    /** 메뉴 트리 (depth1 → depth2 → depth3). showRail 이면 첫 depth 가 레일이 되고 그 children 이 depth1 이 된다. */
     items: SGnbMenuItem[];
     /**
      * 좌측 레일 사용 여부. 켜면 items 의 첫 depth 가 아이콘+라벨 버튼의 세로 레일로 서고,
-     * 선택된 레일 아이템의 children 이 오른쪽 메뉴 패널에 깔린다. 미지정 시 SLayout 의 useRail 을 따른다.
+     * 선택된 레일 아이템의 children 이 오른쪽 메뉴 패널에 깔린다. 미지정 시 SLayout 의 showRail 을 따른다.
      * children 없는 레일 아이템이 활성이면 메뉴 패널은 렌더되지 않고 레일만 남는다.
      */
-    useRail?: boolean;
+    showRail?: boolean;
     /** 현재 선택된 아이템 value */
     value?: string;
     /** 선택 변경 (sdUpdate) */
@@ -67,7 +67,7 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     /** 접힘(레일) 상태. 미지정 시 SLayout 의 folded 를 따른다. */
     folded?: boolean;
     /** 접힘 토글 (sdFoldChange) */
-    onFoldChange?: (folded: boolean) => void;
+    onFoldedChange?: (folded: boolean) => void;
     /** 앱런처(그리드) 버튼 클릭. 미지정 시 런처 버튼을 렌더하지 않는다. 접힘 레일(fix)에는 폴드 버튼만 남으므로 표시되지 않는다. */
     onLauncherClick?: () => void;
     /** 상단바 로고 영역 (slot). header="full" 이면 폭이 140px 로 고정된다. */
@@ -80,12 +80,12 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     topContent?: ReactNode;
     /**
      * 레일 상단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고
-     * 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. useRail 일 때만 렌더된다.
+     * 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. showRail 일 때만 렌더된다.
      */
     railTop?: ReactNode;
     /**
      * 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고
-     * 이 슬롯은 레일 하단에 붙어 고정된다. useRail 일 때만 렌더된다.
+     * 이 슬롯은 레일 하단에 붙어 고정된다. showRail 일 때만 렌더된다.
      */
     railFooter?: ReactNode;
     /**
@@ -123,7 +123,7 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     /**
      * system 슬롯(`SGnbSystem`). 놓이는 자리와 형태는 `header` 가 정한다.
      * - fix : GNB 맨 아래 세로 판. 펼치면 메뉴 컬럼 바닥에, 접히면 `foldedFooter` 아래 레일 바닥에
-     *   여백 없이 붙는다. useRail 에서 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로
+     *   여백 없이 붙는다. showRail 에서 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로
      *   이 슬롯도 함께 빠진다.
      * - full: 전폭 상단바 오른쪽 끝에 가로 한 줄로 선다. 상단바는 접어도 남으므로 조각들도 늘 남는다.
      * 색·형태는 GNB 가 내려주므로 SGnbSystem 에 다시 넘기지 않아도 된다.
@@ -142,7 +142,7 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
  * - full: 상단바가 레이아웃 전폭을 가로지르고 그 아래 [메뉴 | 페이지]. 접으면 메뉴만 사라진다.
  *   system 조각들도 메뉴 바닥이 아니라 이 상단바 오른쪽 끝으로 올라온다.
  *
- * useRail 이면 items 의 첫 depth 가 좌측 레일(아이콘+라벨 68px)로 서고, 선택된 레일 아이템의
+ * showRail 이면 items 의 첫 depth 가 좌측 레일(아이콘+라벨 68px)로 서고, 선택된 레일 아이템의
  * children 이 메뉴 패널의 depth1 이 된다 — 트리는 그대로 두고 어디부터 그릴지만 바뀐다.
  * children 없는 레일 아이템은 자기 자신이 선택(리프)이라 메뉴 패널을 렌더하지 않는다. 이런 리프가
  * 하나라도 있으면 활성에 따라 메뉴 폭이 출렁이므로 header 는 full 로 강제해 상단바를 전폭에 고정한다.

package/dist/components/SGnb/gnb.config.d.ts

@@ -80,7 +80,7 @@ export declare const GNB_COMMON: {
     foldWidth: string;
 };
 /**
- * 좌측 레일(useRail) — items 의 첫 depth 를 아이콘+라벨 버튼으로 세우는 1차 내비게이션.
+ * 좌측 레일(showRail) — items 의 첫 depth 를 아이콘+라벨 버튼으로 세우는 1차 내비게이션.
  * 선택 색은 레일 전용 토큰이 없어 메뉴 아이템의 선택 색(item-bg-selected / item-fg-selected)을 함께 쓴다.
  */
 export declare const GNB_RAIL: {
@@ -154,7 +154,7 @@ export declare const GNB_TOP_ICON_SIZE = 24;
  */
 export declare const GNB_FULL_LOGO_WIDTH_NO_LAUNCHER: number;
 /**
- * useRail 에서 value 를 품은 첫 depth(레일) 아이템의 value.
+ * showRail 에서 value 를 품은 첫 depth(레일) 아이템의 value.
  * value 자체가 레일 아이템이면 그 값을, 어디에도 없으면 undefined 를 반환한다.
  */
 export declare function findGnbRailValue(items: SGnbMenuItem[], value: string): string | undefined;

package/dist/components/SImage/README.md

@@ -15,7 +15,7 @@
 | `position?` | `string` | `'50% 50%'` | 이미지 정렬 위치 (object-position) |
 | `loading?` | `'lazy' \| 'eager'` | `'lazy'` | 브라우저 로딩 방식 |
 | `loadingShowDelay?` | `number` | `0` | 스피너를 띄우기까지 기다리는 시간(ms). 이 시간 안에 로드되면 스피너를 아예 그리지 않는다 — 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다. |
-| `noSpinner?` | `boolean` | `false` | 로딩 중에도 스피너를 그리지 않는다 |
+| `showSpinner?` | `boolean` | `true` | 로딩 중 스피너를 그릴지. 끄면 `loadingSlot` 도 없을 때 로딩 표시가 아무것도 남지 않는다. |
 | `loadingSlot?` | `ReactNode` | — | 로딩 중 표시를 직접 지정한다 (기본: 스피너) |
 | `errorSlot?` | `ReactNode` | — | 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) |
 | `imgProps?` | `ImgHTMLAttributes<HTMLImageElement>` | — | 안쪽 `<img>` 로 넘길 네이티브 속성 (srcSet · sizes · crossOrigin · draggable 등) |

package/dist/components/SImage/SImage.d.ts

@@ -19,8 +19,8 @@ export interface SImageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoa
      * 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다.
      */
     loadingShowDelay?: number;
-    /** 로딩 중에도 스피너를 그리지 않는다 */
-    noSpinner?: boolean;
+    /** 로딩 중 스피너를 그릴지. 끄면 `loadingSlot` 도 없을 때 로딩 표시가 아무것도 남지 않는다. */
+    showSpinner?: boolean;
     /** 로딩 중 표시를 직접 지정한다 (기본: 스피너) */
     loadingSlot?: ReactNode;
     /** 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) */

package/dist/components/SInput/README.md

@@ -18,9 +18,9 @@
 | `clearable?` | `boolean` | `false` | 지우기 버튼 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
 | `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
-| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
-| `inputClass?` | `string` | — | 내부 input 요소 className |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `inputClassName?` | `string` | — | 내부 input 요소 className |
 | `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
 | `label?` | `string` | — |  |
 | `labelWidth?` | `number \| string` | — |  |

package/dist/components/SInput/SInput.d.ts

@@ -30,12 +30,12 @@ export interface SInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     rules?: Rule[];
     /** 필드 상태 ('default' | 'pass' | 'error') */
     status?: SFieldStatus;
-    /** 포커스 상태 (제어/반영) */
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
     focused?: boolean;
-    /** 호버 상태 (제어/반영) */
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
     hovered?: boolean;
     /** 내부 input 요소 className */
-    inputClass?: string;
+    inputClassName?: string;
     /** 내부 input 요소 style */
     inputStyle?: CSSProperties;
     label?: string;

package/dist/components/SLayout/README.md

@@ -10,7 +10,7 @@
 |------|------|---------|-------------|
 | `type?` | `SLayoutType` | `'box'` | 메뉴 스타일: box(라운드) / belt(풀폭 행). 자식 SGnb 가 이 값을 따른다. |
 | `header?` | `SLayoutHeader` | `'fix'` | 레이아웃 구조: fix(가로 분할) / full(풀폭 상단바). 자식 SGnb·SPage 가 이 값을 따른다. |
-| `useRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다. 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
+| `showRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다. 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
 | `folded?` | `boolean` | — | GNB 접힘 상태 (controlled) |
 | `defaultFolded?` | `boolean` | `false` | GNB 초기 접힘 상태 (uncontrolled) |
 

package/dist/components/SLayout/SLayout.d.ts

@@ -42,7 +42,7 @@ export interface SLayoutContextValue {
      */
     header: SLayoutHeader;
     /** GNB 좌측 레일 사용 여부 — 자식 SGnb 가 따른다 */
-    useRail: boolean;
+    showRail: boolean;
     /** GNB 접힘 상태 */
     folded: boolean;
     /** 접힘 상태 변경 */
@@ -81,7 +81,7 @@ export interface SLayoutProps extends HTMLAttributes<HTMLDivElement> {
      * GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다.
      * 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다.
      */
-    useRail?: boolean;
+    showRail?: boolean;
     /** GNB 접힘 상태 (controlled) */
     folded?: boolean;
     /** GNB 초기 접힘 상태 (uncontrolled) */

package/dist/components/SList/README.md

@@ -9,8 +9,16 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `children?` | `ReactNode` | — | 리스트 컨테이너 내부에 렌더링할 내용 |
-| `useGap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
-| `usePadding?` | `boolean` | `false` | 리스트 컨테이너 padding 토큰 적용 여부 |
+| `gap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
+| `padding?` | `SListPadding` | `'none'` | 컨테이너 안쪽 여백. 기본은 `none` — 목록이 담긴 면이 이미 여백을 쥔 경우가 많다. 목록이 배경 위에 직접 얹혀 스스로 여백을 쥐어야 할 때만 `default`. |
+
+## Types
+
+### SListPadding
+
+```ts
+export type SListPadding = 'default' | 'none';
+```
 
 ## Dependencies
 

package/dist/components/SList/SList.d.ts

@@ -1,10 +1,14 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+export type SListPadding = 'default' | 'none';
 export interface SListProps extends HTMLAttributes<HTMLDivElement> {
     /** 리스트 컨테이너 내부에 렌더링할 내용 */
     children?: ReactNode;
     /** 리스트 아이템 사이 gap 토큰 적용 여부 */
-    useGap?: boolean;
-    /** 리스트 컨테이너 padding 토큰 적용 여부 */
-    usePadding?: boolean;
+    gap?: boolean;
+    /**
+     * 컨테이너 안쪽 여백. 기본은 `none` — 목록이 담긴 면이 이미 여백을 쥔 경우가 많다.
+     * 목록이 배경 위에 직접 얹혀 스스로 여백을 쥐어야 할 때만 `default`.
+     */
+    padding?: SListPadding;
 }
 export declare const SList: import("react").ForwardRefExoticComponent<SListProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-export { SList, type SListProps } from './SList';
+export { SList, type SListPadding, type SListProps } from './SList';

package/dist/components/SLoadingModal/README.md

@@ -13,7 +13,7 @@
 | `state?` | `SLoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
 | `progress?` | `number` | — | 진행률 (0–100) — 지정 시 determinate 스피너 |
 | `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
-| `useButton?` | `boolean` | `false` | 하단 버튼 표시 |
+| `showButton?` | `boolean` | `false` | 하단 버튼 표시 |
 | `buttonLabel?` | `string` | — | 버튼 레이블 (없으면 state 기본값) |
 | `width?` | `number \| string` | `520` |  |
 | `height?` | `number \| string` | `320` |  |

package/dist/components/SLoadingModal/SLoadingModal.d.ts

@@ -13,7 +13,7 @@ export interface SLoadingModalProps {
     /** 메시지 (없으면 state 기본값) */
     message?: string | string[];
     /** 하단 버튼 표시 */
-    useButton?: boolean;
+    showButton?: boolean;
     /** 버튼 레이블 (없으면 state 기본값) */
     buttonLabel?: string;
     /** 버튼 클릭 (sdClick) */
@@ -22,4 +22,4 @@ export interface SLoadingModalProps {
     height?: number | string;
 }
 /** SLoadingModal — sd-loading-modal 포팅. state(loading/error) + progress + 옵션 버튼. */
-export declare function SLoadingModal({ open, onOpenChange, onClose, persistent, state, progress, message, useButton, buttonLabel, onButtonClick, width, height, }: SLoadingModalProps): import("react").JSX.Element;
+export declare function SLoadingModal({ open, onOpenChange, onClose, persistent, state, progress, message, showButton, buttonLabel, onButtonClick, width, height, }: SLoadingModalProps): import("react").JSX.Element;

package/dist/components/SModal/README.md

@@ -61,7 +61,7 @@ SModal.confirm({
   .onCancel(() => {});
 ```
 
-**옵션 (`SConfirmOptions`)** — 선언형 `SConfirmModalProps` 에서 제어 흐름 props(`open`/`onOpenChange`/`onOk`/`onCancel`/`onClose`)를 제외한 전부. 주요 키: `type`, `modalTitle`, `topMessage`/`bottomMessage`, `mainButtonLabel`/`mainButtonName`, `subButtonLabel`, `tagSlot`/`optionSlot`/`contentSlot`, `persistent`.
+**옵션 (`SConfirmOptions`)** — 선언형 `SConfirmModalProps` 에서 제어 흐름 props(`open`/`onOpenChange`/`onOk`/`onCancel`/`onClose`)를 제외한 전부. 주요 키: `type`, `modalTitle`, `topMessage`/`bottomMessage`, `mainButtonLabel`/`mainButtonOutline`, `subButtonLabel`, `tagSlot`/`optionSlot`/`contentSlot`, `persistent`.
 
 ---
 

package/dist/components/SNumberInput/README.md

@@ -13,12 +13,12 @@
 | `min?` | `number` | `Number.NEGATIVE_INFINITY` | 최솟값 |
 | `max?` | `number` | `Number.POSITIVE_INFINITY` | 최댓값 |
 | `step?` | `number` | `1` | 스텝 단위 |
-| `useButton?` | `boolean` | `false` | 증감 버튼 표시 |
-| `useDecimal?` | `boolean` | `false` | 소수점 입력 허용 |
+| `showButton?` | `boolean` | `false` | 증감 버튼 표시 |
+| `allowDecimal?` | `boolean` | `false` | 소수점 입력 허용 |
 | `maxDecimalLength?` | `number` | — | 소수점 이하 최대 자리수 |
 | `inputPrefix?` | `string` | `''` | 입력 앞 접두 텍스트 |
 | `inputSuffix?` | `string` | `''` | 입력 뒤 접미 텍스트 |
-| `inputClass?` | `string` | — | 네이티브 input className |
+| `inputClassName?` | `string` | — | 네이티브 input className |
 | `inputStyle?` | `CSSProperties` | — | 네이티브 input style |
 | `autoFocus?` | `boolean` | — | 마운트 시 자동 포커스 |
 | `name?` | `string` | — | 폼 연동 name |
@@ -27,8 +27,8 @@
 | `readOnly?` | `boolean` | `false` |  |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 검증 |
 | `status?` | `SFieldStatus` | — |  |
-| `focused?` | `boolean` | — |  |
-| `hovered?` | `boolean` | — |  |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `label?` | `string` | — |  |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |

package/dist/components/SNumberInput/SNumberInput.d.ts

@@ -20,9 +20,9 @@ export interface SNumberInputProps {
     /** 스텝 단위 */
     step?: number;
     /** 증감 버튼 표시 */
-    useButton?: boolean;
+    showButton?: boolean;
     /** 소수점 입력 허용 */
-    useDecimal?: boolean;
+    allowDecimal?: boolean;
     /** 소수점 이하 최대 자리수 */
     maxDecimalLength?: number;
     /** 입력 앞 접두 텍스트 */
@@ -30,7 +30,7 @@ export interface SNumberInputProps {
     /** 입력 뒤 접미 텍스트 */
     inputSuffix?: string;
     /** 네이티브 input className */
-    inputClass?: string;
+    inputClassName?: string;
     /** 네이티브 input style */
     inputStyle?: CSSProperties;
     /** 마운트 시 자동 포커스 */
@@ -47,7 +47,9 @@ export interface SNumberInputProps {
     /** 유효성 규칙 — blur 시 검증 */
     rules?: Rule[];
     status?: SFieldStatus;
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
     focused?: boolean;
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
     hovered?: boolean;
     label?: string;
     labelWidth?: number | string;

package/dist/components/SPage/README.md

@@ -9,10 +9,10 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `title` | `string` | — | 타이틀 (필수) |
-| `subText?` | `string` | — | 서브 텍스트. fix=true 면 타이틀 오른쪽에, fix=false(기본) 면 타이틀 아래에 놓인다. |
-| `fix?` | `boolean` | `false` | true: 높이 56 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄. false(기본): 최소 높이 66(상하 패딩 20/16 안에서 타이틀 한 줄 높이로 결정) + 구분선 없음, 서브 텍스트가 타이틀 아래로 내려간다. 배경은 두 베리에이션 모두 흰 면이다. |
+| `subText?` | `string` | — | 서브 텍스트. `bar` 면 타이틀 오른쪽에, `plain` 이면 타이틀 아래에 놓인다. |
+| `variant` | `SPageHeaderVariant` | — | 제목 영역의 모양 — **필수다.** - `plain`: 최소 높이(상하 패딩 안에서 타이틀 한 줄 높이로 결정) + 구분선 없음, 서브 텍스트가 타이틀 아래로 내려간다. - `bar`: 높이 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄. 기본값을 두지 않는 이유는 이 값이 **앱 전체에서 하나로 고정돼야 하는 값**이기 때문이다. 기본값이 있으면 안 준 페이지만 조용히 다른 모양이 되어, 메뉴를 옮길 때 제목 줄의 높이와 구분선이 페이지마다 튄다. 셸을 한 번 감싸 쓰면(§4-1 AppShell) 지정하는 자리도 한 곳이다. 배경은 두 베리에이션 모두 흰 면이다. `SLayout` 의 `header`(`'fix' | 'full'`)와는 다른 축이다 — 그쪽은 상단바가 GNB 컬럼 안에 있는지 화면 전폭인지를 정한다. |
 | `slot?` | `ReactNode` | — | 오른쪽 끝 커스텀 슬롯. 가이드 링크·액션 버튼 등 페이지마다 다른 것이 온다. |
-| `scrolled?` | `boolean` | — | 아래 콘텐츠가 스크롤을 시작했는지. fix=false 일 때만 의미가 있다: 스크롤이 시작되면 그림자(floating)가 들어가 스크롤되는 콘텐츠 위에 뜬 것처럼 보인다. 배경은 흰 면 그대로다 — scrolled 가 더하는 것은 그림자뿐이다. `SLayout` 안에 놓았으면 **주지 않는다** — 같은 열의 `SPage` 가 자기 스크롤 상태를 올려 자동으로 들어온다. 스크롤 컨테이너를 앱이 직접 쥔 단독 배치에서만 `onScroll` 에서 준다. |
+| `scrolled?` | `boolean` | — | 아래 콘텐츠가 스크롤을 시작했는지. `plain` 일 때만 의미가 있다: 스크롤이 시작되면 그림자(floating)가 들어가 스크롤되는 콘텐츠 위에 뜬 것처럼 보인다. 배경은 흰 면 그대로다 — scrolled 가 더하는 것은 그림자뿐이다. `SLayout` 안에 놓았으면 **주지 않는다** — 같은 열의 `SPage` 가 자기 스크롤 상태를 올려 자동으로 들어온다. 스크롤 컨테이너를 앱이 직접 쥔 단독 배치에서만 `onScroll` 에서 준다. |
 
 #### Events
 
@@ -30,9 +30,16 @@
 | `scrollEndSpacing?` | `boolean` | `false` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. **기본은 꺼져 있다.** 페이지 스크롤 자체가 예외이기 때문이다 — 대부분의 화면은 본문이 창을 꽉 채우고 스크롤은 각 영역 안에서 일어난다. 여백을 조건 없이 붙이면 내용이 화면에 거의 딱 맞는 페이지까지 그 여백 때문에 스크롤되게 만든다. 페이지가 실제로 스크롤되는 화면(`contentHeight="auto"` + 내용이 창보다 김)에서만 켠다. 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 켜지 않는다. |
 | `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` 밖에서는 기준이 될 최소 폭이 없으므로 무시된다. |
 
 ## Types
 
+### SPageHeaderVariant
+
+```ts
+export type SPageHeaderVariant = (typeof PAGE_HEADER_VARIANTS)[number];
+```
+
 ### SPageBackground
 
 ```ts
@@ -45,6 +52,24 @@ export type SPageBackground = (typeof PAGE_BACKGROUNDS)[number];
 export type SPageContentHeight = (typeof PAGE_CONTENT_HEIGHTS)[number];
 ```
 
+### SPageContentWidth
+
+```ts
+export type SPageContentWidth = (typeof PAGE_CONTENT_WIDTHS)[number];
+```
+
+### PAGE_HEADER_VARIANTS
+
+```ts
+/**
+ * 페이지 제목 영역의 모양 — 문서와 디자인이 부르는 이름을 그대로 쓴다.
+ * 기본값은 없다. 앱 전체에서 하나로 고정할 값이라 `SPageHeader` 가 매번 지정하게 한다.
+ * - plain: 최소 높이(상하 패딩 안에서 타이틀 한 줄), 구분선 없음, 서브 텍스트가 타이틀 아래
+ * - bar:   높이 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄
+ */
+export const PAGE_HEADER_VARIANTS = ['plain', 'bar'] as const;
+```
+
 ### PAGE_BACKGROUNDS
 
 ```ts
@@ -69,6 +94,20 @@ export const PAGE_BACKGROUNDS = ['frame', 'neutral', 'screen'] as const;
 export const PAGE_CONTENT_HEIGHTS = ['auto', 'fill'] as const;
 ```
 
+### PAGE_CONTENT_WIDTHS
+
+```ts
+/**
+ * 본문 가로 폭 모드 — 창이 레이아웃 최소 폭보다 **넓을 때** 본문이 어떻게 설지.
+ * - full:        남는 폭을 본문이 다 쓴다 (반응형)
+ * - fixed:       창이 최소 폭일 때의 본문 폭 그대로 고정하고 왼쪽에 붙인다
+ * - fixedCenter: 같은 폭으로 고정하고 가운데 놓는다
+ *
+ * 창이 최소 폭보다 좁아지면 세 모드가 모두 같다 — 모자란 몫은 SPage 가 가로 스크롤로 삼킨다.
+ */
+export const PAGE_CONTENT_WIDTHS = ['full', 'fixed', 'fixedCenter'] as const;
+```
+
 ## Dependencies
 
 ### Used by

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { SPageBackground, SPageContentHeight } from './page.config';
+import type { SPageBackground, SPageContentHeight, SPageContentWidth } from './page.config';
 export interface SPageProps extends HTMLAttributes<HTMLElement> {
     /**
      * 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕.
@@ -33,6 +33,21 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
      * `fill` 에서는 페이지가 스크롤하지 않으므로 `scrollEndSpacing` 이 무시된다.
      */
     contentHeight?: SPageContentHeight;
+    /**
+     * 본문 가로 폭 모드. 기본은 `full` — 창이 넓어지면 본문도 같이 넓어진다(반응형).
+     *
+     * `fixed`·`fixedCenter` 는 본문을 **레이아웃 최소 폭일 때의 폭**으로 고정한다. 최소 폭 기준으로
+     * 그린 시안이 넓은 모니터에서 늘어나 성기어지는 것을 막는 모드다. 남는 폭은 `fixed` 면 오른쪽에,
+     * `fixedCenter` 면 좌우로 나뉘어 페이지 배경으로 남는다. 고정 폭은 GNB 폭·접힘을 반영해
+     * 저절로 따라오므로 앱이 숫자를 쓸 일은 없다.
+     *
+     * 창이 최소 폭보다 좁아지면 세 모드가 모두 같다 — 남는 폭이 없어 규칙이 꺼지고, 모자란 몫을
+     * 지금까지처럼 이 영역이 가로 스크롤로 삼킨다.
+     *
+     * 같은 열에 `SPageHeader` 가 있으면 헤더도 같은 폭·정렬을 따른다(제목과 본문의 좌우 끝이 맞는다).
+     * `SLayout` 밖에서는 기준이 될 최소 폭이 없으므로 무시된다.
+     */
+    contentWidth?: SPageContentWidth;
 }
 /**
  * SPage — SLayout 안에서 남은 공간을 채우는 스크롤 콘텐츠 영역.

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

@@ -1,21 +1,31 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import type { SPageHeaderVariant } from './page.config';
 export interface SPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'slot' | 'title'> {
     /** 타이틀 (필수) */
     title: string;
-    /** 서브 텍스트. fix=true 면 타이틀 오른쪽에, fix=false(기본) 면 타이틀 아래에 놓인다. */
+    /** 서브 텍스트. `bar` 면 타이틀 오른쪽에, `plain` 이면 타이틀 아래에 놓인다. */
     subText?: string;
     /**
-     * true: 높이 56 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄.
-     * false(기본): 최소 높이 66(상하 패딩 20/16 안에서 타이틀 한 줄 높이로 결정) + 구분선 없음,
-     * 서브 텍스트가 타이틀 아래로 내려간다. 배경은 두 베리에이션 모두 흰 면이다.
+     * 제목 영역의 모양 — **필수다.**
+     *
+     * - `plain`: 최소 높이(상하 패딩 안에서 타이틀 한 줄 높이로 결정) + 구분선 없음,
+     *   서브 텍스트가 타이틀 아래로 내려간다.
+     * - `bar`: 높이 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄.
+     *
+     * 기본값을 두지 않는 이유는 이 값이 **앱 전체에서 하나로 고정돼야 하는 값**이기 때문이다.
+     * 기본값이 있으면 안 준 페이지만 조용히 다른 모양이 되어, 메뉴를 옮길 때 제목 줄의 높이와
+     * 구분선이 페이지마다 튄다. 셸을 한 번 감싸 쓰면(§4-1 AppShell) 지정하는 자리도 한 곳이다.
+     *
+     * 배경은 두 베리에이션 모두 흰 면이다. `SLayout` 의 `header`(`'fix' | 'full'`)와는 다른 축이다 —
+     * 그쪽은 상단바가 GNB 컬럼 안에 있는지 화면 전폭인지를 정한다.
      */
-    fix?: boolean;
+    variant: SPageHeaderVariant;
     /** 뒤로가기 클릭 핸들러. 지정하면 왼쪽에 뒤로가기 버튼이 나타난다. */
     onBack?: () => void;
     /** 오른쪽 끝 커스텀 슬롯. 가이드 링크·액션 버튼 등 페이지마다 다른 것이 온다. */
     slot?: ReactNode;
     /**
-     * 아래 콘텐츠가 스크롤을 시작했는지. fix=false 일 때만 의미가 있다: 스크롤이 시작되면
+     * 아래 콘텐츠가 스크롤을 시작했는지. `plain` 일 때만 의미가 있다: 스크롤이 시작되면
      * 그림자(floating)가 들어가 스크롤되는 콘텐츠 위에 뜬 것처럼 보인다. 배경은 흰 면 그대로다 —
      * scrolled 가 더하는 것은 그림자뿐이다.
      *
@@ -26,12 +36,13 @@ export interface SPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'slo
 }
 /**
  * 페이지 타이틀 영역(pageHeader 포팅).
- * fix 로 bar(높이 고정·하단 구분선) / plain(최소 높이) 두 베리에이션을 고른다 — 배경은 둘 다 흰 면이다.
+ * `variant` 로 bar(높이 고정·하단 구분선) / plain(최소 높이) 두 베리에이션을 고른다 — 배경은 둘 다 흰 면이다.
  * 뒤로가기 버튼은 onBack 유무로 나타나며, 없을 때는 타이틀 쪽에 4px 여백이 대신 들어간다.
  *
  * **셸 안에서는 `SLayout` 의 자식으로 `SGnb` 와 `SPage` 사이에 놓는다.** SLayout 이 이 헤더부터
  * 뒤를 하나의 페이지 열로 묶어(page-column.tsx) 스크롤·페이지 패딩 밖 상단에 고정하고,
- * plain 일 때 `SPage` 가 올린 스크롤 상태를 열이 대신 물려준다.
+ * plain 일 때 `SPage` 가 올린 스크롤 상태를 열이 대신 물려준다. 같은 경로로 `SPage` 의
+ * `contentWidth` 도 물려받아, 본문이 고정 폭이면 제목 줄도 같은 폭·정렬로 선다(면은 늘 전폭이다).
  *
  * 셸 밖에 직접 놓을 수도 있다 — 스크롤 컨테이너를 앱이 쥐고 있는 단독 화면이다. 그때는 그림자만
  * 앱 몫이 된다: 스크롤 컨테이너의 `onScroll` 에서 `scrolled` 를 넣어야 뜬다.

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, } from './page.config';
+export { PAGE_BACKGROUNDS, type SPageBackground, PAGE_CONTENT_HEIGHTS, type SPageContentHeight, PAGE_CONTENT_WIDTHS, type SPageContentWidth, PAGE_HEADER_VARIANTS, type SPageHeaderVariant, } from './page.config';
 export { SPageHeader, type SPageHeaderProps } from './SPageHeader';

package/dist/components/SPage/page-column.d.ts

@@ -1,15 +1,24 @@
 import { type ReactNode } from 'react';
+import type { SPageContentWidth } from './page.config';
 /**
  * 페이지 열이 `SPageHeader` 와 `SPage` 사이에서 중개하는 것.
  *
- * 둘은 형제라 서로를 볼 수 없는데, 헤더의 그림자는 페이지의 스크롤에서 나온다.
- * 열이 그 사이에 서서 값을 옮긴다 — 아래(SPage)가 올리고 위(SPageHeader)가 읽는다.
+ * 둘은 형제라 서로를 볼 수 없는데, 헤더의 그림자는 페이지의 스크롤에서, 헤더의 가로 정렬은
+ * 페이지의 폭 모드에서 나온다. 열이 그 사이에 서서 값을 옮긴다 —
+ * 아래(SPage)가 올리고 위(SPageHeader)가 읽는다.
  */
 export interface SPageColumnValue {
     /** 페이지가 스크롤을 시작했는지. `SPage` 가 올리고 `SPageHeader` 가 그림자로 쓴다. */
     scrolled: boolean;
     /** `SPage` 가 자기 스크롤 상태를 올린다. */
     setScrolled: (scrolled: boolean) => void;
+    /**
+     * 페이지 본문의 가로 폭 모드. `SPage` 가 올리고 `SPageHeader` 가 자기 내용물을 같은 폭·정렬로 맞춘다.
+     * 헤더는 페이지 위에 서는 같은 열의 일부라, 본문만 가운데로 가면 제목과 본문 좌우 끝이 어긋난다.
+     */
+    contentWidth: SPageContentWidth;
+    /** `SPage` 가 자기 폭 모드를 올린다. */
+    setContentWidth: (contentWidth: SPageContentWidth) => void;
 }
 export declare const SPageColumnContext: import("react").Context<SPageColumnValue | null>;
 /**

package/dist/components/SPage/page-width.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'react';
+import type { SPageContentWidth } from './page.config';
+/**
+ * 콘텐츠 상자의 최소 폭 — SLayout 이 보장하는 레이아웃 최소 폭을 이 상자가 대신 삼킨다.
+ *
+ * `100cqw` 는 SLayout 프레임의 폭, `100%` 는 이 상자를 담은 영역의 콘텐츠 폭이다.
+ * "프레임이 최소 폭보다 좁은 만큼" 콘텐츠를 넓히므로, GNB 폭·접힘·header 구성이 어떻든
+ * [GNB + 스크롤 끝까지 민 페이지] 합이 정확히 최소 폭이 된다. 패딩을 덮어써도 100% 가 따라온다.
+ *
+ * SLayout 밖이면 변수가 없어(폴백 0) 값이 음수가 되고, 음수 min-width 는 0 으로 클램프돼 규칙이 꺼진다.
+ */
+export declare const MIN_CONTENT_WIDTH = "calc(var(--s-layout-min-width, 0px) - 100cqw + 100%)";
+/**
+ * 고정 폭 모드가 남는 폭을 어디로 미는지 — 폭을 직접 주지 않고 여백으로 민다.
+ * 그래서 남는 폭이 0 인 구간(창이 최소 폭 이하)에서는 아무 일도 하지 않고,
+ * 넓어진 만큼만 상자가 "최소 폭일 때의 폭"으로 되돌아간다.
+ *
+ * `full` 은 아무것도 하지 않는다 — 남는 폭을 본문이 그대로 쓴다.
+ *
+ * **SLayout 밖에서는 호출하지 않는다.** 최소 폭 변수가 없으면 남는 폭이 프레임 폭 전체가 되어
+ * 본문이 사라진다. 호출하는 쪽이 SLayout 안임을 확인하고 부른다.
+ */
+export declare const contentWidthStyle: (mode: SPageContentWidth) => CSSProperties | undefined;

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

@@ -14,3 +14,21 @@ export type SPageBackground = (typeof PAGE_BACKGROUNDS)[number];
  */
 export declare const PAGE_CONTENT_HEIGHTS: readonly ["auto", "fill"];
 export type SPageContentHeight = (typeof PAGE_CONTENT_HEIGHTS)[number];
+/**
+ * 본문 가로 폭 모드 — 창이 레이아웃 최소 폭보다 **넓을 때** 본문이 어떻게 설지.
+ * - full:        남는 폭을 본문이 다 쓴다 (반응형)
+ * - fixed:       창이 최소 폭일 때의 본문 폭 그대로 고정하고 왼쪽에 붙인다
+ * - fixedCenter: 같은 폭으로 고정하고 가운데 놓는다
+ *
+ * 창이 최소 폭보다 좁아지면 세 모드가 모두 같다 — 모자란 몫은 SPage 가 가로 스크롤로 삼킨다.
+ */
+export declare const PAGE_CONTENT_WIDTHS: readonly ["full", "fixed", "fixedCenter"];
+export type SPageContentWidth = (typeof PAGE_CONTENT_WIDTHS)[number];
+/**
+ * 페이지 제목 영역의 모양 — 문서와 디자인이 부르는 이름을 그대로 쓴다.
+ * 기본값은 없다. 앱 전체에서 하나로 고정할 값이라 `SPageHeader` 가 매번 지정하게 한다.
+ * - plain: 최소 높이(상하 패딩 안에서 타이틀 한 줄), 구분선 없음, 서브 텍스트가 타이틀 아래
+ * - bar:   높이 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄
+ */
+export declare const PAGE_HEADER_VARIANTS: readonly ["plain", "bar"];
+export type SPageHeaderVariant = (typeof PAGE_HEADER_VARIANTS)[number];

package/dist/components/SPopup/README.md

@@ -10,10 +10,10 @@
 |------|------|---------|-------------|
 | `popupTitle?` | `string` | `''` | 헤더 제목 |
 | `type?` | `SPopupType` | `'default'` | 타입 (헤더 색상) |
-| `useFooter?` | `boolean` | `false` | 하단 footer 표시 여부 |
+| `showFooter?` | `boolean` | `false` | 하단 footer 표시 여부 |
 | `submitButton?` | `SPopupSubmitButton` | — | 확인 버튼 설정 |
 | `footerLeft?` | `ReactNode` | — | footer 좌측 영역 |
-| `noPadding?` | `boolean` | `false` | 본문 기본 패딩을 없앱니다. 표를 가장자리까지 채우는 등 본문이 직접 여백을 다룰 때만 사용합니다. |
+| `padding?` | `SPopupBodyPadding` | `'default'` | 본문 안쪽 여백. 기본은 `default` — 표를 가장자리까지 채우는 등 본문이 여백을 직접 다룰 때만 `none`. (`SList` 의 `padding` 과 같은 이름이지만 기본값이 반대다 — 각 면의 성격이 다르다) |
 | `children?` | `ReactNode` | — | 본문 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -43,6 +43,12 @@ export interface SPopupSubmitButton {
 }
 ```
 
+### SPopupBodyPadding
+
+```ts
+export type SPopupBodyPadding = 'default' | 'none';
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SPopup/SPopup.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode, type CSSProperties } from 'react';
 import { type SButtonColor, type SButtonSize } from '../SButton';
 export type SPopupType = 'default' | 'light';
+export type SPopupBodyPadding = 'default' | 'none';
 export interface SPopupSubmitButton {
     label?: string;
     color?: SButtonColor;
@@ -13,15 +14,18 @@ export interface SPopupProps {
     /** 타입 (헤더 색상) */
     type?: SPopupType;
     /** 하단 footer 표시 여부 */
-    useFooter?: boolean;
+    showFooter?: boolean;
     /** 확인 버튼 설정 */
     submitButton?: SPopupSubmitButton;
     /** 확인 버튼 클릭 (sdSubmit) */
     onSubmit?: () => void;
     /** footer 좌측 영역 */
     footerLeft?: ReactNode;
-    /** 본문 기본 패딩을 없앱니다. 표를 가장자리까지 채우는 등 본문이 직접 여백을 다룰 때만 사용합니다. */
-    noPadding?: boolean;
+    /**
+     * 본문 안쪽 여백. 기본은 `default` — 표를 가장자리까지 채우는 등 본문이 여백을 직접
+     * 다룰 때만 `none`. (`SList` 의 `padding` 과 같은 이름이지만 기본값이 반대다 — 각 면의 성격이 다르다)
+     */
+    padding?: SPopupBodyPadding;
     /** 본문 */
     children?: ReactNode;
     className?: string;

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

@@ -1 +1 @@
-export { SPopup, type SPopupProps, type SPopupType, type SPopupSubmitButton } from './SPopup';
+export { SPopup, type SPopupBodyPadding, type SPopupProps, type SPopupType, type SPopupSubmitButton, } from './SPopup';