diff --git a/sam/docs/INDEX.md b/sam/docs/INDEX.md index 8da0fce..ed0ef4b 100644 --- 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) | 기획디자인 스토리보드 에디터 기술 명세 | --- diff --git a/sam/docs/features/rd/README.md b/sam/docs/features/rd/README.md new file mode 100644 index 0000000..d3cd985 --- /dev/null +++ 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 diff --git a/sam/docs/features/rd/planning-design.md b/sam/docs/features/rd/planning-design.md new file mode 100644 index 0000000..b69a9f1 --- /dev/null +++ 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