Merge branch 'feature/builder-5-ux'

tests/e2e/editor.spec.ts

@@ -325,7 +325,7 @@ test("Features 템플릿 버튼을 클릭하면 3개의 Feature 항목(제목/
   await expect(canvas.getByText("Feature 3 제목")).toBeVisible();
 });
 
-test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 생성되어야 한다", async ({ page }) => {
+test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된 섹션이 캔버스에 생성되어야 한다", async ({ page }) => {
   await page.goto("/editor");
 
   const canvas = page.getByTestId("editor-canvas");
@@ -336,3 +336,59 @@ test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 생성되
   const ctaButton = canvas.getByRole("button", { name: "CTA 버튼" });
   await expect(ctaButton).toBeVisible();
 });
+
+test("Cmd/Ctrl+Z로 블록 추가를 Undo 하고 Cmd/Ctrl+Shift+Z로 Redo 할 수 있어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  // 텍스트 블록을 하나 추가한다.
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+  await expect(canvas.getByTestId("editor-block")).toHaveCount(1);
+
+  // Cmd/Ctrl + Z 로 Undo 한다.
+  await page.keyboard.press("Meta+Z");
+
+  // Undo 후에는 블록이 0개가 되어야 한다.
+  await expect(canvas.getByTestId("editor-block")).toHaveCount(0);
+
+  // Cmd/Ctrl + Shift + Z 로 Redo 한다.
+  await page.keyboard.press("Meta+Shift+Z");
+
+  // Redo 후 다시 블록이 1개가 되어야 한다.
+  await expect(canvas.getByTestId("editor-block")).toHaveCount(1);
+});
+
+test("ArrowUp/ArrowDown 키로 선택된 블록을 위/아래로 이동하며 순차적으로 선택할 수 있어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  // 텍스트 블록을 세 개 추가한다.
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+
+  const blocks = canvas.getByTestId("editor-block");
+  await expect(blocks).toHaveCount(3);
+
+  // 첫 번째 블록을 클릭해 선택한다.
+  await blocks.nth(0).click();
+  await expect(blocks.nth(0)).toHaveAttribute("data-selected", "true");
+
+  // ArrowDown 으로 두 번째 블록으로 이동.
+  await page.keyboard.press("ArrowDown");
+  await expect(blocks.nth(1)).toHaveAttribute("data-selected", "true");
+
+  // 다시 ArrowDown 으로 세 번째 블록으로 이동.
+  await page.keyboard.press("ArrowDown");
+  await expect(blocks.nth(2)).toHaveAttribute("data-selected", "true");
+
+  // ArrowDown 을 한 번 더 눌러도 마지막에서 더 내려가지 않는다.
+  await page.keyboard.press("ArrowDown");
+  await expect(blocks.nth(2)).toHaveAttribute("data-selected", "true");
+
+  // ArrowUp 으로 두 번째 블록으로 올라간다.
+  await page.keyboard.press("ArrowUp");
+  await expect(blocks.nth(1)).toHaveAttribute("data-selected", "true");
+});

tests/unit/editorStore.spec.ts

@@ -282,4 +282,46 @@ describe("editorStore", () => {
 
     expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
   });
+
+  it("undo 호출 시 마지막 변경 이전의 블록 상태로 되돌려야 한다", () => {
+    const store = createEditorStore();
+
+    // 텍스트 블록을 두 개 추가한다.
+    store.getState().addTextBlock();
+    store.getState().addTextBlock();
+
+    let { blocks, selectedBlockId } = store.getState();
+    expect(blocks).toHaveLength(2);
+
+    const firstId = blocks[0].id;
+
+    store.getState().undo();
+
+    ({ blocks, selectedBlockId } = store.getState());
+
+    // 마지막 추가 이전 상태로 되돌아가야 하므로 블록은 1개만 남아야 한다.
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0].id).toBe(firstId);
+    expect(selectedBlockId).toBe(firstId);
+  });
+
+  it("redo 호출 시 undo로 되돌린 변경을 다시 적용해야 한다", () => {
+    const store = createEditorStore();
+
+    store.getState().addTextBlock();
+    store.getState().addTextBlock();
+
+    let { blocks } = store.getState();
+    expect(blocks).toHaveLength(2);
+
+    store.getState().undo();
+
+    ({ blocks } = store.getState());
+    expect(blocks).toHaveLength(1);
+
+    store.getState().redo();
+
+    ({ blocks } = store.getState());
+    expect(blocks).toHaveLength(2);
+  });
 });