diff --git a/sam/docs/projects/index_projects.md b/sam/docs/projects/index_projects.md index 844f0f6..134cbed 100644 --- 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/ # 기획디자인 스토리보드 에디터 ``` --- diff --git a/sam/docs/projects/planning-design/README.md b/sam/docs/projects/planning-design/README.md new file mode 100644 index 0000000..4b90dda --- /dev/null +++ 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