이미지 파일 업로드 기능

tests/e2e/preview.spec.ts

@@ -40,6 +40,21 @@ test("에디터에서 Hero 템플릿을 추가하면 프리뷰에서 동일한 H
   await expect(page.getByRole("button", { name: "텍스트 블록 추가" })).toHaveCount(0);
 });
 
+test("프리뷰 페이지에서 에디터로 돌아가는 링크가 있어야 한다", async ({ page }) => {
+  // 에디터에서 간단히 진입한 뒤 프리뷰로 이동한다.
+  await page.goto("/editor");
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+
+  // 프리뷰 헤더와 함께 "에디터로 돌아가기" 링크가 보여야 한다.
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+  await expect(page.getByRole("link", { name: "에디터로 돌아가기" })).toBeVisible();
+
+  // 링크를 클릭하면 다시 에디터로 돌아가야 한다.
+  await page.getByRole("link", { name: "에디터로 돌아가기" }).click();
+  await expect(page.getByRole("heading", { name: "Page Editor" })).toBeVisible();
+});
+
 test("에디터에서 Features 템플릿을 추가하면 프리뷰에서 3개의 Feature 섹션이 보여야 한다", async ({ page }) => {
   await page.goto("/editor");
 
@@ -275,6 +290,137 @@ test("폼 입력/셀렉트 블록도 FormBlock 없이 프리뷰에서 보여야
   await expect(page.getByText("선택 필드")).toBeVisible();
 });
 
+test("폼 체크박스 그룹 라벨 이미지 업로드 후 에디터/프리뷰 모두 /api/image/:id 기반 이미지가 보여야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  await page.getByRole("button", { name: "폼 체크박스 추가" }).click();
+
+  const canvas = page.getByTestId("editor-canvas");
+  const propertiesSidebar = page.getByTestId("properties-sidebar");
+
+  await propertiesSidebar.getByLabel("그룹 타이틀 타입").selectOption("image");
+  await propertiesSidebar.getByLabel("그룹 타이틀 이미지 소스").selectOption("upload");
+  await propertiesSidebar.getByLabel("그룹 타이틀", { exact: true }).fill("체크박스 라벨 이미지");
+
+  const fileInput = propertiesSidebar.getByLabel("그룹 타이틀 이미지 파일 업로드");
+  await fileInput.setInputFiles("tests/fixtures/sample-image.png");
+
+  const editorImage = canvas.getByRole("img", { name: "체크박스 라벨 이미지" }).first();
+  await expect(editorImage).toBeVisible();
+
+  const editorSrc = await editorImage.getAttribute("src");
+  expect(editorSrc).not.toBeNull();
+  expect(editorSrc).toMatch(/^\/api\/image\//);
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewImage = page.getByRole("img", { name: "체크박스 라벨 이미지" }).first();
+  await expect(previewImage).toBeVisible();
+
+  const previewSrc = await previewImage.getAttribute("src");
+  expect(previewSrc).toBe(editorSrc);
+});
+
+test("폼 라디오 옵션 라벨 이미지 업로드 후 에디터/프리뷰 모두 /api/image/:id 기반 이미지가 보여야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  await page.getByRole("button", { name: "폼 라디오 추가" }).click();
+
+  const canvas = page.getByTestId("editor-canvas");
+  const propertiesSidebar = page.getByTestId("properties-sidebar");
+
+  const firstOptionLabel = propertiesSidebar.getByPlaceholder("라벨").first();
+  await firstOptionLabel.fill("라디오 옵션 이미지");
+
+   await propertiesSidebar.getByLabel("옵션 이미지 소스").selectOption("upload");
+
+  const fileInput = propertiesSidebar.getByLabel("옵션 이미지 파일 업로드").first();
+  await fileInput.setInputFiles("tests/fixtures/sample-image.png");
+
+  const editorImage = canvas.getByRole("img", { name: "라디오 옵션 이미지" }).first();
+  await expect(editorImage).toBeVisible();
+
+  const editorSrc = await editorImage.getAttribute("src");
+  expect(editorSrc).not.toBeNull();
+  expect(editorSrc).toMatch(/^\/api\/image\//);
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewImage = page.getByRole("img", { name: "라디오 옵션 이미지" }).first();
+  await expect(previewImage).toBeVisible();
+
+  const previewSrc = await previewImage.getAttribute("src");
+  expect(previewSrc).toBe(editorSrc);
+});
+
+test("폼 체크박스 옵션 라벨 이미지 업로드 후 에디터/프리뷰 모두 /api/image/:id 기반 이미지가 보여야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  await page.getByRole("button", { name: "폼 체크박스 추가" }).click();
+
+  const canvas = page.getByTestId("editor-canvas");
+  const propertiesSidebar = page.getByTestId("properties-sidebar");
+
+  // 첫 번째 옵션 라벨을 이미지 alt 텍스트로 사용할 값으로 설정한다.
+  const firstOptionLabel = propertiesSidebar.getByPlaceholder("라벨").first();
+  await firstOptionLabel.fill("체크박스 옵션 이미지");
+
+  await propertiesSidebar.getByLabel("옵션 이미지 소스").selectOption("upload");
+
+  const fileInput = propertiesSidebar.getByLabel("옵션 이미지 파일 업로드").first();
+  await fileInput.setInputFiles("tests/fixtures/sample-image.png");
+
+  const editorImage = canvas.getByRole("img", { name: "체크박스 옵션 이미지" }).first();
+  await expect(editorImage).toBeVisible();
+
+  const editorSrc = await editorImage.getAttribute("src");
+  expect(editorSrc).not.toBeNull();
+  expect(editorSrc).toMatch(/^\/api\/image\//);
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewImage = page.getByRole("img", { name: "체크박스 옵션 이미지" }).first();
+  await expect(previewImage).toBeVisible();
+
+  const previewSrc = await previewImage.getAttribute("src");
+  expect(previewSrc).toBe(editorSrc);
+});
+
+test("폼 라디오 그룹 라벨 이미지 업로드 후 에디터/프리뷰 모두 /api/image/:id 기반 이미지가 보여야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  await page.getByRole("button", { name: "폼 라디오 추가" }).click();
+
+  const canvas = page.getByTestId("editor-canvas");
+  const propertiesSidebar = page.getByTestId("properties-sidebar");
+
+  await propertiesSidebar.getByLabel("그룹 타이틀 타입").selectOption("image");
+  await propertiesSidebar.getByLabel("그룹 타이틀 이미지 소스").selectOption("upload");
+  await propertiesSidebar.getByLabel("그룹 타이틀", { exact: true }).fill("라디오 라벨 이미지");
+
+  const fileInput = propertiesSidebar.getByLabel("그룹 타이틀 이미지 파일 업로드");
+  await fileInput.setInputFiles("tests/fixtures/sample-image.png");
+
+  const editorImage = canvas.getByRole("img", { name: "라디오 라벨 이미지" }).first();
+  await expect(editorImage).toBeVisible();
+
+  const editorSrc = await editorImage.getAttribute("src");
+  expect(editorSrc).not.toBeNull();
+  expect(editorSrc).toMatch(/^\/api\/image\//);
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewImage = page.getByRole("img", { name: "라디오 라벨 이미지" }).first();
+  await expect(previewImage).toBeVisible();
+
+  const previewSrc = await previewImage.getAttribute("src");
+  expect(previewSrc).toBe(editorSrc);
+});
+
 test("폼 입력 필드 스타일 속성이 프리뷰에도 반영되어야 한다", async ({ page }) => {
   await page.goto("/editor");
 
@@ -487,6 +633,43 @@ test("이미지 고정 너비가 프리뷰에서도 em 스케일로 반영되어
   expect(computed.inlineWidth.endsWith("em")).toBeTruthy();
 });
 
+test("이미지 블록에서 로컬 파일 업로드 후 에디터/프리뷰 모두 /api/image/:id 기반 이미지가 보여야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  await page.getByRole("button", { name: "이미지 블록 추가" }).click();
+
+  const canvas = page.getByTestId("editor-canvas");
+  const propertiesSidebar = page.getByTestId("properties-sidebar");
+
+  // alt 텍스트를 먼저 설정해 에디터/프리뷰에서 이미지를 안정적으로 찾을 수 있게 한다.
+  await propertiesSidebar.getByLabel("대체 텍스트").fill("업로드 이미지");
+
+  // 이미지 소스를 파일 업로드 모드로 전환한다.
+  await propertiesSidebar.getByLabel("이미지 소스").selectOption("upload");
+
+  // 아직 구현되지 않은 이미지 업로드 인풋(aria-label: "이미지 파일 업로드")을 통해 로컬 파일을 업로드한다고 가정한다.
+  const fileInput = propertiesSidebar.getByLabel("이미지 파일 업로드");
+  await fileInput.setInputFiles("tests/fixtures/sample-image.png");
+
+  // 에디터 캔버스에서 alt 텍스트 기준으로 이미지를 찾는다.
+  const editorImage = canvas.getByRole("img", { name: "업로드 이미지" }).first();
+  await expect(editorImage).toBeVisible();
+
+  const editorSrc = await editorImage.getAttribute("src");
+  expect(editorSrc).not.toBeNull();
+  expect(editorSrc).toMatch(/^\/api\/image\//);
+
+  // 프리뷰로 이동하면 동일한 /api/image/:id URL을 사용하는 이미지가 보여야 한다.
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewImage = page.getByRole("img", { name: "업로드 이미지" }).first();
+  await expect(previewImage).toBeVisible();
+
+  const previewSrc = await previewImage.getAttribute("src");
+  expect(previewSrc).toBe(editorSrc);
+});
+
 test("구분선 고정 길이와 여백 px 입력이 프리뷰에서도 em 스케일로 반영되어야 한다", async ({ page }) => {
   await page.goto("/editor");