sellmate-design-system-react 9.0.0-beta.2 → 9.0.0-beta.21

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;
@@ -893,6 +898,20 @@
   --cmp-datepicker-calendar-time-gap: 12px;
   --cmp-datepicker-calendar-time-section-gap: 12px;
   --cmp-datepicker-calendar-time-unit-gap: 2px;
+  --cmp-datepicker-mode-bg: #FFFFFF;
+  --cmp-datepicker-mode-radius: 4px;
+  --cmp-datepicker-mode-year-width: 120px;
+  --cmp-datepicker-mode-yearMonth-column-width: 64px;
+  --cmp-datepicker-mode-yearMonth-gap: 4px;
+  --cmp-datepicker-mode-item-paddingY: 4px;
+  --cmp-datepicker-mode-item-paddingX: 12px;
+  --cmp-datepicker-mode-item-gap: 8px;
+  --cmp-datepicker-mode-item-bg-default: #FFFFFF;
+  --cmp-datepicker-mode-item-bg-hover: #0075FF;
+  --cmp-datepicker-mode-item-content-default: #222222;
+  --cmp-datepicker-mode-item-content-hover: #FFFFFF;
+  --cmp-datepicker-mode-item-content-disabled: #888888;
+  --cmp-datepicker-mode-item-content-selected: #0075FF;
   --cmp-chip-height: 24px;
   --cmp-chip-paddingX: 8px;
   --cmp-chip-gap: 4px;
@@ -1224,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;
@@ -1383,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,8 @@ 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";
+import tableColumnWidth from "./rules/table-column-width.mjs";
 
 const PLUGIN_NAME = "sellmate";
 
@@ -24,6 +26,8 @@ const plugin = {
     "table-numeric-align": tableNumericAlign,
     "require-locale-number": requireLocaleNumber,
     "component-group-gap": componentGroupGap,
+    "field-width-grade": fieldWidthGrade,
+    "table-column-width": tableColumnWidth,
   },
 };
 
@@ -54,6 +58,10 @@ 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",
+      // 컬럼 폭 — 폭 미지정(기본 120px)·스페이서 오용은 권고, % · clamp() 는 조용히 깨지므로 error
+      [`${PLUGIN_NAME}/table-column-width`]: "warn",
 
       // 앱 고유 치수(w-[280px])·일회성 값에는 임의 값이 정당하다. 필요한 팀만 켠다.
       [`${PLUGIN_NAME}/no-arbitrary-class`]: "off",
@@ -79,6 +87,8 @@ 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",
+      [`${PLUGIN_NAME}/table-column-width`]: "error",
     },
   },
 ];

package/eslint/lib/table-column.mjs

@@ -73,6 +73,32 @@ export function literalString(node) {
     : undefined;
 }
 
+/**
+ * STableColumn 자리인지 — `asColumn` 보다 넓게, 값을 그리지 않는 스페이서 열까지 본다.
+ *
+ * `name` · `label` 만으로는 판정하지 않는다. 소비 앱의 검색 필터 필드·상세 모달 키-값 필드가
+ * 정확히 같은 모양(`{ name, label, type, ... }`)이라, 그것만 보면 잡히는 것의 대부분이 표와
+ * 무관한 객체가 된다 — 실측에서 265건 중 261건이 오탐이었다.
+ *
+ * 그래서 `STableColumn` 타입의 판별 유니온을 그대로 옮긴다 — 값을 그리는 열은 `field` 를,
+ * 값을 그리지 않는 스페이서 열은 `autoWidth` 를 반드시 갖는다. 둘 다 없으면 컬럼이 아니다.
+ * 폭 규칙이 봐야 하는 스페이서 열은 `autoWidth` 쪽으로 그대로 들어온다.
+ *
+ * 놓치는 것: `{ ...base, name, label }` 처럼 `field` 가 스프레드로 들어오는 컬럼. 정적으로는
+ * 검색 필터 필드와 구분되지 않아 보고하지 않는다 (`asColumn` 을 쓰는 다른 두 규칙과 같은 한계).
+ * @returns {{ nameProp, labelProp, columnName: string | undefined } | null}
+ */
+export function asColumnShape(node) {
+  const nameProp = prop(node, "name");
+  const labelProp = prop(node, "label");
+  if (!nameProp || !labelProp) return null;
+  if (!prop(node, "field") && !prop(node, "autoWidth")) return null;
+  // name 이 문자열 리터럴이 아니면 컬럼 정의로 단정하지 않는다 (일반 객체 오탐 방지)
+  const columnName = literalString(nameProp);
+  if (columnName === undefined) return null;
+  return { nameProp, labelProp, columnName };
+}
+
 /**
  * STableColumn 형태인지 — name·label·field 셋을 모두 가진 객체만 컬럼으로 본다.
  * @returns {{ nameProp, labelProp, label: string } | null}

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,311 @@
+/**
+ * 필드 폭을 `maxLength`(= 스키마 상한) 기준으로 고정했는지 검사한다.
+ *
+ * 확정 규칙 (design-feedback-final.md §1-2):
+ *   필드 너비는 maxLength 로 정한다.
+ *     - 상한이 등급 안에 들어오면 → 그 등급
+ *     - 상한이 등급 상한(xl)을 넘거나 상한이 없으면 → 행 전체 + 100%
+ *     - 셀렉트는 예외 (maxLength 개념이 없어 목록 최장값 기준) → 대상 아님
+ *
+ * 디자인팀이 요구한 "검수: maxLength ↔ 폭 등급 적합성 필수 확인" 을 자동화한 것이다.
+ * 사람이 하는 검수는 스키마가 나중에 확정되는 화면에서 빠지기 쉽다 —
+ * 시안 단계의 잠정 등급이 그대로 남아도 화면은 멀쩡해 보이기 때문이다.
+ *
+ * 대상이 아닌 것과 그 이유:
+ *   STextarea            여러 줄로 접히므로 maxLength 가 폭을 정하지 않는다
+ *   SSelect 계열         maxLength 개념이 없다 (§1-2 예외 — 목록 최장값 기준)
+ *   SDatePicker 계열     컴포넌트가 자체 상한을 갖는다 (B-14)
+ *
+ * ⚠️ 글자수 ↔ 등급 환산은 아직 디자인 확정본이 없어 토큰 값에서 계산한 잠정치다.
+ *    확정표가 오면 CHAR_RATIO 를 그 값으로 바꾼다. GRADES · CHAR_RATIO 모두 옵션으로 덮을 수 있다.
+ */
+import { FIELD_WIDTHS } from "../scale.gen.mjs";
+
+/**
+ * 폭 등급 (px). `--cmp-field-width-*` 토큰에서 scale.gen.mjs 를 거쳐 들어온다 —
+ * 컴포넌트(`SFieldWidth`)와 이 규칙이 같은 소스를 본다. 여기에 숫자를 적지 않는다.
+ */
+export const GRADES = FIELD_WIDTHS;
+
+/**
+ * 글자 하나가 차지하는 폭 (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(스키마 상한) 기준 등급으로 고정",
+    },
+    // px → 등급 이름 치환만 자동으로 고친다. 등급 선택 자체는 스키마를 봐야 하므로 손대지 않는다.
+    fixable: "code",
+    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=\"{{suggest}}\"`({{suggestPx}}px) 등급으로 고정하세요. (§1-2)",
+      offGrade:
+        "`width={{{width}}}` 는 폭 등급이 아닙니다. {{gradeList}} 중 하나이거나, 상한이 없으면 `width=\"100%\"` 여야 합니다. (§1-2)",
+      pxGrade:
+        "`width={{{width}}}` 는 {{grade}} 등급의 px 값입니다. `width=\"{{grade}}\"` 로 등급을 주세요 — px 를 박으면 `--cmp-field-width-*` 가 바뀌어도 이 화면만 그 자리에 남습니다. (§1-2)",
+      noBound:
+        "`width` 로 폭을 고정했는데 `{{lengthProp}}` 이 없습니다. 폭의 근거가 스키마 상한이므로, 상한이 없으면 행 전체(`width=\"100%\"` 또는 생략)로 둡니다. (§1-2)",
+      tooNarrow:
+        "`{{lengthProp}}={{len}}` 이 {{grade}} 등급({{gradePx}}px)에 담기지 않습니다. `width=\"{{suggest}}\"`({{suggestPx}}px) 이상이 필요합니다. (§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=\"{{suggest}}\"`({{suggestPx}}px) 등급으로 고정합니다. 행 전체는 상한이 없거나 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 가 등급인가 ── */
+        // 등급 이름이 정답이다. px 는 등급 값과 일치할 때만 받아 주고(아래 pxGrade) 등급으로 바꾸게 한다.
+        const byName = spec.grades.includes(rawWidth);
+        const px = typeof rawWidth === "number" ? rawWidth : /^(\d+)px$/.exec(String(rawWidth))?.[1];
+        const grade = byName ? rawWidth : 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],
+            },
+          });
+          return;
+        }
+
+        // 등급도 상한도 맞다. 남은 것은 표기 — px 는 토큰을 따라가지 않으므로 등급 이름으로 바꾼다.
+        if (!byName) {
+          context.report({
+            node: reportNode,
+            messageId: "pxGrade",
+            data: { width: String(rawWidth), grade },
+            fix: fixer => fixer.replaceText(reportNode, `width="${grade}"`),
+          });
+        }
+      },
+    };
+  },
+};

package/eslint/rules/table-column-width.mjs

@@ -0,0 +1,110 @@
+/**
+ * `STableColumn` 의 폭 선언을 검사한다.
+ *
+ * 테이블은 `table-fixed` 라 컬럼 폭이 `<colgroup>` 의 `<col width>` 로 들어간다.
+ * 그래서 폭에 넣을 수 있는 값은 px 뿐이고, 그 밖의 값은 **화면에서 조용히 어긋난다** —
+ * `'30%'` 는 `parseInt` 에 30(px)으로 읽히고, `clamp()` 같은 함수형 값은 NaN 이 되어
+ * `<col>` 폭이 통째로 무효가 된 뒤 auto 로 떨어진다. 둘 다 에러 없이 화면만 틀어진다.
+ *
+ * 그리고 폭을 아예 주지 않으면 기본 120px 이 조용히 들어간다. "짧은 열이라 그대로 둔 것"과
+ * "판단을 빠뜨린 것"이 구분되지 않으므로, 120px 이 맞더라도 `width: 120` 을 적는 편이 낫다.
+ *
+ * `autoWidth` 는 남은 폭을 흡수하는 스페이서 열 하나에 쓰는 것이라, 값을 그리는 열
+ * (`render` · `format` 이 붙은 열)에 주면 폭이 다른 열에 좌우돼 화면마다 달라진다.
+ *
+ * 대상은 `name`(문자열 리터럴) · `label` 에 더해 `field` 또는 `autoWidth` 를 가진 객체 리터럴이다.
+ * `STableColumn` 타입이 값을 그리는 열에는 `field` 를, 스페이서 열에는 `autoWidth` 를 요구하므로
+ * 검사 범위는 그대로이면서, 같은 모양(`name` + `label`)인 검색 필터 필드가 걸리지 않는다.
+ *
+ * AGENTS.md §3-4.
+ */
+
+import { prop, asColumnShape } from "../lib/table-column.mjs";
+
+/** px 로 읽히는 폭 값인가 — 숫자 리터럴 또는 `'120px'` */
+function pxWidth(valueNode) {
+  if (!valueNode) return undefined;
+  if (valueNode.type === "Literal" && typeof valueNode.value === "number") return valueNode.value;
+  if (valueNode.type === "Literal" && typeof valueNode.value === "string") {
+    const m = /^\s*(\d+)px\s*$/.exec(valueNode.value);
+    return m ? Number(m[1]) : undefined;
+  }
+  return undefined;
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "테이블 컬럼 폭은 px 로만 주고, autoWidth 는 스페이서 열에만 쓴다",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          /** 검사에서 뺄 컬럼 name */
+          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      noWidth:
+        "컬럼 `{{name}}` 에 `width` 도 `autoWidth` 도 없어 기본 120px 이 조용히 들어갑니다. 120px 이 맞더라도 `width: 120` 으로 적어 판단한 값임을 남기세요. (AGENTS.md §3-4)",
+      badWidth:
+        "컬럼 `{{name}}` 의 `width: {{width}}` 는 px 이 아닙니다. 컬럼 폭은 `<col width>` 로 들어가 % · clamp() · min() 은 계산되지 않고 조용히 깨집니다 — `width: 120` 또는 `'120px'` 로 주세요. (AGENTS.md §3-4)",
+      autoWidthWithContent:
+        "컬럼 `{{name}}` 은 `{{contentProp}}` 로 값을 그리는데 `autoWidth` 입니다. `autoWidth` 는 남은 폭을 흡수하는 스페이서 열 하나에만 씁니다 — 값이 들어가는 열은 폭이 다른 열에 좌우돼 화면마다 달라집니다. px 로 폭을 명시하세요. (AGENTS.md §3-4)",
+    },
+  },
+
+  create(context) {
+    const allow = new Set(context.options[0]?.allow ?? []);
+
+    return {
+      ObjectExpression(node) {
+        const column = asColumnShape(node);
+        if (!column) return;
+        const { columnName } = column;
+        if (allow.has(columnName)) return;
+
+        const widthProp = prop(node, "width");
+        const autoWidthProp = prop(node, "autoWidth");
+        // autoWidth 를 변수로 넘기면 켜졌는지 알 수 없다 — 판단하지 않는다
+        const autoWidthValue = autoWidthProp?.value;
+        if (autoWidthProp && autoWidthValue?.type !== "Literal") return;
+        const autoWidth = autoWidthValue?.value === true;
+
+        if (autoWidth) {
+          const contentProp = prop(node, "render") ?? prop(node, "format");
+          if (contentProp) {
+            context.report({
+              node: autoWidthProp,
+              messageId: "autoWidthWithContent",
+              data: {
+                name: columnName,
+                contentProp: contentProp.key.name ?? contentProp.key.value,
+              },
+            });
+          }
+          return;
+        }
+
+        if (!widthProp) {
+          context.report({ node: column.nameProp, messageId: "noWidth", data: { name: columnName } });
+          return;
+        }
+
+        // 변수·계산식으로 넘긴 폭은 정적으로 알 수 없다
+        if (widthProp.value.type !== "Literal") return;
+        if (pxWidth(widthProp.value) === undefined) {
+          context.report({
+            node: widthProp,
+            messageId: "badWidth",
+            data: { name: columnName, width: context.sourceCode.getText(widthProp.value) },
+          });
+        }
+      },
+    };
+  },
+};

package/eslint/scale.gen.mjs

@@ -14,3 +14,6 @@ export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-bo
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
 export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+
+/** 필드 폭 등급 (px). SFieldWidth 의 'xs'|'sm'|'md'|'lg'|'xl' 이 풀리는 값이다 */
+export const FIELD_WIDTHS = {"xs":80,"sm":120,"md":160,"lg":240,"xl":480};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.2",
+  "version": "9.0.0-beta.21",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -88,6 +88,18 @@
     "@radix-ui/react-popover": "^1.1.18",
     "@radix-ui/react-switch": "^1.3.2",
     "@radix-ui/react-tooltip": "^1.2.11",
+    "@tiptap/core": "^3.30.2",
+    "@tiptap/extension-highlight": "^3.30.2",
+    "@tiptap/extension-image": "^3.30.2",
+    "@tiptap/extension-list": "^3.30.2",
+    "@tiptap/extension-subscript": "^3.30.2",
+    "@tiptap/extension-superscript": "^3.30.2",
+    "@tiptap/extension-text-align": "^3.30.2",
+    "@tiptap/extension-text-style": "^3.30.2",
+    "@tiptap/extension-typography": "^3.30.2",
+    "@tiptap/extensions": "^3.30.2",
+    "@tiptap/react": "^3.30.2",
+    "@tiptap/starter-kit": "^3.30.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.0.2"