sellmate-design-system-react 9.0.0-beta.74 → 9.0.0-beta.76

package/AGENTS.md

@@ -1053,6 +1053,25 @@ const columns: STableColumn[] = [
 - **계산값은 픽셀 단위까지 맞추면 어긋난다** — 서브픽셀 반올림 때문이다. 여유 8px 을 얹고 8 단위로 올림한다.
 - 좌우 패딩은 `STable` 이 토큰으로 넣으므로 직접 주지 않는다. 그만큼을 뺀 나머지가 요소 몫이라는 점만 계산에 넣는다.
 
+#### 행 타입을 알면 넘긴다
+
+`STable`·`STableColumn` 은 행 타입을 받는다. 넘기면 `render`·`format`·`onRowClick`·`selected` 가 그 타입으로 좁혀져, 없는 키나 오타가 컴파일에서 잡힌다. 넘기지 않으면 행은 `SRow`(키만 아는 느슨한 레코드)다 — 기존 코드는 그대로 동작한다.
+
+```tsx
+interface Order { id: number; orderNo: string; qty: number }
+
+const columns: STableColumn<Order>[] = [
+  { name: 'orderNo', label: '주문번호', field: 'orderNo', width: 140, align: 'center' },
+  { name: 'qty', label: '수량', field: 'qty', width: 80, align: 'right',
+    format: v => `${Number(v).toLocaleString()}개` },
+];
+
+<STable<Order> columns={columns} rows={orders} onRowClick={order => open(order.id)} />
+```
+
+- 행 타입을 넘기면 `format`·`render` 의 **셀 값은 `unknown`** 이다. `field` 가 접근 함수일 수도 있어 행 타입만으로는 값의 타입이 정해지지 않으므로, `Number(v)`·`String(v)` 로 받는 쪽에서 확인한다. 행이 필요하면 두 번째 인자(`format`)·첫 번째 인자(`render`)의 행을 쓴다.
+- `SSelect` 도 같은 방식으로 `onValueChange` 의 값 타입을 받는다 — `<SSelect<string> valueAsPrimitive … />`. 실제 모양은 `type`·`valueAsPrimitive` 조합이 정하므로 그 조합에 맞는 타입을 넘긴다.
+
 #### 컨트롤이 들어가는 컬럼
 
 `<td>` 는 폭을 넘는 내용을 잘라낸다(`overflow: hidden`). 텍스트라면 말줄임으로 끝나지만, 셀에 `STag` · `SButton` · `SGhostButton` · `SSelect` · `SInput` · `SNumberInput` 처럼 **자기 폭을 가진 요소**를 넣으면 요소 자체가 잘려 **누르거나 읽거나 입력할 수 없게 된다.**
@@ -1580,7 +1599,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 ```
 
 - **`launcher` 를 주지 않으면 런처 버튼 자체가 렌더되지 않는다.** 옮겨 갈 서비스가 없는 앱은 이 슬롯을 비워 둔다 — 눌러도 아무것도 없는 버튼을 상단바에 남기지 않는다.
-- **서비스는 키(`service`)로 고른다 — 보이는 것은 아무것도 넘기지 않는다.** 쓸 수 있는 키는 `SLogo` 가 로고를 가진 서비스 전부(`'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos'` — `SLauncherService`)이고, 서비스 로고(워드마크와 `WMS`·`Account`·`CRM` … 표기가 한 덩어리인 브랜드 로고)·아래 줄 한글 이름·상태 태그(`NEW`·`출시예정`)·출시 여부를 카탈로그(`LAUNCHER_SERVICE_CATALOG`)가 그 키로 정한다. 앱이 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다. **서비스가 늘거나 이름·상태가 바뀌면 디자인 시스템 릴리스로 따라온다** — 앱은 고칠 것이 없다.
+- **서비스는 키(`service`)로 고른다 — 보이는 것은 아무것도 넘기지 않는다.** 쓸 수 있는 키는 `SLogo` 가 로고를 가진 서비스 전부(`'sellmate' | 'wms' | 'chat' | 'chatbot' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos'` — `SLauncherService`)이고, 서비스 로고(워드마크와 `WMS`·`Account`·`CRM` … 표기가 한 덩어리인 브랜드 로고)·아래 줄 한글 이름·상태 태그(`NEW`·`출시예정`)·출시 여부를 카탈로그(`LAUNCHER_SERVICE_CATALOG`)가 그 키로 정한다. 앱이 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다. **서비스가 늘거나 이름·상태가 바뀌면 디자인 시스템 릴리스로 따라온다** — 앱은 고칠 것이 없다.
 
   ```tsx
   ✅ { service: 'wms', href: env.WMS_URL }
@@ -1733,6 +1752,11 @@ tableRef.current.scrollToRow(row);                  // 복원
 - 카드 안에 상태 배지를 넣으려면 `tag` 슬롯에 `STag` 를 준다. 라벨 문자열에 "(추천)" 처럼 섞어 쓰지 않는다.
 - **카드처럼 생겼다고 `SCard`/`SSectionHeaderCard` 로 감싸지 않는다.** `SRadioCard` 자체가 완결된 요소이고, 나열 간격은 `SRadioCardGroup` 의 `direction` 이 맞춘다 (§2-2).
 
+##### 옵션을 서버에서 받는 동안 — `loading`
+
+- **받는 동안 `loading` 을 켠다.** 트리거의 펼침 아이콘 자리에 스피너가, 드롭다운에 로딩 행이 뜬다. 첫 조회든 다음 페이지든 같은 prop 이다.
+- **셀렉트 옆에 따로 스피너를 두거나 `disabled` 로 잠가 로딩을 표현하지 않는다.** 로딩 중에도 열 수 있고, 열면 "표시할 항목이 없습니다." 대신 로딩 행이 나온다. `disabled` 와 `loading` 을 함께 주지 않는다 — 비활성이면 `loading` 을 무시해 스피너가 뜨지 않는다. 잠긴 셀렉트의 옵션은 잠금이 풀릴 때 받는다.
+
 ##### 옵션이 수백~수천 개면 — `onReachEnd`
 
 **렌더는 걱정하지 않아도 된다.** `SSelect` 는 언제나 보이는 범위의 행만 그린다 — 켜고 끄는 prop 이 없고, 옵션이 5개든 5,000개든 여는 비용이 같다. 행 높이가 균일하다고 가정하지도 않으므로 계층 목록이나 큰 글씨가 섞인 라벨도 그대로 넘기면 된다.
@@ -1993,6 +2017,17 @@ const [selectedId, setSelectedId] = useState<string>();
 
 `SCircleProgress` 는 `indeterminate` 로 두면 스피너가 된다. **다만 화면이나 영역을 막아야 하는 상황이면 progress 가 아니라 `SLoadingModal`·`SLoadingContainer` 다** (§3-2) — 진행 표시와 입력 차단은 다른 일이고, 막지 않으면 사용자가 로딩 중에 또 누른다.
 
+`type` 은 진행 **상태**로 고른다. 색이 아니라 상태가 기준이다.
+
+| 상태 | `type` |
+| --- | --- |
+| 정상 진행 중 | `primary` |
+| 진행은 계속되지만 제품이 정한 기준에 미달해 주의가 필요하다 | `warning` |
+| 실패·중단 등 더 이상 정상적으로 진행되지 않는다 | `error` |
+| 완료 | `complete` |
+
+**`warning` 과 `error` 는 "아직 진행 중인가" 로 가른다.** 기준 미달이어도 진행이 계속되면 `warning` 이다 — `error` 로 칠하면 멈춘 작업으로 읽힌다. 미달 기준은 디자인 시스템이 정하지 않으므로 제품 코드에서 판정해 `type` 을 넘긴다.
+
 #### 3-7-10. SPortal — 직접 쓸 일이 거의 없다
 
 `STooltip`·`SPopover`·`SSelect`·날짜 피커가 내부에서 쓰는 저수준 레이어다. 앵커에 붙여 띄우는 동작이 필요하면 **먼저 §3-3 에서 대응 컴포넌트를 찾는다.** `SPortal` 을 직접 쓰는 것은 그 넷 중 어느 것도 아닌 새로운 부착형 레이어를 만들 때뿐이고, 그때도 모달 안에서 열릴 수 있다면 소속 컨테이너를 맞춰야 한다.
@@ -2046,7 +2081,7 @@ const [selectedId, setSelectedId] = useState<string>();
 
 셀메이트·서비스 로고는 `<svg>` 를 직접 붙이지 않고 `SLogo` 를 쓴다. **`SIcon` 과 같은 손맛(`name`·`size`·`color`)이지만 두 가지가 다르다.**
 
-- **`name` 에 서비스를 넣으면 그 서비스 로고가 나온다**(`sellmate` · `wms` · `chat` · `plm` · `account` · `people` · `crm` · `work` · `pos` · `console` — `SLogoName`). [셀메이트 워드마크 + 서비스 표기]가 한 덩어리다. **워드마크 옆에 표기를 앱이 따로 잇지 않는다** — 표기의 서체·자간·색이 원본과 어긋난다.
+- **`name` 에 서비스를 넣으면 그 서비스 로고가 나온다**(`sellmate` · `wms` · `chat` · `chatbot` · `plm` · `account` · `people` · `crm` · `work` · `pos` · `console` — `SLogoName`). [셀메이트 워드마크 + 서비스 표기]가 한 덩어리다. **워드마크 옆에 표기를 앱이 따로 잇지 않는다** — 표기의 서체·자간·색이 원본과 어긋난다.
 - **배경에 맞춰 `mode` 를 준다.** 밝은 면은 `light`(기본), 어두운 면(dark GNB 등)은 `dark`. 워드마크 색과 서비스 표기 색을 모드가 정하므로 색을 직접 주지 않는다.
 - **표기를 워드마크 아래에 두려면 `direction="vertical"` 을 준다**(로그인 카드처럼 폭이 좁고 로고가 가운데 서는 자리). 워드마크 아래에 표기를 앱이 따로 쌓지 않는다. 모든 서비스 로고가 세로를 가진다(`sellmate` 는 표기가 없어 어느 쪽이든 같다). 세로의 표기 색도 원본이 정하므로 색을 직접 맞추지 않는다.
 - **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다. `vertical` 에서는 두 줄 전체의 높이라, 같은 `size` 면 워드마크가 가로보다 작다.

package/README.md

@@ -261,12 +261,12 @@ export default [
 **폭은 등급 이름으로 줍니다** — `width="md"` 처럼 씁니다. 등급은 `--cmp-field-width-*` 토큰으로
 풀리므로 토큰이 바뀌면 화면이 따라갑니다. 같은 값을 px 로 적으면 그 화면만 옛 값에 남습니다.
 
-| 등급 | 쓰는 곳       |
-| ---- | ------------- |
+| 등급 | 쓰는 곳        |
+| ---- | -------------- |
 | `xs` | 숫자 필드 전용 |
-| `sm` |               |
-| `md` |               |
-| `lg` |               |
+| `sm` |                |
+| `md` |                |
+| `lg` |                |
 | `xl` | 정책상 상한    |
 
 ```tsx

package/bin/sellmate-ds.mjs

@@ -12,23 +12,28 @@
  *  - 안전하게 고칠 수 없는 파일은 손대지 않고 붙여넣을 스니펫을 출력한다.
  *  - 무엇을 바꿨는지 전부 보고한다.
  */
-import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from "node:fs";
-import { join, relative, dirname, sep } from "node:path";
+import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from 'node:fs';
+import { join, relative, dirname, sep } from 'node:path';
 
-const PKG = "sellmate-design-system-react";
+const PKG = 'sellmate-design-system-react';
 const LLMS_PATH = `node_modules/${PKG}/dist/llms.txt`;
 
 const args = process.argv.slice(2);
-const command = args.find((a) => !a.startsWith("-")) ?? "init";
-const dryRun = args.includes("--dry-run") || args.includes("-n");
+const command = args.find(a => !a.startsWith('-')) ?? 'init';
+const dryRun = args.includes('--dry-run') || args.includes('-n');
 
 const cwd = process.cwd();
 
 /* ─────────────────────────── 출력 ─────────────────────────── */
 
 const c = {
-  reset: "\x1b[0m", bold: "\x1b[1m", dim: "\x1b[2m",
-  green: "\x1b[32m", yellow: "\x1b[33m", cyan: "\x1b[36m", red: "\x1b[31m",
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  cyan: '\x1b[36m',
+  red: '\x1b[31m',
 };
 const paint = (color, s) => (process.stdout.isTTY ? `${c[color]}${s}${c.reset}` : s);
 
@@ -38,7 +43,7 @@ const add = (status, file, detail, snippet) => results.push({ status, file, deta
 
 /* ─────────────────────────── 유틸 ─────────────────────────── */
 
-const read = (p) => readFileSync(p, "utf8");
+const read = p => readFileSync(p, 'utf8');
 
 function write(path, content) {
   if (dryRun) return;
@@ -47,14 +52,14 @@ function write(path, content) {
 
 /** node_modules 가 있는 프로젝트 루트인지 확인 */
 function assertProjectRoot() {
-  if (!existsSync(join(cwd, "package.json"))) {
-    console.error(paint("red", "package.json 이 없습니다. 프로젝트 루트에서 실행하세요."));
+  if (!existsSync(join(cwd, 'package.json'))) {
+    console.error(paint('red', 'package.json 이 없습니다. 프로젝트 루트에서 실행하세요.'));
     process.exit(1);
   }
 }
 
 /** 후보 경로 중 처음 존재하는 것 */
-const firstExisting = (candidates) => candidates.find((p) => existsSync(join(cwd, p)));
+const firstExisting = candidates => candidates.find(p => existsSync(join(cwd, p)));
 
 /* ────────────────── 1. 에이전트 지침 파일 ────────────────── */
 
@@ -73,24 +78,24 @@ UI 작업 전 \`${LLMS_PATH}\` 를 **반드시 먼저 읽는다.**
 `;
 
 function stepAgentInstructions() {
-  const existing = ["CLAUDE.md", "AGENTS.md"].filter((f) => existsSync(join(cwd, f)));
-  const targets = existing.length ? existing : ["CLAUDE.md"];
+  const existing = ['CLAUDE.md', 'AGENTS.md'].filter(f => existsSync(join(cwd, f)));
+  const targets = existing.length ? existing : ['CLAUDE.md'];
 
   for (const file of targets) {
     const path = join(cwd, file);
-    const current = existsSync(path) ? read(path) : "";
+    const current = existsSync(path) ? read(path) : '';
 
     if (current.includes(LLMS_PATH)) {
-      add("skipped", file, "이미 llms.txt 참조가 있습니다");
+      add('skipped', file, '이미 llms.txt 참조가 있습니다');
       continue;
     }
 
     const next = current
-      ? `${current.replace(/\s*$/, "")}\n${AGENT_SECTION}`
+      ? `${current.replace(/\s*$/, '')}\n${AGENT_SECTION}`
       : `# 프로젝트 지침\n${AGENT_SECTION}`;
 
     write(path, next);
-    add("added", file, existsSync(path) ? "디자인 시스템 지침 섹션 추가" : "생성 후 지침 추가");
+    add('added', file, existsSync(path) ? '디자인 시스템 지침 섹션 추가' : '생성 후 지침 추가');
   }
 }
 
@@ -105,8 +110,8 @@ function matchingBracket(src, openIndex) {
   let depth = 0;
   for (let i = openIndex; i < src.length; i++) {
     const ch = src[i];
-    if (ch === "[") depth++;
-    else if (ch === "]") {
+    if (ch === '[') depth++;
+    else if (ch === ']') {
       depth--;
       if (depth === 0) return i;
     }
@@ -116,11 +121,19 @@ function matchingBracket(src, openIndex) {
 
 function stepEslint() {
   const file = firstExisting([
-    "eslint.config.mjs", "eslint.config.js", "eslint.config.ts", "eslint.config.cjs",
+    'eslint.config.mjs',
+    'eslint.config.js',
+    'eslint.config.ts',
+    'eslint.config.cjs',
   ]);
 
   if (!file) {
-    add("manual", "eslint.config.mjs", "설정 파일이 없습니다 — 아래 내용으로 만드세요", ESLINT_SNIPPET);
+    add(
+      'manual',
+      'eslint.config.mjs',
+      '설정 파일이 없습니다 — 아래 내용으로 만드세요',
+      ESLINT_SNIPPET,
+    );
     return;
   }
 
@@ -128,7 +141,7 @@ function stepEslint() {
   const src = read(path);
 
   if (src.includes(`${PKG}/eslint`)) {
-    add("skipped", file, "이미 ESLint 프리셋이 연결되어 있습니다");
+    add('skipped', file, '이미 ESLint 프리셋이 연결되어 있습니다');
     return;
   }
 
@@ -136,14 +149,14 @@ function stepEslint() {
   // 배열 경계를 확신할 수 없으므로 손대지 않고 스니펫을 안내한다.
   const exportMatch = src.match(/export\s+default\s*\[/);
   if (!exportMatch) {
-    add("manual", file, "자동 삽입이 어려운 형태입니다 — 아래를 직접 추가하세요", ESLINT_SNIPPET);
+    add('manual', file, '자동 삽입이 어려운 형태입니다 — 아래를 직접 추가하세요', ESLINT_SNIPPET);
     return;
   }
 
-  const openIndex = src.indexOf("[", exportMatch.index);
+  const openIndex = src.indexOf('[', exportMatch.index);
   const closeIndex = matchingBracket(src, openIndex);
   if (closeIndex === -1) {
-    add("manual", file, "배열 끝을 찾지 못했습니다 — 아래를 직접 추가하세요", ESLINT_SNIPPET);
+    add('manual', file, '배열 끝을 찾지 못했습니다 — 아래를 직접 추가하세요', ESLINT_SNIPPET);
     return;
   }
 
@@ -164,11 +177,13 @@ function stepEslint() {
   const before = withImport.slice(0, close);
   const needsComma = /[^[\s,]\s*$/.test(before);
   const next =
-    before.replace(/\s*$/, "") + (needsComma ? "," : "") + `\n${ESLINT_SPREAD}\n` +
+    before.replace(/\s*$/, '') +
+    (needsComma ? ',' : '') +
+    `\n${ESLINT_SPREAD}\n` +
     withImport.slice(close);
 
   write(path, next);
-  add("added", file, "프리셋(configs.recommended) 연결");
+  add('added', file, '프리셋(configs.recommended) 연결');
 }
 
 /* ────────────────── 3. 전역 CSS ────────────────── */
@@ -176,14 +191,19 @@ function stepEslint() {
 /** 앱의 전역 CSS 를 찾는다 */
 function findGlobalCss() {
   const candidates = [
-    "app/globals.css", "src/app/globals.css", "src/styles/globals.css",
-    "styles/globals.css", "src/index.css", "src/main.css", "src/global.css",
+    'app/globals.css',
+    'src/app/globals.css',
+    'src/styles/globals.css',
+    'styles/globals.css',
+    'src/index.css',
+    'src/main.css',
+    'src/global.css',
   ];
   const found = firstExisting(candidates);
   if (found) return found;
 
   // 후보에 없으면 @import "tailwindcss" 가 있는 css 를 얕게 탐색
-  const roots = ["src", "app", "styles"].filter((d) => existsSync(join(cwd, d)));
+  const roots = ['src', 'app', 'styles'].filter(d => existsSync(join(cwd, d)));
   for (const root of roots) {
     const hit = walkCss(join(cwd, root), 3);
     if (hit) return relative(cwd, hit);
@@ -200,7 +220,7 @@ function walkCss(dir, depth) {
     return null;
   }
   for (const name of entries) {
-    if (name === "node_modules" || name.startsWith(".")) continue;
+    if (name === 'node_modules' || name.startsWith('.')) continue;
     const p = join(dir, name);
     let st;
     try {
@@ -211,9 +231,9 @@ function walkCss(dir, depth) {
     if (st.isDirectory()) {
       const hit = walkCss(p, depth - 1);
       if (hit) return hit;
-    } else if (name.endsWith(".css")) {
+    } else if (name.endsWith('.css')) {
       try {
-        if (read(p).includes("tailwindcss")) return p;
+        if (read(p).includes('tailwindcss')) return p;
       } catch {
         /* 읽기 실패는 무시 */
       }
@@ -227,9 +247,9 @@ function stepGlobalCss() {
 
   if (!file) {
     add(
-      "manual",
-      "전역 CSS",
-      "전역 CSS 를 찾지 못했습니다 — 앱의 전역 CSS 에 아래를 추가하세요",
+      'manual',
+      '전역 CSS',
+      '전역 CSS 를 찾지 못했습니다 — 앱의 전역 CSS 에 아래를 추가하세요',
       `@import 'tailwindcss';\n@import '${PKG}/theme.css';\n@source "<상대경로>/node_modules/${PKG}/dist";`,
     );
     return;
@@ -239,14 +259,14 @@ function stepGlobalCss() {
   const src = read(path);
 
   // CSS 파일 기준 상대경로로 @source 를 계산한다 (README 주의사항)
-  const toNodeModules = relative(dirname(path), join(cwd, "node_modules", PKG, "dist"));
-  const sourcePath = toNodeModules.split(sep).join("/");
+  const toNodeModules = relative(dirname(path), join(cwd, 'node_modules', PKG, 'dist'));
+  const sourcePath = toNodeModules.split(sep).join('/');
 
   const hasTheme = src.includes(`${PKG}/theme.css`);
   const hasSource = src.includes(`node_modules/${PKG}/dist`);
 
   if (hasTheme && hasSource) {
-    add("skipped", file, "theme.css · @source 가 이미 설정되어 있습니다");
+    add('skipped', file, 'theme.css · @source 가 이미 설정되어 있습니다');
     return;
   }
 
@@ -258,28 +278,28 @@ function stepGlobalCss() {
   const tw = src.match(/@import\s+["']tailwindcss["'];?/);
   if (!tw) {
     add(
-      "manual",
+      'manual',
       file,
       "@import 'tailwindcss' 를 찾지 못했습니다 — 아래를 직접 추가하세요",
-      lines.join("\n"),
+      lines.join('\n'),
     );
     return;
   }
 
   const insertAt = tw.index + tw[0].length;
-  const next = src.slice(0, insertAt) + "\n" + lines.join("\n") + src.slice(insertAt);
+  const next = src.slice(0, insertAt) + '\n' + lines.join('\n') + src.slice(insertAt);
   write(path, next);
-  add("added", file, lines.length === 2 ? "theme.css import · @source 추가" : "누락분 추가");
+  add('added', file, lines.length === 2 ? 'theme.css import · @source 추가' : '누락분 추가');
 }
 
 /* ─────────────────────────── 실행 ─────────────────────────── */
 
 function printHelp() {
   console.log(`
-${paint("bold", "sellmate-ds")} — ${PKG} 소비 앱 설정
+${paint('bold', 'sellmate-ds')} — ${PKG} 소비 앱 설정
 
-  ${paint("cyan", "npx sellmate-ds init")}             설정을 자동으로 연결합니다
-  ${paint("cyan", "npx sellmate-ds init --dry-run")}   무엇이 바뀔지만 보여줍니다
+  ${paint('cyan', 'npx sellmate-ds init')}             설정을 자동으로 연결합니다
+  ${paint('cyan', 'npx sellmate-ds init --dry-run')}   무엇이 바뀔지만 보여줍니다
 
 연결하는 것
   · CLAUDE.md / AGENTS.md   AI 에이전트가 규칙(llms.txt)을 읽도록 지침 추가
@@ -290,13 +310,13 @@ ${paint("bold", "sellmate-ds")} — ${PKG} 소비 앱 설정
 `);
 }
 
-if (command === "help" || args.includes("--help") || args.includes("-h")) {
+if (command === 'help' || args.includes('--help') || args.includes('-h')) {
   printHelp();
   process.exit(0);
 }
 
-if (command !== "init") {
-  console.error(paint("red", `알 수 없는 명령: ${command}`));
+if (command !== 'init') {
+  console.error(paint('red', `알 수 없는 명령: ${command}`));
   printHelp();
   process.exit(1);
 }
@@ -304,34 +324,46 @@ if (command !== "init") {
 assertProjectRoot();
 
 console.log(
-  `\n${paint("bold", `${PKG} 설정`)}${dryRun ? paint("yellow", "  (dry-run — 파일을 바꾸지 않습니다)") : ""}\n`,
+  `\n${paint('bold', `${PKG} 설정`)}${dryRun ? paint('yellow', '  (dry-run — 파일을 바꾸지 않습니다)') : ''}\n`,
 );
 
 stepAgentInstructions();
 stepEslint();
 stepGlobalCss();
 
-const icon = { added: paint("green", "✓"), skipped: paint("dim", "·"), manual: paint("yellow", "!"), error: paint("red", "✗") };
+const icon = {
+  added: paint('green', '✓'),
+  skipped: paint('dim', '·'),
+  manual: paint('yellow', '!'),
+  error: paint('red', '✗'),
+};
 
 for (const r of results) {
-  console.log(`  ${icon[r.status]} ${paint("bold", r.file)}  ${paint("dim", r.detail)}`);
+  console.log(`  ${icon[r.status]} ${paint('bold', r.file)}  ${paint('dim', r.detail)}`);
   if (r.snippet) {
-    console.log(r.snippet.split("\n").map((l) => `      ${paint("cyan", l)}`).join("\n"));
+    console.log(
+      r.snippet
+        .split('\n')
+        .map(l => `      ${paint('cyan', l)}`)
+        .join('\n'),
+    );
   }
 }
 
-const added = results.filter((r) => r.status === "added").length;
-const manual = results.filter((r) => r.status === "manual").length;
+const added = results.filter(r => r.status === 'added').length;
+const manual = results.filter(r => r.status === 'manual').length;
 
 console.log();
 if (dryRun) {
-  console.log(paint("yellow", `  ${added}개 항목이 변경됩니다. --dry-run 을 빼고 다시 실행하세요.`));
+  console.log(
+    paint('yellow', `  ${added}개 항목이 변경됩니다. --dry-run 을 빼고 다시 실행하세요.`),
+  );
 } else if (added) {
-  console.log(paint("green", `  ${added}개 항목을 설정했습니다.`));
+  console.log(paint('green', `  ${added}개 항목을 설정했습니다.`));
 } else if (!manual) {
-  console.log(paint("dim", "  이미 모두 설정되어 있습니다."));
+  console.log(paint('dim', '  이미 모두 설정되어 있습니다.'));
 }
 if (manual) {
-  console.log(paint("yellow", `  ${manual}개 항목은 위 내용을 직접 추가해야 합니다.`));
+  console.log(paint('yellow', `  ${manual}개 항목은 위 내용을 직접 추가해야 합니다.`));
 }
 console.log();

package/dist/components/SCircleProgress/README.md

@@ -9,9 +9,9 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `value?` | `number` | `0` | 진행률 (0–100) |
-| `type?` | `SCircleProgressType` | `'primary'` | 색상 테마 |
+| `type?` | `SCircleProgressType` | `'primary'` | 진행 상태 - `primary`: 정상 진행 중 - `warning`: 진행 중이지만 설정된 기준에 미달해 주의가 필요하다 (기준은 제품이 정한다) - `error`: 실패·중단 등 더 이상 정상적으로 진행되지 않는다 - `complete`: 완료 - `inverse`: 어두운 배경 위에 놓을 때 - `neutral`: 콘텐츠가 아직 없는 자리를 채울 때 (대기) |
 | `indeterminate?` | `boolean` | `false` | 불확정(스피너) 모드 — value 무시 |
-| `size?` | `number \| string` | `DEFAULT_SIZE` | 링의 지름. 숫자는 px 로 해석한다. 부모 크기에 비례시키려면 컨테이너 쿼리 단위(`'45cqh'`)를 쓴다 — 퍼센트는 부모가 inline-flex 라 기준 폭이 정해지지 않아 해석되지 않는다. |
+| `size?` | `number \| string` | — | 링의 지름. 숫자는 px 로 해석한다. 주지 않으면 `--cmp-progress-circular-size` 를 쓴다. 부모 크기에 비례시키려면 컨테이너 쿼리 단위(`'45cqh'`)를 쓴다 — 퍼센트는 부모가 inline-flex 라 기준 폭이 정해지지 않아 해석되지 않는다. |
 | `label?` | `string` | — | 하단 레이블 |
 | `innerValue?` | `boolean` | `false` | true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 |
 | `className?` | `string` | — |  |
@@ -22,7 +22,8 @@
 ### SCircleProgressType
 
 ```ts
-export type SCircleProgressType = 'primary' | 'inverse' | 'error' | 'complete' | 'neutral';
+export type SCircleProgressType =
+  'primary' | 'inverse' | 'warning' | 'error' | 'complete' | 'neutral';
 ```
 
 ## Dependencies
@@ -32,6 +33,7 @@ export type SCircleProgressType = 'primary' | 'inverse' | 'error' | 'complete' |
  - [SImage](../SImage)
  - [SLoadingContainer](../SLoadingContainer)
  - [SLoadingModal](../SLoadingModal)
+ - [SSelect](../SSelect)
  - [STable](../STable)
 
 ### Graph
@@ -41,6 +43,7 @@ graph TD;
   SImage --> SCircleProgress
   SLoadingContainer --> SCircleProgress
   SLoadingModal --> SCircleProgress
+  SSelect --> SCircleProgress
   STable --> SCircleProgress
   style SCircleProgress fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SCircleProgress/SCircleProgress.d.ts

@@ -1,14 +1,22 @@
 import { type CSSProperties } from 'react';
-export type SCircleProgressType = 'primary' | 'inverse' | 'error' | 'complete' | 'neutral';
+export type SCircleProgressType = 'primary' | 'inverse' | 'warning' | 'error' | 'complete' | 'neutral';
 export interface SCircleProgressProps {
     /** 진행률 (0–100) */
     value?: number;
-    /** 색상 테마 */
+    /**
+     * 진행 상태
+     * - `primary`: 정상 진행 중
+     * - `warning`: 진행 중이지만 설정된 기준에 미달해 주의가 필요하다 (기준은 제품이 정한다)
+     * - `error`: 실패·중단 등 더 이상 정상적으로 진행되지 않는다
+     * - `complete`: 완료
+     * - `inverse`: 어두운 배경 위에 놓을 때
+     * - `neutral`: 콘텐츠가 아직 없는 자리를 채울 때 (대기)
+     */
     type?: SCircleProgressType;
     /** 불확정(스피너) 모드 — value 무시 */
     indeterminate?: boolean;
     /**
-     * 링의 지름. 숫자는 px 로 해석한다.
+     * 링의 지름. 숫자는 px 로 해석한다. 주지 않으면 `--cmp-progress-circular-size` 를 쓴다.
      * 부모 크기에 비례시키려면 컨테이너 쿼리 단위(`'45cqh'`)를 쓴다 — 퍼센트는 부모가
      * inline-flex 라 기준 폭이 정해지지 않아 해석되지 않는다.
      */

package/dist/components/SLauncherListBox/README.md

@@ -53,7 +53,7 @@ export interface SLauncherListBoxItem {
  * 있는지 보이지 않는다). 대신 아래 `LOGO_COVERAGE` 가 로고 목록과 어긋나지 않는지 타입으로 지킨다.
  */
 export type SLauncherService =
-  'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
+  'sellmate' | 'wms' | 'chat' | 'chatbot' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
 ```
 
 ## Dependencies

package/dist/components/SLauncherListBox/launcherListBox.config.d.ts

@@ -38,12 +38,12 @@ export declare const LAUNCHER_LIST_BOX_TRAILING_ICON: SIconName;
  * 문서에서 바로 읽히도록 키를 풀어 쓴다(`Exclude<SLogoName, …>` 로 두면 README·Storybook 에 무엇이
  * 있는지 보이지 않는다). 대신 아래 `LOGO_COVERAGE` 가 로고 목록과 어긋나지 않는지 타입으로 지킨다.
  */
-export type SLauncherService = 'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
+export type SLauncherService = 'sellmate' | 'wms' | 'chat' | 'chatbot' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
 /**
  * 런처에 설 수 있는 서비스 — **목록의 순서이기도 하다**(로고 순서와 같다).
  * 앱이 넘긴 순서가 아니라 이 순서로 선다: 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다.
  */
-export declare const LAUNCHER_SERVICES: readonly ["sellmate", "wms", "chat", "plm", "account", "people", "crm", "work", "pos"];
+export declare const LAUNCHER_SERVICES: readonly ["sellmate", "wms", "chat", "chatbot", "plm", "account", "people", "crm", "work", "pos"];
 /**
  * 서비스가 아닌 로고 — 런처의 서비스 줄로 세우지 않는다.
  * `console` 은 통합 콘솔이라 목록 아래 "셀메이트 콘솔로 이동" 링크가 늘 맡는다. 줄로도 세우면 같은 곳이 두 번 선다.

package/dist/components/SLinearProgress/README.md

@@ -9,7 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `value?` | `number` | `0` | 진행률 (0–100) |
-| `type?` | `SLinearProgressType` | `'primary'` | 색상 타입 |
+| `type?` | `SLinearProgressType` | `'primary'` | 진행 상태 - `primary`: 정상 진행 중 - `warning`: 진행 중이지만 설정된 기준에 미달해 주의가 필요하다 (기준은 제품이 정한다) - `error`: 실패·중단 등 더 이상 정상적으로 진행되지 않는다 - `complete`: 완료 |
 | `size?` | `SLinearProgressSize` | `'sm'` | 바 높이. xs 는 바 안에 퍼센트 텍스트를 넣지 않는다 |
 | `indeterminate?` | `boolean` | `false` | 진행률 없이 무한 애니메이션 |
 | `label?` | `string` | — | 하단 레이블 |
@@ -21,7 +21,7 @@
 ### SLinearProgressType
 
 ```ts
-export type SLinearProgressType = 'primary' | 'error' | 'complete';
+export type SLinearProgressType = 'primary' | 'warning' | 'error' | 'complete';
 ```
 
 ### SLinearProgressSize

package/dist/components/SLinearProgress/SLinearProgress.d.ts

@@ -1,10 +1,16 @@
 import { type CSSProperties } from 'react';
-export type SLinearProgressType = 'primary' | 'error' | 'complete';
+export type SLinearProgressType = 'primary' | 'warning' | 'error' | 'complete';
 export type SLinearProgressSize = 'xs' | 'sm' | 'md';
 export interface SLinearProgressProps {
     /** 진행률 (0–100) */
     value?: number;
-    /** 색상 타입 */
+    /**
+     * 진행 상태
+     * - `primary`: 정상 진행 중
+     * - `warning`: 진행 중이지만 설정된 기준에 미달해 주의가 필요하다 (기준은 제품이 정한다)
+     * - `error`: 실패·중단 등 더 이상 정상적으로 진행되지 않는다
+     * - `complete`: 완료
+     */
     type?: SLinearProgressType;
     /** 바 높이. xs 는 바 안에 퍼센트 텍스트를 넣지 않는다 */
     size?: SLinearProgressSize;

package/dist/components/SLogo/README.md

@@ -55,6 +55,7 @@ export const LOGO_NAMES = [
   'sellmate',
   'wms',
   'chat',
+  'chatbot',
   'plm',
   'account',
   'people',

package/dist/components/SLogo/logo.config.d.ts

@@ -8,7 +8,7 @@
  * 담고 있는 로고 — 셀메이트 본체와 서비스들, 그리고 통합 콘솔. 로고 한 벌은 [셀메이트 워드마크 + 표기]다.
  * 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다.
  */
-export declare const LOGO_NAMES: readonly ["sellmate", "wms", "chat", "plm", "account", "people", "crm", "work", "pos", "console"];
+export declare const LOGO_NAMES: readonly ["sellmate", "wms", "chat", "chatbot", "plm", "account", "people", "crm", "work", "pos", "console"];
 export type SLogoName = (typeof LOGO_NAMES)[number];
 /**
  * 로고가 서는 배경. 밝은 면에는 `light`(남색 워드마크), 어두운 면에는 `dark`(흰 워드마크).