테마 적용

tests/unit/ProjectPropertiesPanel.spec.tsx

@@ -122,5 +122,46 @@ describe("ProjectPropertiesPanel", () => {
     fireEvent.change(input, { target: { value: "#654321" } });
 
     expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "#654321" });
+  });
+
+	it("캔버스 배경색 팔레트에서 \"없음\" 을 선택하면 canvasBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
+		render(<ProjectPropertiesPanel />);
+
+		// 첫 번째 ColorPickerField(캔버스 배경색)의 팔레트 버튼을 연다.
+		const paletteButtons = screen.getAllByText("색상 팔레트");
+		fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
+
+		// 팔레트에서 "없음" 항목을 선택한다.
+		const noneButton = screen.getByText("없음");
+		fireEvent.click(noneButton);
+
+		expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasBgColorHex: "" });
+	});
+
+	it("페이지 배경색 팔레트에서 \"없음\" 을 선택하면 bodyBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
+		render(<ProjectPropertiesPanel />);
+	
+		// 두 번째 ColorPickerField(페이지 배경색)의 팔레트 버튼은 기본 선택 팔레트 라벨("어두운 텍스트")를 기준으로 찾는다.
+		const darkLabel = screen.getByText("어두운 텍스트");
+		fireEvent.click(darkLabel.closest("button") as HTMLButtonElement);
+
+		const noneButton = screen.getByText("없음");
+		fireEvent.click(noneButton);
+
+		expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "" });
+	});
+
+  it("프로젝트 제목 입력은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
+    render(<ProjectPropertiesPanel />);
+
+    const input = screen.getByLabelText("프로젝트 제목") as HTMLInputElement;
+    const className = input.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");
   });
 });