테마 적용

tests/unit/PublicPageRendererSectionLayout.spec.tsx

@@ -101,4 +101,47 @@ describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
     const innerContainer = rootSection.querySelector(".pb-root-inner");
     expect(innerContainer).not.toBeNull();
   });
+
+  it("블록 배열 순서를 따라 루트 블록과 섹션 블록이 섞여 렌더되어야 한다", () => {
+    const rootBeforeProps: TextBlockProps = {
+      text: "루트1",
+      align: "left",
+      size: "base",
+    } as TextBlockProps;
+
+    const rootAfterProps: TextBlockProps = {
+      text: "루트2",
+      align: "left",
+      size: "base",
+    } as TextBlockProps;
+
+    const rootBefore: Block = {
+      id: "root_order_before",
+      type: "text",
+      props: rootBeforeProps,
+    } as any;
+
+    const sectionWithText = makeSectionWithText();
+
+    const rootAfter: Block = {
+      id: "root_order_after",
+      type: "text",
+      props: rootAfterProps,
+    } as any;
+
+    const blocks: Block[] = [rootBefore, ...sectionWithText, rootAfter];
+
+    const { container } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const sections = Array.from(container.querySelectorAll("section"));
+
+    expect(sections.length).toBe(3);
+    expect(sections[0].className).toContain("pb-root");
+    expect(sections[1].className).toContain("pb-section");
+    expect(sections[2].className).toContain("pb-root");
+
+    expect(sections[0].textContent).toContain("루트1");
+    expect(sections[1].textContent).toContain("섹션 레이아웃 텍스트");
+    expect(sections[2].textContent).toContain("루트2");
+  });
 });