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

package/dist/components/SField/README.md

@@ -22,15 +22,15 @@
 | `error?` | `boolean` | `false` | 에러 상태 |
 | `errorMessage?` | `string` | `''` | 에러 메시지 |
 | `status?` | `SFieldStatus` | — | 필드 상태 — 'error' | 'pass' | 'default'. 'pass'면 초록 테두리 |
-| `focused?` | `boolean` | `false` | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | `false` | 호버 상태 (제어/반영) |
+| `focused?` | `boolean` | `false` | 포커스 상태를 밖에서 지정한다. 필드를 감싼 쪽이 포커스를 쥐고 있어(커스텀 트리거·복합 컨트롤) 필드 자신은 `:focus-within` 이 걸리지 않을 때 쓴다. 켜면 강조 테두리·링이 error/pass 보다 우선한다. |
+| `hovered?` | `boolean` | `false` | 호버 상태를 밖에서 지정한다. `focused` 와 같은 이유로 쓰며, 강조도 같다 — 실제 `:hover` 와 구분되지 않는 모양이어야 밖에서 흉내 낸 것이 티가 나지 않는다. |
 | `rules?` | `Rule[]` | — | 유효성 규칙 (검증은 컨트롤에서 수행, API 패리티) |
 | `hint?` | `string` | `''` | 하단 힌트 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `readOnly?` | `boolean` | `false` | 읽기 전용 (회색 배경) |
-| `width?` | `number \| string` | — | 컨트롤 너비 (숫자=px). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다. 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다. |
-| `minWidth?` | `number \| string` | — | 컨트롤 최소 너비 (숫자=px). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 |
-| `maxWidth?` | `number \| string` | — | 컨트롤 최대 너비 (숫자=px). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다. `width` 와 달리 hug 로 전환하지 않는다 — 부모가 좁으면 같이 좁아지고, 넓어도 여기서 멈춘다. 값 길이가 정해진 컨트롤(날짜·시간)이 `width="100%"` 를 받아 행 전체로 늘어나는 것을 막는 데 쓴다. **라벨은 상한에 들어가지 않는다** — 라벨은 컨트롤의 형제라 이 상한 밖이다. `addonLabel` 은 테두리 박스 안이라 상한을 나눠 먹으므로, `labelWidth`(= addon 폭)만큼 상한을 자동으로 늘린다. addon 이 있는데 `labelWidth` 가 없으면 폭을 알 수 없어 상한을 걸지 않는다 — 컨트롤이 잘리는 것보다 넓은 편이 낫다. |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비. 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다. 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다. **폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)으로 준다** — `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 등급은 `maxLength`(= 스키마 상한)로 고르고, 상한이 `xl` 을 넘거나 상한이 없으면 `"100%"` 로 둔다. (`sellmate/field-width-grade` 가 검사한다) 숫자는 px, 그 밖의 문자열은 CSS 길이 그대로다. |
+| `minWidth?` | `SFieldWidth` | — | 컨트롤 최소 너비 (등급 · 숫자=px · CSS 길이). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 (등급 · 숫자=px · CSS 길이). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다. `width` 와 달리 hug 로 전환하지 않는다 — 부모가 좁으면 같이 좁아지고, 넓어도 여기서 멈춘다. 값 길이가 정해진 컨트롤(날짜·시간)이 `width="100%"` 를 받아 행 전체로 늘어나는 것을 막는 데 쓴다. **라벨은 상한에 들어가지 않는다** — 라벨은 컨트롤의 형제라 이 상한 밖이다. `addonLabel` 은 테두리 박스 안이라 상한을 나눠 먹으므로, `labelWidth`(= addon 폭)만큼 상한을 자동으로 늘린다. addon 이 있는데 `labelWidth` 가 없으면 폭을 알 수 없어 상한을 걸지 않는다 — 컨트롤이 잘리는 것보다 넓은 편이 낫다. |
 | `multiline?` | `boolean` | `false` | 멀티라인(textarea) — 컨트롤 높이를 고정하지 않고 min-height만 적용 |
 | `borderless?` | `boolean` | `false` | 테두리 박스 제거 (inline 컨트롤용) — border/배경/hover·focus 강조만 사라지고 label·hint·errorMessage 등 나머지 필드 구성은 그대로 동작한다. |
 | `children?` | `ReactNode` | — | 실제 컨트롤 (input/select 등) — 테두리 없이 렌더, 테두리는 SField가 제공 |
@@ -50,6 +50,26 @@
 |--------|------|-------------|
 | `focus` | `() => void` | 내부 컨트롤에 포커스하고 필드를 화면에 스크롤합니다. |
 
+## Types
+
+### SFieldSize
+
+```ts
+export type SFieldSize = 'sm' | 'md';
+```
+
+### SFieldAddonAlign
+
+```ts
+export type SFieldAddonAlign = 'start' | 'center' | 'end';
+```
+
+### SFieldStatus
+
+```ts
+export type SFieldStatus = 'default' | 'pass' | 'error';
+```
+
 ## Dependencies
 
 ### Used by
@@ -58,9 +78,11 @@
  - [SChipInput](../SChipInput)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SEditor](../SEditor)
  - [SFilePicker](../SFilePicker)
  - [SInput](../SInput)
  - [SNumberInput](../SNumberInput)
+ - [SSearchInput](../SSearchInput)
  - [SSelect](../SSelect)
  - [STextarea](../STextarea)
  - [STimePicker](../STimePicker)
@@ -81,9 +103,11 @@ graph TD;
   SChipInput --> SField
   SDatePicker --> SField
   SDateRangePicker --> SField
+  SEditor --> SField
   SFilePicker --> SField
   SInput --> SField
   SNumberInput --> SField
+  SSearchInput --> SField
   SSelect --> SField
   STextarea --> SField
   STimePicker --> SField

package/dist/components/SField/SField.d.ts

@@ -3,6 +3,7 @@ import { type SIconName } from '../SIcon';
 import { type STooltipProps } from '../STooltip';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SFieldSize = 'sm' | 'md';
 export type SFieldAddonAlign = 'start' | 'center' | 'end';
 export type SFieldStatus = 'default' | 'pass' | 'error';
@@ -44,9 +45,15 @@ export interface SFieldProps {
     errorMessage?: string;
     /** 필드 상태 — 'error' | 'pass' | 'default'. 'pass'면 초록 테두리 */
     status?: SFieldStatus;
-    /** 포커스 상태 (제어/반영) */
+    /**
+     * 포커스 상태를 밖에서 지정한다. 필드를 감싼 쪽이 포커스를 쥐고 있어(커스텀 트리거·복합 컨트롤)
+     * 필드 자신은 `:focus-within` 이 걸리지 않을 때 쓴다. 켜면 강조 테두리·링이 error/pass 보다 우선한다.
+     */
     focused?: boolean;
-    /** 호버 상태 (제어/반영) */
+    /**
+     * 호버 상태를 밖에서 지정한다. `focused` 와 같은 이유로 쓰며, 강조도 같다 —
+     * 실제 `:hover` 와 구분되지 않는 모양이어야 밖에서 흉내 낸 것이 티가 나지 않는다.
+     */
     hovered?: boolean;
     /** 유효성 규칙 (검증은 컨트롤에서 수행, API 패리티) */
     rules?: Rule[];
@@ -57,14 +64,19 @@ export interface SFieldProps {
     /** 읽기 전용 (회색 배경) */
     readOnly?: boolean;
     /**
-     * 컨트롤 너비 (숫자=px). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다.
+     * 컨트롤 너비. 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다.
      * 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다.
+     *
+     * **폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)으로 준다** — `--cmp-field-width-*` 토큰으로 풀리므로
+     * 토큰이 바뀌면 화면이 따라간다. 등급은 `maxLength`(= 스키마 상한)로 고르고, 상한이 `xl` 을
+     * 넘거나 상한이 없으면 `"100%"` 로 둔다. (`sellmate/field-width-grade` 가 검사한다)
+     * 숫자는 px, 그 밖의 문자열은 CSS 길이 그대로다.
      */
-    width?: number | string;
-    /** 컨트롤 최소 너비 (숫자=px). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 */
-    minWidth?: number | string;
+    width?: SFieldWidth;
+    /** 컨트롤 최소 너비 (등급 · 숫자=px · CSS 길이). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 */
+    minWidth?: SFieldWidth;
     /**
-     * 컨트롤 최대 너비 (숫자=px). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다.
+     * 컨트롤 최대 너비 (등급 · 숫자=px · CSS 길이). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다.
      *
      * `width` 와 달리 hug 로 전환하지 않는다 — 부모가 좁으면 같이 좁아지고, 넓어도 여기서 멈춘다.
      * 값 길이가 정해진 컨트롤(날짜·시간)이 `width="100%"` 를 받아 행 전체로 늘어나는 것을 막는 데 쓴다.
@@ -74,7 +86,7 @@ export interface SFieldProps {
      * 상한을 자동으로 늘린다. addon 이 있는데 `labelWidth` 가 없으면 폭을 알 수 없어 상한을
      * 걸지 않는다 — 컨트롤이 잘리는 것보다 넓은 편이 낫다.
      */
-    maxWidth?: number | string;
+    maxWidth?: SFieldWidth;
     /** 멀티라인(textarea) — 컨트롤 높이를 고정하지 않고 min-height만 적용 */
     multiline?: boolean;
     /**

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` | — |  |
@@ -35,7 +35,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 +46,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

@@ -4,6 +4,7 @@ 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;
@@ -45,9 +46,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, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;

package/dist/components/SFooter/README.md

@@ -16,13 +16,36 @@
 | `leftClassName?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SFooterBg
+
+```ts
+export type SFooterBg = 'white' | 'grey';
+```
+
+### SFooterButton
+
+```ts
+export interface SFooterButton {
+  label?: string;
+  color?: SButtonColor;
+  outline?: boolean;
+  size?: SButtonSize;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+```
+
 ## Dependencies
 
 ### Used by
 
  - [SActionModal](../SActionModal)
+ - [SCard](../SCard)
  - [SDrawer](../SDrawer)
  - [SPopup](../SPopup)
+ - [SSectionHeaderCard](../SSectionHeaderCard)
 
 ### Depends on
 
@@ -34,7 +57,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

@@ -11,7 +11,7 @@ export interface SFooterButton {
 }
 /**
  * @internal
- * 모달·드로어·팝업 하단 영역 공통 props.
+ * 모달·드로어·팝업·카드 하단 영역 공통 props.
  */
 export interface SFooterProps {
     /** 배경색 */
@@ -27,10 +27,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;

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,14 +27,29 @@
 |-------|------|-------------|
 | `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)
  - [SChip](../SChip)
- - [SChipFilter](../SChipFilter)
+ - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
@@ -44,7 +59,8 @@
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
  - [SPopover](../SPopover)
- - [SSelect](../SSelect)
+ - [SSearchInput](../SSearchInput)
+ - [STable](../STable)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
  - [SToast](../SToast)
@@ -64,8 +80,9 @@ graph TD;
   SGhostButton --> STag
   SBarcodeInput --> SGhostButton
   SCalendar --> SGhostButton
+  SCalendarBoard --> SGhostButton
   SChip --> SGhostButton
-  SChipFilter --> SGhostButton
+  SDatePicker --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton
   SGnb --> SGhostButton
@@ -75,7 +92,8 @@ graph TD;
   SOverlayHeader --> SGhostButton
   SPage --> SGhostButton
   SPopover --> SGhostButton
-  SSelect --> SGhostButton
+  SSearchInput --> SGhostButton
+  STable --> SGhostButton
   STimePicker --> SGhostButton
   STimeRangePicker --> SGhostButton
   SToast --> SGhostButton

package/dist/components/SGnb/README.md

@@ -9,16 +9,16 @@
 | 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 로 고정된다. |
 | `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 +26,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,12 +35,61 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string) => void` | 선택 변경 (sdUpdate) |
 | `onRailChange` | `(value: string) => void` | 레일 선택 변경. 레일 아이템을 눌러 패널이 바뀔 때 알린다(선택 상태는 SGnb 가 자체 관리). |
-| `onFoldChange` | `(folded: boolean) => void` | 접힘 토글 (sdFoldChange) |
+| `onFoldedChange` | `(folded: boolean) => void` | 접힘 토글 (sdFoldChange) |
 | `onLauncherClick` | `() => void` | 앱런처(그리드) 버튼 클릭. 미지정 시 런처 버튼을 렌더하지 않는다. 접힘 레일(fix)에는 폴드 버튼만 남으므로 표시되지 않는다. |
 | `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[];
+}
+```
+
 ## Dependencies
 
+### Used by
+
+ - [SGnbSystem](../SGnbSystem)
+
 ### Depends on
 
 - [SGhostButton](../SGhostButton)
@@ -55,5 +105,6 @@ graph TD;
   SGnb --> SIcon
   SGnb --> SLayout
   SGnb --> STag
+  SGnbSystem --> SGnb
   style SGnb fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -1,23 +1,63 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import type { SGnbSystemPlacement } from '../SGnbSystem/gnbSystem.config';
 import { type SGnbType, type SGnbHeader, type SGnbColor, type SGnbMenuItem } from './gnb.config';
+/**
+ * SGnb 가 `system` 슬롯에 내려주는 값. 슬롯에 놓인 SGnbSystem 이 이걸 읽어
+ * 색과 형태(가로/세로 · 펼침/접힘)를 GNB 에 맞춘다 — 앱이 같은 값을 두 번 넘기지 않게 한다.
+ *
+ * 슬롯이 어디에 놓이는지는 header 가 정한다.
+ * - fix : 메뉴 컬럼 바닥 · 접힘 레일 바닥 → `placement: 'panel'` (세로 판)
+ * - full: 전폭 상단바 오른쪽 끝 → `placement: 'top'` (판 없이 가로 한 줄)
+ *
+ * `folded` 는 GNB 의 접힘 상태가 아니라 **그 자리가 접힌 레일인지**다. panel 은 두 곳에 놓이고
+ * (메뉴 컬럼 바닥 · 접힘 레일 바닥) 각 자리가 자기 형태를 못 박으므로, 접는 동안 아직 미끄러져
+ * 나가는 중인 메뉴 컬럼의 패널이 min 형태로 튀지 않는다.
+ *
+ * 그래서 fix 로 접혀 있는 동안 슬롯 내용은 **두 자리에 함께 마운트된다** — 미끄러져 나간 메뉴
+ * 컬럼(잔상)과 레일 바닥(실물). `active` 가 그 둘을 가른다.
+ */
+export interface SGnbSystemContextValue {
+    /** GNB 색 */
+    color: SGnbColor;
+    /** 이 자리가 접힌(48px) 레일인지. `placement: 'top'` 에서는 뜻이 없다 */
+    folded: boolean;
+    /** 이 자리가 세로 판인지 전폭 상단바인지 */
+    placement: SGnbSystemPlacement;
+    /**
+     * 이 자리가 지금 화면에 살아 있는 자리인가. 접힌 GNB 의 메뉴 컬럼처럼 밖으로 미끄러져 나가
+     * 잔상으로만 남는 자리는 `false` 다.
+     *
+     * 잔상에서도 계정 리스트박스 같은 **떠 있는 층은 함께 숨지 않는다** — SPortal 로 문서 최상단에
+     * 그려져 컬럼의 `visibility: hidden` 이 닿지 않기 때문이다. 그래서 잔상이 된 자리는 열어 둔
+     * 것을 스스로 닫아야 하고, 그 신호가 이 값이다.
+     */
+    active: boolean;
+    /**
+     * 이 자리가 메뉴 기본 폭(GNB_MENU_WIDTH)보다 좁은가 — `resizable` 로 줄인 메뉴 컬럼이 그렇다.
+     * 좁아진 판에서는 알림 개수를 적을 가로가 모자라 개수 대신 점 배지가 붙는다.
+     * 없으면 좁지 않은 것으로 본다(접힘 레일·상단바는 자기 규칙을 따르므로 이 값과 무관하다).
+     */
+    narrow?: boolean;
+}
+export declare const SGnbSystemContext: import("react").Context<SGnbSystemContextValue | null>;
 export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     /** 메뉴 스타일: box(라운드) / belt(풀폭 행). 미지정 시 SLayout 의 type 을 따른다. */
     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) */
@@ -27,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 로 고정된다. */
@@ -40,12 +80,12 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     topContent?: ReactNode;
     /**
      * 레일 상단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고
-     * 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. useRail 일 때만 렌더된다.
+     * 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. showRail 일 때만 렌더된다.
      */
     railTop?: ReactNode;
     /**
      * 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고
-     * 이 슬롯은 레일 하단에 붙어 고정된다. useRail 일 때만 렌더된다.
+     * 이 슬롯은 레일 하단에 붙어 고정된다. showRail 일 때만 렌더된다.
      */
     railFooter?: ReactNode;
     /**
@@ -80,6 +120,15 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     defaultMenuWidth?: number;
     /** 메뉴 폭이 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 */
     onMenuWidthChange?: (width: number) => void;
+    /**
+     * system 슬롯(`SGnbSystem`). 놓이는 자리와 형태는 `header` 가 정한다.
+     * - fix : GNB 맨 아래 세로 판. 펼치면 메뉴 컬럼 바닥에, 접히면 `foldedFooter` 아래 레일 바닥에
+     *   여백 없이 붙는다. showRail 에서 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로
+     *   이 슬롯도 함께 빠진다.
+     * - full: 전폭 상단바 오른쪽 끝에 가로 한 줄로 선다. 상단바는 접어도 남으므로 조각들도 늘 남는다.
+     * 색·형태는 GNB 가 내려주므로 SGnbSystem 에 다시 넘기지 않아도 된다.
+     */
+    system?: ReactNode;
     /** 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. */
     ariaLabel?: string;
 }
@@ -91,8 +140,9 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
  * header 가 배치와 접힘 형태를 정한다:
  * - fix: 상단바가 GNB 컬럼(메뉴 폭) 안에 있다. 접으면 48px 세로 레일로 좁혀지고 상단바에는 폴드 버튼만 남는다.
  * - full: 상단바가 레이아웃 전폭을 가로지르고 그 아래 [메뉴 | 페이지]. 접으면 메뉴만 사라진다.
+ *   system 조각들도 메뉴 바닥이 아니라 이 상단바 오른쪽 끝으로 올라온다.
  *
- * useRail 이면 items 의 첫 depth 가 좌측 레일(아이콘+라벨 68px)로 서고, 선택된 레일 아이템의
+ * showRail 이면 items 의 첫 depth 가 좌측 레일(아이콘+라벨 68px)로 서고, 선택된 레일 아이템의
  * children 이 메뉴 패널의 depth1 이 된다 — 트리는 그대로 두고 어디부터 그릴지만 바뀐다.
  * children 없는 레일 아이템은 자기 자신이 선택(리프)이라 메뉴 패널을 렌더하지 않는다. 이런 리프가
  * 하나라도 있으면 활성에 따라 메뉴 폭이 출렁이므로 header 는 full 로 강제해 상단바를 전폭에 고정한다.