TDD,E2E 개선, 미적용 스타일 개선

tests/unit/PublicPageRendererSectionLayout.spec.tsx

@@ -5,7 +5,7 @@ import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor
 
 // PublicPageRenderer 섹션/루트 레이아웃 TDD
 // - Export 레이어의 pb-root / pb-section-* 구조와 개념적으로 대응되는 프리뷰 레이아웃을 고정한다.
-// - 정확한 px 값 비교 대신, 주요 Tailwind 레이아웃 클래스 존재 여부를 검증한다.
+// - Tailwind 유틸 대신 builder.css 의 pb-* 레이아웃 클래스를 기준으로 검증한다.
 
 describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
   afterEach(() => {
@@ -47,7 +47,7 @@ describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
     return [section, text];
   };
 
-  it("섹션 레이아웃은 mx-auto / max-w / px-* 및 flex 컬럼/갭 구조로 렌더되어야 한다", () => {
+  it("섹션 레이아웃은 pb-section / pb-section-inner / pb-section-columns / pb-section-column 구조로 렌더되어야 한다", () => {
     const blocks: Block[] = makeSectionWithText();
 
     render(<PublicPageRenderer blocks={blocks} />);
@@ -56,20 +56,12 @@ describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
     const columns = screen.getByTestId("preview-section-columns") as HTMLDivElement;
 
     // Export 의 pb-section-inner / pb-section-columns 에 대응되는 레이아웃 구조를 최소한으로 보장한다.
-    expect(inner.className).toContain("mx-auto");
-    expect(inner.className).toContain("px-4");
-    expect(inner.className).toMatch(/max-w-/);
+    expect(inner.className).toContain("pb-section-inner");
+    expect(columns.className).toContain("pb-section-columns");
 
-    expect(columns.className).toContain("flex");
-    // gapX 기본값(md)에 대해 gap-8 이 사용되는 현재 구현을 고정한다.
-    expect(columns.className).toContain("gap-8");
-
-    // 컬럼 래퍼는 flex-col 과 일정한 세로 간격을 가진다.
-    const columnWrapper = columns.querySelector("div.flex.flex-col") as HTMLDivElement | null;
+    // 컬럼 래퍼는 pb-section-column 클래스를 가지며, 섹션 텍스트가 그 안에 포함되어야 한다.
+    const columnWrapper = columns.querySelector(".pb-section-column") as HTMLDivElement | null;
     expect(columnWrapper).not.toBeNull();
-    if (columnWrapper) {
-      expect(columnWrapper.className).toContain("gap-4");
-    }
 
     // 섹션 텍스트가 실제로 섹션 안에 렌더되는지 확인한다.
     const textEl = screen.getByText("섹션 레이아웃 텍스트");
@@ -77,7 +69,7 @@ describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
     expect(section).not.toBeNull();
   });
 
-  it("루트 블록은 상단 섹션 내 max-width 컨테이너 안에서 렌더되어야 한다", () => {
+  it("루트 블록은 pb-root / pb-root-inner 구조 안에서 렌더되어야 한다", () => {
     const rootTextProps: TextBlockProps = {
       text: "루트 레이아웃 텍스트",
       align: "left",
@@ -98,23 +90,15 @@ describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
 
     const rootTextEl = screen.getByText("루트 레이아웃 텍스트") as HTMLParagraphElement;
 
-    // 루트 텍스트는 상단 섹션(py-12) 안에 존재해야 한다.
+    // 루트 텍스트는 상단 pb-root 섹션 안에 존재해야 한다.
     const rootSection = rootTextEl.closest("section");
     expect(rootSection).not.toBeNull();
     if (!rootSection) return;
 
-    expect(rootSection.className).toContain("py-12");
+    expect(rootSection.className).toContain("pb-root");
 
-    // 섹션 바로 아래의 max-width 컨테이너 구조를 확인한다.
-    const innerContainer = rootSection.querySelector("div");
+    // 섹션 바로 아래의 pb-root-inner 컨테이너 구조를 확인한다.
+    const innerContainer = rootSection.querySelector(".pb-root-inner");
     expect(innerContainer).not.toBeNull();
-    if (!innerContainer) return;
-
-    const className = innerContainer.className;
-    expect(className).toContain("mx-auto");
-    expect(className).toContain("max-w-3xl");
-    expect(className).toContain("px-4");
-    expect(className).toContain("flex");
-    expect(className).toContain("gap-4");
   });
 });