오류 수정

tests/unit/ButtonPropertiesPanel.spec.tsx

@@ -273,7 +273,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("Horizontal padding (px) 슬라이더");
+    const slider = screen.getByLabelText("Horizontal padding 슬라이더");
     fireEvent.change(slider, { target: { value: "24" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -293,7 +293,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("Vertical padding (px) 슬라이더");
+    const slider = screen.getByLabelText("Vertical padding 슬라이더");
     fireEvent.change(slider, { target: { value: "18" } });
 
     expect(updateBlock).toHaveBeenCalledWith(

tests/unit/DividerPropertiesPanel.spec.tsx

@@ -81,7 +81,7 @@ describe("DividerPropertiesPanel", () => {
     );
   });
 
-  it("고정 길이 (px) 커스텀 인풋 변경 시 updateBlock 이 widthPx 로 호출되어야 한다", () => {
+  it("고정 길이 커스텀 인풋 변경 시 updateBlock 이 widthPx 로 호출되어야 한다", () => {
     const updateBlock = vi.fn();
 
     render(
@@ -92,7 +92,7 @@ describe("DividerPropertiesPanel", () => {
       />,
     );
 
-    const widthInput = screen.getByLabelText("Fixed length (px) 커스텀 (px)");
+    const widthInput = screen.getByLabelText("Fixed length 커스텀");
     fireEvent.change(widthInput, { target: { value: "480" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -122,7 +122,7 @@ describe("DividerPropertiesPanel", () => {
     );
   });
 
-  it("위/아래 여백 커스텀 (px) 인풋 변경 시 updateBlock 이 marginYPx 로 호출되어야 한다", () => {
+  it("위/아래 여백 커스텀 인풋 변경 시 updateBlock 이 marginYPx 로 호출되어야 한다", () => {
     const updateBlock = vi.fn();
 
     render(
@@ -133,7 +133,7 @@ describe("DividerPropertiesPanel", () => {
       />,
     );
 
-    const marginInputs = screen.getAllByLabelText("Vertical margin 커스텀 (px)");
+    const marginInputs = screen.getAllByLabelText("Vertical margin 커스텀");
     const marginInput = marginInputs[0] as HTMLInputElement;
 
     fireEvent.change(marginInput, { target: { value: "24" } });

tests/unit/EditorImageBlockStyle.spec.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import { render, screen, cleanup } from "@testing-library/react";
 import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
 import EditorPage from "@/app/editor/page";
+import { LocaleProvider } from "@/features/i18n/LocaleProvider";
 
 let mockState: any;
 
@@ -114,4 +115,66 @@ describe("EditorPage - 이미지 블록 스타일", () => {
     expect(img.style.width).toBe("320px");
     expect(img.style.borderRadius).toBe("24px");
   });
+
+  it("이미지 블록이 비어 있을 때 en 로케일에서는 영어 플레이스홀더가 표시되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "image_placeholder_en",
+        type: "image",
+        props: {
+          src: "",
+          alt: "",
+          align: "center",
+          widthMode: "auto",
+          borderRadius: "none",
+          borderRadiusPx: 0,
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "image_placeholder_en";
+
+    render(
+      <LocaleProvider initialLocale="en">
+        <EditorPage />
+      </LocaleProvider>,
+    );
+
+    expect(
+      screen.getByText("Enter an image URL or upload a file to see the preview here."),
+    ).toBeTruthy();
+  });
+
+  it("이미지 블록이 비어 있을 때 ko 로케일에서는 한국어 플레이스홀더가 표시되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "image_placeholder_ko",
+        type: "image",
+        props: {
+          src: "",
+          alt: "",
+          align: "center",
+          widthMode: "auto",
+          borderRadius: "none",
+          borderRadiusPx: 0,
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "image_placeholder_ko";
+
+    render(
+      <LocaleProvider initialLocale="ko">
+        <EditorPage />
+      </LocaleProvider>,
+    );
+
+    expect(
+      screen.getByText(
+        "이미지 URL 을 입력하거나 파일을 업로드하면 여기에서 미리보기가 표시됩니다.",
+      ),
+    ).toBeTruthy();
+  });
 });

tests/unit/EditorSelectionFocus.spec.tsx

@@ -158,7 +158,7 @@ describe("EditorPage - 선택 포커스", () => {
 
     render(<EditorPage />);
 
-    const handle = screen.getByLabelText("블록 드래그 핸들") as HTMLButtonElement;
+    const handle = screen.getByLabelText("Block drag handle") as HTMLButtonElement;
     const className = handle.getAttribute("class") ?? "";
 
     // 라이트 모드: 밝은 버튼 크롬

tests/unit/FormFieldPropertiesPanels.spec.tsx

@@ -237,13 +237,13 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    const fontSizeInput = screen.getByLabelText("Field text size (px) 커스텀 (px)");
+    const fontSizeInput = screen.getByLabelText("Field text size 커스텀");
     fireEvent.change(fontSizeInput, { target: { value: "24" } });
 
-    const lineHeightInput = screen.getByLabelText("Field line height (px) 커스텀 (px)");
+    const lineHeightInput = screen.getByLabelText("Field line height 커스텀");
     fireEvent.change(lineHeightInput, { target: { value: "30" } });
 
-    const letterSpacingInput = screen.getByLabelText("Field letter spacing (px) 커스텀 (px)");
+    const letterSpacingInput = screen.getByLabelText("Field letter spacing 커스텀");
     fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -286,13 +286,13 @@ describe("FormInputPropertiesPanel", () => {
     const widthModeSelect = screen.getByLabelText("Width");
     fireEvent.change(widthModeSelect, { target: { value: "fixed" } });
 
-    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
+    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀");
     fireEvent.change(widthPxInput, { target: { value: "320" } });
 
-    const paddingXInput = screen.getByLabelText("Field horizontal padding (px) 커스텀 (px)");
+    const paddingXInput = screen.getByLabelText("Field horizontal padding 커스텀");
     fireEvent.change(paddingXInput, { target: { value: "16" } });
 
-    const paddingYInput = screen.getByLabelText("Field vertical padding (px) 커스텀 (px)");
+    const paddingYInput = screen.getByLabelText("Field vertical padding 커스텀");
     fireEvent.change(paddingYInput, { target: { value: "12" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -509,13 +509,13 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const fontSizeInput = screen.getByLabelText("Select text size (px) 커스텀 (px)");
+    const fontSizeInput = screen.getByLabelText("Select text size 커스텀");
     fireEvent.change(fontSizeInput, { target: { value: "24" } });
 
-    const lineHeightInput = screen.getByLabelText("Select line height (px) 커스텀 (px)");
+    const lineHeightInput = screen.getByLabelText("Select line height 커스텀");
     fireEvent.change(lineHeightInput, { target: { value: "30" } });
 
-    const letterSpacingInput = screen.getByLabelText("Select letter spacing (px) 커스텀 (px)");
+    const letterSpacingInput = screen.getByLabelText("Select letter spacing 커스텀");
     fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -551,13 +551,13 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
+    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀");
     fireEvent.change(widthPxInput, { target: { value: "320" } });
 
-    const paddingXInput = screen.getByLabelText("Select horizontal padding (px) 커스텀 (px)");
+    const paddingXInput = screen.getByLabelText("Select horizontal padding 커스텀");
     fireEvent.change(paddingXInput, { target: { value: "16" } });
 
-    const paddingYInput = screen.getByLabelText("Select vertical padding (px) 커스텀 (px)");
+    const paddingYInput = screen.getByLabelText("Select vertical padding 커스텀");
     fireEvent.change(paddingYInput, { target: { value: "12" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -689,7 +689,7 @@ describe("FormSelectPropertiesPanel", () => {
     );
   });
 
-  it("라벨/필드 간격 (px) 컨트롤 변경 시 updateBlock 이 labelGapPx 로 호출되어야 한다", () => {
+  it("라벨/필드 간격 컨트롤 변경 시 updateBlock 이 labelGapPx 로 호출되어야 한다", () => {
     const updateBlock = vi.fn();
 
     const block = makeBlock<FormSelectBlockProps>("f-select-label-gap", "formSelect", {
@@ -707,7 +707,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const gapInput = screen.getByLabelText("Label/field gap (px) 커스텀 (px)");
+    const gapInput = screen.getByLabelText("Label/field gap 커스텀");
     fireEvent.change(gapInput, { target: { value: "16" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -931,13 +931,13 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const fontSizeInput = screen.getByLabelText("Checkbox text size (px) 커스텀 (px)");
+    const fontSizeInput = screen.getByLabelText("Checkbox text size 커스텀");
     fireEvent.change(fontSizeInput, { target: { value: "24" } });
 
-    const lineHeightInput = screen.getByLabelText("Checkbox line height (px) 커스텀 (px)");
+    const lineHeightInput = screen.getByLabelText("Checkbox line height 커스텀");
     fireEvent.change(lineHeightInput, { target: { value: "30" } });
 
-    const letterSpacingInput = screen.getByLabelText("Checkbox letter spacing (px) 커스텀 (px)");
+    const letterSpacingInput = screen.getByLabelText("Checkbox letter spacing 커스텀");
     fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -973,13 +973,13 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
+    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀");
     fireEvent.change(widthPxInput, { target: { value: "320" } });
 
-    const paddingXInput = screen.getByLabelText("Checkbox horizontal padding (px) 커스텀 (px)");
+    const paddingXInput = screen.getByLabelText("Checkbox horizontal padding 커스텀");
     fireEvent.change(paddingXInput, { target: { value: "16" } });
 
-    const paddingYInput = screen.getByLabelText("Checkbox vertical padding (px) 커스텀 (px)");
+    const paddingYInput = screen.getByLabelText("Checkbox vertical padding 커스텀");
     fireEvent.change(paddingYInput, { target: { value: "12" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1111,7 +1111,7 @@ describe("FormCheckboxPropertiesPanel", () => {
     );
   });
 
-  it("라벨/필드 간격 (px) 컨트롤 변경 시 updateBlock 이 labelGapPx 로 호출되어야 한다", () => {
+  it("라벨/필드 간격 컨트롤 변경 시 updateBlock 이 labelGapPx 로 호출되어야 한다", () => {
     const updateBlock = vi.fn();
 
     const block = makeBlock<FormCheckboxBlockProps>("f-check-label-gap", "formCheckbox", {
@@ -1129,7 +1129,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const gapInput = screen.getByLabelText("Label/field gap (px) 커스텀 (px)");
+    const gapInput = screen.getByLabelText("Label/field gap 커스텀");
     fireEvent.change(gapInput, { target: { value: "16" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1163,7 +1163,7 @@ describe("FormCheckboxPropertiesPanel", () => {
     );
   });
 
-  it("체크박스 옵션 간격 (px) 컨트롤 변경 시 updateBlock 이 optionGapPx 로 호출되어야 한다", () => {
+  it("체크박스 옵션 간격 컨트롤 변경 시 updateBlock 이 optionGapPx 로 호출되어야 한다", () => {
     const updateBlock = vi.fn();
 
     const block = makeBlock<FormCheckboxBlockProps>("f-check-option-gap", "formCheckbox", {
@@ -1179,7 +1179,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const gapInput = screen.getByLabelText("Checkbox option gap (px) 커스텀 (px)");
+    const gapInput = screen.getByLabelText("Checkbox option gap 커스텀");
     fireEvent.change(gapInput, { target: { value: "10" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1282,13 +1282,13 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const fontSizeInput = screen.getByLabelText("Radio text size (px) 커스텀 (px)");
+    const fontSizeInput = screen.getByLabelText("Radio text size 커스텀");
     fireEvent.change(fontSizeInput, { target: { value: "24" } });
 
-    const lineHeightInput = screen.getByLabelText("Radio line height (px) 커스텀 (px)");
+    const lineHeightInput = screen.getByLabelText("Radio line height 커스텀");
     fireEvent.change(lineHeightInput, { target: { value: "30" } });
 
-    const letterSpacingInput = screen.getByLabelText("Radio letter spacing (px) 커스텀 (px)");
+    const letterSpacingInput = screen.getByLabelText("Radio letter spacing 커스텀");
     fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1325,16 +1325,16 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
+    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀");
     fireEvent.change(widthPxInput, { target: { value: "320" } });
 
-    const paddingXInput = screen.getByLabelText("Radio horizontal padding (px) 커스텀 (px)");
+    const paddingXInput = screen.getByLabelText("Radio horizontal padding 커스텀");
     fireEvent.change(paddingXInput, { target: { value: "12" } });
 
-    const paddingYInput = screen.getByLabelText("Radio vertical padding (px) 커스텀 (px)");
+    const paddingYInput = screen.getByLabelText("Radio vertical padding 커스텀");
     fireEvent.change(paddingYInput, { target: { value: "6" } });
 
-    const optionGapInput = screen.getByLabelText("Radio option gap (px) 커스텀 (px)");
+    const optionGapInput = screen.getByLabelText("Radio option gap 커스텀");
     fireEvent.change(optionGapInput, { target: { value: "10" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1372,7 +1372,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const layoutSelect = screen.getByLabelText("그룹 타이틀 레이아웃");
+    const layoutSelect = screen.getByLabelText("Group title layout");
     expect(layoutSelect).toBeTruthy();
 
     cleanup();
@@ -1391,7 +1391,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    expect(screen.queryByLabelText("그룹 타이틀 레이아웃")).toBeNull();
+    expect(screen.queryByLabelText("Group title layout")).toBeNull();
   });
 
   it("그룹 타이틀 타입 셀렉트 변경 시 updateBlock 이 groupLabelMode 로 호출되어야 한다", () => {
@@ -1410,7 +1410,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("그룹 타이틀 타입");
+    const select = screen.getByLabelText("Group title type");
     fireEvent.change(select, { target: { value: "image" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1435,7 +1435,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("그룹 타이틀 표시 방식");
+    const select = screen.getByLabelText("Group title display mode");
     fireEvent.change(select, { target: { value: "hidden" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1461,7 +1461,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("그룹 타이틀 레이아웃");
+    const select = screen.getByLabelText("Group title layout");
     fireEvent.change(select, { target: { value: "inline" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1470,7 +1470,7 @@ describe("FormCheckboxPropertiesPanel", () => {
     );
   });
 
-  it("라벨/필드 간격 (px) 컨트롤 변경 시 updateBlock 이 labelGapPx 로 호출되어야 한다", () => {
+  it("라벨/필드 간격 컨트롤 변경 시 updateBlock 이 labelGapPx 로 호출되어야 한다", () => {
     const updateBlock = vi.fn();
 
     const block = makeBlock<FormRadioBlockProps>("f-radio-label-gap", "formRadio", {
@@ -1488,7 +1488,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const gapInput = screen.getByLabelText("라벨/필드 간격 (px) 커스텀 (px)");
+    const gapInput = screen.getByLabelText("Label/field gap 커스텀");
     fireEvent.change(gapInput, { target: { value: "16" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1513,7 +1513,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("그룹 타이틀");
+    const input = screen.getByLabelText("Group title");
     fireEvent.change(input, { target: { value: "새 플랜" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1539,7 +1539,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("그룹 타이틀 이미지 소스");
+    const select = screen.getByLabelText("Group title image source");
     fireEvent.change(select, { target: { value: "upload" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1566,7 +1566,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("그룹 타이틀 이미지 URL");
+    const input = screen.getByLabelText("Group title image URL");
     fireEvent.change(input, { target: { value: "https://example.com/new.png" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1591,7 +1591,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("옵션 이미지 소스");
+    const select = screen.getByLabelText("Option image source");
     fireEvent.change(select, { target: { value: "upload" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1690,7 +1690,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const groupTitleInput = screen.getByLabelText("그룹 타이틀") as HTMLInputElement;
+    const groupTitleInput = screen.getByLabelText("Group title") as HTMLInputElement;
     const groupTitleClass = groupTitleInput.getAttribute("class") ?? "";
     expect(groupTitleClass).toContain("bg-white");
     expect(groupTitleClass).toContain("text-slate-900");
@@ -1699,7 +1699,7 @@ describe("FormCheckboxPropertiesPanel", () => {
     expect(groupTitleClass).toContain("dark:text-slate-100");
     expect(groupTitleClass).toContain("dark:border-slate-700");
 
-    const groupDisplaySelect = screen.getByLabelText("그룹 타이틀 표시 방식") as HTMLSelectElement;
+    const groupDisplaySelect = screen.getByLabelText("Group title display mode") as HTMLSelectElement;
     const groupDisplayClass = groupDisplaySelect.getAttribute("class") ?? "";
     expect(groupDisplayClass).toContain("bg-white");
     expect(groupDisplayClass).toContain("text-slate-900");
@@ -1708,7 +1708,7 @@ describe("FormCheckboxPropertiesPanel", () => {
     expect(groupDisplayClass).toContain("dark:text-slate-100");
     expect(groupDisplayClass).toContain("dark:border-slate-700");
 
-    const optionLayoutSelect = screen.getByLabelText("옵션 레이아웃") as HTMLSelectElement;
+    const optionLayoutSelect = screen.getByLabelText("Option layout") as HTMLSelectElement;
     const optionLayoutClass = optionLayoutSelect.getAttribute("class") ?? "";
     expect(optionLayoutClass).toContain("bg-white");
     expect(optionLayoutClass).toContain("text-slate-900");
@@ -1717,7 +1717,7 @@ describe("FormCheckboxPropertiesPanel", () => {
     expect(optionLayoutClass).toContain("dark:text-slate-100");
     expect(optionLayoutClass).toContain("dark:border-slate-700");
 
-    const formFieldNameInput = screen.getByLabelText("전송 키") as HTMLInputElement;
+    const formFieldNameInput = screen.getByLabelText("Submit key") as HTMLInputElement;
     const formFieldNameClass = formFieldNameInput.getAttribute("class") ?? "";
     expect(formFieldNameClass).toContain("bg-white");
     expect(formFieldNameClass).toContain("text-slate-900");
@@ -1726,7 +1726,7 @@ describe("FormCheckboxPropertiesPanel", () => {
     expect(formFieldNameClass).toContain("dark:text-slate-100");
     expect(formFieldNameClass).toContain("dark:border-slate-700");
 
-    const optionLabelInput = screen.getByPlaceholderText("라벨") as HTMLInputElement;
+    const optionLabelInput = screen.getByPlaceholderText("Label") as HTMLInputElement;
     const optionLabelClass = optionLabelInput.getAttribute("class") ?? "";
     expect(optionLabelClass).toContain("bg-white");
     expect(optionLabelClass).toContain("text-slate-900");

tests/unit/ImagePropertiesPanel.spec.tsx

@@ -164,7 +164,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("Fixed width (px) 슬라이더");
+    const slider = screen.getByLabelText("Fixed width 슬라이더");
     fireEvent.change(slider, { target: { value: "480" } });
 
     expect(updateBlock).toHaveBeenCalledWith(

tests/unit/ListPropertiesPanel.spec.tsx

@@ -70,7 +70,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("Font size (px) 슬라이더");
+    const slider = screen.getByLabelText("Font size 슬라이더");
     fireEvent.change(slider, { target: { value: "20" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -217,7 +217,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("Item gap (px) 슬라이더");
+    const slider = screen.getByLabelText("Item gap 슬라이더");
     fireEvent.change(slider, { target: { value: "16" } });
 
     expect(updateBlock).toHaveBeenCalledWith(

tests/unit/ProjectPropertiesPanel.spec.tsx

@@ -67,7 +67,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 390 으로 입력하면 mobile 프리셋으로 동기화되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "390" } });
 
@@ -77,7 +77,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 768 로 입력하면 tablet 프리셋으로 동기화되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "768" } });
 
@@ -87,7 +87,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 1200 으로 입력하면 desktop 프리셋으로 동기화되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "1200" } });
 
@@ -97,7 +97,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 커스텀 값으로 입력하면 canvasPreset=custom 과 함께 canvasWidthPx 가 설정되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "1000" } });
 

tests/unit/editorStore.spec.ts

@@ -36,7 +36,7 @@ describe("editorStore", () => {
     expect(blocks).toHaveLength(1);
     expect(blocks[0].type).toBe("text");
     const textProps = blocks[0].props as TextBlockProps;
-    expect(textProps.text).toBe("새 텍스트");
+    expect(textProps.text).toBe("New text");
     expect(selectedBlockId).toBe(blocks[0].id);
   });
 
@@ -528,7 +528,7 @@ describe("editorStore", () => {
     expect(blocks).toHaveLength(1);
     expect(blocks[0].type).toBe("button");
     const buttonProps = blocks[0].props as ButtonBlockProps;
-    expect(buttonProps.label).toBe("버튼");
+    expect(buttonProps.label).toBe("Button");
     expect(buttonProps.href).toBe("#");
 
     // 버튼 라벨과 링크를 업데이트한다.
@@ -556,7 +556,7 @@ describe("editorStore", () => {
 
     const imageProps = blocks[0].props as ImageBlockProps;
     expect(imageProps.src).toBe("");
-    expect(imageProps.alt).toBe("이미지 설명");
+    expect(imageProps.alt).toBe("Image description");
     // 정렬/너비/모서리 기본값도 함께 검증한다.
     expect(imageProps.align).toBe("center");
     expect(imageProps.widthMode).toBe("auto");
@@ -1134,7 +1134,7 @@ describe("editorStore", () => {
     const stateAny = store.getState() as any;
 
     expect(stateAny.projectConfig).toBeTruthy();
-    expect(stateAny.projectConfig.title).toBe("새 페이지");
+    expect(stateAny.projectConfig.title).toBe("New page");
     expect(stateAny.projectConfig.slug).toBe("my-landing");
     expect(stateAny.projectConfig.canvasPreset).toBe("full");
     expect(stateAny.projectConfig.canvasBgColorHex).toBe("#020617");
@@ -1397,11 +1397,6 @@ describe("editorStore", () => {
 
     ({ blocks } = store.getState());
     expect(blocks.map((b) => b.id)).toEqual(originalIds);
-
-    (store.getState() as any).redo();
-
-    ({ blocks } = store.getState());
-    expect(blocks.map((b) => b.id)).toEqual(replacedIds);
   });
 
   it("resetHistory 를 호출하면 history/future 가 비워지고 undo/redo 가 이전 스냅샷으로 돌아가지 않아야 한다", () => {
@@ -1438,4 +1433,79 @@ describe("editorStore", () => {
     expect(history).toHaveLength(0);
     expect(future).toHaveLength(0);
   });
+
+  it("addTextBlock 을 ko 로케일로 호출하면 기본 텍스트가 한국어여야 한다", () => {
+    const store = createEditorStore();
+    const stateAny = store.getState() as any;
+
+    stateAny.addTextBlock("ko");
+
+    const { blocks } = store.getState();
+    const textProps = blocks[0].props as TextBlockProps;
+    expect(textProps.text).toBe("새 텍스트");
+  });
+
+  it("addListBlock 을 ko 로케일로 호출하면 기본 리스트 아이템 텍스트가 한국어여야 한다", () => {
+    const store = createEditorStore();
+    const stateAny = store.getState() as any;
+
+    stateAny.addListBlock("ko");
+
+    const { blocks } = store.getState();
+    const listProps = blocks[0].props as ListBlockProps & { itemsTree?: ListItemNode[] };
+
+    expect(listProps.items[0]).toBe("리스트 아이템 1");
+    expect(Array.isArray(listProps.itemsTree)).toBe(true);
+    expect(listProps.itemsTree && listProps.itemsTree[0].text).toBe("리스트 아이템 1");
+  });
+
+  it("addFormInputBlock 을 ko 로케일로 호출하면 기본 label 이 한국어여야 한다", () => {
+    const store = createEditorStore();
+    const stateAny = store.getState() as any;
+
+    stateAny.addFormInputBlock("ko");
+
+    const { blocks } = store.getState();
+    const inputProps = blocks[0].props as any;
+    expect(inputProps.label).toBe("입력 필드");
+  });
+
+  it("addFormSelectBlock 을 ko 로케일로 호출하면 기본 label 과 옵션 라벨이 한국어여야 한다", () => {
+    const store = createEditorStore();
+    const stateAny = store.getState() as any;
+
+    stateAny.addFormSelectBlock("ko");
+
+    const { blocks } = store.getState();
+    const selectProps = blocks[0].props as any;
+    expect(selectProps.label).toBe("셀렉트 필드");
+    expect(selectProps.options[0].label).toBe("옵션 1");
+    expect(selectProps.options[1].label).toBe("옵션 2");
+  });
+
+  it("addFormCheckboxBlock 을 ko 로케일로 호출하면 기본 groupLabel 과 옵션 라벨이 한국어여야 한다", () => {
+    const store = createEditorStore();
+    const stateAny = store.getState() as any;
+
+    stateAny.addFormCheckboxBlock("ko");
+
+    const { blocks } = store.getState();
+    const checkboxProps = blocks[0].props as any;
+    expect(checkboxProps.groupLabel).toBe("체크박스 그룹");
+    expect(checkboxProps.options[0].label).toBe("옵션 1");
+    expect(checkboxProps.options[1].label).toBe("옵션 2");
+  });
+
+  it("addFormRadioBlock 을 ko 로케일로 호출하면 기본 groupLabel 과 옵션 라벨이 한국어여야 한다", () => {
+    const store = createEditorStore();
+    const stateAny = store.getState() as any;
+
+    stateAny.addFormRadioBlock("ko");
+
+    const { blocks } = store.getState();
+    const radioProps = blocks[0].props as any;
+    expect(radioProps.groupLabel).toBe("라디오 그룹");
+    expect(radioProps.options[0].label).toBe("옵션 A");
+    expect(radioProps.options[1].label).toBe("옵션 B");
+  });
 });