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

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

@@ -17,15 +17,15 @@
  *   SDatePicker 계열     컴포넌트가 자체 상한을 갖는다 (B-14)
  *
  * ⚠️ 글자수 ↔ 등급 환산은 아직 디자인 확정본이 없어 토큰 값에서 계산한 잠정치다.
- *    (폭 등급 자체도 B-8 토큰 도착 전이라 하드코딩이다 — 도착하면 GRADES 를 교체한다)
- *    확정표가 오면 GRADES · CHAR_RATIO 를 그 값으로 바꾼다. 두 상수 모두 옵션으로 덮을 수 있다.
+ *    확정표가 오면 CHAR_RATIO 를 그 값으로 바꾼다. GRADES · CHAR_RATIO 모두 옵션으로 덮을 수 있다.
  */
+import { FIELD_WIDTHS } from '../scale.gen.mjs';
 
 /**
- * 폭 등급 (px). design-feedback-final.md §2-10.
- * B-8 토큰(`--cmp-field-width-*`)이 소스에 추가되면 scale.gen.mjs 를 거쳐 여기로 들어온다.
+ * 폭 등급 (px). `--cmp-field-width-*` 토큰에서 scale.gen.mjs 를 거쳐 들어온다 —
+ * 컴포넌트(`SFieldWidth`)와 이 규칙이 같은 소스를 본다. 여기에 숫자를 적지 않는다.
  */
-export const GRADES = { xs: 80, sm: 120, md: 160, lg: 240, xl: 480 };
+export const GRADES = FIELD_WIDTHS;
 
 /**
  * 글자 하나가 차지하는 폭 (font-size 대비 비율).
@@ -50,26 +50,26 @@ export const CHAR_RATIO = { narrow: 0.55, wide: 1 };
  */
 export const COMPONENTS = {
   SInput: {
-    lengthProp: "maxLength",
+    lengthProp: 'maxLength',
     font: { sm: 12, md: 14 },
     chrome: { sm: 26, md: 34 },
     korean: true,
-    grades: ["sm", "md", "lg", "xl"],
+    grades: ['sm', 'md', 'lg', 'xl'],
   },
   SBarcodeInput: {
-    lengthProp: "maxLength",
+    lengthProp: 'maxLength',
     font: { sm: 12, md: 14 },
     chrome: { sm: 26, md: 34 },
     korean: false, // 바코드는 영숫자다
-    grades: ["sm", "md", "lg", "xl"],
+    grades: ['sm', 'md', 'lg', 'xl'],
   },
   SNumberInput: {
-    lengthProp: "max",
+    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 는 숫자 필드 전용 등급이다
+    grades: ['xs', 'sm', 'md', 'lg', 'xl'], // xs 는 숫자 필드 전용 등급이다
   },
 };
 
@@ -89,7 +89,7 @@ export function smallestGradeFor(spec, size, len, ratio, grades = GRADES) {
 
 /** JSX 속성 노드 */
 function attr(node, name) {
-  return node.attributes.find(a => a.type === "JSXAttribute" && a.name?.name === name);
+  return node.attributes.find(a => a.type === 'JSXAttribute' && a.name?.name === name);
 }
 
 /**
@@ -103,8 +103,8 @@ function literal(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") {
+  if (v.type === 'Literal') return v.value;
+  if (v.type === 'JSXExpressionContainer' && v.expression.type === 'Literal') {
     return v.expression.value;
   }
   return null;
@@ -118,20 +118,22 @@ function digitsOf(max) {
 
 export default {
   meta: {
-    type: "problem",
+    type: 'problem',
     docs: {
-      description: "필드 폭을 maxLength(스키마 상한) 기준 등급으로 고정",
+      description: '필드 폭을 maxLength(스키마 상한) 기준 등급으로 고정',
     },
+    // px → 등급 이름 치환만 자동으로 고친다. 등급 선택 자체는 스키마를 봐야 하므로 손대지 않는다.
+    fixable: 'code',
     schema: [
       {
-        type: "object",
+        type: 'object',
         properties: {
           /** 폭 등급 px 재정의 — 디자인 확정본이 오면 여기로 덮는다 */
-          grades: { type: "object", additionalProperties: { type: "number" } },
+          grades: { type: 'object', additionalProperties: { type: 'number' } },
           /** 글자폭 비율 재정의 */
           charRatio: {
-            type: "object",
-            properties: { narrow: { type: "number" }, wide: { type: "number" } },
+            type: 'object',
+            properties: { narrow: { type: 'number' }, wide: { type: 'number' } },
             additionalProperties: false,
           },
         },
@@ -140,19 +142,21 @@ export default {
     ],
     messages: {
       noGrade:
-        "`{{lengthProp}}={{len}}` 로 상한이 정해진 필드인데 `width` 가 없어 행 전체를 차지합니다. `width={{{suggestPx}}}`({{suggest}} 등급)으로 고정하세요. (§1-2)",
+        '`{{lengthProp}}={{len}}` 로 상한이 정해진 필드인데 `width` 가 없어 행 전체를 차지합니다. `width="{{suggest}}"`({{suggestPx}}px) 등급으로 고정하세요. (§1-2)',
       offGrade:
-        "`width={{{width}}}` 는 폭 등급이 아닙니다. {{gradeList}} 중 하나이거나, 상한이 없으면 `width=\"100%\"` 여야 합니다. (§1-2)",
+        '`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)",
+        '`width` 로 폭을 고정했는데 `{{lengthProp}}` 이 없습니다. 폭의 근거가 스키마 상한이므로, 상한이 없으면 행 전체(`width="100%"` 또는 생략)로 둡니다. (§1-2)',
       tooNarrow:
-        "`{{lengthProp}}={{len}}` 이 {{grade}} 등급({{gradePx}}px)에 담기지 않습니다. `width={{{suggestPx}}}`({{suggest}} 등급) 이상이 필요합니다. (§1-2)",
+        '`{{lengthProp}}={{len}}` 이 {{grade}} 등급({{gradePx}}px)에 담기지 않습니다. `width="{{suggest}}"`({{suggestPx}}px) 이상이 필요합니다. (§1-2)',
       tooWide:
-        "`{{lengthProp}}={{len}}` 은 {{suggest}} 등급({{suggestPx}}px)으로 충분한데 {{grade}} 등급({{gradePx}}px)을 주었습니다. 폭은 상한에 맞춥니다. (§1-2)",
+        '`{{lengthProp}}={{len}}` 은 {{suggest}} 등급({{suggestPx}}px)으로 충분한데 {{grade}} 등급({{gradePx}}px)을 주었습니다. 폭은 상한에 맞춥니다. (§1-2)',
       overMax:
-        "`{{lengthProp}}={{len}}` 은 최대 등급 xl({{xl}}px)로도 담기지 않습니다. 행 전체(`width=\"100%\"`)로 둡니다. (§1-2)",
+        '`{{lengthProp}}={{len}}` 은 최대 등급 xl({{xl}}px)로도 담기지 않습니다. 행 전체(`width="100%"`)로 둡니다. (§1-2)',
       fullWidthBounded:
-        "`{{lengthProp}}={{len}}` 로 상한이 정해져 있으므로 `width=\"100%\"` 가 아니라 `width={{{suggestPx}}}`({{suggest}} 등급)로 고정합니다. 행 전체는 상한이 없거나 xl 을 넘을 때만 씁니다. (§1-2)",
+        '`{{lengthProp}}={{len}}` 로 상한이 정해져 있으므로 `width="100%"` 가 아니라 `width="{{suggest}}"`({{suggestPx}}px) 등급으로 고정합니다. 행 전체는 상한이 없거나 xl 을 넘을 때만 씁니다. (§1-2)',
     },
   },
 
@@ -162,18 +166,19 @@ export default {
 
     return {
       JSXOpeningElement(node) {
-        if (node.name.type !== "JSXIdentifier") return;
+        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;
+        if (node.attributes.some(a => a.type === 'JSXSpreadAttribute')) return;
 
-        const size = literal(node, "size") === "md" ? "md" : "sm";
+        const size = literal(node, 'size') === 'md' ? 'md' : 'sm';
         // 스테퍼가 붙으면 글자가 쓸 수 있는 폭이 크게 줄어든다 (useButton 기본값은 false)
-        const spec = literal(node, "useButton") === true && base.chromeStepper
-          ? { ...base, chrome: base.chromeStepper }
-          : base;
+        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);
@@ -185,18 +190,14 @@ export default {
         const rawLen = literal(node, spec.lengthProp);
         if (rawLen === null) return; // 변수로 넘긴 상한 — 판단 불가
         const len =
-          rawLen === undefined
-            ? undefined
-            : spec.lengthProp === "max"
-              ? digitsOf(rawLen)
-              : rawLen;
+          rawLen === undefined ? undefined : spec.lengthProp === 'max' ? digitsOf(rawLen) : rawLen;
         if (len !== undefined && (!Number.isFinite(len) || len <= 0)) return;
 
-        const rawWidth = literal(node, "width");
+        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(" · ");
+        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) {
@@ -205,32 +206,37 @@ export default {
           if (!suggest) return; // xl 로도 안 담긴다 → 행 전체가 맞다
           context.report({
             node: reportNode,
-            messageId: "noGrade",
+            messageId: 'noGrade',
             data: { lengthProp: spec.lengthProp, len: rawLen, suggest, suggestPx: grades[suggest] },
           });
           return;
         }
 
         /* ── width="100%" ── */
-        if (rawWidth === "100%") {
+        if (rawWidth === '100%') {
           if (len === undefined) return; // 상한 없음 + 행 전체 = 규칙대로다
           const suggest = smallestFor(len, wide);
           if (!suggest) return; // xl 초과 → 행 전체가 맞다
           context.report({
             node: reportNode,
-            messageId: "fullWidthBounded",
+            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));
+        /* ── 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",
+            messageId: 'offGrade',
             data: { width: String(rawWidth), gradeList },
           });
           return;
@@ -240,7 +246,7 @@ export default {
         if (len === undefined) {
           context.report({
             node: reportNode,
-            messageId: "noBound",
+            messageId: 'noBound',
             data: { lengthProp: spec.lengthProp },
           });
           return;
@@ -252,14 +258,14 @@ export default {
           if (!suggest) {
             context.report({
               node: reportNode,
-              messageId: "overMax",
+              messageId: 'overMax',
               data: { lengthProp: spec.lengthProp, len: rawLen, xl: grades.xl },
             });
             return;
           }
           context.report({
             node: reportNode,
-            messageId: "tooNarrow",
+            messageId: 'tooNarrow',
             data: {
               lengthProp: spec.lengthProp,
               len: rawLen,
@@ -277,7 +283,7 @@ export default {
         if (enough && grades[enough] < grades[grade]) {
           context.report({
             node: reportNode,
-            messageId: "tooWide",
+            messageId: 'tooWide',
             data: {
               lengthProp: spec.lengthProp,
               len: rawLen,
@@ -287,6 +293,17 @@ export default {
               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/no-arbitrary-class.mjs

@@ -7,7 +7,7 @@
  *
  * AGENTS.md §1-2.
  */
-import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
+import { collectClassTokens, stripVariants, stripModifiers } from '../lib/class-names.mjs';
 
 /**
  * 토큰이 존재하는 속성 접두어 — 여기에 임의 값을 쓰면 디자인 시스템을 우회하는 것이다.
@@ -15,59 +15,102 @@ import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-
  */
 const TOKEN_BACKED = [
   // 색 (text- 는 색·폰트크기 양쪽 모두 토큰이 있어 어느 쪽이든 대상)
-  "text", "bg", "border", "outline", "ring", "shadow", "fill", "stroke",
-  "divide", "accent", "caret", "decoration", "from", "via", "to",
+  'text',
+  'bg',
+  'border',
+  'outline',
+  'ring',
+  'shadow',
+  'fill',
+  'stroke',
+  'divide',
+  'accent',
+  'caret',
+  'decoration',
+  'from',
+  'via',
+  'to',
   // 타이포
-  "font", "leading", "tracking",
+  '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",
+  '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",
+  '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;
+  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); // 대괄호 바로 앞의 `-` 제외
+  const idx = util.indexOf('[');
+  return idx <= 0 ? '' : util.slice(0, idx - 1); // 대괄호 바로 앞의 `-` 제외
 }
 
 export default {
   meta: {
-    type: "problem",
+    type: 'problem',
     docs: {
-      description: "색·타이포·간격·모서리에 임의 값 금지 — 토큰 유틸리티 또는 var(--token) 참조 사용",
+      description:
+        '색·타이포·간격·모서리에 임의 값 금지 — 토큰 유틸리티 또는 var(--token) 참조 사용',
     },
     schema: [
       {
-        type: "object",
+        type: 'object',
         properties: {
           /** 예외로 허용할 클래스 (완전 일치) */
-          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+          allow: { type: 'array', items: { type: 'string' }, uniqueItems: true },
           /** 검사 대상에서 뺄 유틸리티 접두어 (예: ["shadow"]) */
-          ignorePrefixes: { type: "array", items: { type: "string" }, uniqueItems: true },
+          ignorePrefixes: { type: 'array', items: { type: 'string' }, uniqueItems: true },
         },
         additionalProperties: false,
       },
     ],
     messages: {
       arbitrary:
-        "`{{token}}` — {{prefix}} 는 디자인 토큰이 있는 속성이라 임의 값을 쓸 수 없습니다. 토큰 유틸리티를 쓰거나 var(--token) 으로 참조하세요. (AGENTS.md §1-2)",
+        '`{{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));
+    const targets = TOKEN_BACKED.filter(p => !ignored.has(p));
 
     return {
       JSXAttribute(node) {
@@ -83,7 +126,7 @@ export default {
           const prefix = prefixOf(util);
           if (!targets.includes(prefix)) continue;
 
-          context.report({ node: valueNode, messageId: "arbitrary", data: { token, prefix } });
+          context.report({ node: valueNode, messageId: 'arbitrary', data: { token, prefix } });
         }
       },
     };

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(' / ') },
           });
         }
       },