스타일 수정

tests/unit/buttonHelpers.spec.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from "vitest";
+import { expectNoPxInStyleParts } from "./styleInvariants";
 import {
   computeButtonPbTokens,
   computeButtonPublicTokens,
@@ -53,15 +54,31 @@ describe("buttonHelpers.computeButtonPbTokens", () => {
     });
 
     expect(tokens.alignClass).toBe("pb-text-right");
-    expect(tokens.inlineStyles).toContain("width:200px");
-    expect(tokens.inlineStyles).toContain("padding-left:16px");
-    expect(tokens.inlineStyles).toContain("padding-right:16px");
-    expect(tokens.inlineStyles).toContain("padding-top:8px");
-    expect(tokens.inlineStyles).toContain("padding-bottom:8px");
+    expect(tokens.inlineStyles).toContain("width:12.5em");
+    expect(tokens.inlineStyles).toContain("padding-left:1em");
+    expect(tokens.inlineStyles).toContain("padding-right:1em");
+    expect(tokens.inlineStyles).toContain("padding-top:0.5em");
+    expect(tokens.inlineStyles).toContain("padding-bottom:0.5em");
     expect(tokens.inlineStyles).toContain("background-color:#111111");
     expect(tokens.inlineStyles).toContain("border-color:#222222");
     expect(tokens.inlineStyles).toContain("color:#ffffff");
   });
+
+  it("Button Pb inlineStyles 에는 px 단위 값이 포함되지 않아야 한다", () => {
+    const tokens = computeButtonPbTokens({
+      align: "right",
+      size: "sm",
+      widthMode: "fixed",
+      widthPx: 200,
+      paddingX: 16,
+      paddingY: 8,
+      fillColorCustom: "#111111",
+      strokeColorCustom: "#222222",
+      textColorCustom: "#ffffff",
+    });
+
+    expectNoPxInStyleParts(tokens.inlineStyles);
+  });
 });
 
 describe("buttonHelpers.computeButtonPublicTokens", () => {