테마 적용

tests/unit/ButtonPropertiesPanel.spec.tsx

@@ -80,6 +80,46 @@ describe("ButtonPropertiesPanel", () => {
     );
   });
 
+	it("텍스트 색상 팔레트에서 \"없음\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
+		const updateBlock = vi.fn();
+
+		render(
+			<ButtonPropertiesPanel
+				buttonProps={{ ...baseProps, textColorCustom: "#ff0000" }}
+				selectedBlockId="btn-text-none"
+				updateBlock={updateBlock}
+			/>,
+		);
+
+		// 첫 번째 ColorPickerField(텍스트 색상)의 팔레트 버튼을 연다.
+		const paletteButtons = screen.getAllByText("색상 팔레트");
+		fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
+
+		// 팔레트에서 "없음" 항목을 버튼 role 기준으로 선택한다.
+		const noneButtons = screen.getAllByRole("button", { name: "없음" });
+		fireEvent.click(noneButtons[0]);
+
+		expect(updateBlock).toHaveBeenCalledWith(
+			"btn-text-none",
+			expect.objectContaining({ textColorCustom: "" }),
+		);
+	});
+
+	it("textColorCustom 이 비어 있으면 버튼 텍스트 색상 HEX 인풋 값은 빈 문자열이어야 한다", () => {
+		const updateBlock = vi.fn();
+
+		render(
+			<ButtonPropertiesPanel
+				buttonProps={{ ...baseProps, textColorCustom: "" }}
+				selectedBlockId="btn-text-empty"
+				updateBlock={updateBlock}
+			/>,
+		);
+
+		const hexInput = screen.getByLabelText("버튼 텍스트 색상 HEX") as HTMLInputElement;
+		expect(hexInput.value).toBe("");
+	});
+
   it("버튼 너비 모드 셀렉트 변경 시 updateBlock 이 widthMode 로 호출되어야 한다", () => {
     const updateBlock = vi.fn();
 
@@ -200,6 +240,28 @@ describe("ButtonPropertiesPanel", () => {
     );
   });
 
+  it("버튼 텍스트 textarea 는 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={baseProps}
+        selectedBlockId="btn-theme"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const textarea = screen.getByLabelText("버튼 텍스트") as HTMLTextAreaElement;
+    const className = textarea.getAttribute("class") ?? "";
+
+    // 라이트 모드: 흰 배경 + 어두운 텍스트
+    expect(className).toContain("bg-white");
+    expect(className).toContain("text-slate-900");
+    // 다크 모드: 다크 배경 + 밝은 텍스트
+    expect(className).toContain("dark:bg-slate-900");
+    expect(className).toContain("dark:text-slate-100");
+  });
+
   it("가로 패딩 슬라이더 변경 시 updateBlock 이 paddingX 로 호출되어야 한다", () => {
     const updateBlock = vi.fn();
 
@@ -399,4 +461,43 @@ describe("ButtonPropertiesPanel", () => {
       expect.objectContaining({ letterSpacingCustom: "1em" }),
     );
   });
+
+  it("버튼 주요 인풋/셀렉트 컨트롤은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={baseProps as any}
+        selectedBlockId="btn-theme"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const labelTextarea = screen.getByLabelText("버튼 텍스트") as HTMLTextAreaElement;
+    const labelClass = labelTextarea.getAttribute("class") ?? "";
+    expect(labelClass).toContain("bg-white");
+    expect(labelClass).toContain("text-slate-900");
+    expect(labelClass).toContain("border-slate-300");
+    expect(labelClass).toContain("dark:bg-slate-900");
+    expect(labelClass).toContain("dark:text-slate-100");
+    expect(labelClass).toContain("dark:border-slate-700");
+
+    const imageSourceSelect = screen.getByLabelText("버튼 이미지 소스") as HTMLSelectElement;
+    const imageSourceClass = imageSourceSelect.getAttribute("class") ?? "";
+    expect(imageSourceClass).toContain("bg-white");
+    expect(imageSourceClass).toContain("text-slate-900");
+    expect(imageSourceClass).toContain("border-slate-300");
+    expect(imageSourceClass).toContain("dark:bg-slate-900");
+    expect(imageSourceClass).toContain("dark:text-slate-100");
+    expect(imageSourceClass).toContain("dark:border-slate-700");
+
+    const alignSelect = screen.getByLabelText("버튼 정렬") as HTMLSelectElement;
+    const alignClass = alignSelect.getAttribute("class") ?? "";
+    expect(alignClass).toContain("bg-white");
+    expect(alignClass).toContain("text-slate-900");
+    expect(alignClass).toContain("border-slate-300");
+    expect(alignClass).toContain("dark:bg-slate-900");
+    expect(alignClass).toContain("dark:text-slate-100");
+    expect(alignClass).toContain("dark:border-slate-700");
+  });
 });