# INVYONE — 대시보드 + 템플릿 배치 mockup

> SPEC v0.2 의 시각적 진실의 원천. M1 React 구현 시 이 mockup 의 동작/구조/토큰을 그대로 따라간다.

## 빠른 시작

`index.html` 더블클릭만 하면 됨. 빌드/번들러/로컬 서버 다 불필요. `file://` 로 모든 동작 가능.

```bash
xdg-open index.html        # Linux
open index.html            # Mac
start index.html           # Windows
```

## 폴더 구조

```
2026-04-08-invyone-mockup/
├ index.html          # 진입점 (HTML 본체 + link/script 태그만)
├ README.md           # 이 파일
├ css/
│  ├ 01-tokens.css    # v5 토큰 (--primary, --glass, --glow-*) + cosmic 배경
│  ├ 02-shell.css     # 헤더 / 탭 / 사이드바 (사용자/관리자 + collapsed)
│  ├ 03-canvas.css    # 캔버스 / 카드 / 드래그 / 리사이즈 / 미니뷰 / 접기
│  ├ 04-settings.css  # 카드 설정 패널 + 토글 스위치
│  ├ 05-widgets.css   # 인사 테이블 + KPI/차트/list/캘린더 dummy 위젯
│  └ 06-modals.css    # 라이브러리 모달 + theme-fade + preview-tag + mode-fade
└ js/
   ├ 01-shell.js      # stars/particles + 테마/모드/사이드바클릭/탭/아바타/lib모달
   ├ 02-canvas.js     # toast / 편집모드 / clamp / 드래그 / 리사이즈 / 접기 / 삭제
   ├ 03-settings.js   # 설정 패널 토글 / 탭 전환 / 컬럼 ON·OFF
   ├ 04-templates.js  # templateRenderers + buildCardEl + addCardFromLib + filterHr
   ├ 05-state.js      # 대시보드 state / snapshot / render / 사이드바 동적 / 저장/복원
   └ 99-init.js       # init IIFE
```

## 의존 순서 (중요)

### CSS
01 → 02 → 03 → 04 → 05 → 06. 토큰(`--primary`)이 먼저 정의되고 셀렉터들이 그걸 사용. 순서 바꾸면 색이 깨짐.

### JS
01 → 02 → 03 → 04 → 05 → 99. 모든 함수는 전역. 호출 시점이 init 이후라 정의 순서만 맞으면 됨.
- `02-canvas.js` 의 `toast`, `applyClamp`, `makeDraggable`, `makeResizable` 가 다른 곳에서 사용
- `04-templates.js` 의 `buildCardEl`, `templateRenderers` 가 `05-state.js` 의 `renderCanvas` 에서 사용
- `99-init.js` 가 마지막에 모든 걸 부트

## 새 기능 / 위젯 추가하는 법

### 케이스 1 — 새 위젯 (라이브러리에 카드 추가)
1. `js/04-templates.js` 의 `templateRenderers` 객체에 새 항목:
   ```js
   'my-widget': {
     name: '내 위젯', icon: '🎯', badge: '도메인 · 태그',
     w: 320, h: 240,
     body: () => `<div class="w-mywidget">...HTML...</div>`
   }
   ```
2. `css/05-widgets.css` 에 `.w-mywidget` 스타일 추가 (v5 토큰만 사용)
3. `index.html` 의 라이브러리 모달에 카드 추가 + `onclick="addCardFromLib('my-widget')"`

### 케이스 2 — 새 화면 (예: 제어관리)
1. `js/06-control-mgmt.js` 새 파일 — 제어관리 관련 함수들
2. `css/07-control-mgmt.css` 새 파일 — 제어관리 스타일
3. `index.html` 에 `<link>` 와 `<script>` 1줄씩 추가 (99-init.js 이전에)
4. 사이드바 메뉴 / 라우팅 추가는 기존 `js/03-state.js` 또는 `js/01-shell.js` 에서

### 케이스 3 — 새 토큰 / 디자인 변경
- `css/01-tokens.css` 만 수정. 다른 파일 안 건드림. v5 톤 유지

## 컨벤션

- **모든 색상은 v5 토큰** (`var(--primary)`, `var(--glass)`, `var(--glow-sm)` 등). 즉흥 hex 금지
- **클래스 prefix**: 셸은 `.hdr/.tabs/.side`, 카드는 `.tpl-*`, 위젯은 `.w-*`, 설정 패널은 `.tps-*`, 인사 위젯은 `.hr-*`, 라이브러리는 `.lib-*`
- **폰트**: 컴팩트 (0.5 ~ 0.85rem). v5 스케일
- **iframe srcdoc 금지** — 모든 위젯은 React 컴포넌트 가정의 HTML 조각
- **snap 없음, 자유 배치** — 드래그/리사이즈는 픽셀 단위, 단 캔버스 경계 안

## 동작 체크리스트

- [ ] **테마 토글** (좌상단 Light/Dark pill)
- [ ] **사용자 ↔ 개발자 모드** (헤더의 톱니 버튼) — 사이드바/탭 swap, 보라 → 시안 액센트
- [ ] **사이드바 동적 대시보드 목록** — 인사/영업/운영 시드 3개, hover 시 이름변경/삭제 액션
- [ ] **+ 새 대시보드** — prompt 입력 → 빈 캔버스 생성 → 자동 활성
- [ ] **사이드바 접기** (60px) → 아이콘만, hover tooltip
- [ ] **편집 모드** (우상단 편집 버튼) — 격자 강조, 카드 점선 보더
- [ ] **드래그** — 카드 헤더 잡고 끌기. snap 없음, 캔버스 경계 안
- [ ] **리사이즈** — 우하단 ↘ 핸들. 캔버스 경계 안
- [ ] **카드 접기** (▼ 버튼) — 미니 KPI 4개로 축소 (340x200), 다시 누르면 원래 사이즈
- [ ] **카드 설정 패널** (⚙ 버튼) — 4탭 (컬럼표시/검색·필터/기타옵션/카드 디자인)
- [ ] **컬럼 토글** (설정 패널 → 컬럼표시 탭) — 사번/부서/직급/입사일/상태/동작 ON·OFF, 진짜 테이블 컬럼 사라짐
- [ ] **카드 삭제** (X 버튼) — 애니메이션 후 제거
- [ ] **+ 템플릿 추가** (우상단) → 라이브러리 모달 → 6종 위젯 클릭 → 캔버스 random 위치에 추가
- [ ] **인사정보 검색 필터** — 카드 안 검색창 + 부서/상태 select
- [ ] **저장 / 초기화** — localStorage 에 모든 대시보드 상태 보존, 새로고침 시 자동 복원

## 산더미 작업 (TODO)

이 mockup 에 추가될 화면들 — SPEC v0.2 의 후속 마일스톤 시각화:

- [ ] **제어관리** 화면 (M2) — 카드 간 이벤트/조건/연결 정의 UX
- [ ] **다른 위젯 풀 사이즈** — 영업/재고/생산 카드의 풀 버전 (현재는 작은 위젯만)
- [ ] **사용자/권한 관리** 화면 (M2)
- [ ] **화이트라벨링 옵션 패널** (M3) — 네비위치/테마컬러/폰트
- [ ] **AI 어시스턴트** 모드 (M5) — 자연어로 템플릿 추천/배치
- [ ] 카드 디자인 탭의 색상 prefab 이 진짜 카드 액센트 변경
- [ ] 다른 위젯 (KPI/차트/list/캘린더) 에도 미니 본문 + 설정 패널 일관 적용
- [ ] 카드의 전체화면 모드

## React 이식 매핑 (M1)

mockup → React 컴포넌트 매핑 가이드:

| mockup | React |
|---|---|
| `index.html` 의 .shell | `frontend/components/layout/AppLayout.tsx` (기존) |
| `index.html` 의 .canvas + 카드들 | `frontend/components/dashboard/DashboardCanvas.tsx` |
| `js/04-templates.js` templateRenderers | `frontend/lib/templates/registry.ts` + `frontend/components/templates/*.tsx` |
| 인사정보 풀 카드 (index.html 안의 `#card-hr-main` 통째) | `frontend/components/templates/HrEmployeeList.tsx` |
| `.tpl-mini-body` 미니 KPI | `frontend/components/templates/HrEmployeeListMini.tsx` |
| `.tpl-settings` 설정 패널 | `frontend/components/templates/HrEmployeeListSettings.tsx` |
| `js/02-canvas.js` 의 drag/resize/clamp | `frontend/hooks/useCardDrag.ts` + `useCardResize.ts` |
| `js/05-state.js` 의 대시보드 state | `frontend/store/dashboardStore.ts` (Zustand 또는 Context) |
| `js/06-modals.css` 의 라이브러리 모달 | `frontend/components/dashboard/TemplateLibraryModal.tsx` |
| 인사 데이터 fetch | `frontend/lib/api/hrEmployee.ts` + `backend-spring/.../HrEmployeeController.java` |

## 폐기 정책

이 mockup 은 M1 React 구현이 끝나면 박제됨. 더 이상 수정 X. 단 시각적 진실의 원천으로 git 에 보존.

기존 단일 파일 `notes/gbpark/2026-04-08-invyone-mockup-dashboard.html` 은 폴더 분할 후 백업 의미로 남김. 새 작업은 이 폴더에서.
