docs: [rd] R&D 기획디자인 스토리보드 에디터 기술문서 추가

- features/rd/README.md: R&D 메뉴 전체 개요 (라우트, 컨트롤러, 기능현황) - features/rd/planning-design.md: 기획디자인 에디터 상세 기술문서 - 블록 유형 15종, 데이터 구조, 서식 시스템 - 올가미 다중 선택, Undo/Redo, 키보드 단축키 - 플로팅 서식 툴바, 우클릭 컨텍스트 메뉴 - HTML 내보내기, 좌표 기반 인쇄 - INDEX.md에 R&D 문서 등록
2026-03-08 01:35:33 +09:00
parent 5798058125
commit 428e77aa9b
3 changed files with 463 additions and 1 deletions
--- a/sam/docs/INDEX.md
+++ b/sam/docs/INDEX.md
@@ -1,7 +1,7 @@
 # SAM 프로젝트 문서 인덱스

 > **Claude Code 작업 전 필수 확인** — 작업 유형에 맞는 문서를 먼저 읽고 시작하세요.
-> **최종 갱신**: 2026-03-06
+> **최종 갱신**: 2026-03-08

 ---

@@ -76,6 +76,7 @@ docs/
 | [database/documents.md](system/database/documents.md) | 문서, 전자서명 (19 모델) |
 | [database/commons.md](system/database/commons.md) | 공통, 게시판, 감사 (17 모델) |
 | [database/stats.md](system/database/stats.md) | 통계 (21 모델, sam_stat DB) |
+| [database/codebridge-separation.md](system/database/codebridge-separation.md) | codebridge DB 분리 (MNG 전용 118 테이블, 78 모델) |

 **이관 완료 (architecture/ + specs/ → system/):**

@@ -146,6 +147,8 @@ docs/
 | [equipment/README.md](features/equipment/README.md) | 설비관리 (MNG 전용) |
 | [approvals/README.md](features/approvals/README.md) | 결재관리 시스템 (순차결재, 보류/전결/참조/복사재기안) |
 | [planning/README.md](features/planning/README.md) | 주일기업 기획 (견적/프로젝트/사진대지/회의록/AI) |
+| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인 스토리보드 에디터) |
+| [rd/planning-design.md](features/rd/planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 |

 ---

--- a/sam/docs/features/rd/README.md
+++ b/sam/docs/features/rd/README.md
@@ -0,0 +1,105 @@
+# R&D 메뉴
+
+> **작성일**: 2026-03-08
+> **상태**: 운영 중
+> **프로젝트**: SAM MNG (관리자 웹)
+> **라우트 접두사**: `/rd`
+
+---
+
+## 1. 개요
+
+### 1.1 목적
+
+R&D 메뉴는 SAM 플랫폼의 **연구개발 및 내부 도구** 모음이다. AI 견적, 조직도 관리, 기획디자인(스토리보드 에디터), 안전점검 등 실험적이거나 내부 운영 목적의 기능을 제공한다.
+
+### 1.2 문서 구조
+
+| 문서 | 설명 |
+|------|------|
+| **README.md** (이 문서) | 전체 개요, 메뉴 구조, 컨트롤러 매핑 |
+| [planning-design.md](planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 |
+
+### 1.3 하위 메뉴 구조
+
+```
+R&D
+├── 대시보드               /rd
+├── 조직도 관리            /rd/org-chart
+├── 중대재해처벌법 점검     /rd/safety-audit
+├── AI 견적               /rd/ai-quotation
+│   ├── 목록              /rd/ai-quotation
+│   ├── 생성              /rd/ai-quotation/create
+│   ├── 상세              /rd/ai-quotation/{id}
+│   ├── 편집              /rd/ai-quotation/{id}/edit
+│   └── 문서              /rd/ai-quotation/{id}/document
+└── 기획디자인             /rd/planning-design
+```
+
+---
+
+## 2. 아키텍처
+
+### 2.1 기술 스택
+
+| 계층 | 기술 | 설명 |
+|------|------|------|
+| 뷰 | Blade + Alpine.js | 반응형 SPA (서버 렌더링 없음) |
+| 컨트롤러 | `RdController` | 모든 R&D 라우트 처리 |
+| 서비스 | `AiQuotationService` | AI 견적 비즈니스 로직 |
+| 모델 | `AiQuotation`, `Employee`, `Department`, `Tenant` | Multi-tenant |
+| 저장 | localStorage (기획디자인), DB (견적/조직도) | 용도별 분리 |
+
+### 2.2 컨트롤러 구조
+
+**파일**: `app/Http/Controllers/RdController.php`
+
+| 메서드 | 라우트 | 설명 |
+|--------|--------|------|
+| `index()` | `GET /rd` | R&D 대시보드 |
+| `orgChart()` | `GET /rd/org-chart` | 조직도 관리 |
+| `orgChartAssign()` | `POST /rd/org-chart/assign` | 직원 부서 배치 |
+| `orgChartUnassign()` | `POST /rd/org-chart/unassign` | 직원 부서 해제 |
+| `orgChartReorder()` | `POST /rd/org-chart/reorder` | 직원 순서/이동 |
+| `orgChartReorderDepts()` | `POST /rd/org-chart/reorder-depts` | 부서 순서 변경 |
+| `orgChartToggleHide()` | `POST /rd/org-chart/toggle-hide` | 부서 숨기기/표시 |
+| `safetyAudit()` | `GET /rd/safety-audit` | 중대재해처벌법 점검 |
+| `quotations()` | `GET /rd/ai-quotation` | AI 견적 목록 |
+| `createQuotation()` | `GET /rd/ai-quotation/create` | AI 견적 생성 폼 |
+| `showQuotation()` | `GET /rd/ai-quotation/{id}` | AI 견적 상세 |
+| `editQuotation()` | `GET /rd/ai-quotation/{id}/edit` | AI 견적 편집 |
+| `documentQuotation()` | `GET /rd/ai-quotation/{id}/document` | AI 견적 문서 |
+| `planningDesign()` | `GET /rd/planning-design` | 기획디자인 |
+
+### 2.3 HTMX 전체 페이지 로드 규칙
+
+모든 `/rd/*` 페이지는 Alpine.js 또는 React 컴포넌트를 사용하므로, HTMX 부분 로드 시 스크립트가 실행되지 않는다. 각 메서드에서 `HX-Request` 감지 시 `HX-Redirect`로 전체 페이지 로드를 강제한다.
+
+```php
+if ($request->header('HX-Request')) {
+    return response('', 200)->header('HX-Redirect', route('rd.planning-design'));
+}
+```
+
+---
+
+## 3. 기능별 구현 현황
+
+| 기능 | 구현 방식 | 백엔드 | DB | 상태 |
+|------|----------|--------|-----|------|
+| R&D 대시보드 | Blade | AiQuotationService | ai_quotations | 운영 중 |
+| 조직도 관리 | Blade + Alpine.js | RdController (직접 쿼리) | employees, departments | 운영 중 |
+| 중대재해처벌법 점검 | Blade (정적) | 없음 | 없음 | 운영 중 |
+| AI 견적 | Blade + Alpine.js | AiQuotationService | ai_quotations | 운영 중 |
+| **기획디자인** | **Blade + Alpine.js (SPA)** | **없음 (localStorage)** | **없음** | **운영 중** |
+
+---
+
+## 4. 관련 문서
+
+- [기획디자인 스토리보드 에디터](planning-design.md) — 블록 에디터, 서식, 인쇄, 내보내기
+- [조직도 관리 기술문서](../../projects/org-chart/) — 조직도 시스템 상세 (별도 프로젝트 문서)
+
+---
+
+**최종 업데이트**: 2026-03-08
--- a/sam/docs/features/rd/planning-design.md
+++ b/sam/docs/features/rd/planning-design.md
@@ -0,0 +1,354 @@
+# 기획디자인 — 스토리보드 에디터
+
+> **작성일**: 2026-03-08
+> **상태**: 운영 중
+> **경로**: `/rd/planning-design`
+> **뷰 파일**: `resources/views/rd/planning-design/index.blade.php`
+
+---
+
+## 1. 개요
+
+### 1.1 목적
+
+ERP 화면 기획서(스토리보드)를 **브라우저 내에서 직접 설계**하는 Notion/Figma 스타일의 블록 에디터. 별도 소프트웨어 없이 화면 와이어프레임, Description, 메뉴 트리를 작성하고 HTML 내보내기 및 인쇄까지 지원한다.
+
+### 1.2 핵심 특징
+
+| 항목 | 설명 |
+|------|------|
+| **프레임워크** | Alpine.js 단일 파일 SPA (서버 API 없음) |
+| **저장 방식** | localStorage (`pc_projects` 키) |
+| **블록 에디터** | 자유 배치 캔버스 (absolute positioning) |
+| **서식 시스템** | 블록별 글자색/배경색/크기/굵기/정렬/z-index |
+| **내보내기** | HTML 파일 다운로드 + 좌표 기반 인쇄 (A4 Landscape) |
+
+---
+
+## 2. 화면 구조
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  프로젝트 툴바 (프로젝트명, 저장, 내보내기, 인쇄)          │
+├──────────────────────────────────────────────────────────┤
+│  블록 툴바 (H1, H2, 텍스트, 테이블, 콜아웃, ... 번호마커)  │
+├──────────────────────────────────────────────────────────┤
+│  문서 정보 바 (단위업무명, 버전, 페이지 네비)               │
+├────┬─────────────────────────────────────────────────────┤
+│    │  페이지 헤더 (경로, 화면명, 화면ID)                    │
+│ 메 │ ┌─────────────────────────────────────────────────┐ │
+│ 뉴 │ │  캔버스 (자유 배치 블록 영역)                      │ │
+│ 트 │ │    ┌──────┐  ┌────────────┐  ┌──────┐          │ │
+│ 리 │ │    │ H1   │  │  테이블     │  │ 01   │          │ │
+│    │ │    └──────┘  └────────────┘  └──────┘          │ │
+│ ◀▶ │ │                                                 │ │
+│ 리 │ └─────────────────────────────────────────────────┘ │
+│ 사 ├─────────────────────────────────────────────────────┤
+│ 이 │  Description 패널 (기능 설명 목록, 번호 뱃지 D&D)     │
+│ 저 │   01  로그인 후 3초 내 전사 현황 표시                  │
+│    │   02  실시간 수주 데이터 연동                          │
+├────┴─────────────────────────────────────────────────────┤
+│  [플로팅 서식 툴바]  B I ☰ A □ 13px ▲▼ ↺                  │
+│  [우클릭 컨텍스트 메뉴]  복제/잘라내기/삭제/색상/정렬/레이어  │
+└──────────────────────────────────────────────────────────┘
+```
+
+### 2.1 리사이저
+
+| 경계 | 방향 | 범위 |
+|------|------|------|
+| 메뉴 ↔ 캔버스 | 좌우 (col-resize) | 80px ~ 400px |
+| 캔버스 ↔ Description | 상하 (row-resize) | 60px ~ 500px |
+
+---
+
+## 3. 데이터 구조
+
+### 3.1 프로젝트 (localStorage: `pc_projects`)
+
+```json
+{
+  "sb": {
+    "docInfo": {
+      "projectName": "SAM ERP",
+      "unitTask": "품질관리",
+      "version": "D1.0"
+    },
+    "menuTree": [
+      { "name": "대시보드", "children": [] },
+      { "name": "품질관리", "children": [
+        { "name": "제품검사관리" }
+      ]}
+    ],
+    "pages": [ /* Page[] */ ],
+    "currentPageIndex": 0
+  }
+}
+```
+
+### 3.2 페이지 (Page)
+
+```json
+{
+  "id": "sp_1709856000000_a1b2",
+  "path": "품질관리 > 제품검사관리",
+  "screenName": "제품검사 목록",
+  "screenId": "QM-001",
+  "blocks": [ /* Block[] */ ],
+  "descriptions": [
+    { "text": "검색 조건 입력 후 조회 버튼 클릭" }
+  ]
+}
+```
+
+### 3.3 블록 (Block)
+
+```json
+{
+  "id": "blk_1709856000000_x3y",
+  "type": "text",
+  "content": "텍스트 내용",
+  "x": 16,
+  "y": 100,
+  "w": 340,
+  "h": 50,
+  "style": {
+    "fontColor": "#ef4444",
+    "bgColor": "#fef2f2",
+    "fontSize": 14,
+    "bold": true,
+    "italic": false,
+    "textAlign": "center",
+    "zIndex": 11
+  }
+}
+```
+
+### 3.4 블록 유형
+
+| type | 설명 | 기본 크기 (W x H) | 고유 속성 |
+|------|------|-------------------|----------|
+| `heading` | 제목 (H1) | 400 x 40 | `content` |
+| `heading2` | 소제목 (H2) | 350 x 36 | `content` |
+| `text` | 텍스트 | 340 x 50 | `content` |
+| `divider` | 구분선 | 400 x 20 | — |
+| `callout` | 콜아웃 박스 | 240 x 60 | `content`, `icon` |
+| `code` | 코드 블록 | 400 x 80 | `content` |
+| `table` | 테이블 | 500 x 140 | `cols[]`, `rows[][]` |
+| `button` | 버튼 모형 | 240 x 50 | `content`, `color` |
+| `input` | 입력필드 모형 | 240 x 70 | `label`, `placeholder` |
+| `select` | 셀렉트 모형 | 240 x 70 | `label`, `placeholder` |
+| `card` | 카드 모형 | 300 x 90 | `title`, `content` |
+| `badges` | 뱃지 모음 | 350 x 50 | `items[{text, color, textColor}]` |
+| `todo` | 체크리스트 | 300 x 80 | `items[{text, checked}]` |
+| `image` | 이미지 | 400 x 200 | `src` (base64 Data URL) |
+| `marker` | 번호 마커 | 32 x 32 | `content` (01, 02, ...) |
+
+### 3.5 블록 스타일 (style 객체)
+
+| 속성 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `fontColor` | string | — | 글자색 (CSS color) |
+| `bgColor` | string | — | 배경색 (CSS color) |
+| `fontSize` | number | 13 | 글자 크기 (px) |
+| `bold` | boolean | false | 굵게 |
+| `italic` | boolean | false | 기울임 |
+| `textAlign` | string | `'left'` | 정렬 (`left`, `center`, `right`) |
+| `zIndex` | number | 10 | 레이어 순서 (높을수록 앞) |
+
+---
+
+## 4. 기능 상세
+
+### 4.1 블록 조작
+
+| 기능 | 조작 방법 |
+|------|----------|
+| 블록 추가 | 상단 블록 툴바에서 유형 클릭 |
+| 블록 선택 | 클릭 (단일), 올가미 드래그 (다중) |
+| 블록 이동 | 드래그 앤 드롭 (단일/다중) |
+| 블록 리사이즈 | 선택 후 우측/하단/우하단 핸들 드래그 |
+| 블록 편집 | 더블클릭 → contenteditable 활성화 |
+| 블록 복제 | 우상단 ⧉ 버튼 또는 Ctrl+C → Ctrl+V |
+| 블록 삭제 | 우상단 × 버튼 또는 Delete 키 |
+| 블록 잘라내기 | Ctrl+X |
+
+### 4.2 다중 선택 (올가미)
+
+| 단계 | 동작 |
+|------|------|
+| 1 | 빈 캔버스 영역에서 마우스 드래그 시작 |
+| 2 | 보라색 점선 사각형(lasso rect) 표시 |
+| 3 | 마우스 놓으면 사각형과 겹치는 블록 전부 선택 (주황 테두리) |
+| 4 | 선택된 블록 그룹을 드래그/복사/삭제 가능 |
+| Ctrl+A | 전체 블록 선택 |
+
+### 4.3 서식 설정
+
+#### 플로팅 서식 툴바 (블록 선택 시 위에 나타남)
+
+```
+[ B ] [ I ] | [ ☰ ] [ ≡ ] [ ≡ ] | [ A▾ ] [ □▾ ] | [ 13px▾ ] | [ ▲ ] [ ▼ ] | [ ↺ ]
+ 굵게  기울임   좌   가운데  우    글자색   배경색    크기      앞으로 뒤로   초기화
+```
+
+- 글자색 / 배경색: 클릭 시 12색 팔레트 드롭다운
+- 글자 크기: 10px ~ 24px 선택 드롭다운
+- 앞으로/뒤로: z-index 증감 (레이어 순서)
+
+#### 우클릭 컨텍스트 메뉴
+
+블록에서 마우스 오른쪽 버튼 클릭 시 표시:
+
+| 메뉴 항목 | 단축키 | 설명 |
+|----------|--------|------|
+| 복제 | Ctrl+C → V | 블록 복사 + 즉시 붙여넣기 |
+| 잘라내기 | Ctrl+X | 클립보드에 복사 후 삭제 |
+| 삭제 | Del | 블록 삭제 |
+| 글자색 ▸ | — | 12색 팔레트 서브메뉴 |
+| 배경색 ▸ | — | 12색 팔레트 서브메뉴 |
+| 왼쪽/가운데/오른쪽 정렬 | — | 텍스트 정렬 |
+| 앞으로 가져오기 | — | z-index +1 |
+| 뒤로 보내기 | — | z-index -1 |
+| 굵게 / 기울임 | — | 토글 |
+| 서식 초기화 | — | 모든 style 속성 제거 |
+
+### 4.4 키보드 단축키
+
+| 단축키 | 기능 |
+|--------|------|
+| `Ctrl+Z` | 실행 취소 (Undo) |
+| `Ctrl+Y` | 다시 실행 (Redo) |
+| `Ctrl+C` | 블록 복사 (단일/다중) |
+| `Ctrl+V` | 블록 붙여넣기 |
+| `Ctrl+X` | 블록 잘라내기 |
+| `Ctrl+A` | 전체 블록 선택 |
+| `Ctrl+S` | 프로젝트 저장 |
+| `Delete` / `Backspace` | 선택된 블록 삭제 |
+
+### 4.5 번호 마커 (Description 연동)
+
+| 입력 방식 | 설명 |
+|----------|------|
+| 블록 툴바 입력 | 번호 입력 후 "번호" 버튼 클릭 → 캔버스에 마커 추가 (자동 증가) |
+| Description 드래그 | Description 번호 뱃지를 캔버스로 드래그 앤 드롭 |
+
+### 4.6 페이지 관리
+
+| 기능 | 설명 |
+|------|------|
+| 페이지 추가 | + 버튼으로 새 페이지 생성 |
+| 페이지 복사 | 현재 페이지 통째로 복제 (블록 ID 재생성) |
+| 페이지 삭제 | 마지막 1페이지는 삭제 불가 |
+| 페이지 이동 | ◀ ▶ 버튼으로 전환 |
+
+### 4.7 Undo/Redo
+
+- 최대 50단계 히스토리 유지
+- 블록 추가/삭제/이동/리사이즈/서식 변경 모두 스냅샷 저장
+- 히스토리 분기: 중간 상태에서 새 작업 시 이후 히스토리 폐기
+
+### 4.8 템플릿 시스템
+
+| 유형 | 설명 |
+|------|------|
+| 프리셋 | 검색+목록, 상세 폼, CRUD, 대시보드 카드 등 기본 레이아웃 |
+| 커스텀 | 현재 페이지 블록을 템플릿으로 저장 (localStorage: `sb_custom_templates`) |
+
+---
+
+## 5. 내보내기 & 인쇄
+
+### 5.1 HTML 내보내기 (`sbExportHtml`)
+
+- 모든 페이지를 단일 HTML 파일로 출력
+- 블록은 **좌표 기반 absolute positioning**으로 배치 (WYSIWYG)
+- 블록 스타일(글자색, 배경색, 크기 등) 반영
+- `@media print` CSS 포함 → 브라우저 인쇄 지원
+
+### 5.2 인쇄 미리보기 (`sbPrintPreview`)
+
+- 새 창에서 인쇄 미리보기 HTML 생성
+- A4 Landscape, 8mm 마진
+- `window.print()` 자동 호출
+- 페이지별 `page-break-after: always`
+
+---
+
+## 6. CSS 스타일 상속 구조
+
+블록 컨테이너(`.sb-block`)에 인라인 스타일로 서식을 적용하고, 자식 요소에 `inherit` 규칙을 적용하여 상속한다.
+
+```css
+/* 부모에 color가 설정된 경우 자식에게 상속 */
+.sb-block[style*="color"] .sb-blk-text,
+.sb-block[style*="color"] .sb-blk-heading { color: inherit; }
+
+/* font-size, font-weight, font-style, text-align 동일 패턴 */
+```
+
+> **배경**: 자식 요소(`.sb-blk-text`, `.sb-blk-heading` 등)에 하드코딩된 `color: #334155` 등이 있어, 단순히 부모에 `color`를 설정하면 CSS 우선순위에 의해 무시된다. `[style*="color"]` attribute selector로 부모에 인라인 스타일이 존재할 때만 `inherit`를 활성화한다.
+
+---
+
+## 7. 기술적 주의사항
+
+### 7.1 저장 용량
+
+- localStorage 제한: 브라우저별 약 5~10MB
+- 이미지를 base64 Data URL로 저장하므로 다수의 이미지 사용 시 용량 초과 가능
+- 향후 서버 저장(DB) 전환 검토 필요
+
+### 7.2 Alpine.js 반응성
+
+- 블록 데이터는 Alpine.js 반응형 객체로 관리
+- `style` 속성은 `sbEnsureStyle(blk)`로 객체 초기화 후 속성 설정
+- 배열 조작(`splice`, `push`)은 Alpine.js가 자동 감지
+
+### 7.3 좌표 시스템
+
+| 항목 | 단위 | 기준 |
+|------|------|------|
+| `blk.x`, `blk.y` | px | 캔버스 좌상단 (0,0) |
+| `blk.w`, `blk.h` | px | 블록 폭/높이 |
+| 드래그 계산 | clientX/Y + scroll offset | 뷰포트 → 캔버스 좌표 변환 |
+| 올가미 | 캔버스 내부 좌표 | scroll 보정 포함 |
+
+---
+
+## 8. 파일 구조
+
+```
+mng/
+├── app/Http/Controllers/
+│   └── RdController.php                     ← planningDesign() 메서드 (L308)
+└── resources/views/rd/planning-design/
+    └── index.blade.php                      ← 전체 CSS + HTML + Alpine.js (~4,300줄)
+```
+
+> **단일 파일 구조**: 이 기능은 서버 API가 없으며, 모든 CSS/HTML/JS가 `index.blade.php` 하나에 포함된다. Alpine.js `x-data` 객체 내에 모든 상태와 메서드가 정의되어 있다.
+
+---
+
+## 9. 향후 확장 가능성
+
+| 기능 | 설명 | 우선순위 |
+|------|------|---------|
+| 스냅/그리드 정렬 | 블록 간 자석 가이드라인 | 높음 |
+| 그룹핑 | 여러 블록을 하나의 그룹으로 묶기 | 중간 |
+| 레이어 패널 | z-index 순서를 시각적으로 관리 | 중간 |
+| DB 저장 | localStorage → DB 전환 (협업 지원) | 높음 |
+| PDF 내보내기 | 직접 PDF 생성 | 낮음 |
+| 리치 텍스트 | 블록 내 부분 텍스트 서식 (인라인 B/I/색상) | 중간 |
+| 스냅샷/버전 관리 | 명시적 버전 저장 및 비교 | 낮음 |
+
+---
+
+## 10. 관련 문서
+
+- [R&D 메뉴 개요](README.md) — R&D 전체 메뉴 구조
+- [MNG 구조](../../system/mng-structure.md) — MNG 관리자 패널 전체 구조
+
+---
+
+**최종 업데이트**: 2026-03-08