sellmate-design-system-react 9.0.0-beta.8 → 9.0.0-beta.83

package/dist/components/SFilePicker/README.md

@@ -11,11 +11,11 @@
 | `value?` | `SFilePickerValue` | `null` |  |
 | `placeholder?` | `string` | `'Click to upload'` |  |
 | `disabled?` | `boolean` | `false` |  |
-| `focused?` | `boolean` | `false` | 포커스 상태 여부 |
-| `hovered?` | `boolean` | `false` | 호버 상태 여부 |
+| `focused?` | `boolean` | `false` | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | `false` | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `inline?` | `boolean` | `false` | 인라인 표시 — SField 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 |
 | `multiple?` | `boolean` | `false` |  |
-| `useMultipleListBox?` | `boolean` | `false` | multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) |
+| `showMultipleListBox?` | `boolean` | `false` | multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) |
 | `accept?` | `string` | — |  |
 | `maxFileSize?` | `number \| string` | — |  |
 | `maxTotalSize?` | `number \| string` | — |  |
@@ -25,6 +25,8 @@
 | `status?` | `SFieldStatus` | — |  |
 | `size?` | `SFieldSize` | `'sm'` |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |
@@ -35,7 +37,7 @@
 | `hint?` | `string` | — |  |
 | `error?` | `boolean` | — |  |
 | `errorMessage?` | `string` | — |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -46,6 +48,20 @@
 | `onValueChange` | `(value: SFilePickerValue) => void` | 파일 변경 (sdUpdate) |
 | `onReject` | `(detail: { files: File[]; reason: SFilePickerRejectReason }) => void` | 제한 초과 거부 (sdReject) |
 
+## Types
+
+### SFilePickerValue
+
+```ts
+export type SFilePickerValue = File[] | File | null;
+```
+
+### SFilePickerRejectReason
+
+```ts
+export type SFilePickerRejectReason = 'max-file-size' | 'max-total-size' | 'max-files';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SFilePicker/SFilePicker.d.ts

@@ -1,9 +1,10 @@
 import { type CSSProperties } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SFilePickerValue = File[] | File | null;
 export type SFilePickerRejectReason = 'max-file-size' | 'max-total-size' | 'max-files';
 export interface SFilePickerProps {
@@ -17,15 +18,15 @@ export interface SFilePickerProps {
     }) => void;
     placeholder?: string;
     disabled?: boolean;
-    /** 포커스 상태 여부 */
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
     focused?: boolean;
-    /** 호버 상태 여부 */
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
     hovered?: boolean;
     /** 인라인 표시 — SField 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 */
     inline?: boolean;
     multiple?: boolean;
     /** multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) */
-    useMultipleListBox?: boolean;
+    showMultipleListBox?: boolean;
     accept?: string;
     maxFileSize?: number | string;
     maxTotalSize?: number | string;
@@ -35,6 +36,20 @@ export interface SFilePickerProps {
     status?: SFieldStatus;
     size?: SFieldSize;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -45,9 +60,14 @@ export interface SFilePickerProps {
     hint?: string;
     error?: boolean;
     errorMessage?: string;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
     className?: string;
     style?: CSSProperties;
 }
 /** SFilePicker — sd-file-picker 포팅. 단일/다중 파일 + 크기·개수 검증 + 칩 목록. */
-export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, useMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;
+export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, showMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;

package/dist/components/SFooter/README.md

@@ -9,6 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `bg?` | `SFooterBg` | `'white'` | 배경색 |
+| `size?` | `SFooterSize` | `'md'` | 크기. 기본은 `md` — 오버레이 하단 액션 영역의 크기다 |
 | `left?` | `ReactNode` | — | footer 좌측 slot |
 | `children?` | `ReactNode` | — | footer 좌측 slot. left와 함께 쓰면 left 뒤에 렌더된다 |
 | `button?` | `SFooterButton` | — | 우측 기본 액션 버튼 |
@@ -16,13 +17,54 @@
 | `leftClassName?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SFooterBg
+
+```ts
+export type SFooterBg = 'white' | 'grey';
+```
+
+### SFooterSize
+
+```ts
+/**
+ * footer 크기. 버튼 크기가 여기에 딸려 온다 — `md` 는 `SButton size="md"`, `sm` 은 `"sm"`.
+ *
+ * 버튼 크기를 따로 받지 않고 footer 자체를 분기하는 이유: 크기를 정하는 것은 버튼이 아니라
+ * **버튼이 놓인 자리**이기 때문이다 (AGENTS.md §3-5-2). 좌측 슬롯 버튼까지 한 벌로 맞춰야
+ * 하는데, 우측 버튼만 크기를 받으면 좌우가 어긋난 footer 를 만들 길이 열린다.
+ */
+export type SFooterSize = 'sm' | 'md';
+```
+
+### SFooterButton
+
+```ts
+/**
+ * footer 우측 기본 액션 버튼 설정 — `SButton` 의 prop 을 그대로 받는다.
+ *
+ * 골라 담은 부분집합으로 두지 않는 이유: `SButton` 에 prop 이 늘 때마다 이 목록만 조용히
+ * 뒤처져, 아이콘 하나 붙이려 해도 footer 에서는 길이 없는 상태가 된다.
+ *
+ * **`size` 만 뺀다.** 버튼 크기는 놓이는 위치가 정하므로 footer 의 `size` 가 정한다
+ * (AGENTS.md §3-5-2) — 버튼이 자기 크기를 따로 주장할 자리가 아니다.
+ *
+ * `label`·`color` 는 주지 않으면 footer 가 주 액션 기본값(`'확인'`·`'primary'`)으로 잡는다.
+ * 파괴적 액션이라 `danger` 가 필요한 경우는 열어 둔다 (§3-5-3).
+ */
+export type SFooterButton = Omit<SButtonProps, 'size'>;
+```
+
 ## Dependencies
 
 ### Used by
 
  - [SActionModal](../SActionModal)
+ - [SCard](../SCard)
  - [SDrawer](../SDrawer)
  - [SPopup](../SPopup)
+ - [SSectionHeaderCard](../SSectionHeaderCard)
 
 ### Depends on
 
@@ -34,7 +76,9 @@
 graph TD;
   SFooter --> SButton
   SActionModal --> SFooter
+  SCard --> SFooter
   SDrawer --> SFooter
   SPopup --> SFooter
+  SSectionHeaderCard --> SFooter
   style SFooter fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SFooter/SFooter.d.ts

@@ -1,21 +1,36 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import { type SButtonColor, type SButtonSize } from '../SButton';
+import { type SButtonProps } from '../SButton';
 export type SFooterBg = 'white' | 'grey';
-export interface SFooterButton {
-    label?: string;
-    color?: SButtonColor;
-    outline?: boolean;
-    size?: SButtonSize;
-    disabled?: boolean;
-    onClick?: () => void;
-}
+/**
+ * footer 크기. 버튼 크기가 여기에 딸려 온다 — `md` 는 `SButton size="md"`, `sm` 은 `"sm"`.
+ *
+ * 버튼 크기를 따로 받지 않고 footer 자체를 분기하는 이유: 크기를 정하는 것은 버튼이 아니라
+ * **버튼이 놓인 자리**이기 때문이다 (AGENTS.md §3-5-2). 좌측 슬롯 버튼까지 한 벌로 맞춰야
+ * 하는데, 우측 버튼만 크기를 받으면 좌우가 어긋난 footer 를 만들 길이 열린다.
+ */
+export type SFooterSize = 'sm' | 'md';
+/**
+ * footer 우측 기본 액션 버튼 설정 — `SButton` 의 prop 을 그대로 받는다.
+ *
+ * 골라 담은 부분집합으로 두지 않는 이유: `SButton` 에 prop 이 늘 때마다 이 목록만 조용히
+ * 뒤처져, 아이콘 하나 붙이려 해도 footer 에서는 길이 없는 상태가 된다.
+ *
+ * **`size` 만 뺀다.** 버튼 크기는 놓이는 위치가 정하므로 footer 의 `size` 가 정한다
+ * (AGENTS.md §3-5-2) — 버튼이 자기 크기를 따로 주장할 자리가 아니다.
+ *
+ * `label`·`color` 는 주지 않으면 footer 가 주 액션 기본값(`'확인'`·`'primary'`)으로 잡는다.
+ * 파괴적 액션이라 `danger` 가 필요한 경우는 열어 둔다 (§3-5-3).
+ */
+export type SFooterButton = Omit<SButtonProps, 'size'>;
 /**
  * @internal
- * 모달·드로어·팝업 하단 영역 공통 props.
+ * 모달·드로어·팝업·카드 하단 영역 공통 props.
  */
 export interface SFooterProps {
     /** 배경색 */
     bg?: SFooterBg;
+    /** 크기. 기본은 `md` — 오버레이 하단 액션 영역의 크기다 */
+    size?: SFooterSize;
     /** footer 좌측 slot */
     left?: ReactNode;
     /** footer 좌측 slot. left와 함께 쓰면 left 뒤에 렌더된다 */
@@ -27,10 +42,11 @@ export interface SFooterProps {
     style?: CSSProperties;
 }
 /**
- * SFooter — overlay 계열 내부 전용 footer.
+ * SFooter — 오버레이·카드 내부 전용 footer.
  *
  * @internal
- * SActionModal/SConfirmModal/SDrawer/SPopup 의 하단 액션 영역만 공통화한다.
+ * SActionModal/SConfirmModal/SDrawer/SPopup 과 SCard/SSectionHeaderCard 의 하단 액션 영역만
+ * 공통화한다. 소비자는 호스트 컴포넌트의 `footerLeft`·`button` prop 으로만 닿는다 —
  * 패키지 public export 에 추가하지 말 것.
  */
-export declare function SFooter({ bg, left, button, children, className, leftClassName, style, }: SFooterProps): import("react").JSX.Element;
+export declare function SFooter({ bg, size, left, button, children, className, leftClassName, style, }: SFooterProps): import("react").JSX.Element;

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

@@ -1 +1 @@
-export { SFooter, type SFooterBg, type SFooterButton, type SFooterProps } from './SFooter';
+export { SFooter, type SFooterBg, type SFooterButton, type SFooterProps, type SFooterSize, } from './SFooter';

package/dist/components/SForm/README.md

@@ -8,7 +8,7 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `formClass?` | `string` | — | form 엘리먼트에 추가할 클래스 (sd-form formClass 대응) |
+| `formClassName?` | `string` | — | form 엘리먼트에 추가할 클래스 (sd-form formClassName 대응) |
 | `children?` | `ReactNode` | — |  |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -29,3 +29,14 @@
 | `reset` | `() => void` | resetValidation 별칭 — sd-form sdReset 대응. 값 리셋은 소비자(value/onChange) 책임 |
 | `focusFirstInvalid` | `() => void` | 첫 번째 실패 필드로 포커스 이동 |
 
+## Types
+
+### SFormValidationError
+
+```ts
+export interface SFormValidationError {
+  /** 검증에 실패한 필드 name 목록 (DOM 순서) */
+  names: string[];
+}
+```
+

package/dist/components/SForm/SForm.d.ts

@@ -15,8 +15,8 @@ export interface SFormHandle {
     focusFirstInvalid: () => void;
 }
 export interface SFormProps {
-    /** form 엘리먼트에 추가할 클래스 (sd-form formClass 대응) */
-    formClass?: string;
+    /** form 엘리먼트에 추가할 클래스 (sd-form formClassName 대응) */
+    formClassName?: string;
     /** 모든 필드 검증 통과 후 발생 (sd-form sdSubmit 대응) */
     onSubmit?: () => void;
     /** 검증 실패 시 실패한 필드 name 목록 전달 (sd-form sdValidationError 대응) */

package/dist/components/SGhostButton/README.md

@@ -27,24 +27,43 @@
 |-------|------|-------------|
 | `onClick` | `(e: MouseEvent<HTMLButtonElement>) => void` | 클릭 (sdClick) |
 
+## Types
+
+### SGhostButtonSize
+
+```ts
+export type SGhostButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+```
+
+### SGhostButtonIntent
+
+```ts
+export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' | 'inverse';
+```
+
 ## Dependencies
 
 ### Used by
 
  - [SBarcodeInput](../SBarcodeInput)
  - [SCalendar](../SCalendar)
+ - [SCalendarBoard](../SCalendarBoard)
+ - [SChatAttachedFile](../SChatAttachedFile)
+ - [SChatInput](../SChatInput)
  - [SChip](../SChip)
- - [SChipFilter](../SChipFilter)
+ - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
  - [SInput](../SInput)
+ - [SMeatballButton](../SMeatballButton)
  - [SModalContainer](../SModalContainer)
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
  - [SPopover](../SPopover)
- - [SSelect](../SSelect)
+ - [SSearchInput](../SSearchInput)
+ - [STable](../STable)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
  - [SToast](../SToast)
@@ -64,18 +83,23 @@ graph TD;
   SGhostButton --> STag
   SBarcodeInput --> SGhostButton
   SCalendar --> SGhostButton
+  SCalendarBoard --> SGhostButton
+  SChatAttachedFile --> SGhostButton
+  SChatInput --> SGhostButton
   SChip --> SGhostButton
-  SChipFilter --> SGhostButton
+  SDatePicker --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton
   SGnb --> SGhostButton
   SGuide --> SGhostButton
   SInput --> SGhostButton
+  SMeatballButton --> SGhostButton
   SModalContainer --> SGhostButton
   SOverlayHeader --> SGhostButton
   SPage --> SGhostButton
   SPopover --> SGhostButton
-  SSelect --> SGhostButton
+  SSearchInput --> SGhostButton
+  STable --> SGhostButton
   STimePicker --> SGhostButton
   STimeRangePicker --> SGhostButton
   SToast --> SGhostButton

package/dist/components/SGhostButton/SGhostButton.d.ts

@@ -31,5 +31,8 @@ export interface SGhostButtonProps {
 /**
  * SGhostButton — sd-ghost-button 포팅. 아이콘 전용 투명 버튼.
  * hover 시 intent 색 오버레이(5%), focus-visible 링, 옵션 툴팁(회색 STag).
+ *
+ * ref 는 버튼 요소로 그대로 간다 — 이 버튼에 붙여 띄우는 층(SGnb 런처의 서비스 목록 등)이
+ * 버튼을 앵커로 삼아야 한다. 툴팁을 두른 형태에서도 앵커는 래퍼가 아니라 버튼이다.
  */
-export declare function SGhostButton({ icon, size, intent, ariaLabel, ariaPressed, ariaExpanded, tooltipText, disabled, onClick, anchorClassName, anchorStyle, className, style, }: SGhostButtonProps): import("react").JSX.Element;
+export declare const SGhostButton: import("react").ForwardRefExoticComponent<SGhostButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/SGnb/README.md

@@ -9,16 +9,17 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `type?` | `SGnbType` | — | 메뉴 스타일: box(라운드) / belt(풀폭 행). 미지정 시 SLayout 의 type 을 따른다. |
-| `header?` | `SGnbHeader` | — | 상단바 구조: fix(GNB 폭 고정) / full(레이아웃 전폭). 미지정 시 SLayout 의 header 를 따른다. 단, useRail 이고 레일에 children 없는 아이템이 있으면 메뉴 폭이 출렁이므로 full 로 강제된다. |
+| `header?` | `SGnbHeader` | — | 상단바 구조: fix(GNB 폭 고정) / full(레이아웃 전폭). 미지정 시 SLayout 의 header 를 따른다. 단, showRail 이고 레일에 children 없는 아이템이 있으면 메뉴 폭이 출렁이므로 full 로 강제된다. |
 | `color?` | `SGnbColor` | `'light'` | 색상 테마: light / dark |
-| `items` | `SGnbMenuItem[]` | — | 메뉴 트리 (depth1 → depth2 → depth3). useRail 이면 첫 depth 가 레일이 되고 그 children 이 depth1 이 된다. |
-| `useRail?` | `boolean` | — | 좌측 레일 사용 여부. 켜면 items 의 첫 depth 가 아이콘+라벨 버튼의 세로 레일로 서고, 선택된 레일 아이템의 children 이 오른쪽 메뉴 패널에 깔린다. 미지정 시 SLayout 의 useRail 을 따른다. children 없는 레일 아이템이 활성이면 메뉴 패널은 렌더되지 않고 레일만 남는다. |
+| `items` | `SGnbMenuItem[]` | — | 메뉴 트리 (depth1 → depth2 → depth3). showRail 이면 첫 depth 가 레일이 되고 그 children 이 depth1 이 된다. |
+| `showRail?` | `boolean` | — | 좌측 레일 사용 여부. 켜면 items 의 첫 depth 가 아이콘+라벨 버튼의 세로 레일로 서고, 선택된 레일 아이템의 children 이 오른쪽 메뉴 패널에 깔린다. 미지정 시 SLayout 의 showRail 을 따른다. children 없는 레일 아이템이 활성이면 메뉴 패널은 렌더되지 않고 레일만 남는다. |
 | `value?` | `string` | `''` | 현재 선택된 아이템 value |
 | `folded?` | `boolean` | — | 접힘(레일) 상태. 미지정 시 SLayout 의 folded 를 따른다. |
-| `logo?` | `ReactNode` | — | 상단바 로고 영역 (slot). header="full" 이면 폭이 140px 로 고정된다. |
+| `launcher?` | `SGnbLauncher` | — | 앱런처(그리드) 버튼. 미지정 시 런처 버튼을 렌더하지 않는다. 접힘 레일(fix)에는 폴드 버튼만 남으므로 표시되지 않는다. |
+| `logo?` | `ReactNode` | — | 상단바 로고 영역 (slot). - `header="fix"` : 런처와 폴드 버튼 사이의 남은 폭이 로고 칸이다. `SLogo size="auto"` 를 넣으면 그 폭을 채운다(메뉴 폭을 바꿔도 따라온다). 넘치는 로고는 잘린다. - `header="full"` : 폭이 140px 로 고정된다. 여기서는 `size="auto"` 를 쓰지 않는다 — 높이(`size`)로 주고 140px 안에 들어가는 크기를 고른다. |
 | `topContent?` | `ReactNode` | — | 상단바 로고 오른쪽 슬롯 (검색·액션 등). 로고와 16px 띄고 남는 폭을 모두 차지하므로 안에서 자유롭게 정렬한다. 상단바가 전폭인 header="full" 에서만 렌더된다 (fix 는 상단바가 좁은 GNB 컬럼 안이라 놓을 자리가 없다). |
-| `railTop?` | `ReactNode` | — | 레일 상단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. useRail 일 때만 렌더된다. |
-| `railFooter?` | `ReactNode` | — | 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 하단에 붙어 고정된다. useRail 일 때만 렌더된다. |
+| `railTop?` | `ReactNode` | — | 레일 상단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. showRail 일 때만 렌더된다. |
+| `railFooter?` | `ReactNode` | — | 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 하단에 붙어 고정된다. showRail 일 때만 렌더된다. |
 | `menuTop?` | `ReactNode` | — | 메뉴 상단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고 이 슬롯은 메뉴 상단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다. |
 | `menuFooter?` | `ReactNode` | — | 메뉴 하단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고 이 슬롯은 메뉴 하단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다. |
 | `foldedTop?` | `ReactNode` | — | 접힘(fix 레일) 상단 고정 슬롯. 접으면 본문이 빠져나가며 rail/menu top 도 사라지므로, 48px 폴드 레일 상단(상단바 바로 아래)에 붙는 별도 슬롯이다. header="fix" 로 접혔을 때만 나타난다. |
@@ -26,6 +27,7 @@
 | `resizable?` | `boolean` | `false` | 메뉴 폭을 드래그로 조절할 수 있게 한다. 레일 폭은 고정이고 **메뉴 컬럼만** 늘고 준다. 조절선은 GNB 컬럼의 오른쪽 경계 전체다 — fix 는 상단바 높이까지, full 은 상단바가 전폭이라 본문 높이까지. 접혀 있거나 깔 메뉴가 없으면(레일 리프가 활성) 조절선이 나오지 않는다. |
 | `menuWidth?` | `number` | — | 메뉴 폭(px). 주면 controlled — onMenuWidthChange 로 직접 갱신해야 움직인다 |
 | `defaultMenuWidth?` | `number` | — | 메뉴 초기 폭(px). uncontrolled |
+| `system?` | `ReactNode` | — | system 슬롯(`SGnbSystem`). 놓이는 자리와 형태는 `header` 가 정한다. - fix : GNB 맨 아래 세로 판. 펼치면 메뉴 컬럼 바닥에, 접히면 `foldedFooter` 아래 레일 바닥에 여백 없이 붙는다. showRail 에서 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로 이 슬롯도 함께 빠진다. - full: 전폭 상단바 오른쪽 끝에 가로 한 줄로 선다. 상단바는 접어도 남으므로 조각들도 늘 남는다. 색·형태는 GNB 가 내려주므로 SGnbSystem 에 다시 넘기지 않아도 된다. |
 | `ariaLabel?` | `string` | `'global navigation'` | 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. |
 
 #### Events
@@ -34,17 +36,113 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string) => void` | 선택 변경 (sdUpdate) |
 | `onRailChange` | `(value: string) => void` | 레일 선택 변경. 레일 아이템을 눌러 패널이 바뀔 때 알린다(선택 상태는 SGnb 가 자체 관리). |
-| `onFoldChange` | `(folded: boolean) => void` | 접힘 토글 (sdFoldChange) |
-| `onLauncherClick` | `() => void` | 앱런처(그리드) 버튼 클릭. 미지정 시 런처 버튼을 렌더하지 않는다. 접힘 레일(fix)에는 폴드 버튼만 남으므로 표시되지 않는다. |
+| `onFoldedChange` | `(folded: boolean) => void` | 접힘 토글 (sdFoldChange) |
 | `onMenuWidthChange` | `(width: number) => void` | 메뉴 폭이 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 |
 
+## Types
+
+### SGnbType
+
+```ts
+/** 메뉴 스타일: box = 라운드/좁은 들여쓰기, belt = 풀폭 행/넓은 들여쓰기 */
+export type SGnbType = 'box' | 'belt';
+```
+
+### SGnbHeader
+
+```ts
+/** 상단바 구조: fix = GNB 폭에 고정, full = 레이아웃 전폭 */
+export type SGnbHeader = 'fix' | 'full';
+```
+
+### SGnbColor
+
+```ts
+/** 색상(테마): light / dark */
+export type SGnbColor = 'light' | 'dark';
+```
+
+### SGnbMenuItem
+
+```ts
+/** GNB 메뉴 아이템 (재귀 트리). depth1 → depth2 → depth3. */
+export interface SGnbMenuItem {
+  /** 표시 텍스트 */
+  label: string;
+  /** 고유 식별값 (선택 상태 비교 기준) */
+  value: string;
+  /** depth1 전용 아이콘명 */
+  icon?: SIconName;
+  /** 우측 Tag 뱃지 텍스트 */
+  tag?: string;
+  /** 뱃지 색. 미지정 시 blue. */
+  tagColor?: STagColor;
+  /** 비활성 여부 */
+  disabled?: boolean;
+  /** 하위 아이템 (있으면 펼침/접힘 대상) */
+  children?: SGnbMenuItem[];
+}
+```
+
+### SGnbLauncher
+
+```ts
+/** 앱런처(그리드) 버튼 */
+export interface SGnbLauncher {
+  /**
+   * 누르면 뜨는 서비스 목록(`SLauncherListBox`). 옮겨 갈 수 있는 서비스가 무엇인지는
+   * 서비스마다 다르지만 **뜨는 자리는 늘 같아야 하므로**, 방향·앵커·여닫힘(바깥 클릭·ESC 포함)과
+   * 배경·라운드·그림자는 컴포넌트가 쥐고 앱은 목록만 준다 — 런처 버튼 아래로, 버튼 왼쪽 끝에 맞춰 뜬다.
+   *
+   * 비면 목록이 뜨지 않는다 — 아직 목록을 못 받은 화면에서 빈 흰 상자가 뜨는 대신
+   * 버튼만 남고 `onClick` 은 그대로 온다.
+   */
+  items?: SLauncherListBoxItem[];
+  /** 런처 **버튼**을 누름. 목록은 어차피 열리므로, 여는 것 말고 따로 할 일이 있을 때만 준다 */
+  onClick?: () => void;
+  /**
+   * 목록에서 **서비스를 고름**. 고른 서비스 키가 온다.
+   *
+   * **여기서 화면을 옮기지 않는다** — 줄은 링크라 브라우저가 `href` 를 새 탭으로 이미 연다.
+   * 고른 것을 앱이 알아야 할 때만(기록 등) 준다. 고르면 목록은 할 일을 끝낸 것이라 스스로
+   * 닫힌다(`onOpenChange(false)` 도 함께 온다).
+   */
+  onSelect?: (service: SLauncherService) => void;
+  /**
+   * 셀메이트 콘솔 주소. 목록 아래에 **늘 서는** "셀메이트 콘솔로 이동" 글자 링크가 누르면 이 주소를
+   * 새 탭에서 연다(`SLauncherListBox` 의 `consoleHref`). **필수다** — 콘솔로 가는 길은 어느
+   * 서비스의 런처에나 있어야 한다. 목록(`items`)이 비면 목록째 뜨지 않으므로 이 링크도 뜨지 않는다.
+   */
+  consoleHref: string;
+  /**
+   * 콘솔 링크를 누름. `onSelect` 와 같이 **화면을 옮기지 않는다** — 컴포넌트가 새 탭으로 이미 연다.
+   * 누르면 목록은 스스로 닫힌다.
+   */
+  onConsoleClick?: () => void;
+  /**
+   * 목록이 열리고 닫힐 때. 여닫는 것은 런처 버튼이 스스로 하므로 **그 사실을 알아야 할 때만** 준다
+   * (연 김에 목록을 다시 불러오거나, 열려 있는 동안 다른 층을 접어 두는 화면).
+   *
+   * 앱이 누르지 않은 닫힘도 온다: `header="fix"` 에서 GNB 를 접으면 런처 버튼이 사라지므로
+   * 목록이 닫히고 `false` 가 온다.
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+```
+
 ## Dependencies
 
+### Used by
+
+ - [SGnbSystem](../SGnbSystem)
+
 ### Depends on
 
 - [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
+- [SLauncherListBox](../SLauncherListBox)
 - [SLayout](../SLayout)
+- [SPortal](../SPortal)
 - [STag](../STag)
 
 ### Graph
@@ -53,7 +151,10 @@
 graph TD;
   SGnb --> SGhostButton
   SGnb --> SIcon
+  SGnb --> SLauncherListBox
   SGnb --> SLayout
+  SGnb --> SPortal
   SGnb --> STag
+  SGnbSystem --> SGnb
   style SGnb fill:#f9f,stroke:#333,stroke-width:4px
 ```