스타일 수정

2025-11-29 15:11:49 +09:00
parent c9a62d479c
commit 1f085bd64c
64 changed files with 568 additions and 126 deletions
@@ -192,4 +192,74 @@ describe("프리뷰와 정적 내보내기 일치 (고수준)", () => {
      expect(staticHtml).toContain(text);
    }
  });
+
+  it(
+    "리스트+폼+구분선 조합에서 리스트 컨테이너와 구분선이 프리뷰/정적 HTML 모두에 존재하고, 리스트는 pb-list 클래스를 사용하며 li 에 margin-bottom 인라인 스타일을 사용하지 않아야 한다",
+    () => {
+      const blocks: Block[] = [
+        {
+          id: "divider_combo",
+          type: "divider",
+          props: {
+            align: "center",
+            thickness: "medium",
+            widthMode: "full",
+          },
+        } as any,
+        {
+          id: "list_combo",
+          type: "list",
+          props: {
+            items: ["리스트 아이템 1", "리스트 아이템 2"],
+            ordered: false,
+            align: "left",
+          },
+        } as any,
+        {
+          id: "form_combo",
+          type: "form",
+          props: {
+            kind: "contact",
+            submitTarget: "internal",
+            // v1 fallback 필드를 사용해 양쪽 렌더러가 동일한 폼 필드를 가지도록 한다.
+            fields: [
+              { id: "f_name", name: "name", label: "이름", type: "text", required: true },
+            ],
+            fieldIds: [],
+            submitButtonId: null,
+            formWidthMode: "full",
+          },
+        } as any,
+      ];
+
+      const projectConfig: ProjectConfig = {
+        title: "리스트+폼+구분선 레이아웃 테스트",
+        slug: "list-form-divider-layout",
+        canvasPreset: "full",
+      };
+
+      const previewHtml = ReactDOMServer.renderToString(
+        React.createElement(PublicPageRenderer, { blocks }),
+      );
+
+      const staticHtml = buildStaticHtml(blocks, projectConfig);
+
+      // 리스트 텍스트는 양쪽에 존재해야 한다.
+      expect(previewHtml).toContain("리스트 아이템 1");
+      expect(staticHtml).toContain("리스트 아이템 1");
+
+      // 구분선은 프리뷰/Export 모두에 존재해야 한다.
+      expect(previewHtml).toContain('data-testid="preview-divider"');
+      expect(staticHtml).toContain('<hr class="pb-divider"');
+
+      // 리스트 컨테이너는 pb-list 클래스를 사용해야 한다.
+      expect(previewHtml).toContain('class="pb-list');
+      expect(staticHtml).toContain('class="pb-list"');
+
+      // 리스트 아이템(li)은 margin-bottom 인라인 스타일을 사용하지 않아야 한다.
+      // divider 등 다른 요소에서 margin-bottom 을 사용하는 것은 허용한다.
+      expect(previewHtml).not.toMatch(/<li[^>]*style=\"[^\"]*margin-bottom:/);
+      expect(staticHtml).not.toMatch(/<li[^>]*style=\"[^\"]*margin-bottom:/);
+    },
+  );
 });