스타일 수정

tests/unit/sectionHelpers.spec.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from "vitest";
+import { expectNoPxInStyleObject, expectNoPxInStyleParts } from "./styleInvariants";
 import {
   computeSectionExportTokens,
   computeSectionPublicTokens,
@@ -73,6 +74,21 @@ describe("sectionHelpers.computeSectionExportTokens", () => {
     expect(tokens.sectionStyleParts).toContain("position:relative");
     expect(tokens.sectionStyleParts).toContain("overflow:hidden");
   });
+
+  it("Export 섹션 sectionStyleParts 에는 px 단위 값이 포함되지 않아야 한다", () => {
+    const tokens = computeSectionExportTokens({
+      ...baseProps,
+      backgroundColorCustom: "#123456",
+      backgroundImageSrc: "https://example.com/bg.png",
+      backgroundImageSize: "cover",
+      backgroundImagePositionMode: "preset",
+      backgroundImagePosition: "top",
+      backgroundImageRepeat: "repeat-x",
+      backgroundVideoSrc: "https://example.com/bg.mp4",
+    } as SectionBlockProps);
+
+    expectNoPxInStyleParts(tokens.sectionStyleParts);
+  });
 });
 
 describe("sectionHelpers.computeSectionPublicTokens", () => {
@@ -90,6 +106,11 @@ describe("sectionHelpers.computeSectionPublicTokens", () => {
     expect(tokens.sectionStyle.paddingBottom).toBe("2em");
     expect(tokens.innerWrapperStyle.maxWidth).toBe("50em");
     expect(tokens.columnsContainerStyle.columnGap).toBe("1.5em");
+
+    // 퍼블릭 섹션 토큰 스타일에는 px 단위 값이 포함되지 않아야 한다.
+    expectNoPxInStyleObject(tokens.sectionStyle);
+    expectNoPxInStyleObject(tokens.innerWrapperStyle);
+    expectNoPxInStyleObject(tokens.columnsContainerStyle);
   });
 
   it("backgroundImage* 와 backgroundVideoSrc 를 올바르게 반영해야 한다", () => {