docs: [projects] 기획디자인 스토리보드 에디터 프로젝트 문서 추가

- projects/planning-design/README.md: 프로젝트 개요, 구현 이력(v1.0~v1.1), 로드맵 - index_projects.md에 planning-design 프로젝트 등록
2026-03-08 08:46:37 +09:00
parent 428e77aa9b
commit 2dc20952b2
2 changed files with 169 additions and 2 deletions
--- a/sam/docs/projects/index_projects.md
+++ b/sam/docs/projects/index_projects.md
@@ -1,7 +1,7 @@
 # 프로젝트 문서 인덱스

 > SAM 시스템 개발 프로젝트별 문서 모음
-> **최종 업데이트**: 2026-03-06
+> **최종 업데이트**: 2026-03-08

 ---

@@ -19,6 +19,7 @@
 | [migration-5130-mng](#migration-5130-mng---5130--mng-마이그레이션) | 🟡 진행중 | 5130 → mng 통합 마이그레이션 |
 | [e-sign](#e-sign---전자계약-서명) | 🟢 v1.0 구현 완료 | 전자계약 서명 솔루션 (SAM E-Sign) |
 | [org-chart](#org-chart---조직도-관리) | 🟢 v1.0 구현 완료 | 트리형 조직도 관리 (드래그앤드롭, 숨기기) |
+| [planning-design](#planning-design---기획디자인-스토리보드-에디터) | 🟢 v1.1 운영 중 | 브라우저 블록 에디터 (Notion/Figma 스타일) |

 ---

@@ -227,6 +228,30 @@

 ---

+### planning-design - 기획디자인 스토리보드 에디터
+
+**경로**: `docs/projects/planning-design/`
+**상태**: 🟢 v1.1 운영 중 (고도화 진행중)
+**목표**: 브라우저 내 Notion/Figma 스타일 블록 에디터로 ERP 화면 기획서 작성
+
+**핵심 문서**:
+- [README.md](./planning-design/README.md) - 프로젝트 개요 및 구현 이력
+
+**구현 범위**:
+
+| 영역 | 수량 |
+|------|------|
+| 블록 유형 | 15종 (텍스트/레이아웃/UI모형/미디어/체크리스트) |
+| 편집 기능 | 올가미 선택, Undo/Redo, 복사/잘라내기, 서식 |
+| 서식 시스템 | 글자색/배경색/크기/굵기/기울임/정렬/z-index |
+| 출력 | HTML 내보내기 + A4 인쇄 (좌표 기반 WYSIWYG) |
+
+**기술 스택**: Alpine.js + localStorage (서버 API 없음)
+
+**기술 스펙**: [features/rd/planning-design.md](../features/rd/planning-design.md)
+
+---
+
 ## 디렉토리 구조

 ```
@@ -256,7 +281,8 @@ docs/projects/
 ├── auto-login/                 # 자동 로그인
 ├── migration-5130-mng/         # 5130→mng 마이그레이션
 ├── e-sign/                     # 전자계약 서명 (SAM E-Sign)
-└── org-chart/                  # 조직도 관리
+├── org-chart/                  # 조직도 관리
+└── planning-design/            # 기획디자인 스토리보드 에디터
 ```

 ---
--- a/sam/docs/projects/planning-design/README.md
+++ b/sam/docs/projects/planning-design/README.md
@@ -0,0 +1,141 @@
+# 기획디자인 스토리보드 에디터
+
+> **시작일**: 2026-03-07
+> **상태**: 🟢 v1.0 운영 중 (고도화 진행중)
+> **경로**: MNG `/rd/planning-design`
+> **담당**: Claude Code + 개발팀
+
+---
+
+## 1. 프로젝트 개요
+
+### 1.1 배경
+
+ERP 화면 기획서(스토리보드)를 PowerPoint나 Figma 없이 **SAM 관리자 웹 내에서 직접 설계**할 수 있는 도구가 필요했다. 기획자와 개발자가 같은 플랫폼에서 화면을 설계하고, 즉시 HTML/인쇄 출력까지 가능한 올인원 솔루션을 목표로 했다.
+
+### 1.2 목표
+
+- 브라우저 내 Notion/Figma 스타일 블록 에디터 구현
+- ERP 스토리보드 표준 양식 (메뉴트리 + 와이어프레임 + Description) 지원
+- 서버 API 없이 localStorage 기반 즉시 사용 가능
+- HTML 내보내기 및 좌표 기반 WYSIWYG 인쇄
+
+### 1.3 기술 스택
+
+| 항목 | 선택 | 이유 |
+|------|------|------|
+| 프레임워크 | Alpine.js | 서버 없이 반응형 SPA, 기존 MNG 스택과 일치 |
+| 캔버스 | DOM absolute positioning | Canvas API보다 접근성 좋고 텍스트 편집 용이 |
+| 저장 | localStorage | 서버 API 불필요, 즉시 사용 가능 |
+| 내보내기 | HTML 생성 + window.print() | 별도 라이브러리 없이 브라우저 내장 기능 활용 |
+
+---
+
+## 2. 구현 이력
+
+### v1.0 — 기본 블록 에디터 (2026-03-07)
+
+| 커밋 | 내용 |
+|------|------|
+| `063d8c61` | 스토리보드 블록 Undo/Redo 기능 (Ctrl+Z/Y, 50단계 히스토리) |
+| `78c8f3f8` | 페이지 복사 기능 (블록 ID 재생성) |
+| `a27d9921` | placeholder 색상 옅게 + italic 스타일 |
+| `08cc866a` | 블록 툴바를 단위업무 상단으로 이동 (기획서 보기 방해 제거) |
+| `20e5ab78` | 메뉴/캔버스 경계 드래그 리사이즈 (80~400px) |
+| `7785dfed` | 올가미(마퀴) 다중 선택 + 그룹 이동/복사/삭제 |
+| `ff373c71` | 올가미 선택 동작 수정 (캔버스 빈 영역 판별 개선) |
+| `95cd217c` | Ctrl+X 잘라내기 기능 (단일/다중) |
+| `f4131df0` | Ctrl+X 후 Ctrl+Z 복구 수정 (히스토리 인덱스 보정) |
+| `8ff84e7f` | Description 패널 리사이즈 + 번호 마커 블록 (D&D/툴바) |
+| `ac5ae6eb` | 좌표 기반 인쇄 + HTML 내보내기 블록 좌표 배치 |
+
+### v1.1 — 서식 시스템 (2026-03-08)
+
+| 커밋 | 내용 |
+|------|------|
+| `dfbbd3a1` | 플로팅 서식 툴바 + 우클릭 컨텍스트 메뉴 추가 |
+| `280bfddb` | 블록 서식 CSS 상속 수정 (자식 요소 color inherit) |
+
+---
+
+## 3. 현재 기능 목록
+
+### 3.1 블록 유형 (15종)
+
+| 분류 | 유형 |
+|------|------|
+| 텍스트 | Heading (H1), Heading2 (H2), Text, Code |
+| 레이아웃 | Divider, Callout |
+| 데이터 | Table |
+| UI 모형 | Button, Input, Select, Card, Badges |
+| 미디어 | Image, Marker (번호 뱃지) |
+| 체크 | Todo (체크리스트) |
+
+### 3.2 편집 기능
+
+- 자유 배치 캔버스 (드래그 이동, 핸들 리사이즈)
+- 올가미 다중 선택 + 그룹 이동/복사/삭제
+- Undo/Redo (50단계)
+- 복사/붙여넣기/잘라내기 (Ctrl+C/V/X)
+- 전체 선택 (Ctrl+A)
+- 더블클릭 인라인 편집 (contenteditable)
+
+### 3.3 서식 시스템
+
+- 플로팅 서식 툴바: 글자색, 배경색, 크기, 굵기, 기울임, 정렬, z-index
+- 우클릭 컨텍스트 메뉴: 복제/잘라내기/삭제/색상/정렬/레이어/서식 초기화
+
+### 3.4 문서 관리
+
+- 멀티 페이지 (추가/복사/삭제/이동)
+- ERP 메뉴 트리 편집 (드래그 순서 변경)
+- Description 패널 (기능 설명 + 번호 마커 D&D)
+- 프리셋/커스텀 템플릿
+
+### 3.5 출력
+
+- HTML 파일 내보내기 (좌표 기반 WYSIWYG)
+- 인쇄 미리보기 (A4 Landscape, 페이지 분할)
+
+---
+
+## 4. 향후 로드맵
+
+| 우선순위 | 기능 | 설명 | 상태 |
+|---------|------|------|------|
+| 🔴 필수 | DB 저장 | localStorage → DB 전환 (협업, 용량 해결) | ⚪ 대기 |
+| 🔴 필수 | 스냅/그리드 정렬 | 블록 간 자석 가이드라인 | ⚪ 대기 |
+| 🟡 중요 | 그룹핑 | 여러 블록을 하나의 그룹으로 묶기/풀기 | ⚪ 대기 |
+| 🟡 중요 | 레이어 패널 | z-index 순서를 시각적으로 관리 | ⚪ 대기 |
+| 🟡 중요 | 리치 텍스트 | 블록 내 부분 텍스트 서식 (인라인 B/I/색상) | ⚪ 대기 |
+| 🟢 권장 | PDF 내보내기 | 서버사이드 PDF 생성 | ⚪ 대기 |
+| 🟢 권장 | 버전 관리 | 명시적 스냅샷 저장 및 비교 | ⚪ 대기 |
+| 🟢 권장 | 공유 링크 | 읽기 전용 공유 URL 생성 | ⚪ 대기 |
+
+---
+
+## 5. 기술적 특이사항
+
+### 5.1 단일 파일 아키텍처
+
+모든 CSS + HTML + JavaScript가 `index.blade.php` 하나에 포함 (~4,300줄). 서버 API가 없고 localStorage만 사용하므로, 컨트롤러는 뷰만 반환한다.
+
+### 5.2 CSS 스타일 상속 문제
+
+블록 자식 요소에 하드코딩된 `color`가 있어 부모의 인라인 스타일이 무시되는 문제를 CSS attribute selector(`[style*="color"]`)로 해결했다. 향후 블록 유형 추가 시 inherit 규칙도 함께 추가해야 한다.
+
+### 5.3 localStorage 용량 한계
+
+이미지를 base64 Data URL로 저장하므로 대량 사용 시 5~10MB 한계에 도달할 수 있다. DB 저장 전환이 중장기 과제.
+
+---
+
+## 6. 관련 문서
+
+- [기술 스펙](../../features/rd/planning-design.md) — 데이터 구조, 블록 유형, CSS 상속 상세
+- [R&D 메뉴 개요](../../features/rd/README.md) — R&D 전체 메뉴 구조
+- [프로젝트 인덱스](../index_projects.md) — 전체 프로젝트 목록
+
+---
+
+**최종 업데이트**: 2026-03-08