sellmate-design-system-react 9.0.0-beta.7 → 9.0.0-beta.70

package/README.md

@@ -50,6 +50,19 @@ npx sellmate-ds init
   `sd-` 접두로 씁니다: `p-sd-16`(16px) · `gap-sd-8`(8px). 자세한 규칙은 `AGENTS.md` §2-2.
 - `@source` — 라이브러리 `dist`를 Tailwind 스캔 대상에 포함시켜 컴포넌트 클래스가 생성되게 합니다. **경로는 여러분의 CSS 파일 위치 기준 상대경로**이며, `node_modules` 전체가 아니라 반드시 이 패키지 `dist`만 지정하세요.
 
+## 글꼴
+
+`theme.css` 가 문서 전역 글꼴을 디자인 토큰 `--font-base`(Pretendard 스택)로 깝니다. 앱은 **글꼴 클래스를 붙이지 않습니다** — `font-sans` 도 같은 스택을 가리키므로 붙일 이유가 없습니다.
+
+**글꼴 파일도 패키지에 들어 있습니다.** Pretendard Variable 다이내믹 서브셋을 `theme.css` 가 함께 싣기 때문에, 앱은 CDN 을 걸거나 폰트를 따로 설치할 필요가 없습니다. 위 **방식 1**(또는 방식 2) 설정만 하면 끝입니다.
+
+- **CDN 을 쓰지 않습니다.** 사내망·오프라인·폐쇄망에서도 그대로 동작하고, 외부로 나가는 요청이 없습니다.
+- **버전이 이 패키지에 고정됩니다.** CDN 최신 추적으로 글꼴이 말없이 바뀌는 일이 없습니다.
+- 다이내믹 서브셋이라 브라우저는 화면에 실제 쓰인 글자 범위의 조각만 내려받습니다. 한글 전체 폰트(약 1MB)를 통째로 받지 않습니다. 패키지 용량은 약 3MB 늘지만 **앱 JS 번들에는 전혀 들어가지 않습니다.**
+- 폰트 자산은 `dist/fonts/` 에 있고 라이선스(SIL OFL 1.1)는 `dist/fonts/LICENSE.txt` 입니다.
+
+앱이 Pretendard 를 이미 자체 호스팅하고 있어도 문제되지 않습니다 — `@font-face` 선언이 겹칠 뿐, 브라우저가 실제로 내려받는 파일은 한 벌입니다.
+
 ## 설정 (방식 2 — 폴백, Tailwind 미사용)
 
 Tailwind를 쓰지 않는 앱은 컴파일된 CSS를 직접 import 합니다.
@@ -178,16 +191,18 @@ export default [
 
 **`error` 는 "지키지 않으면 깨지는 것" 에만 씁니다.** 앱 화면을 Tailwind 로 자유롭게 만드는 것은 정상이고, 디자인 시스템이 그 자유까지 막지 않습니다. 나머지는 권고(`warn`)입니다.
 
-| 규칙                             | 기본      | 검출 대상                                                                                                                                                                                               |
-| -------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `sellmate/no-off-scale-spacing`  | **error** | 스케일 밖 디자인 시스템 간격 (`gap-sd-13`) — Tailwind v4 에서 **조용히 무시되어** 스타일이 사라진다                                                                                                     |
-| `sellmate/no-raw-html-control`   | **error** | 대응 컴포넌트가 있는 생 HTML (`<button>` `<input>` `<select>` `<textarea>` `<table>` `<form>` `<dialog>` `<hr>` `<details>` `<progress>`), `alert()`/`confirm()` — 디자인 시스템을 통째로 우회하는 경우 |
-| `sellmate/prefer-typo-preset`    | warn      | `text-14 font-bold` 같은 낱개 조합 → `typo-*` 프리셋                                                                                                                                                    |
-| `sellmate/component-group-gap`   | warn      | 같은 컴포넌트를 나열할 때의 그룹 간격 — 배열 방향에 따라 값이 다르다(체크박스 가로 24 / 세로 8)                                                                                                         |
-| `sellmate/table-numeric-align`   | warn      | 수량 컬럼(금액·수량 등)에 `align: 'right'` 누락 — **`--fix` 로 자동 교정**                                                                                                                              |
-| `sellmate/require-locale-number` | warn      | 수량 컬럼의 `toLocaleString()` 누락 — 세 자리 콤마                                                                                                                                                      |
-| `sellmate/field-width-grade`     | warn      | 필드 폭이 `maxLength`(스키마 상한)와 어긋남 — 등급 미지정 · 등급 밖 폭 · 상한 대비 과부족                                                                                                               |
-| `sellmate/no-arbitrary-class`    | **off**   | 토큰이 있는 속성(색·타이포·간격·모서리)의 임의 값 — `text-[14px]`, `bg-[#eee]`. 앱 고유 화면에는 정당한 사용이 많아 기본값은 끕니다                                                                     |
+| 규칙                               | 기본      | 검출 대상                                                                                                                                                                                               |
+| ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sellmate/no-off-scale-spacing`    | **error** | 스케일 밖 디자인 시스템 간격 (`gap-sd-13`) — Tailwind v4 에서 **조용히 무시되어** 스타일이 사라진다                                                                                                     |
+| `sellmate/no-raw-html-control`     | **error** | 대응 컴포넌트가 있는 생 HTML (`<button>` `<input>` `<select>` `<textarea>` `<table>` `<form>` `<dialog>` `<hr>` `<details>` `<progress>`), `alert()`/`confirm()` — 디자인 시스템을 통째로 우회하는 경우 |
+| `sellmate/divider-vertical-height` | **error** | 세로 `SDivider` 의 높이를 `className="h-*"` 로 준 경우 — `align-self: stretch` 가 무효가 되어 선이 줄 맨 위에 붙는다. `height` prop 으로 준다(**`--fix` 로 치환**)                                      |
+| `sellmate/prefer-typo-preset`      | warn      | `text-14 font-bold` 같은 낱개 조합 → `typo-*` 프리셋                                                                                                                                                    |
+| `sellmate/component-group-gap`     | warn      | 같은 컴포넌트를 나열할 때의 그룹 간격 — 배열 방향에 따라 값이 다르다(체크박스 가로 24 / 세로 8)                                                                                                         |
+| `sellmate/table-numeric-align`     | warn      | 수량 컬럼(금액·수량 등)에 `align: 'right'` 누락 — **`--fix` 로 자동 교정**                                                                                                                              |
+| `sellmate/require-locale-number`   | warn      | 수량 컬럼의 `toLocaleString()` 누락 — 세 자리 콤마                                                                                                                                                      |
+| `sellmate/field-width-grade`       | warn      | 필드 폭이 `maxLength`(스키마 상한)와 어긋남 — 등급 미지정 · 등급 밖 폭 · 상한 대비 과부족 · 등급 px 직접 지정(**`--fix` 로 등급 이름 치환**)                                                            |
+| `sellmate/table-column-width`      | warn      | 컬럼 폭 미지정(기본 120px 이 조용히 들어감) · px 아닌 폭(`%` `clamp()`) · 값을 그리는 열의 `autoWidth` 오용                                                                                             |
+| `sellmate/no-arbitrary-class`      | **off**   | 토큰이 있는 속성(색·타이포·간격·모서리)의 임의 값 — `text-[14px]`, `bg-[#eee]`. 앱 고유 화면에는 정당한 사용이 많아 기본값은 끕니다                                                                     |
 
 `className` 뿐 아니라 `cn()`/`clsx()` 인자, 템플릿 리터럴, 객체 키 안까지 검사합니다.
 
@@ -243,23 +258,29 @@ export default [
 필드 너비는 **`maxLength`(= 스키마 상한)로 정합니다.** 상한이 등급 안에 들어오면 그 등급으로 고정하고,
 등급 상한(`xl`)을 넘거나 상한이 아예 없으면 행 전체(`width="100%"` 또는 생략)로 둡니다.
 
-| 등급 | 폭    |                          |
-| ---- | ----- | ------------------------ |
-| `xs` | 80px  | 숫자 필드 전용           |
-| `sm` | 120px |                          |
-| `md` | 160px |                          |
-| `lg` | 240px |                          |
-| `xl` | 480px | 정책상 상한              |
+**폭은 등급 이름으로 줍니다** — `width="md"` 처럼 씁니다. 등급은 `--cmp-field-width-*` 토큰으로
+풀리므로 토큰이 바뀌면 화면이 따라갑니다. 같은 값을 px 로 적으면 그 화면만 옛 값에 남습니다.
+
+| 등급 | 쓰는 곳       |
+| ---- | ------------- |
+| `xs` | 숫자 필드 전용 |
+| `sm` |               |
+| `md` |               |
+| `lg` |               |
+| `xl` | 정책상 상한    |
 
 ```tsx
 // 상한이 등급 안에 들어온다 → 그 등급으로 고정
-<SInput name="code" label="코드" maxLength={10} width={160} />
+<SInput name="code" label="코드" maxLength={10} width="md" />
 
 // 상한이 xl 로도 안 담긴다 → 행 전체
 <SInput name="desc" label="설명" maxLength={100} width="100%" />
 
 // 숫자 필드의 상한은 maxLength 가 아니라 max 다 (천단위 콤마도 폭을 먹는다)
-<SNumberInput name="qty" label="수량" max={99} width={80} />
+<SNumberInput name="qty" label="수량" max={99} width="xs" />
+
+// 등급 값과 같은 px 를 적으면 등급 이름으로 자동 수정됩니다 (--fix)
+<SInput name="code" label="코드" maxLength={10} width={160} />   // → width="md"
 ```
 
 대상은 `SInput` · `SNumberInput` · `SBarcodeInput` 입니다. `STextarea` 는 여러 줄로 접혀 상한이 폭을
@@ -279,9 +300,9 @@ export default [
 한글은 전각이라 영숫자의 약 두 배를 먹으므로 **두 기준 사이에는 아무것도 보고하지 않습니다** —
 영숫자로 채워도 넘칠 때만 "좁다", 한글로 채워도 남을 때만 "넓다" 로 판정합니다.
 
-| 등급 | `SInput` (sm) | `SInput` (md) | `SNumberInput` (sm) | `SNumberInput` (sm, `useButton`) |
-| ---- | ------------- | ------------- | ------------------- | -------------------------------- |
-| `xs` | —             | —             | 영숫자 8            | 영숫자 2                         |
+| 등급 | `SInput` (sm)       | `SInput` (md)       | `SNumberInput` (sm) | `SNumberInput` (sm, `useButton`) |
+| ---- | ------------------- | ------------------- | ------------------- | -------------------------------- |
+| `xs` | —                   | —                   | 영숫자 8            | 영숫자 2                         |
 | `sm` | 영숫자 14 / 한글 7  | 영숫자 11 / 한글 6  | 영숫자 14           | 영숫자 8                         |
 | `md` | 영숫자 20 / 한글 11 | 영숫자 16 / 한글 9  | 영숫자 20           | 영숫자 14                        |
 | `lg` | 영숫자 32 / 한글 17 | 영숫자 26 / 한글 14 | 영숫자 32           | 영숫자 26                        |
@@ -291,15 +312,46 @@ export default [
 두 배가 되고(기본값), 있으면 버튼 두 개와 간격이 폭을 먹습니다. 규칙은 JSX 의 `useButton` 을 읽어
 둘을 구분합니다.
 
-값이 팀 기준과 다르면 옵션으로 덮습니다.
+등급 폭은 `--cmp-field-width-*` 토큰에서 읽으므로 규칙과 컴포넌트가 같은 값을 봅니다.
+글자수 환산 비율이 팀 기준과 다르면 옵션으로 덮습니다(등급 폭도 덮을 수 있지만, 토큰과 어긋나게 됩니다).
 
 ```js
 'sellmate/field-width-grade': ['warn', {
-  grades: { sm: 120, md: 160, lg: 240, xl: 480 },
   charRatio: { narrow: 0.55, wide: 1 },
 }],
 ```
 
+### 컬럼 폭 (`table-column-width`)
+
+`STable` 의 컬럼 폭은 `<colgroup>` 의 `<col width>` 로 들어가고 테이블이 `table-fixed` 라,
+**px 이 아닌 값은 에러 없이 화면만 틀어집니다** — `'30%'` 는 `30`(px)으로 읽히고, `clamp()` 같은
+함수형 값은 폭이 통째로 무효가 된 뒤 auto 로 떨어집니다.
+
+```tsx
+// 내용이 들어가는 열은 전부 폭을 명시한다 (생략하면 기본 120px 이 조용히 들어간다)
+{ name: 'name', label: '이름', field: 'name', width: 160 }
+{ name: 'code', label: '코드', field: 'code', width: '120px' }
+
+// autoWidth 는 남은 폭을 흡수하는 스페이서 열 하나에만 (값을 그리지 않으므로 field 도 없다)
+{ name: 'spacer', label: '', autoWidth: true }
+
+// ❌ 조용히 깨진다
+{ name: 'ratio', label: '비율', field: 'ratio', width: '30%' }
+// ❌ 값을 그리는 열의 autoWidth — 폭이 다른 열에 좌우돼 화면마다 달라진다
+{ name: 'title', label: '상품명', field: 'title', autoWidth: true, render: r => r.title }
+```
+
+검사 대상은 `name`(문자열 리터럴) · `label` 에 더해 **`field` 또는 `autoWidth` 를 가진 객체**입니다.
+검색 필터 필드나 상세 모달의 키-값 필드가 컬럼과 같은 `{ name, label, ... }` 모양이라, 그 둘만으로
+판정하면 표와 무관한 객체가 대부분 걸리기 때문입니다. 대신 `{ ...base, name, label }` 처럼 `field` 가
+스프레드로 들어오는 컬럼은 보고하지 않습니다 — 정적으로 필터 필드와 구분되지 않습니다.
+
+예외는 컬럼 `name` 을 `allow` 로 지정해 뺍니다.
+
+```js
+'sellmate/table-column-width': ['warn', { allow: ['spacer'] }],
+```
+
 ### 더 엄격하게 / 더 느슨하게
 
 `configs.strict` 는 전 규칙을 error 로 올리고, `<ul>` `<ol>` `<li>` `<svg>` `<label>` 까지 검사하며, 간격 유틸리티에 `sd-` 접두를 강제합니다(`requirePrefix`). 디자인 시스템 규칙을 처음부터 전면 적용하는 신규 프로젝트용입니다.

package/dist/components/SAccountListBox/AccountListBoxPortal.d.ts

@@ -0,0 +1,31 @@
+import { type RefObject } from 'react';
+import { type SAccountListBoxContent } from './SAccountListBox';
+/**
+ * 계정 행이 놓인 자리. 리스트박스가 어느 방향으로 펼쳐질지를 **이것만** 정한다.
+ * - `panel` — GNB 바닥의 세로 판(접힌 레일 포함). 계정 행이 맨 아래라 위로 편다.
+ * - `top` — 전폭 상단바 오른쪽 끝. 줄이 화면 맨 위라 아래로 편다.
+ */
+type AccountListBoxAnchor = 'panel' | 'top';
+export declare const AccountListBoxAnchorProvider: import("react").Provider<AccountListBoxAnchor>;
+/**
+ * 계정 리스트박스를 앵커에 붙여 띄우는 내부 래퍼.
+ *
+ * 계정 행은 GNB 판(펼침)·레일(접힘)·상단바 세 자리에 서고, 세 자리 모두 "누르면 같은 패널이
+ * 뜬다". 그 여는 방식(위치 · SPortal 설정 · 행을 고르면 닫기)을 한 곳에 모아 두어야 자리마다
+ * 동작이 갈리지 않는다. 공개 API 가 아니므로 index.ts 로 내보내지 않는다 —
+ * 앱은 `SSystemActionButton` 의 `option` 이나 `SGnbSystem` 의 `account.listBox` 로 닿는다.
+ */
+interface AccountListBoxPortalOptions {
+    /** 표시 여부 */
+    open: boolean;
+    /** 표시 상태 변경 */
+    onOpenChange: (open: boolean) => void;
+    /** 붙을 트리거 엘리먼트 */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** 접근성 이름 */
+    ariaLabel?: string;
+    /** 패널에 담기는 내용 */
+    content: SAccountListBoxContent;
+}
+export declare function AccountListBoxPortal({ open, onOpenChange, anchorRef, ariaLabel, content, }: AccountListBoxPortalOptions): import("react").JSX.Element;
+export {};

package/dist/components/SAccountListBox/README.md

@@ -0,0 +1,86 @@
+# SAccountListBox
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SAccountListBox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `email?` | `string` | — | 로그인한 계정의 이메일 |
+| `name?` | `string` | — | 로그인한 계정의 이름 |
+| `authority?` | `string` | — | 권한. 이름 오른쪽 끝에 붙는다. 없으면 이름만 남는다. (`role` 이 아닌 이유 — 그 이름은 DOM 의 ARIA 속성이라 소비 앱의 a11y lint 가 값을 ARIA 롤로 읽는다) |
+| `accountSetting?` | `SAccountListBoxItem` | — | 계정 설정 행. 주지 않으면 행이 빠진다 |
+| `language?` | `SAccountListBoxLanguage` | — | 언어 변경 행. 주지 않으면 행이 빠진다 |
+| `logout?` | `SAccountListBoxItem` | — | 로그아웃 행. 이 행은 늘 있고, 라벨과 클릭만 받는다 |
+
+## Types
+
+### SAccountListBoxItem
+
+```ts
+/** 리스트박스의 한 행 — 라벨은 기본값이 있고 클릭만 앱이 준다 */
+export interface SAccountListBoxItem {
+  /** 라벨 텍스트. 행마다 기본값이 있다 */
+  label?: string;
+  /** 클릭 */
+  onClick?: () => void;
+}
+```
+
+### SAccountListBoxLanguage
+
+```ts
+/** 언어 변경 행 — 지금 쓰는 언어가 우측에 붙고, 고를 것이 있으면 눌러서 편다 */
+export interface SAccountListBoxLanguage extends SAccountListBoxItem {
+  /**
+   * 지금 선택돼 있는 언어. 우측에 브랜드색으로 붙는다.
+   * `options` 를 함께 주면 그 목록에서 같은 `value` 를 찾아 `label` 로 적는다.
+   */
+  value?: string;
+  /**
+   * 고를 수 있는 언어. 주면 행을 눌렀을 때 **하위 메뉴가 우측 아래로 펼쳐지고**,
+   * 그동안 계정 패널은 닫히지 않는다. 주지 않으면 행을 누르는 것 자체가 액션이라
+   * `onClick` 만 돌고 패널이 닫힌다 — 언어 화면을 따로 두는 앱이 그렇다.
+   */
+  options?: SAccountListBoxLanguageOption[];
+  /** 하위 메뉴에서 언어를 고름. 고르면 하위 메뉴와 계정 패널이 함께 닫힌다 */
+  onChange?: (value: string) => void;
+}
+```
+
+### SAccountListBoxLanguageOption
+
+```ts
+/** 언어 변경 하위 메뉴의 한 칸 */
+export interface SAccountListBoxLanguageOption {
+  /** 값. `SAccountListBoxLanguage.value` 와 맞춰 지금 언어를 가린다 */
+  value: string;
+  /** 화면에 적히는 언어명 */
+  label: string;
+}
+```
+
+## Dependencies
+
+### Used by
+
+ - [SGnbSystem](../SGnbSystem)
+ - [SSystemActionButton](../SSystemActionButton)
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [SPortal](../SPortal)
+
+### Graph
+
+```mermaid
+graph TD;
+  SAccountListBox --> SIcon
+  SAccountListBox --> SPortal
+  SGnbSystem --> SAccountListBox
+  SSystemActionButton --> SAccountListBox
+  style SAccountListBox fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SAccountListBox/SAccountListBox.d.ts

@@ -0,0 +1,79 @@
+import { type HTMLAttributes } from 'react';
+/** 리스트박스의 한 행 — 라벨은 기본값이 있고 클릭만 앱이 준다 */
+export interface SAccountListBoxItem {
+    /** 라벨 텍스트. 행마다 기본값이 있다 */
+    label?: string;
+    /** 클릭 */
+    onClick?: () => void;
+}
+/** 언어 변경 하위 메뉴의 한 칸 */
+export interface SAccountListBoxLanguageOption {
+    /** 값. `SAccountListBoxLanguage.value` 와 맞춰 지금 언어를 가린다 */
+    value: string;
+    /** 화면에 적히는 언어명 */
+    label: string;
+}
+/** 언어 변경 행 — 지금 쓰는 언어가 우측에 붙고, 고를 것이 있으면 눌러서 편다 */
+export interface SAccountListBoxLanguage extends SAccountListBoxItem {
+    /**
+     * 지금 선택돼 있는 언어. 우측에 브랜드색으로 붙는다.
+     * `options` 를 함께 주면 그 목록에서 같은 `value` 를 찾아 `label` 로 적는다.
+     */
+    value?: string;
+    /**
+     * 고를 수 있는 언어. 주면 행을 눌렀을 때 **하위 메뉴가 우측 아래로 펼쳐지고**,
+     * 그동안 계정 패널은 닫히지 않는다. 주지 않으면 행을 누르는 것 자체가 액션이라
+     * `onClick` 만 돌고 패널이 닫힌다 — 언어 화면을 따로 두는 앱이 그렇다.
+     */
+    options?: SAccountListBoxLanguageOption[];
+    /** 하위 메뉴에서 언어를 고름. 고르면 하위 메뉴와 계정 패널이 함께 닫힌다 */
+    onChange?: (value: string) => void;
+}
+export interface SAccountListBoxProps extends HTMLAttributes<HTMLDivElement> {
+    /** 로그인한 계정의 이메일 */
+    email?: string;
+    /** 로그인한 계정의 이름 */
+    name?: string;
+    /**
+     * 권한. 이름 오른쪽 끝에 붙는다. 없으면 이름만 남는다.
+     * (`role` 이 아닌 이유 — 그 이름은 DOM 의 ARIA 속성이라 소비 앱의 a11y lint 가 값을 ARIA 롤로 읽는다)
+     */
+    authority?: string;
+    /** 계정 설정 행. 주지 않으면 행이 빠진다 */
+    accountSetting?: SAccountListBoxItem;
+    /** 언어 변경 행. 주지 않으면 행이 빠진다 */
+    language?: SAccountListBoxLanguage;
+    /** 로그아웃 행. 이 행은 늘 있고, 라벨과 클릭만 받는다 */
+    logout?: SAccountListBoxItem;
+}
+/**
+ * 리스트박스에 **담기는 내용**만 추린 것.
+ * 팝오버로 띄우는 쪽(`SSystemActionButton` 의 `option` · `SGnbSystem` 의 `account.listBox`)이
+ * 이 덩어리째 넘겨받으므로, 패널의 DOM 속성(className·style …)과 분리해 둔다.
+ */
+export type SAccountListBoxContent = Pick<SAccountListBoxProps, 'email' | 'name' | 'authority' | 'accountSetting' | 'language' | 'logout'>;
+/**
+ * SAccountListBox — GNB system 의 계정 행을 눌렀을 때 뜨는 계정 리스트박스.
+ *
+ * 판에서는 계정 행이 맨 아래에 있어 **행 위로 · 행 왼쪽 끝에 맞춰**, 전폭 상단바에서는 **행 아래로 ·
+ * 오른쪽 끝에 맞춰** 펼쳐진다. 이 방향은 고정이라 앱이 고르지 않는다.
+ *
+ * 위에서부터 [사용자정보(이메일 · 이름 + 권한)] · [계정 설정] · [언어 변경] · [계정 로그아웃] 이다.
+ * **권한(`authority`) · 계정 설정 · 언어 변경은 옵션**이고, 사용자정보와 로그아웃은 늘 있다 — 이 패널이 존재하는
+ * 이유가 "지금 누구로 로그인해 있는가"와 "나가기"이기 때문이다. 옵션을 빼면 그 줄이 통째로 사라지고
+ * 나머지가 위로 붙는다.
+ *
+ * 폭은 토큰이 정하는 고정값(240px)이라 앱이 늘리지 않는다 — 이 패널은 GNB 폭에 맞춰 뜬다.
+ * 행 라벨·아이콘은 무엇을 하는 행인지가 곧 정체라 아이콘을 밖에서 바꾸지 않고, 라벨만 바꿀 수 있다.
+ *
+ * **언어 변경만 하위 메뉴를 가질 수 있다.** `language.options` 를 주면 그 행이 우측 값 아래로
+ * 목록을 펴고, 고를 때까지 계정 패널은 열려 있는다. 주지 않으면 행을 누르는 것 자체가 액션이라
+ * `onClick` 만 돌고 패널이 닫힌다 — 언어를 고르는 화면을 따로 두는 앱이 그렇다.
+ *
+ * **이 컴포넌트는 패널만 그린다.** 계정 행에 붙여 띄우는 것은 `SSystemActionButton` 의
+ * `type="account"` 이 맡으므로(`option` 에 이 내용을 넘긴다 — 필수다), 앱이 직접 팝오버를 조립할
+ * 일은 없다. 계정 행은 예외 없이 이 패널의 트리거다.
+ *
+ * 토큰은 `--cmp-gnb-system-accountListBox-*` · `--cmp-gnb-system-accountButton-*`.
+ */
+export declare const SAccountListBox: import("react").ForwardRefExoticComponent<SAccountListBoxProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SAccountListBox/SystemMenuPortal.d.ts

@@ -0,0 +1,58 @@
+import { type RefObject } from 'react';
+import { type SPortalAlign, type SPortalPlacement } from '../SPortal';
+import { type STagColor } from '../STag';
+/**
+ * 시스템 메뉴의 한 칸.
+ *
+ * `color` 를 주면 그 칸은 **상태 칸**이 되어 점과 글자가 같은 색으로 물든다(시안) — 상태는 색 자체가
+ * 뜻이라, 고르는 자리에서도 그 색을 보고 고른다. 주지 않으면 글자만 있는 칸이고, 지금 값만
+ * 브랜드색으로 떠오른다.
+ */
+export interface SystemMenuOption {
+    /** 값. 지금 값과 맞춰 어느 칸이 선택돼 있는지를 가린다 */
+    value: string;
+    /** 화면에 적히는 이름 */
+    label: string;
+    /** 상태 칸의 색. 주면 점 + 같은 색 글자로 그린다 */
+    color?: STagColor;
+}
+interface SystemMenuPortalProps {
+    /** 표시 여부 */
+    open: boolean;
+    /** 표시 상태 변경 */
+    onOpenChange: (open: boolean) => void;
+    /** 붙을 자리 — 값 아래로 펼 때는 **바뀌는 값**(우측 값 묶음 · 상태 태그), 옆으로 펼 때는 행 자체 */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** 뜨는 방향. 기본 `'bottom'`(앵커 아래) */
+    placement?: SPortalPlacement;
+    /** 교차축 정렬. 아래로 펼 때는 값이 놓인 쪽 끝, 옆으로 펼 때는 위쪽 끝(`start`) */
+    align: SPortalAlign;
+    /**
+     * 메뉴를 여는 행. 이 행 위의 클릭은 행이 스스로 토글하므로 여기서 닫지 않는다 —
+     * 앵커는 행이 아니라 그 안의 값이라, 값 밖(라벨 쪽)을 누르면 닫혔다가 곧바로 다시 열린다.
+     */
+    triggerRef?: RefObject<HTMLElement | null>;
+    /** 접근성 이름 — 무엇을 고르는 메뉴인지 */
+    ariaLabel?: string;
+    /** 지금 값 */
+    value?: string;
+    /** 고를 수 있는 칸 */
+    options: SystemMenuOption[];
+    /** 칸을 고름 */
+    onSelect: (value: string) => void;
+}
+/**
+ * GNB system 의 값 고르기 메뉴.
+ *
+ * 계정 패널의 언어 변경 행 · `SSystemActionButton` 의 `subSelect` · `status` 가 모두 이것을 연다 —
+ * 세 자리 모두 "지금 값이 적혀 있고, 눌러서 다른 값으로 바꾼다" 는 같은 일이라, 뜨는 자리와 닫히는
+ * 시점을 한 곳에 모아 두지 않으면 자리마다 동작이 갈린다.
+ *
+ * **뜨는 자리는 부르는 쪽이 정한다.** 계정 패널 안의 행처럼 판 안에서 열리는 자리는 바꾸는 대상인
+ * 값 바로 아래로, 값이 놓인 쪽 끝에 맞춰 편다(패널 폭 안에 갇혀 있어 옆이 없다). 판 없이 행 하나로
+ * 서는 자리는 행 오른쪽으로 편다 — 행 아래는 다음 행이 이어지는 자리라 메뉴가 그 위를 덮는다.
+ *
+ * 공개 API 가 아니므로 index.ts 로 내보내지 않는다 — 앱은 각 행의 `options` 로 닿는다.
+ */
+export declare function SystemMenuPortal({ open, onOpenChange, anchorRef, placement, align, triggerRef, ariaLabel, value, options, onSelect, }: SystemMenuPortalProps): import("react").JSX.Element;
+export {};

package/dist/components/SAccountListBox/accountListBox.config.d.ts

@@ -0,0 +1,64 @@
+/** 행의 성격. default = 보통 행, negative = 되돌릴 수 없는 행(로그아웃) */
+export declare const ACCOUNT_LIST_BOX_ITEM_TONES: readonly ["default", "negative"];
+export type SAccountListBoxItemTone = (typeof ACCOUNT_LIST_BOX_ITEM_TONES)[number];
+/** 행마다 정해져 있는 아이콘 — 무엇을 하는 행인지가 아이콘으로 읽히므로 밖에서 바꾸지 않는다 */
+export declare const ACCOUNT_LIST_BOX_ICONS: {
+    readonly accountSetting: "account";
+    readonly language: "global";
+    readonly logout: "logout";
+};
+/** 행 라벨 기본값 — 시안 문구. 앱이 바꿀 수 있다 */
+export declare const ACCOUNT_LIST_BOX_LABELS: {
+    readonly accountSetting: "계정 설정";
+    readonly language: "언어 변경";
+    readonly logout: "계정 로그아웃";
+};
+/** 행 성격별 색 */
+export declare const ACCOUNT_LIST_BOX_TONE_CONFIG: Record<SAccountListBoxItemTone, {
+    bg: string;
+    bgHover: string;
+    text: string;
+    icon: string;
+}>;
+/** 치수·색 — 전부 토큰 참조 */
+export declare const ACCOUNT_LIST_BOX_LAYOUT: {
+    /** 패널 고정 폭 */
+    readonly width: string;
+    /** 패널 배경 */
+    readonly bg: string;
+    /** 패널 라운드 */
+    readonly radius: string;
+    /** 사용자정보 영역 배경 */
+    readonly userdataBg: string;
+    /** 사용자정보 영역 좌우 여백 */
+    readonly userdataPaddingX: string;
+    /** 사용자정보 영역 상하 여백 */
+    readonly userdataPaddingY: string;
+    /** 이메일 글자색 */
+    readonly emailColor: string;
+    /** 이름 글자색 */
+    readonly nameColor: string;
+    /** 권한 글자색 */
+    readonly roleColor: string;
+    /** 행 묶음의 상하 여백 */
+    readonly listPaddingY: string;
+    /** 행 좌우 여백 */
+    readonly itemPaddingX: string;
+    /** 행 상하 여백 */
+    readonly itemPaddingY: string;
+    /** 행 아이콘 ↔ 라벨 간격 */
+    readonly itemGap: string;
+    /** 행 아이콘 크기 */
+    readonly itemIcon: string;
+    /** 우측 값 ↔ 화살표 간격 */
+    readonly selectDataGap: string;
+    /** 우측 화살표 크기 */
+    readonly selectDataIcon: string;
+    /** 우측 값 글자색 */
+    readonly selectDataText: string;
+    /** 시스템 메뉴에서 지금 값인 칸의 글자색 — 계정 행이 아니라 목록 항목이라
+     *  listBoxItem 의 선택 색을 그대로 따른다(다른 목록의 선택 표시와 같은 색) */
+    readonly menuSelectedText: string;
+    /** 우측 화살표색 */
+    readonly selectDataIconColor: string;
+};

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

@@ -0,0 +1,2 @@
+export { SAccountListBox, type SAccountListBoxProps, type SAccountListBoxContent, type SAccountListBoxItem, type SAccountListBoxLanguage, type SAccountListBoxLanguageOption, } from './SAccountListBox';
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, type SAccountListBoxItemTone, } from './accountListBox.config';

package/dist/components/SActionModal/README.md

@@ -10,6 +10,7 @@
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
 | `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
+| `showClose?` | `boolean` | `true` | 우측 상단 닫기(X) 버튼. **기본값 true** `false` 는 **액션을 끝내야만 나갈 수 있는 모달**에만 준다 — 필수 약관 동의, 필수 정보 입력처럼 중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우다. `persistent` 기본값(true)과 겹치면 나가는 길이 모달 안의 버튼 하나뿐이 되므로, `button` 이나 `footerLeft` 로 그 길을 반드시 둔다. |
 | `modalTitle?` | `string` | `''` |  |
 | `description?` | `ReactNode` | — | 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯). 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다. |
 | `button?` | `SFooterButton` | — | 하단 액션 버튼 (주 액션 1개). 의도적으로 단수다 — 보조 버튼(취소·삭제 등)은 `footerLeft` 슬롯에 직접 배치한다. |

package/dist/components/SActionModal/SActionModal.d.ts

@@ -7,6 +7,14 @@ export interface SActionModalProps {
     onClose?: () => void;
     /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
     persistent?: boolean;
+    /**
+     * 우측 상단 닫기(X) 버튼. **기본값 true**
+     *
+     * `false` 는 **액션을 끝내야만 나갈 수 있는 모달**에만 준다 — 필수 약관 동의, 필수 정보 입력처럼
+     * 중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우다. `persistent` 기본값(true)과 겹치면
+     * 나가는 길이 모달 안의 버튼 하나뿐이 되므로, `button` 이나 `footerLeft` 로 그 길을 반드시 둔다.
+     */
+    showClose?: boolean;
     modalTitle?: string;
     /**
      * 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯).
@@ -36,4 +44,4 @@ export interface SActionModalProps {
  * `button` 은 의도적으로 단수다. 주 액션은 오른쪽에 하나만 두고, 보조 버튼은 `footerLeft` 슬롯에
  * 소비자가 직접 배치한다. (buttons 배열 API 를 추가하지 말 것)
  */
-export declare function SActionModal({ open, onOpenChange, onClose, persistent, modalTitle, description, button, footerLeft, width, height, children, }: SActionModalProps): import("react").JSX.Element;
+export declare function SActionModal({ open, onOpenChange, onClose, persistent, modalTitle, description, button, footerLeft, showClose, width, height, children, }: SActionModalProps): import("react").JSX.Element;

package/dist/components/SBadge/README.md

@@ -10,16 +10,43 @@
 |------|------|---------|-------------|
 | `color?` | `SBadgeColor` | `'blue'` | 뱃지 색상 |
 
+## Types
+
+### SBadgeColor
+
+```ts
+export type SBadgeColor = (typeof BADGE_COLORS)[number];
+```
+
+### BADGE_COLORS
+
+```ts
+export const BADGE_COLORS = [
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'lightblue',
+  'blue',
+  'darkblue',
+  'indigo',
+  'purple',
+  'grey',
+] as const;
+```
+
 ## Dependencies
 
 ### Used by
 
+ - [SCalendarBoard](../SCalendarBoard)
  - [SSectionHeaderCard](../SSectionHeaderCard)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  SCalendarBoard --> SBadge
   SSectionHeaderCard --> SBadge
   style SBadge fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SBadge/SBadge.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-export declare const BADGE_COLORS: readonly ["red", "orange", "yellow", "green", "blue", "darkblue", "indigo", "grey"];
+export declare const BADGE_COLORS: readonly ["red", "orange", "yellow", "green", "lightblue", "blue", "darkblue", "indigo", "purple", "grey"];
 export type SBadgeColor = (typeof BADGE_COLORS)[number];
 export interface SBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** 뱃지 색상 */