sellmate-design-system-react 9.0.0-beta.6 → 9.0.0-beta.8

package/dist/lib/truncated-value-tooltip.d.ts

@@ -0,0 +1,18 @@
+import { type Ref, type ReactNode } from 'react';
+/** 여러 ref 에 같은 노드를 흘려보낸다 — 소비자용 ref 와 측정용 ref 가 같은 `<input>` 을 가리켜야 한다 */
+export declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void;
+export interface TruncatedValueTooltip {
+    /** 측정 대상 `<input>` 에 붙일 ref. 소비자 ref 와는 `mergeRefs` 로 합친다 */
+    valueRef: Ref<HTMLInputElement>;
+    /** 측정 대상에 붙일 호버 핸들러 */
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    /** 필드 어디든 함께 렌더한다 (Portal 이라 레이아웃을 차지하지 않는다) */
+    tooltip: ReactNode;
+}
+export declare function useTruncatedValueTooltip({ enabled, text, }: {
+    /** `readOnly` 이고 비활성이 아닐 때만 켠다 */
+    enabled: boolean;
+    /** 툴팁에 표시할 전문. 화면에 보이는 문자열이어야 한다(숫자 필드의 천단위 콤마 포함) */
+    text: string;
+}): TruncatedValueTooltip;

package/dist/llms-full.txt

@@ -3442,7 +3442,6 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | `children?` | `ReactNode` | — | 리스트 컨테이너 내부에 렌더링할 내용 |
 | `useGap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
 | `usePadding?` | `boolean` | `false` | 리스트 컨테이너 padding 토큰 적용 여부 |
-| `separator?` | `boolean` | `false` | 아이템 하단 구분선 표시 여부. 테두리를 가진 아이템(`bordered`)에는 쓰지 않는다 |
 
 ## Dependencies
 
@@ -3977,6 +3976,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 |------|------|---------|-------------|
 | `background?` | `SPageBackground` | `'frame'` | 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕. 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다. |
 | `scrollEndSpacing?` | `boolean` | `true` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지). |
+| `overlayScrollbar?` | `boolean` | `false` | true면 네이티브 스크롤바를 숨기고 SPage 위에 오버레이 스크롤바를 얹는다. 스크롤바가 레이아웃 폭을 차지하지 않아 내부 콘텐츠 폭이 줄어들지 않는다. |
 | `contentHeight?` | `SPageContentHeight` | `'auto'` | 본문 높이 모드. 기본은 `auto` — 콘텐츠가 흐르고 넘치면 페이지가 스크롤한다. `fill` 은 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다. 표가 자기 안에서 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용이다. 본문 루트에 `h-full` 이 먹으므로 `<div className="flex h-full min-h-0 flex-col">` + `<STable className="min-h-0 flex-1" />` 구성이 성립한다. `fill` 에서는 페이지가 스크롤하지 않으므로 `scrollEndSpacing` 이 무시된다. |
 | `header?` | `SPageHeaderProps` | — | 페이지 타이틀 영역(pageHeader 포팅). 주면 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다. `children` 은 항상 본문이다 — header 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다. |
 
@@ -4583,7 +4583,6 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 |------|------|---------|-------------|
 | `value` | `string` | — | 현재 선택된 탭 value |
 | `tabs` | `STabOption[]` | — | 탭 옵션 목록 |
-| `size?` | `STabSize` | `'md'` | 탭 크기 (main 전용) |
 | `isSub?` | `boolean` | `false` | 서브 탭(밑줄형) 스타일 |
 | `vertical?` | `boolean` | `false` | 세로 배치 (sub 전용 — main 폴더형은 항상 가로) |
 | `className?` | `string` | — |  |
@@ -5028,6 +5027,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 | `border?` | `boolean` | `true` | 아이템 하단 border 표시 여부 |
 | `indeterminate?` | `boolean` | `false` | 일부 선택 상태 |
 | `selectable?` | `boolean` | `true` | 체크박스 표시 여부 |
+| `size?` | `STreeSize` | `'sm'` | 타이포그래피 크기 |
 | `leading?` | `ReactNode \| ((state: STreeItemRenderState) => ReactNode)` | — | 사용자 지정 leading 콘텐츠 |
 | `trailing?` | `ReactNode \| ((state: STreeItemRenderState) => ReactNode)` | — | 사용자 지정 trailing 콘텐츠 |
 
@@ -5050,6 +5050,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 | `expandedIds?` | `string[]` | — | 펼쳐진 노드 ID 목록 |
 | `defaultExpandedIds?` | `string[]` | — | 비제어 펼침 초기값 |
 | `selectable?` | `boolean` | `true` | 체크박스 표시 여부 |
+| `size?` | `STreeSize` | `'sm'` | 타이포그래피 크기 |
 | `useAll?` | `boolean` | `false` | 체크박스 사용 시 최상단 전체 선택 아이템 표시 여부 |
 | `guideline?` | `boolean` | `true` | depth 연결선 표시 여부 |
 | `border?` | `boolean` | `true` | 아이템 하단 border 표시 여부 |

package/dist/styles.css

@@ -590,6 +590,9 @@
   .inset-y-0 {
     inset-block: 0;
   }
+  .-top-\[9999px\] {
+    top: calc(9999px * -1);
+  }
   .top-0 {
     top: 0;
   }
@@ -602,6 +605,9 @@
   .top-\[12px\] {
     top: 12px;
   }
+  .top-\[13px\] {
+    top: 13px;
+  }
   .top-\[15px\] {
     top: 15px;
   }
@@ -632,6 +638,9 @@
   .right-1\/2 {
     right: calc(1 / 2 * 100%);
   }
+  .right-\[2px\] {
+    right: 2px;
+  }
   .right-\[10px\] {
     right: 10px;
   }
@@ -650,6 +659,9 @@
   .bottom-\[-1px\] {
     bottom: -1px;
   }
+  .bottom-\[2px\] {
+    bottom: 2px;
+  }
   .left-0 {
     left: 0;
   }
@@ -782,6 +794,9 @@
   .mt-sd-2 {
     margin-top: var(--spacing-sd-2);
   }
+  .mt-sd-4 {
+    margin-top: var(--spacing-sd-4);
+  }
   .mt-sd-8 {
     margin-top: var(--spacing-sd-8);
   }
@@ -894,9 +909,18 @@
   .h-\[2px\] {
     height: 2px;
   }
+  .h-\[8px\] {
+    height: 8px;
+  }
   .h-\[10px\] {
     height: 10px;
   }
+  .h-\[12px\] {
+    height: 12px;
+  }
+  .h-\[15px\] {
+    height: 15px;
+  }
   .h-\[16px\] {
     height: 16px;
   }
@@ -927,6 +951,9 @@
   .h-\[56px\] {
     height: 56px;
   }
+  .h-\[72px\] {
+    height: 72px;
+  }
   .h-\[80vh\] {
     height: 80vh;
   }
@@ -954,6 +981,9 @@
   .h-\[364px\] {
     height: 364px;
   }
+  .h-\[380px\] {
+    height: 380px;
+  }
   .h-\[420px\] {
     height: 420px;
   }
@@ -1101,12 +1131,18 @@
   .w-\[4px\] {
     width: 4px;
   }
+  .w-\[8px\] {
+    width: 8px;
+  }
   .w-\[9px\] {
     width: 9px;
   }
   .w-\[10px\] {
     width: 10px;
   }
+  .w-\[12px\] {
+    width: 12px;
+  }
   .w-\[14px\] {
     width: 14px;
   }
@@ -1137,6 +1173,9 @@
   .w-\[220px\] {
     width: 220px;
   }
+  .w-\[240px\] {
+    width: 240px;
+  }
   .w-\[280px\] {
     width: 280px;
   }
@@ -1419,6 +1458,9 @@
   .grid-cols-\[200px_1fr\] {
     grid-template-columns: 200px 1fr;
   }
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
+  }
   .grid-cols-\[repeat\(7\,var\(--cmp-datepicker-calendar-day-width\)\)\] {
     grid-template-columns: repeat(7,var(--cmp-datepicker-calendar-day-width));
   }
@@ -1446,6 +1488,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -2221,6 +2266,9 @@
   .bg-\[\#FFE3F7\] {
     background-color: #FFE3F7;
   }
+  .bg-\[\#FFF4F4\] {
+    background-color: #FFF4F4;
+  }
   .bg-\[\#eee\] {
     background-color: #eee;
   }
@@ -2323,6 +2371,9 @@
   .bg-\[var\(--color-grey-15\)\] {
     background-color: var(--color-grey-15);
   }
+  .bg-\[var\(--color-grey-45\)\] {
+    background-color: var(--color-grey-45);
+  }
   .bg-\[var\(--color-white\)\] {
     background-color: var(--color-white);
   }
@@ -2776,6 +2827,9 @@
   .pb-sd-16 {
     padding-bottom: var(--spacing-sd-16);
   }
+  .pb-sd-48 {
+    padding-bottom: var(--spacing-sd-48);
+  }
   .pl-\(--cmp-guide-contents-depth-paddingLeft\) {
     padding-left: var(--cmp-guide-contents-depth-paddingLeft);
   }
@@ -3050,9 +3104,6 @@
   .text-\(--cmp-tree-item-text-default\) {
     color: var(--cmp-tree-item-text-default);
   }
-  .text-\(--cmp-tree-item-text-selected\) {
-    color: var(--cmp-tree-item-text-selected);
-  }
   .text-\(--color-grey-65\) {
     color: var(--color-grey-65);
   }
@@ -4936,6 +4987,11 @@
   --cmp-field-errorMessage-color: #E30000;
   --cmp-field-contents-gap: 4px;
   --cmp-field-message-paddingX: 8px;
+  --cmp-field-width-xs: 80px;
+  --cmp-field-width-sm: 120px;
+  --cmp-field-width-md: 160px;
+  --cmp-field-width-lg: 240px;
+  --cmp-field-width-xl: 480px;
   --cmp-textinput-sm-height: 28px;
   --cmp-textinput-sm-paddingX: 12px;
   --cmp-textinput-sm-paddingY: 4px;
@@ -5428,10 +5484,8 @@
   --cmp-stepper-vertical-title-paddingTop: 12px;
   --cmp-stepper-vertical-title-paddingBottom: 6px;
   --cmp-stepper-vertical-title-text: #004290;
-  --cmp-tab-main-lg-height: 44px;
-  --cmp-tab-main-lg-paddingX: 32px;
-  --cmp-tab-main-md-height: 36px;
-  --cmp-tab-main-md-paddingX: 24px;
+  --cmp-tab-main-height: 36px;
+  --cmp-tab-main-paddingX: 24px;
   --cmp-tab-main-gap: 8px;
   --cmp-tab-main-container-gap: 4px;
   --cmp-tab-main-radius: 6px;
@@ -5587,9 +5641,8 @@
   --cmp-tree-item-rowGap: 8px;
   --cmp-tree-item-contentGap: 12px;
   --cmp-tree-item-text-default: #222222;
-  --cmp-tree-item-text-selected: #0075FF;
   --cmp-tree-item-arrow-icon: 16px;
-  --cmp-tree-connector-line-color: #AAAAAA;
+  --cmp-tree-connector-line-color: #E1E1E1;
   --cmp-pageHeader-paddingX: 16px;
   --cmp-pageHeader-gap: 12px;
   --cmp-pageHeader-title-paddingLeft: 4px;

package/dist/theme.css

@@ -746,6 +746,11 @@
   --cmp-field-errorMessage-color: #E30000;
   --cmp-field-contents-gap: 4px;
   --cmp-field-message-paddingX: 8px;
+  --cmp-field-width-xs: 80px;
+  --cmp-field-width-sm: 120px;
+  --cmp-field-width-md: 160px;
+  --cmp-field-width-lg: 240px;
+  --cmp-field-width-xl: 480px;
   --cmp-textinput-sm-height: 28px;
   --cmp-textinput-sm-paddingX: 12px;
   --cmp-textinput-sm-paddingY: 4px;
@@ -1238,10 +1243,8 @@
   --cmp-stepper-vertical-title-paddingTop: 12px;
   --cmp-stepper-vertical-title-paddingBottom: 6px;
   --cmp-stepper-vertical-title-text: #004290;
-  --cmp-tab-main-lg-height: 44px;
-  --cmp-tab-main-lg-paddingX: 32px;
-  --cmp-tab-main-md-height: 36px;
-  --cmp-tab-main-md-paddingX: 24px;
+  --cmp-tab-main-height: 36px;
+  --cmp-tab-main-paddingX: 24px;
   --cmp-tab-main-gap: 8px;
   --cmp-tab-main-container-gap: 4px;
   --cmp-tab-main-radius: 6px;
@@ -1397,9 +1400,8 @@
   --cmp-tree-item-rowGap: 8px;
   --cmp-tree-item-contentGap: 12px;
   --cmp-tree-item-text-default: #222222;
-  --cmp-tree-item-text-selected: #0075FF;
   --cmp-tree-item-arrow-icon: 16px;
-  --cmp-tree-connector-line-color: #AAAAAA;
+  --cmp-tree-connector-line-color: #E1E1E1;
   --cmp-pageHeader-paddingX: 16px;
   --cmp-pageHeader-gap: 12px;
   --cmp-pageHeader-title-paddingLeft: 4px;

package/eslint/index.mjs

@@ -11,6 +11,7 @@ import preferTypoPreset from "./rules/prefer-typo-preset.mjs";
 import tableNumericAlign from "./rules/table-numeric-align.mjs";
 import requireLocaleNumber from "./rules/require-locale-number.mjs";
 import componentGroupGap from "./rules/component-group-gap.mjs";
+import fieldWidthGrade from "./rules/field-width-grade.mjs";
 
 const PLUGIN_NAME = "sellmate";
 
@@ -24,6 +25,7 @@ const plugin = {
     "table-numeric-align": tableNumericAlign,
     "require-locale-number": requireLocaleNumber,
     "component-group-gap": componentGroupGap,
+    "field-width-grade": fieldWidthGrade,
   },
 };
 
@@ -54,6 +56,8 @@ const recommended = [
       [`${PLUGIN_NAME}/component-group-gap`]: "warn",
       [`${PLUGIN_NAME}/table-numeric-align`]: "warn",
       [`${PLUGIN_NAME}/require-locale-number`]: "warn",
+      // 폭 등급 환산이 아직 잠정치라 권고에 둔다 (디자인 확정표가 오면 error 승격 검토)
+      [`${PLUGIN_NAME}/field-width-grade`]: "warn",
 
       // 앱 고유 치수(w-[280px])·일회성 값에는 임의 값이 정당하다. 필요한 팀만 켠다.
       [`${PLUGIN_NAME}/no-arbitrary-class`]: "off",
@@ -79,6 +83,7 @@ const strict = [
       [`${PLUGIN_NAME}/component-group-gap`]: "error",
       [`${PLUGIN_NAME}/table-numeric-align`]: "error",
       [`${PLUGIN_NAME}/require-locale-number`]: "error",
+      [`${PLUGIN_NAME}/field-width-grade`]: "error",
     },
   },
 ];

package/eslint/rules/field-width-grade.d.mts

@@ -0,0 +1,41 @@
+/**
+ * playground 의 실측 페이지(FieldWidthGradePage)가 규칙과 같은 계산을 쓰기 위한 타입 선언.
+ * 규칙 본체는 소비 앱이 그대로 실행하는 plain ESM 이라 .mjs 로 두고, 타입만 여기에 붙인다.
+ */
+
+export type FieldGrade = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FieldSize = 'sm' | 'md';
+
+export interface FieldComponentSpec {
+  /** 스키마 상한을 담는 prop — 숫자 필드는 maxLength 가 아니라 max 다 */
+  lengthProp: 'maxLength' | 'max';
+  font: Record<FieldSize, number>;
+  /** 글자가 쓸 수 없는 폭의 합 (좌우 패딩 · 테두리 · 스테퍼) */
+  chrome: Record<FieldSize, number>;
+  /** 한글이 들어갈 수 있는가 */
+  korean: boolean;
+  grades: FieldGrade[];
+}
+
+export declare const GRADES: Record<FieldGrade, number>;
+export declare const CHAR_RATIO: { narrow: number; wide: number };
+export declare const COMPONENTS: Record<string, FieldComponentSpec>;
+
+export declare function capacity(
+  spec: FieldComponentSpec,
+  size: FieldSize,
+  grade: FieldGrade,
+  ratio: number,
+  grades?: Record<FieldGrade, number>,
+): number;
+
+export declare function smallestGradeFor(
+  spec: FieldComponentSpec,
+  size: FieldSize,
+  len: number,
+  ratio: number,
+  grades?: Record<FieldGrade, number>,
+): FieldGrade | undefined;
+
+declare const rule: unknown;
+export default rule;

package/eslint/rules/field-width-grade.mjs

@@ -0,0 +1,294 @@
+/**
+ * 필드 폭을 `maxLength`(= 스키마 상한) 기준으로 고정했는지 검사한다.
+ *
+ * 확정 규칙 (design-feedback-final.md §1-2):
+ *   필드 너비는 maxLength 로 정한다.
+ *     - 상한이 등급 안에 들어오면 → 그 등급
+ *     - 상한이 등급 상한(xl)을 넘거나 상한이 없으면 → 행 전체 + 100%
+ *     - 셀렉트는 예외 (maxLength 개념이 없어 목록 최장값 기준) → 대상 아님
+ *
+ * 디자인팀이 요구한 "검수: maxLength ↔ 폭 등급 적합성 필수 확인" 을 자동화한 것이다.
+ * 사람이 하는 검수는 스키마가 나중에 확정되는 화면에서 빠지기 쉽다 —
+ * 시안 단계의 잠정 등급이 그대로 남아도 화면은 멀쩡해 보이기 때문이다.
+ *
+ * 대상이 아닌 것과 그 이유:
+ *   STextarea            여러 줄로 접히므로 maxLength 가 폭을 정하지 않는다
+ *   SSelect 계열         maxLength 개념이 없다 (§1-2 예외 — 목록 최장값 기준)
+ *   SDatePicker 계열     컴포넌트가 자체 상한을 갖는다 (B-14)
+ *
+ * ⚠️ 글자수 ↔ 등급 환산은 아직 디자인 확정본이 없어 토큰 값에서 계산한 잠정치다.
+ *    (폭 등급 자체도 B-8 토큰 도착 전이라 하드코딩이다 — 도착하면 GRADES 를 교체한다)
+ *    확정표가 오면 GRADES · CHAR_RATIO 를 그 값으로 바꾼다. 두 상수 모두 옵션으로 덮을 수 있다.
+ */
+
+/**
+ * 폭 등급 (px). design-feedback-final.md §2-10.
+ * B-8 토큰(`--cmp-field-width-*`)이 소스에 추가되면 scale.gen.mjs 를 거쳐 여기로 들어온다.
+ */
+export const GRADES = { xs: 80, sm: 120, md: 160, lg: 240, xl: 480 };
+
+/**
+ * 글자 하나가 차지하는 폭 (font-size 대비 비율).
+ *   narrow — 영문·숫자. "이 등급에 안 담긴다" 를 판정할 때 쓴다(가장 좁게 잡아도 넘치면 확실히 위반)
+ *   wide   — 한글(전각). "한 등급 작아도 된다" 를 판정할 때 쓴다(가장 넓게 잡아도 남으면 확실히 과하다)
+ * 두 판정 사이에는 아무것도 보고하지 않는 구간이 남는다 — 오탐보다 미탐을 택한 것이다.
+ */
+export const CHAR_RATIO = { narrow: 0.55, wide: 1 };
+
+/**
+ * 컴포넌트별 기하. chrome 은 글자가 쓸 수 없는 폭(좌우 패딩 · 테두리 · 스테퍼)의 합이고
+ * 전부 theme.css 토큰 값에서 계산했다.
+ *
+ *   SInput/SBarcodeInput  paddingX(12·16) × 2 + border 1 × 2
+ *   SNumberInput          스테퍼가 없으면 패딩이 두 배가 된다(SNumberInput.tsx:388) —
+ *                         없을 때 paddingX(6·8) × 2 × 2 + border,
+ *                         있을 때 paddingX × 2 + stepper(20·24) × 2 + gap(= paddingX) × 2 + border
+ *
+ * lengthProp   — 숫자 필드의 스키마 상한은 `maxLength` 가 아니라 `max` 다.
+ * korean       — 한글이 들어갈 수 있는가. false 면 두 판정 모두 narrow 로 계산한다.
+ * chromeStepper — `useButton` 일 때의 chrome. 기본값이 false 라 chrome 쪽이 기본이다.
+ */
+export const COMPONENTS = {
+  SInput: {
+    lengthProp: "maxLength",
+    font: { sm: 12, md: 14 },
+    chrome: { sm: 26, md: 34 },
+    korean: true,
+    grades: ["sm", "md", "lg", "xl"],
+  },
+  SBarcodeInput: {
+    lengthProp: "maxLength",
+    font: { sm: 12, md: 14 },
+    chrome: { sm: 26, md: 34 },
+    korean: false, // 바코드는 영숫자다
+    grades: ["sm", "md", "lg", "xl"],
+  },
+  SNumberInput: {
+    lengthProp: "max",
+    font: { sm: 12, md: 14 },
+    chrome: { sm: 26, md: 34 },
+    chromeStepper: { sm: 66, md: 82 },
+    korean: false,
+    grades: ["xs", "sm", "md", "lg", "xl"], // xs 는 숫자 필드 전용 등급이다
+  },
+};
+
+/**
+ * 등급이 담을 수 있는 글자수. playground 의 실측 페이지가 같은 식을 쓰도록 내보낸다
+ * (숫자를 두 곳에 적으면 한쪽만 고쳐져 검수가 무의미해진다).
+ */
+export function capacity(spec, size, grade, ratio, grades = GRADES) {
+  const usable = Math.max(0, grades[grade] - spec.chrome[size]);
+  return Math.floor(usable / (spec.font[size] * ratio));
+}
+
+/** 그 비율로 len 글자를 담을 수 있는 가장 작은 등급 (없으면 undefined) */
+export function smallestGradeFor(spec, size, len, ratio, grades = GRADES) {
+  return spec.grades.find(g => capacity(spec, size, g, ratio, grades) >= len);
+}
+
+/** JSX 속성 노드 */
+function attr(node, name) {
+  return node.attributes.find(a => a.type === "JSXAttribute" && a.name?.name === name);
+}
+
+/**
+ * 속성에서 리터럴 값을 꺼낸다.
+ *   없음        → undefined
+ *   리터럴      → 값
+ *   그 밖(변수) → null (판단 불가 — 조용히 넘긴다)
+ */
+function literal(node, name) {
+  const a = attr(node, name);
+  if (!a) return undefined;
+  const v = a.value;
+  if (!v) return true; // <SNumberInput useButton /> 같은 boolean shorthand 는 true 다
+  if (v.type === "Literal") return v.value;
+  if (v.type === "JSXExpressionContainer" && v.expression.type === "Literal") {
+    return v.expression.value;
+  }
+  return null;
+}
+
+/** `max={1000}` → 자릿수 4. 천단위 콤마도 폭을 먹으므로 함께 센다 */
+function digitsOf(max) {
+  const digits = String(Math.abs(Math.trunc(max))).length;
+  return digits + Math.floor((digits - 1) / 3);
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "필드 폭을 maxLength(스키마 상한) 기준 등급으로 고정",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          /** 폭 등급 px 재정의 — 디자인 확정본이 오면 여기로 덮는다 */
+          grades: { type: "object", additionalProperties: { type: "number" } },
+          /** 글자폭 비율 재정의 */
+          charRatio: {
+            type: "object",
+            properties: { narrow: { type: "number" }, wide: { type: "number" } },
+            additionalProperties: false,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      noGrade:
+        "`{{lengthProp}}={{len}}` 로 상한이 정해진 필드인데 `width` 가 없어 행 전체를 차지합니다. `width={{{suggestPx}}}`({{suggest}} 등급)으로 고정하세요. (§1-2)",
+      offGrade:
+        "`width={{{width}}}` 는 폭 등급이 아닙니다. {{gradeList}} 중 하나이거나, 상한이 없으면 `width=\"100%\"` 여야 합니다. (§1-2)",
+      noBound:
+        "`width` 로 폭을 고정했는데 `{{lengthProp}}` 이 없습니다. 폭의 근거가 스키마 상한이므로, 상한이 없으면 행 전체(`width=\"100%\"` 또는 생략)로 둡니다. (§1-2)",
+      tooNarrow:
+        "`{{lengthProp}}={{len}}` 이 {{grade}} 등급({{gradePx}}px)에 담기지 않습니다. `width={{{suggestPx}}}`({{suggest}} 등급) 이상이 필요합니다. (§1-2)",
+      tooWide:
+        "`{{lengthProp}}={{len}}` 은 {{suggest}} 등급({{suggestPx}}px)으로 충분한데 {{grade}} 등급({{gradePx}}px)을 주었습니다. 폭은 상한에 맞춥니다. (§1-2)",
+      overMax:
+        "`{{lengthProp}}={{len}}` 은 최대 등급 xl({{xl}}px)로도 담기지 않습니다. 행 전체(`width=\"100%\"`)로 둡니다. (§1-2)",
+      fullWidthBounded:
+        "`{{lengthProp}}={{len}}` 로 상한이 정해져 있으므로 `width=\"100%\"` 가 아니라 `width={{{suggestPx}}}`({{suggest}} 등급)로 고정합니다. 행 전체는 상한이 없거나 xl 을 넘을 때만 씁니다. (§1-2)",
+    },
+  },
+
+  create(context) {
+    const grades = { ...GRADES, ...(context.options[0]?.grades ?? {}) };
+    const ratio = { ...CHAR_RATIO, ...(context.options[0]?.charRatio ?? {}) };
+
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier") return;
+        const base = COMPONENTS[node.name.name];
+        if (!base) return;
+
+        // spread 가 있으면 width·maxLength 가 그 안에 있을 수 있어 판단하지 않는다
+        if (node.attributes.some(a => a.type === "JSXSpreadAttribute")) return;
+
+        const size = literal(node, "size") === "md" ? "md" : "sm";
+        // 스테퍼가 붙으면 글자가 쓸 수 있는 폭이 크게 줄어든다 (useButton 기본값은 false)
+        const spec = literal(node, "useButton") === true && base.chromeStepper
+          ? { ...base, chrome: base.chromeStepper }
+          : base;
+
+        const capacityAt = (grade, r) => capacity(spec, size, grade, r, grades);
+        const smallestFor = (len, r) => smallestGradeFor(spec, size, len, r, grades);
+
+        const narrow = ratio.narrow;
+        // 한글이 들어갈 수 없는 필드는 두 판정 모두 좁은 글자폭으로 계산한다
+        const wide = spec.korean ? ratio.wide : ratio.narrow;
+
+        const rawLen = literal(node, spec.lengthProp);
+        if (rawLen === null) return; // 변수로 넘긴 상한 — 판단 불가
+        const len =
+          rawLen === undefined
+            ? undefined
+            : spec.lengthProp === "max"
+              ? digitsOf(rawLen)
+              : rawLen;
+        if (len !== undefined && (!Number.isFinite(len) || len <= 0)) return;
+
+        const rawWidth = literal(node, "width");
+        if (rawWidth === null) return; // 변수로 넘긴 폭 — 판단 불가
+
+        const reportNode = attr(node, "width") ?? attr(node, spec.lengthProp) ?? node.name;
+        const gradeList = spec.grades.map(g => `${g}(${grades[g]})`).join(" · ");
+
+        /* ── width 가 없다 ── */
+        if (rawWidth === undefined) {
+          if (len === undefined) return; // 둘 다 없음 = 상한 없는 필드 → 행 전체가 맞다
+          const suggest = smallestFor(len, wide);
+          if (!suggest) return; // xl 로도 안 담긴다 → 행 전체가 맞다
+          context.report({
+            node: reportNode,
+            messageId: "noGrade",
+            data: { lengthProp: spec.lengthProp, len: rawLen, suggest, suggestPx: grades[suggest] },
+          });
+          return;
+        }
+
+        /* ── width="100%" ── */
+        if (rawWidth === "100%") {
+          if (len === undefined) return; // 상한 없음 + 행 전체 = 규칙대로다
+          const suggest = smallestFor(len, wide);
+          if (!suggest) return; // xl 초과 → 행 전체가 맞다
+          context.report({
+            node: reportNode,
+            messageId: "fullWidthBounded",
+            data: { lengthProp: spec.lengthProp, len: rawLen, suggest, suggestPx: grades[suggest] },
+          });
+          return;
+        }
+
+        /* ── width 가 등급 값인가 ── */
+        const px = typeof rawWidth === "number" ? rawWidth : /^(\d+)px$/.exec(String(rawWidth))?.[1];
+        const grade = px != null && spec.grades.find(g => grades[g] === Number(px));
+        if (!grade) {
+          context.report({
+            node: reportNode,
+            messageId: "offGrade",
+            data: { width: String(rawWidth), gradeList },
+          });
+          return;
+        }
+
+        /* ── 등급은 맞다. 상한과 맞는가 ── */
+        if (len === undefined) {
+          context.report({
+            node: reportNode,
+            messageId: "noBound",
+            data: { lengthProp: spec.lengthProp },
+          });
+          return;
+        }
+
+        // 영문·숫자로 채워도 넘치면 등급이 확실히 좁다
+        if (capacityAt(grade, narrow) < len) {
+          const suggest = smallestFor(len, narrow);
+          if (!suggest) {
+            context.report({
+              node: reportNode,
+              messageId: "overMax",
+              data: { lengthProp: spec.lengthProp, len: rawLen, xl: grades.xl },
+            });
+            return;
+          }
+          context.report({
+            node: reportNode,
+            messageId: "tooNarrow",
+            data: {
+              lengthProp: spec.lengthProp,
+              len: rawLen,
+              grade,
+              gradePx: grades[grade],
+              suggest,
+              suggestPx: grades[suggest],
+            },
+          });
+          return;
+        }
+
+        // 한글로 채워도 더 작은 등급에 들어가면 등급이 확실히 과하다
+        const enough = smallestFor(len, wide);
+        if (enough && grades[enough] < grades[grade]) {
+          context.report({
+            node: reportNode,
+            messageId: "tooWide",
+            data: {
+              lengthProp: spec.lengthProp,
+              len: rawLen,
+              grade,
+              gradePx: grades[grade],
+              suggest: enough,
+              suggestPx: grades[enough],
+            },
+          });
+        }
+      },
+    };
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.6",
+  "version": "9.0.0-beta.8",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [