테마 적용

tests/unit/DividerPropertiesPanel.spec.tsx

@@ -143,4 +143,43 @@ describe("DividerPropertiesPanel", () => {
       expect.objectContaining({ marginYPx: 24 }),
     );
   });
+
+  it("DividerPropertiesPanel 주요 셀렉트 컨트롤은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <DividerPropertiesPanel
+        dividerProps={baseProps}
+        selectedBlockId="divider-theme-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    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");
+
+    const thicknessSelect = screen.getByLabelText("구분선 두께") as HTMLSelectElement;
+    const thicknessClass = thicknessSelect.getAttribute("class") ?? "";
+    expect(thicknessClass).toContain("bg-white");
+    expect(thicknessClass).toContain("text-slate-900");
+    expect(thicknessClass).toContain("border-slate-300");
+    expect(thicknessClass).toContain("dark:bg-slate-900");
+    expect(thicknessClass).toContain("dark:text-slate-100");
+    expect(thicknessClass).toContain("dark:border-slate-700");
+
+    const widthModeSelect = screen.getByLabelText("구분선 길이 모드") as HTMLSelectElement;
+    const widthModeClass = widthModeSelect.getAttribute("class") ?? "";
+    expect(widthModeClass).toContain("bg-white");
+    expect(widthModeClass).toContain("text-slate-900");
+    expect(widthModeClass).toContain("border-slate-300");
+    expect(widthModeClass).toContain("dark:bg-slate-900");
+    expect(widthModeClass).toContain("dark:text-slate-100");
+    expect(widthModeClass).toContain("dark:border-slate-700");
+  });
 });