블록 UX: 삭제/복제 버튼 및 단축키 추가

Reviewed-on: #3

.gitea/workflows/ci.yml

@@ -0,0 +1,104 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - feature/**
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: |
+          npm ci
+
+      - name: Run unit tests
+        run: |
+          npm test
+
+      - name: Install Playwright browsers
+        run: |
+          npx playwright install --with-deps
+
+      - name: Run Playwright E2E tests
+        run: |
+          npx playwright test
+
+  pr_and_merge:
+    needs: test
+    # feature/* 브랜치에 push 되었을 때만 실행한다.
+    if: ${{ startsWith(github.ref, 'refs/heads/feature/') }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Create or update PR and try auto-merge
+        env:
+          CI_BASE_URL: ${{ secrets.CI_BASE_URL }}
+          CI_TOKEN: ${{ secrets.CI_TOKEN }}
+          CI_OWNER: ${{ secrets.CI_OWNER }}
+          CI_REPO: ${{ secrets.CI_REPO }}
+          BRANCH_REF: ${{ github.ref }}
+          BRANCH_NAME: ${{ github.ref_name }}
+        run: |
+          set -e
+
+          if [ -z "$CI_BASE_URL" ] || [ -z "$CI_TOKEN" ] || [ -z "$CI_OWNER" ] || [ -z "$CI_REPO" ]; then
+            echo "CI_* 시크릿이 설정되지 않아 PR/자동 머지를 건너뜁니다." >&2
+            exit 0
+          fi
+
+          echo "현재 브랜치: $BRANCH_NAME ($BRANCH_REF)"
+
+          # 1) PR 생성 시도 (이미 존재하면 4xx를 허용)
+          create_pr_payload=$(jq -n \
+            --arg title "CI: $BRANCH_NAME" \
+            --arg head "$BRANCH_NAME" \
+            --arg base "main" \
+            '{title: $title, head: $head, base: $base}')
+
+          echo "PR 생성 시도..."
+          curl -sS -X POST \
+            -H "Content-Type: application/json" \
+            -H "Authorization: token $CI_TOKEN" \
+            "$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls" \
+            -d "$create_pr_payload" || true
+
+          # 2) 열린 PR 목록에서 해당 브랜치의 PR 번호를 찾는다.
+          echo "열린 PR 목록 조회..."
+          pr_list=$(curl -sS \
+            -H "Authorization: token $CI_TOKEN" \
+            "$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls?state=open")
+
+          pr_number=$(echo "$pr_list" | jq ".[] | select(.head.ref == \"$BRANCH_NAME\") | .number" | head -n 1)
+
+          if [ -z "$pr_number" ]; then
+            echo "브랜치 $BRANCH_NAME 에 대한 열린 PR을 찾지 못했습니다. 종료합니다."
+            exit 0
+          fi
+
+          echo "브랜치 $BRANCH_NAME 에 대한 PR #$pr_number 발견"
+
+          # 3) main 대상으로 자동 머지 시도
+          merge_payload=$(jq -n '{Do: "merge"}')
+
+          echo "PR #$pr_number 자동 머지 시도..."
+          curl -sS -X POST \
+            -H "Content-Type: application/json" \
+            -H "Authorization: token $CI_TOKEN" \
+            "$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls/$pr_number/merge" \
+            -d "$merge_payload" || true

src/app/editor/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { CSSProperties, ReactNode } from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import {
   DndContext,
@@ -42,6 +42,10 @@ export default function EditorPage() {
   const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
   const reorderBlocks = useEditorStore((state) => state.reorderBlocks);
   const moveBlock = useEditorStore((state) => state.moveBlock);
+  const undo = useEditorStore((state) => state.undo);
+  const redo = useEditorStore((state) => state.redo);
+  const removeBlock = useEditorStore((state) => state.removeBlock);
+  const duplicateBlock = useEditorStore((state) => state.duplicateBlock);
 
   const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
   const [editingText, setEditingText] = useState("");
@@ -198,6 +202,87 @@ export default function EditorPage() {
 
   const rootBlocks = blocks.filter((block) => !block.sectionId);
 
+  // 에디터 전역에서 Undo/Redo 단축키(Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z),
+  // Delete/Backspace 기반 삭제, Cmd/Ctrl+D 기반 복제,
+  // ArrowUp/ArrowDown을 이용한 선택 블록 이동을 처리한다.
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // 방향키로 선택된 블록을 위/아래로 이동 (순서 변경이 아니라 선택만 이동)
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        const { blocks: currentBlocks, selectedBlockId: currentSelectedId, selectBlock: storeSelectBlock } =
+          (useEditorStore as any).getState();
+
+        if (!currentBlocks.length) return;
+
+        const currentIndex = currentSelectedId
+          ? currentBlocks.findIndex((b: Block) => b.id === currentSelectedId)
+          : -1;
+
+        let nextIndex = currentIndex;
+
+        if (event.key === "ArrowDown") {
+          nextIndex = currentIndex < currentBlocks.length - 1 ? currentIndex + 1 : currentIndex;
+        } else if (event.key === "ArrowUp") {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
+        }
+
+        if (nextIndex !== -1 && nextIndex !== currentIndex) {
+          event.preventDefault();
+          const nextId = currentBlocks[nextIndex]?.id;
+          if (nextId) {
+            storeSelectBlock(nextId);
+          }
+        }
+
+        return;
+      }
+
+      const isMac = navigator.platform.toLowerCase().includes("mac");
+      const metaKey = isMac ? event.metaKey : event.ctrlKey;
+
+      // Delete / Backspace 로 선택된 블록 삭제
+      if (event.key === "Delete" || event.key === "Backspace") {
+        const { selectedBlockId: currentSelectedId } = (useEditorStore as any).getState();
+        if (currentSelectedId) {
+          event.preventDefault();
+          removeBlock(currentSelectedId);
+        }
+        return;
+      }
+
+      // Cmd/Ctrl 없는 경우에는 여기서 종료한다.
+      if (!metaKey) return;
+
+      // Cmd/Ctrl + D → 현재 선택된 블록 복제
+      if (event.key.toLowerCase() === "d") {
+        const { selectedBlockId: currentSelectedId } = (useEditorStore as any).getState();
+        if (currentSelectedId) {
+          event.preventDefault();
+          duplicateBlock(currentSelectedId);
+        }
+        return;
+      }
+
+      // Cmd/Ctrl + Shift + Z → Redo
+      if (event.key.toLowerCase() === "z" && event.shiftKey) {
+        event.preventDefault();
+        redo();
+        return;
+      }
+
+      // Cmd/Ctrl + Z → Undo
+      if (event.key.toLowerCase() === "z") {
+        event.preventDefault();
+        undo();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [undo, redo]);
+
   const renderBlocks = (targetBlocks: Block[]) =>
     targetBlocks.map((block) => {
       const isSelected = block.id === selectedBlockId;
@@ -320,6 +405,22 @@ export default function EditorPage() {
           <h2 className="font-medium mb-2">속성 패널</h2>
           {selectedBlockId ? (
             <div className="space-y-3">
+              <div className="flex gap-2 text-[11px]">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-100 hover:bg-red-900/60 hover:border-red-700"
+                  onClick={() => removeBlock(selectedBlockId)}
+                >
+                  블록 삭제
+                </button>
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-100 hover:bg-slate-800"
+                  onClick={() => duplicateBlock(selectedBlockId)}
+                >
+                  블록 복제
+                </button>
+              </div>
               {(() => {
                 const selectedBlock = blocks.find((b) => b.id === selectedBlockId);
                 if (!selectedBlock) return null;

src/features/editor/state/editorStore.ts

@@ -51,6 +51,8 @@ export interface Block {
 export interface EditorState {
   blocks: Block[];
   selectedBlockId: string | null;
+  history: Block[][];
+  future: Block[][];
   addTextBlock: () => void;
   addButtonBlock: () => void;
   addImageBlock: () => void;
@@ -63,6 +65,10 @@ export interface EditorState {
   replaceBlocks: (blocks: Block[]) => void;
   reorderBlocks: (activeId: string, overId: string) => void;
   moveBlock: (id: string, sectionId: string | null, columnId: string | null) => void;
+  undo: () => void;
+  redo: () => void;
+  removeBlock: (id: string) => void;
+  duplicateBlock: (id: string) => void;
 }
 
 // 간단한 ID 생성기 (추후 uuid 라이브러리로 교체 가능)
@@ -74,6 +80,8 @@ const createId = () => `blk_${Date.now()}_${idCounter++}`;
 const createEditorState = (set: any, get: any): EditorState => ({
     blocks: [],
     selectedBlockId: null,
+    history: [],
+    future: [],
 
     // 텍스트 블록 추가: 기본 텍스트와 함께 생성 후 선택 상태로 만든다
     addTextBlock: () => {
@@ -112,6 +120,8 @@ const createEditorState = (set: any, get: any): EditorState => ({
       set((state: EditorState) => ({
         blocks: [...state.blocks, newBlock],
         selectedBlockId: id,
+        history: [...state.history, blocks],
+        future: [],
       }));
     },
 
@@ -478,6 +488,91 @@ const createEditorState = (set: any, get: any): EditorState => ({
         ),
       }));
     },
+    removeBlock: (id) => {
+      set((state: EditorState) => {
+        const current = state.blocks;
+        const index = current.findIndex((b) => b.id === id);
+        if (index === -1) {
+          return state;
+        }
+
+        const nextBlocks = current.filter((b) => b.id !== id);
+
+        // 선택 상태는 삭제된 블록의 이전 블록 또는 다음 블록으로 이동한다.
+        let nextSelected: string | null = null;
+        if (nextBlocks.length > 0) {
+          const prevIndex = index - 1;
+          if (prevIndex >= 0) {
+            nextSelected = nextBlocks[prevIndex].id;
+          } else {
+            // 첫 블록이 삭제된 경우, 새 첫 블록을 선택한다.
+            nextSelected = nextBlocks[0].id;
+          }
+        }
+
+        return {
+          ...state,
+          blocks: nextBlocks,
+          selectedBlockId: nextSelected,
+        };
+      });
+    },
+    duplicateBlock: (id) => {
+      set((state: EditorState) => {
+        const current = state.blocks;
+        const index = current.findIndex((b) => b.id === id);
+        if (index === -1) {
+          return state;
+        }
+
+        const original = current[index];
+        const newId = createId();
+
+        const cloned: Block = {
+          ...original,
+          id: newId,
+          // props 는 얕은 복사로 충분 (현재 props 는 모두 평면 구조)
+          props: { ...(original.props as any) },
+        };
+
+        const nextBlocks = [...current];
+        nextBlocks.splice(index + 1, 0, cloned);
+
+        return {
+          ...state,
+          blocks: nextBlocks,
+          selectedBlockId: newId,
+        };
+      });
+    },
+    undo: () => {
+      const { history, blocks } = get();
+      if (history.length === 0) return;
+
+      const previous = history[history.length - 1];
+      const nextHistory = history.slice(0, -1);
+
+      set((state: EditorState) => ({
+        blocks: previous,
+        selectedBlockId: previous.length > 0 ? previous[previous.length - 1].id : null,
+        history: nextHistory,
+        future: [...state.future, blocks],
+      }));
+    },
+    redo: () => {
+      const { future, blocks } = get();
+      if (future.length === 0) return;
+
+      const next = future[future.length - 1];
+      const nextFuture = future.slice(0, -1);
+
+      set((state: EditorState) => ({
+        blocks: next,
+        selectedBlockId: next.length > 0 ? next[next.length - 1].id : null,
+        history: [...state.history, blocks],
+        future: nextFuture,
+      }));
+    },
   });
 
 // React 컴포넌트에서 사용하는 전역 훅 스토어

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,109 @@ 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");
+});
+
+test("속성 패널의 블록 삭제 버튼으로 선택된 블록을 삭제할 수 있어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  // 텍스트 블록 두 개를 추가한다.
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+
+  const blocks = canvas.getByTestId("editor-block");
+  await expect(blocks).toHaveCount(2);
+
+  // 두 번째 블록을 선택한 다음, 속성 패널에서 "블록 삭제" 버튼을 클릭한다.
+  await blocks.nth(1).click();
+  await page.getByRole("button", { name: "블록 삭제" }).click();
+
+  // 하나의 블록만 남아야 하며, 첫 번째 블록이 남아 있어야 한다.
+  const remainingBlocks = canvas.getByTestId("editor-block");
+  await expect(remainingBlocks).toHaveCount(1);
+  await expect(remainingBlocks.nth(0)).toHaveAttribute("data-selected", "true");
+});
+
+test("Cmd/Ctrl+D 단축키로 선택된 블록을 복제할 수 있어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  // 텍스트 블록을 하나 추가한다.
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+
+  let blocks = canvas.getByTestId("editor-block");
+  await expect(blocks).toHaveCount(1);
+
+  // 블록의 텍스트를 식별 가능한 값으로 바꾼다.
+  await blocks.nth(0).click();
+  const sidebarEditor = page.getByRole("textbox", { name: "선택한 텍스트 블록 내용" });
+  await sidebarEditor.fill("복제 대상 블록");
+
+  // Cmd/Ctrl + D 로 복제한다.
+  await page.keyboard.press("Meta+D");
+
+  // 블록이 두 개가 되어야 한다.
+  blocks = canvas.getByTestId("editor-block");
+  await expect(blocks).toHaveCount(2);
+
+  // 두 블록 모두 동일한 텍스트를 가지고 있어야 한다.
+  await expect(blocks.nth(0)).toContainText("복제 대상 블록");
+  await expect(blocks.nth(1)).toContainText("복제 대상 블록");
+});

tests/unit/editorStore.spec.ts

@@ -282,4 +282,103 @@ 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);
+  });
+
+  it("removeBlock 호출 시 해당 블록이 삭제되고 선택 상태가 적절히 변경되어야 한다", () => {
+    const store = createEditorStore();
+
+    // 텍스트 블록 두 개를 추가한다.
+    store.getState().addTextBlock();
+    store.getState().addTextBlock();
+
+    let { blocks, selectedBlockId } = store.getState();
+    expect(blocks).toHaveLength(2);
+
+    const firstId = blocks[0].id;
+    const secondId = blocks[1].id;
+
+    // 두 번째 블록을 선택한 상태에서 삭제한다.
+    store.getState().selectBlock(secondId);
+    store.getState().removeBlock(secondId);
+
+    ({ blocks, selectedBlockId } = store.getState());
+
+    // 두 번째 블록만 삭제되고 첫 번째 블록은 남아 있어야 한다.
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0].id).toBe(firstId);
+    expect(selectedBlockId).toBe(firstId);
+  });
+
+  it("duplicateBlock 호출 시 같은 내용의 블록이 같은 위치 정보로 복제되어야 한다", () => {
+    const store = createEditorStore();
+
+    // 섹션 + 텍스트 블록을 하나 만든다.
+    store.getState().addSectionBlock();
+    const { blocks: afterSection } = store.getState();
+    const sectionBlock = afterSection[0] as any;
+
+    store.getState().selectBlock(sectionBlock.id);
+    store.getState().addTextBlock();
+
+    let { blocks } = store.getState();
+    const original = blocks.find((b) => b.type === "text") as any;
+
+    expect(original).toBeTruthy();
+
+    // duplicateBlock 으로 복제한다.
+    store.getState().duplicateBlock(original.id);
+
+    ({ blocks } = store.getState());
+    const textBlocks = blocks.filter((b) => b.type === "text") as any[];
+
+    // 텍스트 블록이 두 개가 되어야 한다.
+    expect(textBlocks).toHaveLength(2);
+
+    const [t1, t2] = textBlocks;
+    expect(t1.id).not.toBe(t2.id);
+    expect(t1.props).toEqual(t2.props);
+    expect(t2.sectionId).toBe(t1.sectionId);
+    expect(t2.columnId).toBe(t1.columnId);
+  });
 });