sellmate-design-system-react 9.0.0-beta.7 → 9.0.0-beta.70

package/eslint/index.mjs

@@ -12,6 +12,8 @@ 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";
 
@@ -26,6 +28,8 @@ const plugin = {
     "require-locale-number": requireLocaleNumber,
     "component-group-gap": componentGroupGap,
     "field-width-grade": fieldWidthGrade,
+    "table-column-width": tableColumnWidth,
+    "divider-vertical-height": dividerVerticalHeight,
   },
 };
 
@@ -50,6 +54,8 @@ 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",
@@ -58,6 +64,8 @@ const recommended = [
       [`${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",
@@ -84,6 +92,7 @@ const strict = [
       [`${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.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 대비 비율).
@@ -122,6 +122,8 @@ export default {
     docs: {
       description: "필드 폭을 maxLength(스키마 상한) 기준 등급으로 고정",
     },
+    // px → 등급 이름 치환만 자동으로 고친다. 등급 선택 자체는 스키마를 봐야 하므로 손대지 않는다.
+    fixable: "code",
     schema: [
       {
         type: "object",
@@ -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)",
+      pxGrade:
+        "`width={{{width}}}` 는 {{grade}} 등급의 px 값입니다. `width=\"{{grade}}\"` 로 등급을 주세요 — px 를 박으면 `--cmp-field-width-*` 가 바뀌어도 이 화면만 그 자리에 남습니다. (§1-2)",
       noBound:
         "`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)",
       overMax:
         "`{{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)",
     },
   },
 
@@ -224,9 +228,11 @@ export default {
           return;
         }
 
-        /* ── width 가 등급 값인가 ── */
+        /* ── width 가 등급인가 ── */
+        // 등급 이름이 정답이다. px 는 등급 값과 일치할 때만 받아 주고(아래 pxGrade) 등급으로 바꾸게 한다.
+        const byName = spec.grades.includes(rawWidth);
         const px = typeof rawWidth === "number" ? rawWidth : /^(\d+)px$/.exec(String(rawWidth))?.[1];
-        const grade = px != null && spec.grades.find(g => grades[g] === Number(px));
+        const grade = byName ? rawWidth : px != null && spec.grades.find(g => grades[g] === Number(px));
         if (!grade) {
           context.report({
             node: reportNode,
@@ -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/table-column-width.mjs

@@ -0,0 +1,110 @@
+/**
+ * `STableColumn` 의 폭 선언을 검사한다.
+ *
+ * 테이블은 `table-fixed` 라 컬럼 폭이 `<colgroup>` 의 `<col width>` 로 들어간다.
+ * 그래서 폭에 넣을 수 있는 값은 px 뿐이고, 그 밖의 값은 **화면에서 조용히 어긋난다** —
+ * `'30%'` 는 `parseInt` 에 30(px)으로 읽히고, `clamp()` 같은 함수형 값은 NaN 이 되어
+ * `<col>` 폭이 통째로 무효가 된 뒤 auto 로 떨어진다. 둘 다 에러 없이 화면만 틀어진다.
+ *
+ * 그리고 폭을 아예 주지 않으면 기본 120px 이 조용히 들어간다. "짧은 열이라 그대로 둔 것"과
+ * "판단을 빠뜨린 것"이 구분되지 않으므로, 120px 이 맞더라도 `width: 120` 을 적는 편이 낫다.
+ *
+ * `autoWidth` 는 남은 폭을 흡수하는 스페이서 열 하나에 쓰는 것이라, 값을 그리는 열
+ * (`render` · `format` 이 붙은 열)에 주면 폭이 다른 열에 좌우돼 화면마다 달라진다.
+ *
+ * 대상은 `name`(문자열 리터럴) · `label` 에 더해 `field` 또는 `autoWidth` 를 가진 객체 리터럴이다.
+ * `STableColumn` 타입이 값을 그리는 열에는 `field` 를, 스페이서 열에는 `autoWidth` 를 요구하므로
+ * 검사 범위는 그대로이면서, 같은 모양(`name` + `label`)인 검색 필터 필드가 걸리지 않는다.
+ *
+ * AGENTS.md §3-4.
+ */
+
+import { prop, asColumnShape } from "../lib/table-column.mjs";
+
+/** px 로 읽히는 폭 값인가 — 숫자 리터럴 또는 `'120px'` */
+function pxWidth(valueNode) {
+  if (!valueNode) return undefined;
+  if (valueNode.type === "Literal" && typeof valueNode.value === "number") return valueNode.value;
+  if (valueNode.type === "Literal" && typeof valueNode.value === "string") {
+    const m = /^\s*(\d+)px\s*$/.exec(valueNode.value);
+    return m ? Number(m[1]) : undefined;
+  }
+  return undefined;
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "테이블 컬럼 폭은 px 로만 주고, autoWidth 는 스페이서 열에만 쓴다",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          /** 검사에서 뺄 컬럼 name */
+          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      noWidth:
+        "컬럼 `{{name}}` 에 `width` 도 `autoWidth` 도 없어 기본 120px 이 조용히 들어갑니다. 120px 이 맞더라도 `width: 120` 으로 적어 판단한 값임을 남기세요. (AGENTS.md §3-4)",
+      badWidth:
+        "컬럼 `{{name}}` 의 `width: {{width}}` 는 px 이 아닙니다. 컬럼 폭은 `<col width>` 로 들어가 % · clamp() · min() 은 계산되지 않고 조용히 깨집니다 — `width: 120` 또는 `'120px'` 로 주세요. (AGENTS.md §3-4)",
+      autoWidthWithContent:
+        "컬럼 `{{name}}` 은 `{{contentProp}}` 로 값을 그리는데 `autoWidth` 입니다. `autoWidth` 는 남은 폭을 흡수하는 스페이서 열 하나에만 씁니다 — 값이 들어가는 열은 폭이 다른 열에 좌우돼 화면마다 달라집니다. px 로 폭을 명시하세요. (AGENTS.md §3-4)",
+    },
+  },
+
+  create(context) {
+    const allow = new Set(context.options[0]?.allow ?? []);
+
+    return {
+      ObjectExpression(node) {
+        const column = asColumnShape(node);
+        if (!column) return;
+        const { columnName } = column;
+        if (allow.has(columnName)) return;
+
+        const widthProp = prop(node, "width");
+        const autoWidthProp = prop(node, "autoWidth");
+        // autoWidth 를 변수로 넘기면 켜졌는지 알 수 없다 — 판단하지 않는다
+        const autoWidthValue = autoWidthProp?.value;
+        if (autoWidthProp && autoWidthValue?.type !== "Literal") return;
+        const autoWidth = autoWidthValue?.value === true;
+
+        if (autoWidth) {
+          const contentProp = prop(node, "render") ?? prop(node, "format");
+          if (contentProp) {
+            context.report({
+              node: autoWidthProp,
+              messageId: "autoWidthWithContent",
+              data: {
+                name: columnName,
+                contentProp: contentProp.key.name ?? contentProp.key.value,
+              },
+            });
+          }
+          return;
+        }
+
+        if (!widthProp) {
+          context.report({ node: column.nameProp, messageId: "noWidth", data: { name: columnName } });
+          return;
+        }
+
+        // 변수·계산식으로 넘긴 폭은 정적으로 알 수 없다
+        if (widthProp.value.type !== "Literal") return;
+        if (pxWidth(widthProp.value) === undefined) {
+          context.report({
+            node: widthProp,
+            messageId: "badWidth",
+            data: { name: columnName, width: context.sourceCode.getText(widthProp.value) },
+          });
+        }
+      },
+    };
+  },
+};

package/eslint/scale.gen.mjs

@@ -7,10 +7,13 @@ export const SPACING = [2,4,6,8,10,12,16,19,20,22,24,28,32,36,40,44,48,56,60,62,
 export const TEXT_SIZES = [10,11,12,13,14,16,18,20,24,28,32];
 
 /** rounded-* 가 받을 수 있는 키 */
-export const RADIUS = ["2","4","6","8","full","control-sm","control-md","feedback-xs-square","feedback-sm-square","feedback-pill","field-sm","field-md","navigation","item-bordered"];
+export const RADIUS = ["2","4","6","8","12","full","control-sm","control-md","feedback-xs-square","feedback-sm-square","feedback-pill","field-sm","field-md","navigation","item-bordered"];
 
 /** 타이포그래피 프리셋 클래스 */
-export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
+export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-lg-semibold","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-md-semibold","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-sm-semibold","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-regular","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-semibold","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xl","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
-export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-tableHeader","bg-warning","black","blue-moderate","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-moderate","danger-strong","danger-subtle","darkblue-moderate","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-moderate","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-moderate","grey-strong","grey-subtle","indigo-moderate","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","navigation-gnb-bg-system","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-moderate","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","purple-15","purple-25","purple-45","purple-55","purple-65","purple-70","purple-75","purple-80","purple-85","purple-90","purple-95","purple-99","purple-moderate","purple-strong","purple-subtle","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-moderate","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-moderate","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-moderate","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+
+/** 필드 폭 등급 (px). SFieldWidth 의 'xs'|'sm'|'md'|'lg'|'xl' 이 풀리는 값이다 */
+export const FIELD_WIDTHS = {"xs":80,"sm":120,"md":160,"lg":240,"xl":480};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.7",
+  "version": "9.0.0-beta.70",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -49,7 +49,8 @@
     "build:dts": "tsc -p tsconfig.build.json --emitDeclarationOnly",
     "gen:tokens": "node scripts/generate-tokens.mjs",
     "docs:gen": "node scripts/gen-docs.mjs",
-    "build:css": "cp ./src/styles/theme.css ./dist/theme.css && tailwindcss -i ./src/styles/entry.css -o ./dist/styles.css",
+    "docs:recipes": "node scripts/gen-recipes.mjs",
+    "build:css": "cp ./src/styles/theme.css ./dist/theme.css && cp ./src/styles/pretendard.css ./dist/pretendard.css && rm -rf ./dist/fonts && cp -R ./src/styles/fonts ./dist/fonts && tailwindcss -i ./src/styles/entry.css -o ./dist/styles.css",
     "dev": "tsup --watch",
     "playground": "vite --config vite.playground.config.ts",
     "playground:next:install": "npm --prefix playground-next install",
@@ -57,7 +58,7 @@
     "playground:next:build": "npm run playground:next:install && npm run build && npm --prefix playground-next run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test:spec": "npm run build && node --test ./src/components/**/*.test.mjs",
+    "test:spec": "npm run build && node --test ./src/components/**/*.test.mjs ./src/lib/*.test.mjs",
     "test:eslint": "node --test ./eslint/__tests__/*.test.mjs",
     "test:cli": "node --test ./bin/__tests__/*.test.mjs",
     "typecheck": "tsc --noEmit",
@@ -70,6 +71,9 @@
     "check:docs": "node scripts/check-docs-coverage.mjs",
     "check:docs-refs": "node scripts/check-docs-refs.mjs",
     "check:routing": "node scripts/check-routing.mjs",
+    "check:cn-scales": "node scripts/check-cn-scales.mjs",
+    "check:categories": "node scripts/check-story-categories.mjs",
+    "check:recipes": "node scripts/gen-recipes.mjs --check",
     "version": "node scripts/version.mjs --prerelease beta --tag",
     "version:dry": "node scripts/version.mjs --prerelease beta --dry-run",
     "version:stable": "node scripts/version.mjs --tag",
@@ -88,6 +92,16 @@
     "@radix-ui/react-popover": "^1.1.18",
     "@radix-ui/react-switch": "^1.3.2",
     "@radix-ui/react-tooltip": "^1.2.11",
+    "@tiptap/core": "^3.30.2",
+    "@tiptap/extension-image": "^3.30.2",
+    "@tiptap/extension-list": "^3.30.2",
+    "@tiptap/extension-table": "^3.30.2",
+    "@tiptap/extension-text-align": "^3.30.2",
+    "@tiptap/extension-text-style": "^3.30.2",
+    "@tiptap/extension-typography": "^3.30.2",
+    "@tiptap/extensions": "^3.30.2",
+    "@tiptap/react": "^3.30.2",
+    "@tiptap/starter-kit": "^3.30.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.0.2"