1차 싱크 완료

2025-11-24 21:32:37 +09:00
parent 7a8ad7c057
commit 672cca5271
83 changed files with 6681 additions and 325 deletions
@@ -0,0 +1,75 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
+import type { Block } from "@/features/editor/state/editorStore";
+
+// 폼 관련 블록(formSelect/formCheckbox/formRadio)의 textColorCustom 이
+// 프리뷰 렌더러에서 실제 텍스트 color 스타일에 반영되는지 검증한다.
+
+describe("PublicPageRenderer - 폼 텍스트 색상", () => {
+  it("formSelect 블록의 textColorCustom 은 셀렉트 텍스트 색상에 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_select_color",
+        type: "formSelect",
+        props: {
+          label: "셀렉트 라벨",
+          formFieldName: "category",
+          options: [
+            { label: "옵션 A", value: "a" },
+            { label: "옵션 B", value: "b" },
+          ],
+          textColorCustom: "#ff0000",
+        },
+      } as any,
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const wrapper = getByTestId("preview-form-select") as HTMLElement;
+    const select = wrapper.querySelector("select") as HTMLSelectElement | null;
+
+    expect(select).not.toBeNull();
+    expect(select!.style.color).toBe("rgb(255, 0, 0)");
+  });
+
+  it("formCheckbox 블록의 textColorCustom 은 옵션 텍스트 색상에 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_color",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "체크박스 그룹",
+          formFieldName: "features",
+          options: [{ label: "옵션 1", value: "opt1" }],
+          textColorCustom: "#00ff00",
+        },
+      } as any,
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const optionSpan = getByTestId("preview-form-checkbox-option") as HTMLElement;
+    expect(optionSpan.style.color).toBe("rgb(0, 255, 0)");
+  });
+
+  it("formRadio 블록의 textColorCustom 은 옵션 텍스트 색상에 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_color",
+        type: "formRadio",
+        props: {
+          groupLabel: "라디오 그룹",
+          formFieldName: "plan",
+          options: [{ label: "플랜 A", value: "a" }],
+          textColorCustom: "#0000ff",
+        },
+      } as any,
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const optionSpan = getByTestId("preview-form-radio-option") as HTMLElement;
+    expect(optionSpan.style.color).toBe("rgb(0, 0, 255)");
+  });
+})