테마 적용

2025-12-09 18:53:21 +09:00
parent 9d8c4538c7
commit 676e58cad7
71 changed files with 3394 additions and 498 deletions
@@ -363,4 +363,98 @@ describe("SectionPropertiesPanel", () => {
      }),
    );
  });
+
+  it("SectionPropertiesPanel 배경 이미지/비디오 소스 및 URL 인풋은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundImageSrc: "https://example.com/bg.png",
+          backgroundImageSourceType: "externalUrl",
+          backgroundVideoSrc: "https://example.com/bg-video.mp4",
+          backgroundVideoSourceType: "externalUrl",
+        } as any}
+        selectedBlockId="section-theme-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const bgImageSourceSelect = screen.getByLabelText("배경 이미지 소스") as HTMLSelectElement;
+    const bgImageSourceClass = bgImageSourceSelect.getAttribute("class") ?? "";
+    expect(bgImageSourceClass).toContain("bg-white");
+    expect(bgImageSourceClass).toContain("text-slate-900");
+    expect(bgImageSourceClass).toContain("border-slate-300");
+    expect(bgImageSourceClass).toContain("dark:bg-slate-900");
+    expect(bgImageSourceClass).toContain("dark:text-slate-100");
+    expect(bgImageSourceClass).toContain("dark:border-slate-700");
+
+    const bgImageUrlInput = screen.getByLabelText("배경 이미지 URL") as HTMLInputElement;
+    const bgImageUrlClass = bgImageUrlInput.getAttribute("class") ?? "";
+    expect(bgImageUrlClass).toContain("bg-white");
+    expect(bgImageUrlClass).toContain("text-slate-900");
+    expect(bgImageUrlClass).toContain("border-slate-300");
+    expect(bgImageUrlClass).toContain("dark:bg-slate-900");
+    expect(bgImageUrlClass).toContain("dark:text-slate-100");
+    expect(bgImageUrlClass).toContain("dark:border-slate-700");
+
+    const bgVideoUrlInput = screen.getByLabelText("배경 비디오 URL") as HTMLInputElement;
+    const bgVideoUrlClass = bgVideoUrlInput.getAttribute("class") ?? "";
+    expect(bgVideoUrlClass).toContain("bg-white");
+    expect(bgVideoUrlClass).toContain("text-slate-900");
+    expect(bgVideoUrlClass).toContain("border-slate-300");
+    expect(bgVideoUrlClass).toContain("dark:bg-slate-900");
+    expect(bgVideoUrlClass).toContain("dark:text-slate-100");
+    expect(bgVideoUrlClass).toContain("dark:border-slate-700");
+  });
+
+	it("섹션 레이아웃 및 배경 이미지 레이아웃 셀렉트들은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+		const updateBlock = vi.fn();
+
+		render(
+			<SectionPropertiesPanel
+				sectionProps={{
+					...baseProps,
+					columns: [
+						{ id: "col_1", span: 6 },
+						{ id: "col_2", span: 6 },
+					],
+					alignItems: "top",
+					backgroundImageSrc: "https://example.com/bg.png",
+					backgroundImageSourceType: "externalUrl",
+					backgroundImagePositionMode: "preset",
+					backgroundImageSize: "cover",
+					backgroundImagePosition: "center",
+					backgroundImageRepeat: "no-repeat",
+				} as any}
+				selectedBlockId="section-theme-layout-1"
+				updateBlock={updateBlock}
+			/>,
+		);
+
+		const columnLayoutSelect = screen.getByLabelText("섹션 컬럼 레이아웃") as HTMLSelectElement;
+		const alignItemsSelect = screen.getByLabelText("섹션 컬럼 세로 정렬") as HTMLSelectElement;
+		const positionModeSelect = screen.getByLabelText("배경 이미지 위치 모드") as HTMLSelectElement;
+		const sizeSelect = screen.getByLabelText("배경 이미지 크기") as HTMLSelectElement;
+		const positionSelect = screen.getByLabelText("배경 이미지 위치") as HTMLSelectElement;
+		const repeatSelect = screen.getByLabelText("배경 이미지 반복") as HTMLSelectElement;
+
+		const assertDualTheme = (el: HTMLElement) => {
+			const className = el.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");
+		};
+
+		assertDualTheme(columnLayoutSelect);
+		assertDualTheme(alignItemsSelect);
+		assertDualTheme(positionModeSelect);
+		assertDualTheme(sizeSelect);
+		assertDualTheme(positionSelect);
+		assertDualTheme(repeatSelect);
+	});
 });