97bdc5fbb3
- block-editor.blade.php: 3패널 UI (Palette + Canvas + Properties) - Alpine.js blockEditor() 컴포넌트 (CRUD, Undo/Redo, SortableJS) - 기본 Block 6종: heading, paragraph, table, columns, divider, spacer - 폼 필드 Block 7종: text, number, date, select, checkbox, textarea, signature - BlockRendererService: JSON → HTML 렌더링 서비스 - 컨트롤러 분기: builder_type = 'block' → 블록 빌더 뷰 - 라우트 추가: block-create, block-edit - API store/update에 schema JSON 처리 추가 - index 페이지에 블록 빌더 진입 버튼 추가 - 목록에 builder_type 뱃지 표시
36 lines
1.9 KiB
PHP
36 lines
1.9 KiB
PHP
{{-- Block Palette (좌측 사이드바) --}}
|
|
<div class="block-palette bg-gray-50 border-r border-gray-200 overflow-y-auto shrink-0 p-3">
|
|
<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">기본</div>
|
|
<div class="space-y-1 mb-4">
|
|
<template x-for="(def, type) in blockTypes" :key="type">
|
|
<button x-show="def.category === 'basic'"
|
|
@click="addBlock(type)"
|
|
class="palette-item w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-700 hover:bg-white hover:shadow-sm transition border border-transparent hover:border-gray-200">
|
|
<span class="w-6 h-6 flex items-center justify-center bg-blue-100 text-blue-700 rounded text-xs font-bold shrink-0"
|
|
x-text="def.icon"></span>
|
|
<span x-text="def.label"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">폼 필드</div>
|
|
<div class="space-y-1 mb-4">
|
|
<template x-for="(def, type) in blockTypes" :key="type + '_form'">
|
|
<button x-show="def.category === 'form'"
|
|
@click="addBlock(type)"
|
|
class="palette-item w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-700 hover:bg-white hover:shadow-sm transition border border-transparent hover:border-gray-200">
|
|
<span class="w-6 h-6 flex items-center justify-center bg-green-100 text-green-700 rounded text-xs font-bold shrink-0"
|
|
x-text="def.icon"></span>
|
|
<span x-text="def.label"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
{{-- 블록 카운트 --}}
|
|
<div class="mt-4 pt-3 border-t border-gray-200">
|
|
<div class="text-xs text-gray-400">
|
|
블록 <span x-text="blocks.length" class="font-medium text-gray-600"></span>개
|
|
</div>
|
|
</div>
|
|
</div>
|