sellmate-design-system-react 3.0.0 → 3.2.0

package/eslint/lib/table-column.mjs

@@ -0,0 +1,53 @@
+/**
+ * STableColumn 형태 판별과 "숫자 컬럼" 판정을 공유하는 헬퍼.
+ * table-numeric-align · require-locale-number 두 규칙이 함께 쓴다.
+ */
+
+/**
+ * 오른쪽 정렬 대상 — 숫자가 들어가는 모든 컬럼.
+ * 식별자(주문번호·상품코드)도 숫자라 자릿수를 맞춰야 하므로 포함한다.
+ */
+export const NUMERIC_LABEL =
+  /금액|가격|단가|판매가|원가|비용|수수료|배송비|할인|합계|총액|잔액|포인트|적립|수량|재고|개수|건수|횟수|비율|퍼센트|평점|점수|무게|용량|길이|면적|번호|코드|순번|순위|나이|연차/;
+
+/**
+ * 하이픈 등 서식이 들어간 문자열 — 숫자가 아니므로 정렬·서식 규칙 모두 대상이 아니다.
+ * (전화번호 010-1234-5678, 사업자번호 123-45-67890)
+ */
+export const IDENTIFIER_ONLY = /전화|휴대폰|연락처|사업자|주민|계좌|우편/;
+
+/** format 본문에 숫자 서식이 있으면 숫자 컬럼으로 본다 */
+export const NUMERIC_FORMAT = /toLocaleString|toFixed|Number\s*\(|parseInt|parseFloat/;
+
+/** 객체 리터럴에서 프로퍼티 노드를 이름으로 찾는다 */
+export function prop(objectNode, name) {
+  return objectNode.properties.find(
+    (p) =>
+      p.type === "Property" &&
+      !p.computed &&
+      ((p.key.type === "Identifier" && p.key.name === name) ||
+        (p.key.type === "Literal" && p.key.value === name)),
+  );
+}
+
+/** 문자열 리터럴 값 (아니면 undefined) */
+export function literalString(node) {
+  return node?.value?.type === "Literal" && typeof node.value.value === "string"
+    ? node.value.value
+    : undefined;
+}
+
+/**
+ * STableColumn 형태인지 — name·label·field 셋을 모두 가진 객체만 컬럼으로 본다.
+ * @returns {{ nameProp, labelProp, label: string } | null}
+ */
+export function asColumn(node) {
+  const nameProp = prop(node, "name");
+  const labelProp = prop(node, "label");
+  if (!nameProp || !labelProp || !prop(node, "field")) return null;
+
+  const label = literalString(labelProp);
+  if (label === undefined) return null; // 동적 label 은 판단하지 않는다
+
+  return { nameProp, labelProp, label, columnName: literalString(nameProp) };
+}

package/eslint/rules/component-group-gap.mjs

@@ -0,0 +1,186 @@
+/**
+ * 같은 컴포넌트를 여러 개 나열할 때 컴포넌트별 그룹 간격을 지키게 한다.
+ *
+ * 일반 요소 사이의 기본값(gap-8)과 달리, 체크박스·라디오는 가로 24 / 세로 8 처럼
+ * **배열 방향에 따라 값이 다르다.** 가로 배열에 8 을 쓰면 항목이 붙어 보인다.
+ *
+ * 오탐을 줄이기 위해 다음은 검사하지 않는다.
+ *  - `justify-between` 등으로 양끝 분리한 경우 (하단 버튼 배치 규칙 §3-5)
+ *  - gap 을 토큰 var() 로 직접 참조한 경우
+ *  - 자식이 2개 미만이거나 여러 종류가 섞인 경우
+ *
+ * AGENTS.md §2-2.
+ */
+import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
+
+/**
+ * 컴포넌트별 기대 간격 (px).
+ * horizontal/vertical 이 다르면 각각, 같으면 both 로 둔다.
+ * sizes 가 있으면 자식의 size prop 에 따라 값이 갈린다.
+ */
+const GROUP_GAP = {
+  SCheckbox: { horizontal: 24, vertical: 8 },
+  SRadio: { horizontal: 24, vertical: 8 },
+  STextLink: {
+    horizontal: { default: 16, bySize: { md: 24, lg: 24 } },
+    vertical: 4,
+  },
+  SGhostButton: { both: 4 },
+  SButton: { both: { default: 8, bySize: { lg: 12 } } },
+  STag: { both: 8 },
+  SToggle: { both: 8 },
+};
+
+/** 이 컴포넌트들은 전용 그룹 컴포넌트가 따로 있다 */
+const HAS_GROUP_COMPONENT = {
+  SRadio: "SRadioGroup (direction 으로 간격을 맞춥니다)",
+  SRadioButton: "SRadioGroup — 그룹 간격이 -1px(테두리 겹침)이라 직접 만들지 않습니다",
+};
+
+/** gap 유틸리티에서 px 값을 뽑는다. 토큰 var() 참조면 null(검사 제외) */
+function readGap(tokens) {
+  for (const { token } of tokens) {
+    const util = stripModifiers(stripVariants(token));
+    const m = util.match(/^gap-(.+)$/);
+    if (!m) continue;
+    if (m[1].startsWith("[")) return { skip: true }; // gap-[var(--...)] 등
+    if (/^\d+$/.test(m[1])) return { value: Number(m[1]) };
+  }
+  return { value: null }; // gap 자체가 없음
+}
+
+/** JSX 자식 중 컴포넌트 엘리먼트만 (공백 텍스트 제외) */
+function elementChildren(node) {
+  return (node.children ?? []).filter(
+    (ch) =>
+      ch.type === "JSXElement" &&
+      ch.openingElement.name.type === "JSXIdentifier",
+  );
+}
+
+const nameOf = (el) => el.openingElement.name.name;
+
+/** 자식들의 size prop 중 가장 먼저 나오는 리터럴 값 */
+function sizeOf(children) {
+  for (const ch of children) {
+    const attr = ch.openingElement.attributes.find(
+      (a) => a.type === "JSXAttribute" && a.name?.name === "size",
+    );
+    if (attr?.value?.type === "Literal" && typeof attr.value.value === "string") {
+      return attr.value.value;
+    }
+  }
+  return undefined;
+}
+
+/** spec(number | {default, bySize}) 을 size 로 해석 */
+function resolve(spec, size) {
+  if (typeof spec === "number") return spec;
+  if (!spec) return undefined;
+  return (size && spec.bySize?.[size]) ?? spec.default;
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "같은 컴포넌트를 나열할 때 컴포넌트별 그룹 간격 사용",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          ignore: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      wrongGap:
+        "{{component}} 를 {{dirLabel}} 배열할 때 간격은 `gap-{{expected}}` 입니다{{actualLabel}}. (AGENTS.md §2-2)",
+      useGroupComponent:
+        "{{component}} 를 직접 flex 로 감싸지 마세요 — {{suggestion}}. (AGENTS.md §2-2)",
+    },
+    fixable: "code",
+  },
+
+  create(context) {
+    const ignore = new Set(context.options[0]?.ignore ?? []);
+
+    return {
+      JSXElement(node) {
+        const classAttr = node.openingElement.attributes.find(
+          (a) => a.type === "JSXAttribute" && (a.name?.name === "className" || a.name?.name === "class"),
+        );
+        if (!classAttr) return;
+
+        const tokens = collectClassTokens(classAttr);
+        const utils = tokens.map(({ token }) => stripModifiers(stripVariants(token)));
+
+        // flex 컨테이너가 아니면 대상이 아니다
+        if (!utils.includes("flex") && !utils.includes("inline-flex")) return;
+        // 양끝 분리는 gap 규칙 대상이 아니다 (하단 버튼 배치 등)
+        if (utils.some((u) => u.startsWith("justify-between") || u.startsWith("justify-around"))) return;
+
+        const children = elementChildren(node);
+        if (children.length < 2) return;
+
+        // 같은 컴포넌트로만 이루어진 그룹만 판단한다
+        const first = nameOf(children[0]);
+        if (!children.every((ch) => nameOf(ch) === first)) return;
+        if (ignore.has(first)) return;
+
+        // 전용 그룹 컴포넌트가 있으면 그쪽을 권한다
+        if (HAS_GROUP_COMPONENT[first]) {
+          context.report({
+            node: node.openingElement,
+            messageId: "useGroupComponent",
+            data: { component: first, suggestion: HAS_GROUP_COMPONENT[first] },
+          });
+          return;
+        }
+
+        const spec = GROUP_GAP[first];
+        if (!spec) return;
+
+        const vertical = utils.includes("flex-col") || utils.includes("flex-col-reverse");
+        const dirSpec = spec.both ?? (vertical ? spec.vertical : spec.horizontal);
+        const expected = resolve(dirSpec, sizeOf(children));
+        if (expected == null) return;
+
+        const gap = readGap(tokens);
+        if (gap.skip) return;
+        if (gap.value === expected) return;
+
+        context.report({
+          node: node.openingElement,
+          messageId: "wrongGap",
+          data: {
+            component: first,
+            dirLabel: spec.both ? "" : vertical ? "세로로" : "가로로",
+            expected: String(expected),
+            actualLabel: gap.value == null ? " (지정되지 않았습니다)" : ` — 현재 gap-${gap.value}`,
+          },
+          fix(fixer) {
+            // 기존 gap 유틸리티가 리터럴 문자열일 때만 안전하게 교체한다
+            if (gap.value == null) return null;
+            const literal = classAttr.value;
+            const raw =
+              literal?.type === "Literal"
+                ? literal
+                : literal?.type === "JSXExpressionContainer" && literal.expression.type === "Literal"
+                  ? literal.expression
+                  : null;
+            if (!raw || typeof raw.value !== "string") return null;
+            const next = raw.value.replace(
+              new RegExp(`(^|\\s)gap-${gap.value}(?=\\s|$)`),
+              `$1gap-${expected}`,
+            );
+            if (next === raw.value) return null;
+            return fixer.replaceText(raw, `"${next}"`);
+          },
+        });
+      },
+    };
+  },
+};

package/eslint/rules/no-arbitrary-class.mjs

@@ -0,0 +1,91 @@
+/**
+ * **디자인 토큰이 있는 속성**에 임의 값을 쓰는 것을 막는다 — `text-[14px]`, `bg-[#eee]` 등.
+ *
+ * 반대로, 디자인 시스템이 토큰화하지 않는 **앱 고유 레이아웃 치수**(`w-[280px]`,
+ * `max-w-[1200px]`, `grid-cols-[200px_1fr]`)는 정당한 사용이므로 막지 않는다.
+ * 토큰을 var() 로 참조하는 형태(`h-[var(--sys-size-...)]`)도 허용한다.
+ *
+ * AGENTS.md §1-2.
+ */
+import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
+
+/**
+ * 토큰이 존재하는 속성 접두어 — 여기에 임의 값을 쓰면 디자인 시스템을 우회하는 것이다.
+ * 색·타이포·간격·모서리 4계열.
+ */
+const TOKEN_BACKED = [
+  // 색 (text- 는 색·폰트크기 양쪽 모두 토큰이 있어 어느 쪽이든 대상)
+  "text", "bg", "border", "outline", "ring", "shadow", "fill", "stroke",
+  "divide", "accent", "caret", "decoration", "from", "via", "to",
+  // 타이포
+  "font", "leading", "tracking",
+  // 간격
+  "gap", "gap-x", "gap-y", "space-x", "space-y",
+  "p", "px", "py", "pt", "pr", "pb", "pl", "ps", "pe",
+  "m", "mx", "my", "mt", "mr", "mb", "ml", "ms", "me",
+  // 모서리
+  "rounded", "rounded-t", "rounded-r", "rounded-b", "rounded-l",
+  "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl",
+];
+
+/** 대괄호 안이 토큰 참조인지 — `var(--x)` 또는 `length:var(--x)` 같은 데이터타입 접두어 허용 */
+function isTokenReference(inner) {
+  const body = inner.includes(":") ? inner.slice(inner.indexOf(":") + 1) : inner;
+  return /^var\(--[\w-]+\)$/.test(body.trim());
+}
+
+/** `bg-[#eee]` → `bg` 처럼 임의 값 앞의 유틸리티 접두어를 뽑는다 */
+function prefixOf(util) {
+  const idx = util.indexOf("[");
+  return idx <= 0 ? "" : util.slice(0, idx - 1); // 대괄호 바로 앞의 `-` 제외
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "색·타이포·간격·모서리에 임의 값 금지 — 토큰 유틸리티 또는 var(--token) 참조 사용",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          /** 예외로 허용할 클래스 (완전 일치) */
+          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+          /** 검사 대상에서 뺄 유틸리티 접두어 (예: ["shadow"]) */
+          ignorePrefixes: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      arbitrary:
+        "`{{token}}` — {{prefix}} 는 디자인 토큰이 있는 속성이라 임의 값을 쓸 수 없습니다. 토큰 유틸리티를 쓰거나 var(--token) 으로 참조하세요. (AGENTS.md §1-2)",
+    },
+  },
+
+  create(context) {
+    const allow = new Set(context.options[0]?.allow ?? []);
+    const ignored = new Set(context.options[0]?.ignorePrefixes ?? []);
+    const targets = TOKEN_BACKED.filter((p) => !ignored.has(p));
+
+    return {
+      JSXAttribute(node) {
+        for (const { token, node: valueNode } of collectClassTokens(node)) {
+          if (allow.has(token)) continue;
+
+          const util = stripModifiers(stripVariants(token));
+          const match = util.match(/\[([^\]]*)\]/);
+          if (!match) continue;
+          if (isTokenReference(match[1])) continue;
+
+          // 토큰이 없는 속성(w·max-w·grid-cols·top …)의 임의 값은 앱 고유 치수이므로 허용
+          const prefix = prefixOf(util);
+          if (!targets.includes(prefix)) continue;
+
+          context.report({ node: valueNode, messageId: "arbitrary", data: { token, prefix } });
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,67 @@
+/**
+ * 간격 유틸리티가 토큰 스케일 밖의 값을 쓰는 것을 막는다 — `gap-13`, `p-15` 등.
+ *
+ * Tailwind v4 는 `--spacing-*` 테마 키에 있는 값만 유틸리티로 생성하므로,
+ * 스케일 밖 숫자는 **에러 없이 조용히 아무 스타일도 적용되지 않는다.**
+ * 눈으로는 "간격이 왜 안 먹지" 로만 보이기 때문에 린트로 잡는다.
+ *
+ * AGENTS.md §2-2.
+ */
+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",
+];
+
+const ALLOWED = new Set([0, ...SPACING]);
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "간격 유틸리티는 토큰 스케일 값만 사용",
+    },
+    schema: [],
+    messages: {
+      offScale:
+        "`{{token}}` 의 {{value}} 는 간격 스케일에 없어 스타일이 적용되지 않습니다. 가까운 값: {{nearest}}. (AGENTS.md §2-2)",
+    },
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        for (const { token, node: valueNode } of collectClassTokens(node)) {
+          const util = stripModifiers(stripVariants(token));
+
+          const prefix = SPACING_PREFIXES.find((p) => util.startsWith(`${p}-`));
+          if (!prefix) continue;
+
+          const raw = util.slice(prefix.length + 1);
+          // 숫자가 아닌 값(auto, px, full, [var(--x)] 등)은 이 규칙 대상이 아니다
+          if (!/^\d+$/.test(raw)) continue;
+
+          const value = Number(raw);
+          if (ALLOWED.has(value)) continue;
+
+          const nearest = [...ALLOWED]
+            .sort((a, b) => Math.abs(a - value) - Math.abs(b - value))
+            .slice(0, 2)
+            .sort((a, b) => a - b)
+            .join(" / ");
+
+          context.report({
+            node: valueNode,
+            messageId: "offScale",
+            data: { token, value: String(value), nearest },
+          });
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,117 @@
+/**
+ * 디자인 시스템에 대응 컴포넌트가 있는 생 HTML 요소 사용을 막는다.
+ * AGENTS.md §1-1 과 같은 목록을 강제한다.
+ */
+
+/**
+ * 기본 대상 — 대응 컴포넌트가 명확해 오탐 여지가 거의 없는 요소.
+ */
+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",
+};
+
+/**
+ * strict 옵션에서만 검사하는 요소 — 정당한 사용처가 함께 있어 기본에서는 뺀다.
+ *  - svg   : 로고·일러스트·차트
+ *  - ul/li : 본문 안의 시맨틱 목록, 브레드크럼
+ *  - label : DS 밖 컨트롤의 접근성 레이블
+ */
+const STRICT_REPLACEMENTS = {
+  ul: "SList + SListItem",
+  ol: "SList + SListItem",
+  li: "SListItem",
+  svg: "SIcon",
+  label: "SField 의 label prop",
+};
+
+/** 시각 요소가 없어 대체 컴포넌트가 없는 input 타입 */
+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 v = attr?.value;
+  if (v?.type === "Literal" && typeof v.value === "string") return v.value;
+  return undefined;
+}
+
+/** 전역 함수 → 권장 대체 */
+const GLOBAL_CALLS = {
+  alert: "SToast / SModal.confirm(...)",
+  confirm: "SModal.confirm(...)",
+};
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "디자인 시스템 컴포넌트가 있는 생 HTML 컨트롤 사용 금지",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          /** 예외로 허용할 요소명 (예: 로고용 svg) */
+          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+          /** ul·ol·li·svg·label 까지 검사 (정당한 사용처가 있어 기본은 off) */
+          strict: { type: "boolean" },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      rawElement: "<{{name}}> 대신 {{replacement}} 를 사용하세요. (AGENTS.md §1-1)",
+      rawCall: "{{name}}() 대신 {{replacement}} 를 사용하세요. (AGENTS.md §1-1)",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] ?? {};
+    const allow = new Set(options.allow ?? []);
+    const replacements = options.strict
+      ? { ...REPLACEMENTS, ...STRICT_REPLACEMENTS }
+      : REPLACEMENTS;
+
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier") return;
+        const name = node.name.name;
+        // 컴포넌트(대문자 시작)는 대상이 아니다
+        if (name[0] !== name[0].toLowerCase()) return;
+        if (allow.has(name)) return;
+
+        const replacement = replacements[name];
+        if (!replacement) return;
+
+        // <input type="hidden"> 처럼 시각 요소가 없는 경우는 대체 컴포넌트가 없다
+        if (name === "input" && EXEMPT_INPUT_TYPES.has(literalAttr(node, "type"))) return;
+
+        context.report({ node: node.name, messageId: "rawElement", data: { name, replacement } });
+      },
+
+      CallExpression(node) {
+        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)) {
+          return;
+        }
+        context.report({ node, messageId: "rawCall", data: { name, replacement } });
+      },
+    };
+  },
+};

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

@@ -0,0 +1,73 @@
+/**
+ * 폰트 크기·굵기를 낱개 유틸리티로 조립하는 것을 막고 `typo-*` 프리셋 사용을 유도한다.
+ * `text-14 font-bold` 대신 `typo-body-md-bold`.
+ *
+ * AGENTS.md §1-3 / §2-1.
+ */
+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",
+]);
+
+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",
+  };
+  return byRole[size] ?? "typo-*";
+}
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "폰트 크기·굵기 낱개 조합 대신 typo-* 프리셋 사용",
+    },
+    schema: [],
+    messages: {
+      fontSize:
+        "`{{token}}` 대신 타이포그래피 프리셋을 쓰세요 — {{suggestion}}. (AGENTS.md §2-1)",
+      fontWeight:
+        "`{{token}}` 을 단독으로 쓰지 말고 굵기가 포함된 typo-* 프리셋을 쓰세요. (AGENTS.md §2-1)",
+    },
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        const tokens = collectClassTokens(node);
+        // 이미 프리셋을 쓰고 있으면 굵기 보조 유틸리티는 문제 삼지 않는다
+        const hasPreset = tokens.some(({ token }) =>
+          TYPO_PRESETS.includes(stripModifiers(stripVariants(token))),
+        );
+
+        for (const { token, node: valueNode } of tokens) {
+          const util = stripModifiers(stripVariants(token));
+
+          const sizeMatch = util.match(/^text-(\d+)$/);
+          if (sizeMatch && TEXT_SIZE_SET.has(sizeMatch[1])) {
+            context.report({
+              node: valueNode,
+              messageId: "fontSize",
+              data: { token, suggestion: suggest(Number(sizeMatch[1])) },
+            });
+            continue;
+          }
+
+          if (!hasPreset && FONT_WEIGHTS.has(util)) {
+            context.report({ node: valueNode, messageId: "fontWeight", data: { token } });
+          }
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,78 @@
+/**
+ * 숫자 컬럼은 예외 없이 `toLocaleString()` 으로 세 자리 콤마를 넣도록 강제한다.
+ *
+ * 전화번호·사업자번호처럼 하이픈이 들어가는 값은 숫자가 아니라 서식이 정해진
+ * 문자열이므로 대상에서 뺀다. 그 밖에 예외가 필요하면 `allow` 로 컬럼을 지정한다.
+ *
+ * AGENTS.md §1-4 / §3-4.
+ */
+import {
+  NUMERIC_LABEL,
+  IDENTIFIER_ONLY,
+  prop,
+  asColumn,
+} from "../lib/table-column.mjs";
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "금액·수량 등 숫자 표시에 toLocaleString 사용",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          /** 검사에서 뺄 컬럼 name */
+          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      missingFormat:
+        "숫자 컬럼 `{{label}}` 에 format 이 없습니다. `format: (v) => `${Number(v).toLocaleString()}{{unit}}`` 처럼 세 자리 구분을 넣으세요. (AGENTS.md §1-4)",
+      missingLocale:
+        "숫자 컬럼 `{{label}}` 의 format 이 toLocaleString 을 쓰지 않습니다. 세 자리 구분 없이 표시됩니다. (AGENTS.md §1-4)",
+    },
+  },
+
+  create(context) {
+    const allow = new Set(context.options[0]?.allow ?? []);
+
+    return {
+      ObjectExpression(node) {
+        const column = asColumn(node);
+        if (!column) return;
+
+        const { labelProp, label, columnName } = column;
+        if (columnName && allow.has(columnName)) return;
+
+        // 숫자 컬럼이면 모두 대상 — 하이픈 서식 문자열(전화번호 등)만 뺀다
+        if (!NUMERIC_LABEL.test(label) || IDENTIFIER_ONLY.test(label)) return;
+
+        // render 로 셀을 직접 그리는 경우는 이 규칙이 판단하지 않는다
+        if (prop(node, "render")) return;
+
+        const unit = /금액|가격|단가|판매가|원가|비용|수수료|배송비|할인|합계|총액|잔액/.test(label)
+          ? "원"
+          : "";
+
+        const formatProp = prop(node, "format");
+        if (!formatProp) {
+          context.report({
+            node: labelProp,
+            messageId: "missingFormat",
+            data: { label, unit },
+          });
+          return;
+        }
+
+        const src = context.sourceCode.getText(formatProp);
+        if (!src.includes("toLocaleString")) {
+          context.report({ node: formatProp, messageId: "missingLocale", data: { label } });
+        }
+      },
+    };
+  },
+};