DnD UX 개선 및 DragOverlay 적용, CI Playwright 캐시 최적화

MAIN_PLAN.md

@@ -65,6 +65,53 @@
 
 ---
 
+## builder-11-editor-ux-advanced 상세 플랜
+
+### 1) DnD UX 고도화
+- **목표**
+  - 블록/섹션 드래그앤드롭이 시각적으로 명확하고, 의도한 위치로 안정적으로 이동하도록 개선
+  - 2컬럼 섹션 컬럼 이동, 블록 순서 변경 관련 E2E를 CI에서도 신뢰할 수 있게 만들기
+
+- **작업 항목 (TDD)**
+  1. `tests/e2e/editor.spec.ts`
+     - `"블록 드래그앤드롭으로 순서를 변경할 수 있어야 한다"` 시나리오를 현재 UX에 맞게 단순/안정화
+     - `"2컬럼 섹션에서 블록을 다른 컬럼 영역으로 드래그하면 컬럼이 변경되어야 한다"` 시나리오를 실제 드롭 영역 구조에 맞춰 조정
+  2. `EditorPage`/`SortableEditorBlock`
+     - 드롭 대상 컬럼/섹션의 hit-area를 넓히거나, 불필요한 overlay가 pointer events를 가로채지 않게 레이아웃 조정
+     - DnD Kit 설정(sensors, collision detection 등) 필요 시 보정
+  3. 필요 시 `editorStore` 유닛 테스트에서
+     - `reorderBlocks`, `moveBlock` 조합 케이스(섹션/컬럼 간 이동)를 명시적으로 테스트해 회귀 방지
+
+### 2) 키보드/포커스 UX 개선
+- **목표**
+  - ArrowUp/ArrowDown 으로 선택 블록이 예측 가능하게 이동
+  - Cmd/Ctrl+Z / Cmd/Ctrl+Shift+Z / Cmd/Ctrl+D 와 같은 단축키가 OS에 관계없이 일관되게 동작
+
+- **작업 항목 (TDD)**
+  1. `tests/e2e/editor.spec.ts`
+     - `"ArrowUp/ArrowDown 키로 선택된 블록을 위/아래로 이동하며 순차적으로 선택할 수 있어야 한다"` 테스트를 CI에서도 통과하도록 재정의
+       - 초기 선택 상태, 포커스 위치, 기대되는 `data-selected`/`aria-selected` 값을 명확히 기술
+  2. `EditorPage`의 전역 keydown 핸들러
+     - ArrowUp/Down 선택 이동 로직을 단순/명확하게 정리 (현재 선택이 없을 때 첫 블록 선택 등)
+     - OS별 Cmd/Ctrl 판별 로직(`navigator.platform`)과 E2E에서 보내는 키 조합을 일치시켜 유지
+
+### 3) 인라인 편집 UX 정리
+- **목표**
+  - 텍스트 블록 더블클릭 → 인라인 편집 진입
+  - Enter → 커밋, Esc → 취소, 포커스 아웃 시 안전하게 커밋
+
+- **작업 항목 (TDD)**
+  1. `tests/e2e/editor.spec.ts`
+     - `"텍스트 블록을 더블클릭해서 내용을 수정할 수 있어야 한다"` 시나리오를
+       - 더블클릭 → 편집 모드 진입
+       - Enter 커밋 / Esc 취소 흐름까지 포함하도록 보완
+  2. `EditorPage`의 인라인 편집 상태(`editingBlockId`, `editingText`)
+     - 더블클릭/포커스 아웃/Enter/Esc 이벤트에 대한 상태 전이와 `updateBlock` 호출 타이밍을 명확히 정의
+
+이 모든 작업도 `builder-10`과 동일하게 **실패하는 테스트 추가 → 최소 구현 → 리팩터링 → CI/E2E 확인** 순서로 진행한다.
+
+---
+
 ## 디버깅/CI 관련 기록 (요약)
 - CI에서 `prisma generate` 단계가 `DATABASE_URL` 없음으로 실패 → 워크플로에서 더미 `DATABASE_URL` 주입으로 해결
 - 유닛 테스트에서 API 테스트가 실제 DB 접속 시도 →