스타일 수정

tests/unit/dividerHelpers.spec.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from "vitest";
+import { expectNoPxInStyleObject, expectNoPxInStyleString } from "./styleInvariants";
 import {
   computeDividerExportTokens,
   computeDividerEditorTokens,
@@ -16,9 +17,9 @@ const baseProps: DividerBlockProps = {
 describe("dividerHelpers.computeDividerExportTokens", () => {
   const escapers = { escapeAttr: (v: string) => v };
 
-  it("기본 값은 1px 두께, 기본 색상(#475569), marginY=16px 이어야 한다", () => {
+  it("기본 값은 1px 두께, 기본 색상(#475569), marginY=1em 이어야 한다", () => {
     const tokens = computeDividerExportTokens(baseProps, escapers);
-    expect(tokens.style).toBe("border:0;border-bottom:1px solid #475569;margin:16px 0;");
+    expect(tokens.style).toBe("border:0;border-bottom:1px solid #475569;margin:1em 0;");
   });
 
   it("thickness=\"medium\" 인 경우 2px 두께로 렌더링되어야 한다", () => {
@@ -33,12 +34,25 @@ describe("dividerHelpers.computeDividerExportTokens", () => {
 
   it("marginYPx > 0 이면 해당 값을 margin Y 로 사용해야 한다", () => {
     const tokens = computeDividerExportTokens({ ...baseProps, marginYPx: 24 }, escapers);
-    expect(tokens.style).toContain("margin:24px 0;");
+    expect(tokens.style).toContain("margin:1.5em 0;");
   });
 
-  it("marginYPx 가 0 이하이거나 숫자가 아니면 기본 16px 을 사용해야 한다", () => {
+  it("marginYPx 가 0 이하이거나 숫자가 아니면 기본 1em 을 사용해야 한다", () => {
     const zeroTokens = computeDividerExportTokens({ ...baseProps, marginYPx: 0 }, escapers);
-    expect(zeroTokens.style).toContain("margin:16px 0;");
+    expect(zeroTokens.style).toContain("margin:1em 0;");
+  });
+
+  it("Export 구분선 style 에서는 border-bottom 두께를 제외하고 px 단위가 없어야 한다", () => {
+    const tokens = computeDividerExportTokens({
+      ...baseProps,
+      thickness: "medium",
+      colorHex: "#123456",
+      marginYPx: 24,
+    }, escapers);
+
+    expectNoPxInStyleString(tokens.style, {
+      allowPatterns: [/border-bottom:\d+px/],
+    });
   });
 });
 
@@ -136,4 +150,18 @@ describe("dividerHelpers.computeDividerPublicTokens", () => {
     expect(tokens.innerStyle.width).toBe("auto");
     expect(tokens.lineStyle.width).toBe("30em");
   });
+
+  it("퍼블릭 구분선 스타일에 px 단위 값이 포함되지 않아야 한다", () => {
+    const tokens = computeDividerPublicTokens({
+      align: "center",
+      thickness: "medium",
+      colorHex: "#123456",
+      marginYPx: 32,
+      widthMode: "fixed",
+      widthPx: 480,
+    } as DividerBlockProps);
+
+    expectNoPxInStyleObject(tokens.innerStyle);
+    expectNoPxInStyleObject(tokens.lineStyle);
+  });
 });