sellmate-design-system-react 9.0.0-beta.46 → 9.0.0-beta.47

package/AGENTS.md

@@ -29,7 +29,7 @@
 | **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SChatInput`(대화 입력창) `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SCalendarBoard`(한 달치 일정 판) `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
-| **표·목록** | `SChatMessage`(대화의 메시지 한 건) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
+| **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(대화에 딸린 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
 | **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SLoginCard`(통합 계정 로그인 화면의 카드) `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **표시·상태** | `STag` `SBadge` `SIcon` `SImage` `SCallout` `SGuide` |
@@ -153,8 +153,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 층 | 무엇인가 | 컴포넌트 |
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SGnbSystem`(GNB 맨 아래 판 · 전폭 상단바 오른쪽 끝) `SPage` `SPageHeader`(`SLayout` 안에서 `SPage` 앞에 둔다) |
-| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `STabs` `SStepper` `SPagination` `SDivider` |
-| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
+| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `STabs` `SStepper` `SPagination` `SDivider` |
+| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SChatAttachedFile` `SImage` `SLinearProgress` `SCircleProgress` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SAccountListBox`(계정 행에 붙어 뜬다 — 직접 띄우지 않는다) `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
 
@@ -244,6 +244,13 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 **보조 설명의 색** — 기본은 `text-fg-tertiary`(`grey_65`) 다. 보조 설명 안에서 위계가 한 단계 더 필요할 때만 `text-fg-secondary`(`grey_80`) → `text-fg-tertiary`(`grey_65`) 순으로 내려 쓴다 (§2-3).
 
+**글꼴은 지정하지 않는다.** `theme.css` 가 문서 전역 글꼴을 `--font-base` 로 깔고 글꼴 파일(Pretendard)까지 함께 싣는다. 앱이 할 일은 없다 — 글꼴 유틸리티(기본 sans 유틸리티, 임의 값 글꼴 클래스)나 `fontFamily` 인라인 스타일을 붙일 이유가 없다. 기본 sans 유틸리티도 같은 스택을 가리킨다.
+
+```tsx
+✅ <p className="typo-body-sm-default">주문이 접수되었습니다.</p>
+❌ <p style={{ fontFamily: 'Pretendard' }}>주문이 접수되었습니다.</p>   // 폴백 스택이 사라진다
+```
+
 ### 2-2. 간격 (spacing)
 
 - **간격 유틸리티는 `sd-` 접두를 붙인다** — `gap-sd-8`, `p-sd-16`, `mt-sd-12`. 숫자 = px 다.
@@ -492,7 +499,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 목록을 좁히는 필터를 켜고 끄게 한다 | `SToggle` | §3-7-3 |
 | 자유 입력값을 여러 개 쌓게 한다 | `SChipInput` | §3-1 |
 | 입력된 값 하나를 지우거나 고치게 한다 | `SChip` | §3-1 |
-| 파일을 받는다 | `SFilePicker` | |
+| 파일을 받는다 (고르게 한다) | `SFilePicker` | 고른·보낸 파일을 **보여주는** 것은 `SChatAttachedFile` |
+| 대화에 딸린 파일을 보여준다 (보내기 전 첨부·보낸 파일) | `SChatAttachedFile` | 고르게 하는 것은 `SFilePicker` |
 | 날짜 하나를 받는다 | `SDatePicker` | §3-7-4 |
 | 연도 선택 리스트만 커스텀 조합에 넣는다 | `SDatePickerYearListbox` | §3-7-4 |
 | 연도+월 선택 리스트만 커스텀 조합에 넣는다 | `SDatePickerMonthListbox` | §3-7-4 |
@@ -513,6 +521,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 항목 하나의 속성들을 `라벨: 값` 으로 보여준다 | `SKeyValueTable` | §4-4 |
 | 한 줄로 읽히는 항목을 세로로 나열한다 | `SList` + `SListItem` | §3-7-6 |
 | 대화의 메시지 한 건을 보여준다 | `SChatMessage` | |
+| 대화 중간에 시스템이 알리는 사실을 끼운다 (상담사 배정·대화 종료 등) | `SChatSystemMessage` | 사람이 보낸 말이면 `SChatMessage` |
 | 나열한 항목을 펼쳐 하위 내용을 보여준다 | `SExpansionList` + `SExpansionItem` | §3-7-7 |
 | 부모-자식 계층을 들여쓰기로 보여준다 | `STree` | §3-7-7 |
 | 사용자가 순서를 드래그로 바꾸게 한다 | `SDraggableList` + `SDraggableItem` | §3-7-6 |
@@ -925,7 +934,7 @@ const columns: STableColumn[] = [
     render: (row: SRow) => (
       <div className="flex items-center justify-center gap-sd-4">
         <SGhostButton size="xs" intent="action" icon="edit" ariaLabel="수정" onClick={() => editRow(row)} />
-        <SGhostButton size="xs" icon="delete" ariaLabel="삭제" onClick={() => confirmRemove(row)} />
+        <SGhostButton size="xs" icon="remove" ariaLabel="삭제" onClick={() => confirmRemove(row)} />
       </div>
     ) },
 
@@ -1136,7 +1145,7 @@ const columns: STableColumn[] = [
       <SGhostButton size="xs" intent="action" icon="edit"
         ariaLabel="수정" onClick={() => editRow(row)} />
       {/* 되돌릴 수 없는 삭제일 때만 intent="danger" */}
-      <SGhostButton size="xs" icon="delete"
+      <SGhostButton size="xs" icon="remove"
         ariaLabel="삭제" onClick={() => confirmRemove(row)} />
     </div>
   ) },
@@ -2279,6 +2288,7 @@ export default function ProductDetailPage() {
 - [ ] 생 HTML 컨트롤(`<button>` `<input>` `<select>` `<table>` …)이 없는가
 - [ ] `text-[14px]`, `bg-[#...]` 같은 리터럴 임의 값이 없는가 (`var(--sys-*)` 참조는 허용)
 - [ ] 텍스트에 `typo-*` 프리셋을 썼는가
+- [ ] 글꼴을 직접 지정하지 않았는가 (글꼴 유틸리티·`fontFamily` 인라인 ❌ — 전역 기본이 이미 적용된다, §2-1)
 - [ ] 간격이 전부 `sd-` 접두 스케일 값인가 (`gap-13`·`gap-sd-13` ❌ → `gap-sd-12` ✅)
 - [ ] 본문이 12px(`typo-body-sm-default`)인가 (14px 본문 ❌)
 - [ ] 텍스트 회색 위계를 순차 적용했는가 (기본 → `text-fg-secondary` → `text-fg-tertiary`, 단계 건너뛰기 ❌)

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 합니다.

package/dist/components/SChatAttachedFile/README.md

@@ -0,0 +1,34 @@
+# SChatAttachedFile
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChatAttachedFile
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | — | 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. |
+| `extension?` | `string` | — | 보조 줄에 쓸 형식. 주지 않으면 **파일명의 마지막 점 뒤**를 쓴다. 파일명에서 뽑는 것이 틀리는 자리에서만 준다 — 확장자가 없거나(`README`), 확장자처럼 안 생겼거나(`backup.2026` → `2026`), 두 마디인 경우(`archive.tar.gz` → `gz`). 그 밖에는 주지 않는 편이 낫다. 파일명과 어긋난 형식이 적히는 일을 막는다. 앞의 점과 대소문자는 알아서 정리한다 — `'.CSV'` 와 `'csv'` 가 같게 나온다. |
+| `size?` | `number` | — | 파일 크기(바이트). 형식(`extension`)과 묶어 `csv / 9.4KB` 로 그린다. **바이트 수를 그대로 넘긴다** — `'9.4KB'` 같은 완성된 문자열이 아니다. 표기를 앱이 만들면 같은 파일이 화면마다 다른 크기로 읽히므로 서식은 디자인 시스템이 쥔다. `attached` 는 `File.size`, `sent` 은 서버가 준 바이트 수를 그대로 넘기면 된다. **`sent` 에서는 필수다** — 보낸 파일은 확장자와 크기를 반드시 밝힌다. `attached` 에는 넘겨도 그리지 않는다(한 줄짜리 칸이다). 앱이 데이터를 한 번만 매핑해 자리와 무관하게 넘길 수 있도록 `attached` 에서 막지는 않고 무시한다. |
+| `variant` | `'attached' \| 'sent'` | — | 파일 칸이 서는 자리. **크기·면·선·글자·아이콘이 전부 여기서 갈린다.** `attached` 는 아직 보내지 않은 첨부다 — 입력창 위에 서는 한 줄짜리 칸이고 눌러 뺄 수 있다. `sent` 은 이미 보낸 파일이다 — 대화창에 서는 두 줄짜리 칸이고 `size` 가 **필수**다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onRemove` | `() => void` | 제거 버튼을 눌렀을 때. 주지 않으면 버튼이 서지 않는다. **`attached` 에만 쓰인다** — 이미 보낸 파일은 무를 수 없으므로 `sent` 에는 그리지 않는다. |
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChatAttachedFile --> SIcon
+  style SChatAttachedFile fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SChatAttachedFile/SChatAttachedFile.d.ts

@@ -0,0 +1,54 @@
+import { type HTMLAttributes } from 'react';
+interface SChatAttachedFileBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. */
+    name: string;
+    /**
+     * 보조 줄에 쓸 형식. 주지 않으면 **파일명의 마지막 점 뒤**를 쓴다.
+     *
+     * 파일명에서 뽑는 것이 틀리는 자리에서만 준다 — 확장자가 없거나(`README`),
+     * 확장자처럼 안 생겼거나(`backup.2026` → `2026`), 두 마디인 경우(`archive.tar.gz` → `gz`).
+     * 그 밖에는 주지 않는 편이 낫다. 파일명과 어긋난 형식이 적히는 일을 막는다.
+     *
+     * 앞의 점과 대소문자는 알아서 정리한다 — `'.CSV'` 와 `'csv'` 가 같게 나온다.
+     */
+    extension?: string;
+    /**
+     * 파일 크기(바이트). 형식(`extension`)과 묶어 `csv / 9.4KB` 로 그린다.
+     *
+     * **바이트 수를 그대로 넘긴다** — `'9.4KB'` 같은 완성된 문자열이 아니다. 표기를 앱이 만들면
+     * 같은 파일이 화면마다 다른 크기로 읽히므로 서식은 디자인 시스템이 쥔다.
+     * `attached` 는 `File.size`, `sent` 은 서버가 준 바이트 수를 그대로 넘기면 된다.
+     *
+     * **`sent` 에서는 필수다** — 보낸 파일은 확장자와 크기를 반드시 밝힌다.
+     * `attached` 에는 넘겨도 그리지 않는다(한 줄짜리 칸이다). 앱이 데이터를 한 번만 매핑해
+     * 자리와 무관하게 넘길 수 있도록 `attached` 에서 막지는 않고 무시한다.
+     */
+    size?: number;
+    /**
+     * 제거 버튼을 눌렀을 때. 주지 않으면 버튼이 서지 않는다.
+     *
+     * **`attached` 에만 쓰인다** — 이미 보낸 파일은 무를 수 없으므로 `sent` 에는 그리지 않는다.
+     */
+    onRemove?: () => void;
+}
+/**
+ * 자리에 따라 필수 prop 이 갈린다.
+ *
+ * `sent` 은 `size` 가 **필수**다 — 보낸 파일은 확장자와 크기를 반드시 밝혀야 하는데,
+ * 선택으로 두면 빠뜨려도 타입이 통과하고 화면에서 보조 줄만 조용히 사라진다.
+ * `attached` 는 한 줄짜리 칸이라 필요 없다.
+ */
+export type SChatAttachedFileProps = (SChatAttachedFileBaseProps & {
+    /**
+     * 파일 칸이 서는 자리. **크기·면·선·글자·아이콘이 전부 여기서 갈린다.**
+     *
+     * `attached` 는 아직 보내지 않은 첨부다 — 입력창 위에 서는 한 줄짜리 칸이고 눌러 뺄 수 있다.
+     * `sent` 은 이미 보낸 파일이다 — 대화창에 서는 두 줄짜리 칸이고 `size` 가 **필수**다.
+     */
+    variant: 'attached';
+}) | (SChatAttachedFileBaseProps & {
+    variant: 'sent';
+    size: number;
+});
+export declare const SChatAttachedFile: import("react").ForwardRefExoticComponent<SChatAttachedFileProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/SChatAttachedFile/chatAttachedFile.config.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 파일 칸이 서는 자리. **이 하나로 크기·면·선·글자·아이콘이 전부 갈린다.**
+ *
+ * - `attached` — 아직 보내지 않은 첨부. 입력창 위에 가로로 늘어서고 눌러 뺄 수 있다.
+ * - `sent` — 이미 보낸 파일. 대화창에 세로로 쌓이고 뺄 수 없다.
+ */
+export declare const CHAT_ATTACHED_FILE_VARIANTS: readonly ["attached", "sent"];
+export type SChatAttachedFileVariant = (typeof CHAT_ATTACHED_FILE_VARIANTS)[number];
+interface ChatAttachedFilePreset {
+    /** 바깥 상자 — 높이·좌우 여백·항목 간격·면·선 */
+    box: string;
+    /** 클립 아이콘이 앉는 정사각 타일 */
+    tile: string;
+    /** 타일 안 클립 아이콘 크기(px) */
+    iconSize: number;
+    /** 파일명 타이포 프리셋 */
+    nameTypo: string;
+}
+/**
+ * 높이(30/56)와 타일 크기(20/28)는 대응 토큰이 없어 값으로 둔다
+ * (디자인팀 토큰 추가 요청 대상). 세로 여백이 스페이싱 스케일에 떨어지지 않아
+ * 여백을 주는 대신 높이를 고정하고 세로 가운데 정렬로 세운다.
+ */
+export declare const CHAT_ATTACHED_FILE_CONFIG: Record<SChatAttachedFileVariant, ChatAttachedFilePreset>;
+/**
+ * 바이트 수 → `9.4KB` 표기.
+ *
+ * **표기를 앱이 아니라 여기서 정하는 이유**: 문자열로 받으면 제품마다 `9.4KB`·`9.4 KB`·
+ * `9,626B` 로 갈린다. 같은 파일이 화면마다 다른 크기로 읽히는 것을 막으려면 한 곳에서 만든다.
+ *
+ * 1024 배수로 올리고, 바이트는 소수점이 뜻이 없어 정수로, 그 위는 한 자리까지 쓴다(시안 표기).
+ * 금액·수량의 세 자리 콤마 규칙(AGENTS.md §1-4)과는 별개다 — 용량은 단위가 자리를 대신한다.
+ */
+export declare function formatFileSize(bytes: number): string;
+/** 앱이 준 확장자를 표기 형태로 맞춘다 — 앞의 점을 떼고 소문자로. `'.CSV'` → `'csv'` */
+export declare function normalizeExtension(extension: string): string;
+/**
+ * 파일명 → 소문자 확장자. 확장자가 없으면 빈 문자열.
+ *
+ * 맨 앞의 점은 확장자가 아니다(`.gitignore` 는 이름 전체가 이름이다).
+ */
+export declare function fileExtension(name: string): string;
+export {};

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

@@ -0,0 +1,2 @@
+export { SChatAttachedFile, type SChatAttachedFileProps } from './SChatAttachedFile';
+export { CHAT_ATTACHED_FILE_VARIANTS, CHAT_ATTACHED_FILE_CONFIG, formatFileSize, fileExtension, normalizeExtension, type SChatAttachedFileVariant, } from './chatAttachedFile.config';

package/dist/components/SChatMessage/README.md

@@ -15,7 +15,7 @@
 | `avatarSrc?` | `string` | — | 아바타 이미지 경로. 없으면 사람 아이콘 자리표시가 선다. **받은 메시지에만 쓰인다** — 보낸 메시지에는 아바타가 서지 않는다(`direction` 참고). |
 | `avatarAlt?` | `string` | — | 아바타 대체 텍스트 |
 | `continued?` | `boolean` | `false` | 같은 사람이 이어서 말한 묶음인지. 켜면 **아바타와 `sender` 를 그리지 않는다** — 말풍선이 위 묶음과 같은 선에서 시작해 한 사람의 말로 이어 읽힌다. 받은 메시지에서는 아바타 자리를 비워 둔 채 남긴다 — 안 남기면 말풍선이 44px 왼쪽으로 밀려 위 묶음과 어긋난다. 보낸 메시지는 아바타가 없으므로 이름만 숨긴다. `time`·`readStatus` 는 그대로 나온다. 시간이 벌어져 묶음을 나눴어도 얼굴은 한 번만 보이면 되고 시각은 묶음마다 필요하기 때문이다. **얼마나 벌어져야 묶음을 나눌지는 앱이 정한다** — 30분이든 하루든 대화의 성격에 달렸으므로 컴포넌트는 기준을 갖지 않고 스위치만 연다. |
-| `variant?` | `SChatMessageVariant` | `'default'` | 말풍선 종류. `template` 이면 말풍선이 옅은 파랑 면으로 서서 미리 등록된 서식으로 보내진 메시지임을 드러낸다. **`direction` 과 별개 축이라** 받은 메시지에도 보낸 메시지에도 붙는다. |
+| `variant?` | `SChatMessageVariant` | `'default'` | 말풍선 종류. `template` 이면 말풍선이 옅은 파랑 면으로 서서 미리 등록된 서식으로 보내진 메시지임을 드러낸다. **보낸 메시지(`direction="outgoing"`)에만 쓰인다** — 받은 메시지에는 넘겨도 그리지 않는다. 템플릿은 사업자가 보내는 것이라 받은 쪽에는 뜻이 없다. 앱이 메시지를 한 번만 매핑해 방향과 무관하게 넘길 수 있도록 막지 않고 무시한다. |
 | `actions?` | `ReactNode` | — | 시각 아래에 붙는 동작 슬롯. 없으면 그 줄이 통째로 빠진다. 「상담원 연결」처럼 **이 메시지에 이어서 할 수 있는 동작**이 오는 자리다. 무엇을 놓을지는 앱이 정하고, 메시지는 줄로 세우고 방향에 맞춰 정렬하는 것까지만 한다. 시각과 같은 선에서 시작한다 — 말풍선 끝에서 한 칸 안이다. |
 | `messages?` | `ReactNode[]` | — | 말풍선 목록. **한 항목이 말풍선 하나**가 되어 위에서 아래로 쌓인다. 한 사람이 연달아 말하면 아바타·이름·시각은 한 번만 서고 말풍선만 늘어난다 — 그 묶음이 이 컴포넌트 한 개다. 말풍선 안에는 글뿐 아니라 버튼 같은 요소도 올 수 있다. |
 
@@ -59,7 +59,8 @@ export const CHAT_MESSAGE_READ_STATUSES = ['read', 'unread'] as const;
 /**
  * 말풍선의 종류. `template` 은 미리 등록된 서식으로 보내진 메시지다.
  *
- * **`direction` 과 별개 축이다** — 받은 메시지도 보낸 메시지도 템플릿일 수 있다.
+ * **보낸 메시지에서만 면이 갈린다.** 템플릿은 사업자가 보내는 것이라 받은 메시지에는
+ * 뜻이 없고, 받은 메시지는 템플릿이든 아니든 같은 면으로 선다.
  */
 export const CHAT_MESSAGE_VARIANTS = ['default', 'template'] as const;
 ```

package/dist/components/SChatMessage/SChatMessage.d.ts

@@ -5,7 +5,8 @@ export type SChatMessageDirection = (typeof CHAT_MESSAGE_DIRECTIONS)[number];
 /**
  * 말풍선의 종류. `template` 은 미리 등록된 서식으로 보내진 메시지다.
  *
- * **`direction` 과 별개 축이다** — 받은 메시지도 보낸 메시지도 템플릿일 수 있다.
+ * **보낸 메시지에서만 면이 갈린다.** 템플릿은 사업자가 보내는 것이라 받은 메시지에는
+ * 뜻이 없고, 받은 메시지는 템플릿이든 아니든 같은 면으로 선다.
  */
 export declare const CHAT_MESSAGE_VARIANTS: readonly ["default", "template"];
 export type SChatMessageVariant = (typeof CHAT_MESSAGE_VARIANTS)[number];
@@ -62,7 +63,11 @@ export interface SChatMessageProps extends Omit<HTMLAttributes<HTMLDivElement>,
     continued?: boolean;
     /**
      * 말풍선 종류. `template` 이면 말풍선이 옅은 파랑 면으로 서서 미리 등록된 서식으로 보내진
-     * 메시지임을 드러낸다. **`direction` 과 별개 축이라** 받은 메시지에도 보낸 메시지에도 붙는다.
+     * 메시지임을 드러낸다.
+     *
+     * **보낸 메시지(`direction="outgoing"`)에만 쓰인다** — 받은 메시지에는 넘겨도 그리지 않는다.
+     * 템플릿은 사업자가 보내는 것이라 받은 쪽에는 뜻이 없다. 앱이 메시지를 한 번만 매핑해
+     * 방향과 무관하게 넘길 수 있도록 막지 않고 무시한다.
      */
     variant?: SChatMessageVariant;
     /**

package/dist/components/SChatSystemMessage/README.md

@@ -0,0 +1,12 @@
+# SChatSystemMessage
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChatSystemMessage
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `message?` | `string[]` | — | 안내 문구. **항목 수만큼 알약이 쌓인다** — 서로 다른 시점에 일어난 사실은 한 알약에 몰아넣지 않고 항목을 나눈다 (`SChatMessage` 의 `messages` 와 같은 규칙). 각 항목은 **인라인 HTML 문자열을 받는다.** `<b>` `<strong>` `<i>` `<em>` `<br>` `<span>` `<a>` 만 살아남고 나머지 태그·속성과 `javascript:` 같은 위험한 스킴은 `sanitizeInlineHtml` 이 제거한다. 그래도 **서버·사용자가 만든 문자열을 그대로 넘기지 않는다** — 살균은 마지막 방어선이지 입력 검증의 대체가 아니다. ```tsx <SChatSystemMessage message={['<b>김상담</b> 상담사가 배정되었습니다.']} /> ``` |
+

package/dist/components/SChatSystemMessage/SChatSystemMessage.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes } from 'react';
+export interface SChatSystemMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * 안내 문구. **항목 수만큼 알약이 쌓인다** — 서로 다른 시점에 일어난 사실은
+     * 한 알약에 몰아넣지 않고 항목을 나눈다 (`SChatMessage` 의 `messages` 와 같은 규칙).
+     *
+     * 각 항목은 **인라인 HTML 문자열을 받는다.** `<b>` `<strong>` `<i>` `<em>` `<br>`
+     * `<span>` `<a>` 만 살아남고 나머지 태그·속성과 `javascript:` 같은 위험한 스킴은
+     * `sanitizeInlineHtml` 이 제거한다. 그래도 **서버·사용자가 만든 문자열을 그대로 넘기지 않는다** —
+     * 살균은 마지막 방어선이지 입력 검증의 대체가 아니다.
+     *
+     * ```tsx
+     * <SChatSystemMessage message={['<b>김상담</b> 상담사가 배정되었습니다.']} />
+     * ```
+     */
+    message?: string[];
+}
+export declare const SChatSystemMessage: import("react").ForwardRefExoticComponent<SChatSystemMessageProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { SChatSystemMessage, type SChatSystemMessageProps } from './SChatSystemMessage';

package/dist/components/SIcon/README.md

@@ -23,6 +23,7 @@
  - [SAccountListBox](../SAccountListBox)
  - [SButton](../SButton)
  - [SCallout](../SCallout)
+ - [SChatAttachedFile](../SChatAttachedFile)
  - [SChatMessage](../SChatMessage)
  - [SCheckbox](../SCheckbox)
  - [SChipFilter](../SChipFilter)
@@ -67,6 +68,7 @@ graph TD;
   SAccountListBox --> SIcon
   SButton --> SIcon
   SCallout --> SIcon
+  SChatAttachedFile --> SIcon
   SChatMessage --> SIcon
   SCheckbox --> SIcon
   SChipFilter --> SIcon

package/dist/components/SIcon/icons.gen.d.ts

@@ -14,6 +14,7 @@ export declare const ICONS: {
     readonly arrowUp: (p: IconRenderProps) => import("react").JSX.Element;
     readonly asterisk: (p: IconRenderProps) => import("react").JSX.Element;
     readonly attachFile: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly back: (p: IconRenderProps) => import("react").JSX.Element;
     readonly barcode: (p: IconRenderProps) => import("react").JSX.Element;
     readonly bell: (p: IconRenderProps) => import("react").JSX.Element;
     readonly bellRinging: (p: IconRenderProps) => import("react").JSX.Element;
@@ -43,10 +44,10 @@ export declare const ICONS: {
     readonly close: (p: IconRenderProps) => import("react").JSX.Element;
     readonly company: (p: IconRenderProps) => import("react").JSX.Element;
     readonly copy: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly counsel: (p: IconRenderProps) => import("react").JSX.Element;
     readonly coupon: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dashboard: (p: IconRenderProps) => import("react").JSX.Element;
     readonly date: (p: IconRenderProps) => import("react").JSX.Element;
-    readonly delete: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dot: (p: IconRenderProps) => import("react").JSX.Element;
     readonly download: (p: IconRenderProps) => import("react").JSX.Element;
     readonly drag: (p: IconRenderProps) => import("react").JSX.Element;
@@ -57,6 +58,7 @@ export declare const ICONS: {
     readonly helpFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly history: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly home: (p: IconRenderProps) => import("react").JSX.Element;
     readonly image: (p: IconRenderProps) => import("react").JSX.Element;
     readonly inline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly launcher: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SSystemActionButton/README.md

@@ -21,6 +21,16 @@
 | `color?` | `SSystemActionButtonColor` | — | 색상(놓이는 표면). light = 흰 면, dark = 오션블루 면, darker = 네이비 면. 기본 `'light'` |
 | `disabled?` | `boolean` | — | 비활성 여부. 기본 `false` |
 
+### SSystemActionButton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'account' \| 'select' \| 'switch' \| 'subSelect' \| 'status'` | — | 계정 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option` | `<union 5종>` | — | 누르면 뜨는 계정 리스트박스. **필수다** — 계정 행은 늘 이 패널의 트리거이고, 눌러도 아무것도 뜨지 않는 계정 행은 없다. 아이콘은 `user` 로 고정이라 여기서 받지 않는다. |
+
 ### SSystemActionButtonSelect
 
 #### Props
@@ -61,6 +71,16 @@
 | `label?` | `string` | — | 라벨 텍스트 |
 | `option` | `SSystemActionButtonTextOption` | — | 선행 아이콘 + 우측 액션 텍스트 |
 
+### SSystemActionButtonText
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'switch' \| 'subSelect'` | — | 우측에 보조 조작 문구가 붙는 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option` | `SSystemActionButtonTextOption \| SSystemActionButtonSubSelectOption` | — | 선행 아이콘 + 우측 액션 텍스트 |
+
 ## Types
 
 ### SSystemActionButtonAccountOption

package/dist/fonts/LICENSE.txt

@@ -0,0 +1,94 @@
+Copyright (c) 2021, Kil Hyung-jin (https://github.com/orioncactus/pretendard),
+with Reserved Font Name Pretendard.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.