sellmate-design-system-react 9.0.0-beta.3 → 9.0.0-beta.31

package/dist/theme.css

@@ -208,6 +208,7 @@
   --color-field-icon-default: #888888;
   --color-control-bg-inverseHover: #0075FF;
   --color-navigation-gnb-bg-dark: #001B39;
+  --color-navigation-gnb-bg-system: #004177;
   --color-primary-10: #EFF6FF;
   --color-primary-20: #E6F1FF;
   --color-primary-25: #D9EAFF;
@@ -328,15 +329,15 @@
   --opacity-040: 40%;
   --opacity-060: 60%;
   --z-raised: 1;
-  --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
-  --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
-  --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+  --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+  --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 8px 12px -4px rgba(34,34,34,0.16);
   --shadow-spread-sm: 0px 0px 8px 0px rgba(34,34,34,0.1);
   --shadow-spread-md: 0px 0px 24px 0px rgba(34,34,34,0.2);
   --shadow-focus: 0px 0px 8px 0px rgba(0,117,255,0.25);
-  --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
-  --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
-  --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+  --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+  --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 8px 12px -4px rgba(34,34,34,0.16);
 }
 
 /* 시맨틱 토큰 (별칭 해석값) — var()로 참조 */
@@ -497,6 +498,7 @@
   --sys-color-field-icon-default: #888888;
   --sys-color-control-bg-inverseHover: #0075FF;
   --sys-color-navigation-gnb-bg-dark: #001B39;
+  --sys-color-navigation-gnb-bg-system: #004177;
 
   /* 컴포넌트 토큰 */
   --cmp-button-xs-height: 24px;
@@ -671,7 +673,10 @@
   --cmp-radioButton-xs-paddingX: 8px;
   --cmp-radioButton-sm-height: 28px;
   --cmp-radioButton-sm-paddingX: 12px;
-  --cmp-radioButton-radius: 4px;
+  --cmp-radioButton-md-height: 36px;
+  --cmp-radioButton-md-paddingX: 20px;
+  --cmp-radioButton-radius-sm: 4px;
+  --cmp-radioButton-radius-md: 6px;
   --cmp-radioButton-border-width: 1px;
   --cmp-radioButton-border-default: #CCCCCC;
   --cmp-radioButton-border-select: #0075FF;
@@ -685,6 +690,22 @@
   --cmp-radioButton-content-select: #0075FF;
   --cmp-radioButton-content-disabled: #888888;
   --cmp-radioButton-group-gap: -1px;
+  --cmp-radioCard-radius: 8px;
+  --cmp-radioCard-paddingX: 16px;
+  --cmp-radioCard-paddingY: 8px;
+  --cmp-radioCard-border-width: 1px;
+  --cmp-radioCard-border-default: #E1E1E1;
+  --cmp-radioCard-border-selected: #93C4FF;
+  --cmp-radioCard-border-hover: #AAAAAA;
+  --cmp-radioCard-bg-default: #FFFFFF;
+  --cmp-radioCard-bg-selected: #EFF6FF;
+  --cmp-radioCard-bg-hover: #F9F9F9;
+  --cmp-radioCard-bg-disabled: #EEEEEE;
+  --cmp-radioCard-gap: 8px;
+  --cmp-radioCard-label-color: #222222;
+  --cmp-radioCard-subtitle-paddingLeft: 24px;
+  --cmp-radioCard-subtitle-color: #555555;
+  --cmp-radioCard-group-gap: 8px;
   --cmp-listBoxItem-paddingY: 4px;
   --cmp-listBoxItem-paddingRight: 12px;
   --cmp-listBoxItem-gap: 8px;
@@ -746,6 +767,11 @@
   --cmp-field-errorMessage-color: #E30000;
   --cmp-field-contents-gap: 4px;
   --cmp-field-message-paddingX: 8px;
+  --cmp-field-width-xs: 80px;
+  --cmp-field-width-sm: 120px;
+  --cmp-field-width-md: 160px;
+  --cmp-field-width-lg: 240px;
+  --cmp-field-width-xl: 480px;
   --cmp-textinput-sm-height: 28px;
   --cmp-textinput-sm-paddingX: 12px;
   --cmp-textinput-sm-paddingY: 4px;
@@ -971,20 +997,30 @@
   --cmp-tag-md-radius: 8px;
   --cmp-tag-red-content: #FB4444;
   --cmp-tag-red-bg: #FCEFEF;
+  --cmp-tag-red-deep-bg: #FB4444;
   --cmp-tag-orange-content: #FF6B00;
   --cmp-tag-orange-bg: #FEF1EA;
+  --cmp-tag-orange-deep-bg: #FF6B00;
   --cmp-tag-yellow-content: #916C0D;
   --cmp-tag-yellow-bg: #FFF7DD;
+  --cmp-tag-yellow-deep-bg: #FFC700;
+  --cmp-tag-yellow-deep-content: #222222;
   --cmp-tag-green-content: #00973C;
   --cmp-tag-green-bg: #E8F9EF;
+  --cmp-tag-green-deep-bg: #00973C;
   --cmp-tag-blue-content: #0075FF;
   --cmp-tag-blue-bg: #E6F1FF;
+  --cmp-tag-blue-deep-bg: #0075FF;
   --cmp-tag-darkblue-content: #006AC1;
   --cmp-tag-darkblue-bg: #EAF5FE;
+  --cmp-tag-darkblue-deep-bg: #006AC1;
   --cmp-tag-indigo-content: #004290;
   --cmp-tag-indigo-bg: #EFF6FF;
+  --cmp-tag-indigo-deep-bg: #004290;
   --cmp-tag-grey-content: #737373;
   --cmp-tag-grey-bg: #EEEEEE;
+  --cmp-tag-grey-deep-bg: #737373;
+  --cmp-tag-deep-content: #FFFFFF;
   --cmp-tag-group-gap: 8px;
   --cmp-badge-size: 6px;
   --cmp-badge-radius: 9999px;
@@ -1149,8 +1185,10 @@
   --cmp-guide-contents-typography-color: #222222;
   --cmp-guide-contents-icon: #00973C;
   --cmp-guide-contents-radius: 8px;
-  --cmp-guide-contents-depth-paddingLeft: 32px;
-  --cmp-progress-linear-height: 20px;
+  --cmp-guide-contents-depth-paddingLeft: 24px;
+  --cmp-progress-linear-height-xs: 12px;
+  --cmp-progress-linear-height-sm: 20px;
+  --cmp-progress-linear-height-md: 24px;
   --cmp-progress-linear-radius: 9999px;
   --cmp-progress-linear-gap: 12px;
   --cmp-progress-circular-size: 80px;
@@ -1238,10 +1276,8 @@
   --cmp-stepper-vertical-title-paddingTop: 12px;
   --cmp-stepper-vertical-title-paddingBottom: 6px;
   --cmp-stepper-vertical-title-text: #004290;
-  --cmp-tab-main-lg-height: 44px;
-  --cmp-tab-main-lg-paddingX: 32px;
-  --cmp-tab-main-md-height: 36px;
-  --cmp-tab-main-md-paddingX: 24px;
+  --cmp-tab-main-height: 36px;
+  --cmp-tab-main-paddingX: 24px;
   --cmp-tab-main-gap: 8px;
   --cmp-tab-main-container-gap: 4px;
   --cmp-tab-main-radius: 6px;
@@ -1310,6 +1346,86 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-gnb-system-panel-light-bg: #FFFFFF;
+  --cmp-gnb-system-panel-light-border: #E1E1E1;
+  --cmp-gnb-system-panel-dark-bg: #004177;
+  --cmp-gnb-system-panel-dark-border: #006AC1;
+  --cmp-gnb-system-panel-gap: 8px;
+  --cmp-gnb-system-panel-divider-color-light: #E1E1E1;
+  --cmp-gnb-system-panel-divider-color-dark: #006AC1;
+  --cmp-gnb-system-panel-divider-color-darker: #004290;
+  --cmp-gnb-system-domainTag-paddingX: 12px;
+  --cmp-gnb-system-domainTag-paddingY: 2px;
+  --cmp-gnb-system-domainTag-radius: 6px;
+  --cmp-gnb-system-domainTag-light-bg: #F6F6F6;
+  --cmp-gnb-system-domainTag-light-text: #555555;
+  --cmp-gnb-system-domainTag-dark-bg: #07284A;
+  --cmp-gnb-system-domainTag-dark-text: #FFFFFF;
+  --cmp-gnb-system-domainTag-darker-bg: #004177;
+  --cmp-gnb-system-domainTag-darker-text: #FFFFFF;
+  --cmp-gnb-system-item-height: 32px;
+  --cmp-gnb-system-item-radius: 8px;
+  --cmp-gnb-system-item-icon-frame: 24px;
+  --cmp-gnb-system-item-icon-glyph: 20px;
+  --cmp-gnb-system-item-icon-radius: 4px;
+  --cmp-gnb-system-item-iconLabelGap: 8px;
+  --cmp-gnb-system-item-light-bg-default: #FFFFFF;
+  --cmp-gnb-system-item-light-bg-hover: #F6F6F6;
+  --cmp-gnb-system-item-light-icon-bg: #FFFFFF;
+  --cmp-gnb-system-item-light-icon-default: #888888;
+  --cmp-gnb-system-item-light-text: #222222;
+  --cmp-gnb-system-item-dark-bg-default: #004177;
+  --cmp-gnb-system-item-dark-bg-hover: #025497;
+  --cmp-gnb-system-item-dark-icon-bg-default: #004177;
+  --cmp-gnb-system-item-dark-icon-bg-hover: #FFFFFF;
+  --cmp-gnb-system-item-dark-text: #FFFFFF;
+  --cmp-gnb-system-item-darker-bg-default: #001B39;
+  --cmp-gnb-system-item-darker-bg-hover: #002B5E;
+  --cmp-gnb-system-item-darker-icon-bg-default: #001B39;
+  --cmp-gnb-system-item-darker-icon-bg-hover: #FFFFFF;
+  --cmp-gnb-system-item-darker-text: #FFFFFF;
+  --cmp-gnb-system-actionButton-paddingLeft: 4px;
+  --cmp-gnb-system-actionButton-paddingRight: 6px;
+  --cmp-gnb-system-actionButton-selectData-gap: 4px;
+  --cmp-gnb-system-actionButton-selectData-icon: 16px;
+  --cmp-gnb-system-actionButton-selectData-text-light: #005CC9;
+  --cmp-gnb-system-actionButton-selectData-text-dark: #BBDAFF;
+  --cmp-gnb-system-actionButton-switch-icon: 16px;
+  --cmp-gnb-system-actionButton-switch-text-light: #555555;
+  --cmp-gnb-system-actionButton-switch-text-dark: #FFFFFF;
+  --cmp-gnb-system-actionButton-select-icon: 16px;
+  --cmp-gnb-system-accountButton-paddingY: 4px;
+  --cmp-gnb-system-accountButton-paddingX: 12px;
+  --cmp-gnb-system-accountButton-gap: 8px;
+  --cmp-gnb-system-accountButton-icon: 16px;
+  --cmp-gnb-system-accountButton-bg-default: #FFFFFF;
+  --cmp-gnb-system-accountButton-bg-hover: #F6F6F6;
+  --cmp-gnb-system-accountButton-bg-negativeHover: #FCEFEF;
+  --cmp-gnb-system-accountButton-content-default: #222222;
+  --cmp-gnb-system-accountButton-content-negative: #E30000;
+  --cmp-gnb-system-accountButton-selectData-gap: 4px;
+  --cmp-gnb-system-accountButton-selectData-icon: 16px;
+  --cmp-gnb-system-accountButton-selectData-text: #005CC9;
+  --cmp-gnb-system-accountListBox-width: 240px;
+  --cmp-gnb-system-accountListBox-bg: #FFFFFF;
+  --cmp-gnb-system-accountListBox-radius: 4px;
+  --cmp-gnb-system-accountListBox-userdata-bg: #F9F9F9;
+  --cmp-gnb-system-accountListBox-userdata-paddingX: 12px;
+  --cmp-gnb-system-accountListBox-userdata-paddingY: 8px;
+  --cmp-gnb-system-accountListBox-userdata-email-color: #888888;
+  --cmp-gnb-system-accountListBox-userdata-name-color: #555555;
+  --cmp-gnb-system-accountListBox-userdata-role-color: #888888;
+  --cmp-gnb-system-accountListBox-list-paddingY: 4px;
+  --cmp-gnb-system-alertButton-paddingX: 4px;
+  --cmp-gnb-system-alertButton-count-color-light: #0075FF;
+  --cmp-gnb-system-alertButton-count-color-dark: #FFD643;
+  --cmp-gnb-system-alertButton-bg-notificationHover-light: #EFF6FF;
+  --cmp-gnb-system-alertButton-icon-color-notification-light: #64ABFF;
+  --cmp-gnb-system-alertButton-icon-color-notification-dark: #FEE17C;
+  --cmp-gnb-system-setting-paddingX: 4px;
+  --cmp-gnb-system-min-padding: 8px;
+  --cmp-gnb-system-project-gap: 8px;
+  --cmp-gnb-system-project-padding: 8px;
   --cmp-list-group-gap: 8px;
   --cmp-list-group-padding: 16px;
   --cmp-listItem-paddingX: 16px;
@@ -1362,7 +1478,6 @@
   --cmp-listDraggableItem-bordered-border-hover: #AAAAAA;
   --cmp-listDraggableItem-bordered-dragging-bg: #EFF6FF;
   --cmp-listDraggableItem-bordered-dragging-border-color: #2D8DFF;
-  --cmp-listDraggableItem-bordered-dragging-border-width: 2px;
   --cmp-listDraggableItem-border-default: #E1E1E1;
   --cmp-listDraggableItem-border-width-default: 1px;
   --cmp-listDraggableItem-text-default: #222222;
@@ -1397,9 +1512,8 @@
   --cmp-tree-item-rowGap: 8px;
   --cmp-tree-item-contentGap: 12px;
   --cmp-tree-item-text-default: #222222;
-  --cmp-tree-item-text-selected: #0075FF;
   --cmp-tree-item-arrow-icon: 16px;
-  --cmp-tree-connector-line-color: #AAAAAA;
+  --cmp-tree-connector-line-color: #E1E1E1;
   --cmp-pageHeader-paddingX: 16px;
   --cmp-pageHeader-gap: 12px;
   --cmp-pageHeader-title-paddingLeft: 4px;
@@ -1559,6 +1673,12 @@
     font-weight: 500;
     line-height: 20px;
   }
+  .typo-body-sm-semibold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 20px;
+  }
   .typo-body-sm-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 12px;
@@ -1577,6 +1697,12 @@
     font-weight: 500;
     line-height: 24px;
   }
+  .typo-body-md-semibold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 24px;
+  }
   .typo-body-md-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 14px;

package/eslint/index.mjs

@@ -11,6 +11,9 @@ 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";
 
@@ -24,6 +27,9 @@ const plugin = {
     "table-numeric-align": tableNumericAlign,
     "require-locale-number": requireLocaleNumber,
     "component-group-gap": componentGroupGap,
+    "field-width-grade": fieldWidthGrade,
+    "table-column-width": tableColumnWidth,
+    "divider-vertical-height": dividerVerticalHeight,
   },
 };
 
@@ -48,12 +54,18 @@ const recommended = [
       [`${PLUGIN_NAME}/no-off-scale-spacing`]: "error",
       // 생 <button>/<table> 은 디자인 시스템을 통째로 우회하는 것 (스타일 자유와 무관)
       [`${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",
+      // 폭 등급 환산이 아직 잠정치라 권고에 둔다 (디자인 확정표가 오면 error 승격 검토)
+      [`${PLUGIN_NAME}/field-width-grade`]: "warn",
+      // 컬럼 폭 — 폭 미지정(기본 120px)·스페이서 오용은 권고, % · clamp() 는 조용히 깨지므로 error
+      [`${PLUGIN_NAME}/table-column-width`]: "warn",
 
       // 앱 고유 치수(w-[280px])·일회성 값에는 임의 값이 정당하다. 필요한 팀만 켠다.
       [`${PLUGIN_NAME}/no-arbitrary-class`]: "off",
@@ -79,6 +91,8 @@ const strict = [
       [`${PLUGIN_NAME}/component-group-gap`]: "error",
       [`${PLUGIN_NAME}/table-numeric-align`]: "error",
       [`${PLUGIN_NAME}/require-locale-number`]: "error",
+      [`${PLUGIN_NAME}/field-width-grade`]: "error",
+      [`${PLUGIN_NAME}/table-column-width`]: "error",
     },
   },
 ];

package/eslint/lib/table-column.mjs

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

package/eslint/rules/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;
+          },
+        });
+      },
+    };
+  },
+};

package/eslint/rules/field-width-grade.d.mts

@@ -0,0 +1,41 @@
+/**
+ * playground 의 실측 페이지(FieldWidthGradePage)가 규칙과 같은 계산을 쓰기 위한 타입 선언.
+ * 규칙 본체는 소비 앱이 그대로 실행하는 plain ESM 이라 .mjs 로 두고, 타입만 여기에 붙인다.
+ */
+
+export type FieldGrade = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FieldSize = 'sm' | 'md';
+
+export interface FieldComponentSpec {
+  /** 스키마 상한을 담는 prop — 숫자 필드는 maxLength 가 아니라 max 다 */
+  lengthProp: 'maxLength' | 'max';
+  font: Record<FieldSize, number>;
+  /** 글자가 쓸 수 없는 폭의 합 (좌우 패딩 · 테두리 · 스테퍼) */
+  chrome: Record<FieldSize, number>;
+  /** 한글이 들어갈 수 있는가 */
+  korean: boolean;
+  grades: FieldGrade[];
+}
+
+export declare const GRADES: Record<FieldGrade, number>;
+export declare const CHAR_RATIO: { narrow: number; wide: number };
+export declare const COMPONENTS: Record<string, FieldComponentSpec>;
+
+export declare function capacity(
+  spec: FieldComponentSpec,
+  size: FieldSize,
+  grade: FieldGrade,
+  ratio: number,
+  grades?: Record<FieldGrade, number>,
+): number;
+
+export declare function smallestGradeFor(
+  spec: FieldComponentSpec,
+  size: FieldSize,
+  len: number,
+  ratio: number,
+  grades?: Record<FieldGrade, number>,
+): FieldGrade | undefined;
+
+declare const rule: unknown;
+export default rule;