sellmate-design-system-react 9.0.0-beta.24 → 9.0.0-beta.26

package/dist/llms-full.txt

@@ -34,7 +34,7 @@
 
 | 분류 | 컴포넌트 |
 | --- | --- |
-| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
+| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
 | **표·목록** | `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
@@ -160,7 +160,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SPage`(제목 영역은 `header` prop) |
 | **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SForm` `SSplitter` `SScrollArea` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `STabs` `SStepper` `SPagination` `SDivider` |
-| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
+| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
 
@@ -531,6 +531,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 라벨이 있는 일반 액션을 준다 | `SButton` | §3-5 |
 | 아이콘 하나로 뜻이 통하는 부가 조작을 준다 | `SGhostButton` | §3-5-5 |
 | 한 버튼에 여러 선택지를 매단다 | `SDropdownButton` | §3-5-4 |
+| GNB system 패널에서 한 줄짜리 행 액션을 준다 | `SSystemActionButton` | §3-5-7 |
 
 #### D. 화면을 담고 나눈다
 
@@ -1020,6 +1021,7 @@ const columns: STableColumn[] = [
 | **아이콘 하나로 뜻이 통하는 부가 조작** | **`SGhostButton`** — 라벨이 없는 아이콘 전용 버튼 (아래 3-5-5) |
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
+| **GNB system 패널의 한 줄 액션** | **`SSystemActionButton`** — 행 전체가 버튼인 표면형 (아래 3-5-7) |
 
 #### 3-5-1. 채움 버튼은 페이지당 개수 제한이 있다
 
@@ -1152,6 +1154,34 @@ const columns: STableColumn[] = [
 </div>
 ```
 
+#### 3-5-7. `SSystemActionButton` — GNB system 패널의 한 줄 액션
+
+**행 전체가 하나의 버튼**인 표면형 컨트롤이다. 아이콘 프레임 + 라벨 + 우측 액션이 한 줄에 붙고, hover 하면 표면색이 한 단계 바뀐다.
+
+| 상황 | 사용 |
+| --- | --- |
+| 페이지·모달의 일반 액션 | `SButton` — 라벨 폭만큼만 차지한다 |
+| 목록에서 항목 하나를 고르게 한다 | `SListItem` · `STree` (§3-7-6·§3-7-7) |
+| 좌측 내비게이션의 메뉴 | `SGnb` 의 `menus` (§4-1) |
+| **GNB system 패널에서 설정·연결 상태를 한 줄씩 쌓고, 그 줄을 눌러 들어가게 한다** | **`SSystemActionButton`** |
+
+**무엇이 그려지는지는 `type` 이 정한다.** 타입마다 다른 값만 `option` 으로 받으므로, 타입에 맞지 않는 `option` 은 타입 에러가 된다.
+
+| `type` | 선행 아이콘 | 라벨 | 우측 | 언제 |
+| --- | --- | --- | --- | --- |
+| `account` | `user` 고정 | `label` | 없음 | 로그인한 계정을 보여주고 계정 화면으로 보낼 때 |
+| `select` | `option.icon` (필수) | `label` | 화살표 | 눌러서 하위 화면으로 들어갈 때 |
+| `switch` | `option.icon` (필수) | `label` | `option.text` + 새로고침 | 지금 붙어 있는 대상을 갈아 끼울 때 |
+| `subSelect` | `option.icon` (필수) | `label` | `option.text` + 화살표 | 지금 선택돼 있는 값을 함께 보여줄 때 |
+| `status` | 없음 | 상태 태그(`option.color`·`option.label`) | 화살표 | 라벨 대신 상태 자체가 제목일 때 |
+
+- **`SPage` 본문에 직접 놓지 않는다.** 폭을 가득 채우는 행이라 페이지에 바로 놓으면 표처럼 보인다. GNB system 패널·`SDrawer`·`SPopover` 처럼 **좁은 폭이 정해진 자리**에 쌓는다. 행 사이 간격은 `--cmp-gnb-system-panel-gap` 이다.
+- **`color` 는 놓이는 표면을 따라간다** — 흰 면이면 `light`, 오션블루 면이면 `dark`, 네이비 면이면 `darker`. 배경과 다른 색을 고르면 버튼만 떠 보인다.
+- **상태는 default·hover 둘뿐이다.** 토큰에 selected 가 없으므로 "지금 열려 있는 항목"을 이 버튼으로 표시하지 않는다. 선택 상태가 필요한 자리면 `SGnb` 메뉴나 `SListItem`(§3-7-6) 이다.
+- **선행 아이콘이 비는 행은 없다.** `account` 는 `user` 고정, `status` 는 태그가 자리를 차지하고, 나머지는 `option.icon` 이 필수다.
+- **우측 아이콘은 `type` 이 정하므로 밖에서 바꾸지 않는다.** 화살표가 필요한데 문구가 없으면 `select`, 문구가 함께 필요하면 `subSelect` 다.
+- 높이·라운드·아이콘 크기·좌우 여백은 전부 토큰이 넣는다. 직접 주지 않는다.
+
 ### 3-6. 영역 나누기 — SDivider vs SSplitter
 
 | 상황 | 사용 |
@@ -2049,6 +2079,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | typo-body-xs-default | 11px | 400 | 18px |
 | typo-body-sm-default | 12px | 400 | 20px |
 | typo-body-sm-medium | 12px | 500 | 20px |
+| typo-body-sm-semibold | 12px | 600 | 20px |
 | typo-body-sm-bold | 12px | 700 | 20px |
 | typo-body-md-default | 14px | 400 | 24px |
 | typo-body-md-medium | 14px | 500 | 24px |
@@ -2171,6 +2202,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-lightblue-subtle
 --sys-color-link-accent
 --sys-color-navigation-gnb-bg-dark
+--sys-color-navigation-gnb-bg-system
 
 ## 3. 컴포넌트 카탈로그 (Props / Events / Methods / Types)
 
@@ -2630,8 +2662,7 @@ export type SCheckboxValue = boolean | unknown[] | null;
 | `fields?` | `SChipFilterGroup[]` | — | 필터 정의 목록. 묶을 것이 없어도 한 그룹으로 감싸 넘긴다 — `[{ fields: [...] }]`. 그룹은 rule로 함께 검증하거나 divider로 갈라 놓을 때 나눈다. |
 | `value?` | `SChipFilterValueMap` | — | 필터 값 맵 |
 | `activeKeys?` | `string[]` | — | 노출 필터 key 목록. 지정하면 제어 컴포넌트로 동작 — "필터 추가"로 고른 필드를 이 배열에 직접 넣어줘야 칩이 나타난다(onActiveKeysChange에서 받은 keys로 갱신). 지정하지 않으면 fixed·required 필드만 노출된 상태로 시작해 컴포넌트가 내부 상태로 관리하는 비제어 방식으로 동작한다. fixed·required 필드는 이 배열에 없어도 항상 노출된다 |
-| `label?` | `string` | `'검색 필터'` | 좌측 태그 텍스트 |
-| `showLabel?` | `boolean` | `false` | 좌측 태그(label)·구분선 표시 여부 |
+| `label?` | `string` | — | 좌측 태그 텍스트. 지정하면 태그와 그 뒤 구분선이 함께 노출되고, 지정하지 않으면(undefined) 둘 다 생략된다 |
 | `showReset?` | `boolean` | `true` | 검색 초기화 링크 표시 여부 |
 | `disabled?` | `boolean` | `false` | 바 비활성 상태 |
 | `className?` | `string` | — |  |
@@ -2643,7 +2674,7 @@ export type SCheckboxValue = boolean | unknown[] | null;
 |-------|------|-------------|
 | `onValueChange` | `(value: SChipFilterValueMap) => void` | 전체 값 변경 — 편집 중인 값이 바뀔 때마다(선택할 때마다) 호출된다. 실제 검색 실행은 onSearch를 쓴다 |
 | `onFilterChange` | `(detail: SChipFilterChangeDetail) => void` | 개별 필터 값 변경 |
-| `onSearch` | `(value: SChipFilterValueMap) => void` | 실제 검색을 실행할 시점 — 편집 팝오버의 "검색" 버튼을 누르거나 팝오버가 닫힐 때(바깥 클릭·Esc·다른 칩으로 전환 포함) 그 시점의 전체 값 맵과 함께 호출된다. 팝오버가 없는 필드(인라인 date 프리셋·custom, clearable ×, 검색 초기화)는 값이 바뀌는 즉시 호출된다. keyword 필터에서 Enter 로 키워드를 추가할 때도 그 즉시 호출된다 — 팝오버는 열린 채라 키워드를 이어서 더 넣을 수 있고, 넣을 때마다 조회가 갱신된다. dirty 체크가 기본 적용되어 있어 — 마지막으로 실제 검색이 실행된 값 맵과 비교해 하나라도 달라진 게 없으면(예: 팝오버를 열었다 아무것도 안 바꾸고 닫는 경우) 호출되지 않는다. fields를 그룹으로 넘겼다면 rule을 만족하지 못한 그룹이 있는 동안엔 onSearch가 호출되지 않는다 — 해당 그룹의 경고 툴팁은 이 시점과 무관하게 값이 비어 있는 동안 항상 실시간으로 떠 있다(별도로 validate()를 호출할 필요 없음) |
+| `onSearch` | `(value: SChipFilterValueMap) => void` | 실제 검색을 실행할 시점 — 편집 팝오버의 "검색" 버튼을 누르거나 팝오버가 닫힐 때(바깥 클릭·Esc·다른 칩으로 전환 포함) 그 시점의 전체 값 맵과 함께 호출된다. 팝오버가 없는 필드(인라인 date 프리셋·custom, clearable ×, 검색 초기화)는 값이 바뀌는 즉시 호출된다. keyword 필터에서 Enter 로 키워드를 추가할 때도 그 즉시 호출된다 — 팝오버는 열린 채라 키워드를 이어서 더 넣을 수 있고, 넣을 때마다 조회가 갱신된다. dirty 체크가 기본 적용되어 있어 — 마지막으로 실제 검색이 실행된 값 맵과 비교해 하나라도 달라진 게 없으면(예: 팝오버를 열었다 아무것도 안 바꾸고 닫는 경우) 호출되지 않는다. fields를 그룹으로 넘겼다면 rule을 만족하지 못한 그룹이 있는 동안엔 onSearch가 호출되지 않는다 — 해당 그룹의 경고 툴팁은 이 시점과 무관하게 값이 비어 있는 동안 항상 실시간으로 떠 있다(별도로 validate()를 호출할 필요 없음). required 필드가 비어 있는 동안에도 마찬가지로 호출되지 않는다 — 정상 설정(내장 기본값 또는 defaultValue)이라면 원래 비워지지 않지만, defaultValue 없는 select-multi·keyword·custom에 required만 준 오설정에서는 "검색 초기화"·clearable이 값을 null로 비울 수 있어 이때의 안전장치다 |
 | `onActiveKeysChange` | `(keys: string[]) => void` | 노출 필터 key 변경(칩 추가·제거) — 비제어 방식에서도 참고용으로 호출된다. activeKeys를 직접 제어할 때는 이 값을 그대로 activeKeys에 반영해야 한다 |
 | `onReset` | `() => void` | "검색 초기화" 클릭 — 모든 필드가 기본값(또는 null)으로 리셋된 뒤 호출된다 |
 | `onAddFilter` | `(key: string) => void` | "필터 추가" 목록에서 항목을 골랐을 때 — activeKeys를 직접 제어 중이면 이 콜백에서 (또는 onActiveKeysChange에서) key를 activeKeys에 추가해줘야 칩이 실제로 나타난다. activeKeys를 넘기지 않았다면(비제어) 별도 처리 없이도 컴포넌트가 알아서 칩을 노출한다 |
@@ -2654,7 +2685,7 @@ export type SCheckboxValue = boolean | unknown[] | null;
 |--------|------|-------------|
 | `open` | `(key: string) => void` | 특정 필터 편집 팝오버를 엽니다. |
 | `reset` | `() => void` | 모든 필터 값을 초기화합니다. |
-| `validate` | `() => boolean` | 현재 값 기준으로 각 그룹의 rule을 만족하는지 반환합니다. rule을 준 그룹이 없으면 항상 true. 경고 툴팁은 이 호출과 무관하게 rule 위반 상태인 동안 항상 실시간으로 떠 있으므로, 이 메서드는 그 상태를 그대로 읽어오는 용도다(예: 검색 버튼을 눌러도 되는지 사전 확인) |
+| `validate` | `() => boolean` | 현재 값 기준으로 각 그룹의 rule을 만족하는지, 그리고 required 필드가 모두 비어 있지 않은지 반환합니다. rule을 준 그룹이 없고 required 필드도 모두 값이 있으면 항상 true. 경고 툴팁은 이 호출과 무관하게 rule 위반 상태인 동안 항상 실시간으로 떠 있으므로, 이 메서드는 그 상태를 그대로 읽어오는 용도다(예: 검색 버튼을 눌러도 되는지 사전 확인) |
 
 ## Types
 
@@ -2671,7 +2702,8 @@ export interface SChipFilterGroup {
   /** rule을 만족하지 않을 때 그룹 중앙에 띄울 툴팁 메시지. 지정 안 하면 rule 종류에 따른 기본 문구를 쓴다 */
   tooltipMessage?: string;
   /** 이 그룹 앞에 구분선을 넣을지. 검증(rule)과 구분선은 별개라 — 묶어서 검증만 하고 싶으면
-   *  주지 않는다. 첫 그룹에는 앞에 가를 것이 없으므로 무시된다(showLabel의 구분선이 이미 있다) */
+   *  주지 않는다. 첫 그룹에는 앞에 가를 것이 없으므로 무시된다(label을 지정했다면 그 구분선이
+   *  이미 있다) */
   divider?: boolean;
 }
 ```
@@ -4532,6 +4564,7 @@ export type SGuideMessage = string | SGuideMessage[];
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SSelect](../SSelect)
  - [SStepper](../SStepper)
+ - [SSystemActionButton](../SSystemActionButton)
  - [STable](../STable)
  - [STag](../STag)
  - [STextLink](../STextLink)
@@ -6266,6 +6299,131 @@ export const STEPPER_SIZES = ['sm', 'lg'] as const;
 
 ---
 
+# SSystemActionButton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSystemActionButtonAccount
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'account'` | — | 계정 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option?` | `never` | — | 아이콘이 `user` 로 고정이라 받을 것이 없다 |
+
+### SSystemActionButtonBase
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color?` | `SSystemActionButtonColor` | — | 색상(놓이는 표면). light = 흰 면, dark = 오션블루 면, darker = 네이비 면. 기본 `'light'` |
+| `disabled?` | `boolean` | — | 비활성 여부. 기본 `false` |
+
+### SSystemActionButtonSelect
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'select'` | — | 화살표만 붙는 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option` | `SSystemActionButtonIconOption` | — | 선행 아이콘 |
+
+### SSystemActionButtonStatus
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'status'` | — | 라벨 자리에 상태 태그가 들어가는 행 |
+| `label?` | `never` | — | 태그가 라벨 자리를 차지하므로 받지 않는다 |
+| `option?` | `SSystemActionButtonStatusOption` | — | 상태 태그 |
+
+### SSystemActionButtonText
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'switch' \| 'subSelect'` | — | 우측에 문구가 붙는 행. switch = 보조 조작 문구, subSelect = 지금 선택된 값 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option` | `SSystemActionButtonTextOption` | — | 선행 아이콘 + 우측 액션 텍스트 |
+
+## Types
+
+### SSystemActionButtonColor
+
+```ts
+export type SSystemActionButtonColor = (typeof SYSTEM_ACTION_BUTTON_COLORS)[number];
+```
+
+### SSystemActionButtonIconOption
+
+```ts
+/** 선행 아이콘만 받는 타입(`select`)의 option */
+export interface SSystemActionButtonIconOption {
+  /** 선행 아이콘명 */
+  icon: SIconName;
+}
+```
+
+### SSystemActionButtonStatusOption
+
+```ts
+/** `status` 타입의 option — 라벨 자리에 들어가는 상태 태그 */
+export interface SSystemActionButtonStatusOption {
+  /** 상태 태그 색 */
+  color?: STagColor;
+  /** 상태 태그 텍스트 */
+  label?: string;
+}
+```
+
+### SSystemActionButtonTextOption
+
+```ts
+/** 우측 액션 텍스트까지 받는 타입(`switch` · `subSelect`)의 option */
+export interface SSystemActionButtonTextOption extends SSystemActionButtonIconOption {
+  /** 우측 액션 텍스트 */
+  text?: string;
+}
+```
+
+### SYSTEM_ACTION_BUTTON_COLORS
+
+```ts
+/**
+ * SSystemActionButton 설정.
+ *
+ * 토큰은 GNB system 패널 한 벌(`--cmp-gnb-system-*`)을 그대로 쓴다.
+ *   행 공통(높이·라운드·아이콘 프레임·라벨)  → --cmp-gnb-system-item-*
+ *   색(color 축) light / dark / darker        → --cmp-gnb-system-item-<color>-*
+ *   우측 액션(패딩·간격·아이콘·텍스트색)      → --cmp-gnb-system-actionButton-*
+ *
+ * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
+ *   item.label              → typo-body-sm-semibold  (12/600/20)
+ *   actionButton.switch     → typo-field-sm-default   (12/400/20)
+ *   actionButton.selectData → typo-control-xs-medium  (12/500/20)
+ */
+
+/** 색상(표면). light = 흰 면, dark = 오션블루 면, darker = 네이비 면 */
+export const SYSTEM_ACTION_BUTTON_COLORS = ['light', 'dark', 'darker'] as const;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [STag](../STag)
+
+### Graph
+
+---
+
 # STable
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
@@ -6277,6 +6435,7 @@ export const STEPPER_SIZES = ['sm', 'lg'] as const;
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `columns?` | `STableColumn[]` | `[]` |  |
+| `headerGroups?` | `STableHeaderGroup[]` | — | 상위 그룹 헤더. 지정하면 기존 컬럼 헤더가 두 번째 행에 렌더링된다. |
 | `rows?` | `SRow[]` | `[]` |  |
 | `rowKey?` | `string` | `'id'` | 행 식별 필드 |
 | `selectable?` | `boolean` | `false` | 행 선택 체크박스 |
@@ -6346,6 +6505,21 @@ export type STableColumn = STableColumnBase &
   );
 ```
 
+### STableHeaderGroup
+
+```ts
+/** 2단 헤더의 상위 셀. columnNames는 visible 컬럼 기준으로 연속되어야 한다. */
+export interface STableHeaderGroup {
+  label?: ReactNode;
+  columnNames: string[];
+  rowSpan?: 1 | 2;
+  align?: 'left' | 'center' | 'right';
+  className?: string;
+  style?: CSSProperties;
+  render?: () => ReactNode;
+}
+```
+
 ### SRow
 
 ```ts
@@ -6550,6 +6724,7 @@ export const TAG_COLORS = [
  - [SConfirmModal](../SConfirmModal)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
+ - [SSystemActionButton](../SSystemActionButton)
  - [STabs](../STabs)
  - [STextLink](../STextLink)
 

package/dist/llms.txt

@@ -35,7 +35,7 @@
 
 | 분류 | 컴포넌트 |
 | --- | --- |
-| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
+| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
 | **표·목록** | `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
@@ -161,7 +161,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SPage`(제목 영역은 `header` prop) |
 | **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SForm` `SSplitter` `SScrollArea` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `STabs` `SStepper` `SPagination` `SDivider` |
-| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
+| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
 
@@ -532,6 +532,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 라벨이 있는 일반 액션을 준다 | `SButton` | §3-5 |
 | 아이콘 하나로 뜻이 통하는 부가 조작을 준다 | `SGhostButton` | §3-5-5 |
 | 한 버튼에 여러 선택지를 매단다 | `SDropdownButton` | §3-5-4 |
+| GNB system 패널에서 한 줄짜리 행 액션을 준다 | `SSystemActionButton` | §3-5-7 |
 
 #### D. 화면을 담고 나눈다
 
@@ -1021,6 +1022,7 @@ const columns: STableColumn[] = [
 | **아이콘 하나로 뜻이 통하는 부가 조작** | **`SGhostButton`** — 라벨이 없는 아이콘 전용 버튼 (아래 3-5-5) |
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
+| **GNB system 패널의 한 줄 액션** | **`SSystemActionButton`** — 행 전체가 버튼인 표면형 (아래 3-5-7) |
 
 #### 3-5-1. 채움 버튼은 페이지당 개수 제한이 있다
 
@@ -1153,6 +1155,34 @@ const columns: STableColumn[] = [
 </div>
 ```
 
+#### 3-5-7. `SSystemActionButton` — GNB system 패널의 한 줄 액션
+
+**행 전체가 하나의 버튼**인 표면형 컨트롤이다. 아이콘 프레임 + 라벨 + 우측 액션이 한 줄에 붙고, hover 하면 표면색이 한 단계 바뀐다.
+
+| 상황 | 사용 |
+| --- | --- |
+| 페이지·모달의 일반 액션 | `SButton` — 라벨 폭만큼만 차지한다 |
+| 목록에서 항목 하나를 고르게 한다 | `SListItem` · `STree` (§3-7-6·§3-7-7) |
+| 좌측 내비게이션의 메뉴 | `SGnb` 의 `menus` (§4-1) |
+| **GNB system 패널에서 설정·연결 상태를 한 줄씩 쌓고, 그 줄을 눌러 들어가게 한다** | **`SSystemActionButton`** |
+
+**무엇이 그려지는지는 `type` 이 정한다.** 타입마다 다른 값만 `option` 으로 받으므로, 타입에 맞지 않는 `option` 은 타입 에러가 된다.
+
+| `type` | 선행 아이콘 | 라벨 | 우측 | 언제 |
+| --- | --- | --- | --- | --- |
+| `account` | `user` 고정 | `label` | 없음 | 로그인한 계정을 보여주고 계정 화면으로 보낼 때 |
+| `select` | `option.icon` (필수) | `label` | 화살표 | 눌러서 하위 화면으로 들어갈 때 |
+| `switch` | `option.icon` (필수) | `label` | `option.text` + 새로고침 | 지금 붙어 있는 대상을 갈아 끼울 때 |
+| `subSelect` | `option.icon` (필수) | `label` | `option.text` + 화살표 | 지금 선택돼 있는 값을 함께 보여줄 때 |
+| `status` | 없음 | 상태 태그(`option.color`·`option.label`) | 화살표 | 라벨 대신 상태 자체가 제목일 때 |
+
+- **`SPage` 본문에 직접 놓지 않는다.** 폭을 가득 채우는 행이라 페이지에 바로 놓으면 표처럼 보인다. GNB system 패널·`SDrawer`·`SPopover` 처럼 **좁은 폭이 정해진 자리**에 쌓는다. 행 사이 간격은 `--cmp-gnb-system-panel-gap` 이다.
+- **`color` 는 놓이는 표면을 따라간다** — 흰 면이면 `light`, 오션블루 면이면 `dark`, 네이비 면이면 `darker`. 배경과 다른 색을 고르면 버튼만 떠 보인다.
+- **상태는 default·hover 둘뿐이다.** 토큰에 selected 가 없으므로 "지금 열려 있는 항목"을 이 버튼으로 표시하지 않는다. 선택 상태가 필요한 자리면 `SGnb` 메뉴나 `SListItem`(§3-7-6) 이다.
+- **선행 아이콘이 비는 행은 없다.** `account` 는 `user` 고정, `status` 는 태그가 자리를 차지하고, 나머지는 `option.icon` 이 필수다.
+- **우측 아이콘은 `type` 이 정하므로 밖에서 바꾸지 않는다.** 화살표가 필요한데 문구가 없으면 `select`, 문구가 함께 필요하면 `subSelect` 다.
+- 높이·라운드·아이콘 크기·좌우 여백은 전부 토큰이 넣는다. 직접 주지 않는다.
+
 ### 3-6. 영역 나누기 — SDivider vs SSplitter
 
 | 상황 | 사용 |
@@ -2050,6 +2080,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | typo-body-xs-default | 11px | 400 | 18px |
 | typo-body-sm-default | 12px | 400 | 20px |
 | typo-body-sm-medium | 12px | 500 | 20px |
+| typo-body-sm-semibold | 12px | 600 | 20px |
 | typo-body-sm-bold | 12px | 700 | 20px |
 | typo-body-md-default | 14px | 400 | 24px |
 | typo-body-md-medium | 14px | 500 | 24px |
@@ -2172,8 +2203,9 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-lightblue-subtle
 --sys-color-link-accent
 --sys-color-navigation-gnb-bg-dark
+--sys-color-navigation-gnb-bg-system
 
-## 3. 컴포넌트 인덱스 (67종)
+## 3. 컴포넌트 인덱스 (68종)
 
 **Props 는 이 문서에 없다.** 쓸 컴포넌트를 정했으면 그 컴포넌트의 README 를 읽는다.
 
@@ -2182,4 +2214,4 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 예) SButton 을 쓴다면 `dist/components/SButton/README.md`.
 prop 을 추측해서 쓰지 말고 반드시 README 로 확인한다 (분류별 용도는 §1 의 "전체 컴포넌트 인덱스" 참조).
 
-SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipFilter · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SEditor · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SImage · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSearchInput · SSectionHeaderCard · SSelect · SSplitter · SStepper · SSwitch · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree
+SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipFilter · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SEditor · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SImage · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSearchInput · SSectionHeaderCard · SSelect · SSplitter · SStepper · SSwitch · SSystemActionButton · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree

package/dist/styles.css

@@ -248,6 +248,7 @@
     --color-field-icon-default: #888888;
     --color-control-bg-inverseHover: #0075FF;
     --color-navigation-gnb-bg-dark: #001B39;
+    --color-navigation-gnb-bg-system: #004177;
     --color-primary-10: #EFF6FF;
     --color-primary-20: #E6F1FF;
     --color-primary-25: #D9EAFF;
@@ -1215,6 +1216,9 @@
   .w-\[61px\] {
     width: 61px;
   }
+  .w-\[176px\] {
+    width: 176px;
+  }
   .w-\[200px\] {
     width: 200px;
   }
@@ -1575,6 +1579,9 @@
   .gap-\(--cmp-field-addonLabel-gap\) {
     gap: var(--cmp-field-addonLabel-gap);
   }
+  .gap-\(--cmp-gnb-system-panel-gap\) {
+    gap: var(--cmp-gnb-system-panel-gap);
+  }
   .gap-\(--cmp-list-group-gap\) {
     gap: var(--cmp-list-group-gap);
   }
@@ -2091,6 +2098,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -2248,6 +2259,15 @@
   .border-transparent {
     border-color: transparent;
   }
+  .bg-\(--cmp-gnb-system-item-dark-bg-default\) {
+    background-color: var(--cmp-gnb-system-item-dark-bg-default);
+  }
+  .bg-\(--cmp-gnb-system-item-darker-bg-default\) {
+    background-color: var(--cmp-gnb-system-item-darker-bg-default);
+  }
+  .bg-\(--cmp-gnb-system-item-light-bg-default\) {
+    background-color: var(--cmp-gnb-system-item-light-bg-default);
+  }
   .bg-\(--cmp-image-bg\) {
     background-color: var(--cmp-image-bg);
   }
@@ -2311,6 +2331,12 @@
   .bg-\(--cmp-tree-item-bg-default\) {
     background-color: var(--cmp-tree-item-bg-default);
   }
+  .bg-\(--sab-bg\) {
+    background-color: var(--sab-bg);
+  }
+  .bg-\(--sab-icon-bg\) {
+    background-color: var(--sab-icon-bg);
+  }
   .bg-\(--sys-color-bg-frame\) {
     background-color: var(--sys-color-bg-frame);
   }
@@ -2548,6 +2574,9 @@
       background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
     }
   }
+  .p-\(--cmp-gnb-system-panel-gap\) {
+    padding: var(--cmp-gnb-system-panel-gap);
+  }
   .p-\(--cmp-list-group-padding\) {
     padding: var(--cmp-list-group-padding);
   }
@@ -3207,6 +3236,18 @@
   .text-\(--color-var\) {
     color: var(--color-var);
   }
+  .text-\(--sab-action-icon\) {
+    color: var(--sab-action-icon);
+  }
+  .text-\(--sab-action-text\) {
+    color: var(--sab-action-text);
+  }
+  .text-\(--sab-icon-glyph\) {
+    color: var(--sab-icon-glyph);
+  }
+  .text-\(--sab-text\) {
+    color: var(--sab-text);
+  }
   .text-\(--sys-color-disabled-text\) {
     color: var(--sys-color-disabled-text);
   }
@@ -3656,6 +3697,13 @@
       }
     }
   }
+  .group-hover\:bg-\(--sab-icon-bg-hover\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--sab-icon-bg-hover);
+      }
+    }
+  }
   .group-hover\:font-bold {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3664,6 +3712,13 @@
       }
     }
   }
+  .group-hover\:text-\(--sab-icon-glyph-hover\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--sab-icon-glyph-hover);
+      }
+    }
+  }
   .group-hover\/editor-tool\:opacity-5 {
     &:is(:where(.group\/editor-tool):hover *) {
       @media (hover: hover) {
@@ -4076,6 +4131,13 @@
       }
     }
   }
+  .hover\:bg-\(--sab-bg-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--sab-bg-hover);
+      }
+    }
+  }
   .hover\:bg-\(--sys-color-bg-neutralBright\) {
     &:hover {
       @media (hover: hover) {
@@ -5506,6 +5568,7 @@
   --sys-color-field-icon-default: #888888;
   --sys-color-control-bg-inverseHover: #0075FF;
   --sys-color-navigation-gnb-bg-dark: #001B39;
+  --sys-color-navigation-gnb-bg-system: #004177;
   --cmp-button-xs-height: 24px;
   --cmp-button-xs-paddingX: 8px;
   --cmp-button-xs-gap: 4px;
@@ -6161,7 +6224,7 @@
   --cmp-guide-contents-typography-color: #222222;
   --cmp-guide-contents-icon: #00973C;
   --cmp-guide-contents-radius: 8px;
-  --cmp-guide-contents-depth-paddingLeft: 32px;
+  --cmp-guide-contents-depth-paddingLeft: 24px;
   --cmp-progress-linear-height: 20px;
   --cmp-progress-linear-radius: 9999px;
   --cmp-progress-linear-gap: 12px;
@@ -6320,6 +6383,86 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-gnb-system-panel-light-bg: #FFFFFF;
+  --cmp-gnb-system-panel-light-border: #E1E1E1;
+  --cmp-gnb-system-panel-dark-bg: #004177;
+  --cmp-gnb-system-panel-dark-border: #006AC1;
+  --cmp-gnb-system-panel-gap: 8px;
+  --cmp-gnb-system-panel-divider-color-light: #E1E1E1;
+  --cmp-gnb-system-panel-divider-color-dark: #006AC1;
+  --cmp-gnb-system-panel-divider-color-darker: #004290;
+  --cmp-gnb-system-domainTag-paddingX: 12px;
+  --cmp-gnb-system-domainTag-paddingY: 2px;
+  --cmp-gnb-system-domainTag-radius: 6px;
+  --cmp-gnb-system-domainTag-light-bg: #F6F6F6;
+  --cmp-gnb-system-domainTag-light-text: #555555;
+  --cmp-gnb-system-domainTag-dark-bg: #07284A;
+  --cmp-gnb-system-domainTag-dark-text: #FFFFFF;
+  --cmp-gnb-system-domainTag-darker-bg: #004177;
+  --cmp-gnb-system-domainTag-darker-text: #FFFFFF;
+  --cmp-gnb-system-item-height: 32px;
+  --cmp-gnb-system-item-radius: 8px;
+  --cmp-gnb-system-item-icon-frame: 24px;
+  --cmp-gnb-system-item-icon-glyph: 20px;
+  --cmp-gnb-system-item-icon-radius: 4px;
+  --cmp-gnb-system-item-iconLabelGap: 8px;
+  --cmp-gnb-system-item-light-bg-default: #FFFFFF;
+  --cmp-gnb-system-item-light-bg-hover: #F6F6F6;
+  --cmp-gnb-system-item-light-icon-bg: #FFFFFF;
+  --cmp-gnb-system-item-light-icon-default: #888888;
+  --cmp-gnb-system-item-light-text: #222222;
+  --cmp-gnb-system-item-dark-bg-default: #004177;
+  --cmp-gnb-system-item-dark-bg-hover: #025497;
+  --cmp-gnb-system-item-dark-icon-bg-default: #004177;
+  --cmp-gnb-system-item-dark-icon-bg-hover: #FFFFFF;
+  --cmp-gnb-system-item-dark-text: #FFFFFF;
+  --cmp-gnb-system-item-darker-bg-default: #001B39;
+  --cmp-gnb-system-item-darker-bg-hover: #002B5E;
+  --cmp-gnb-system-item-darker-icon-bg-default: #001B39;
+  --cmp-gnb-system-item-darker-icon-bg-hover: #FFFFFF;
+  --cmp-gnb-system-item-darker-text: #FFFFFF;
+  --cmp-gnb-system-actionButton-paddingLeft: 4px;
+  --cmp-gnb-system-actionButton-paddingRight: 6px;
+  --cmp-gnb-system-actionButton-selectData-gap: 4px;
+  --cmp-gnb-system-actionButton-selectData-icon: 16px;
+  --cmp-gnb-system-actionButton-selectData-text-light: #005CC9;
+  --cmp-gnb-system-actionButton-selectData-text-dark: #BBDAFF;
+  --cmp-gnb-system-actionButton-switch-icon: 16px;
+  --cmp-gnb-system-actionButton-switch-text-light: #555555;
+  --cmp-gnb-system-actionButton-switch-text-dark: #FFFFFF;
+  --cmp-gnb-system-actionButton-select-icon: 16px;
+  --cmp-gnb-system-accountButton-paddingY: 4px;
+  --cmp-gnb-system-accountButton-paddingX: 12px;
+  --cmp-gnb-system-accountButton-gap: 8px;
+  --cmp-gnb-system-accountButton-icon: 16px;
+  --cmp-gnb-system-accountButton-bg-default: #FFFFFF;
+  --cmp-gnb-system-accountButton-bg-hover: #F6F6F6;
+  --cmp-gnb-system-accountButton-bg-negativeHover: #FCEFEF;
+  --cmp-gnb-system-accountButton-content-default: #222222;
+  --cmp-gnb-system-accountButton-content-negative: #E30000;
+  --cmp-gnb-system-accountButton-selectData-gap: 4px;
+  --cmp-gnb-system-accountButton-selectData-icon: 16px;
+  --cmp-gnb-system-accountButton-selectData-text: #005CC9;
+  --cmp-gnb-system-accountListBox-width: 240px;
+  --cmp-gnb-system-accountListBox-bg: #FFFFFF;
+  --cmp-gnb-system-accountListBox-radius: 4px;
+  --cmp-gnb-system-accountListBox-userdata-bg: #F9F9F9;
+  --cmp-gnb-system-accountListBox-userdata-paddingX: 12px;
+  --cmp-gnb-system-accountListBox-userdata-paddingY: 8px;
+  --cmp-gnb-system-accountListBox-userdata-email-color: #888888;
+  --cmp-gnb-system-accountListBox-userdata-name-color: #555555;
+  --cmp-gnb-system-accountListBox-userdata-role-color: #888888;
+  --cmp-gnb-system-accountListBox-list-paddingY: 4px;
+  --cmp-gnb-system-alertButton-paddingX: 4px;
+  --cmp-gnb-system-alertButton-count-color-light: #0075FF;
+  --cmp-gnb-system-alertButton-count-color-dark: #FFD643;
+  --cmp-gnb-system-alertButton-bg-notificationHover-light: #EFF6FF;
+  --cmp-gnb-system-alertButton-icon-color-notification-light: #64ABFF;
+  --cmp-gnb-system-alertButton-icon-color-notification-dark: #FEE17C;
+  --cmp-gnb-system-setting-paddingX: 4px;
+  --cmp-gnb-system-min-padding: 8px;
+  --cmp-gnb-system-project-gap: 8px;
+  --cmp-gnb-system-project-padding: 8px;
   --cmp-list-group-gap: 8px;
   --cmp-list-group-padding: 16px;
   --cmp-listItem-paddingX: 16px;
@@ -6555,6 +6698,12 @@
     font-weight: 500;
     line-height: 20px;
   }
+  .typo-body-sm-semibold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 20px;
+  }
   .typo-body-sm-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 12px;