sellmate-design-system-react 9.0.0-beta.0 → 9.0.0-beta.100

package/eslint/rules/no-off-scale-spacing.mjs

@@ -16,51 +16,70 @@
  *
  * AGENTS.md §2-2.
  */
-import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
-import { SPACING } from "../scale.gen.mjs";
+import { collectClassTokens, stripVariants, stripModifiers } from '../lib/class-names.mjs';
+import { SPACING } from '../scale.gen.mjs';
 
 /** 값이 순수하게 간격 스케일에서 오는 유틸리티 접두어만 대상으로 한다 */
 const SPACING_PREFIXES = [
-  "gap-x", "gap-y", "gap",
-  "space-x", "space-y",
-  "px", "py", "pt", "pr", "pb", "pl", "ps", "pe", "p",
-  "mx", "my", "mt", "mr", "mb", "ml", "ms", "me", "m",
+  'gap-x',
+  'gap-y',
+  'gap',
+  'space-x',
+  'space-y',
+  'px',
+  'py',
+  'pt',
+  'pr',
+  'pb',
+  'pl',
+  'ps',
+  'pe',
+  'p',
+  'mx',
+  'my',
+  'mt',
+  'mr',
+  'mb',
+  'ml',
+  'ms',
+  'me',
+  'm',
 ];
 
 const ALLOWED = new Set([0, ...SPACING]);
 const MAX = Math.max(...SPACING);
 
 /** Tailwind 기본 스케일에서 `p-<n>` 이 실제로 만드는 px (`--spacing` = 0.25rem) */
-const RENDERED_PX = (value) => value * 4;
+const RENDERED_PX = value => value * 4;
 
-const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
 /**
  * 토큰 시작 경계 — 앞은 공백이거나 문자열 따옴표(= 문자열의 시작)여야 한다.
  * `(?<![\w-])` 만 쓰면 `md:p-4 p-4` 에서 `p-4` 를 찾을 때 variant 안쪽(`md:` 뒤)이
  * 먼저 걸려 엉뚱한 클래스를 고친다.
  */
-const TOKEN_START = "(?<![^\\s'\"`])";
+const TOKEN_START = '(?<![^\\s\'"`])';
 
 export default {
   meta: {
-    type: "problem",
+    type: 'problem',
     docs: {
-      description: "간격 유틸리티는 sd- 접두가 붙은 토큰 스케일 값만 사용",
+      description: '간격 유틸리티는 sd- 접두가 붙은 토큰 스케일 값만 사용',
     },
     // 스케일 밖 값(`gap-sd-13`)에는 fix 를 내지 않는다. `unsafeFix` 를 켠 팀의
     // 접두 누락 수정에만 쓰이지만, 선언은 정적이어야 하므로 여기 남는다.
-    fixable: "code",
+    fixable: 'code',
     hasSuggestions: true,
     schema: [
       {
-        type: "object",
+        type: 'object',
         properties: {
           /**
            * 접두 없는 간격 유틸리티(`p-16`)도 잡는다. 기본 false.
            * 기본값에서는 두 해석(`p-sd-16` = 16px / 현재 값 유지)을 제안으로만 낸다.
            */
-          requirePrefix: { type: "boolean" },
+          requirePrefix: { type: 'boolean' },
           /**
            * 접두 누락을 "클래스의 숫자 = px" 로 단정하고 `p-16` → `p-sd-16` 자동 수정한다.
            *
@@ -68,27 +87,27 @@ export default {
            * 켜면 여백이 1/4 로 줄어든다. 이전 버전의 디자인 시스템 스케일을 쓰던 앱을
            * 한 번에 옮길 때만 켜고, 마이그레이션이 끝나면 다시 끈다.
            */
-          unsafeFix: { type: "boolean" },
+          unsafeFix: { type: 'boolean' },
         },
         additionalProperties: false,
       },
     ],
     messages: {
       offScale:
-        "`{{token}}` 의 {{value}} 는 간격 스케일에 없어 스타일이 적용되지 않습니다. 가까운 값: {{nearest}}. (AGENTS.md §2-2)",
+        '`{{token}}` 의 {{value}} 는 간격 스케일에 없어 스타일이 적용되지 않습니다. 가까운 값: {{nearest}}. (AGENTS.md §2-2)',
       // 접두 누락 — 어느 해석이 스케일에 있느냐로 갈린다.
       // `p-16` 은 지금 64px 이므로 "16px 의도" 와 "64px 유지" 가 서로 다른 결과다.
       missingPrefixBoth:
-        "`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{value}}px 을 의도했다면 → `{{asLiteral}}` · {{actual}}px 을 유지하려면 → `{{asRendered}}` (AGENTS.md §2-2)",
+        '`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{value}}px 을 의도했다면 → `{{asLiteral}}` · {{actual}}px 을 유지하려면 → `{{asRendered}}` (AGENTS.md §2-2)',
       missingPrefixLiteral:
-        "`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{value}}px 을 의도했다면 → `{{asLiteral}}`. {{actual}}px 유지는 간격 스케일에 값이 없습니다. {{fallback}} (AGENTS.md §2-2)",
+        '`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{value}}px 을 의도했다면 → `{{asLiteral}}`. {{actual}}px 유지는 간격 스케일에 값이 없습니다. {{fallback}} (AGENTS.md §2-2)',
       missingPrefixRendered:
-        "`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{actual}}px 을 유지하려면 → `{{asRendered}}`. {{value}}px 은 간격 스케일에 없습니다. (AGENTS.md §2-2)",
+        '`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{actual}}px 을 유지하려면 → `{{asRendered}}`. {{value}}px 은 간격 스케일에 없습니다. (AGENTS.md §2-2)',
       missingPrefixNone:
-        "`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{value}}px·{{actual}}px 둘 다 간격 스케일에 없습니다. {{fallback}} (AGENTS.md §2-2)",
+        '`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{value}}px·{{actual}}px 둘 다 간격 스케일에 없습니다. {{fallback}} (AGENTS.md §2-2)',
       // 제안(suggestion) 설명 — 편집기 목록에 그대로 뜬다
-      useLiteral: "`{{to}}` 적용 — 숫자를 px 로 해석 ({{actual}}px → {{value}}px, 여백이 바뀝니다)",
-      useRendered: "`{{to}}` 적용 — 현재 {{actual}}px 유지",
+      useLiteral: '`{{to}}` 적용 — 숫자를 px 로 해석 ({{actual}}px → {{value}}px, 여백이 바뀝니다)',
+      useRendered: '`{{to}}` 적용 — 현재 {{actual}}px 유지',
     },
   },
 
@@ -98,7 +117,7 @@ export default {
     const unsafeFix = context.options[0]?.unsafeFix ?? false;
 
     /** 토큰 문자열을 소스에서 찾아 치환하는 fixer (없으면 null) */
-    const replaceToken = (valueNode, token, fixed) => (fixer) => {
+    const replaceToken = (valueNode, token, fixed) => fixer => {
       const text = sourceCode.getText(valueNode);
       const idx = text.search(new RegExp(`${TOKEN_START}${escapeRegExp(token)}(?![\\w-])`));
       if (idx === -1) return null;
@@ -107,14 +126,17 @@ export default {
     };
 
     /** 스케일을 value 와의 거리순으로 (동률이면 작은 값 먼저) */
-    const byDistance = (value) =>
+    const byDistance = value =>
       [...ALLOWED].sort((a, b) => Math.abs(a - value) - Math.abs(b - value) || a - b);
 
     /** 가장 가까운 값 하나 — 거리순 배열을 다시 정렬하면 안 된다 (64 → 62 지 60 이 아니다) */
-    const nearestOne = (value) => byDistance(value)[0];
+    const nearestOne = value => byDistance(value)[0];
 
     /** 스케일에서 value 에 가장 가까운 값 두 개 (표시용이라 오름차순) */
-    const nearestOf = (value) => byDistance(value).slice(0, 2).sort((a, b) => a - b);
+    const nearestOf = value =>
+      byDistance(value)
+        .slice(0, 2)
+        .sort((a, b) => a - b);
 
     /**
      * 대응 토큰이 없을 때의 안내. 기준은 클래스에 적힌 숫자가 아니라 **실제 렌더 px** 다.
@@ -133,7 +155,7 @@ export default {
         for (const { token, node: valueNode } of collectClassTokens(node)) {
           const util = stripModifiers(stripVariants(token));
 
-          const prefix = SPACING_PREFIXES.find((p) => util.startsWith(`${p}-`));
+          const prefix = SPACING_PREFIXES.find(p => util.startsWith(`${p}-`));
           if (!prefix) continue;
 
           const raw = util.slice(prefix.length + 1);
@@ -150,7 +172,7 @@ export default {
 
             const rendered = RENDERED_PX(value);
             /** `md:p-4` → `md:p-sd-16` — variant·부호 접두는 그대로 두고 뒤만 갈아낀다 */
-            const rewrite = (px) =>
+            const rewrite = px =>
               token.replace(
                 new RegExp(`${escapeRegExp(`${prefix}-${raw}`)}$`),
                 `${prefix}-sd-${px}`,
@@ -165,22 +187,22 @@ export default {
               token,
               value: raw,
               actual: String(rendered),
-              asLiteral: asLiteral ?? "",
-              asRendered: asRendered ?? "",
+              asLiteral: asLiteral ?? '',
+              asRendered: asRendered ?? '',
               fallback: fallbackFor(prefix, rendered),
             };
 
             const suggest = [];
             if (asLiteral) {
               suggest.push({
-                messageId: "useLiteral",
+                messageId: 'useLiteral',
                 data: { to: asLiteral, actual: String(rendered), value: raw },
                 fix: replaceToken(valueNode, token, asLiteral),
               });
             }
             if (asRendered) {
               suggest.push({
-                messageId: "useRendered",
+                messageId: 'useRendered',
                 data: { to: asRendered, actual: String(rendered) },
                 fix: replaceToken(valueNode, token, asRendered),
               });
@@ -188,11 +210,11 @@ export default {
 
             const messageId = asLiteral
               ? asRendered
-                ? "missingPrefixBoth"
-                : "missingPrefixLiteral"
+                ? 'missingPrefixBoth'
+                : 'missingPrefixLiteral'
               : asRendered
-                ? "missingPrefixRendered"
-                : "missingPrefixNone";
+                ? 'missingPrefixRendered'
+                : 'missingPrefixNone';
 
             context.report({
               node: valueNode,
@@ -200,9 +222,7 @@ export default {
               data,
               suggest,
               // 마이그레이션용 옵트인 — "숫자 = px" 를 단정하므로 여백 값이 바뀐다
-              ...(unsafeFix && asLiteral
-                ? { fix: replaceToken(valueNode, token, asLiteral) }
-                : {}),
+              ...(unsafeFix && asLiteral ? { fix: replaceToken(valueNode, token, asLiteral) } : {}),
             });
             continue;
           }
@@ -212,8 +232,8 @@ export default {
 
           context.report({
             node: valueNode,
-            messageId: "offScale",
-            data: { token, value: String(value), nearest: nearestOf(value).join(" / ") },
+            messageId: 'offScale',
+            data: { token, value: String(value), nearest: nearestOf(value).join(' / ') },
           });
         }
       },

package/eslint/rules/no-raw-html-control.mjs

@@ -7,17 +7,17 @@
  * 기본 대상 — 대응 컴포넌트가 명확해 오탐 여지가 거의 없는 요소.
  */
 const REPLACEMENTS = {
-  button: "SButton / SGhostButton / SDropdownButton / STextLink",
-  input: "SInput / SNumberInput / SCheckbox / SRadio / SFilePicker",
-  select: "SSelect",
-  textarea: "STextarea",
-  table: "STable / SKeyValueTable",
-  form: "SForm",
-  dialog: "SModal.create(...) / SModal.confirm(...) / SPopup",
-  hr: "SDivider",
-  details: "SExpansionItem",
-  summary: "SExpansionItem",
-  progress: "SLinearProgress / SCircleProgress",
+  button: 'SButton / SGhostButton / SDropdownButton / STextLink',
+  input: 'SInput / SNumberInput / SCheckbox / SRadio / SFilePicker',
+  select: 'SSelect',
+  textarea: 'STextarea',
+  table: 'STable / SKeyValueTable',
+  form: 'SForm',
+  dialog: 'SModal.create(...) / SModal.confirm(...) / SPopup',
+  hr: 'SDivider',
+  details: 'SExpansionItem',
+  summary: 'SExpansionItem',
+  progress: 'SLinearProgress / SCircleProgress',
 };
 
 /**
@@ -27,53 +27,51 @@ const REPLACEMENTS = {
  *  - label : DS 밖 컨트롤의 접근성 레이블
  */
 const STRICT_REPLACEMENTS = {
-  ul: "SList + SListItem",
-  ol: "SList + SListItem",
-  li: "SListItem",
-  svg: "SIcon",
-  label: "SField 의 label prop",
+  ul: 'SList + SListItem',
+  ol: 'SList + SListItem',
+  li: 'SListItem',
+  svg: 'SIcon',
+  label: 'SField 의 label prop',
 };
 
 /** 시각 요소가 없어 대체 컴포넌트가 없는 input 타입 */
-const EXEMPT_INPUT_TYPES = new Set(["hidden"]);
+const EXEMPT_INPUT_TYPES = new Set(['hidden']);
 
 /** JSX 속성에서 리터럴 문자열 값을 읽는다 (동적 값이면 undefined) */
 function literalAttr(node, name) {
-  const attr = node.attributes.find(
-    (a) => a.type === "JSXAttribute" && a.name?.name === name,
-  );
+  const attr = node.attributes.find(a => a.type === 'JSXAttribute' && a.name?.name === name);
   const v = attr?.value;
-  if (v?.type === "Literal" && typeof v.value === "string") return v.value;
+  if (v?.type === 'Literal' && typeof v.value === 'string') return v.value;
   return undefined;
 }
 
 /** 전역 함수 → 권장 대체 */
 const GLOBAL_CALLS = {
-  alert: "SToast / SModal.confirm(...)",
-  confirm: "SModal.confirm(...)",
+  alert: 'SToast / SModal.confirm(...)',
+  confirm: 'SModal.confirm(...)',
 };
 
 export default {
   meta: {
-    type: "problem",
+    type: 'problem',
     docs: {
-      description: "디자인 시스템 컴포넌트가 있는 생 HTML 컨트롤 사용 금지",
+      description: '디자인 시스템 컴포넌트가 있는 생 HTML 컨트롤 사용 금지',
     },
     schema: [
       {
-        type: "object",
+        type: 'object',
         properties: {
           /** 예외로 허용할 요소명 (예: 로고용 svg) */
-          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+          allow: { type: 'array', items: { type: 'string' }, uniqueItems: true },
           /** ul·ol·li·svg·label 까지 검사 (정당한 사용처가 있어 기본은 off) */
-          strict: { type: "boolean" },
+          strict: { type: 'boolean' },
         },
         additionalProperties: false,
       },
     ],
     messages: {
-      rawElement: "<{{name}}> 대신 {{replacement}} 를 사용하세요. (AGENTS.md §1-1)",
-      rawCall: "{{name}}() 대신 {{replacement}} 를 사용하세요. (AGENTS.md §1-1)",
+      rawElement: '<{{name}}> 대신 {{replacement}} 를 사용하세요. (AGENTS.md §1-1)',
+      rawCall: '{{name}}() 대신 {{replacement}} 를 사용하세요. (AGENTS.md §1-1)',
     },
   },
 
@@ -86,7 +84,7 @@ export default {
 
     return {
       JSXOpeningElement(node) {
-        if (node.name.type !== "JSXIdentifier") return;
+        if (node.name.type !== 'JSXIdentifier') return;
         const name = node.name.name;
         // 컴포넌트(대문자 시작)는 대상이 아니다
         if (name[0] !== name[0].toLowerCase()) return;
@@ -96,21 +94,25 @@ export default {
         if (!replacement) return;
 
         // <input type="hidden"> 처럼 시각 요소가 없는 경우는 대체 컴포넌트가 없다
-        if (name === "input" && EXEMPT_INPUT_TYPES.has(literalAttr(node, "type"))) return;
+        if (name === 'input' && EXEMPT_INPUT_TYPES.has(literalAttr(node, 'type'))) return;
 
-        context.report({ node: node.name, messageId: "rawElement", data: { name, replacement } });
+        context.report({ node: node.name, messageId: 'rawElement', data: { name, replacement } });
       },
 
       CallExpression(node) {
-        if (node.callee.type !== "Identifier") return;
+        if (node.callee.type !== 'Identifier') return;
         const name = node.callee.name;
         const replacement = GLOBAL_CALLS[name];
         if (!replacement) return;
         // 지역 선언(사용자가 만든 confirm 등)은 제외
-        if (context.sourceCode.getScope(node).references.some((r) => r.identifier === node.callee && r.resolved)) {
+        if (
+          context.sourceCode
+            .getScope(node)
+            .references.some(r => r.identifier === node.callee && r.resolved)
+        ) {
           return;
         }
-        context.report({ node, messageId: "rawCall", data: { name, replacement } });
+        context.report({ node, messageId: 'rawCall', data: { name, replacement } });
       },
     };
   },

package/eslint/rules/prefer-typo-preset.mjs

@@ -4,12 +4,19 @@
  *
  * AGENTS.md §1-3 / §2-1.
  */
-import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
-import { TEXT_SIZES, TYPO_PRESETS } from "../scale.gen.mjs";
+import { collectClassTokens, stripVariants, stripModifiers } from '../lib/class-names.mjs';
+import { TEXT_SIZES, TYPO_PRESETS } from '../scale.gen.mjs';
 
 const FONT_WEIGHTS = new Set([
-  "font-thin", "font-extralight", "font-light", "font-normal", "font-medium",
-  "font-semibold", "font-bold", "font-extrabold", "font-black",
+  'font-thin',
+  'font-extralight',
+  'font-light',
+  'font-normal',
+  'font-medium',
+  'font-semibold',
+  'font-bold',
+  'font-extrabold',
+  'font-black',
 ]);
 
 const TEXT_SIZE_SET = new Set(TEXT_SIZES.map(String));
@@ -17,27 +24,26 @@ const TEXT_SIZE_SET = new Set(TEXT_SIZES.map(String));
 /** 자주 쓰는 조합에 대한 추천 프리셋 (없으면 일반 안내) */
 function suggest(size) {
   const byRole = {
-    12: "typo-body-sm-*",
-    14: "typo-body-md-* / typo-heading-sm",
-    16: "typo-body-lg-* / typo-heading-md",
-    18: "typo-heading-lg",
-    11: "typo-body-xs-default",
+    12: 'typo-body-sm-*',
+    14: 'typo-body-md-* / typo-heading-sm',
+    16: 'typo-body-lg-* / typo-heading-md',
+    18: 'typo-heading-lg',
+    11: 'typo-body-xs-*',
   };
-  return byRole[size] ?? "typo-*";
+  return byRole[size] ?? 'typo-*';
 }
 
 export default {
   meta: {
-    type: "suggestion",
+    type: 'suggestion',
     docs: {
-      description: "폰트 크기·굵기 낱개 조합 대신 typo-* 프리셋 사용",
+      description: '폰트 크기·굵기 낱개 조합 대신 typo-* 프리셋 사용',
     },
     schema: [],
     messages: {
-      fontSize:
-        "`{{token}}` 대신 타이포그래피 프리셋을 쓰세요 — {{suggestion}}. (AGENTS.md §2-1)",
+      fontSize: '`{{token}}` 대신 타이포그래피 프리셋을 쓰세요 — {{suggestion}}. (AGENTS.md §2-1)',
       fontWeight:
-        "`{{token}}` 을 단독으로 쓰지 말고 굵기가 포함된 typo-* 프리셋을 쓰세요. (AGENTS.md §2-1)",
+        '`{{token}}` 을 단독으로 쓰지 말고 굵기가 포함된 typo-* 프리셋을 쓰세요. (AGENTS.md §2-1)',
     },
   },
 
@@ -57,14 +63,14 @@ export default {
           if (sizeMatch && TEXT_SIZE_SET.has(sizeMatch[1])) {
             context.report({
               node: valueNode,
-              messageId: "fontSize",
+              messageId: 'fontSize',
               data: { token, suggestion: suggest(Number(sizeMatch[1])) },
             });
             continue;
           }
 
           if (!hasPreset && FONT_WEIGHTS.has(util)) {
-            context.report({ node: valueNode, messageId: "fontWeight", data: { token } });
+            context.report({ node: valueNode, messageId: 'fontWeight', data: { token } });
           }
         }
       },

package/eslint/rules/require-locale-number.mjs

@@ -7,34 +7,29 @@
  *
  * AGENTS.md §1-4 / §3-4.
  */
-import {
-  NUMERIC_LABEL,
-  isNonQuantityLabel,
-  prop,
-  asColumn,
-} from "../lib/table-column.mjs";
+import { NUMERIC_LABEL, isNonQuantityLabel, prop, asColumn } from '../lib/table-column.mjs';
 
 export default {
   meta: {
-    type: "problem",
+    type: 'problem',
     docs: {
-      description: "금액·수량 등 숫자 표시에 toLocaleString 사용",
+      description: '금액·수량 등 숫자 표시에 toLocaleString 사용',
     },
     schema: [
       {
-        type: "object",
+        type: 'object',
         properties: {
           /** 검사에서 뺄 컬럼 name */
-          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+          allow: { type: 'array', items: { type: 'string' }, uniqueItems: true },
         },
         additionalProperties: false,
       },
     ],
     messages: {
       missingFormat:
-        "숫자 컬럼 `{{label}}` 에 format 이 없습니다. `format: (v) => `${Number(v).toLocaleString()}{{unit}}`` 처럼 세 자리 구분을 넣으세요. (AGENTS.md §1-4)",
+        '숫자 컬럼 `{{label}}` 에 format 이 없습니다. `format: (v) => `${Number(v).toLocaleString()}{{unit}}`` 처럼 세 자리 구분을 넣으세요. (AGENTS.md §1-4)',
       missingLocale:
-        "숫자 컬럼 `{{label}}` 의 format 이 toLocaleString 을 쓰지 않습니다. 세 자리 구분 없이 표시됩니다. (AGENTS.md §1-4)",
+        '숫자 컬럼 `{{label}}` 의 format 이 toLocaleString 을 쓰지 않습니다. 세 자리 구분 없이 표시됩니다. (AGENTS.md §1-4)',
     },
   },
 
@@ -54,25 +49,25 @@ export default {
 
         // render / renderCell 로 셀을 직접 그리는 경우는 이 규칙이 판단하지 않는다
         // (renderCell 은 3.x STable 의 `<td>` 커스텀 렌더 — 2.2.0 에서 추가됐다)
-        if (prop(node, "render") || prop(node, "renderCell")) return;
+        if (prop(node, 'render') || prop(node, 'renderCell')) return;
 
         const unit = /금액|가격|단가|판매가|원가|비용|수수료|배송비|할인|합계|총액|잔액/.test(label)
-          ? "원"
-          : "";
+          ? '원'
+          : '';
 
-        const formatProp = prop(node, "format");
+        const formatProp = prop(node, 'format');
         if (!formatProp) {
           context.report({
             node: labelProp,
-            messageId: "missingFormat",
+            messageId: 'missingFormat',
             data: { label, unit },
           });
           return;
         }
 
         const src = context.sourceCode.getText(formatProp);
-        if (!src.includes("toLocaleString")) {
-          context.report({ node: formatProp, messageId: "missingLocale", data: { label } });
+        if (!src.includes('toLocaleString')) {
+          context.report({ node: formatProp, messageId: 'missingLocale', data: { label } });
         }
       },
     };

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

@@ -0,0 +1,114 @@
+/**
+ * `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) },
+          });
+        }
+      },
+    };
+  },
+};