텍스트/버튼/이미지/섹션 블록 타입 확장 및 에디터 UI 연동 (#1)

Reviewed-on: #1
Co-authored-by: Jaybe <master@jaybe.dev>
Co-committed-by: Jaybe <master@jaybe.dev>

tests/e2e/editor.spec.ts

@@ -229,3 +229,27 @@ test("블록 드래그앤드롭으로 순서를 변경할 수 있어야 한다",
   await expect(reorderedBlocks.nth(0)).toContainText("블록 B");
   await expect(reorderedBlocks.nth(1)).toContainText("블록 A");
 });
+
+test("버튼 블록을 추가하고 라벨과 링크를 수정할 수 있어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  // 버튼 블록을 추가한다.
+  await page.getByRole("button", { name: "버튼 블록 추가" }).click();
+
+  // 캔버스에 기본 버튼이 렌더되어야 한다.
+  const button = canvas.getByRole("button", { name: "버튼" });
+  await expect(button).toBeVisible();
+
+  // 속성 패널에서 버튼 텍스트와 링크를 수정한다.
+  const labelInput = page.getByRole("textbox", { name: "버튼 텍스트" });
+  const hrefInput = page.getByRole("textbox", { name: "버튼 링크" });
+
+  await labelInput.fill("자세히 보기");
+  await hrefInput.fill("https://example.com");
+
+  // 캔버스의 버튼 텍스트가 변경되어야 한다.
+  const updatedButton = canvas.getByRole("button", { name: "자세히 보기" });
+  await expect(updatedButton).toBeVisible();
+});

tests/unit/editorStore.spec.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect } from "vitest";
-import { createEditorStore } from "@/features/editor/state/editorStore";
+import {
+  createEditorStore,
+  type TextBlockProps,
+  type ButtonBlockProps,
+} from "@/features/editor/state/editorStore";
 
 // 에디터 상태 스토어에 대한 첫 TDD: 텍스트 블록 추가
 
@@ -13,7 +17,8 @@ describe("editorStore", () => {
 
     expect(blocks).toHaveLength(1);
     expect(blocks[0].type).toBe("text");
-    expect(blocks[0].props.text).toBe("새 텍스트");
+    const textProps = blocks[0].props as TextBlockProps;
+    expect(textProps.text).toBe("새 텍스트");
     expect(selectedBlockId).toBe(blocks[0].id);
   });
 
@@ -39,6 +44,37 @@ describe("editorStore", () => {
     blocks = store.getState().blocks;
 
     expect(blocks.map((b) => b.id)).toEqual([bId, aId, cId]);
-    expect(blocks.map((b) => b.props.text)).toEqual(["블록 B", "블록 A", "블록 C"]);
+    expect(blocks.map((b) => (b.props as TextBlockProps).text)).toEqual([
+      "블록 B",
+      "블록 A",
+      "블록 C",
+    ]);
+  });
+
+  it("버튼 블록을 추가하고 라벨/링크를 업데이트할 수 있어야 한다", () => {
+    const store = createEditorStore();
+
+    // 텍스트 블록 외에 버튼 블록을 추가하는 액션을 호출한다고 가정한다.
+    store.getState().addButtonBlock();
+
+    const { blocks, selectedBlockId } = store.getState();
+
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0].type).toBe("button");
+    const buttonProps = blocks[0].props as ButtonBlockProps;
+    expect(buttonProps.label).toBe("버튼");
+    expect(buttonProps.href).toBe("#");
+
+    // 버튼 라벨과 링크를 업데이트한다.
+    store.getState().updateBlock(blocks[0].id, {
+      label: "자세히 보기",
+      href: "https://example.com",
+    } as any);
+
+    const { blocks: updatedBlocks } = store.getState();
+    const updatedButtonProps = updatedBlocks[0].props as ButtonBlockProps;
+    expect(updatedButtonProps.label).toBe("자세히 보기");
+    expect(updatedButtonProps.href).toBe("https://example.com");
+    expect(selectedBlockId).toBe(updatedBlocks[0].id);
   });
 });