테마 적용

tests/unit/ListPropertiesPanel.spec.tsx

@@ -121,6 +121,48 @@ describe("ListPropertiesPanel", () => {
     );
   });
 
+	it("텍스트 색상 팔레트에서 \"없음\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
+		const updateBlock = vi.fn();
+
+		render(
+			<ListPropertiesPanel
+				listProps={{ ...baseProps, textColorCustom: "#ff0000" }}
+				selectedBlockId="list-text-none"
+				selectedListItemId={null}
+				updateBlock={updateBlock}
+			/>,
+		);
+
+		// 첫 번째 ColorPickerField(텍스트 색상)의 팔레트 버튼을 연다.
+		const paletteButtons = screen.getAllByText("색상 팔레트");
+		fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
+
+		// 팔레트에서 "없음" 항목을 버튼 role 기준으로 선택한다 (불릿 스타일 select 의 option "없음" 과 구분).
+		const noneButtons = screen.getAllByRole("button", { name: "없음" });
+		fireEvent.click(noneButtons[0]);
+
+		expect(updateBlock).toHaveBeenCalledWith(
+			"list-text-none",
+			expect.objectContaining({ textColorCustom: "" }),
+		);
+	});
+
+	it("textColorCustom 이 비어 있으면 텍스트 색상 HEX 인풋 값은 빈 문자열이어야 한다", () => {
+		const updateBlock = vi.fn();
+
+		render(
+			<ListPropertiesPanel
+				listProps={{ ...baseProps, textColorCustom: "" }}
+				selectedBlockId="list-text-empty"
+				selectedListItemId={null}
+				updateBlock={updateBlock}
+			/>,
+		);
+
+		const hexInput = screen.getByLabelText("리스트 텍스트 색상 HEX") as HTMLInputElement;
+		expect(hexInput.value).toBe("");
+	});
+
   it("불릿 스타일 셀렉트 변경 시 bulletStyle 과 ordered 가 함께 업데이트되어야 한다 (decimal)", () => {
     const updateBlock = vi.fn();
 
@@ -183,4 +225,73 @@ describe("ListPropertiesPanel", () => {
       expect.objectContaining({ gapYPx: 16 }),
     );
   });
+
+  it("리스트 정렬 셀렉트는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={baseProps}
+        selectedBlockId="list-align-theme"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("리스트 정렬") as HTMLSelectElement;
+    const className = select.getAttribute("class") ?? "";
+
+    expect(className).toContain("bg-white");
+    expect(className).toContain("text-slate-900");
+    expect(className).toContain("border-slate-300");
+    expect(className).toContain("dark:bg-slate-900");
+    expect(className).toContain("dark:text-slate-100");
+    expect(className).toContain("dark:border-slate-700");
+  });
+
+  it("리스트 불릿 스타일 셀렉트는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={baseProps}
+        selectedBlockId="list-bullet-theme"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("리스트 불릿 스타일") as HTMLSelectElement;
+    const className = select.getAttribute("class") ?? "";
+
+    expect(className).toContain("bg-white");
+    expect(className).toContain("text-slate-900");
+    expect(className).toContain("border-slate-300");
+    expect(className).toContain("dark:bg-slate-900");
+    expect(className).toContain("dark:text-slate-100");
+    expect(className).toContain("dark:border-slate-700");
+  });
+
+  it("리스트 아이템 textarea 는 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={baseProps}
+        selectedBlockId="list-theme"
+        selectedListItemId={null}
+        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");
+  });
 });