i18n 적용

tests/unit/EditorCanvasBackground.spec.tsx

@@ -2,6 +2,8 @@ import { describe, it, expect, afterEach } from "vitest";
 import { render, screen, cleanup } from "@testing-library/react";
 import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
 import { EditorCanvas, EditorCanvasDragPreview } from "@/app/editor/EditorCanvas";
+import { LocaleProvider } from "@/features/i18n/LocaleProvider";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
 
 // 에디터 캔버스/페이지 배경색 적용 규칙에 대한 최소 TDD
 // - canvasBgColorHex: 실제 캔버스 영역(editor-canvas-inner)의 배경색
@@ -37,15 +39,38 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
   };
 
   it("canvasBgColorHex 는 editor-canvas-inner 배경색에 적용되어야 한다", () => {
-    render(<EditorCanvas {...baseProps} />);
+    render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvas {...baseProps} />
+      </LocaleProvider>,
+    );
 
     const inner = screen.getByTestId("editor-canvas-inner") as HTMLElement;
 
     expect(inner.style.backgroundColor).toBe("rgb(17, 17, 17)");
   });
 
+  it("blocks 가 없을 때 en 로케일에서는 영어 안내 문구를 표시해야 한다", () => {
+    render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvas {...baseProps} />
+      </LocaleProvider>,
+    );
+
+    const hint = screen.getByText(
+      'Click the "Text" button on the left to add your first block.',
+    );
+    expect(hint.textContent).toBe(
+      'Click the "Text" button on the left to add your first block.',
+    );
+  });
+
   it("bodyBgColorHex 는 editor-canvas 바깥 래퍼(editor-canvas)의 배경색에 적용되어야 한다", () => {
-    const { container } = render(<EditorCanvas {...baseProps} />);
+    const { container } = render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvas {...baseProps} />
+      </LocaleProvider>,
+    );
 
     const outer = container.querySelector('[data-testid="editor-canvas"]') as HTMLElement | null;
 
@@ -56,7 +81,11 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
   it("canvasPreset / canvasWidthPx 에 따라 editor-canvas-inner 의 maxWidth 가 설정되어야 한다", () => {
     const renderWithConfig = (partial: Partial<ProjectConfig>) => {
       const projectConfig = { ...baseProjectConfig, ...partial } as ProjectConfig;
-      const { getByTestId, unmount } = render(<EditorCanvas {...baseProps} projectConfig={projectConfig} />);
+      const { getByTestId, unmount } = render(
+        <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+          <EditorCanvas {...baseProps} projectConfig={projectConfig} />
+        </LocaleProvider>,
+      );
       const inner = getByTestId("editor-canvas-inner") as HTMLElement;
       const maxWidth = inner.style.maxWidth;
       unmount();
@@ -85,7 +114,11 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
       },
     } as any;
 
-    const { container } = render(<EditorCanvasDragPreview block={block} />);
+    const { container } = render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvasDragPreview block={block} />
+      </LocaleProvider>,
+    );
 
     const overlay = container.querySelector(
       "div.pointer-events-none.rounded.border",
@@ -99,4 +132,25 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
     expect(className).toContain("dark:bg-slate-900");
     expect(className).toContain("dark:text-slate-100");
   });
+
+  it("en 로케일에서는 EditorCanvasDragPreview 의 텍스트 블록 fallback 라벨이 영어로 표시되어야 한다", () => {
+    const block: Block = {
+      id: "text_fallback_1",
+      type: "text",
+      props: {
+        text: "",
+        align: "left",
+        size: "base",
+      },
+    } as any;
+
+    render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvasDragPreview block={block} />
+      </LocaleProvider>,
+    );
+
+    const fallbackLabel = screen.getByText("Text block");
+    expect(fallbackLabel.textContent).toBe("Text block");
+  });
 });