이미지 파일 업로드 기능

tests/e2e/editor.spec.ts

@@ -17,6 +17,59 @@ test("텍스트 블록 추가 버튼을 누르면 캔버스에 '새 텍스트'
   await expect(canvas.getByText("새 텍스트")).toBeVisible();
 });
 
+test("선택된 블록이 없을 때 우측 패널에서 프로젝트 설정 패널이 보여야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const sidebar = page.getByTestId("properties-sidebar");
+
+  await expect(sidebar.getByText("프로젝트 설정")).toBeVisible();
+  await expect(sidebar.getByLabel("프로젝트 제목")).toBeVisible();
+  await expect(sidebar.getByLabel("프로젝트 주소 (slug)")).toBeVisible();
+  await expect(sidebar.getByRole("combobox", { name: "캔버스 너비 프리셋" })).toBeVisible();
+  await expect(sidebar.getByLabel("페이지 배경색 HEX")).toBeVisible();
+});
+
+test("프로젝트 설정 패널에서 캔버스 배경색을 변경하면 에디터 캔버스 배경에 반영되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const sidebar = page.getByTestId("properties-sidebar");
+  const inner = page.getByTestId("editor-canvas-inner");
+
+  const beforeBg = await inner.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return s.backgroundColor;
+  });
+
+  const bgHexInput = sidebar.getByLabel("캔버스 배경색 HEX");
+  await bgHexInput.fill("#ff0000");
+
+  const afterBg = await inner.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return s.backgroundColor;
+  });
+
+  expect(afterBg).not.toBe(beforeBg);
+});
+
+test("프로젝트 설정 패널에서 캔버스 프리셋을 변경하면 에디터 캔버스 너비가 달라져야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const inner = page.getByTestId("editor-canvas-inner");
+
+  const fullWidth = await inner.evaluate((el) => (el as HTMLElement).getBoundingClientRect().width);
+
+  const presetSelect = page.getByRole("combobox", { name: "캔버스 너비 프리셋" });
+
+  await presetSelect.selectOption("mobile");
+  const mobileWidth = await inner.evaluate((el) => (el as HTMLElement).getBoundingClientRect().width);
+
+  await presetSelect.selectOption("desktop");
+  const desktopWidth = await inner.evaluate((el) => (el as HTMLElement).getBoundingClientRect().width);
+
+  expect(mobileWidth).toBeLessThan(desktopWidth);
+  expect(desktopWidth).toBeLessThanOrEqual(fullWidth);
+});
+
 test("텍스트 블록을 더블클릭해서 내용을 수정할 수 있어야 한다", async ({ page }) => {
   test.skip(process.env.CI === "true");
   await page.goto("/editor");
@@ -414,6 +467,60 @@ test("버튼 가로/세로 패딩 px 값을 변경하면 에디터 버튼에도
   expect(parseFloat(updatedPadding.paddingBlock)).toBeGreaterThan(parseFloat(initialPadding.paddingBlock));
 });
 
+test("이미지 블록 고정 너비와 모서리 둥글기 스타일이 에디터에서 적용되어야 한다", 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("이미지 URL").fill("https://picsum.photos/400");
+  await propertiesSidebar.getByLabel("너비 모드").selectOption("fixed");
+  await propertiesSidebar.getByLabel("고정 너비 (px) 커스텀 (px)").fill("300");
+
+  // 모서리 둥글기를 full 에 해당하는 값(8px)으로 설정한다.
+  await propertiesSidebar.getByLabel("모서리 둥글기 커스텀").fill("8");
+
+  const image = canvas.getByRole("img").first();
+
+  const styles = await image.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLImageElement);
+    return {
+      width: s.width,
+      borderRadius: s.borderRadius,
+    };
+  });
+
+  const widthPx = parseFloat(styles.width);
+  expect(widthPx).toBeGreaterThan(200);
+  expect(widthPx).toBeLessThan(360);
+
+  // borderRadius 가 0보다 커야 한다.
+  expect(parseFloat(styles.borderRadius)).toBeGreaterThan(0);
+});
+
+test("에디터 메뉴에서 페이지 파일로 내보내기 (ZIP)를 클릭하면 ZIP 다운로드가 시작되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  // 최소 한 개의 블록을 추가해 내보낼 데이터가 있도록 한다.
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+
+  // 헤더 메뉴를 연다.
+  await page.getByRole("button", { name: "메뉴 ▼" }).click();
+
+  const exportButton = page.getByRole("button", { name: "페이지 파일로 내보내기 (ZIP)" });
+  await expect(exportButton).toBeVisible();
+
+  const [download] = await Promise.all([
+    page.waitForEvent("download"),
+    exportButton.click(),
+  ]);
+
+  const suggested = download.suggestedFilename();
+  expect(suggested).toMatch(/\.zip$/);
+});
+
 test("2컬럼 섹션에서 블록을 다른 컬럼 영역으로 드래그하면 컬럼이 변경되어야 한다", async ({ page }) => {
   test.skip(true, "섹션 컬럼 드래그 E2E는 불안정하여 임시 스킵");
   await page.goto("/editor");