에디터 인라인/속성 패널 리팩터링 및 폼 전송 기본 기능 추가

tests/e2e/editor.spec.ts

@@ -113,6 +113,34 @@ test("텍스트 블록의 정렬과 글자 크기를 속성 패널에서 변경
   await expect(block).toHaveClass(/text-lg/);
 });
 
+test("텍스트 블록 인라인 툴바에서 정렬과 글자 크기를 변경할 수 있어야 한다", async ({ page }) => {
+  test.skip(process.env.CI === "true");
+  await page.goto("/editor");
+
+  // 텍스트 블록을 하나 추가한다.
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+
+  const canvas = page.getByTestId("editor-canvas");
+  const block = canvas.getByTestId("editor-block").nth(0);
+
+  // 더블클릭하여 인라인 편집 모드로 진입한다.
+  await block.dblclick({ force: true });
+
+  // 인라인 툴바 버튼을 이용해 가운데 정렬 및 큰 글자 크기로 변경한다.
+  const centerAlignButton = page.getByRole("button", { name: "가운데 정렬" });
+  const largeSizeButton = page.getByRole("button", { name: "글자 크게" });
+
+  await centerAlignButton.click();
+  await largeSizeButton.click();
+
+  // 편집을 종료하기 위해 블록 밖을 클릭한다.
+  await canvas.click({ position: { x: 5, y: 5 } });
+
+  // 캔버스 블록에 text-center 와 text-lg 클래스가 적용되어 있어야 한다.
+  await expect(block).toHaveClass(/text-center/);
+  await expect(block).toHaveClass(/text-lg/);
+});
+
 test("에디터 상태를 JSON으로 내보내고 다시 불러오면 동일한 블록 상태가 복원되어야 한다", async ({ page }) => {
   test.skip(process.env.CI === "true");
   await page.goto("/editor");