테마 적용

tests/unit/BlocksSidebar.spec.tsx

@@ -210,5 +210,77 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
     // 다시 클릭하면 펼쳐져야 한다.
     fireEvent.click(templateToggle);
     expect(screen.getByRole("button", { name: "Hero 템플릿" })).toBeDefined();
+  });
+
+	it("블록 추가 버튼들은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
+		render(<BlocksSidebar />);
+
+		const textButton = screen.getByRole("button", { name: "텍스트" });
+		const className = textButton.getAttribute("class") ?? "";
+
+		// 라이트 모드: 밝은 배경 + 어두운 텍스트
+		expect(className).toContain("bg-slate-50");
+		expect(className).toContain("text-slate-900");
+
+		// 다크 모드: 기존 다크 스타일 유지
+		expect(className).toContain("dark:bg-slate-900");
+		expect(className).toContain("dark:text-slate-100");
+	});
+
+	it("히어로 템플릿 카드는 라이트/다크 테마에 맞는 카드 배경/테두리 클래스를 사용해야 한다", () => {
+		render(<BlocksSidebar />);
+
+		const heroDescription = screen.getByText(
+			"페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)",
+		);
+		const card = heroDescription.closest("div");
+		expect(card).not.toBeNull();
+
+		const className = card!.getAttribute("class") ?? "";
+		expect(className).toContain("bg-slate-50");
+		expect(className).toContain("border-slate-200");
+		expect(className).toContain("dark:border-slate-800");
+		expect(className).toContain("dark:bg-slate-950/50");
+	});
+
+	it("히어로 템플릿 추가 버튼은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
+		render(<BlocksSidebar />);
+
+		const heroButton = screen.getByRole("button", { name: "Hero 템플릿" });
+		const className = heroButton.getAttribute("class") ?? "";
+
+		// 라이트 모드: 밝은 배경 + 어두운 텍스트
+		expect(className).toContain("bg-slate-50");
+		expect(className).toContain("text-slate-900");
+		// 다크 모드: 기존 다크 톤 유지
+		expect(className).toContain("dark:bg-slate-900");
+		expect(className).toContain("dark:text-slate-100");
+	});
+
+	it("히어로 템플릿 썸네일 프레임은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+		render(<BlocksSidebar />);
+
+		const thumb = screen.getByTestId("template-preview-hero") as HTMLDivElement;
+		const className = thumb.getAttribute("class") ?? "";
+
+		// 라이트 모드: 밝은 카드 배경 + 연한 테두리
+		expect(className).toContain("bg-slate-100");
+		expect(className).toContain("border-slate-300");
+		// 다크 모드: 기존 다크 카드 톤 유지
+		expect(className).toContain("dark:bg-slate-900");
+		expect(className).toContain("dark:border-slate-700");
+	});
+
+  it("사이드바 루트는 라이트/다크 테마에 맞는 배경/테두리 클래스를 사용해야 한다", () => {
+    const { container } = render(<BlocksSidebar />);
+
+    const aside = container.querySelector("aside") as HTMLElement | null;
+    expect(aside).not.toBeNull();
+
+    const className = aside!.getAttribute("class") ?? "";
+    expect(className).toContain("bg-white");
+    expect(className).toContain("border-slate-200");
+    expect(className).toContain("dark:border-slate-800");
+    expect(className).toContain("dark:bg-slate-950/40");
   });
 });