블록 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,8 @@
 "use client";
 
-import type { CSSProperties } from "react";
-import { useState } from "react";
+import type { CSSProperties, ReactNode } from "react";
+import { useEffect, useState } from "react";
+import Link from "next/link";
 import {
   DndContext,
   PointerSensor,
@@ -9,6 +10,7 @@ import {
   useSensor,
   useSensors,
   DragEndEvent,
+  useDroppable,
 } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -17,16 +19,33 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { useEditorStore } from "@/features/editor/state/editorStore";
-import type { Block } from "@/features/editor/state/editorStore";
+import type {
+  Block,
+  TextBlockProps,
+  ButtonBlockProps,
+  ImageBlockProps,
+  SectionBlockProps,
+} from "@/features/editor/state/editorStore";
 
 export default function EditorPage() {
   const blocks = useEditorStore((state) => state.blocks);
   const selectedBlockId = useEditorStore((state) => state.selectedBlockId);
   const addTextBlock = useEditorStore((state) => state.addTextBlock);
+  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 removeBlock = useEditorStore((state) => state.removeBlock);
+  const duplicateBlock = useEditorStore((state) => state.duplicateBlock);
 
   const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
   const [editingText, setEditingText] = useState("");
@@ -147,14 +166,158 @@ export default function EditorPage() {
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
-    reorderBlocks(String(active.id), String(over.id));
+    const activeId = String(active.id);
+    const overId = String(over.id);
+
+    // 컬럼 droppable에 드롭한 경우: 해당 섹션/컬럼으로 이동만 수행한다.
+    if (overId.startsWith("column:")) {
+      const [, sectionId, columnId] = overId.split(":");
+      moveBlock(activeId, sectionId || null, columnId || null);
+      return;
+    }
+
+    const activeBlock = blocks.find((b) => b.id === activeId);
+    const overBlock = blocks.find((b) => b.id === overId);
+
+    if (!activeBlock || !overBlock) {
+      reorderBlocks(activeId, overId);
+      return;
+    }
+
+    const activeSectionId = activeBlock.sectionId ?? null;
+    const activeColumnId = activeBlock.columnId ?? null;
+    const overSectionId = overBlock.sectionId ?? null;
+    const overColumnId = overBlock.columnId ?? null;
+
+    // 같은 섹션/컬럼 내에서는 순서만 변경한다.
+    if (activeSectionId === overSectionId && activeColumnId === overColumnId) {
+      reorderBlocks(activeId, overId);
+      return;
+    }
+
+    // 다른 컬럼/섹션으로 이동: 위치를 변경한 뒤, 블록 기준 드롭이면 순서 재배치까지 진행한다.
+    moveBlock(activeId, overSectionId, overColumnId);
+    reorderBlocks(activeId, overId);
   };
 
+  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;
+      const isEditing = block.id === editingBlockId;
+
+      return (
+        <SortableEditorBlock
+          key={block.id}
+          block={block}
+          isSelected={isSelected}
+          isEditing={isEditing}
+          editingText={editingText}
+          startEditing={startEditing}
+          commitEditing={commitEditing}
+          setEditingText={setEditingText}
+          selectBlock={selectBlock}
+          allBlocks={blocks}
+          renderBlocks={renderBlocks}
+        />
+      );
+    });
+
   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 Editor</h1>
-        <p className="text-xs text-slate-400">빌더 MVP용 에디터 페이지 골격</p>
+        <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">
@@ -166,6 +329,51 @@ export default function EditorPage() {
           >
             텍스트 블록 추가
           </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={addButtonBlock}
+          >
+            버튼 블록 추가
+          </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={addImageBlock}
+          >
+            이미지 블록 추가
+          </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={addSectionBlock}
+          >
+            섹션 블록 추가
+          </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>
@@ -188,24 +396,7 @@ export default function EditorPage() {
                 items={blocks.map((b) => b.id)}
                 strategy={verticalListSortingStrategy}
               >
-                {blocks.map((block) => {
-                  const isSelected = block.id === selectedBlockId;
-                  const isEditing = block.id === editingBlockId;
-
-                  return (
-                    <SortableEditorBlock
-                      key={block.id}
-                      block={block}
-                      isSelected={isSelected}
-                      isEditing={isEditing}
-                      editingText={editingText}
-                      startEditing={startEditing}
-                      commitEditing={commitEditing}
-                      setEditingText={setEditingText}
-                      selectBlock={selectBlock}
-                    />
-                  );
-                })}
+                {renderBlocks(rootBlocks)}
               </SortableContext>
             </DndContext>
           )}
@@ -214,66 +405,254 @@ export default function EditorPage() {
           <h2 className="font-medium mb-2">속성 패널</h2>
           {selectedBlockId ? (
             <div className="space-y-3">
-              <div className="space-y-1">
-                <p className="text-xs text-slate-400">선택한 텍스트 블록 내용</p>
-                <textarea
-                  className="w-full min-h-[80px] rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
-                  aria-label="선택한 텍스트 블록 내용"
-                  value={
-                    blocks.find((b) => b.id === selectedBlockId)?.props.text ?? ""
-                  }
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    updateBlock(selectedBlockId, { text: value });
-                    // 인라인 편집과의 상태 차이를 막기 위해, 현재 인라인 편집 중인 블록이라면 로컬 상태도 동기화한다.
-                    if (editingBlockId === selectedBlockId) {
-                      setEditingText(value);
-                    }
-                  }}
-                />
+              <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;
 
-              <div className="space-y-1">
-                <label className="flex flex-col gap-1 text-xs text-slate-400">
-                  <span>정렬</span>
-                  <select
-                    className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
-                    aria-label="정렬"
-                    value={
-                      blocks.find((b) => b.id === selectedBlockId)?.props.align ?? "left"
-                    }
-                    onChange={(e) => {
-                      const value = e.target.value as "left" | "center" | "right";
-                      updateBlock(selectedBlockId, { align: value });
-                    }}
-                  >
-                    <option value="left">왼쪽</option>
-                    <option value="center">가운데</option>
-                    <option value="right">오른쪽</option>
-                  </select>
-                </label>
-              </div>
+                if (selectedBlock.type === "text") {
+                  const textProps = selectedBlock.props as TextBlockProps;
 
-              <div className="space-y-1">
-                <label className="flex flex-col gap-1 text-xs text-slate-400">
-                  <span>글자 크기</span>
-                  <select
-                    className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
-                    aria-label="글자 크기"
-                    value={
-                      blocks.find((b) => b.id === selectedBlockId)?.props.size ?? "base"
-                    }
-                    onChange={(e) => {
-                      const value = e.target.value as "sm" | "base" | "lg";
-                      updateBlock(selectedBlockId, { size: value });
-                    }}
-                  >
-                    <option value="sm">작게</option>
-                    <option value="base">보통</option>
-                    <option value="lg">크게</option>
-                  </select>
-                </label>
-              </div>
+                  return (
+                    <>
+                      <div className="space-y-1">
+                        <p className="text-xs text-slate-400">선택한 텍스트 블록 내용</p>
+                        <textarea
+                          className="w-full min-h-[80px] rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                          aria-label="선택한 텍스트 블록 내용"
+                          value={textProps.text}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            updateBlock(selectedBlockId, { text: value });
+                            if (editingBlockId === selectedBlockId) {
+                              setEditingText(value);
+                            }
+                          }}
+                        />
+                      </div>
+
+                      <div className="space-y-1">
+                        <label className="flex flex-col gap-1 text-xs text-slate-400">
+                          <span>정렬</span>
+                          <select
+                            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                            aria-label="정렬"
+                            value={textProps.align}
+                            onChange={(e) => {
+                              const value = e.target.value as "left" | "center" | "right";
+                              updateBlock(selectedBlockId, { align: value });
+                            }}
+                          >
+                            <option value="left">왼쪽</option>
+                            <option value="center">가운데</option>
+                            <option value="right">오른쪽</option>
+                          </select>
+                        </label>
+                      </div>
+
+                      <div className="space-y-1">
+                        <label className="flex flex-col gap-1 text-xs text-slate-400">
+                          <span>글자 크기</span>
+                          <select
+                            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                            aria-label="글자 크기"
+                            value={textProps.size}
+                            onChange={(e) => {
+                              const value = e.target.value as "sm" | "base" | "lg";
+                              updateBlock(selectedBlockId, { size: value });
+                            }}
+                          >
+                            <option value="sm">작게</option>
+                            <option value="base">보통</option>
+                            <option value="lg">크게</option>
+                          </select>
+                        </label>
+                      </div>
+                    </>
+                  );
+                }
+
+                if (selectedBlock.type === "image") {
+                  const imageProps = selectedBlock.props as ImageBlockProps;
+
+                  return (
+                    <>
+                      <div className="space-y-1">
+                        <label className="flex flex-col gap-1 text-xs text-slate-400">
+                          <span>이미지 URL</span>
+                          <input
+                            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                            aria-label="이미지 URL"
+                            value={imageProps.src}
+                            onChange={(e) => {
+                              updateBlock(selectedBlockId, { src: e.target.value } as any);
+                            }}
+                          />
+                        </label>
+                      </div>
+                      <div className="space-y-1">
+                        <label className="flex flex-col gap-1 text-xs text-slate-400">
+                          <span>대체 텍스트</span>
+                          <input
+                            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                            aria-label="대체 텍스트"
+                            value={imageProps.alt}
+                            onChange={(e) => {
+                              updateBlock(selectedBlockId, { alt: e.target.value } as any);
+                            }}
+                          />
+                        </label>
+                      </div>
+                    </>
+                  );
+                }
+
+                if (selectedBlock.type === "section") {
+                  const sectionProps = selectedBlock.props as SectionBlockProps;
+
+                  return (
+                    <>
+                      <div className="space-y-1">
+                        <label className="flex flex-col gap-1 text-xs text-slate-400">
+                          <span>레이아웃</span>
+                          <select
+                            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                            aria-label="섹션 레이아웃"
+                            value={(() => {
+                              const cols = sectionProps.columns ?? [];
+                              if (cols.length === 1 && cols[0].span === 12) return "1col";
+                              if (cols.length === 2 && cols[0].span === 6 && cols[1].span === 6) return "2col";
+                              if (
+                                cols.length === 3 &&
+                                cols[0].span === 4 &&
+                                cols[1].span === 4 &&
+                                cols[2].span === 4
+                              )
+                                return "3col";
+                              return "custom";
+                            })()}
+                            onChange={(e) => {
+                              const preset = e.target.value;
+                              if (preset === "custom") return;
+
+                              const cols =
+                                preset === "1col"
+                                  ? [{ id: `${selectedBlock.id}_col_1`, span: 12 }]
+                                  : preset === "2col"
+                                  ? [
+                                      { id: `${selectedBlock.id}_col_1`, span: 6 },
+                                      { id: `${selectedBlock.id}_col_2`, span: 6 },
+                                    ]
+                                  : [
+                                      { id: `${selectedBlock.id}_col_1`, span: 4 },
+                                      { id: `${selectedBlock.id}_col_2`, span: 4 },
+                                      { id: `${selectedBlock.id}_col_3`, span: 4 },
+                                    ];
+
+                              updateBlock(selectedBlockId, { columns: cols } as any);
+                            }}
+                          >
+                            <option value="1col">1열 (100%)</option>
+                            <option value="2col">2열 (50 / 50)</option>
+                            <option value="3col">3열 (33 / 33 / 33)</option>
+                            <option value="custom" disabled>
+                              사용자 정의
+                            </option>
+                          </select>
+                        </label>
+                      </div>
+                      <div className="space-y-1">
+                        <label className="flex flex-col gap-1 text-xs text-slate-400">
+                          <span>배경색</span>
+                          <select
+                            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                            aria-label="섹션 배경색"
+                            value={sectionProps.background}
+                            onChange={(e) => {
+                              const value = e.target.value as SectionBlockProps["background"];
+                              updateBlock(selectedBlockId, { background: value } as any);
+                            }}
+                          >
+                            <option value="default">기본</option>
+                            <option value="muted">Muted</option>
+                            <option value="primary">Primary</option>
+                          </select>
+                        </label>
+                      </div>
+                      <div className="space-y-1">
+                        <label className="flex flex-col gap-1 text-xs text-slate-400">
+                          <span>세로 패딩</span>
+                          <select
+                            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                            aria-label="섹션 세로 패딩"
+                            value={sectionProps.paddingY}
+                            onChange={(e) => {
+                              const value = e.target.value as SectionBlockProps["paddingY"];
+                              updateBlock(selectedBlockId, { paddingY: value } as any);
+                            }}
+                          >
+                            <option value="sm">작게</option>
+                            <option value="md">보통</option>
+                            <option value="lg">크게</option>
+                          </select>
+                        </label>
+                      </div>
+                    </>
+                  );
+                }
+
+                if (selectedBlock.type === "button") {
+                  const buttonProps = selectedBlock.props as ButtonBlockProps;
+
+                  return (
+                    <>
+                      <div className="space-y-1">
+                        <label className="flex flex-col gap-1 text-xs text-slate-400">
+                          <span>버튼 텍스트</span>
+                          <input
+                            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                            aria-label="버튼 텍스트"
+                            value={buttonProps.label}
+                            onChange={(e) => {
+                              updateBlock(selectedBlockId, { label: e.target.value } as any);
+                            }}
+                          />
+                        </label>
+                      </div>
+                      <div className="space-y-1">
+                        <label className="flex flex-col gap-1 text-xs text-slate-400">
+                          <span>버튼 링크</span>
+                          <input
+                            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                            aria-label="버튼 링크"
+                            value={buttonProps.href}
+                            onChange={(e) => {
+                              updateBlock(selectedBlockId, { href: e.target.value } as any);
+                            }}
+                          />
+                        </label>
+                      </div>
+                    </>
+                  );
+                }
+
+                return null;
+              })()}
             </div>
           ) : (
             <p className="text-xs text-slate-500">
@@ -395,6 +774,8 @@ interface SortableEditorBlockProps {
   commitEditing: () => void;
   setEditingText: (value: string) => void;
   selectBlock: (id: string) => void;
+  allBlocks: Block[];
+  renderBlocks: (targetBlocks: Block[]) => ReactNode;
 }
 
 function SortableEditorBlock({
@@ -406,6 +787,8 @@ function SortableEditorBlock({
   commitEditing,
   setEditingText,
   selectBlock,
+  allBlocks,
+  renderBlocks,
 }: SortableEditorBlockProps) {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
     id: block.id,
@@ -416,19 +799,36 @@ function SortableEditorBlock({
     transition,
   };
 
-  const alignClass =
-    block.props.align === "center"
-      ? "text-center"
-      : block.props.align === "right"
-      ? "text-right"
-      : "text-left";
+  let alignClass = "";
+  let sizeClass = "";
 
-  const sizeClass =
-    block.props.size === "sm"
-      ? "text-sm"
-      : block.props.size === "lg"
-      ? "text-lg"
-      : "text-base";
+  if (block.type === "text") {
+    const textProps = block.props as TextBlockProps;
+    alignClass =
+      textProps.align === "center"
+        ? "text-center"
+        : textProps.align === "right"
+        ? "text-right"
+        : "text-left";
+
+    sizeClass =
+      textProps.size === "sm"
+        ? "text-sm"
+        : textProps.size === "lg"
+        ? "text-lg"
+        : "text-base";
+  } else if (block.type === "button") {
+    // 버튼 블록은 기본 텍스트 스타일만 적용
+    alignClass = "text-left";
+    sizeClass = "text-base";
+  } else if (block.type === "image") {
+    alignClass = "text-left";
+    sizeClass = "text-base";
+  } else {
+    // 섹션 블록: 텍스트 크기 대신 섹션 자체에 패딩/배경을 입히므로 텍스트 클래스는 기본값만
+    alignClass = "text-left";
+    sizeClass = "text-base";
+  }
 
   return (
     <div
@@ -441,7 +841,12 @@ function SortableEditorBlock({
         isSelected ? "border-sky-500 bg-slate-900/80" : "border-slate-700 bg-slate-900"
       }`}
       onClick={() => selectBlock(block.id)}
-      onDoubleClick={() => startEditing(block.id, block.props.text)}
+      onDoubleClick={() => {
+        if (block.type === "text") {
+          const textProps = block.props as TextBlockProps;
+          startEditing(block.id, textProps.text);
+        }
+      }}
     >
       <div className="flex items-start gap-2">
         <button
@@ -454,27 +859,146 @@ function SortableEditorBlock({
           ≡
         </button>
         <div className="flex-1">
-          {isEditing ? (
-            <textarea
-              className="w-full bg-transparent outline-none resize-none text-sm"
-              aria-label="텍스트 블록 내용 편집"
-              value={editingText}
-              onChange={(e) => setEditingText(e.target.value)}
-              onBlur={commitEditing}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                  e.preventDefault();
-                  commitEditing();
-                }
-              }}
-              rows={1}
-              autoFocus
-            />
-          ) : (
-            <div>{block.props.text}</div>
+          {block.type === "text" && (
+            isEditing ? (
+              <textarea
+                className="w-full bg-transparent outline-none resize-none text-sm"
+                aria-label="텍스트 블록 내용 편집"
+                value={editingText}
+                onChange={(e) => setEditingText(e.target.value)}
+                onBlur={commitEditing}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    commitEditing();
+                  }
+                }}
+                rows={1}
+                autoFocus
+              />
+            ) : (
+              <div>{(block.props as TextBlockProps).text}</div>
+            )
           )}
+          {block.type === "button" && (() => {
+            const buttonProps = block.props as ButtonBlockProps;
+            return (
+              <button
+                type="button"
+                className="inline-flex items-center justify-center rounded border border-slate-600 bg-slate-800 px-3 py-1 text-xs font-medium text-slate-50 hover:bg-slate-700"
+                aria-label={buttonProps.label}
+                onClick={(e) => {
+                  // 에디터 내 버튼 클릭은 선택만 유지하고 실제 이동은 막는다.
+                  e.stopPropagation();
+                }}
+              >
+                {buttonProps.label}
+              </button>
+            );
+          })()}
+          {block.type === "image" && (() => {
+            const imageProps = block.props as ImageBlockProps;
+            const hasSrc = imageProps.src.trim().length > 0;
+            return (
+              <div className="w-full border border-dashed border-slate-700 bg-slate-900/40 rounded flex items-center justify-center overflow-hidden">
+                {hasSrc ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={imageProps.src}
+                    alt={imageProps.alt}
+                    className="max-w-full h-auto object-contain"
+                  />
+                ) : (
+                  <span className="text-[10px] text-slate-500 px-2 py-4">
+                    이미지 URL을 속성 패널에서 입력하세요.
+                  </span>
+                )}
+              </div>
+            );
+          })()}
+          {block.type === "section" && (() => {
+            const sectionProps = block.props as SectionBlockProps;
+
+            const bgClass =
+              sectionProps.background === "muted"
+                ? "bg-slate-950/40"
+                : sectionProps.background === "primary"
+                ? "bg-sky-950/40 border-sky-900/60"
+                : "bg-slate-900/60";
+
+            const pyClass =
+              sectionProps.paddingY === "sm"
+                ? "py-4"
+                : sectionProps.paddingY === "lg"
+                ? "py-10"
+                : "py-6";
+
+            const columns = sectionProps.columns && sectionProps.columns.length > 0
+              ? sectionProps.columns
+              : [{ id: `${block.id}_col_fallback`, span: 12 }];
+
+            return (
+              <div className={`w-full ${bgClass} ${pyClass} rounded border border-dashed border-slate-700`}
+              >
+                <div className="flex gap-3">
+                  {columns.map((col) => {
+                    const basis = `${(col.span / 12) * 100}%`;
+                    const columnBlocks = allBlocks.filter(
+                      (b) => b.sectionId === block.id && b.columnId === col.id,
+                    );
+                    const droppableId = `column:${block.id}:${col.id}`;
+                    return (
+                      <ColumnDroppable
+                        key={col.id}
+                        id={droppableId}
+                        sectionId={block.id}
+                        columnId={col.id}
+                      >
+                        <div
+                          className="border border-slate-800/80 bg-slate-950/40 rounded flex flex-col gap-2 items-stretch justify-start px-2 py-2"
+                          style={{ flexBasis: basis }}
+                        >
+                          {columnBlocks.length === 0 ? (
+                            <span className="text-[11px] text-slate-500 px-2 text-center">
+                              컬럼 영역 (span {col.span}/12)
+                            </span>
+                          ) : (
+                            <div className="flex flex-col gap-2">
+                              {renderBlocks(columnBlocks)}
+                            </div>
+                          )}
+                        </div>
+                      </ColumnDroppable>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })()}
         </div>
       </div>
     </div>
   );
 }
+
+interface ColumnDroppableProps {
+  id: string;
+  sectionId: string;
+  columnId: string;
+  children: ReactNode;
+}
+
+function ColumnDroppable({ id, sectionId, columnId, children }: ColumnDroppableProps) {
+  const { setNodeRef } = useDroppable({ id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      data-section-id={sectionId}
+      data-column-id={columnId}
+      className="flex-1"
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -1,8 +1,8 @@
 import { createStore } from "zustand";
 import { create } from "zustand";
 
-// 블록 타입 정의: 1단계에서는 텍스트 블록만 사용
-export type BlockType = "text"; // 이후 image/button/section 으로 확장 예정
+// 블록 타입 정의: 텍스트/버튼/이미지/섹션 블록
+export type BlockType = "text" | "button" | "image" | "section";
 
 // 텍스트 블록 속성
 export interface TextBlockProps {
@@ -13,22 +13,62 @@ export interface TextBlockProps {
   size: "sm" | "base" | "lg";
 }
 
+// 버튼 블록 속성
+export interface ButtonBlockProps {
+  label: string;
+  href: string;
+  // TODO: variant, size 등은 추후 확장
+}
+
+// 이미지 블록 속성
+export interface ImageBlockProps {
+  src: string;
+  alt: string;
+}
+
+// 섹션 블록 속성
+export interface SectionBlockProps {
+  background: "default" | "muted" | "primary";
+  paddingY: "sm" | "md" | "lg";
+  // 레이아웃 컬럼 정의 (12 그리드 기준 span)
+  columns: Array<{
+    id: string;
+    span: number;
+  }>;
+}
+
 // 공통 블록 모델
 export interface Block {
   id: string;
   type: BlockType;
-  props: TextBlockProps;
+  props: TextBlockProps | ButtonBlockProps | ImageBlockProps | SectionBlockProps;
+  // 레이아웃 트리 상 위치 정보 (루트 텍스트/버튼/이미지 블록은 null)
+  sectionId?: string | null;
+  columnId?: string | null;
 }
 
 // 에디터 상태 인터페이스
 export interface EditorState {
   blocks: Block[];
   selectedBlockId: string | null;
+  history: Block[][];
+  future: Block[][];
   addTextBlock: () => void;
-  updateBlock: (id: string, partial: Partial<TextBlockProps>) => 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;
+  removeBlock: (id: string) => void;
+  duplicateBlock: (id: string) => void;
 }
 
 // 간단한 ID 생성기 (추후 uuid 라이브러리로 교체 가능)
@@ -40,10 +80,31 @@ const createId = () => `blk_${Date.now()}_${idCounter++}`;
 const createEditorState = (set: any, get: any): EditorState => ({
     blocks: [],
     selectedBlockId: null,
+    history: [],
+    future: [],
 
     // 텍스트 블록 추가: 기본 텍스트와 함께 생성 후 선택 상태로 만든다
     addTextBlock: () => {
       const id = createId();
+
+      const { selectedBlockId, blocks } = get();
+      let sectionId: string | null = null;
+      let columnId: string | null = null;
+
+      if (selectedBlockId) {
+        const target = blocks.find((b: Block) => b.id === selectedBlockId);
+        if (target) {
+          if (target.type === "section") {
+            const sProps = target.props as SectionBlockProps;
+            sectionId = target.id;
+            columnId = sProps.columns?.[0]?.id ?? null;
+          } else {
+            sectionId = (target as any).sectionId ?? null;
+            columnId = (target as any).columnId ?? null;
+          }
+        }
+      }
+
       const newBlock: Block = {
         id,
         type: "text",
@@ -52,6 +113,247 @@ const createEditorState = (set: any, get: any): EditorState => ({
           align: "left",
           size: "base",
         },
+        sectionId,
+        columnId,
+      };
+
+      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();
+
+      const { selectedBlockId, blocks } = get();
+      let sectionId: string | null = null;
+      let columnId: string | null = null;
+
+      if (selectedBlockId) {
+        const target = blocks.find((b: Block) => b.id === selectedBlockId);
+        if (target) {
+          if (target.type === "section") {
+            const sProps = target.props as SectionBlockProps;
+            sectionId = target.id;
+            columnId = sProps.columns?.[0]?.id ?? null;
+          } else {
+            sectionId = (target as any).sectionId ?? null;
+            columnId = (target as any).columnId ?? null;
+          }
+        }
+      }
+
+      const newBlock: Block = {
+        id,
+        type: "image",
+        props: {
+          src: "",
+          alt: "이미지 설명",
+        },
+        sectionId,
+        columnId,
       };
 
       set((state: EditorState) => ({
@@ -60,7 +362,71 @@ const createEditorState = (set: any, get: any): EditorState => ({
       }));
     },
 
-    // 특정 블록의 텍스트 속성을 부분 업데이트
+    // 섹션 블록 추가: 배경/패딩 기본값과 함께 생성 후 선택 상태로 만든다
+    addSectionBlock: () => {
+      const id = createId();
+      const newBlock: Block = {
+        id,
+        type: "section",
+        props: {
+          background: "default",
+          paddingY: "md",
+          columns: [
+            {
+              id: `${id}_col_1`,
+              span: 12,
+            },
+          ],
+        },
+        sectionId: null,
+        columnId: null,
+      };
+
+      set((state: EditorState) => ({
+        blocks: [...state.blocks, newBlock],
+        selectedBlockId: id,
+      }));
+    },
+
+    // 버튼 블록 추가: 기본 라벨/링크와 함께 생성 후 선택 상태로 만든다
+    addButtonBlock: () => {
+      const id = createId();
+
+      const { selectedBlockId, blocks } = get();
+      let sectionId: string | null = null;
+      let columnId: string | null = null;
+
+      if (selectedBlockId) {
+        const target = blocks.find((b: Block) => b.id === selectedBlockId);
+        if (target) {
+          if (target.type === "section") {
+            const sProps = target.props as SectionBlockProps;
+            sectionId = target.id;
+            columnId = sProps.columns?.[0]?.id ?? null;
+          } else {
+            sectionId = (target as any).sectionId ?? null;
+            columnId = (target as any).columnId ?? null;
+          }
+        }
+      }
+      const newBlock: Block = {
+        id,
+        type: "button",
+        props: {
+          label: "버튼",
+          href: "#",
+        },
+        sectionId,
+        columnId,
+      };
+
+      set((state: EditorState) => ({
+        blocks: [...state.blocks, newBlock],
+        selectedBlockId: id,
+      }));
+    },
+
+    // 특정 블록의 속성을 부분 업데이트 (텍스트/버튼 공통 사용)
     updateBlock: (id, partial) => {
       set((state: EditorState) => ({
         blocks: state.blocks.map((block: Block) =>
@@ -109,6 +475,104 @@ const createEditorState = (set: any, get: any): EditorState => ({
         return { blocks: updated };
       });
     },
+    moveBlock: (id, sectionId, columnId) => {
+      set((state: EditorState) => ({
+        blocks: state.blocks.map((block: Block) =>
+          block.id === id
+            ? {
+                ...block,
+                sectionId,
+                columnId,
+              }
+            : block,
+        ),
+      }));
+    },
+    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

@@ -229,3 +229,216 @@ 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();
+});
+
+test("2컬럼 섹션에서 블록을 다른 컬럼 영역으로 드래그하면 컬럼이 변경되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  // 섹션을 하나 추가하고 레이아웃을 2컬럼으로 변경한다.
+  await page.getByRole("button", { name: "섹션 블록 추가" }).click();
+
+  // 섹션을 선택한다 (캔버스 첫 블록).
+  const sectionBlock = canvas.getByTestId("editor-block").nth(0);
+  await sectionBlock.click();
+
+  const layoutSelect = page.getByRole("combobox", { name: "섹션 레이아웃" });
+  await layoutSelect.selectOption("2col");
+
+  // 왼쪽 컬럼에 텍스트 블록을 하나 추가한다.
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+
+  const leftColumn = canvas.locator('[data-section-id][data-column-id]').nth(0);
+  const rightColumn = canvas.locator('[data-section-id][data-column-id]').nth(1);
+
+  // 왼쪽 컬럼 안에 텍스트 블록이 존재하는지 확인한다.
+  const leftBlocks = leftColumn.getByTestId("editor-block");
+  await expect(leftBlocks).toHaveCount(1);
+
+  // 왼쪽 컬럼의 첫 블록을 오른쪽 컬럼 droppable 영역으로 드래그한다.
+  const leftBlock = leftBlocks.nth(0);
+  const handle = leftBlock.getByRole("button", { name: "블록 드래그 핸들" });
+  await handle.dragTo(rightColumn);
+
+  // 드래그 이후, 오른쪽 컬럼 안에 블록이 존재해야 하고 왼쪽 컬럼은 비어 있어야 한다.
+  const rightBlocks = rightColumn.getByTestId("editor-block");
+  await expect(rightBlocks).toHaveCount(1);
+
+  // 왼쪽 컬럼에는 더 이상 블록이 없어야 한다.
+  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");
+});
+
+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/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

@@ -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,341 @@ 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);
+  });
+
+  it("섹션이 선택된 상태에서 텍스트 블록을 추가하면 해당 섹션의 첫 컬럼에 배치되어야 한다", () => {
+    const store = createEditorStore();
+
+    // 섹션 블록을 하나 추가하고 기본 1컬럼 레이아웃을 사용한다.
+    store.getState().addSectionBlock();
+
+    const { blocks: afterSection } = store.getState();
+    expect(afterSection).toHaveLength(1);
+    const sectionBlock = afterSection[0];
+    expect(sectionBlock.type).toBe("section");
+
+    const sectionProps = sectionBlock.props as any;
+    expect(Array.isArray(sectionProps.columns)).toBe(true);
+    expect(sectionProps.columns.length).toBeGreaterThan(0);
+
+    // 섹션을 선택한 후 텍스트 블록을 추가한다.
+    store.getState().selectBlock(sectionBlock.id);
+    store.getState().addTextBlock();
+
+    const { blocks: finalBlocks } = store.getState();
+    expect(finalBlocks).toHaveLength(2);
+
+    const textBlock = finalBlocks.find((b) => b.type === "text")!;
+
+    // 새 텍스트 블록의 sectionId/columnId가 선택된 섹션과 첫 컬럼을 가리켜야 한다.
+    expect((textBlock as any).sectionId).toBe(sectionBlock.id);
+    expect((textBlock as any).columnId).toBe(sectionProps.columns[0].id);
+  });
+
+  it("블록이 선택된 상태에서 새 텍스트 블록을 추가하면 동일한 섹션/컬럼에 배치되어야 한다", () => {
+    const store = createEditorStore();
+
+    // 섹션 + 텍스트 블록을 만든다.
+    store.getState().addSectionBlock();
+    const { blocks: afterSection } = store.getState();
+    const sectionBlock = afterSection[0];
+    const sectionProps = sectionBlock.props as any;
+
+    store.getState().selectBlock(sectionBlock.id);
+    store.getState().addTextBlock();
+
+    let { blocks } = store.getState();
+    const firstText = blocks.find((b) => b.type === "text")!;
+
+    // 첫 텍스트 블록의 위치를 기준으로 한다.
+    store.getState().selectBlock(firstText.id);
+    store.getState().addTextBlock();
+
+    blocks = store.getState().blocks;
+    const textBlocks = blocks.filter((b) => b.type === "text");
+    expect(textBlocks).toHaveLength(2);
+
+    const [t1, t2] = textBlocks as any[];
+
+    // 두 번째 텍스트 블록도 같은 섹션/컬럼에 있어야 한다.
+    expect(t1.sectionId).toBe(sectionBlock.id);
+    expect(t2.sectionId).toBe(sectionBlock.id);
+    expect(t1.columnId).toBe(sectionProps.columns[0].id);
+    expect(t2.columnId).toBe(sectionProps.columns[0].id);
+  });
+
+  it("moveBlock 호출 시 블록의 sectionId/columnId가 변경되어야 한다", () => {
+    const store = createEditorStore();
+
+    // 섹션 + 텍스트 블록 1개를 만든다.
+    store.getState().addSectionBlock();
+    const { blocks: afterSection } = store.getState();
+    const sectionBlock = afterSection[0];
+    const sectionProps = sectionBlock.props as any;
+
+    store.getState().selectBlock(sectionBlock.id);
+    store.getState().addTextBlock();
+
+    let { blocks } = store.getState();
+    const textBlock = blocks.find((b) => b.type === "text") as any;
+
+    // 초기 위치는 섹션의 첫 컬럼이어야 한다.
+    expect(textBlock.sectionId).toBe(sectionBlock.id);
+    expect(textBlock.columnId).toBe(sectionProps.columns[0].id);
+
+    // 섹션 레이아웃을 2컬럼으로 바꾸고 두 번째 컬럼으로 이동시킨다.
+    const updatedColumns = [
+      { id: `${sectionBlock.id}_col_1`, span: 6 },
+      { id: `${sectionBlock.id}_col_2`, span: 6 },
+    ];
+
+    store.getState().updateBlock(sectionBlock.id, { columns: updatedColumns } as any);
+
+    store.getState().moveBlock(textBlock.id, sectionBlock.id, updatedColumns[1].id);
+
+    blocks = store.getState().blocks;
+    const moved = blocks.find((b) => b.id === textBlock.id) as any;
+
+    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);
+  });
+
+  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);
   });
 });