테마 적용

tests/unit/EditorFormBlocksStyle.spec.tsx

@@ -214,6 +214,28 @@ describe("EditorPage - 폼 블록 스타일", () => {
     expect(input.className).toContain("pb-input");
   });
 
+	it("formInput 에디터 렌더에는 text-slate-* 색상 클래스가 없어야 한다", () => {
+		const blocks: Block[] = [
+			{
+				id: "form_input_neutral_editor",
+				type: "formInput",
+				props: {
+					label: "폼 입력",
+					formFieldName: "input_neutral",
+					inputType: "text",
+				} as any,
+			},
+		];
+
+		mockState.blocks = blocks;
+		mockState.selectedBlockId = "form_input_neutral_editor";
+
+		render(<EditorPage />);
+
+		const label = screen.getByText("폼 입력");
+		expect(label.className).not.toContain("text-slate-");
+	});
+
   it("formSelect: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
     const blocks: Block[] = [
       {
@@ -275,6 +297,30 @@ describe("EditorPage - 폼 블록 스타일", () => {
     expect(select.className).toContain("pb-select");
   });
 
+	it("formSelect 에디터 렌더에는 text-slate-* 색상 클래스가 없어야 한다", () => {
+		const blocks: Block[] = [
+			{
+				id: "form_select_neutral_editor",
+				type: "formSelect",
+				props: {
+					label: "폼 셀렉트",
+					formFieldName: "select_neutral",
+					options: [
+						{ label: "A", value: "a" },
+					],
+				} as any,
+			},
+		];
+
+		mockState.blocks = blocks;
+		mockState.selectedBlockId = "form_select_neutral_editor";
+
+		render(<EditorPage />);
+
+		const label = screen.getByText("폼 셀렉트");
+		expect(label.className).not.toContain("text-slate-");
+	});
+
   it("formRadio: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
     const blocks: Block[] = [
       {
@@ -313,6 +359,87 @@ describe("EditorPage - 폼 블록 스타일", () => {
     expect(groupContainer.style.borderRadius).toBe("6px");
   });
 
+	it("formRadio 에디터 그룹 컨테이너에는 text-slate-* 색상 클래스가 없어야 한다", () => {
+		const blocks: Block[] = [
+			{
+				id: "form_radio_neutral_editor",
+				type: "formRadio",
+				props: {
+					formFieldName: "radio-neutral",
+					groupLabel: "라디오 그룹",
+					options: [
+						{ label: "옵션 A", value: "a" },
+					],
+				} as any,
+			},
+		];
+
+		mockState.blocks = blocks;
+		mockState.selectedBlockId = "form_radio_neutral_editor";
+
+		render(<EditorPage />);
+
+		const label = screen.getByText("라디오 그룹");
+		const groupContainer = label.closest("div") as HTMLElement;
+		expect(groupContainer.className).not.toContain("text-slate-");
+	});
+
+	it("formRadio 에디터 프리뷰의 옵션 input 은 OS 기본 스타일을 사용하기 위해 색상 관련 Tailwind 클래스(bg-/text-/border-)를 사용하지 않아야 한다", () => {
+		const blocks: Block[] = [
+			{
+				id: "form_radio_os_editor",
+				type: "formRadio",
+				props: {
+					formFieldName: "radio-os",
+					groupLabel: "라디오 OS",
+					options: [{ label: "옵션 A", value: "a" }],
+				} as any,
+			},
+		];
+
+		mockState.blocks = blocks;
+		mockState.selectedBlockId = "form_radio_os_editor";
+
+		render(<EditorPage />);
+
+		const label = screen.getByText("라디오 OS");
+		const groupContainer = label.closest("div") as HTMLElement;
+		const input = groupContainer.querySelector("input[type='radio']") as HTMLInputElement | null;
+		expect(input).not.toBeNull();
+		// 크기/모양(h-4,w-4 등)만 유지하고, 색상 관련 Tailwind 유틸은 사용하지 않는다.
+		expect(input!.className).not.toContain("bg-");
+		expect(input!.className).not.toContain("text-");
+		expect(input!.className).not.toContain("border-");
+	});
+
+	it("formCheckbox 에디터 프리뷰의 옵션 input 은 OS 기본 스타일을 사용하기 위해 색상 관련 Tailwind 클래스(bg-/text-/border-)를 사용하지 않아야 한다", () => {
+		const blocks: Block[] = [
+			{
+				id: "form_checkbox_os_editor",
+				type: "formCheckbox",
+				props: {
+					formFieldName: "check-os",
+					groupLabel: "체크 OS",
+					options: [{ label: "체크 1", value: "c1" }],
+				} as any,
+			},
+		];
+
+		mockState.blocks = blocks;
+		mockState.selectedBlockId = "form_checkbox_os_editor";
+
+		render(<EditorPage />);
+
+		const label = screen.getByText("체크 OS");
+		const groupContainer = label.closest("div") as HTMLElement;
+		const input = groupContainer.querySelector("input[type='checkbox']") as HTMLInputElement | null;
+		expect(input).not.toBeNull();
+		// 크기/모양(h-4,w-4,rounded 등)만 유지하고, 색상 관련 Tailwind 유틸은 사용하지 않는다.
+		expect(input!.className).not.toContain("bg-");
+		expect(input!.className).not.toContain("text-");
+		expect(input!.className).not.toContain("border-");
+	});
+
   it("formCheckbox: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
     const blocks: Block[] = [
       {
@@ -351,6 +478,31 @@ describe("EditorPage - 폼 블록 스타일", () => {
     expect(groupContainer.style.borderRadius).toBe("6px");
   });
 
+	it("formCheckbox 에디터 그룹 컨테이너에는 text-slate-* 색상 클래스가 없어야 한다", () => {
+		const blocks: Block[] = [
+			{
+				id: "form_checkbox_neutral_editor",
+				type: "formCheckbox",
+				props: {
+					formFieldName: "checkbox-neutral",
+					groupLabel: "체크 그룹",
+					options: [
+						{ label: "체크 1", value: "c1" },
+					],
+				} as any,
+			},
+		];
+
+		mockState.blocks = blocks;
+		mockState.selectedBlockId = "form_checkbox_neutral_editor";
+
+		render(<EditorPage />);
+
+		const label = screen.getByText("체크 그룹");
+		const groupContainer = label.closest("div") as HTMLElement;
+		expect(groupContainer.className).not.toContain("text-slate-");
+	});
+
   it("formRadio: 그룹 타이틀 레이아웃이 inline 이면 에디터에서도 라벨과 필드 컨테이너가 가로 정렬되고 columnGap 이 labelGapPx 로 반영되어야 한다", () => {
     const blocks: Block[] = [
       {