CI 테스트: Gitea Actions PR/자동머지 확인

Reviewed-on: #3

.gitea/workflows/ci.yml

@@ -0,0 +1,105 @@
+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
+  # CI 테스트용 더미 주석

src/app/editor/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import type { CSSProperties, ReactNode } from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import Link from "next/link";
 import {
   DndContext,
   PointerSensor,
@@ -33,11 +34,16 @@ export default function EditorPage() {
   const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
   const addImageBlock = useEditorStore((state) => state.addImageBlock);
   const addSectionBlock = useEditorStore((state) => state.addSectionBlock);
+  const addHeroTemplateSection = useEditorStore((state) => state.addHeroTemplateSection);
+  const addFeaturesTemplateSection = useEditorStore((state) => state.addFeaturesTemplateSection);
+  const addCtaTemplateSection = useEditorStore((state) => state.addCtaTemplateSection);
   const updateBlock = useEditorStore((state) => state.updateBlock);
   const selectBlock = useEditorStore((state) => state.selectBlock);
   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 [editingBlockId, setEditingBlockId] = useState<string | null>(null);
   const [editingText, setEditingText] = useState("");
@@ -194,6 +200,65 @@ export default function EditorPage() {
 
   const rootBlocks = blocks.filter((block) => !block.sectionId);
 
+  // 에디터 전역에서 Undo/Redo 단축키(Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z)와
+  // 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;
+
+      if (!metaKey) 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;
@@ -219,8 +284,16 @@ export default function EditorPage() {
   return (
     <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
       <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between">
+        <div className="flex items-baseline gap-3">
           <h1 className="text-xl font-semibold">Page Editor</h1>
           <p className="text-xs text-slate-400">빌더 MVP용 에디터 페이지 골격</p>
+        </div>
+        <Link
+          href="/preview"
+          className="inline-flex items-center rounded border border-slate-700 bg-slate-900 px-3 py-1 text-xs text-slate-100 hover:bg-slate-800"
+        >
+          프리뷰 열기
+        </Link>
       </header>
       <section className="flex flex-1 overflow-hidden">
         <aside className="w-60 border-r border-slate-800 p-4 text-sm space-y-3">
@@ -253,6 +326,30 @@ export default function EditorPage() {
           >
             섹션 블록 추가
           </button>
+          <div className="pt-3 border-t border-slate-800 mt-3 space-y-2">
+            <h3 className="text-[11px] font-medium text-slate-300">템플릿</h3>
+            <button
+              type="button"
+              className="w-full rounded border border-sky-700 bg-sky-950 px-3 py-2 text-left text-xs text-sky-100 hover:bg-sky-900"
+              onClick={addHeroTemplateSection}
+            >
+              Hero 템플릿 추가
+            </button>
+            <button
+              type="button"
+              className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+              onClick={addFeaturesTemplateSection}
+            >
+              Features 템플릿 추가
+            </button>
+            <button
+              type="button"
+              className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+              onClick={addCtaTemplateSection}
+            >
+              CTA 템플릿 추가
+            </button>
+          </div>
           <p className="text-xs text-slate-500">
             Text / Image / Button / Section 블록을 이 영역에서 추가할 수 있습니다.
           </p>

src/app/preview/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useEditorStore } from "@/features/editor/state/editorStore";
+import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
+
+export default function PreviewPage() {
+  const blocks = useEditorStore((state) => state.blocks);
+
+  return (
+    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
+      <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between">
+        <h1 className="text-xl font-semibold">Page Preview</h1>
+        <p className="text-xs text-slate-400">빌더로 만든 페이지를 미리 보는 화면</p>
+      </header>
+      {/* 에디터 크롬 없이 순수 페이지 형태로 블록들을 렌더링 */}
+      <PublicPageRenderer blocks={blocks} />
+    </main>
+  );
+}

src/features/editor/components/PublicPageRenderer.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import type { Block, TextBlockProps, ButtonBlockProps, ImageBlockProps, SectionBlockProps } from "@/features/editor/state/editorStore";
+
+// 에디터 크롬 없이 실제 랜딩 페이지처럼 블록들을 렌더링하는 컴포넌트
+interface PublicPageRendererProps {
+  blocks: Block[];
+}
+
+export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
+  const sectionBlocks = blocks.filter((b) => b.type === "section");
+  const rootBlocks = blocks.filter((b) => !b.sectionId && b.type !== "section");
+
+  const renderBlock = (block: Block) => {
+    if (block.type === "text") {
+      const props = block.props as TextBlockProps;
+
+      const alignClass =
+        props.align === "center" ? "text-center" : props.align === "right" ? "text-right" : "text-left";
+      const sizeClass = props.size === "sm" ? "text-sm" : props.size === "lg" ? "text-2xl" : "text-base";
+
+      return (
+        <p key={block.id} className={`${alignClass} ${sizeClass} text-slate-50 leading-relaxed`}>
+          {props.text}
+        </p>
+      );
+    }
+
+    if (block.type === "button") {
+      const props = block.props as ButtonBlockProps;
+
+      return (
+        <a
+          key={block.id}
+          href={props.href}
+          className="inline-flex items-center justify-center rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-500 transition-colors"
+        >
+          {props.label}
+        </a>
+      );
+    }
+
+    if (block.type === "image") {
+      const props = block.props as ImageBlockProps;
+
+      return (
+        <div key={block.id} className="w-full flex justify-center">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={props.src || ""} alt={props.alt} className="max-w-full h-auto object-contain" />
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  const renderSection = (section: Block) => {
+    const props = section.props as SectionBlockProps;
+
+    const bgClass =
+      props.background === "muted" ? "bg-slate-900" : props.background === "primary" ? "bg-sky-900" : "bg-slate-950";
+
+    const pyClass = props.paddingY === "sm" ? "py-8" : props.paddingY === "lg" ? "py-20" : "py-12";
+
+    const columns = props.columns && props.columns.length > 0 ? props.columns : [{ id: `${section.id}_col`, span: 12 }];
+
+    return (
+      <section key={section.id} className={`${bgClass} ${pyClass}`}>
+        <div className="mx-auto max-w-5xl px-4">
+          <div className="flex gap-8">
+            {columns.map((col) => {
+              const basis = `${(col.span / 12) * 100}%`;
+              const columnBlocks = blocks.filter((b) => b.sectionId === section.id && b.columnId === col.id);
+
+              return (
+                <div key={col.id} className="flex flex-col gap-4" style={{ flexBasis: basis }}>
+                  {columnBlocks.map((b) => (
+                    <div key={b.id}>{renderBlock(b)}</div>
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+    );
+  };
+
+  return (
+    <div className="flex-1 flex flex-col bg-slate-950 text-slate-50">
+      {/* 루트 텍스트/버튼/이미지 블록들이 있다면 페이지 상단에 노출 */}
+      {rootBlocks.length > 0 && (
+        <section className="bg-slate-950 py-12">
+          <div className="mx-auto max-w-3xl px-4 flex flex-col gap-4">
+            {rootBlocks.map((b) => (
+              <div key={b.id}>{renderBlock(b)}</div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* 섹션 블록들 */}
+      {sectionBlocks.map((section) => renderSection(section))}
+    </div>
+  );
+}

src/features/editor/state/editorStore.ts

@@ -51,15 +51,22 @@ export interface Block {
 export interface EditorState {
   blocks: Block[];
   selectedBlockId: string | null;
+  history: Block[][];
+  future: Block[][];
   addTextBlock: () => void;
   addButtonBlock: () => void;
   addImageBlock: () => void;
   addSectionBlock: () => void;
+  addHeroTemplateSection: () => void;
+  addFeaturesTemplateSection: () => void;
+  addCtaTemplateSection: () => void;
   updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps>) => void;
   selectBlock: (id: string | null) => void;
   replaceBlocks: (blocks: Block[]) => void;
   reorderBlocks: (activeId: string, overId: string) => void;
   moveBlock: (id: string, sectionId: string | null, columnId: string | null) => void;
+  undo: () => void;
+  redo: () => void;
 }
 
 // 간단한 ID 생성기 (추후 uuid 라이브러리로 교체 가능)
@@ -71,6 +78,8 @@ const createId = () => `blk_${Date.now()}_${idCounter++}`;
 const createEditorState = (set: any, get: any): EditorState => ({
     blocks: [],
     selectedBlockId: null,
+    history: [],
+    future: [],
 
     // 텍스트 블록 추가: 기본 텍스트와 함께 생성 후 선택 상태로 만든다
     addTextBlock: () => {
@@ -109,9 +118,209 @@ const createEditorState = (set: any, get: any): EditorState => ({
       set((state: EditorState) => ({
         blocks: [...state.blocks, newBlock],
         selectedBlockId: id,
+        history: [...state.history, blocks],
+        future: [],
       }));
     },
 
+    // Hero 템플릿 섹션 추가: 섹션 1개와 기본 텍스트/버튼 블록들을 첫 컬럼에 배치한다
+    addHeroTemplateSection: () => {
+      const sectionId = createId();
+
+      // Hero 템플릿용 섹션: 기본 배경/패딩 + 1컬럼(12)
+      const sectionBlock: Block = {
+        id: sectionId,
+        type: "section",
+        props: {
+          background: "default",
+          paddingY: "lg",
+          columns: [
+            {
+              id: `${sectionId}_col_1`,
+              span: 12,
+            },
+          ],
+        },
+        sectionId: null,
+        columnId: null,
+      };
+
+      const firstColumnId = `${sectionId}_col_1`;
+
+      // Hero 텍스트 블록 (예: 헤드라인)
+      const heroHeadlineId = createId();
+      const heroHeadline: Block = {
+        id: heroHeadlineId,
+        type: "text",
+        props: {
+          text: "Hero 제목을 여기에 입력하세요",
+          align: "center",
+          size: "lg",
+        },
+        sectionId,
+        columnId: firstColumnId,
+      };
+
+      // Hero 서브텍스트 블록
+      const heroSubId = createId();
+      const heroSub: Block = {
+        id: heroSubId,
+        type: "text",
+        props: {
+          text: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.",
+          align: "center",
+          size: "base",
+        },
+        sectionId,
+        columnId: firstColumnId,
+      };
+
+      // CTA 버튼 블록
+      const heroButtonId = createId();
+      const heroButton: Block = {
+        id: heroButtonId,
+        type: "button",
+        props: {
+          label: "지금 시작하기",
+          href: "#",
+        },
+        sectionId,
+        columnId: firstColumnId,
+      };
+
+      set((state: EditorState) => {
+        const newBlocks = [...state.blocks, sectionBlock, heroHeadline, heroSub, heroButton];
+
+        return {
+          blocks: newBlocks,
+          selectedBlockId: heroButtonId,
+        };
+      });
+    },
+
+    // Features 템플릿 섹션 추가: 3컬럼(4/4/4) 섹션과 각 컬럼의 제목/설명 텍스트를 생성한다
+    addFeaturesTemplateSection: () => {
+      const sectionId = createId();
+
+      const columns = [
+        { id: `${sectionId}_col_1`, span: 4 },
+        { id: `${sectionId}_col_2`, span: 4 },
+        { id: `${sectionId}_col_3`, span: 4 },
+      ];
+
+      const sectionBlock: Block = {
+        id: sectionId,
+        type: "section",
+        props: {
+          background: "muted",
+          paddingY: "md",
+          columns,
+        },
+        sectionId: null,
+        columnId: null,
+      };
+
+      const featureBlocks: Block[] = columns.flatMap((col, index) => {
+        const titleId = createId();
+        const descId = createId();
+
+        const title: Block = {
+          id: titleId,
+          type: "text",
+          props: {
+            text: `Feature ${index + 1} 제목`,
+            align: "left",
+            size: "lg",
+          },
+          sectionId,
+          columnId: col.id,
+        };
+
+        const description: Block = {
+          id: descId,
+          type: "text",
+          props: {
+            text: "해당 기능을 간단히 설명하는 텍스트입니다.",
+            align: "left",
+            size: "sm",
+          },
+          sectionId,
+          columnId: col.id,
+        };
+
+        return [title, description];
+      });
+
+      const lastBlockId = featureBlocks[featureBlocks.length - 1].id;
+
+      set((state: EditorState) => {
+        const newBlocks = [...state.blocks, sectionBlock, ...featureBlocks];
+
+        return {
+          blocks: newBlocks,
+          selectedBlockId: lastBlockId,
+        };
+      });
+    },
+
+    // CTA 템플릿 섹션 추가: 텍스트와 버튼이 포함된 1컬럼 섹션을 생성한다
+    addCtaTemplateSection: () => {
+      const sectionId = createId();
+
+      const sectionBlock: Block = {
+        id: sectionId,
+        type: "section",
+        props: {
+          background: "primary",
+          paddingY: "md",
+          columns: [
+            {
+              id: `${sectionId}_col_1`,
+              span: 12,
+            },
+          ],
+        },
+        sectionId: null,
+        columnId: null,
+      };
+
+      const firstColumnId = `${sectionId}_col_1`;
+
+      const textId = createId();
+      const textBlock: Block = {
+        id: textId,
+        type: "text",
+        props: {
+          text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.",
+          align: "center",
+          size: "base",
+        },
+        sectionId,
+        columnId: firstColumnId,
+      };
+
+      const buttonId = createId();
+      const buttonBlock: Block = {
+        id: buttonId,
+        type: "button",
+        props: {
+          label: "CTA 버튼",
+          href: "#",
+        },
+        sectionId,
+        columnId: firstColumnId,
+      };
+
+      set((state: EditorState) => {
+        const newBlocks = [...state.blocks, sectionBlock, textBlock, buttonBlock];
+
+        return {
+          blocks: newBlocks,
+          selectedBlockId: buttonId,
+        };
+      });
+    },
+
     // 이미지 블록 추가: 기본 플레이스홀더와 함께 생성 후 선택 상태로 만든다
     addImageBlock: () => {
       const id = createId();
@@ -277,6 +486,34 @@ const createEditorState = (set: any, get: any): EditorState => ({
         ),
       }));
     },
+    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

@@ -291,3 +291,104 @@ test("2컬럼 섹션에서 블록을 다른 컬럼 영역으로 드래그하면
   // 왼쪽 컬럼에는 더 이상 블록이 없어야 한다.
   await expect(leftColumn.getByTestId("editor-block")).toHaveCount(0);
 });
+
+test("Hero 템플릿 버튼을 클릭하면 섹션과 기본 텍스트/버튼 블록이 캔버스에 생성되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  // Hero 템플릿을 추가한다.
+  await page.getByRole("button", { name: "Hero 템플릿 추가" }).click();
+
+  // 섹션/블록이 하나 이상 존재해야 한다.
+  const blocks = canvas.getByTestId("editor-block");
+  await expect(blocks.first()).toBeVisible();
+
+  // Hero 헤드라인 텍스트가 포함된 블록이 보여야 한다.
+  await expect(canvas.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
+
+  // CTA 버튼도 렌더되어 있어야 한다.
+  const ctaButton = canvas.getByRole("button", { name: "지금 시작하기" });
+  await expect(ctaButton).toBeVisible();
+});
+
+test("Features 템플릿 버튼을 클릭하면 3개의 Feature 항목(제목/설명)이 생성되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  await page.getByRole("button", { name: "Features 템플릿 추가" }).click();
+
+  // Feature 제목들이 렌더되어야 한다.
+  await expect(canvas.getByText("Feature 1 제목")).toBeVisible();
+  await expect(canvas.getByText("Feature 2 제목")).toBeVisible();
+  await expect(canvas.getByText("Feature 3 제목")).toBeVisible();
+});
+
+test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된 섹션이 캔버스에 생성되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  await page.getByRole("button", { name: "CTA 템플릿 추가" }).click();
+
+  await expect(canvas.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
+  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/e2e/preview.spec.ts

@@ -0,0 +1,77 @@
+import { test, expect } from "@playwright/test";
+
+// 프리뷰/뷰 모드 TDD: 먼저 실패하는 E2E부터 작성한다.
+
+test("/preview 페이지는 에디터 크롬 없이 컨텐츠만 보여야 한다", async ({ page }) => {
+  // 프리뷰 페이지로 이동한다.
+  await page.goto("/preview");
+
+  // 프리뷰 전용 헤더가 있어야 한다.
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  // 에디터 좌측 패널용 버튼들은 나타나지 않아야 한다.
+  await expect(page.getByRole("button", { name: "텍스트 블록 추가" })).toHaveCount(0);
+  await expect(page.getByRole("button", { name: "Hero 템플릿 추가" })).toHaveCount(0);
+});
+
+test("에디터에서 Hero 템플릿을 추가하면 프리뷰에서 동일한 Hero 콘텐츠가 보여야 한다", async ({ page }) => {
+  // 에디터에서 Hero 템플릿을 추가한다.
+  await page.goto("/editor");
+
+  await page.getByRole("button", { name: "Hero 템플릿 추가" }).click();
+
+  // 헤드라인과 CTA 버튼이 에디터에서 생성되었는지 한 번 확인한다.
+  const editorCanvas = page.getByTestId("editor-canvas");
+  await expect(editorCanvas.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
+  await expect(editorCanvas.getByRole("button", { name: "지금 시작하기" })).toBeVisible();
+
+  // 헤더의 프리뷰 열기 링크를 통해 /preview 로 이동한다 (클라이언트 내 내비게이션 유지).
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+
+  // 프리뷰 헤더가 보여야 한다.
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  // 프리뷰에서도 Hero 헤드라인과 CTA 버튼이 그대로 보여야 한다.
+  await expect(page.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
+  // 프리뷰에서는 CTA를 실제 링크(<a>)로 렌더링하므로 텍스트 기준으로만 검증한다.
+  await expect(page.getByText("지금 시작하기")).toBeVisible();
+
+  // 프리뷰 화면에는 에디터용 "텍스트 블록 추가" 버튼이 없어야 한다.
+  await expect(page.getByRole("button", { name: "텍스트 블록 추가" })).toHaveCount(0);
+});
+
+test("에디터에서 Features 템플릿을 추가하면 프리뷰에서 3개의 Feature 섹션이 보여야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  await page.getByRole("button", { name: "Features 템플릿 추가" }).click();
+
+  const editorCanvas = page.getByTestId("editor-canvas");
+  await expect(editorCanvas.getByText("Feature 1 제목")).toBeVisible();
+  await expect(editorCanvas.getByText("Feature 2 제목")).toBeVisible();
+  await expect(editorCanvas.getByText("Feature 3 제목")).toBeVisible();
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  await expect(page.getByText("Feature 1 제목")).toBeVisible();
+  await expect(page.getByText("Feature 2 제목")).toBeVisible();
+  await expect(page.getByText("Feature 3 제목")).toBeVisible();
+});
+
+test("에디터에서 CTA 템플릿을 추가하면 프리뷰에서 CTA 텍스트와 버튼이 보여야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  await page.getByRole("button", { name: "CTA 템플릿 추가" }).click();
+
+  const editorCanvas = page.getByTestId("editor-canvas");
+  await expect(editorCanvas.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
+  await expect(editorCanvas.getByRole("button", { name: "CTA 버튼" })).toBeVisible();
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  await expect(page.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
+  await expect(page.getByText("CTA 버튼")).toBeVisible();
+});

tests/unit/editorStore.spec.ts

@@ -174,4 +174,154 @@ describe("editorStore", () => {
     expect(moved.sectionId).toBe(sectionBlock.id);
     expect(moved.columnId).toBe(updatedColumns[1].id);
   });
+
+  it("Hero 템플릿 섹션을 추가하면 섹션과 기본 텍스트/버튼 블록들이 한번에 생성되어야 한다", () => {
+    const store = createEditorStore();
+
+    // 템플릿 액션을 호출한다고 가정한다.
+    // Hero 템플릿은 기본적으로 1개의 섹션과 최소 1개의 텍스트/1개의 버튼 블록을 생성한다고 정의한다.
+    // (구체적인 props 내용은 구현에서 맞춰가되, 타입/개수/섹션/컬럼 배치만 검증한다.)
+    store.getState().addHeroTemplateSection();
+
+    const { blocks, selectedBlockId } = store.getState();
+
+    // 섹션 1개 + 텍스트/버튼 블록이 최소 1개씩 존재해야 한다.
+    const sectionBlocks = blocks.filter((b) => b.type === "section");
+    const textBlocks = blocks.filter((b) => b.type === "text");
+    const buttonBlocks = blocks.filter((b) => b.type === "button");
+
+    expect(sectionBlocks).toHaveLength(1);
+    expect(textBlocks.length).toBeGreaterThanOrEqual(1);
+    expect(buttonBlocks.length).toBeGreaterThanOrEqual(1);
+
+    const section = sectionBlocks[0] as any;
+
+    // 템플릿에서 생성된 텍스트/버튼 블록은 모두 동일 섹션의 첫 컬럼에 배치된다고 가정한다.
+    const columns = (section.props as any).columns;
+    expect(Array.isArray(columns)).toBe(true);
+    expect(columns.length).toBeGreaterThanOrEqual(1);
+
+    const firstColumnId = columns[0].id;
+
+    textBlocks.forEach((tb: any) => {
+      expect(tb.sectionId).toBe(section.id);
+      expect(tb.columnId).toBe(firstColumnId);
+    });
+
+    buttonBlocks.forEach((bb: any) => {
+      expect(bb.sectionId).toBe(section.id);
+      expect(bb.columnId).toBe(firstColumnId);
+    });
+
+    // 마지막으로 생성된 블록(예: CTA 버튼)이 선택되어 있다고 가정한다.
+    expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
+  });
+
+  it("Features 템플릿 섹션을 추가하면 3컬럼 섹션과 각 컬럼의 제목/설명 텍스트가 생성되어야 한다", () => {
+    const store = createEditorStore();
+
+    // Features 템플릿 액션을 호출한다고 가정한다.
+    store.getState().addFeaturesTemplateSection();
+
+    const { blocks, selectedBlockId } = store.getState();
+
+    const sectionBlocks = blocks.filter((b) => b.type === "section");
+    expect(sectionBlocks).toHaveLength(1);
+
+    const section = sectionBlocks[0] as any;
+    const columns = (section.props as any).columns;
+    expect(Array.isArray(columns)).toBe(true);
+    expect(columns.length).toBe(3);
+
+    const textBlocks = blocks.filter((b) => b.type === "text") as any[];
+    // 최소 3개의 feature 항목(제목/설명)을 가정하고, 각 컬럼에는 2개의 텍스트(제목+설명)가 있다고 본다.
+    expect(textBlocks.length).toBeGreaterThanOrEqual(6);
+
+    // 모든 텍스트 블록이 동일 섹션에 속하는지 확인한다.
+    textBlocks.forEach((tb) => {
+      expect(tb.sectionId).toBe(section.id);
+      expect(columns.some((col: any) => col.id === tb.columnId)).toBe(true);
+    });
+
+    expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
+  });
+
+  it("CTA 템플릿 섹션을 추가하면 텍스트와 버튼이 포함된 섹션이 생성되어야 한다", () => {
+    const store = createEditorStore();
+
+    // CTA 템플릿 액션을 호출한다고 가정한다.
+    store.getState().addCtaTemplateSection();
+
+    const { blocks, selectedBlockId } = store.getState();
+
+    const sectionBlocks = blocks.filter((b) => b.type === "section");
+    expect(sectionBlocks).toHaveLength(1);
+
+    const section = sectionBlocks[0] as any;
+    const columns = (section.props as any).columns;
+    expect(Array.isArray(columns)).toBe(true);
+    expect(columns.length).toBeGreaterThanOrEqual(1);
+
+    const firstColumnId = columns[0].id;
+
+    const textBlocks = blocks.filter((b) => b.type === "text") as any[];
+    const buttonBlocks = blocks.filter((b) => b.type === "button") as any[];
+
+    expect(textBlocks.length).toBeGreaterThanOrEqual(1);
+    expect(buttonBlocks.length).toBeGreaterThanOrEqual(1);
+
+    textBlocks.forEach((tb) => {
+      expect(tb.sectionId).toBe(section.id);
+      expect(tb.columnId).toBe(firstColumnId);
+    });
+
+    buttonBlocks.forEach((bb) => {
+      expect(bb.sectionId).toBe(section.id);
+      expect(bb.columnId).toBe(firstColumnId);
+    });
+
+    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);
+  });
 });