From 2f9ef0d0a236146b40835cf266eaec789ac34e89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Mar 2026 23:19:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[planning-design]=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EB=93=9C=20=EB=B8=94=EB=A1=9D=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=91=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 노션 스타일 블록 기반 화면 설계 편집기
- 15종 블록: 제목(H1/H2), 텍스트, 테이블, 콜아웃, 체크리스트,
  코드, 버튼, 입력필드, 셀렉트, 카드, 뱃지, 이미지, 구분선
- 드래그 앤 드롭 블록 순서 변경
- 블록 복제, 위/아래 이동, 삭제 지원
- HTML 내보내기에 블록 렌더링 반영
---
 .../views/rd/planning-design/index.blade.php  | 573 ++++++++++++++++--
 1 file changed, 533 insertions(+), 40 deletions(-)

diff --git a/resources/views/rd/planning-design/index.blade.php b/resources/views/rd/planning-design/index.blade.php
index 89e01318..e999d9c4 100644
--- a/resources/views/rd/planning-design/index.blade.php
+++ b/resources/views/rd/planning-design/index.blade.php
@@ -621,6 +621,121 @@
 }
 .sb-desc-remove:hover { color: #ef4444; background: #fef2f2; }
 
+/* Block Editor (Wireframe) */
+.sb-block-toolbar {
+    display: flex; align-items: center; gap: 4px; padding: 6px 12px;
+    border-bottom: 1px solid #e2e8f0; background: #fafbfc; flex-wrap: wrap;
+}
+.sb-block-toolbar-btn {
+    padding: 3px 8px; border: 1px solid #e2e8f0; border-radius: 5px;
+    font-size: 10px; cursor: pointer; background: #fff; color: #475569;
+    display: flex; align-items: center; gap: 3px; white-space: nowrap;
+    transition: all .12s;
+}
+.sb-block-toolbar-btn:hover { border-color: var(--pc-indigo); color: var(--pc-indigo); background: #eef2ff; }
+.sb-block-toolbar-sep { width: 1px; height: 18px; background: #e2e8f0; margin: 0 2px; }
+.sb-blocks-area { flex: 1; padding: 16px; overflow-y: auto; min-height: 300px; }
+.sb-block {
+    position: relative; border: 1.5px solid transparent; border-radius: 6px;
+    margin-bottom: 2px; padding: 0; transition: border-color .12s;
+    group: true;
+}
+.sb-block:hover { border-color: #c7d2fe; }
+.sb-block.selected { border-color: var(--pc-indigo); background: #fafafe; }
+.sb-block-handle {
+    position: absolute; left: -22px; top: 50%; transform: translateY(-50%);
+    width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
+    color: #cbd5e1; cursor: grab; font-size: 12px; opacity: 0; transition: opacity .12s;
+    user-select: none;
+}
+.sb-block:hover .sb-block-handle { opacity: 1; }
+.sb-block-handle:active { cursor: grabbing; color: #6366f1; }
+.sb-block-actions {
+    position: absolute; right: 4px; top: 4px; display: flex; gap: 2px;
+    opacity: 0; transition: opacity .12s;
+}
+.sb-block:hover .sb-block-actions { opacity: 1; }
+.sb-block-action-btn {
+    width: 20px; height: 20px; border: none; background: #f1f5f9; color: #94a3b8;
+    border-radius: 4px; cursor: pointer; font-size: 11px; display: flex;
+    align-items: center; justify-content: center;
+}
+.sb-block-action-btn:hover { background: #e2e8f0; color: #475569; }
+.sb-block-action-btn.danger:hover { background: #fef2f2; color: #ef4444; }
+.sb-block-drop-indicator {
+    height: 3px; background: var(--pc-indigo); border-radius: 2px; margin: -2px 0;
+    transition: opacity .12s; opacity: 0;
+}
+.sb-block-drop-indicator.active { opacity: 1; }
+
+/* Block type styles */
+.sb-blk-text { padding: 6px 8px; font-size: 13px; line-height: 1.7; min-height: 24px; outline: none; color: #334155; }
+.sb-blk-text:empty::before { content: attr(data-placeholder); color: #cbd5e1; }
+.sb-blk-heading { padding: 8px 8px 4px; font-size: 18px; font-weight: 700; line-height: 1.4; outline: none; color: #1e293b; }
+.sb-blk-heading:empty::before { content: '제목을 입력하세요'; color: #cbd5e1; }
+.sb-blk-h2 { font-size: 15px; font-weight: 600; }
+.sb-blk-divider { border: none; border-top: 1px solid #e2e8f0; margin: 8px 0; }
+.sb-blk-callout {
+    display: flex; gap: 8px; padding: 10px 12px; background: #eff6ff;
+    border-radius: 6px; border-left: 3px solid #3b82f6;
+}
+.sb-blk-callout-icon { font-size: 16px; flex-shrink: 0; }
+.sb-blk-callout-text { flex: 1; font-size: 12px; line-height: 1.6; outline: none; color: #334155; }
+.sb-blk-callout-text:empty::before { content: '콜아웃 내용을 입력하세요'; color: #93c5fd; }
+.sb-blk-table-wrap { overflow-x: auto; padding: 4px; }
+.sb-blk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.sb-blk-table th { background: #f1f5f9; font-weight: 600; color: #475569; text-align: left; }
+.sb-blk-table th, .sb-blk-table td {
+    border: 1px solid #e2e8f0; padding: 6px 8px; min-width: 60px; outline: none;
+}
+.sb-blk-table td:focus { background: #f8fafc; }
+.sb-blk-mockup { padding: 8px; }
+.sb-blk-mockup-label { font-size: 9px; color: #94a3b8; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
+.sb-blk-mock-btn {
+    display: inline-block; padding: 6px 16px; border-radius: 6px; font-size: 12px;
+    font-weight: 600; cursor: default;
+}
+.sb-blk-mock-input {
+    width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px;
+    font-size: 12px; color: #6b7280; background: #f9fafb;
+}
+.sb-blk-mock-select {
+    padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px;
+    font-size: 12px; color: #6b7280; background: #f9fafb;
+}
+.sb-blk-mock-card {
+    border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fff;
+}
+.sb-blk-mock-card-title { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 4px; outline: none; }
+.sb-blk-mock-card-body { font-size: 11px; color: #64748b; line-height: 1.5; outline: none; }
+.sb-blk-image-wrap { text-align: center; }
+.sb-blk-image-wrap img { max-width: 100%; border-radius: 6px; }
+.sb-blk-image-placeholder {
+    border: 2px dashed #d1d5db; border-radius: 6px; padding: 24px;
+    color: #94a3b8; font-size: 12px; cursor: pointer; text-align: center;
+}
+.sb-blk-image-placeholder:hover { border-color: var(--pc-indigo); }
+.sb-blk-todo { display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px; }
+.sb-blk-todo input[type=checkbox] { margin-top: 4px; accent-color: var(--pc-indigo); }
+.sb-blk-todo-text { flex: 1; font-size: 12px; outline: none; line-height: 1.6; }
+.sb-blk-todo-text:empty::before { content: '할 일을 입력하세요'; color: #cbd5e1; }
+.sb-blk-badge-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 8px; }
+.sb-blk-badge {
+    padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 600;
+}
+.sb-blk-code {
+    padding: 10px 12px; background: #1e293b; border-radius: 6px; color: #e2e8f0;
+    font-family: 'Fira Code', monospace; font-size: 12px; line-height: 1.6;
+    outline: none; white-space: pre-wrap;
+}
+.sb-blk-code:empty::before { content: '코드를 입력하세요'; color: #64748b; }
+.sb-blk-empty-area {
+    border: 2px dashed #e2e8f0; border-radius: 8px; min-height: 200px;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    color: #94a3b8; font-size: 12px; gap: 8px; cursor: pointer; transition: all .15s;
+}
+.sb-blk-empty-area:hover { border-color: var(--pc-indigo); background: #fafafe; }
+
 /* Menu Tree Editor Modal */
 .sb-menu-modal-overlay {
     position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.4);
@@ -1223,38 +1338,235 @@
 
                                 {{-- Content + Description --}}
                                 <div class="sb-content-area">
-                                    {{-- Wireframe Area --}}
-                                    <div class="sb-wireframe">
-                                        <template x-if="!sbCurrentPage.wireframeContent && !sbCurrentPage.wireframeImage">
-                                            <div class="sb-wireframe-placeholder" @click="$refs.sbImageInput?.click()">
-                                                <svg style="width:32px;height:32px;color:#cbd5e1;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
-                                                <span>이미지를 업로드하거나 클릭하여 텍스트 입력</span>
-                                                <div style="display:flex; gap:8px; margin-top:8px;">
-                                                    <button style="padding:4px 12px; border:1px solid var(--pc-indigo); border-radius:6px; font-size:11px; color:var(--pc-indigo); background:#fff; cursor:pointer;"
-                                                            @click.stop="sbCurrentPage.wireframeContent = ' '">텍스트로 작성</button>
-                                                    <button style="padding:4px 12px; border:1px solid var(--pc-indigo); border-radius:6px; font-size:11px; color:#fff; background:var(--pc-indigo); cursor:pointer;"
-                                                            @click.stop="$refs.sbImageInput.click()">이미지 업로드</button>
-                                                </div>
-                                                <input type="file" accept="image/*" x-ref="sbImageInput" style="display:none;" @change="sbUploadImage($event)">
+                                    {{-- Block Toolbar --}}
+                                    <div class="sb-block-toolbar">
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('heading')">H1</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('heading2')">H2</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('text')">T 텍스트</button>
+                                        <div class="sb-block-toolbar-sep"></div>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('table')">▦ 테이블</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('callout')">💡 콜아웃</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('todo')">☑ 체크리스트</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('code')">{ } 코드</button>
+                                        <div class="sb-block-toolbar-sep"></div>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('button')">🔘 버튼</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('input')">⊡ 입력필드</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('select')">▿ 셀렉트</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('card')">▣ 카드</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('badges')">● 뱃지</button>
+                                        <div class="sb-block-toolbar-sep"></div>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('image')">🖼 이미지</button>
+                                        <button class="sb-block-toolbar-btn" @click="sbAddBlock('divider')">― 구분선</button>
+                                        <input type="file" accept="image/*" x-ref="sbBlockImageInput" style="display:none;" @change="sbBlockUploadImage($event)">
+                                    </div>
+
+                                    {{-- Block Editor Area --}}
+                                    <div class="sb-blocks-area" style="padding-left:32px;">
+                                        <template x-if="!sbPageBlocks.length">
+                                            <div class="sb-blk-empty-area" @click="sbAddBlock('text')">
+                                                <svg style="width:28px;height:28px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v16m8-8H4"/></svg>
+                                                <span>블록을 추가하여 화면을 구성하세요</span>
+                                                <span style="font-size:10px; color:#cbd5e1;">상단 툴바에서 블록 유형을 선택하거나 여기를 클릭하세요</span>
                                             </div>
                                         </template>
-                                        <template x-if="sbCurrentPage.wireframeImage">
-                                            <div style="position:relative;">
-                                                <img class="sb-wireframe-img" :src="sbCurrentPage.wireframeImage" alt="wireframe">
-                                                <button style="position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:none; background:rgba(0,0,0,0.5); color:#fff; cursor:pointer; font-size:12px;"
-                                                        @click="sbCurrentPage.wireframeImage = ''; autoSave();">&times;</button>
-                                            </div>
-                                        </template>
-                                        <template x-if="sbCurrentPage.wireframeContent && !sbCurrentPage.wireframeImage">
-                                            <div>
-                                                <div class="sb-wireframe-content" contenteditable="true"
-                                                     @blur="sbCurrentPage.wireframeContent = $event.target.innerHTML; autoSave();"
-                                                     x-html="sbCurrentPage.wireframeContent"></div>
-                                                <div style="display:flex; gap:4px; margin-top:4px;">
-                                                    <button style="font-size:10px; color:#94a3b8; cursor:pointer; border:none; background:none;"
-                                                            @click="$refs.sbImageInput2?.click()">이미지로 교체</button>
-                                                    <input type="file" accept="image/*" x-ref="sbImageInput2" style="display:none;" @change="sbUploadImage($event)">
+                                        <template x-for="(blk, bi) in sbPageBlocks" :key="blk.id">
+                                            <div class="sb-block" :class="{ selected: sbSelectedBlock === blk.id }" @click="sbSelectedBlock = blk.id"
+                                                 draggable="true"
+                                                 @dragstart="sbBlockDragStart(bi, $event)"
+                                                 @dragover.prevent="sbBlockDragOver(bi, $event)"
+                                                 @drop="sbBlockDrop(bi, $event)"
+                                                 @dragend="sbBlockDragEnd()">
+                                                <span class="sb-block-handle">⠿</span>
+                                                <div class="sb-block-actions">
+                                                    <button class="sb-block-action-btn" @click.stop="sbDuplicateBlock(bi)" title="복제">⧉</button>
+                                                    <button class="sb-block-action-btn" @click.stop="sbMoveBlockUp(bi)" title="위로" x-show="bi > 0">↑</button>
+                                                    <button class="sb-block-action-btn" @click.stop="sbMoveBlockDown(bi)" title="아래로" x-show="bi < sbPageBlocks.length - 1">↓</button>
+                                                    <button class="sb-block-action-btn danger" @click.stop="sbRemoveBlock(bi)" title="삭제">×</button>
                                                 </div>
+
+                                                {{-- Text --}}
+                                                <template x-if="blk.type === 'text'">
+                                                    <div class="sb-blk-text" contenteditable="true" data-placeholder="텍스트를 입력하세요..."
+                                                         @blur="blk.content = $event.target.innerText; autoSave();"
+                                                         @keydown.enter="if(!$event.shiftKey){ $event.preventDefault(); sbAddBlockAfter(bi,'text'); }"
+                                                         x-text="blk.content"></div>
+                                                </template>
+
+                                                {{-- Heading --}}
+                                                <template x-if="blk.type === 'heading'">
+                                                    <div class="sb-blk-heading" contenteditable="true"
+                                                         @blur="blk.content = $event.target.innerText; autoSave();"
+                                                         x-text="blk.content"></div>
+                                                </template>
+                                                <template x-if="blk.type === 'heading2'">
+                                                    <div class="sb-blk-heading sb-blk-h2" contenteditable="true" data-placeholder="소제목을 입력하세요"
+                                                         @blur="blk.content = $event.target.innerText; autoSave();"
+                                                         x-text="blk.content"></div>
+                                                </template>
+
+                                                {{-- Divider --}}
+                                                <template x-if="blk.type === 'divider'">
+                                                    <hr class="sb-blk-divider">
+                                                </template>
+
+                                                {{-- Callout --}}
+                                                <template x-if="blk.type === 'callout'">
+                                                    <div class="sb-blk-callout">
+                                                        <span class="sb-blk-callout-icon" contenteditable="true" @blur="blk.icon = $event.target.innerText; autoSave();" x-text="blk.icon || '💡'"></span>
+                                                        <div class="sb-blk-callout-text" contenteditable="true"
+                                                             @blur="blk.content = $event.target.innerText; autoSave();"
+                                                             x-text="blk.content"></div>
+                                                    </div>
+                                                </template>
+
+                                                {{-- Table --}}
+                                                <template x-if="blk.type === 'table'">
+                                                    <div class="sb-blk-table-wrap">
+                                                        <table class="sb-blk-table">
+                                                            <thead>
+                                                                <tr>
+                                                                    <template x-for="(col, ci) in blk.cols" :key="ci">
+                                                                        <th contenteditable="true" @blur="blk.cols[ci] = $event.target.innerText; autoSave();" x-text="col"></th>
+                                                                    </template>
+                                                                    <th style="width:24px; background:transparent; border:none; padding:0;">
+                                                                        <button class="sb-block-action-btn" @click.stop="sbTableAddCol(blk)" style="width:20px; height:20px;">+</button>
+                                                                    </th>
+                                                                </tr>
+                                                            </thead>
+                                                            <tbody>
+                                                                <template x-for="(row, ri) in blk.rows" :key="ri">
+                                                                    <tr>
+                                                                        <template x-for="(cell, ci) in row" :key="ci">
+                                                                            <td contenteditable="true" @blur="blk.rows[ri][ci] = $event.target.innerText; autoSave();" x-text="cell"></td>
+                                                                        </template>
+                                                                        <td style="border:none; padding:0;">
+                                                                            <button class="sb-block-action-btn danger" @click.stop="blk.rows.splice(ri, 1); autoSave();" style="width:18px; height:18px; font-size:10px;">×</button>
+                                                                        </td>
+                                                                    </tr>
+                                                                </template>
+                                                            </tbody>
+                                                        </table>
+                                                        <div style="display:flex; gap:4px; margin-top:4px;">
+                                                            <button class="sb-block-toolbar-btn" @click.stop="sbTableAddRow(blk)" style="font-size:9px;">+ 행 추가</button>
+                                                        </div>
+                                                    </div>
+                                                </template>
+
+                                                {{-- Mock: Button --}}
+                                                <template x-if="blk.type === 'button'">
+                                                    <div class="sb-blk-mockup">
+                                                        <div class="sb-blk-mockup-label">Button</div>
+                                                        <span class="sb-blk-mock-btn" contenteditable="true"
+                                                              :style="'background:' + (blk.color || '#4338ca') + '; color:#fff;'"
+                                                              @blur="blk.content = $event.target.innerText; autoSave();"
+                                                              x-text="blk.content || '버튼'"></span>
+                                                        <div style="display:flex; gap:4px; margin-top:6px;">
+                                                            <template x-for="c in ['#4338ca','#10b981','#ef4444','#f59e0b','#64748b']" :key="c">
+                                                                <span @click="blk.color = c; autoSave();" style="width:16px; height:16px; border-radius:50%; cursor:pointer; display:inline-block;"
+                                                                      :style="'background:' + c + '; border:2px solid ' + (blk.color === c ? '#1e293b' : 'transparent')"></span>
+                                                            </template>
+                                                        </div>
+                                                    </div>
+                                                </template>
+
+                                                {{-- Mock: Input --}}
+                                                <template x-if="blk.type === 'input'">
+                                                    <div class="sb-blk-mockup">
+                                                        <div class="sb-blk-mockup-label" contenteditable="true" @blur="blk.label = $event.target.innerText; autoSave();" x-text="blk.label || 'Label'"></div>
+                                                        <input class="sb-blk-mock-input" type="text" :placeholder="blk.placeholder || '입력 필드'"
+                                                               @input="blk.placeholder = $event.target.placeholder" disabled>
+                                                        <input type="text" style="margin-top:4px; font-size:10px; border:none; outline:none; color:#94a3b8; width:100%;"
+                                                               x-model="blk.placeholder" placeholder="placeholder 텍스트 편집" @input="autoSave()">
+                                                    </div>
+                                                </template>
+
+                                                {{-- Mock: Select --}}
+                                                <template x-if="blk.type === 'select'">
+                                                    <div class="sb-blk-mockup">
+                                                        <div class="sb-blk-mockup-label" contenteditable="true" @blur="blk.label = $event.target.innerText; autoSave();" x-text="blk.label || 'Label'"></div>
+                                                        <select class="sb-blk-mock-select" disabled>
+                                                            <option x-text="blk.placeholder || '선택하세요'"></option>
+                                                        </select>
+                                                        <input type="text" style="margin-top:4px; font-size:10px; border:none; outline:none; color:#94a3b8; width:100%;"
+                                                               x-model="blk.placeholder" placeholder="placeholder 텍스트 편집" @input="autoSave()">
+                                                    </div>
+                                                </template>
+
+                                                {{-- Mock: Card --}}
+                                                <template x-if="blk.type === 'card'">
+                                                    <div class="sb-blk-mockup">
+                                                        <div class="sb-blk-mockup-label">Card</div>
+                                                        <div class="sb-blk-mock-card">
+                                                            <div class="sb-blk-mock-card-title" contenteditable="true"
+                                                                 @blur="blk.title = $event.target.innerText; autoSave();"
+                                                                 x-text="blk.title || '카드 제목'"></div>
+                                                            <div class="sb-blk-mock-card-body" contenteditable="true"
+                                                                 @blur="blk.content = $event.target.innerText; autoSave();"
+                                                                 x-text="blk.content || '카드 내용을 입력하세요'"></div>
+                                                        </div>
+                                                    </div>
+                                                </template>
+
+                                                {{-- Badges --}}
+                                                <template x-if="blk.type === 'badges'">
+                                                    <div class="sb-blk-mockup">
+                                                        <div class="sb-blk-mockup-label">Badges</div>
+                                                        <div class="sb-blk-badge-row">
+                                                            <template x-for="(badge, bdi) in blk.items" :key="bdi">
+                                                                <span class="sb-blk-badge" :style="'background:' + (badge.color || '#e0e7ff') + '; color:' + (badge.textColor || '#4338ca') + ';'"
+                                                                      contenteditable="true"
+                                                                      @blur="badge.text = $event.target.innerText; autoSave();"
+                                                                      x-text="badge.text"></span>
+                                                            </template>
+                                                            <button class="sb-block-action-btn" @click.stop="blk.items.push({ text: '뱃지', color: '#e0e7ff', textColor: '#4338ca' }); autoSave();">+</button>
+                                                        </div>
+                                                    </div>
+                                                </template>
+
+                                                {{-- Todo --}}
+                                                <template x-if="blk.type === 'todo'">
+                                                    <div>
+                                                        <template x-for="(item, ti) in blk.items" :key="ti">
+                                                            <div class="sb-blk-todo">
+                                                                <input type="checkbox" x-model="item.checked" @change="autoSave()">
+                                                                <div class="sb-blk-todo-text" contenteditable="true"
+                                                                     :style="item.checked ? 'text-decoration: line-through; color:#94a3b8;' : ''"
+                                                                     @blur="item.text = $event.target.innerText; autoSave();"
+                                                                     @keydown.enter.prevent="blk.items.splice(ti+1, 0, { text: '', checked: false }); autoSave(); $nextTick(() => { $event.target.parentElement.nextElementSibling?.querySelector('[contenteditable]')?.focus(); })"
+                                                                     x-text="item.text"></div>
+                                                                <button class="sb-block-action-btn danger" @click.stop="blk.items.splice(ti, 1); autoSave();" style="width:16px;height:16px;font-size:10px;">×</button>
+                                                            </div>
+                                                        </template>
+                                                        <div style="padding:4px 8px;">
+                                                            <button class="sb-block-toolbar-btn" @click.stop="blk.items.push({ text: '', checked: false }); autoSave();" style="font-size:9px;">+ 항목 추가</button>
+                                                        </div>
+                                                    </div>
+                                                </template>
+
+                                                {{-- Code --}}
+                                                <template x-if="blk.type === 'code'">
+                                                    <div class="sb-blk-code" contenteditable="true"
+                                                         @blur="blk.content = $event.target.innerText; autoSave();"
+                                                         x-text="blk.content"></div>
+                                                </template>
+
+                                                {{-- Image --}}
+                                                <template x-if="blk.type === 'image'">
+                                                    <div class="sb-blk-image-wrap">
+                                                        <template x-if="blk.src">
+                                                            <div style="position:relative; display:inline-block;">
+                                                                <img :src="blk.src" style="max-width:100%; border-radius:6px;">
+                                                                <button style="position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(0,0,0,0.5); color:#fff; cursor:pointer; font-size:11px;"
+                                                                        @click.stop="blk.src = ''; autoSave();">×</button>
+                                                            </div>
+                                                        </template>
+                                                        <template x-if="!blk.src">
+                                                            <div class="sb-blk-image-placeholder" @click.stop="sbBlockImageTarget = blk; $refs.sbBlockImageInput.click();">
+                                                                클릭하여 이미지 업로드
+                                                            </div>
+                                                        </template>
+                                                    </div>
+                                                </template>
                                             </div>
                                         </template>
                                     </div>
@@ -1503,6 +1815,9 @@ function planningCanvas() {
         sbMenuEditorOpen: false,
         sbMenuDraft: [],
         _sbMenuDrag: null,
+        sbSelectedBlock: null,
+        sbBlockImageTarget: null,
+        _sbBlockDragIdx: null,
         sb: {
             docInfo: { projectName: '', unitTask: '', version: 'D1.0' },
             menuTree: [
@@ -1598,6 +1913,13 @@ function planningCanvas() {
             return this.sb.pages[this.sb.currentPageIndex] || null;
         },
 
+        get sbPageBlocks() {
+            const page = this.sbCurrentPage;
+            if (!page) return [];
+            if (!page.blocks) page.blocks = [];
+            return page.blocks;
+        },
+
         get allPaletteItems() {
             return [
                 ...this.paletteItems.planning,
@@ -2193,6 +2515,7 @@ function planningCanvas() {
                 screenId: '',
                 wireframeContent: '',
                 wireframeImage: '',
+                blocks: [],
                 descriptions: [],
             };
         },
@@ -2230,20 +2553,139 @@ function planningCanvas() {
             this.autoSave();
         },
 
-        sbUploadImage(e) {
+        // ===== Block Editor =====
+        sbNewBlock(type) {
+            const id = 'blk_' + Date.now() + '_' + Math.random().toString(36).slice(2, 5);
+            const base = { id, type, content: '' };
+            switch (type) {
+                case 'heading': return { ...base };
+                case 'heading2': return { ...base };
+                case 'text': return { ...base };
+                case 'divider': return { ...base };
+                case 'callout': return { ...base, icon: '💡' };
+                case 'code': return { ...base };
+                case 'table': return { ...base, cols: ['항목', '내용', '비고'], rows: [['', '', ''], ['', '', '']] };
+                case 'button': return { ...base, content: '버튼', color: '#4338ca' };
+                case 'input': return { ...base, label: 'Label', placeholder: '값을 입력하세요' };
+                case 'select': return { ...base, label: 'Label', placeholder: '선택하세요' };
+                case 'card': return { ...base, title: '카드 제목', content: '카드 내용을 입력하세요' };
+                case 'badges': return { ...base, items: [
+                    { text: '신규', color: '#dbeafe', textColor: '#2563eb' },
+                    { text: '진행중', color: '#dcfce7', textColor: '#16a34a' },
+                    { text: '완료', color: '#e0e7ff', textColor: '#4338ca' },
+                ]};
+                case 'todo': return { ...base, items: [
+                    { text: '항목 1', checked: false },
+                    { text: '항목 2', checked: false },
+                ]};
+                case 'image': return { ...base, src: '' };
+                default: return base;
+            }
+        },
+
+        sbAddBlock(type) {
+            const page = this.sbCurrentPage;
+            if (!page) return;
+            if (!page.blocks) page.blocks = [];
+            const blk = this.sbNewBlock(type);
+            page.blocks.push(blk);
+            this.sbSelectedBlock = blk.id;
+            this.autoSave();
+        },
+
+        sbAddBlockAfter(idx, type) {
+            const page = this.sbCurrentPage;
+            if (!page || !page.blocks) return;
+            const blk = this.sbNewBlock(type);
+            page.blocks.splice(idx + 1, 0, blk);
+            this.sbSelectedBlock = blk.id;
+            this.autoSave();
+        },
+
+        sbRemoveBlock(idx) {
+            const page = this.sbCurrentPage;
+            if (!page || !page.blocks) return;
+            page.blocks.splice(idx, 1);
+            this.sbSelectedBlock = null;
+            this.autoSave();
+        },
+
+        sbDuplicateBlock(idx) {
+            const page = this.sbCurrentPage;
+            if (!page || !page.blocks) return;
+            const copy = JSON.parse(JSON.stringify(page.blocks[idx]));
+            copy.id = 'blk_' + Date.now() + '_' + Math.random().toString(36).slice(2, 5);
+            page.blocks.splice(idx + 1, 0, copy);
+            this.sbSelectedBlock = copy.id;
+            this.autoSave();
+        },
+
+        sbMoveBlockUp(idx) {
+            const page = this.sbCurrentPage;
+            if (!page || idx <= 0) return;
+            const [item] = page.blocks.splice(idx, 1);
+            page.blocks.splice(idx - 1, 0, item);
+            this.autoSave();
+        },
+
+        sbMoveBlockDown(idx) {
+            const page = this.sbCurrentPage;
+            if (!page || idx >= page.blocks.length - 1) return;
+            const [item] = page.blocks.splice(idx, 1);
+            page.blocks.splice(idx + 1, 0, item);
+            this.autoSave();
+        },
+
+        sbBlockDragStart(idx, e) {
+            this._sbBlockDragIdx = idx;
+            e.dataTransfer.effectAllowed = 'move';
+        },
+
+        sbBlockDragOver(idx, e) {
+            if (this._sbBlockDragIdx === null) return;
+            e.dataTransfer.dropEffect = 'move';
+        },
+
+        sbBlockDrop(idx, e) {
+            if (this._sbBlockDragIdx === null) return;
+            const from = this._sbBlockDragIdx;
+            this._sbBlockDragIdx = null;
+            if (from === idx) return;
+            const page = this.sbCurrentPage;
+            if (!page) return;
+            const [item] = page.blocks.splice(from, 1);
+            page.blocks.splice(idx, 0, item);
+            this.autoSave();
+        },
+
+        sbBlockDragEnd() {
+            this._sbBlockDragIdx = null;
+        },
+
+        sbTableAddRow(blk) {
+            const colCount = blk.cols.length;
+            blk.rows.push(Array(colCount).fill(''));
+            this.autoSave();
+        },
+
+        sbTableAddCol(blk) {
+            blk.cols.push('컬럼');
+            blk.rows.forEach(row => row.push(''));
+            this.autoSave();
+        },
+
+        sbBlockUploadImage(e) {
             const file = e.target.files[0];
-            if (!file) return;
+            if (!file || !this.sbBlockImageTarget) return;
             const reader = new FileReader();
+            const target = this.sbBlockImageTarget;
             reader.onload = () => {
-                const page = this.sbCurrentPage;
-                if (page) {
-                    page.wireframeImage = reader.result;
-                    page.wireframeContent = '';
-                    this.autoSave();
-                }
+                target.src = reader.result;
+                this.autoSave();
             };
             reader.readAsDataURL(file);
             e.target.value = '';
+            this.sbBlockImageTarget = null;
         },
 
         sbEditMenu() {
@@ -2365,9 +2807,15 @@ function planningCanvas() {
                     });
                 });
                 html += '</div><div class="content"><div class="wf">';
-                if (pg.wireframeImage) html += '<img src="' + pg.wireframeImage + '">';
-                else if (pg.wireframeContent) html += '<div class="wf-text">' + pg.wireframeContent + '</div>';
-                else html += '<div class="wf-text" style="color:#94a3b8;">와이어프레임 영역</div>';
+                if (pg.blocks && pg.blocks.length > 0) {
+                    pg.blocks.forEach(blk => { html += this.sbExportBlock(blk); });
+                } else if (pg.wireframeImage) {
+                    html += '<img src="' + pg.wireframeImage + '">';
+                } else if (pg.wireframeContent) {
+                    html += '<div class="wf-text">' + pg.wireframeContent + '</div>';
+                } else {
+                    html += '<div class="wf-text" style="color:#94a3b8;">와이어프레임 영역</div>';
+                }
                 html += '</div>';
                 if (pg.descriptions && pg.descriptions.length > 0) {
                     html += '<div class="desc"><div class="desc-title">Description</div>';
@@ -2390,6 +2838,51 @@ function planningCanvas() {
             URL.revokeObjectURL(url);
         },
 
+        sbExportBlock(blk) {
+            const esc = (s) => (s || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            switch (blk.type) {
+                case 'heading': return '<h2 style="font-size:18px;font-weight:700;color:#1e293b;margin:8px 0 4px;">' + esc(blk.content) + '</h2>';
+                case 'heading2': return '<h3 style="font-size:15px;font-weight:600;color:#1e293b;margin:6px 0 4px;">' + esc(blk.content) + '</h3>';
+                case 'text': return '<p style="font-size:13px;line-height:1.7;color:#334155;margin:4px 0;">' + esc(blk.content).replace(/\n/g, '<br>') + '</p>';
+                case 'divider': return '<hr style="border:none;border-top:1px solid #e2e8f0;margin:8px 0;">';
+                case 'callout': return '<div style="display:flex;gap:8px;padding:10px 12px;background:#eff6ff;border-radius:6px;border-left:3px solid #3b82f6;margin:4px 0;"><span style="font-size:16px;">' + esc(blk.icon || '💡') + '</span><span style="font-size:12px;line-height:1.6;color:#334155;">' + esc(blk.content) + '</span></div>';
+                case 'code': return '<pre style="padding:10px 12px;background:#1e293b;border-radius:6px;color:#e2e8f0;font-size:12px;line-height:1.6;margin:4px 0;">' + esc(blk.content) + '</pre>';
+                case 'table': {
+                    let t = '<table style="width:100%;border-collapse:collapse;font-size:12px;margin:4px 0;"><thead><tr>';
+                    (blk.cols || []).forEach(c => { t += '<th style="background:#f1f5f9;font-weight:600;color:#475569;text-align:left;border:1px solid #e2e8f0;padding:6px 8px;">' + esc(c) + '</th>'; });
+                    t += '</tr></thead><tbody>';
+                    (blk.rows || []).forEach(row => {
+                        t += '<tr>';
+                        row.forEach(cell => { t += '<td style="border:1px solid #e2e8f0;padding:6px 8px;">' + esc(cell) + '</td>'; });
+                        t += '</tr>';
+                    });
+                    return t + '</tbody></table>';
+                }
+                case 'button': return '<div style="margin:4px 0;"><span style="display:inline-block;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;background:' + (blk.color || '#4338ca') + ';color:#fff;">' + esc(blk.content) + '</span></div>';
+                case 'input': return '<div style="margin:4px 0;"><div style="font-size:9px;color:#94a3b8;font-weight:600;margin-bottom:2px;">' + esc(blk.label) + '</div><div style="padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;color:#6b7280;background:#f9fafb;">' + esc(blk.placeholder) + '</div></div>';
+                case 'select': return '<div style="margin:4px 0;"><div style="font-size:9px;color:#94a3b8;font-weight:600;margin-bottom:2px;">' + esc(blk.label) + '</div><div style="padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;color:#6b7280;background:#f9fafb;">' + esc(blk.placeholder) + ' ▾</div></div>';
+                case 'card': return '<div style="border:1px solid #e2e8f0;border-radius:8px;padding:12px;background:#fff;margin:4px 0;"><div style="font-size:13px;font-weight:600;color:#1e293b;margin-bottom:4px;">' + esc(blk.title) + '</div><div style="font-size:11px;color:#64748b;line-height:1.5;">' + esc(blk.content) + '</div></div>';
+                case 'badges': {
+                    let b = '<div style="display:flex;gap:6px;flex-wrap:wrap;margin:4px 0;">';
+                    (blk.items || []).forEach(badge => {
+                        b += '<span style="padding:3px 10px;border-radius:12px;font-size:10px;font-weight:600;background:' + (badge.color || '#e0e7ff') + ';color:' + (badge.textColor || '#4338ca') + ';">' + esc(badge.text) + '</span>';
+                    });
+                    return b + '</div>';
+                }
+                case 'todo': {
+                    let t = '<div style="margin:4px 0;">';
+                    (blk.items || []).forEach(item => {
+                        t += '<div style="display:flex;align-items:center;gap:6px;padding:2px 0;font-size:12px;">';
+                        t += item.checked ? '☑' : '☐';
+                        t += ' <span' + (item.checked ? ' style="text-decoration:line-through;color:#94a3b8;"' : '') + '>' + esc(item.text) + '</span></div>';
+                    });
+                    return t + '</div>';
+                }
+                case 'image': return blk.src ? '<div style="margin:4px 0;text-align:center;"><img src="' + blk.src + '" style="max-width:100%;border-radius:6px;"></div>' : '';
+                default: return '<p>' + esc(blk.content) + '</p>';
+            }
+        },
+
         // ===== Context Menu =====
         showContextMenu(e) {
             this.contextMenuPos = { x: e.clientX, y: e.clientY };