테마 적용

tests/unit/PropertiesSidebar.spec.tsx

@@ -56,6 +56,30 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
     expect(screen.getByText(/제목과 본문 텍스트를 입력할 때 사용하는 기본 블록입니다/)).toBeDefined();
   });
 
+  it("HELP 모달은 라이트/다크 테마에 맞는 카드 배경/테두리/텍스트 클래스를 사용해야 한다", () => {
+    const textBlock = createTextBlock();
+
+    render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);
+
+    const helpButton = screen.getByRole("button", { name: "HELP" });
+    fireEvent.click(helpButton);
+
+    // 모달 카드 컨테이너 (제목 h3 → 헤더 div → 카드 div 순으로 감싸져 있으므로 parentElement.parentElement 사용)
+    const heading = screen.getByText("텍스트 블록 튜토리얼");
+    const modalCard = heading.parentElement?.parentElement as HTMLElement | null;
+    expect(modalCard).not.toBeNull();
+    const className = modalCard!.getAttribute("class") ?? "";
+
+    // 라이트 모드: 흰 배경 + 어두운 텍스트 + 연한 테두리
+    expect(className).toContain("bg-white");
+    expect(className).toContain("text-slate-900");
+    expect(className).toContain("border-slate-200");
+    // 다크 모드: 기존 다크 톤 유지
+    expect(className).toContain("dark:border-slate-700");
+    expect(className).toContain("dark:bg-slate-900");
+    expect(className).toContain("dark:text-slate-100");
+  });
+
   it("모달의 닫기 버튼을 클릭하면 튜토리얼 모달이 닫혀야 한다", () => {
     const textBlock = createTextBlock();
 
@@ -69,4 +93,65 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
 
     expect(screen.queryByText("텍스트 블록 튜토리얼")).toBeNull();
   });
+
+  it("텍스트 블록이 선택된 상태에서 상단 액션 버튼들은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
+    const textBlock = createTextBlock();
+
+    render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);
+
+    const deleteButton = screen.getByRole("button", { name: "블록 삭제" });
+    const duplicateButton = screen.getByRole("button", { name: "블록 복제" });
+    const helpButton = screen.getByRole("button", { name: "HELP" });
+
+    for (const btn of [deleteButton, duplicateButton, helpButton]) {
+      const className = btn.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("텍스트 블록이 선택된 상태에서 내용 편집 textarea는 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
+    const textBlock = createTextBlock();
+
+    render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);
+
+    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("속성 패널 루트는 라이트/다크 테마에 맞는 배경/테두리 클래스를 사용해야 한다", () => {
+    const props = defaultProps([], null);
+
+    render(<PropertiesSidebar {...props} />);
+
+    const aside = screen.getByTestId("properties-sidebar") as HTMLElement;
+    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");
+  });
+
+  it("속성 패널 루트는 pb-scroll 커스텀 스크롤바 클래스를 사용하지 않아야 한다", () => {
+    const props = defaultProps([], null);
+
+    render(<PropertiesSidebar {...props} />);
+
+    const aside = screen.getByTestId("properties-sidebar") as HTMLElement;
+    const className = aside.getAttribute("class") ?? "";
+
+    expect(className).not.toContain("pb-scroll");
+  });
 });