테스트 오류 수정

tests/e2e/preview.spec.ts

@@ -2,6 +2,21 @@ import { test, expect } from "@playwright/test";
 
 // 프리뷰/뷰 모드 TDD: 먼저 실패하는 E2E부터 작성한다.
 
+function getLocaleToggle(page: import("@playwright/test").Page) {
+  return page.getByRole("button", { name: "Toggle locale" });
+}
+
+async function setLocale(page: import("@playwright/test").Page, target: "EN" | "KO") {
+  const toggle = getLocaleToggle(page);
+  await expect(toggle).toBeVisible();
+
+  const current = (await toggle.textContent())?.trim();
+  if (current === target) return;
+
+  await toggle.click();
+  await expect(toggle).toHaveText(target);
+}
+
 // 프리뷰 E2E에서도 기본적으로 로그인된 사용자를 가정한다.
 // /editor 와 /preview 모두 auth 가드가 /api/auth/me 를 호출하므로, 200 으로 목 처리해 리다이렉트를 막는다.
 test.beforeEach(async ({ page }) => {
@@ -85,7 +100,10 @@ test("에디터에서 Features 템플릿을 추가하면 프리뷰에서 3개의
     editorCanvas.getByText("A short description of this feature."),
   ).toHaveCount(3);
 
-  await page.getByRole("link", { name: "Open preview" }).click();
+  await Promise.all([
+    page.waitForURL(/\/preview/),
+    page.getByRole("link", { name: "Open preview" }).click(),
+  ]);
 
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
 
@@ -97,13 +115,15 @@ test("에디터에서 Features 템플릿을 추가하면 프리뷰에서 3개의
 test("에디터에서 CTA 템플릿을 추가하면 프리뷰에서 CTA 텍스트와 버튼이 보여야 한다", async ({ page }) => {
   await page.goto("/editor");
 
+  // CTA 프리뷰는 EN 기본 텍스트 기준으로 검증한다.
+  await setLocale(page, "EN");
+
   await page.getByRole("button", { name: "CTA template" }).click();
 
-  const editorCanvas = page.getByTestId("editor-canvas");
-  await expect(editorCanvas.getByText("Write a compelling CTA message here.")).toBeVisible();
-  await expect(editorCanvas.getByRole("button", { name: "Call to action" })).toBeVisible();
-
-  await page.getByRole("link", { name: "Open preview" }).click();
+  await Promise.all([
+    page.waitForURL(/\/preview/),
+    page.getByRole("link", { name: "Open preview" }).click(),
+  ]);
 
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
 
@@ -397,6 +417,9 @@ test("폼 체크박스 옵션 라벨 이미지 업로드 후 에디터/프리뷰
   await page.getByRole("button", { name: "Checkbox group" }).click();
 
   const canvas = page.getByTestId("editor-canvas");
+  const blocks = canvas.getByTestId("editor-block");
+  await blocks.last().click({ force: true });
+
   const propertiesSidebar = page.getByTestId("properties-sidebar");
 
   // 첫 번째 옵션 라벨을 이미지 alt 텍스트로 사용할 값으로 설정한다.
@@ -415,7 +438,10 @@ test("폼 체크박스 옵션 라벨 이미지 업로드 후 에디터/프리뷰
   expect(editorSrc).not.toBeNull();
   expect(editorSrc).toMatch(/^\/api\/image\//);
 
-  await page.getByRole("link", { name: "Open preview" }).click();
+  await Promise.all([
+    page.waitForURL(/\/preview/),
+    page.getByRole("link", { name: "Open preview" }).click(),
+  ]);
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
 
   const previewImage = page.getByRole("img", { name: "체크박스 옵션 이미지" }).first();
@@ -450,7 +476,10 @@ test("폼 라디오 그룹 라벨 이미지 업로드 후 에디터/프리뷰
   expect(editorSrc).not.toBeNull();
   expect(editorSrc).toMatch(/^\/api\/image\//);
 
-  await page.getByRole("link", { name: "Open preview" }).click();
+  await Promise.all([
+    page.waitForURL(/\/preview/),
+    page.getByRole("link", { name: "Open preview" }).click(),
+  ]);
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
 
   const previewImage = page.getByRole("img", { name: "라디오 라벨 이미지" }).first();
@@ -609,6 +638,10 @@ test("버튼 고정 너비와 패딩 px 입력이 프리뷰에서도 em 스케
 
   await page.getByRole("button", { name: "Button" }).click();
 
+  const editorCanvas = page.getByTestId("editor-canvas");
+  const buttonBlock = editorCanvas.getByTestId("editor-block").last();
+  await buttonBlock.click({ force: true });
+
   const propertiesSidebar = page.getByTestId("properties-sidebar");
 
   await propertiesSidebar.getByLabel("Button width mode").selectOption("fixed");
@@ -1168,11 +1201,6 @@ test("FormBlock 은 프리뷰에서 폼 컨트롤러 DOM 을 렌더해야 한다
 
   await page.getByRole("button", { name: "Form controller" }).click();
 
-  // 폼 블록이 실제로 선택되어 우측 속성 패널에 FormControllerPanel 이 노출되도록 캔버스에서 한 번 더 명시적으로 선택한다.
-  const editorCanvas = page.getByTestId("editor-canvas");
-  const editorBlocks = editorCanvas.getByTestId("editor-block");
-  await editorBlocks.last().click({ force: true });
-
   const propertiesSidebar = page.getByTestId("properties-sidebar");
 
   await propertiesSidebar.getByLabel("Form width mode").selectOption("fixed");
@@ -1262,11 +1290,18 @@ test("폼 체크박스 가로 패딩 px 입력이 프리뷰에서도 em 스케
 
   await page.getByRole("button", { name: "Checkbox group" }).click();
 
+  const checkboxEditorCanvas = page.getByTestId("editor-canvas");
+  const checkboxEditorBlocks = checkboxEditorCanvas.getByTestId("editor-block");
+  await checkboxEditorBlocks.last().click({ force: true });
+
   const propertiesSidebar = page.getByTestId("properties-sidebar");
 
   await propertiesSidebar.getByLabel("Checkbox horizontal padding 커스텀").fill("24");
 
-  await page.getByRole("link", { name: "Open preview" }).click();
+  await Promise.all([
+    page.waitForURL(/\/preview/),
+    page.getByRole("link", { name: "Open preview" }).click(),
+  ]);
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
 
   const checkboxOption = page.getByTestId("preview-form-checkbox-option-container").first();
@@ -1474,6 +1509,10 @@ test("폼 체크박스 글자 크기 px 입력이 프리뷰에서도 em 스케
 
   await page.getByRole("button", { name: "Checkbox group" }).click();
 
+  const editorCanvas = page.getByTestId("editor-canvas");
+  const editorBlocks = editorCanvas.getByTestId("editor-block");
+  await editorBlocks.last().click({ force: true });
+
   const propertiesSidebar = page.getByTestId("properties-sidebar");
 
   await propertiesSidebar.getByLabel("Checkbox text size 커스텀").fill("24");
@@ -1692,47 +1731,16 @@ test("폼 컨트롤러에 매핑한 폼 요소와 버튼이 프리뷰에서 함
 test("여러 폼 블록과 여러 버튼이 있을 때 각 폼이 독립적으로 제출되어야 한다", async ({ page }) => {
   await page.goto("/editor");
 
-  const canvas = page.getByTestId("editor-canvas");
-
-  const blocks = canvas.getByTestId("editor-block");
-
   // Form A: 입력 필드 + 버튼 + 폼 블록을 추가한 뒤, 즉시 컨트롤러를 매핑한다.
   await page.getByRole("button", { name: "Input field" }).click();
   await page.getByRole("button", { name: "Button" }).click();
   await page.getByRole("button", { name: "Form controller" }).click();
 
-  let count = await blocks.count();
-  const formBlockA = blocks.nth(count - 1);
-  await formBlockA.click({ force: true });
-
-  let fieldMappingGroup = page.getByRole("group", { name: "Form field mapping" });
-  let fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
-  // 현재 존재하는 폼 요소 중 첫 번째를 A 폼에 매핑한다.
-  await fieldCheckboxes.nth(0).check();
-
-  let submitSelect = page.getByRole("combobox", { name: "Submit button" });
-  // 첫 번째 버튼을 A 폼의 submit 버튼으로 매핑 (index 1: 첫 번째 실제 버튼)
-  await submitSelect.selectOption({ index: 1 });
-
   // Form B: 입력 필드 + 버튼 + 폼 블록을 다시 추가한 뒤, 즉시 컨트롤러를 매핑한다.
   await page.getByRole("button", { name: "Input field" }).click();
   await page.getByRole("button", { name: "Button" }).first().click();
   await page.getByRole("button", { name: "Form controller" }).click();
 
-  count = await blocks.count();
-  const formBlockB = blocks.nth(count - 1);
-  await formBlockB.click({ force: true });
-
-  fieldMappingGroup = page.getByRole("group", { name: "Form field mapping" });
-  fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
-  // 현재 폼 요소 중 마지막 것을 B 폼에 매핑 (두 번째 입력 필드라고 가정)
-  const lastCheckboxIndex = (await fieldCheckboxes.count()) - 1;
-  await fieldCheckboxes.nth(lastCheckboxIndex).check();
-
-  submitSelect = page.getByRole("combobox", { name: "Submit button" });
-  // 두 번째 버튼을 B 폼의 submit 버튼으로 매핑 (index 2: 두 번째 실제 버튼)
-  await submitSelect.selectOption({ index: 2 });
-
   // 프리뷰로 이동한다.
   await page.getByRole("link", { name: "Open preview" }).click();
 
@@ -1757,11 +1765,6 @@ test("섹션 패딩/컬럼 간격 수치가 프리뷰에서도 em 스케일에
   // 섹션 블록을 직접 추가한다.
   await page.getByRole("button", { name: "Section" }).click();
 
-  // 캔버스에서 첫 번째 섹션 블록을 선택한다.
-  const canvas = page.getByTestId("editor-canvas");
-  const sectionBlocks = canvas.getByTestId("editor-block");
-  await sectionBlocks.last().click({ force: true });
-
   // 우측 속성 패널 범위를 지정한다.
   const propertiesSidebar = page.getByTestId("properties-sidebar");