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

package/eslint/index.mjs

@@ -4,28 +4,32 @@
  * AGENTS.md 의 규칙 중 정적으로 검출 가능한 것을 린트로 강제한다.
  * 사용법은 README 의 "ESLint 설정" 절 참조.
  */
-import noRawHtmlControl from "./rules/no-raw-html-control.mjs";
-import noArbitraryClass from "./rules/no-arbitrary-class.mjs";
-import noOffScaleSpacing from "./rules/no-off-scale-spacing.mjs";
-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 noRawHtmlControl from './rules/no-raw-html-control.mjs';
+import noArbitraryClass from './rules/no-arbitrary-class.mjs';
+import noOffScaleSpacing from './rules/no-off-scale-spacing.mjs';
+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';
+import dividerVerticalHeight from './rules/divider-vertical-height.mjs';
 
-const PLUGIN_NAME = "sellmate";
+const PLUGIN_NAME = 'sellmate';
 
 const plugin = {
-  meta: { name: "eslint-plugin-sellmate" },
+  meta: { name: 'eslint-plugin-sellmate' },
   rules: {
-    "no-raw-html-control": noRawHtmlControl,
-    "no-arbitrary-class": noArbitraryClass,
-    "no-off-scale-spacing": noOffScaleSpacing,
-    "prefer-typo-preset": preferTypoPreset,
-    "table-numeric-align": tableNumericAlign,
-    "require-locale-number": requireLocaleNumber,
-    "component-group-gap": componentGroupGap,
-    "field-width-grade": fieldWidthGrade,
+    'no-raw-html-control': noRawHtmlControl,
+    'no-arbitrary-class': noArbitraryClass,
+    'no-off-scale-spacing': noOffScaleSpacing,
+    'prefer-typo-preset': preferTypoPreset,
+    'table-numeric-align': tableNumericAlign,
+    'require-locale-number': requireLocaleNumber,
+    'component-group-gap': componentGroupGap,
+    'field-width-grade': fieldWidthGrade,
+    'table-column-width': tableColumnWidth,
+    'divider-vertical-height': dividerVerticalHeight,
   },
 };
 
@@ -43,24 +47,28 @@ const plugin = {
 const recommended = [
   {
     // 컬럼 정의를 .ts 파일로 분리하는 경우가 있어 tsx 뿐 아니라 ts 도 포함한다
-    files: ["**/*.{js,jsx,ts,tsx}"],
+    files: ['**/*.{js,jsx,ts,tsx}'],
     plugins: { [PLUGIN_NAME]: plugin },
     rules: {
       // 스케일 밖 `gap-sd-13` 은 아무 스타일도 만들지 않는다 — 조용히 깨진다
-      [`${PLUGIN_NAME}/no-off-scale-spacing`]: "error",
+      [`${PLUGIN_NAME}/no-off-scale-spacing`]: 'error',
       // 생 <button>/<table> 은 디자인 시스템을 통째로 우회하는 것 (스타일 자유와 무관)
-      [`${PLUGIN_NAME}/no-raw-html-control`]: "error",
+      [`${PLUGIN_NAME}/no-raw-html-control`]: 'error',
+      // 세로 SDivider 에 className 으로 높이를 주면 self-stretch 가 무효가 되어 선이 위로 솟는다
+      [`${PLUGIN_NAME}/divider-vertical-height`]: 'error',
 
       // 아래는 디자인 컨벤션 — 권고만 한다
-      [`${PLUGIN_NAME}/prefer-typo-preset`]: "warn",
-      [`${PLUGIN_NAME}/component-group-gap`]: "warn",
-      [`${PLUGIN_NAME}/table-numeric-align`]: "warn",
-      [`${PLUGIN_NAME}/require-locale-number`]: "warn",
+      [`${PLUGIN_NAME}/prefer-typo-preset`]: 'warn',
+      [`${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",
+      [`${PLUGIN_NAME}/field-width-grade`]: 'warn',
+      // 컬럼 폭 — 폭 미지정(기본 120px)·스페이서 오용은 권고, % · clamp() 는 조용히 깨지므로 error
+      [`${PLUGIN_NAME}/table-column-width`]: 'warn',
 
       // 앱 고유 치수(w-[280px])·일회성 값에는 임의 값이 정당하다. 필요한 팀만 켠다.
-      [`${PLUGIN_NAME}/no-arbitrary-class`]: "off",
+      [`${PLUGIN_NAME}/no-arbitrary-class`]: 'off',
     },
   },
 ];
@@ -76,14 +84,15 @@ const strict = [
     ...recommended[0],
     rules: {
       ...recommended[0].rules,
-      [`${PLUGIN_NAME}/no-raw-html-control`]: ["error", { strict: true }],
-      [`${PLUGIN_NAME}/no-arbitrary-class`]: "error",
-      [`${PLUGIN_NAME}/no-off-scale-spacing`]: ["error", { requirePrefix: true }],
-      [`${PLUGIN_NAME}/prefer-typo-preset`]: "error",
-      [`${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}/no-raw-html-control`]: ['error', { strict: true }],
+      [`${PLUGIN_NAME}/no-arbitrary-class`]: 'error',
+      [`${PLUGIN_NAME}/no-off-scale-spacing`]: ['error', { requirePrefix: true }],
+      [`${PLUGIN_NAME}/prefer-typo-preset`]: 'error',
+      [`${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/class-names.mjs

@@ -10,14 +10,12 @@
  * 동적으로 조립되는 부분(변수·삼항의 식별자 등)은 정적 분석 대상이 아니므로 건너뛴다.
  */
 
-const CLASS_ATTRS = new Set(["className", "class"]);
-const CLASS_HELPERS = new Set(["cn", "clsx", "classNames", "classnames", "cva", "twMerge"]);
+const CLASS_ATTRS = new Set(['className', 'class']);
+const CLASS_HELPERS = new Set(['cn', 'clsx', 'classNames', 'classnames', 'cva', 'twMerge']);
 
 /** 문자열을 공백 기준 클래스 토큰으로 나눈다 (variant 접두어는 유지) */
 export function tokenize(value) {
-  return String(value)
-    .split(/\s+/)
-    .filter(Boolean);
+  return String(value).split(/\s+/).filter(Boolean);
 }
 
 /**
@@ -38,16 +36,16 @@ function indexOfTopLevelColon(s) {
   let depth = 0;
   for (let i = 0; i < s.length; i++) {
     const c = s[i];
-    if (c === "[") depth++;
-    else if (c === "]") depth--;
-    else if (c === ":" && depth === 0) return i;
+    if (c === '[') depth++;
+    else if (c === ']') depth--;
+    else if (c === ':' && depth === 0) return i;
   }
   return -1;
 }
 
 /** `!gap-12` / `-mt-8` 같은 접두 기호 제거 */
 export function stripModifiers(token) {
-  return token.replace(/^!/, "").replace(/^-/, "");
+  return token.replace(/^!/, '').replace(/^-/, '');
 }
 
 /**
@@ -55,7 +53,7 @@ export function stripModifiers(token) {
  * @returns {Array<{ token: string, node: import('estree').Node }>}
  */
 export function collectClassTokens(attrNode) {
-  if (attrNode.type !== "JSXAttribute") return [];
+  if (attrNode.type !== 'JSXAttribute') return [];
   const name = attrNode.name?.name;
   if (!CLASS_ATTRS.has(name)) return [];
 
@@ -64,46 +62,46 @@ export function collectClassTokens(attrNode) {
     for (const token of tokenize(raw)) out.push({ token, node });
   };
 
-  const visit = (node) => {
+  const visit = node => {
     if (!node) return;
     switch (node.type) {
-      case "Literal":
-        if (typeof node.value === "string") push(node.value, node);
+      case 'Literal':
+        if (typeof node.value === 'string') push(node.value, node);
         break;
-      case "TemplateLiteral":
+      case 'TemplateLiteral':
         // 정적 부분만 본다. 보간(${}) 안쪽은 아래 표현식 방문으로 따로 처리.
-        for (const q of node.quasis) push(q.value.cooked ?? "", node);
+        for (const q of node.quasis) push(q.value.cooked ?? '', node);
         for (const e of node.expressions) visit(e);
         break;
-      case "JSXExpressionContainer":
+      case 'JSXExpressionContainer':
         visit(node.expression);
         break;
-      case "CallExpression": {
+      case 'CallExpression': {
         const callee = node.callee;
-        const fnName = callee?.type === "Identifier" ? callee.name : callee?.property?.name;
+        const fnName = callee?.type === 'Identifier' ? callee.name : callee?.property?.name;
         if (fnName && CLASS_HELPERS.has(fnName)) {
           for (const arg of node.arguments) visit(arg);
         }
         break;
       }
-      case "ConditionalExpression":
+      case 'ConditionalExpression':
         visit(node.consequent);
         visit(node.alternate);
         break;
-      case "LogicalExpression":
+      case 'LogicalExpression':
         visit(node.left);
         visit(node.right);
         break;
-      case "ArrayExpression":
+      case 'ArrayExpression':
         for (const el of node.elements) visit(el);
         break;
-      case "ObjectExpression":
+      case 'ObjectExpression':
         // clsx({ 'gap-12': cond }) 형태 — 키가 클래스다
         for (const prop of node.properties) {
-          if (prop.type === "Property" && prop.key) {
-            if (prop.key.type === "Literal" && typeof prop.key.value === "string") {
+          if (prop.type === 'Property' && prop.key) {
+            if (prop.key.type === 'Literal' && typeof prop.key.value === 'string') {
               push(prop.key.value, prop.key);
-            } else if (prop.key.type === "Identifier" && !prop.computed) {
+            } else if (prop.key.type === 'Identifier' && !prop.computed) {
               push(prop.key.name, prop.key);
             }
           }

package/eslint/lib/table-column.mjs

@@ -58,29 +58,55 @@ export function isNonQuantityLabel(label) {
 /** 객체 리터럴에서 프로퍼티 노드를 이름으로 찾는다 */
 export function prop(objectNode, name) {
   return objectNode.properties.find(
-    (p) =>
-      p.type === "Property" &&
+    p =>
+      p.type === 'Property' &&
       !p.computed &&
-      ((p.key.type === "Identifier" && p.key.name === name) ||
-        (p.key.type === "Literal" && p.key.value === name)),
+      ((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"
+  return node?.value?.type === 'Literal' && typeof node.value.value === 'string'
     ? node.value.value
     : 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}
  */
 export function asColumn(node) {
-  const nameProp = prop(node, "name");
-  const labelProp = prop(node, "label");
-  if (!nameProp || !labelProp || !prop(node, "field")) return null;
+  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 은 판단하지 않는다

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

@@ -11,7 +11,7 @@
  *
  * AGENTS.md §2-2.
  */
-import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
+import { collectClassTokens, stripVariants, stripModifiers } from '../lib/class-names.mjs';
 
 /**
  * 컴포넌트별 기대 간격 (px).
@@ -33,8 +33,8 @@ const GROUP_GAP = {
 
 /** 이 컴포넌트들은 전용 그룹 컴포넌트가 따로 있다 */
 const HAS_GROUP_COMPONENT = {
-  SRadio: "SRadioGroup (direction 으로 간격을 맞춥니다)",
-  SRadioButton: "SRadioGroup — 그룹 간격이 -1px(테두리 겹침)이라 직접 만들지 않습니다",
+  SRadio: 'SRadioGroup (direction 으로 간격을 맞춥니다)',
+  SRadioButton: 'SRadioGroup — 그룹 간격이 -1px(테두리 겹침)이라 직접 만들지 않습니다',
 };
 
 /** gap 유틸리티에서 px 값을 뽑는다. 토큰 var() 참조면 null(검사 제외) */
@@ -43,7 +43,7 @@ function readGap(tokens) {
     const util = stripModifiers(stripVariants(token));
     const m = util.match(/^gap-(.+)$/);
     if (!m) continue;
-    if (m[1].startsWith("[")) return { skip: true }; // gap-[var(--...)] 등
+    if (m[1].startsWith('[')) return { skip: true }; // gap-[var(--...)] 등
     // 간격 스케일은 `gap-sd-8` 형태다. 접두 없는 `gap-8` 은 Tailwind 기본 스케일이라
     // 값이 다르므로(32px) no-off-scale-spacing 이 따로 잡는다 — 여기선 다루지 않는다.
     const scaled = /^sd-(\d+)$/.exec(m[1]);
@@ -55,21 +55,19 @@ function readGap(tokens) {
 /** JSX 자식 중 컴포넌트 엘리먼트만 (공백 텍스트 제외) */
 function elementChildren(node) {
   return (node.children ?? []).filter(
-    (ch) =>
-      ch.type === "JSXElement" &&
-      ch.openingElement.name.type === "JSXIdentifier",
+    ch => ch.type === 'JSXElement' && ch.openingElement.name.type === 'JSXIdentifier',
   );
 }
 
-const nameOf = (el) => el.openingElement.name.name;
+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",
+      a => a.type === 'JSXAttribute' && a.name?.name === 'size',
     );
-    if (attr?.value?.type === "Literal" && typeof attr.value.value === "string") {
+    if (attr?.value?.type === 'Literal' && typeof attr.value.value === 'string') {
       return attr.value.value;
     }
   }
@@ -78,33 +76,33 @@ function sizeOf(children) {
 
 /** spec(number | {default, bySize}) 을 size 로 해석 */
 function resolve(spec, size) {
-  if (typeof spec === "number") return spec;
+  if (typeof spec === 'number') return spec;
   if (!spec) return undefined;
   return (size && spec.bySize?.[size]) ?? spec.default;
 }
 
 export default {
   meta: {
-    type: "problem",
+    type: 'problem',
     docs: {
-      description: "같은 컴포넌트를 나열할 때 컴포넌트별 그룹 간격 사용",
+      description: '같은 컴포넌트를 나열할 때 컴포넌트별 그룹 간격 사용',
     },
     schema: [
       {
-        type: "object",
+        type: 'object',
         properties: {
-          ignore: { type: "array", items: { type: "string" }, uniqueItems: true },
+          ignore: { type: 'array', items: { type: 'string' }, uniqueItems: true },
         },
         additionalProperties: false,
       },
     ],
     messages: {
       wrongGap:
-        "{{component}} 를 {{dirLabel}} 배열할 때 간격은 `gap-sd-{{expected}}` 입니다{{actualLabel}}. (AGENTS.md §2-2)",
+        '{{component}} 를 {{dirLabel}} 배열할 때 간격은 `gap-sd-{{expected}}` 입니다{{actualLabel}}. (AGENTS.md §2-2)',
       useGroupComponent:
-        "{{component}} 를 직접 flex 로 감싸지 마세요 — {{suggestion}}. (AGENTS.md §2-2)",
+        '{{component}} 를 직접 flex 로 감싸지 마세요 — {{suggestion}}. (AGENTS.md §2-2)',
     },
-    fixable: "code",
+    fixable: 'code',
   },
 
   create(context) {
@@ -113,7 +111,8 @@ export default {
     return {
       JSXElement(node) {
         const classAttr = node.openingElement.attributes.find(
-          (a) => a.type === "JSXAttribute" && (a.name?.name === "className" || a.name?.name === "class"),
+          a =>
+            a.type === 'JSXAttribute' && (a.name?.name === 'className' || a.name?.name === 'class'),
         );
         if (!classAttr) return;
 
@@ -121,23 +120,24 @@ export default {
         const utils = tokens.map(({ token }) => stripModifiers(stripVariants(token)));
 
         // flex 컨테이너가 아니면 대상이 아니다
-        if (!utils.includes("flex") && !utils.includes("inline-flex")) return;
+        if (!utils.includes('flex') && !utils.includes('inline-flex')) return;
         // 양끝 분리는 gap 규칙 대상이 아니다 (하단 버튼 배치 등)
-        if (utils.some((u) => u.startsWith("justify-between") || u.startsWith("justify-around"))) return;
+        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 (!children.every(ch => nameOf(ch) === first)) return;
         if (ignore.has(first)) return;
 
         // 전용 그룹 컴포넌트가 있으면 그쪽을 권한다
         if (HAS_GROUP_COMPONENT[first]) {
           context.report({
             node: node.openingElement,
-            messageId: "useGroupComponent",
+            messageId: 'useGroupComponent',
             data: { component: first, suggestion: HAS_GROUP_COMPONENT[first] },
           });
           return;
@@ -146,7 +146,7 @@ export default {
         const spec = GROUP_GAP[first];
         if (!spec) return;
 
-        const vertical = utils.includes("flex-col") || utils.includes("flex-col-reverse");
+        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;
@@ -157,24 +157,26 @@ export default {
 
         context.report({
           node: node.openingElement,
-          messageId: "wrongGap",
+          messageId: 'wrongGap',
           data: {
             component: first,
-            dirLabel: spec.both ? "" : vertical ? "세로로" : "가로로",
+            dirLabel: spec.both ? '' : vertical ? '세로로' : '가로로',
             expected: String(expected),
-            actualLabel: gap.value == null ? " (지정되지 않았습니다)" : ` — 현재 gap-sd-${gap.value}`,
+            actualLabel:
+              gap.value == null ? ' (지정되지 않았습니다)' : ` — 현재 gap-sd-${gap.value}`,
           },
           fix(fixer) {
             // 기존 gap 유틸리티가 리터럴 문자열일 때만 안전하게 교체한다
             if (gap.value == null) return null;
             const literal = classAttr.value;
             const raw =
-              literal?.type === "Literal"
+              literal?.type === 'Literal'
                 ? literal
-                : literal?.type === "JSXExpressionContainer" && literal.expression.type === "Literal"
+                : literal?.type === 'JSXExpressionContainer' &&
+                    literal.expression.type === 'Literal'
                   ? literal.expression
                   : null;
-            if (!raw || typeof raw.value !== "string") return null;
+            if (!raw || typeof raw.value !== 'string') return null;
             const next = raw.value.replace(
               new RegExp(`(^|\\s)gap-sd-${gap.value}(?=\\s|$)`),
               `$1gap-sd-${expected}`,

package/eslint/rules/divider-vertical-height.mjs

@@ -0,0 +1,137 @@
+/**
+ * 세로 `SDivider` 의 높이를 `className="h-*"` 로 주면 정렬이 조용히 깨지는 것을 잡는다.
+ *
+ * 세로 분할선의 기본값은 `h-auto ... self-stretch` 라, 높이를 주지 않으면 부모 줄 높이를
+ * 그대로 채운다. 그런데 `align-self: stretch` 는 **교차축 크기가 auto 일 때만** 늘리므로
+ * className 으로 높이가 정해지는 순간 stretch 가 무효가 되고 flex-start 처럼 줄 맨 위에
+ * 붙는다. tailwind-merge 는 `h-auto` 만 교체하고 `self-stretch` 는 남기므로 경고도 없다.
+ *
+ * 높이와 정렬은 같이 정해져야 하는 값이라 컴포넌트가 함께 맡는다 — `height` prop 을 쓴다.
+ *
+ *   <SDivider vertical height={20} />          // 높이 + self-center
+ *   <SDivider vertical className="h-sd-20" />  // 위로 솟는다
+ *
+ * 정렬을 **직접 지정한 경우**(`self-center` `self-start` `my-auto` …)는 알고 쓰는 것으로
+ * 보고 잡지 않는다.
+ *
+ * AGENTS.md §3-6.
+ */
+import { collectClassTokens, stripVariants, stripModifiers } from '../lib/class-names.mjs';
+
+/** 높이를 정하는 유틸리티인가 — `h-auto` 만 예외(기본값과 같아 stretch 가 살아 있다) */
+function heightUtil(util) {
+  const m = /^h-(.+)$/.exec(util);
+  if (!m || m[1] === 'auto') return null;
+  return m[1];
+}
+
+/** 교차축 정렬을 이미 직접 지정했는가 */
+function alignsSelf(util) {
+  return /^self-/.test(util) || util === 'my-auto' || util === 'mt-auto' || util === 'mb-auto';
+}
+
+/**
+ * 높이 유틸리티 값을 `height` prop 값으로 옮긴다. 옮길 수 없으면 null (수정 제안 없음).
+ *   h-sd-20        → {20}
+ *   h-[20px]       → {20}
+ *   h-[var(--x)]   → "var(--x)"
+ */
+function toHeightProp(value) {
+  const scaled = /^sd-(\d+)$/.exec(value);
+  if (scaled) return `{${scaled[1]}}`;
+  const arbitrary = /^\[(.+)\]$/.exec(value);
+  if (!arbitrary) return null;
+  const inner = arbitrary[1].replace(/_/g, ' ');
+  const px = /^(\d+(?:\.\d+)?)px$/.exec(inner);
+  if (px) return `{${px[1]}}`;
+  if (inner.includes('"')) return null;
+  return `"${inner}"`;
+}
+
+const isClassAttr = a =>
+  a.type === 'JSXAttribute' && (a.name?.name === 'className' || a.name?.name === 'class');
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '세로 SDivider 의 높이는 className 이 아니라 height prop 으로 지정',
+    },
+    schema: [],
+    messages: {
+      useHeightProp:
+        '세로 SDivider 의 높이는 `height` prop 으로 주세요{{suggestion}} — `className` 으로 주면 `align-self: stretch` 가 무효가 되어 선이 줄 맨 위에 붙습니다. (AGENTS.md §3-6)',
+    },
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'SDivider') return;
+
+        const attrs = node.attributes;
+        const named = n => attrs.find(a => a.type === 'JSXAttribute' && a.name?.name === n);
+
+        // 세로 분할선만 대상. `vertical={expr}` 처럼 값이 정적이지 않으면 판단하지 않는다.
+        const vertical = named('vertical');
+        if (!vertical) return;
+        if (vertical.value !== null && vertical.value?.expression?.value !== true) return;
+
+        // 이미 height prop 을 쓰고 있으면 컴포넌트가 정렬까지 맡는다
+        if (named('height')) return;
+
+        const classAttr = attrs.find(isClassAttr);
+        if (!classAttr) return;
+
+        const tokens = collectClassTokens(classAttr);
+        let height = null;
+        for (const { token } of tokens) {
+          const util = stripModifiers(stripVariants(token));
+          if (alignsSelf(util)) return; // 정렬을 직접 정했다 — 의도한 것으로 본다
+          // variant 가 붙은 높이(`md:h-sd-20`)는 prop 으로 옮길 수 없어 판단에서 뺀다
+          if (height === null && token === util) height = heightUtil(util);
+        }
+        if (height === null) return;
+
+        const propValue = toHeightProp(height);
+
+        context.report({
+          node,
+          messageId: 'useHeightProp',
+          data: { suggestion: propValue ? ` (\`height=${propValue}\`)` : '' },
+          fix(fixer) {
+            if (!propValue) return null;
+            // className 이 통짜 문자열일 때만 안전하게 손댄다 (cn()·템플릿 리터럴은 제외)
+            const raw =
+              classAttr.value?.type === 'Literal'
+                ? classAttr.value
+                : classAttr.value?.type === 'JSXExpressionContainer' &&
+                    classAttr.value.expression.type === 'Literal'
+                  ? classAttr.value.expression
+                  : null;
+            if (!raw || typeof raw.value !== 'string') return null;
+
+            const rest = raw.value
+              .split(/\s+/)
+              .filter(Boolean)
+              .filter(t => t !== `h-${height}`);
+            if (rest.length === raw.value.split(/\s+/).filter(Boolean).length) return null;
+
+            const fixes = [fixer.insertTextAfter(vertical, ` height=${propValue}`)];
+            if (rest.length > 0) {
+              fixes.push(fixer.replaceText(raw, `"${rest.join(' ')}"`));
+            } else {
+              // 속성만 지우면 공백이 두 칸 남는다 — 앞 공백까지 함께 지운다
+              const src = context.sourceCode ?? context.getSourceCode();
+              const [start, end] = classAttr.range;
+              const from = /\s/.test(src.text[start - 1]) ? start - 1 : start;
+              fixes.push(fixer.removeRange([from, end]));
+            }
+            return fixes;
+          },
+        });
+      },
+    };
+  },
+};