SamProject/sam-docs
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: [structure] sam/ 하위 문서를 docs 루트로 재배치

Browse Source 
- sam/docs/ 하위 62개 신규 파일을 루트로 이동 (contracts, features, guides, plans 등)
- sam/docs/ 하위 52개 변경 파일을 루트에 덮어쓰기 (brochure, rules 등)
- sam/ 폴더 전체 삭제 (docker, coocon 포함)
This commit is contained in:
권혁성
2026-03-09 22:33:19 +09:00
parent bfcd6178ea
commit cc38b00c11
223 changed files with 178 additions and 32907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

876
sam/docs/CLAUDE.md
View File

@@ -1,876 +0,0 @@
# Claude Code 전역 설정
> 이 파일은 모든 프로젝트에 적용되는 전역 규칙입니다.
## 메모리
### sam설명
SAM 프로젝트의 기술적 개요 문서입니다. 이 문서를 참조하면 SAM 프로젝트가 무엇인지 이해할 수 있습니다.
**파일 경로**: `/home/aweso/sam/docs/SAM_PROJECT_OVERVIEW_FOR_AI.md`
**핵심 요약**:
- **회사**: 주일/경동 (블라인드/스크린 제조업체)
- **프로젝트**: SAM (Smart Automation Management) - 차세대 ERP/MES 통합 시스템
- **기술 스택**: Laravel 12 + HTMX + Tailwind CSS + MySQL 8.0 (PHP 8.4)
- **아키텍처**: Multi-tenant (tenant_id 기반 데이터 격리)
- **레거시**: 5130.co.kr (PHP 기반) → SAM으로 마이그레이션 중
**사용자가 'sam설명'이라고 말하면**:
1. 위 경로의 `SAM_PROJECT_OVERVIEW_FOR_AI.md` 파일을 읽어서 전체 내용을 파악하세요
2. SAM 프로젝트의 비즈니스 도메인, 기술 스택, 현재 작업 현황을 이해한 상태로 작업하세요
---
## Git 커밋 규칙 (최우선 필수 규칙)
> **경고: 이 규칙은 절대 누락되어서는 안 됩니다!**
> **기준 문서**: `sam/docs/standards/git-conventions.md`
### 필수 수행 절차
**모든 코드 작업 완료 후 반드시 다음을 수행:**
1. 변경된 파일이 있는 Git 저장소로 이동
2. `git status`로 변경사항 확인
3. `git add <파일들>` 로 스테이징
4. `git commit -m "type: [scope] 작업내용"` 로 커밋
### 커밋 메시지 형식 (필수)
```
type: [scope] 작업내용
- 세부항목 (생략가능)
- 세부항목 2
Issue: URL (생략가능)
```
**예시:**
```bash
feat: [calendar] 달력 기능 개선
- 클릭시 오류 기능 개선
- 색상 변경
```
```bash
fix: [auth] 로그인 시 세션 만료 오류 수정
```
### Commit Types
| Type | 설명 | 예시 |
|------|------|------|
| `feat` | 새로운 기능 추가 | `feat: [file] 파일 업로드 기능 추가` |
| `fix` | 버그 수정 | `fix: [auth] 세션 만료 오류 수정` |
| `chore` | 설정, 빌드 등 변경 | `chore: composer 패키지 업데이트` |
| `refactor` | 프로덕션 코드 리팩토링 | `refactor: [user] 서비스 메서드 분리` |
| `style` | 포맷/코딩 스타일 수정 | `style: Pint 포맷팅 적용` |
| `test` | 테스트 추가/수정 | `test: Product API 테스트 추가` |
| `docs` | 문서 변경 | `docs: API 문서 업데이트` |
### Claude 서명 제외 (필수)
```
❌ Co-Authored-By: Claude <noreply@anthropic.com> — 포함 금지
❌ 🤖 Generated with Claude Code — 포함 금지
```
- Git hooks로 자동 제거됨
- 간결하고 명확한 한글 커밋 메시지만 유지
### 푸시 정책
- **사용자가 수동으로 푸시 진행**
- 자동 푸시 하지 않음
- 커밋 후 푸시 여부를 묻지 않음
### Claude Code 설정 파일도 커밋 대상
다음 파일들이 변경되면 반드시 커밋:
| 파일/폴더 | 설명 | 커밋 예시 |
|-----------|------|----------|
| `CLAUDE.md` | 프로젝트 설정 | `docs: CLAUDE.md 규칙 업데이트` |
| `claudedocs/` | Claude 관련 문서 | `docs: 기능 분석 문서 추가` |
| `.claude/settings.json` | Claude 설정 | `chore: Claude 설정 변경` |
| `agents/`, `skills/` | 커스텀 에이전트/스킬 | `feat: [claude] 새 스킬 추가` |
### 커밋 전 체크리스트
- [ ] `./vendor/bin/pint` 실행 (코드 포맷팅, 해당 시)
- [ ] `git diff`로 변경사항 검토
- [ ] 불필요한 파일 제외 (.env, node_modules 등)
- [ ] 변경된 파일이 있는 저장소에서 git add → git commit
- [ ] CLAUDE.md, claudedocs/, agents/, skills/ 변경 확인 → git commit
- [ ] 커밋 메시지: `type: [scope] 한글 작업내용` 형식 준수
- [ ] Co-Authored-By 서명 미포함 확인
---
## 주요 프로젝트 경로
| 경로 | 설명 | Git 저장소 |
|------|------|-----------|
| `/home/aweso/sam/mng` | 관리자 웹 (Laravel) | 독립 저장소 |
| `/home/aweso/sam/api` | API 서버 (Laravel) | 독립 저장소 |
| `/home/aweso/sam/react` | 프론트엔드 (Next.js) | 독립 저장소 |
**각 폴더는 독립적인 Git 저장소입니다. 해당 폴더에서 git 명령을 실행해야 합니다.**
> **서버 경로 참고**:
> - 개발/운영 서버 모두 `/home/webservice/` 하위에 동일한 구조로 배치
> - 서버: `/home/webservice/api`, `/home/webservice/mng`, `/home/webservice/react`, `/home/webservice/sales`
---
## 서버 직접 접근 금지 (최우선 필수 규칙)
> **경고: 운영/개발 서버에 SSH로 직접 접속하여 파일을 수정하거나 명령을 실행하지 마세요!**
> **2026-02-21 사고**: Claude가 서버에 SSH로 직접 접속하여 설정을 변경한 결과 502 Bad Gateway 발생. 개발팀장이 복구함.
### 핵심 원칙
서버는 **개발팀장이 관리**한다. Claude는 서버에 절대 직접 접근하지 않는다.
### 금지 사항
```
❌ ssh pro@114.203.209.83 ... 로 서버 접속 금지
❌ ssh hskwon@114.203.209.83 ... 로 서버 접속 금지
❌ 서버에서 파일 수정, 프로세스 종료/시작, 설정 변경 금지
❌ 서버에서 npm run build, npm start, node server.js 등 실행 금지
❌ 서버에서 git pull, composer install, php artisan 등 실행 금지
❌ scp, rsync로 서버에 파일 직접 전송 금지
```
### 허용 사항
```
✅ 로컬에서 코드 작성 및 수정
✅ 로컬에서 git add → git commit
✅ 사용자에게 git push 안내 (사용자가 수동으로 실행)
✅ 사용자에게 서버 배포 절차 안내 (사용자가 수동으로 실행)
```
### 서버 접속 정보
| 서버 | 호스트 | 계정 | 역할 |
|------|--------|------|------|
| 개발 서버 | `114.203.209.83` | `pro`, `hskwon` | 개발/스테이징 + Jenkins CI/CD + Gitea |
| 운영 서버 | (신규, 미확정) | 별도 계정 | 정식 서비스 |
> **참고**: Jenkins(`114.203.209.83:8080`)와 Gitea(`114.203.209.83:3000`)는 개발 서버에서 운영한다.
### 배포 흐름 (Jenkins CI/CD)
```
Claude 역할 Jenkins (자동) 운영 서버
┌───────────────────┐ ┌──────────────────┐ ┌──────────────┐
│ 코드 작성/수정 │ │ │ │ │
│ git add / commit │ │ │ │ │
│ │─push──→ │ Gitea Webhook │ │ │
│ │(사용자) │ → Jenkins 빌드 │ │ │
│ │ │ → Lint/Test │ │ │
│ │ │ → SSH Deploy ────│──→ │ git pull │
│ │ │ │ │ composer │
│ │ │ │ │ migrate │
└───────────────────┘ └──────────────────┘ └──────────────┘
```
> **브랜치 전략**: `develop` → 개발 서버 (자동 배포), `main`/`master` → 운영 서버 (PR 머지 + 팀장 승인)
### 서버 작업이 필요한 경우
사용자에게 명령어를 안내만 한다:
```
서버에서 다음 명령을 실행해주세요:
cd /home/webservice/api && git pull && composer install && php artisan migrate
```
### 체크리스트 (모든 작업 시)
- [ ] SSH 명령 사용하지 않음
- [ ] 서버 파일 직접 수정하지 않음
- [ ] 배포가 필요하면 사용자에게 안내만 제공
- [ ] git push까지만 Claude 역할
---
## React 빌드/배포 정책 (필수 규칙)
> **경고: React(Next.js) 빌드를 운영 서버에서 직접 실행하지 않는다!**
### 배경
개발 서버(2코어, 3.8GB RAM + Swap 4GB)에서 Jenkins가 React 빌드를 수행한다.
Jenkins 빌드 실패 시 로컬(WSL)에서 빌드 후 결과물을 서버에 배포한다(fallback).
### 금지 사항
```
❌ 운영 서버에서 npm run build 실행 금지
❌ 서버 SSH 접속 후 빌드 명령 실행 금지
❌ Claude가 직접 npm run build 실행 금지 (로컬 포함)
```
### 빌드/배포 방법 (Jenkins 자동화)
```
Claude 역할 Jenkins (자동) 운영 서버
┌─────────────────┐ ┌──────────────────┐ ┌──────────────┐
│ 코드 작성/수정 │ │ Checkout │ │ │
│ git commit │─push──→ │ Install + Lint │ │ │
│ │(사용자) │ Build (Next.js) │ │ │
│ │ │ Package (tar.gz) │──scp→ │ 압축 해제 │
│ │ │ │ │ node 재시작 │
└─────────────────┘ └──────────────────┘ └──────────────┘
```
> **Fallback**: Jenkins 빌드 실패(OOM) 시 로컬에서 `react/deploy.sh`로 수동 배포
### 빌드가 필요한 상황
사용자에게 다음과 같이 안내한다:
```
React 코드가 변경되었습니다. git push 후 Jenkins가 자동 배포합니다.
(Jenkins 실패 시 로컬에서 deploy.sh로 수동 배포해주세요.)
```
---
## 데이터베이스 아키텍처 (필수 규칙)
> **경고: 이 규칙을 반드시 준수하세요!**
### 핵심 원칙
**모든 데이터베이스 관련 파일은 API 프로젝트에서만 관리합니다.**
| 항목 | API (`/home/aweso/sam/api`) | MNG (`/home/aweso/sam/mng`) |
|------|----------------------------|----------------------------|
| 마이그레이션 | ✅ 여기에 생성 | ❌ 생성 금지 |
| 시더 | ✅ 여기에 생성 | ⚠️ MNG 전용만 허용 |
| 팩토리 | ✅ 여기에 생성 | ❌ 생성 금지 |
### 금지 사항
```
❌ /home/aweso/sam/mng/database/migrations/ 에 파일 생성 금지
❌ MNG에서 테이블 생성/수정 마이그레이션 작성 금지
```
### 허용 사항
```
✅ /home/aweso/sam/api/database/migrations/ 에 모든 마이그레이션 생성
✅ MNG에서는 MngMenuSeeder 같은 MNG 전용 시더만 허용
```
### 마이그레이션 실행
```bash
# 로컬: 마이그레이션은 반드시 API 컨테이너에서 실행
docker exec sam-api-1 php artisan migrate
# 개발 서버: Docker 없음, 직접 실행
cd /home/webservice/api && php artisan migrate
# 운영 서버: --force 플래그 필수 (production 환경)
cd /home/webservice/api && php artisan migrate --force
# MNG에서 마이그레이션 실행 금지 (로컬/서버 모두)
```
### DB 환경 분리
| 환경 | DB명 | 호스트 | 용도 |
|------|------|--------|------|
| 로컬 (Docker) | `samdb` | `sam-mysql-1:3306` | 개발/테스트 |
| 개발 서버 | `samdb` | `localhost` | 스테이징 |
| 운영 서버 | `sam_prod` | `localhost` | 정식 서비스 |
| 통계 DB | `sam_stat` | 동일 서버 | StatMonitorService 전용 |
> **참고**: `sam_stat`은 API/MNG 모두 `config/database.php`의 별도 connection으로 접속한다.
### 이유
- MNG: 프론트엔드/관리자 화면 담당 (컨트롤러, 뷰, 라우트)
- API: 백엔드/데이터베이스 담당 (마이그레이션, 모델 정의, API)
- 단일 DB를 두 프로젝트가 공유하므로 마이그레이션은 한 곳에서만 관리
---
## 메뉴 관리 규칙 (필수)
> **경고: 메뉴 시더(Seeder)를 절대 실행하지 마세요!**
### 배경
메뉴 시더 실행 시 부서별 권한 설정(permission_overrides)이 초기화되는 문제가 반복 발생합니다.
메뉴 ID가 변경되면 기존 부서-메뉴 권한 매핑이 깨지기 때문입니다.
### 금지 사항
```
❌ php artisan db:seed --class=MngMenuSeeder 실행 금지
❌ php artisan db:seed --class=*MenuSeeder 실행 금지
❌ 메뉴 시더 파일 생성 금지
❌ 메뉴 데이터를 일괄 삭제 후 재생성하는 방식 금지
```
### 메뉴 변경 시 올바른 절차
메뉴 추가/수정/삭제/이동이 필요할 때는 **사용자에게 수동 실행 안내**를 제공합니다:
1. **tinker 명령어를 안내** (사용자가 직접 실행)
2. **또는 SQL 쿼리를 안내** (사용자가 phpMyAdmin 등에서 직접 실행)
3. **절대 시더를 만들어 실행하지 않음**
### 안내 예시
```
메뉴를 추가하려면 아래 명령을 서버에서 실행해 주세요:
# 개발 서버
ssh pro@114.203.209.83 "cd /home/webservice/mng && php artisan tinker --execute=\"
App\\Models\\Commons\\Menu::create([
'tenant_id' => 1,
'parent_id' => <부모ID>,
'name' => '새 메뉴',
'url' => '/new-menu',
'icon' => 'icon-name',
'sort_order' => 1,
'is_active' => true,
]);
\""
# 운영 서버 (동일 경로, 서버 주소만 변경)
ssh <운영계정>@<운영서버IP> "cd /home/webservice/mng && php artisan tinker --execute=\"...동일...\""
```
### 체크리스트 (메뉴 변경 요청 시)
- [ ] 시더 파일 생성하지 않음
- [ ] 시더 실행하지 않음
- [ ] tinker 또는 SQL로 개별 레코드만 수정
- [ ] 변경 후 부서 권한 설정이 유지되는지 확인
---
## 실행 환경 (필수 인지)
> **중요: 로컬 / 개발 서버 / 운영 서버의 환경이 다릅니다!**
### 환경 비교 (3-Tier)
| 항목 | 로컬 (WSL) | 개발 서버 | 운영 서버 |
|------|-----------|----------|----------|
| **구성 방식** | Docker 컨테이너 | Bare-metal (네이티브) | Bare-metal (네이티브) |
| **PHP** | 컨테이너 내부 (8.4) | 직접 설치 (8.4) | 직접 설치 (8.4) |
| **MySQL** | 컨테이너 (sam-mysql-1) | 직접 설치 (8.0) | 직접 설치 (8.0) |
| **Nginx** | 컨테이너 (sam-nginx-1) | 직접 설치 | 직접 설치 |
| **명령 실행** | `docker exec` 필요 | 직접 실행 | 직접 실행 |
| **서버 IP** | localhost | `114.203.209.83` | (신규, 미확정) |
| **추가 서비스** | — | Jenkins, Gitea | — |
| **DB** | `samdb` | `samdb` | `sam_prod` |
> **배경**: 서버는 Docker가 무거워서 PHP, Nginx, MySQL 등을 네이티브로 설치하여 운영한다.
### 로컬 환경 (Docker)
PHP, Laravel, Node.js 등이 **Docker 컨테이너 안에** 설치되어 있다.
로컬 PC(WSL)에는 이런 도구들이 없으므로, 반드시 Docker 컨테이너를 통해 실행한다.
```
로컬 PC (WSL)
└── Docker
├── sam-mng-1 ← PHP + Laravel (MNG 앱)
├── sam-api-1 ← PHP + Laravel (API 앱)
├── sam-mysql-1 ← MySQL DB
└── sam-nginx-1 ← Nginx 웹서버
```
### 서버 환경 (Bare-metal — 개발/운영 동일 구조)
서버에는 Docker가 없다. PHP 8.4, Nginx, MySQL 8.0이 직접 설치되어 있다.
```
개발 서버 (114.203.209.83) 운영 서버 (신규)
├── Nginx ├── Nginx
├── PHP-FPM (3 pools) ├── PHP-FPM (3 pools)
│ ├── api.sock │ ├── api.sock
│ ├── mng.sock │ ├── mng.sock
│ └── sales.sock │ └── sales.sock
├── MySQL 8.0 (samdb) ├── MySQL 8.0 (sam_prod)
├── Supervisor ├── Supervisor
│ ├── sam-api-worker (x1) │ ├── sam-api-worker (x1)
│ ├── sam-mng-worker (x2) │ ├── sam-mng-worker (x2)
│ └── sam-api-scheduler │ └── sam-api-scheduler
├── Node.js (React SSR :3000) ├── Node.js (React SSR :3000)
├── Jenkins (:8080) │
├── Gitea (:3000) │
├── /home/webservice/api ├── /home/webservice/api
├── /home/webservice/mng ├── /home/webservice/mng
├── /home/webservice/react ├── /home/webservice/react
└── /home/webservice/sales └── /home/webservice/sales
```
### 도메인 매핑
| 서비스 | 로컬 (Docker) | 개발 서버 | 운영 서버 |
|--------|--------------|----------|----------|
| React (사용자) | `dev.sam.kr` | `dev.codebridge-x.com` | `codebridge-x.com` |
| API | `api.sam.kr` | `api.dev.codebridge-x.com` | `api.codebridge-x.com` |
| MNG (관리자) | `mng.sam.kr` | `admin.codebridge-x.com` | `mng.codebridge-x.com` |
| Sales | `sales.sam.kr` | `sales.dev.codebridge-x.com` | `sales.codebridge-x.com` |
| 5130 (레거시) | `5130.sam.kr` | — | — |
### 명령어 비교 (로컬 vs 개발 vs 운영)
| 작업 | 로컬 (Docker) | 개발/운영 서버 (네이티브) |
|------|--------------|-------------------------|
| artisan 실행 | `docker exec sam-api-1 php artisan <명령>` | `cd /home/webservice/api && php artisan <명령>` |
| composer 실행 | `docker exec sam-api-1 composer install` | `cd /home/webservice/api && composer install` |
| 마이그레이션 | `docker exec sam-api-1 php artisan migrate` | 개발: `php artisan migrate` / 운영: `php artisan migrate --force` |
| 캐시 클리어 | `docker exec sam-mng-1 php artisan cache:clear` | `cd /home/webservice/mng && php artisan cache:clear` |
| Queue 재시작 | — | `sudo supervisorctl restart sam-api-worker:*` |
### 로컬 Docker 명령어 패턴
```bash
# MNG 앱에서 artisan 명령 실행
docker exec sam-mng-1 php artisan <명령어>
# API 앱에서 artisan 명령 실행
docker exec sam-api-1 php artisan <명령어>
# 예시: 시더 실행
docker exec sam-mng-1 php artisan db:seed --class=MngMenuSeeder
# 예시: 마이그레이션 실행 (API에서만!)
docker exec sam-api-1 php artisan migrate
# 예시: 캐시 클리어
docker exec sam-mng-1 php artisan cache:clear
```
### 체크리스트 (명령 실행 시)
- [ ] **로컬**: `php artisan` → `docker exec sam-mng-1 php artisan` 또는 `sam-api-1` 사용
- [ ] **로컬**: `composer` → `docker exec sam-mng-1 composer` 또는 `sam-api-1` 사용
- [ ] **서버**: `php artisan`, `composer` 직접 실행 (Docker 없음)
- [ ] **운영 서버 마이그레이션**: `--force` 플래그 필수
- [ ] **마이그레이션은 반드시 API에서 실행** (로컬: `docker exec sam-api-1`, 서버: 직접)
---
## 공동 개발 워크플로우 (필수)
> **중요: 코드를 pull 받은 후 반드시 필요한 명령을 실행하세요!**
### 브랜치 전략
| 브랜치 | 배포 대상 | 트리거 | 승인 |
|--------|----------|--------|------|
| `feature/*` | — | — | — |
| `develop` | 개발 서버 (`dev.codebridge-x.com`) | Push 시 자동 배포 | 불필요 |
| `main`/`master` | 운영 서버 (`codebridge-x.com`) | PR 머지 시 Jenkins 배포 | 팀장 승인 필수 |
```
feature/* ──→ develop ──→ main/master
(push) (PR merge)
↓ ↓
개발 서버 운영 서버
(자동 배포) (Jenkins CI/CD)
```
### 로컬 환경 (Docker) 업데이트
```bash
# 1. 코드 받기 (WSL에서 실행)
cd /home/aweso/sam/api
git pull
cd /home/aweso/sam/mng
git pull
# 2. 의존성 업데이트 (composer.json 변경 시)
docker exec sam-api-1 composer install
docker exec sam-mng-1 composer install
# 3. DB 마이그레이션 (API에서만!)
docker exec sam-api-1 php artisan migrate
# 4. 캐시 클리어 (설정 변경 시)
docker exec sam-api-1 php artisan config:clear
docker exec sam-mng-1 php artisan config:clear
```
### 개발 서버 업데이트 (자동)
> `develop` 브랜치에 Push 시 Gitea Webhook → Jenkins가 자동으로 배포한다.
> 수동 배포가 필요한 경우:
```bash
# API 프로젝트
cd /home/webservice/api
git pull origin develop
composer install
php artisan migrate
php artisan config:clear
# MNG 프로젝트 (마이그레이션 없음)
cd /home/webservice/mng
git pull origin develop
composer install
php artisan config:clear
```
### 운영 서버 배포 (Jenkins 자동화)
> `main`/`master` 브랜치에 PR 머지 시 Jenkins가 자동으로 배포한다.
> 수동 배포는 **비상 절차**로만 사용한다.
```bash
# 비상 수동 배포 (Jenkins 장애 시에만)
# API 프로젝트
cd /home/webservice/api
git pull origin main
composer install --no-dev --optimize-autoloader
php artisan migrate --force
php artisan config:clear && php artisan cache:clear && php artisan route:cache && php artisan view:cache
sudo supervisorctl restart sam-api-worker:*
# MNG 프로젝트
cd /home/webservice/mng
git pull origin master
composer install --no-dev --optimize-autoloader
php artisan config:clear && php artisan cache:clear && php artisan view:cache
sudo supervisorctl restart sam-mng-worker:*
```
### 요약 표
| 작업 | 로컬 (Docker) | 개발 서버 | 운영 서버 |
|------|--------------|----------|----------|
| 배포 방식 | 수동 | Jenkins 자동 (develop push) | Jenkins 자동 (main/master PR) |
| git pull | WSL에서 직접 | Jenkins 자동 | Jenkins 자동 |
| composer install | `docker exec sam-api-1 composer install` | Jenkins 자동 | `--no-dev --optimize-autoloader` |
| migrate | `docker exec sam-api-1 php artisan migrate` | Jenkins 자동 | `--force` 플래그 포함 |
| config:clear | `docker exec sam-api-1 php artisan config:clear` | Jenkins 자동 | `route:cache` + `view:cache` 포함 |
### 체크리스트 (pull 후)
- [ ] API: `git pull` → `composer install` → `php artisan migrate` → `config:clear`
- [ ] MNG: `git pull` → `composer install` → `config:clear` (마이그레이션 없음)
- [ ] 운영 배포: `main`/`master`에 PR 머지 → Jenkins 자동 처리 (수동 금지)
---
## 사용 가능한 Agents
`~/.claude/agents/` 폴더에 있는 에이전트들:
### 코드 품질 & 개발
| Agent | 모델 | 설명 | 출처 |
|-------|------|------|------|
| `code-reviewer` | sonnet | 코드 리뷰 (품질/보안/유지보수성), 메모리 학습 지원 | 공식 문서 패턴 |
| `debugger` | sonnet | 에러/테스트 실패 근본 원인 분석 및 수정 | 공식 문서 패턴 |
| `test-runner` | haiku | 테스트 실행 및 결과 분석/요약 | 커뮤니티 인기 |
| `security-auditor` | sonnet | OWASP Top 10 기반 보안 취약점 감사 | 커뮤니티 인기 |
| `performance-optimizer` | sonnet | N+1 쿼리, 알고리즘, 캐싱 최적화 | 커뮤니티 인기 |
| `refactoring-agent` | sonnet | 코드 구조 개선, SOLID 원칙, DRY 위반 제거 | 커뮤니티 인기 |
| `laravel-expert` | sonnet | Laravel 전문가 (SAM 프로젝트 환경 인지) | 커스텀 |
### 워크플로우 & 문서
| Agent | 모델 | 설명 | 출처 |
|-------|------|------|------|
| `git-manager` | haiku | Git 브랜치/커밋/머지/PR 관리 | 커뮤니티 인기 |
| `doc-writer` | haiku | API 문서, README, 기술 가이드 작성 | 커뮤니티 인기 |
| `research-agent` | sonnet | 웹 리서치 및 자료 조사 | 기존 |
| `organizer-agent` | - | 프로젝트 구조화 및 정리 | 기존 |
| `proposal-agent` | - | 제안서 작성 | 기존 |
---
## 사용 가능한 Skills
`~/.claude/skills/` 폴더에 있는 스킬들 (슬래시 명령어로 사용):
### 문서/프레젠테이션
| Skill | 설명 |
|-------|------|
| `pptx-skill` | PowerPoint 생성 |
| `ppt-auto-generator` | 마크다운/텍스트에서 PPT 생성 |
| `pdf-template-skill` | PDF 템플릿 분석/생성 |
| `text-analyzer-skill` | 텍스트 분석 및 PDF 구조 매핑 |
| `proposal-skill` | 제안서 생성 |
| `storyboard-generator` | 스토리보드 생성 |
| `design-skill` | 프레젠테이션 HTML 디자인 |
### 코드 분석/시각화
| Skill | 설명 |
|-------|------|
| `code-flow-web-report` | 웹 앱 런타임 흐름 시각화 리포트 |
| `code-flow-web-doc-generator` | 소스 코드 호출/데이터 흐름 다이어그램 HTML 생성 |
| `codebase-analysis-web-report` | 코드베이스 아키텍처 인터랙티브 HTML 리포트 |
| `uml-generator` | UML 다이어그램 생성 |
### 코드 품질 (levnikolaevich/claude-code-skills)
| Skill | 설명 | 출처 |
|-------|------|------|
| `code-bug-finder` | 버그 자동 탐지 및 보고서 생성 | 기존 |
| `code-refactoring` | 리팩토링 권장사항/성능 분석/코드 패치 | 기존 |
| `code-commenter` | 소스 코드에 이해하기 쉬운 주석 추가 | 기존 |
| `async-await-keyword-fixer` | JS/TS 누락된 async/await 수정 | 기존 |
| `code-quality-checker` | DRY/KISS/YAGNI 위반 탐지 | levnikolaevich |
| `code-quality-auditor` | 코드 복잡도, 매직넘버 분석 | levnikolaevich |
| `code-principles-auditor` | DRY/KISS/YAGNI, TODO, DI 패턴 검사 | levnikolaevich |
| `dead-code-auditor` | 미사용 코드 탐지 | levnikolaevich |
| `build-auditor` | 컴파일러/타입 에러 검사 | levnikolaevich |
| `concurrency-auditor` | 레이스 컨디션 탐지 | levnikolaevich |
| `layer-boundary-auditor` | 레이어 위반, I/O 격리 검사 | levnikolaevich |
| `observability-auditor` | 로깅, 메트릭 적절성 검사 | levnikolaevich |
| `query-efficiency-auditor` | DB 쿼리 효율성 분석 | levnikolaevich |
| `dependencies-auditor` | 오래된 패키지, CVE 취약점 검사 | levnikolaevich |
| `regression-checker` | 기존 테스트 실행으로 사이드이펙트 탐지 | levnikolaevich |
| `story-quality-gate` | 코드리뷰 + 테스트 2단계 품질 검증 | levnikolaevich |
### 테스트/커버리지
| Skill | 설명 | 출처 |
|-------|------|------|
| `app-comprehensive-test-generator` | 테스트 시나리오 생성/실행, QA 리포트 | 기존 |
| `coverage-improvement-planner` | 테스트 커버리지 분석 및 개선 계획 | 기존 |
| `test-coverage-auditor` | 테스트 커버리지 측정/분석 | levnikolaevich |
| `test-isolation-auditor` | 테스트 독립성/격리 검사 | levnikolaevich |
| `webapp-testing` | Playwright 기반 웹 앱 UI 테스트 | anthropics 공식 |
### 보안 (Trail of Bits)
| Skill | 설명 | 출처 |
|-------|------|------|
| `security-auditor` | 시크릿 노출, Injection, XSS 탐지 | levnikolaevich |
| `static-analysis` | CodeQL/Semgrep/SARIF 정적 분석 (3개 하위 스킬) | Trail of Bits |
| `insecure-defaults` | 위험한 기본 설정, 하드코딩 자격증명 탐지 | Trail of Bits |
| `sharp-edges` | 에러 유발 API, 위험한 디자인 패턴 탐지 | Trail of Bits |
| `differential-review` | 보안 중심 코드 변경 리뷰 | Trail of Bits |
### 디버깅/로깅
| Skill | 설명 |
|-------|------|
| `system-debug-logger` | 에러/예외 자동 캡처 디버그 로깅 |
| `node-debug-logging-middleware` | Node.js Express/Koa 디버깅 로그 미들웨어 |
### 프론트엔드/UI
| Skill | 설명 | 출처 |
|-------|------|------|
| `frontend-design` | 프론트엔드 디자인 품질 향상 (AI slop 방지) | anthropics 공식 |
| `flutter-ux-hardening` | Flutter 앱 UI/UX 강화 | 기존 |
| `웹문서` | SAM 프로젝트 웹문서 디자인 표준 | 기존 |
### 유틸리티
| Skill | 설명 |
|-------|------|
| `duplicate-file-cleaner` | 중복 이미지/미디어 파일 정리 |
| `npm-release-manager` | NPM 패키지 배포 자동화 |
**사용 방법**: `/skill-name` 형식으로 호출 (예: `/code-quality-checker`)
---
## 문서 작성 규칙 (개발팀 협약 - 필수 준수)
> **경고: 개발자들이 `sam/docs`의 문서 작성 기법을 준용하기로 협약했습니다. 모든 문서 작성 시 반드시 따르세요!**
### 참조 경로
- **인덱스**: `/home/aweso/sam/docs/INDEX.md` (전체 문서 목록 및 폴더 구조)
- **작업 전 확인**: 작업 유형에 맞는 문서를 `INDEX.md`에서 찾아 먼저 읽고 시작
### 폴더 선택 기준 (의미 기반 분류)
| 폴더 | 질문 | 설명 |
|------|------|------|
| `plans/` | "무슨 작업을 할 것인가?" | 임시 개발 계획 (완료 후 삭제) |
| `standards/` | "어떻게 코드를 작성할 것인가?" | 코딩 컨벤션, 스타일 가이드 |
| `architecture/` | "왜 이렇게 설계하는가?" | 시스템 설계, 아키텍처 결정 |
| `rules/` | "무엇이 유효한 데이터인가?" | 비즈니스 규칙, 검증 규칙 |
| `specs/` | "무엇을 구현할 것인가?" | 기술 스펙, DB 스키마 |
| `guides/` | "어떻게 구현할 것인가?" | 단계별 구현 매뉴얼 |
| `features/` | 기능별 상세 | 기능 단위 심층 문서 |
| `changes/` | "무엇이 변경되었는가?" | 완료된 변경 이력 |
### 파일명 규칙
- **일반 문서**: `kebab-case.md` (소문자 + 하이픈) 예: `api-rules.md`, `item-policy.md`
- **변경 이력**: `YYYYMMDD_short_description.md` 예: `20260109_handover_report_api.md`
- **폴더 인덱스**: `README.md` (대문자)
- **크기 목표**: 10KB 이하
- **새 문서 작성 시**: 반드시 `docs/INDEX.md`에 추가
### 문서 구조 템플릿
#### 정책/규칙 문서 (`rules/`, `standards/`)
```markdown
# 제목
> **작성일**: YYYY-MM-DD
> **상태**: 설계 확정
---
## 1. 개요
### 1.1 목적
### 1.2 핵심 원칙
---
## 2. 테이블 구조 (해당 시)
### 2.1 ERD 개요
---
## N. 비즈니스 규칙
### N.1 검증 규칙
---
## N. API 엔드포인트
---
## 관련 문서
---
**최종 업데이트**: YYYY-MM-DD
```
#### 변경 이력 문서 (`changes/`)
```markdown
# 변경 내용 요약
**날짜:** YYYY-MM-DD
**작업자:** Claude Code
## 변경 개요
## 수정된 파일
| 파일 | 변경 내용 |
|------|----------|
## 상세 변경 사항
## 테스트 체크리스트
- [x] 완료 항목
- [ ] 미완료 항목
## 관련 문서
```
### 작성 스타일 규칙
| 항목 | 규칙 |
|------|------|
| **언어** | 한글 기본, 코드/경로/기술 식별자만 영어 |
| **어조** | 서술형 ("X를 해야 한다" 아닌 "X 한다") |
| **경고** | `> **경고: ...**` 블록인용 형식 |
| **금지/필수** | `❌` 금지, `✅` 필수 접두사 |
| **우선순위** | `🔴 필수`, `🟡 중요`, `🟢 권장` |
| **섹션 번호** | `## 1.`, `### 1.1` 번호 매기기 |
| **규칙 번호** | R1, R2, R3... 순차 라벨 |
| **코드 블록** | 반드시 언어 지정 (```php, ```bash, ```json, ```sql) |
| **인라인 코드** | 파일 경로, 메서드명, 변수명, 컬럼명에 백틱 |
| **다이어그램** | `┌─┐│└─┘` 박스 문자, `→` 화살표 사용 |
| **구분선** | `---` 주요 섹션 사이마다 |
| **테이블** | API: `| Method | Path | 설명 |`, 필드: `| 필드 | 타입 | 설명 |` |
### plans/ 워크플로우
1. 개발 계획 문서를 `plans/`에 작성
2. 작업 진행
3. 완료 후 결과물을 해당 폴더(`features/`, `changes/` 등)에 정리
4. plan 문서 삭제
### 체크리스트 (문서 작성 시)
- [ ] 적절한 폴더에 배치 (위 폴더 선택 기준 참고)
- [ ] `kebab-case.md` 파일명 사용
- [ ] 문서 구조 템플릿 준수
- [ ] 한글 기본, 기술 용어만 영어
- [ ] 코드 블록에 언어 지정
- [ ] `docs/INDEX.md`에 새 문서 등록
- [ ] 10KB 이하 크기 유지
---
## PPT / 프레젠테이션 제작 규칙 (필수 준수)
> **경고: 모든 프레젠테이션 및 문서 제작 시 반드시 따르세요!**
### 회사 정보
| 항목 | 값 |
|------|------|
| **공식 회사명** | **(주)코드브릿지엑스** |
| **서비스명** | **SAM** (Smart Automation Management) |
| **푸터 표기 예시** | `SAM 서비스 요금 안내 | (주)코드브릿지엑스` |
### 금지 사항
```
❌ "주일/경동" — 문서, 슬라이드, 푸터 어디에도 사용 금지
❌ "주일", "경동" 단독 사용 금지
❌ 내부 제조사(주일/경동) 이름을 외부 문서에 노출 금지
```
> **배경**: 주일/경동은 SAM을 기반으로 만든 내부 제조업체 이름이며, 대외 문서에 노출되어서는 안 된다.
> 모든 대외 문서의 회사명은 **(주)코드브릿지엑스**를 사용한다.
### SAM BI (Brand Identity) 이미지
**프로젝트 내 경로**: `/home/aweso/sam/docs/assets/bi/`
| 파일 | 용도 | 배경 |
|------|------|------|
| `sam_bi_black.png` | 밝은 배경 슬라이드 | 투명 배경, 검정 로고 |
| `sam_bi_white.png` | 다크 배경 슬라이드 | 투명 배경, 흰색 로고 |
| `sam_bi_blue.png` | 청색 테마 슬라이드 | 투명 배경, 파란 로고 |
| `sam_bi_green.png` | 녹색 테마 슬라이드 | 녹색 배경, 흰색 로고 |
| `sam_bi_red.png` | 적색/대외비 슬라이드 | 적색 배경, 흰색 로고 |
| `sam_bi_orange.png` | 주황 포인트 슬라이드 | 주황 배경, 흰색 로고 |
| `sam_bi_purple.png` | 보라 테마 슬라이드 | 보라 배경, 흰색 로고 |
### PPT 슬라이드 제작 시 적용 규칙
1. **표지(slide-01)에 BI 로고 필수** — 배경색에 맞는 BI 이미지 사용
2. **푸터에 회사명**: `(주)코드브릿지엑스` (주일/경동 절대 금지)
3. **BI 로고 + "SAM" 텍스트** 조합 사용 권장
4. **배경색별 BI 선택**:
- 다크 배경 → `sam_bi_white.png`
- 밝은 배경 → `sam_bi_black.png`
- 테마 컬러 배경 → 해당 색상 BI (green, blue, red 등)
### 체크리스트 (PPT 제작 시)
- [ ] 회사명: (주)코드브릿지엑스 사용
- [ ] "주일/경동" 미포함 확인
- [ ] 표지에 SAM BI 로고 포함
- [ ] 푸터에 (주)코드브릿지엑스 표기
- [ ] 배경색에 맞는 BI 색상 선택

421
sam/docs/INDEX.md
View File

@@ -1,421 +0,0 @@
# SAM 프로젝트 문서 인덱스
> **Claude Code 작업 전 필수 확인** — 작업 유형에 맞는 문서를 먼저 읽고 시작하세요.
> **최종 갱신**: 2026-03-08
---
## 🎯 작업별 필수 문서
| 작업 유형 | 필수 문서 | 용도 |
|----------|----------|------|
| **API 개발** | `standards/api-rules.md` | Service-First, FormRequest, i18n 규칙 |
| **DB 변경** | `system/database/README.md` | 테이블 구조, 관계, 컬럼 규칙 |
| **새 기능 구현** | `system/overview.md` | 전체 아키텍처 이해 |
| **보안 관련** | `system/security-policy.md` | 인증/인가, 보안 규칙 |
| **Git 커밋** | `standards/git-conventions.md` | 커밋 메시지, 브랜치 전략 |
| **품질 검증** | `standards/quality-checklist.md` | 코드 품질 체크리스트 |
| **Swagger 작성** | `guides/swagger-guide.md` | API 문서 작성 방법 |
| **품목관리** | `rules/item-policy.md` | 품목 정책 (유형, 예약어, API 규칙) |
| **단가관리** | `rules/pricing-policy.md` | 원가/판매가 계산, 리비전 관리 |
| **견적관리** | `features/quotes/README.md` | 견적 시스템, BOM 계산, 10단계 로직 |
| **결재관리** | `features/approvals/README.md` | 결재 시스템 (워크플로우, API, UI) |
| **운영 배포** | `plans/production-deployment-plan.md` | 운영 환경 배포 계획 |
| **서버 운영** | `deploys/ops-manual/README.md` | 서버 운영 매뉴얼 |
| **MES 개발** | `projects/mes/README.md` | MES 프로젝트 개요 |
---
## 📁 폴더 구조
```
docs/
├── system/ # 시스템 현황 — 아키텍처, DB 스키마, 인프라 (architecture/ + specs/ 통합)
├── standards/ # 개발 표준 — "어떻게 코드를 작성할 것인가"
├── rules/ # 비즈니스 규칙 — "무엇이 유효한 데이터인가"
├── features/ # 기능별 상세 — 도메인별 기능 문서
├── guides/ # 구현 가이드 — "어떻게 구현할 것인가"
├── quickstart/ # 빠른 시작 — 핵심 요약, 명령어
├── plans/ # 작업 추적 — 예정 → 진행 → 완료 → archive/
├── projects/ # 프로젝트 자료 — 프로젝트성 분석, 설계, 참고
├── deploys/ # 운영 매뉴얼 — 서버 운영, 배포
├── changes/ # 변경 이력
├── data/ # 데이터 분석
├── history/ # 히스토리 기록
├── api/ # API 통합 문서
├── requests/ # 요청/기획 문서
└── assets/ # BI 등 정적 자산
```
---
## 📚 폴더별 문서 목록
### system/ — 시스템 현황
> 아키텍처, DB 스키마, 기술 스펙, 인프라 (기존 architecture/ + specs/ 통합)
| 문서 | 설명 |
|------|------|
| [overview.md](system/overview.md) | 전체 시스템 아키텍처 (api/react/mng 구조, 기술 스택) |
| [api-structure.md](system/api-structure.md) | API 서버 구조 (~1,027 엔드포인트, 18 도메인) |
| [react-structure.md](system/react-structure.md) | React 프론트엔드 구조 (249 페이지, 612 컴포넌트) |
| [mng-structure.md](system/mng-structure.md) | MNG 관리자 패널 구조 (171 컨트롤러, 436 뷰) |
| [docker-setup.md](system/docker-setup.md) | Docker 환경 + CI/CD (7 서비스, Jenkins) |
| [database/README.md](system/database/README.md) | DB 스키마 인덱스 (220 모델, 32 도메인, 459 마이그레이션) |
**DB 도메인별 스키마:**
| 문서 | 포함 도메인 |
|------|-----------|
| [database/tenants.md](system/database/tenants.md) | 테넌트, 사용자, 권한 (63 모델) |
| [database/products.md](system/database/products.md) | 제품, 품목, 설계 (21 모델) |
| [database/sales.md](system/database/sales.md) | 영업, 수주, 견적 (18 모델) |
| [database/production.md](system/database/production.md) | 생산, 시공, 자재, 품질 (20 모델) |
| [database/finance.md](system/database/finance.md) | 재무, 회계 |
| [database/hr.md](system/database/hr.md) | 인사, 면접 |
| [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/):**
| 문서 | 설명 |
|------|------|
| [security-policy.md](system/security-policy.md) | 보안 정책 (다층 방어, Sanctum, RBAC) |
| [scaling-roadmap.md](system/scaling-roadmap.md) | 10K 테넌트 스케일링 로드맵 |
| [ai-automation-vision.md](system/ai-automation-vision.md) | SAM AI 자동화 비전 및 장기 로드맵 |
| [board-system-spec.md](system/board-system-spec.md) | 게시판 시스템 설계 스펙 |
| [item-master-integration.md](system/item-master-integration.md) | 품목 마스터 통합 설계 |
| [remote-work-setup.md](system/remote-work-setup.md) | 원격 개발 설정 (DEPRECATED) |
| [erp-analysis/](system/erp-analysis/) | ERP 스토리보드 분석 (9개 파일) |
---
### standards/ — 개발 표준
> 코딩 컨벤션, 스타일 가이드, 품질 기준
| 문서 | 설명 | 필수 확인 시점 |
|------|------|--------------|
| [api-rules.md](standards/api-rules.md) | API 개발 규칙 (Service-First, FormRequest, i18n) | API 개발 전 |
| [git-conventions.md](standards/git-conventions.md) | Git 커밋 메시지, 브랜치 전략 | 커밋 전 |
| [quality-checklist.md](standards/quality-checklist.md) | 코드 품질 체크리스트 | PR 전 |
| [pagination-policy.md](standards/pagination-policy.md) | 페이지네이션 표준 | 목록 API 구현 시 |
| [options-column-policy.md](standards/options-column-policy.md) | JSON options 컬럼 표준 정책 (마이그레이션, 모델, 쿼리) | 테이블 생성/확장 시 |
---
### rules/ — 비즈니스 규칙
> 도메인 로직, 검증 규칙, 정책
| 문서 | 설명 | 필수 확인 시점 |
|------|------|--------------|
| [README.md](rules/README.md) | 비즈니스 규칙 개요 | 도메인 로직 구현 전 |
| [item-policy.md](rules/item-policy.md) | 품목 정책 (유형, 예약어, API 규칙) | 품목 관련 작업 전 |
| [pricing-policy.md](rules/pricing-policy.md) | 단가 정책 (원가/판매가, 리비전) | 단가 관련 작업 전 |
| [customer-pricing.md](rules/customer-pricing.md) | 고객 안내용 서비스 요금표 | 고객 요금 안내 시 |
| [partner-commission.md](rules/partner-commission.md) | 영업파트너 수당 체계 및 정산 | 수당/정산 관련 작업 전 |
| [billing-policy.md](rules/billing-policy.md) | 내부용 원가/마진/코드참조 (CONFIDENTIAL) | 과금 코드 개발 전 |
| [client-policy.md](rules/client-policy.md) | 고객사 관리 정책 | 고객 관련 작업 전 |
| [attendance-api.md](rules/attendance-api.md) | 근태 API 규칙 | 근태 관련 작업 전 |
| [department-tree-api.md](rules/department-tree-api.md) | 부서 트리 API 규칙 | 부서 관련 작업 전 |
| [employee-api.md](rules/employee-api.md) | 직원 API 규칙 | 직원 관련 작업 전 |
| [numbering-rules.md](rules/numbering-rules.md) | 채번규칙 (패턴 기반 자동 번호 생성) | 채번 로직 수정 전 |
---
### features/ — 기능별 문서
> 도메인별 기능 상세 (기능 설명 + 엔드포인트 경로 + Swagger 참조)
| 문서 | 설명 |
|------|------|
| [quotes/README.md](features/quotes/README.md) | 견적 시스템 (BOM 계산, 10단계 로직) |
| [boards/README.md](features/boards/README.md) | 게시판 시스템 구현 |
| [boards/mng-implementation.md](features/boards/mng-implementation.md) | MNG 게시판 구현 상세 |
| [hr/attendance-management-spec.md](features/hr/attendance-management-spec.md) | 근태관리 기획서 |
| [hr/hr-api-analysis.md](features/hr/hr-api-analysis.md) | HR API 분석 (근태/직원/부서) |
| [barobill-kakaotalk/README.md](features/barobill-kakaotalk/README.md) | 바로빌 카카오톡 + 세금계산서 연동 |
| ~~business-card-request.md~~ | 명함신청 관리 (DB 마이그레이션만 존재, 문서 미작성) |
| [sales/README.md](features/sales/README.md) | 영업 관리 (면접 시나리오 포함) |
| [crm/README.md](features/crm/README.md) | CRM (거래처, 미수금, 미지급금) |
| [finance/README.md](features/finance/README.md) | 재무 관리 (14개 하위 문서) |
| [card-vehicle/README.md](features/card-vehicle/README.md) | 법인카드·차량 관리 |
| [settlement/README.md](features/settlement/README.md) | 정산 관리 |
| [esign/README.md](features/esign/README.md) | 전자서명 (계약·OTP·PDF 합성) |
| [documents/README.md](features/documents/README.md) | 문서관리 (EAV 기반 서식·결재) |
| [ai/README.md](features/ai/README.md) | AI 분석 리포트 (Gemini 연동) |
| [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견적/기획디자인/디자인 인사이트/사운드 로고/CM송) |
| [rd/planning-design.md](features/rd/planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 |
| [rd/design-insight.md](features/rd/design-insight.md) | 디자인 인사이트 UI/UX 연구 도구 (100종 패턴, AI 프롬프트) |
| [rd/sound-logo-studio.md](features/rd/sound-logo-studio.md) | 사운드 로고 스튜디오 (시퀀서 + Gemini TTS + Lyria BGM 합성) |
---
### guides/ — 구현 가이드
> 특정 기능 구현을 위한 단계별 매뉴얼
| 문서 | 설명 | 필수 확인 시점 |
|------|------|--------------|
| [swagger-guide.md](guides/swagger-guide.md) | Swagger API 문서 작성법 | API 문서 작성 전 |
| [file-storage-guide.md](guides/file-storage-guide.md) | 파일 업로드/다운로드 구현 | 파일 기능 구현 전 |
| [item-management-migration.md](guides/item-management-migration.md) | Item 시스템 전환 가이드 | 마이그레이션 작업 전 |
| [project-launch-roadmap.md](guides/project-launch-roadmap.md) | 런칭 준비 현황 | 런칭 관련 작업 시 |
| [production-env-sync.md](guides/production-env-sync.md) | 운영 전환 시 .env 동기화 | 테스트→운영 전환 시 |
| [server-how-it-works.md](guides/server-how-it-works.md) | 서버 동작 원리 | 신규 합류 시 |
| [nginx-fastcgi-guide.md](guides/nginx-fastcgi-guide.md) | Nginx & FastCGI 가이드 | 서버 이해 시 |
| [php-fpm-guide.md](guides/php-fpm-guide.md) | PHP-FPM 가이드 | 서버 이해 시 |
| [jenkins-setup-guide.md](guides/jenkins-setup-guide.md) | Jenkins CI/CD 셋업 | Jenkins 설치/설정 시 |
| [auto-login-guide.md](guides/auto-login-guide.md) | MNG→DEV 자동 로그인 | 자동 로그인 구현 시 |
| [erp-api-list.md](guides/erp-api-list.md) | ERP API 목록 (List vs Detail 구분) | 프론트 API 연동 시 |
| [erp-api-detail.md](guides/erp-api-detail.md) | ERP API 상세 스펙 | 프론트 API 연동 시 |
| [table-design-guide.md](guides/table-design-guide.md) | 테이블 설계 가이드 (비전문가용, options JSON 패턴) | 테이블 구조 이해 시 |
| [item-master-guide.md](guides/item-master-guide.md) | 품목기준관리 페이지-섹션-필드 구조 | 품목 UI 구현 시 |
| [item-master-items-api.md](guides/item-master-items-api.md) | ItemMaster & Items API 문서 | 품목 API 연동 시 |
| [ai-management.md](guides/ai-management.md) | AI 관리 종합 가이드 (아키텍처, 버전 이력, 온보딩) | AI 관련 작업 시 |
| [ai-model-update-workflow.md](guides/ai-model-update-workflow.md) | AI 모델 업데이트 표준 절차 (7단계) | AI 모델 변경 시 |
| [ai-config-settings.md](guides/ai-config-settings.md) | AI 설정 기술문서 (DB 구조, 메서드) | AI 설정 구현 시 |
---
### quickstart/ — 빠른 시작
> 핵심 규칙 요약, 자주 쓰는 명령어
| 문서 | 설명 |
|------|------|
| [quick-start.md](quickstart/quick-start.md) | 프로젝트 핵심 규칙 요약 |
| [dev-commands.md](quickstart/dev-commands.md) | 일상 개발 명령어 모음 |
---
### plans/ — 작업 추적
> 예정 → 진행 → 완료 → archive/ (이미 정리 완료, 현행 유지)
| 문서 | 설명 |
|------|------|
| [index_plans.md](plans/index_plans.md) | 계획 인덱스 (ACTIVE + PLANNED) |
| [GUIDE.md](plans/GUIDE.md) | 계획 문서 작성 가이드 |
| [fire-shutter-drawing-generator-plan.md](plans/fire-shutter-drawing-generator-plan.md) | 방화셔터 도면생성 기능 기획서 (가이드레일 단면도 + 셔터박스 + 3D 렌더링) |
---
### projects/ — 프로젝트 자료
> 프로젝트성 분석, 설계, 참고 자료 (지속 보관)
| 프로젝트 | 문서 | 설명 |
|---------|------|------|
| [index_projects.md](projects/index_projects.md) | 프로젝트 인덱스 | |
| **MES** | [README.md](projects/mes/README.md) | MES 프로젝트 개요 |
| **MES** | [MES_PROJECT_ROADMAP.md](projects/mes/MES_PROJECT_ROADMAP.md) | 개발 로드맵 |
| **5130 이관** | [MASTER_PLAN.md](projects/5130-migration/MASTER_PLAN.md) | 레거시 이관 마스터 플랜 |
| **API 연동** | [MASTER_PLAN.md](projects/api-integration/MASTER_PLAN.md) | React↔API 연동 |
| **Legacy** | [draw-module.md](projects/legacy-5130/draw-module.md) | 레거시 드로우 모듈 |
| **견적** | [quotation/](projects/quotation/) | 견적 프로젝트 자료 |
| **전자서명** | [e-sign/](projects/e-sign/) | 전자서명 프로젝트 자료 |
| **조직도** | [org-chart/README.md](projects/org-chart/README.md) | 조직도 관리 (트리형, 드래그앤드롭, 숨기기) |
---
### deploys/ — 운영 매뉴얼
> 서버 운영, 배포 (현행 유지)
| 문서 | 설명 |
|------|------|
| [ops-manual/README.md](deploys/ops-manual/README.md) | 서버 운영 매뉴얼 (11부 구성) |
---
### changes/ — 변경 이력
> 파일명 형식: `YYYYMMDD_description.md`
| 문서 | 설명 |
|------|------|
| [20260304_eaccount_infinite_loop_fix.md](changes/20260304_eaccount_infinite_loop_fix.md) | 계좌 입출금내역 부분 월 조회 시 무한루프 크래시 수정 |
| [20260306_purchase_request_payment_method.md](changes/20260306_purchase_request_payment_method.md) | 품의서 지급방법 UI 개선 (구매품의서 추가, 비용정산품의서 행별 변경) |
---
### data/ — 데이터 분석
| 문서 | 설명 |
|------|------|
| [analysis/item-db-analysis.md](data/analysis/item-db-analysis.md) | Item DB/API 분석 최종본 |
| [analysis/bom-item-mapping-analysis.md](data/analysis/bom-item-mapping-analysis.md) | BOM-품목 매핑 분석 |
### contracts/ - 전자계약서 버전 관리
> DOCX 배포본 + Markdown 추적본 + 자동화 스크립트
| 문서 | 설명 |
|------|------|
| [CHANGELOG.md](contracts/CHANGELOG.md) | 전체 개정이력 |
| [revisions.json](contracts/revisions.json) | 개정 데이터 |
| [docx/](contracts/docx/) | DOCX 배포본 (전자서명용 4종, 바로 사용 가능) |
| [markdown/](contracts/markdown/) | Markdown 추적본 (Git diff용 4종) |
| [scripts/extract_to_markdown.py](contracts/scripts/extract_to_markdown.py) | DOCX → Markdown 추출 |
| [scripts/sync_check.py](contracts/scripts/sync_check.py) | DOCX ↔ Markdown 동기화 검증 |
### plans/ - 개발 계획
> 임시 개발 계획 문서 (작업 완료 후 정리 → 삭제)
| 문서 | 설명 |
|------|------|
| [SAM_ERP_Storyboard_D1.4_260116.md](plans/SAM_ERP_Storyboard_D1.4_260116.md) | ERP 전체 스토리보드 D1.4 (167p PDF → 마크다운 변환, 14개 섹션 146개 화면) |
| [SAM_ERP_Storyboard_D1.4.md](plans/SAM_ERP_Storyboard_D1.4.md) | ERP 스토리보드 D1.4 AI 최적화 버전 (구조화된 한글 마크다운, 15개 섹션) |
| [SAM_ERP_회계관리_Storyboard_D1.6.md](plans/SAM_ERP_회계관리_Storyboard_D1.6.md) | ERP 회계관리 스토리보드 D1.6 (65p PDF → 마크다운 변환) |
| [SAM_General_Rule_Storyboard_D1.0.md](plans/SAM_General_Rule_Storyboard_D1.0.md) | General Rule 스토리보드 D1.0 (43p PDF → 마크다운 변환, UIUX 공통 규칙) |
| [production-deployment-plan.md](plans/production-deployment-plan.md) | 운영 환경 배포 계획 (CI/CD, 서버 아키텍처) |
| [attendance-management-plan.md](plans/attendance-management-plan.md) | 근태현황 개발 계획 (Phase 1~2, HTMX 기반) |
| [leave-management-plan.md](plans/leave-management-plan.md) | 휴가관리 모듈 개발 계획 (연차 발생/신청/승인/정책) |
| [approval-management-system-plan.md](plans/approval-management-system-plan.md) | 결재관리 시스템 기획서 (전자결재 전체 설계: 기안~회수, DB 설계, 17개 양식, 4 Phase) |
| [block-builder-evolution-plan.md](plans/block-builder-evolution-plan.md) | 양식 디자이너(Block Builder) 고도화 계획 (6 Phase: 렌더러→결재→동적테이블→수식→인쇄→Legacy 대체) |
| [design-insight-menu-plan.md](plans/design-insight-menu-plan.md) | UI/UX 디자인 인사이트 연구 메뉴 기획서 (레퍼런스 수집, 화면 분석, 패턴 라이브러리, Before/After) |
| [sound-logo-generator-plan.md](plans/sound-logo-generator-plan.md) | 사운드 로고 생성기 기획서 (Web Audio + Gemini AI 어시스트 + Lyria 자동 생성) |
### features/ - 기능별 문서
| 문서 | 설명 |
|------|------|
| [barobill-kakaotalk/README.md](features/barobill-kakaotalk/README.md) | 바로빌 카카오톡 (알림톡/친구톡) 연동 |
| [boards/README.md](features/boards/README.md) | 게시판 시스템 구현 |
| [boards/mng-implementation.md](features/boards/mng-implementation.md) | MNG 게시판 구현 상세 |
| [hr/attendance-management-spec.md](features/hr/attendance-management-spec.md) | 근태관리 기획서 (화면/데이터/비즈니스규칙/API) |
| [hr/hr-api-analysis.md](features/hr/hr-api-analysis.md) | HR API 분석 (근태/직원/부서) |
| [quotes/README.md](features/quotes/README.md) | 견적 시스템 분석 (BOM 계산, 10단계 로직) |
| [business-card-request.md](features/business-card-request.md) | 명함신청 관리 (3단계 워크플로우: 요청→제작의뢰→처리완료) |
| [academy/fire-shutter-image-prompts.md](features/academy/fire-shutter-image-prompts.md) | 방화셔터 백과사전 이미지 생성 프롬프트 (Gemini용) |
| [approvals/README.md](features/approvals/README.md) | 결재관리 시스템 개요 (아키텍처, DB, 상태관리, 권한) |
| [approvals/workflows.md](features/approvals/workflows.md) | 결재관리 워크플로우 상세 (승인/반려/회수/보류/전결/복사재기안) |
| [approvals/api-reference.md](features/approvals/api-reference.md) | 결재관리 API 명세 (20개 엔드포인트) |
| [approvals/ui-screens.md](features/approvals/ui-screens.md) | 결재관리 UI 화면 구성 (Blade + HTMX) |
| [approvals/db-changes-and-model-sync.md](features/approvals/db-changes-and-model-sync.md) | 결재관리 DB 변경사항 및 API 모델 동기화 현황 (2026-02~03) |
### projects/ - 프로젝트별 문서
| 프로젝트 | 문서 | 설명 |
|---------|------|------|
| **MES** | [README.md](projects/mes/README.md) | MES 프로젝트 개요 |
| **MES** | [MES_PROJECT_ROADMAP.md](projects/mes/MES_PROJECT_ROADMAP.md) | 개발 로드맵 |
| **Legacy** | [draw-module.md](projects/legacy-5130/draw-module.md) | 레거시 드로우 모듈 |
| **조직도** | [README.md](projects/org-chart/README.md) | 조직도 관리 (Alpine.js + SortableJS) |
### history/ - 히스토리
| 기간 | 문서 |
|------|------|
| **2025-11** | [item-master-gap-analysis.md](history/2025-11/item-master-gap-analysis.md), [item-master-spec.md](history/2025-11/item-master-spec.md), [front-requests/](history/2025-11/front-requests/), [item-master-archived/](history/2025-11/item-master-archived/) |
| **2025-09** | [checkpoint.md](history/2025-09/checkpoint.md), [database-schema.md](history/2025-09/database-schema.md) |
| **Roadmaps** | [december-2025.md](history/roadmaps/december-2025.md) |
---
### 서브프로젝트 문서
각 서브프로젝트는 독립적인 `docs/` 디렉토리를 가집니다.
| 프로젝트 | 문서 경로 | 설명 |
|---------|----------|------|
| **API** | [api/docs/](../api/docs/) | REST API 프로젝트 |
| **MNG** | [mng/docs/](../mng/docs/) | Plain Laravel 관리자 |
| **React** | [react/docs/](../react/docs/) | Next.js 프론트엔드 |
---
## 📝 문서 작성 규칙
### 폴더 선택 기준
| 질문 | 폴더 |
|------|------|
| "시스템이 현재 어떤 상태인가?" | `system/` |
| "어떻게 코드를 작성할 것인가?" | `standards/` |
| "무엇이 유효한 데이터인가?" | `rules/` |
| "이 기능은 어떻게 동작하는가?" | `features/` |
| "어떻게 구현할 것인가?" | `guides/` |
| "무슨 작업을 할 것인가?" | `plans/` |
| "프로젝트 자료를 보관하고 싶다" | `projects/` |
| "무엇이 변경되었는가?" | `changes/` |
### 파일명 규칙
| 유형 | 규칙 | 예시 |
|------|------|------|
| 기술 문서 (코드 참조) | 영문 kebab-case | `api-rules.md`, `database-schema.md` |
| 업무/비즈니스 문서 | 한글 허용 | `영업파트너가이드북.md`, `수당지급.md` |
| 변경 이력 | `YYYYMMDD_description.md` | `20260205_sus_inspection_template.md` |
| 폴더 인덱스 | `README.md` (대문자) | `features/finance/README.md` |
| **혼용 금지** | 한글+영문 섞지 않음 | ❌ `영업partner가이드.md` |
### 크기 제한
- **목표**: 10KB 이하
- 초과 시 도메인별로 분할
### 문서 구조 템플릿
#### 정책/규칙 문서 (`rules/`, `standards/`)
```markdown
# 제목
> **작성일**: YYYY-MM-DD
> **상태**: 설계 확정
---
## 1. 개요
## 2. 핵심 원칙
## 3. 상세 규칙
## 4. API 엔드포인트 (해당 시)
## 관련 문서
---
**최종 업데이트**: YYYY-MM-DD
```
#### 변경 이력 문서 (`changes/`)
```markdown
# 변경 내용 요약
**날짜:** YYYY-MM-DD
## 변경 개요
## 수정된 파일
## 상세 변경 사항
## 테스트 체크리스트
```
### 작성 스타일
| 항목 | 규칙 |
|------|------|
| **언어** | 한글 기본, 코드/경로/기술 식별자만 영어 |
| **어조** | 서술형 ("X 한다") |
| **경고** | `> **경고: ...**` 블록인용 |
| **금지/필수** | `❌` 금지, `✅` 필수 |
| **우선순위** | `🔴 필수`, `🟡 중요`, `🟢 권장` |
| **코드 블록** | 반드시 언어 지정 (```php, ```bash 등) |
| **인라인 코드** | 파일 경로, 메서드명, 변수명에 백틱 |
| **구분선** | `---` 주요 섹션 사이 |
### 새 문서 작성 시 체크리스트
- [ ] 적절한 폴더에 배치
- [ ] 파일명 규칙 준수
- [ ] 문서 구조 템플릿 준수
- [ ] 이 INDEX.md에 등록
---
## 🔄 문서 정비 진행 현황
> 참조: [docs-comprehensive-update-plan.md](plans/docs-comprehensive-update-plan.md)
| Phase | 작업 | 상태 |
|-------|------|------|
| **Phase 0** | 문서 정책 재정립 | ✅ 완료 |
| **Phase 1** | 시스템 현황 문서화 (DB, API, React, MNG, Docker) | ✅ 완료 (14개 문서) |
| **Phase 2** | 기존 문서 정비 (architecture/+specs/ → system/ 이관) | ⏳ 대기 |
| **Phase 3** | 신규 도메인 기능 문서 작성 | ⏳ 대기 |
| **Phase 4** | 최종 검증 및 INDEX 갱신 | ⏳ 대기 |

BIN
sam/docs/assets/bi/sam_bi_black.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
sam/docs/assets/bi/sam_bi_blue.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
sam/docs/assets/bi/sam_bi_green.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
sam/docs/assets/bi/sam_bi_orange.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
sam/docs/assets/bi/sam_bi_purple.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
sam/docs/assets/bi/sam_bi_red.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
sam/docs/assets/bi/sam_bi_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

370
sam/docs/brochure/README.md
View File

@@ -1,370 +0,0 @@
# SAM 브로셔 버전 관리
> **작성일**: 2026-03-01
> **상태**: 운영 중
---
## 1. 개요
SAM CEO Dashboard 및 ERP/MES 영업 브로셔의 버전별 디자인 변천을 기록한다.
모든 브로셔는 세로형(9:16) HTML로 작성하며, `pptx-skill`(html2pptx.js)로 PPTX 변환한다.
---
## 2. 버전 요약
| 버전 | 대상 | 테마 | 배경색 | 주 액센트 | 비고 |
|------|------|------|--------|-----------|------|
| **v1** | 전체 고객 | 다크 | `#0F2439` | `#10B981` (에메랄드) | SAM ERP/MES 범용 |
| **v2** | 경영진 | 다크 | `#0B1929` | `#0EA5E9` (스카이블루) | CEO Dashboard 초판 |
| **v3** | 경영진 | 다크 | `#0B1929` | `#0EA5E9` (스카이블루) | v2 개선, Before/After 추가 |
| **v4** | 경영진 | 라이트 | `#F8FAFC` | `#0EA5E9` (스카이블루) | v3의 밝은 배경 변환 |
| **v5** | 경영진 | 프리미엄 그래디언트 | `#0F172A→#312E81` | `#FBBF24` (골드) | 글래스모피즘 + 골드 |
| **v6** | 경영진 | 코퍼레이트 블루 | `#FFFFFF` | `#2563EB` (블루) | 대기업/공공기관 스타일 |
| **v7** | 경영진 | 웜 그레이 + 틸 | `#FAFAF9` | `#0D9488` (틸) | IT/SaaS 스타일 |
| **v8** | 경영진 | 투톤 스플릿 | `#1E293B` / `#FFFFFF` | `#F97316` (오렌지) | 금융/컨설팅 스타일 |
| **v9** | 경영진 | 미니멀 화이트 | `#FFFFFF` | `#6366F1` (인디고) | Apple/디자인 에이전시 |
---
## 3. 버전별 상세
### 3.1 v1 — SAM ERP/MES 범용 브로셔
**컨셉**: 중소 제조업 대상 SAM 플랫폼 전체 기능 소개
| 항목 | 값 |
|------|------|
| 배경 | `#0F2439` (네이비) |
| 주 액센트 | `#10B981` (에메랄드 그린) |
| 보조 액센트 | `#2E86AB`, `#8B5CF6`, `#E86F2C` |
| 카드 스타일 | 반투명 배경 + 컬러 보더 |
| BI 로고 | `sam_bi_white.png` |
**앞면 구성**:
- 히어로: "중소 제조업을 위한 ERP/MES 통합 플랫폼"
- 고민 포인트: Excel 과의존, 실시간 가시성, 품질관리, 높은 ERP 비용
- 효과 지표: 시간 절감 80%, 납기 준수 95%, 추적성 100%, 인사/회계 무료
- 기술 태그: 클라우드, 모바일 대응, 멀티테넌트
**뒷면 구성**:
- 8대 핵심 모듈 (01~08 번호 뱃지): 품목/BOM, 견적/수주, 생산/MES, 출하, 품질, 자재, 인사/회계, 대시보드
- 확장 기능: 전자서명, 알림톡, AI Lab, QR
- 가격표: 기본 2,000만원 + 월 50만원
- 도입 프로세스: 인터뷰 → 개발 → 이관 → 교육
---
### 3.2 v2 — CEO Dashboard 초판
**컨셉**: 경영진 타겟, 대시보드 중심 소개. 문제→해결 스토리텔링
| 항목 | 값 |
|------|------|
| 배경 | `#0B1929` (짙은 네이비) |
| 주 액센트 | `#0EA5E9` (스카이블루) |
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#F59E0B`, `#EF4444`, `#EC4899` |
| 카드 스타일 | 반투명 다크 카드 |
| BI 로고 | `sam_bi_white.png` |
**앞면 구성**:
- 히어로: "대표님, 지금 우리 회사 어떻게 돌아가고 있나요?"
- 시간대별 고민: 오전 9시(매출 보고 대기), 오후 2시(수주 취합), 오후 5시(결재 서류)
- 대시보드 Mock UI: KPI 카드 4개 + 매출 추이 차트 + 조직 성과 바 차트
- 약속 박스: "실시간 KPI 파악"
**뒷면 구성**:
- 대시보드 7대 기능 (01~07 뱃지)
- 역할별 맞춤 화면: CEO, 관리자, 운영자, 영업자
- SAM 플랫폼 연동: 견적/수주, 생산, 품질, 재고, 인사/회계
- 가격표 + 도입 프로세스
**v1 대비 차이**:
- 타겟이 전체→경영진으로 좁혀짐
- 타임라인 기반 문제 제시 (시간대별 고민)
- 대시보드 UI Mock 삽입
- 역할별 화면 분리 소개
---
### 3.3 v3 — CEO Dashboard 개선판 (다크)
**컨셉**: v2 기반 개선. Before/After 인포그래픽 추가, SVG 아이콘 강화
| 항목 | 값 |
|------|------|
| 배경 | `#0B1929` (짙은 네이비) |
| 주 액센트 | `#0EA5E9` (스카이블루) |
| 카드 스타일 | 반투명 다크 + 컬러 보더 |
| BI 로고 | `sam_bi_white.png` |
**v2 대비 개선사항**:
- 1page 통합본 추가
- Before/After 비교 인포그래픽 도입
- 핵심 가치 3카드: 즉시 현황 파악, 데이터로 판단, 모바일 승인
- SVG 인라인 아이콘 전면 적용 (외부 이미지 의존 제거)
- PPTX 텍스트 줄바꿈 방지 패턴 적용 (`white-space: nowrap`, 개별 `<p>` 분리)
---
### 3.4 v4 — CEO Dashboard 라이트 버전
**컨셉**: v3와 동일 콘텐츠, 밝은 배경으로 색상 전환
| 항목 | 값 |
|------|------|
| 배경 | `#F8FAFC` (밝은 슬레이트) |
| 주 액센트 | `#0EA5E9` (스카이블루) |
| 제목 텍스트 | `#0F172A` |
| 본문 텍스트 | `#475569` |
| 보조 텍스트 | `#94A3B8` |
| 카드 스타일 | 화이트 + `box-shadow` + `#E2E8F0` 보더 |
| BI 로고 | `sam_bi_black.png` |
**v3 → v4 색상 변환 규칙**:
| 요소 | v3 (다크) | v4 (라이트) |
|------|-----------|------------|
| 배경 | `#0B1929` | `#F8FAFC` |
| 카드 | `#111D2E` 반투명 | `#FFFFFF` + shadow |
| 제목 | `#FFFFFF` | `#0F172A` |
| 본문 | `rgba(255,255,255,0.55)` | `#475569` |
| 보조 | `rgba(255,255,255,0.3)` | `#94A3B8` |
| 구분선 | `rgba(14,165,233,0.15)` | `#E2E8F0` |
| 기술 태그 | `rgba(255,255,255,0.03)` | `#F1F5F9` |
| 액센트 | 동일 유지 | 동일 유지 |
---
### 3.5 v5 — Premium Executive Gradient
**컨셉**: 고급 프리미엄 감성. 네이비→인디고 그래디언트 + 골드 액센트 + 글래스모피즘
| 항목 | 값 |
|------|------|
| 배경 | `#0F172A → #1E1B4B → #312E81` (175deg 그래디언트) |
| 주 액센트 | `#FBBF24` (골드/앰버) |
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#EF4444`, `#F59E0B`, `#EC4899` |
| 카드 스타일 | 글래스모피즘 (`rgba(255,255,255,0.05)` + `rgba(255,255,255,0.1)` border) |
| BI 로고 | `sam_bi_white.png` |
| 뱃지 | "EXECUTIVE EDITION" 골드 뱃지 |
**앞면 구성**:
- 히어로: "대표님의 시간은 보고를 기다리는 데 쓰여선 안 됩니다."
- 잃어버린 시간 카드: 1~2일(매출), 반나절(수주), 30분(결재) — 빨간 톤
- 골드 전환 구분선: "SAM 도입 후"
- 대시보드 Mock: 골드 차트 라인, 글래스모피즘 카드
- 약속 박스: 골드 테두리
**뒷면 구성**:
- 7대 기능 리스트 (글래스모피즘 카드)
- 역할별 맞춤 화면: CEO(골드), 관리자(그린), 운영자(앰버), 영업자(퍼플)
- 가격표: 골드 강조
- 도입 프로세스: 골드 화살표 연결
**기술 특이사항**:
- body CSS gradient → PPTX 미지원 → Sharp로 PNG 사전 렌더링
- HTML body는 `#1A1640`(단색 fallback), convert 스크립트에서 `slide.background`로 그래디언트 PNG 덮어쓰기
- 구분선 gradient도 solid rgba로 변환 (PPTX 호환)
---
### 3.6 v6 — Corporate Blue & White
**컨셉**: 대기업/공공기관 프레젠테이션 스타일. 정돈된 블루 헤더 바 + 순백색 본문
| 항목 | 값 |
|------|------|
| 배경 | `#FFFFFF` (순백) |
| 헤더 바 | `#1E40AF` (로열 블루) |
| 주 액센트 | `#2563EB` (블루) |
| 보조 배경 | `#EFF6FF` (블루-50), `#DBEAFE` (블루-100) |
| 카드 스타일 | 화이트 + `#DBEAFE` 보더 |
| BI 로고 | `sam_bi_white.png` (헤더), `sam_bi_black.png` (본문) |
**특징**:
- 풀 폭 블루 헤더 바에 흰색 BI 로고 + 뱃지 배치
- 섹션 라벨은 블루-50 배경 + 로열블루 텍스트 뱃지
- 대시보드 Mock UI: `#DBEAFE` 보더 카드
- CTA: 블루 배경 풀 폭 바
---
### 3.7 v7 — Warm Gray + Teal
**컨셉**: IT/SaaS 기업 스타일. 따뜻한 그레이 배경 + 틸(Teal) 액센트
| 항목 | 값 |
|------|------|
| 배경 | `#FAFAF9` (웜 그레이) |
| 주 액센트 | `#0D9488` (틸) |
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#EF4444`, `#F59E0B`, `#EC4899` |
| 카드 스타일 | 화이트 + `#E7E5E4` 보더 + 미세 그림자 |
| 구분선 | `#D6D3D1` |
| BI 로고 | `sam_bi_black.png` |
**특징**:
- 부드러운 웜 톤 배경으로 눈의 피로 감소
- 틸 계열 SVG 아이콘 전면 적용
- 가벼운 카드 스타일로 정보 구분
- 타임라인 인포그래픽: 시간대별 고민 (9AM/2PM/5PM)
---
### 3.8 v8 — Two-Tone Navy/White Split
**컨셉**: 금융/컨설팅 프레젠테이션 스타일. 다크 상단 + 화이트 하단 투톤 분할
| 항목 | 값 |
|------|------|
| 상단 배경 | `#1E293B` (슬레이트-800) |
| 하단 배경 | `#FFFFFF` (순백) |
| 주 액센트 | `#F97316` (오렌지) |
| 보조 액센트 | `#FB923C` (오렌지-400) |
| 카드 (다크) | `rgba(255,255,255,0.08)` + `rgba(255,255,255,0.12)` 보더 |
| 카드 (라이트) | 화이트 + `#E2E8F0` 보더 + 컬러 좌측 보더 |
| BI 로고 | `sam_bi_white.png` (다크), `sam_bi_black.png` (라이트) |
**특징**:
- 앞면 상단: 다크 존에 KPI 카드 + 히어로 메시지
- 앞면 하단: 화이트 존에 가치 카드 + 기능 그리드
- 기능 카드에 컬러 좌측 보더 포인트 (오렌지/그린/퍼플/레드)
- 다크 CTA 박스: 하단 풀 폭 다크 배경 + 오렌지 액센트
---
### 3.9 v9 — Minimal White + Indigo
**컨셉**: Apple/디자인 에이전시 스타일. 극도의 미니멀리즘 + 인디고 수직 액센트 라인
| 항목 | 값 |
|------|------|
| 배경 | `#FFFFFF` (순백) |
| 주 액센트 | `#6366F1` (인디고) |
| 카드 배경 | `#F8FAFC` (거의 투명한 그레이) |
| 카드 보더 | `#F1F5F9` |
| 본문 텍스트 | `#334155` (슬레이트-700) |
| 보조 텍스트 | `#94A3B8` |
| BI 로고 | `sam_bi_black.png` |
**특징**:
- 좌측 3pt 인디고 수직 액센트 라인 (풀 하이트)
- 타이포그래피 중심 레이아웃 (아이콘 최소화)
- 거의 보이지 않는 카드 구분 (barely-there cards)
- 기능은 텍스트 로우 형태 (인디고 불릿 도트만)
- 가격/프로세스도 텍스트 기반 미니멀 표현
---
## 4. 폴더 구조
```
docs/brochure/
├── README.md ← 이 파일
├── v1/
│ ├── slides/
│ │ ├── brochure-2page-front.html
│ │ ├── brochure-2page-back.html
│ │ └── brochure-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-1page.pptx
│ └── sam-brochure-2page.pptx
├── v2/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v2-dashboard-1page.pptx
│ └── sam-brochure-v2-dashboard-2page.pptx
├── v3/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v3-dashboard-1page.pptx
│ └── sam-brochure-v3-dashboard-2page.pptx
├── v4/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v4-dashboard-1page.pptx
│ └── sam-brochure-v4-dashboard-2page.pptx
├── v5/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs ← Sharp 그래디언트 배경 생성 포함
│ ├── convert-2page.cjs ← Sharp 그래디언트 배경 생성 포함
│ ├── sam-brochure-v5-dashboard-1page.pptx
│ └── sam-brochure-v5-dashboard-2page.pptx
├── v6/ ← Corporate Blue & White
│ ├── slides/ (front, back, 1page)
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v6-dashboard-1page.pptx
│ └── sam-brochure-v6-dashboard-2page.pptx
├── v7/ ← Warm Gray + Teal
│ ├── slides/ (front, back, 1page)
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v7-dashboard-1page.pptx
│ └── sam-brochure-v7-dashboard-2page.pptx
├── v8/ ← Two-Tone Navy/White Split
│ ├── slides/ (front, back, 1page)
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v8-dashboard-1page.pptx
│ └── sam-brochure-v8-dashboard-2page.pptx
└── v9/ ← Minimal White + Indigo
├── slides/ (front, back, 1page)
├── convert-1page.cjs
├── convert-2page.cjs
├── sam-brochure-v9-dashboard-1page.pptx
└── sam-brochure-v9-dashboard-2page.pptx
```
---
## 5. PPTX 변환 방법
```bash
# 각 버전 폴더에서 실행
cd docs/brochure/v5
node convert-1page.cjs # 1페이지 통합본
node convert-2page.cjs # 앞면+뒷면 2페이지
```
---
## 6. PPTX 변환 시 주의사항
### 6.1 텍스트 줄바꿈 방지
- 단일행 `<p>` 태그에 `white-space: nowrap` 필수
- `<br>` 멀티라인 `<p>`는 개별 `<p nowrap>` 태그로 분리
- `<span>` 포함 텍스트도 개별 `<p>` 처리 (PPTX 폰트 폭 차이 보정)
### 6.2 CSS gradient 미지원
- html2pptx.js는 CSS `linear-gradient`를 지원하지 않음
- body gradient → Sharp로 PNG 사전 렌더링 후 `slide.background`에 설정
- 구분선 gradient → solid `rgba()` 색상으로 변환
### 6.3 SVG 처리
- 인라인 SVG는 html2pptx가 자동으로 PNG 래스터화
- SVG 내부 fill 색상은 배경에 맞게 조정 필요
---
**최종 업데이트**: 2026-03-01 (v6~v9 추가)

28
sam/docs/brochure/v1/convert-1page.cjs
View File

@@ -1,28 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
// 9:16 세로형 (Portrait)
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-1page.html');
console.log('Converting 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

32
sam/docs/brochure/v1/convert-2page.cjs
View File

@@ -1,32 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
// 9:16 세로형 (Portrait)
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-2page-front.html', 'brochure-2page-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v1/sam-brochure-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v1/sam-brochure-2page.pptx
View File

Binary file not shown.

210
sam/docs/brochure/v1/slides/brochure-1page.html
View File

@@ -1,210 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0F2439;
padding: 28pt 24pt 18pt 24pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 14pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">PRODUCT BROCHURE 2026</p>
</div>
<!-- 히어로 섹션 -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981; letter-spacing: 0.08em; margin-bottom: 4pt;">SMART AUTOMATION MANAGEMENT</p>
<h1 style="font-size: 19pt; font-weight: 800; color: #ffffff; line-height: 1.3; margin-bottom: 6pt;">중소 제조업을 위한<br>ERP/MES 통합 플랫폼</h1>
<p style="font-size: 8.5pt; color: rgba(255,255,255,0.5); line-height: 1.5;">품목관리, 견적, 수주, 생산, 출하, 품질, 인사/회계까지<br>제조업의 모든 업무를 하나의 시스템으로 통합합니다.</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 12pt;"></div>
<!-- 핵심 과제 -->
<div style="margin-bottom: 12pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #E86F2C; margin-bottom: 6pt;">현재 업무 과제</p>
<div style="display: flex; gap: 5pt;">
<div style="flex: 1; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 5pt; padding: 6pt 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #fff;">Excel 수작업</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">오류 잦음, 시간 낭비</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 5pt; padding: 6pt 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #fff;">현황 파악 불가</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">생산/재고 실시간 X</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 5pt; padding: 6pt 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #fff;">ERP 도입비 부담</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">수천만~수억원</p>
</div>
</div>
</div>
<!-- 핵심 기능 6개 -->
<div style="margin-bottom: 12pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #2E86AB; margin-bottom: 6pt;">SAM 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<!-- Row 1 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(46,134,171,0.08); border: 1pt solid rgba(46,134,171,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">01</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">견적/수주 자동화</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">BOM 전개, 단가 적용, PDF 견적서 자동 생성</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">02</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">생산관리 (MES)</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">바코드/QR 공정추적, 실시간 현황 대시보드</p>
</div>
</div>
<!-- Row 2 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">03</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">품질/검사 관리</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">수입/공정/출하 3단계 검사, 인증 자동 알림</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.08); border: 1pt solid rgba(232,111,44,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #E86F2C; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">04</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">자재/재고 추적</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">안전재고, LOT 추적, 바코드 입출고 관리</p>
</div>
</div>
<!-- Row 3 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(46,134,171,0.08); border: 1pt solid rgba(46,134,171,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">05</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">인사/회계 (무료)</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">근태, 급여, 매입매출, 세금계산서 자동 발행</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">06</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">경영 대시보드</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">수주/생산/매출/품질 KPI 실시간 모니터링</p>
</div>
</div>
</div>
</div>
<!-- 추가 기능 바 -->
<div style="display: flex; gap: 4pt; margin-bottom: 12pt;">
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">전자서명</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">카카오 알림톡</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">AI 실험실</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">바로빌 연동</p>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 12pt;"></div>
<!-- 기대 효과 + 가격 -->
<div style="display: flex; gap: 8pt; margin-bottom: 12pt;">
<!-- 기대 효과 -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">도입 기대 효과</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: rgba(46,134,171,0.1); border: 1pt solid rgba(46,134,171,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">80%</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #2E86AB;">업무 시간 단축</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">95%</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #8B5CF6;">납기 준수율</p>
</div>
</div>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">100%</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #10B981;">이력 추적성</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.1); border: 1pt solid rgba(232,111,44,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">Free</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #E86F2C;">인사/회계 포함</p>
</div>
</div>
</div>
</div>
<!-- 가격 -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #E86F2C; margin-bottom: 6pt;">투자 비용</p>
<div style="background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 6pt; padding: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #E86F2C; margin-bottom: 4pt;">제조업 기본 패키지</p>
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">+ 월 50만원 (유지보수)</p>
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin: 6pt 0;"></div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">품목-견적-수주-생산-출하<br>인사/회계 무료 포함</p>
</div>
</div>
</div>
<!-- 기술 스택 -->
<div style="display: flex; gap: 5pt; margin-bottom: 12pt;">
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 3pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">클라우드 기반 (설치 불필요)</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 3pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">모바일 대응</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 3pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">Multi-tenant</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.08); padding-top: 10pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.7);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">무료 데모 및 상담</p>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

227
sam/docs/brochure/v1/slides/brochure-2page-back.html
View File

@@ -1,227 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0F2439;
padding: 20pt 24pt 10pt 24pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 8pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">FEATURES &amp; PRICING</p>
</div>
<!-- 핵심 모듈 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #2E86AB; margin-bottom: 6pt;">SAM 핵심 모듈</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(46,134,171,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">01</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">품목/BOM 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">품목 마스터, 다단계 BOM 전개, 단가 관리</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(139,92,246,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">02</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">견적/수주 자동화</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">견적서 자동 생성, 수주 전환, PDF 출력</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(16,185,129,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">03</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">생산관리 (MES)</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">작업지시, 바코드/QR 공정추적, 실시간 현황</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(232,111,44,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #E86F2C; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">04</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">출하/물류 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">출하 지시, 거래명세서, 배송 추적</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(46,134,171,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">05</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">품질/검사 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">수입/공정/출하 검사, 인증 만료 자동 알림</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(139,92,246,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">06</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">자재/재고 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">안전재고, 입출고, LOT 추적, 바코드 관리</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(16,185,129,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">07</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">인사/회계 (무료)</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">근태, 급여, 매입매출, 세금계산서 자동 발행</p>
</div>
<!-- 08 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(232,111,44,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #E86F2C; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">08</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">경영 대시보드</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">수주/생산/매출/품질 KPI 실시간 모니터링</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 8pt;"></div>
<!-- 추가 기능 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 6pt;">확장 기능</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">전자서명</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">계약/확인서</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">알림톡</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">카카오 자동발송</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">AI 실험실</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">음성요약/문서분류</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">QR 코드</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">설비/장비 점검</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 8pt;"></div>
<!-- 투자비용 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #E86F2C; margin-bottom: 6pt;">투자 비용</p>
<div style="display: flex; gap: 6pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: rgba(46,134,171,0.08); border: 1pt solid rgba(46,134,171,0.15); border-radius: 6pt; padding: 8pt 10pt; margin-bottom: 4pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2E86AB; margin-bottom: 3pt;">제조업 기본 패키지</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #ffffff;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 3pt 6pt;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">품목 - 견적 - 수주 - 생산 - 출하<br>인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: rgba(232,111,44,0.08); border: 1pt solid rgba(232,111,44,0.15); border-radius: 6pt; padding: 8pt 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #E86F2C; margin-bottom: 4pt;">추가 옵션 (선택)</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">생산공정 추가</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #E86F2C;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #E86F2C;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">사진등록/챗봇/녹음</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #E86F2C;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 8pt;"></div>
<!-- 도입 로드맵 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">도입 프로세스</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(46,134,171,0.1); border: 1pt solid rgba(46,134,171,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #2E86AB;">Step 1</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">현장 인터뷰</p>
</div>
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6;">Step 2</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">2~4주</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">맞춤 개발</p>
</div>
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981;">Step 3</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">데이터 이관</p>
</div>
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(232,111,44,0.1); border: 1pt solid rgba(232,111,44,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #E86F2C;">Step 4</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">교육/안정화</p>
</div>
</div>
</div>
<!-- 외부 연동 -->
<div style="display: flex; gap: 6pt; margin-bottom: 8pt;">
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 5pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">바로빌 API</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">세금계산서 자동</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 5pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">카카오 알림톡</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">점검/납기 알림</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 5pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">이카운트 연동</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">기존 ERP 동기화</p>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.2); border-radius: 8pt; padding: 12pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 7.5pt; color: rgba(255,255,255,0.45); margin-top: 3pt;">귀사에 최적화된 맞춤 데모를 제공합니다</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

122
sam/docs/brochure/v1/slides/brochure-2page-front.html
View File

@@ -1,122 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0F2439;
padding: 32pt 24pt 24pt 24pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 20pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 24pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">PRODUCT BROCHURE 2026</p>
</div>
<!-- 히어로 섹션 -->
<div style="margin-bottom: 20pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981; letter-spacing: 0.08em; margin-bottom: 6pt;">SMART AUTOMATION MANAGEMENT</p>
<h1 style="font-size: 21pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8pt;">중소 제조업을 위한<br>ERP/MES 통합 플랫폼</h1>
<p style="font-size: 9pt; color: rgba(255,255,255,0.5); line-height: 1.6;">품목관리, 견적, 수주, 생산, 출하, 품질, 인사/회계까지<br>제조업의 모든 업무를 하나의 시스템으로 통합합니다.</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 18pt;"></div>
<!-- 현재 과제 -->
<div style="margin-bottom: 18pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #E86F2C; margin-bottom: 8pt;">이런 고민이 있으신가요?</p>
<div style="display: flex; flex-direction: column; gap: 5pt;">
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">Excel 견적서, 수기 전표로 <span style="color: #E86F2C; font-weight: 700;">업무 시간 낭비</span>가 심하다</p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">생산 현황을 <span style="color: #E86F2C; font-weight: 700;">실시간으로 파악</span>할 수 없다</p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">품질/검사 기록이 <span style="color: #E86F2C; font-weight: 700;">체계적으로 관리</span>되지 않는다</p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">ERP 도입비가 <span style="color: #E86F2C; font-weight: 700;">수천만원~수억원</span>으로 부담된다</p>
</div>
</div>
</div>
<!-- SAM 해결 -->
<div style="background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.15); border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 18pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">SAM이 해결합니다</p>
<p style="font-size: 8pt; color: rgba(255,255,255,0.55); line-height: 1.6;">
SAM은 중소 제조업에 특화된 클라우드 ERP/MES 통합 플랫폼입니다.
품목/BOM 관리, 견적 자동화, 바코드 생산추적, 품질검사, 인사/회계까지
별도 설치 없이 웹 브라우저만으로 모든 업무를 통합 관리합니다.
</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 18pt;"></div>
<!-- 기대 효과 4개 -->
<div style="margin-bottom: 18pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #2E86AB; margin-bottom: 10pt;">도입 기대 효과</p>
<div style="display: flex; gap: 6pt;">
<div style="flex: 1; background: rgba(46,134,171,0.1); border: 1pt solid rgba(46,134,171,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">80%</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2E86AB; margin-top: 2pt;">업무 시간 단축</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">95%</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #8B5CF6; margin-top: 2pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">100%</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #10B981; margin-top: 2pt;">이력 추적성</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.1); border: 1pt solid rgba(232,111,44,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">Free</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #E86F2C; margin-top: 2pt;">인사/회계 포함</p>
</div>
</div>
</div>
<!-- 기술 특징 -->
<div style="display: flex; gap: 6pt; margin-bottom: 14pt;">
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 6pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">클라우드 기반</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">설치 불필요</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 6pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">모바일 대응</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">현장 태블릿/폰</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 6pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">Multi-tenant</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">데이터 완전 격리</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.08); padding-top: 12pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.7);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.35);">뒷면에서 상세 기능과 가격을 확인하세요</p>
</div>
</div>
</div>
</body>
</html>

28
sam/docs/brochure/v2/convert-1page.cjs
View File

@@ -1,28 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
// 9:16 세로형 (Portrait)
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v2-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

32
sam/docs/brochure/v2/convert-2page.cjs
View File

@@ -1,32 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
// 9:16 세로형 (Portrait)
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v2-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v2/sam-brochure-v2-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v2/sam-brochure-v2-dashboard-2page.pptx
View File

Binary file not shown.

261
sam/docs/brochure/v2/slides/brochure-dashboard-1page.html
View File

@@ -1,261 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 24pt 22pt 14pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 12pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">CEO DASHBOARD EDITION 2026</p>
</div>
<!-- 히어로 섹션 -->
<div style="margin-bottom: 12pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 4pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 18pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 5pt;">대표님, 지금 우리 회사<br>어떻게 돌아가고 있나요?</h1>
<p style="font-size: 8pt; color: rgba(255,255,255,0.45); line-height: 1.5;">보고를 기다리지 마세요. SAM 대시보드 하나면<br>매출, 수주, 조직 실적, 승인 대기까지 한눈에 파악합니다.</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 10pt;"></div>
<!-- 대시보드 미리보기 (Mock UI) -->
<div style="background: #111D2E; border: 1pt solid rgba(14,165,233,0.15); border-radius: 8pt; padding: 10pt; margin-bottom: 10pt;">
<!-- 대시보드 타이틀바 -->
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 8pt;">
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-left: 6pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 4개 -->
<div style="display: flex; gap: 4pt; margin-bottom: 6pt;">
<div style="flex: 1; background: rgba(14,165,233,0.12); border: 1pt solid rgba(14,165,233,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #0EA5E9; font-weight: 600;">월 매출</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">5.2억</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">+15.3%</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.12); border: 1pt solid rgba(16,185,129,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">수주 잔량</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">+8건</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.12); border: 1pt solid rgba(139,92,246,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #8B5CF6; font-weight: 600;">납기 준수율</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">목표 초과</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.12); border: 1pt solid rgba(239,68,68,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #EF4444; font-weight: 600;">승인 대기</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">5건</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #EF4444; font-weight: 600;">즉시 처리</p>
</div>
</div>
<!-- 차트 영역 (간략 Mock) -->
<div style="display: flex; gap: 4pt;">
<!-- 매출 추이 차트 -->
<div style="flex: 3; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-bottom: 4pt;">월별 매출 추이</p>
<div style="display: flex; align-items: flex-end; gap: 3pt; height: 32pt;">
<div style="flex: 1; background: rgba(14,165,233,0.25); border-radius: 1.5pt; height: 45%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.3); border-radius: 1.5pt; height: 52%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.35); border-radius: 1.5pt; height: 48%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.4); border-radius: 1.5pt; height: 60%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.5); border-radius: 1.5pt; height: 68%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.6); border-radius: 1.5pt; height: 75%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.7); border-radius: 1.5pt; height: 72%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.8); border-radius: 1.5pt; height: 85%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.9); border-radius: 1.5pt; height: 82%;"></div>
<div style="flex: 1; background: #0EA5E9; border-radius: 1.5pt; height: 95%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.5); border-radius: 1.5pt; height: 70%; border: 1pt dashed rgba(14,165,233,0.5);"></div>
<div style="flex: 1; background: rgba(14,165,233,0.3); border-radius: 1.5pt; height: 50%; border: 1pt dashed rgba(14,165,233,0.3);"></div>
</div>
</div>
<!-- 조직 실적 -->
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-bottom: 3pt;">조직별 실적</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">영업1팀</p>
<div style="width: 50pt; height: 4pt; background: rgba(14,165,233,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 85%; height: 100%; background: #0EA5E9; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">영업2팀</p>
<div style="width: 50pt; height: 4pt; background: rgba(16,185,129,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 68%; height: 100%; background: #10B981; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">생산팀</p>
<div style="width: 50pt; height: 4pt; background: rgba(139,92,246,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 92%; height: 100%; background: #8B5CF6; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">품질팀</p>
<div style="width: 50pt; height: 4pt; background: rgba(245,158,11,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 75%; height: 100%; background: #F59E0B; border-radius: 2pt;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 3개 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.12); border-radius: 6pt; padding: 7pt 6pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<div style="width: 16pt; height: 16pt; background: #0EA5E9; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 8pt; font-weight: 800; color: #fff; white-space: nowrap;">1</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">즉시 현황 파악</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">보고를 기다릴 필요 없이<br>로그인만으로 전사 현황 확인</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 6pt; padding: 7pt 6pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<div style="width: 16pt; height: 16pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 8pt; font-weight: 800; color: #fff; white-space: nowrap;">2</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">데이터 기반 의사결정</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">감이 아닌 숫자로 판단<br>매출 추이, KPI, 팀 성과 비교</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 6pt; padding: 7pt 6pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<div style="width: 16pt; height: 16pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 8pt; font-weight: 800; color: #fff; white-space: nowrap;">3</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">빠른 승인/결재</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">대기 건수를 실시간 알림<br>모바일에서도 즉시 승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 10pt;"></div>
<!-- 대시보드 상세 기능 6개 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">실시간 <span style="color: #0EA5E9; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #EF4444; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">미승인 건수 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #EC4899; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 10pt;"></div>
<!-- Before/After 비교 -->
<div style="display: flex; gap: 6pt; margin-bottom: 10pt;">
<!-- Before -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #EF4444; margin-bottom: 5pt;">BEFORE</p>
<div style="background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 6pt 8pt;">
<div style="display: flex; flex-direction: column; gap: 3pt;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"매출 얼마야?" → 보고 대기 1~2일</p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"수주 현황?" → Excel 취합 반나절</p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"승인할 것 있어?" → 서류 뒤지기</p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"팀별 실적?" → 각 팀장 개별 보고</p>
</div>
</div>
</div>
<!-- After -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">AFTER (SAM)</p>
<div style="background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 6pt 8pt;">
<div style="display: flex; flex-direction: column; gap: 3pt;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">로그인 → <span style="color: #10B981; font-weight: 700;">3초만에 전사 현황</span></p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">클릭 한 번 → <span style="color: #10B981; font-weight: 700;">실시간 수주 데이터</span></p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">빨간 뱃지 → <span style="color: #10B981; font-weight: 700;">즉시 승인 처리</span></p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">트리 구조 → <span style="color: #10B981; font-weight: 700;">전 조직 실적 한눈에</span></p>
</div>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">PC + 모바일</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">실시간 업데이트</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">역할별 권한</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">클라우드 기반</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">데이터 암호화</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.65);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

242
sam/docs/brochure/v2/slides/brochure-dashboard-back.html
View File

@@ -1,242 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 20pt 22pt 12pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">DASHBOARD FEATURES &amp; PRICING</p>
</div>
<!-- 대시보드 상세 기능 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(14,165,233,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #0EA5E9; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">01</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">실시간 KPI 카드</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">월 매출, 수주 잔량, 납기 준수율, 승인 대기 한눈에</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(16,185,129,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">02</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">조직 실적 트리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">계층 구조로 각 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(139,92,246,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">03</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">역할별 수당 현황</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">판매자/관리자/협업자 수당 배분 실시간 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(239,68,68,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #EF4444; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">04</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">승인 대기 알림</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">가입/지급 승인 미처리 건수 빨간 뱃지로 강조</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(245,158,11,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #F59E0B; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">05</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">기간별 트렌드</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">당월/분기/연간 매출 추이 차트, 성장률 비교</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(236,72,153,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #EC4899; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">06</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">수익 시뮬레이터</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">가상 시나리오로 수당/마진 사전 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(14,165,233,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #0EA5E9; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">07</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">모바일 대응</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">이동중에도 스마트폰으로 KPI 확인 및 승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
<!-- 역할별 화면 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(14,165,233,0.08); border: 1pt solid rgba(14,165,233,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #0EA5E9; margin-bottom: 2pt;">CEO</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">전사 KPI</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">매출/수주/조직 총괄</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #10B981; margin-bottom: 2pt;">관리자</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">팀 실적 관리</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">하위 조직 성과 추적</p>
</div>
<div style="flex: 1; background: rgba(245,158,11,0.08); border: 1pt solid rgba(245,158,11,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #F59E0B; margin-bottom: 2pt;">운영자</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">인력/승인 관리</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">가입/지급 승인 처리</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #8B5CF6; margin-bottom: 2pt;">영업자</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">내 실적 조회</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">계약/수당 현황 확인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
<!-- SAM 전체 플랫폼 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 6pt;">대시보드 + SAM 통합 플랫폼</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">견적/수주</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">생산 (MES)</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">품질/검사</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">재고/자재</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">인사/회계</p>
</div>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 3pt; text-align: center;">대시보드에 표시되는 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 6pt;">투자 비용</p>
<div style="display: flex; gap: 6pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: rgba(14,165,233,0.08); border: 1pt solid rgba(14,165,233,0.15); border-radius: 6pt; padding: 8pt 10pt; margin-bottom: 3pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0EA5E9; margin-bottom: 3pt;">대시보드 포함 기본 패키지</p>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #ffffff;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 3pt 6pt;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.35); line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: rgba(245,158,11,0.08); border: 1pt solid rgba(245,158,11,0.15); border-radius: 6pt; padding: 8pt 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B; margin-bottom: 4pt;">추가 옵션 (선택)</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
<!-- 도입 프로세스 -->
<div style="margin-bottom: 8pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">도입 프로세스</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(14,165,233,0.1); border: 1pt solid rgba(14,165,233,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">1</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">현장 인터뷰</p>
</div>
<div style="display: flex; align-items: center;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.2);">&#9654;</p>
</div>
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981;">2</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">맞춤 개발</p>
</div>
<div style="display: flex; align-items: center;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.2);">&#9654;</p>
</div>
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6;">3</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">데이터 이관</p>
</div>
<div style="display: flex; align-items: center;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.2);">&#9654;</p>
</div>
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(245,158,11,0.1); border: 1pt solid rgba(245,158,11,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B;">4</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(14,165,233,0.08); border: 1.5pt solid rgba(14,165,233,0.2); border-radius: 8pt; padding: 10pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">대표님 전용 대시보드를 직접 체험해 보세요</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.18);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

172
sam/docs/brochure/v2/slides/brochure-dashboard-front.html
View File

@@ -1,172 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 28pt 24pt 20pt 24pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 18pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25);">CEO DASHBOARD EDITION</p>
</div>
<!-- 히어로 섹션 -->
<div style="margin-bottom: 22pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 6pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 20pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8pt;">대표님, 지금 우리 회사<br>어떻게 돌아가고 있나요?</h1>
<p style="font-size: 8.5pt; color: rgba(255,255,255,0.45); line-height: 1.6;">매출이 얼마인지, 수주가 밀려있는지, 승인할 건이 있는지<br>더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 18pt;"></div>
<!-- 고민 섹션 -->
<div style="margin-bottom: 18pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #EF4444; margin-bottom: 8pt;">대표님의 하루</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 7pt 10pt;">
<p style="white-space: nowrap; font-size: 9pt; color: rgba(255,255,255,0.3);">AM 9:00</p>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"어제 매출 얼마야?" → <span style="color: #EF4444; font-weight: 600;">팀장 보고 대기중...</span></p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 7pt 10pt;">
<p style="white-space: nowrap; font-size: 9pt; color: rgba(255,255,255,0.3);">PM 2:00</p>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"수주 밀린 거 없어?" → <span style="color: #EF4444; font-weight: 600;">Excel 취합중...</span></p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 7pt 10pt;">
<p style="white-space: nowrap; font-size: 9pt; color: rgba(255,255,255,0.3);">PM 5:00</p>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"결재할 것 좀 정리해줘" → <span style="color: #EF4444; font-weight: 600;">서류 찾는중...</span></p>
</div>
</div>
</div>
<!-- 화살표 구분 -->
<div style="text-align: center; margin-bottom: 14pt;">
<p style="font-size: 10pt; color: rgba(14,165,233,0.6);">&#9660;</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">SAM으로 바꾸면</p>
</div>
<!-- 대시보드 미리보기 (Mock UI) -->
<div style="background: #111D2E; border: 1.5pt solid rgba(14,165,233,0.2); border-radius: 8pt; padding: 10pt; margin-bottom: 18pt;">
<!-- 대시보드 타이틀바 -->
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 7pt;">
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-left: 6pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
</div>
<!-- KPI 카드 -->
<div style="display: flex; gap: 4pt; margin-bottom: 5pt;">
<div style="flex: 1; background: rgba(14,165,233,0.12); border: 1pt solid rgba(14,165,233,0.2); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #0EA5E9; font-weight: 600;">월 매출</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.12); border: 1pt solid rgba(16,185,129,0.2); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">누적 수주</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.12); border: 1pt solid rgba(139,92,246,0.2); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600;">납기 준수율</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.15); border: 1pt solid rgba(239,68,68,0.25); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600;">승인 대기</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
</div>
</div>
<!-- 차트 (바 그래프) -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-bottom: 3pt;">월별 매출 추이</p>
<div style="display: flex; align-items: flex-end; gap: 2pt; height: 30pt;">
<div style="flex: 1; background: rgba(14,165,233,0.3); border-radius: 1pt; height: 45%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.35); border-radius: 1pt; height: 52%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.4); border-radius: 1pt; height: 48%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.5); border-radius: 1pt; height: 62%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.55); border-radius: 1pt; height: 68%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.65); border-radius: 1pt; height: 75%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.7); border-radius: 1pt; height: 72%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.8); border-radius: 1pt; height: 85%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.85); border-radius: 1pt; height: 80%;"></div>
<div style="flex: 1; background: #0EA5E9; border-radius: 1pt; height: 95%;"></div>
</div>
</div>
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-bottom: 3pt;">조직별 실적</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45); width: 28pt;">영업1팀</p>
<div style="flex: 1; height: 4pt; background: rgba(14,165,233,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 85%; height: 100%; background: #0EA5E9; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45); width: 28pt;">영업2팀</p>
<div style="flex: 1; height: 4pt; background: rgba(16,185,129,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 68%; height: 100%; background: #10B981; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45); width: 28pt;">생산팀</p>
<div style="flex: 1; height: 4pt; background: rgba(139,92,246,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 92%; height: 100%; background: #8B5CF6; border-radius: 2pt;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 -->
<div style="background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.12); border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #0EA5E9; margin-bottom: 5pt;">SAM 대시보드가 드리는 약속</p>
<p style="font-size: 8pt; color: rgba(255,255,255,0.5); line-height: 1.6;">
로그인 한 번이면 전사 매출, 수주, 조직 실적, 승인 대기 건수를
한눈에 파악합니다. 보고를 기다리는 시간을 제로로 만들어 드립니다.
</p>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 5pt; margin-bottom: 10pt;">
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 4pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">클라우드 기반 (설치 불필요)</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 4pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">모바일 대응</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 4pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">역할별 권한 분리</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 10pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.65);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">뒷면에서 상세 기능을 확인하세요</p>
</div>
</div>
</div>
</body>
</html>

27
sam/docs/brochure/v3/convert-1page.cjs
View File

@@ -1,27 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v3 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v3-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

31
sam/docs/brochure/v3/convert-2page.cjs
View File

@@ -1,31 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v3-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v3/sam-brochure-v3-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v3/sam-brochure-v3-dashboard-2page.pptx
View File

Binary file not shown.

405
sam/docs/brochure/v3/slides/brochure-dashboard-1page.html
View File

@@ -1,405 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 22pt 20pt 12pt 20pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">CEO DASHBOARD v3</p>
</div>
<!-- 히어로 -->
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 16pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.4); line-height: 1.5;">보고 대기 없이, 로그인 한 번이면<br>전사 현황이 한눈에 들어옵니다.</p>
</div>
<!-- 히어로 SVG 아이콘: 대시보드 모니터 -->
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.6"/>
<rect x="12" y="14" width="56" height="36" rx="2" fill="#111D2E"/>
<!-- 미니 차트 바 -->
<rect x="16" y="38" width="6" height="8" rx="1" fill="#0EA5E9" opacity="0.5"/>
<rect x="24" y="34" width="6" height="12" rx="1" fill="#0EA5E9" opacity="0.65"/>
<rect x="32" y="30" width="6" height="16" rx="1" fill="#0EA5E9" opacity="0.8"/>
<rect x="40" y="26" width="6" height="20" rx="1" fill="#0EA5E9" opacity="0.9"/>
<rect x="48" y="22" width="6" height="24" rx="1" fill="#0EA5E9"/>
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
<!-- 상단 KPI 표시 -->
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.7"/>
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.7"/>
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
<!-- 모니터 받침대 -->
<rect x="32" y="54" width="16" height="3" rx="1" fill="#0EA5E9" opacity="0.4"/>
<rect x="28" y="57" width="24" height="2" rx="1" fill="#0EA5E9" opacity="0.3"/>
<!-- 와이파이 시그널 -->
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.15); margin-bottom: 10pt;"></div>
<!-- 대시보드 Mock UI -->
<div style="background: #111D2E; border: 1pt solid rgba(14,165,233,0.12); border-radius: 7pt; padding: 8pt; margin-bottom: 9pt;">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.25); margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 4개 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<!-- 월 매출 -->
<div style="flex: 1; background: rgba(14,165,233,0.1); border: 1pt solid rgba(14,165,233,0.18); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#0EA5E9" opacity="0.4"/>
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#0EA5E9" opacity="0.65"/>
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#0EA5E9"/>
<path d="M3 16 L17 16" stroke="#0EA5E9" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<!-- 수주 잔량 -->
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.18); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
</div>
<!-- 납기 준수율 -->
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.18); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<!-- 승인 대기 -->
<div style="flex: 1; background: rgba(239,68,68,0.12); border: 1pt solid rgba(239,68,68,0.22); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 차트 영역 -->
<div style="display: flex; gap: 4pt;">
<!-- 매출 추이 (라인 차트 SVG) -->
<div style="flex: 3; background: rgba(255,255,255,0.02); border-radius: 4pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.3); margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
<!-- 그리드 라인 -->
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<!-- 영역 채우기 -->
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="url(#areaGrad)" opacity="0.4"/>
<!-- 라인 -->
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 데이터 포인트 -->
<circle cx="140" cy="5" r="2.5" fill="#0EA5E9"/>
<circle cx="155" cy="8" r="2" fill="#0EA5E9" opacity="0.5" stroke="#0EA5E9" stroke-width="0.5" stroke-dasharray="1 1"/>
<defs>
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<!-- 도넛 차트: 팀별 비중 -->
<div style="flex: 2; background: rgba(255,255,255,0.02); border-radius: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
<!-- 배경 원 -->
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="5"/>
<!-- 영업1팀 38% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#0EA5E9" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
<!-- 영업2팀 25% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
<!-- 생산팀 22% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
<!-- 품질팀 15% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">영업1팀 38%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">영업2팀 25%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">생산팀 22%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">품질팀 15%</p>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 3개 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 5pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<!-- 즉시 현황 파악 -->
<div style="flex: 1; background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.1); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="10" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="14" r="1.5" fill="#0EA5E9"/>
<!-- 번개 (빠름) -->
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
</div>
<!-- 데이터 기반 의사결정 -->
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.1); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<!-- 뇌 (의사결정) -->
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<!-- 데이터 포인트 -->
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
</div>
<!-- 빠른 승인 -->
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.1); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<!-- 체크마크 원 -->
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 모바일 아이콘 -->
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">모바일 승인</p>
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(139,92,246,0.15); margin-bottom: 9pt;"></div>
<!-- 대시보드 6대 기능 (SVG 아이콘 + 텍스트) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; gap: 2pt;">
<!-- 01 실시간 KPI -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(14,165,233,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#0EA5E9" opacity="0.5"/>
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#0EA5E9" opacity="0.75"/>
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#0EA5E9"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">실시간 <span style="color: #0EA5E9; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<!-- 02 조직 트리 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<!-- 03 수당 현황 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<!-- 04 승인 알림 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<!-- 05 트렌드 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<!-- 06 시뮬레이터 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(236,72,153,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="14" cy="13" r="3.5" fill="#0B1929" stroke="#EC4899" stroke-width="0.8"/>
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 9pt;"></div>
<!-- Before → After 인포그래픽 -->
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
<!-- Before -->
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">매출? → 보고 대기 1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">수주? → Excel 취합 반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">승인? → 서류 찾기 30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">실적? → 각 팀장 개별 보고</p>
</div>
<!-- 화살표 -->
<div style="display: flex; align-items: center; flex-shrink: 0;">
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10 L14 10" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- After -->
<div style="flex: 5; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.08); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="3.5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.6" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">실시간 업데이트</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.5" fill="rgba(255,255,255,0.3)"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<circle cx="5" cy="5" r="1.5" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.6"/>
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="rgba(255,255,255,0.2)" stroke-width="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">역할별 권한</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<line x1="5" y1="4" x2="5" y2="6" stroke="rgba(255,255,255,0.3)" stroke-width="0.6" stroke-linecap="round"/>
<circle cx="5" cy="3.5" r="0.5" fill="rgba(255,255,255,0.3)"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">데이터 암호화</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M2 7 Q5 3 8 7" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.8" fill="rgba(255,255,255,0.3)"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">클라우드</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25);">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

373
sam/docs/brochure/v3/slides/brochure-dashboard-back.html
View File

@@ -1,373 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 20pt 22pt 12pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">FEATURES &amp; PRICING</p>
</div>
<!-- 대시보드 7대 기능 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="11" width="4" height="6" rx="0.5" fill="#0EA5E9" opacity="0.45"/>
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#0EA5E9"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">실시간 KPI 카드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="4.5" r="2.5" fill="none" stroke="#10B981" stroke-width="1.1"/>
<line x1="10" y1="7" x2="10" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<line x1="5" y1="9.5" x2="15" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<circle cx="5" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="10" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="15" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<line x1="5" y1="9.5" x2="5" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="10" y1="9.5" x2="10" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="15" y1="9.5" x2="15" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="3" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<circle cx="7" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<line x1="5" y1="15" x2="3" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="5" y1="15" x2="7" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">조직 실적 트리</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="10" r="7.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="10" y="12.5" text-anchor="middle" fill="#8B5CF6" font-size="9" font-weight="800">&#8361;</text>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">역할별 수당 현황</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M10 3 C6 3 3 6 3 9.5 L3 13 L1.5 14.5 L18.5 14.5 L17 13 L17 9.5 C17 6 14 3 10 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
<circle cx="15" cy="5" r="3.5" fill="#EF4444"/>
<text x="15" y="7" text-anchor="middle" fill="#fff" font-size="4.5" font-weight="800">!</text>
<path d="M7.5 15.5 Q10 18 12.5 15.5" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">승인 대기 알림</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 15 L7 11 L10 13 L16 5" fill="none" stroke="#F59E0B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">기간별 트렌드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.4"/>
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="10" x2="12" y2="10" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="15.5" cy="14.5" r="3.5" fill="#0B1929" stroke="#EC4899" stroke-width="0.9"/>
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">수익 시뮬레이터</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="5" y="2" width="10" height="16" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
<circle cx="10" cy="16" r="1" fill="#0EA5E9" opacity="0.5"/>
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(14,165,233,0.15)"/>
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#0EA5E9" opacity="0.4"/>
<rect x="8" y="8.5" width="4" height="1.5" rx="0.3" fill="#10B981" opacity="0.4"/>
<rect x="8" y="11" width="4" height="1.5" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">모바일 대응</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.15); margin-bottom: 8pt;"></div>
<!-- 역할별 맞춤 화면 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 4pt;">
<!-- CEO -->
<div style="flex: 1; background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #0EA5E9;">CEO</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">전사 KPI 총괄</p>
</div>
<!-- 관리자 -->
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1" opacity="0.6"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #10B981;">관리자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">팀 실적 관리</p>
</div>
<!-- 운영자 -->
<div style="flex: 1; background: rgba(245,158,11,0.06); border: 1pt solid rgba(245,158,11,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.4"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#F59E0B" stroke-width="1.2"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #F59E0B;">운영자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">인력/승인 관리</p>
</div>
<!-- 영업자 -->
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #8B5CF6;">영업자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(139,92,246,0.15); margin-bottom: 8pt;"></div>
<!-- SAM 통합 플랫폼 연결 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 5pt;">대시보드 + SAM ERP/MES 통합</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="1.5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<line x1="5" y1="6" x2="11" y2="6" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
<line x1="5" y1="8" x2="9" y2="8" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
<line x1="5" y1="10" x2="11" y2="10" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">견적/수주</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<circle cx="8" cy="8" r="2" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
<line x1="8" y1="3" x2="8" y2="4.5" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
<line x1="13" y1="8" x2="11.5" y2="8" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">생산 MES</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M5 3 L11 3 L13 6 L8 14 L3 6 Z" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<path d="M3 6 L13 6" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
<path d="M8 6 L8 14" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">품질/검사</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="4" width="10" height="9" rx="1" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<line x1="3" y1="7" x2="13" y2="7" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
<line x1="8" y1="7" x2="8" y2="13" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">재고/자재</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="6" r="3" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<path d="M3 14 Q3 10 8 10 Q13 10 13 14" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">인사/회계</p>
</div>
</div>
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.25); margin-top: 3pt; text-align: center;">대시보드의 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.05); margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">투자 비용</p>
<div style="display: flex; gap: 5pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: rgba(14,165,233,0.07); border: 1pt solid rgba(14,165,233,0.14); border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="12" height="12" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0EA5E9;">대시보드 포함 기본 패키지</p>
</div>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #ffffff;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: rgba(255,255,255,0.02); border-radius: 3pt; padding: 3pt 5pt;">
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.3); line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: rgba(245,158,11,0.07); border: 1pt solid rgba(245,158,11,0.14); border-radius: 6pt; padding: 7pt 8pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 4pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B;">추가 옵션 (선택)</p>
</div>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45);">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45);">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45);">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.05); margin-bottom: 8pt;"></div>
<!-- 도입 프로세스 (SVG 화살표 연결) -->
<div style="margin-bottom: 6pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(14,165,233,0.08); border: 1pt solid rgba(14,165,233,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="5" r="3" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#0EA5E9" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">현장 인터뷰</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="#10B981" stroke-width="0.8"/>
<line x1="6" y1="5" x2="10" y2="5" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="7" x2="10" y2="7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="9" x2="10" y2="9" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="11" x2="9" y2="11" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">맞춤 개발</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<rect x="9" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8"/>
<path d="M7 7 L9 8 M7 8 L9 7" stroke="#8B5CF6" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">데이터 이관</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(245,158,11,0.08); border: 1pt solid rgba(245,158,11,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 8 L8 14 L2 8 Z" fill="none" stroke="#F59E0B" stroke-width="0.8"/>
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(14,165,233,0.06); border: 1.5pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 9pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.5"/>
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.15);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

262
sam/docs/brochure/v3/slides/brochure-dashboard-front.html
View File

@@ -1,262 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 26pt 22pt 16pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 16pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">CEO DASHBOARD v3</p>
</div>
<!-- 히어로 섹션 -->
<div style="display: flex; align-items: center; gap: 14pt; margin-bottom: 18pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 19pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 8pt; color: rgba(255,255,255,0.4); line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기<br>더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- 히어로 아이콘 -->
<div style="flex-shrink: 0; width: 80pt; height: 80pt;">
<svg viewBox="0 0 90 90" width="80pt" height="80pt" xmlns="http://www.w3.org/2000/svg">
<!-- 모니터 외곽 -->
<rect x="8" y="10" width="74" height="50" rx="5" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.5"/>
<rect x="12" y="14" width="66" height="42" rx="3" fill="#111D2E"/>
<!-- KPI 미니 카드들 -->
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(14,165,233,0.2)"/>
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.2)"/>
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.2)"/>
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.2)"/>
<!-- 미니 차트 -->
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25 L75 50 L16 50 Z" fill="url(#heroGrad)" opacity="0.3"/>
<!-- 도넛 -->
<circle cx="25" cy="50" r="0" fill="none"/>
<!-- 모니터 받침 -->
<rect x="36" y="60" width="18" height="3" rx="1" fill="#0EA5E9" opacity="0.3"/>
<rect x="32" y="63" width="26" height="2" rx="1" fill="#0EA5E9" opacity="0.2"/>
<!-- 알림 뱃지 -->
<circle cx="73" cy="14" r="5" fill="#EF4444" opacity="0.9"/>
<text x="73" y="16.5" text-anchor="middle" fill="#fff" font-size="6" font-weight="800">5</text>
<!-- 와이파이 -->
<path d="M66 72 Q72 66 78 72" fill="none" stroke="#10B981" stroke-width="1" opacity="0.4"/>
<path d="M63 76 Q72 68 81 76" fill="none" stroke="#10B981" stroke-width="1" opacity="0.25"/>
<circle cx="72" cy="76" r="1.5" fill="#10B981" opacity="0.5"/>
<defs>
<linearGradient id="heroGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.15); margin-bottom: 16pt;"></div>
<!-- 고민 섹션 (타임라인 인포그래픽) -->
<div style="margin-bottom: 16pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #EF4444; margin-bottom: 8pt;">대표님의 하루</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<!-- AM 9:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L17 15" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">9AM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"어제 매출 얼마야?" → <span style="color: #EF4444; font-weight: 600;">팀장 보고 대기중...</span></p>
</div>
</div>
<!-- PM 2:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L9 16" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">2PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"수주 밀린 거 없어?" → <span style="color: #EF4444; font-weight: 600;">Excel 취합중...</span></p>
</div>
</div>
<!-- PM 5:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L8 12" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">5PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"결재할 것 정리해줘" → <span style="color: #EF4444; font-weight: 600;">서류 찾는중...</span></p>
</div>
</div>
</div>
</div>
<!-- 전환 화살표 -->
<div style="text-align: center; margin-bottom: 12pt;">
<svg viewBox="0 0 40 24" width="40pt" height="16pt" xmlns="http://www.w3.org/2000/svg">
<path d="M10 6 L20 18 L30 6" fill="none" stroke="#0EA5E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0EA5E9;">SAM 도입 후</p>
</div>
<!-- 대시보드 Mock UI -->
<div style="background: #111D2E; border: 1.5pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 9pt; margin-bottom: 16pt;">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.25); margin-left: 5pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
</div>
<!-- KPI 카드 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: rgba(14,165,233,0.1); border: 1pt solid rgba(14,165,233,0.18); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#0EA5E9" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#0EA5E9"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.18); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.18); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.12); border: 1pt solid rgba(239,68,68,0.22); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 라인 차트 + 도넛 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: rgba(255,255,255,0.02); border-radius: 3pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.3); margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 35" width="100%" height="26pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7 L135 33 L5 33 Z" fill="url(#fGrad)" opacity="0.35"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7" fill="none" stroke="#0EA5E9" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="4" r="2" fill="#0EA5E9"/>
<defs>
<linearGradient id="fGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<div style="flex: 2; background: rgba(255,255,255,0.02); border-radius: 3pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 4pt;">
<svg viewBox="0 0 40 40" width="30pt" height="30pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="4.5"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#0EA5E9" stroke-width="4.5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4.5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="4.5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4.5" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 약속 박스 -->
<div style="background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.1); border-radius: 7pt; padding: 10pt 12pt; margin-bottom: 12pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
<path d="M7 11 L10 14 L15 8" fill="none" stroke="#0EA5E9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0EA5E9;">SAM 대시보드가 드리는 약속</p>
<p style="font-size: 7pt; color: rgba(255,255,255,0.45); margin-top: 2pt; line-height: 1.5;">로그인 한 번이면 전사 매출, 수주, 승인 대기를 한눈에.<br>보고를 기다리는 시간을 제로로 만들어 드립니다.</p>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="rgba(255,255,255,0.3)"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">클라우드 기반</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="rgba(255,255,255,0.3)"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.5"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">역할별 권한</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">뒷면에서 상세 기능을 확인하세요 &#9654;</p>
</div>
</div>
</div>
</body>
</html>

27
sam/docs/brochure/v4/convert-1page.cjs
View File

@@ -1,27 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v4 (Light) 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v4-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

31
sam/docs/brochure/v4/convert-2page.cjs
View File

@@ -1,31 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v4-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v4/sam-brochure-v4-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v4/sam-brochure-v4-dashboard-2page.pptx
View File

Binary file not shown.

405
sam/docs/brochure/v4/slides/brochure-dashboard-1page.html
View File

@@ -1,405 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #F8FAFC;
padding: 22pt 20pt 12pt 20pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1;">CEO DASHBOARD v4</p>
</div>
<!-- 히어로 -->
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 16pt; font-weight: 800; color: #0F172A; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 7.5pt; color: #64748B; line-height: 1.5;">보고 대기 없이, 로그인 한 번이면<br>전사 현황이 한눈에 들어옵니다.</p>
</div>
<!-- 히어로 SVG 아이콘: 대시보드 모니터 -->
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.6"/>
<rect x="12" y="14" width="56" height="36" rx="2" fill="#FFFFFF"/>
<!-- 미니 차트 바 -->
<rect x="16" y="38" width="6" height="8" rx="1" fill="#0EA5E9" opacity="0.5"/>
<rect x="24" y="34" width="6" height="12" rx="1" fill="#0EA5E9" opacity="0.65"/>
<rect x="32" y="30" width="6" height="16" rx="1" fill="#0EA5E9" opacity="0.8"/>
<rect x="40" y="26" width="6" height="20" rx="1" fill="#0EA5E9" opacity="0.9"/>
<rect x="48" y="22" width="6" height="24" rx="1" fill="#0EA5E9"/>
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
<!-- 상단 KPI 표시 -->
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.7"/>
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.7"/>
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
<!-- 모니터 받침대 -->
<rect x="32" y="54" width="16" height="3" rx="1" fill="#0EA5E9" opacity="0.4"/>
<rect x="28" y="57" width="24" height="2" rx="1" fill="#0EA5E9" opacity="0.3"/>
<!-- 와이파이 시그널 -->
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.2); margin-bottom: 10pt;"></div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 7pt; padding: 8pt; margin-bottom: 9pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.06);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8; margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 4개 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<!-- 월 매출 -->
<div style="flex: 1; background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#0EA5E9" opacity="0.4"/>
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#0EA5E9" opacity="0.65"/>
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#0EA5E9"/>
<path d="M3 16 L17 16" stroke="#0EA5E9" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<!-- 수주 잔량 -->
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
</div>
<!-- 납기 준수율 -->
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<!-- 승인 대기 -->
<div style="flex: 1; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 차트 영역 -->
<div style="display: flex; gap: 4pt;">
<!-- 매출 추이 (라인 차트 SVG) -->
<div style="flex: 3; background: #F8FAFC; border-radius: 4pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
<!-- 그리드 라인 -->
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<!-- 영역 채우기 -->
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="url(#areaGrad)" opacity="0.4"/>
<!-- 라인 -->
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 데이터 포인트 -->
<circle cx="140" cy="5" r="2.5" fill="#0EA5E9"/>
<circle cx="155" cy="8" r="2" fill="#0EA5E9" opacity="0.5" stroke="#0EA5E9" stroke-width="0.5" stroke-dasharray="1 1"/>
<defs>
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<!-- 도넛 차트: 팀별 비중 -->
<div style="flex: 2; background: #F8FAFC; border-radius: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
<!-- 배경 원 -->
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(15,23,42,0.06)" stroke-width="5"/>
<!-- 영업1팀 38% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#0EA5E9" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
<!-- 영업2팀 25% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
<!-- 생산팀 22% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
<!-- 품질팀 15% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">영업1팀 38%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">영업2팀 25%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">생산팀 22%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">품질팀 15%</p>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 3개 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 5pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<!-- 즉시 현황 파악 -->
<div style="flex: 1; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.12); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="10" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="14" r="1.5" fill="#0EA5E9"/>
<!-- 번개 (빠름) -->
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #0F172A; white-space: nowrap;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
</div>
<!-- 데이터 기반 의사결정 -->
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<!-- 뇌 (의사결정) -->
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<!-- 데이터 포인트 -->
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #0F172A; white-space: nowrap;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
</div>
<!-- 빠른 승인 -->
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<!-- 체크마크 원 -->
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 모바일 아이콘 -->
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #0F172A; white-space: nowrap;">모바일 승인</p>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(139,92,246,0.2); margin-bottom: 9pt;"></div>
<!-- 대시보드 6대 기능 (SVG 아이콘 + 텍스트) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; gap: 2pt;">
<!-- 01 실시간 KPI -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#0EA5E9" opacity="0.5"/>
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#0EA5E9" opacity="0.75"/>
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#0EA5E9"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">실시간 <span style="color: #0EA5E9; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<!-- 02 조직 트리 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<!-- 03 수당 현황 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<!-- 04 승인 알림 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<!-- 05 트렌드 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<!-- 06 시뮬레이터 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="14" cy="13" r="3.5" fill="#F8FAFC" stroke="#EC4899" stroke-width="0.8"/>
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 9pt;"></div>
<!-- Before → After 인포그래픽 -->
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
<!-- Before -->
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">매출? → 보고 대기 1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">수주? → Excel 취합 반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">승인? → 서류 찾기 30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">실적? → 각 팀장 개별 보고</p>
</div>
<!-- 화살표 -->
<div style="display: flex; align-items: center; flex-shrink: 0;">
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10 L14 10" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- After -->
<div style="flex: 5; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="3.5" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="#94A3B8" stroke-width="0.6" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">실시간 업데이트</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.5" fill="#94A3B8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<circle cx="5" cy="5" r="1.5" fill="none" stroke="#94A3B8" stroke-width="0.6"/>
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="#94A3B8" stroke-width="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">역할별 권한</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<line x1="5" y1="4" x2="5" y2="6" stroke="#94A3B8" stroke-width="0.6" stroke-linecap="round"/>
<circle cx="5" cy="3.5" r="0.5" fill="#94A3B8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">데이터 암호화</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M2 7 Q5 3 8 7" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.8" fill="#94A3B8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">클라우드</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #475569;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

373
sam/docs/brochure/v4/slides/brochure-dashboard-back.html
View File

@@ -1,373 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #F8FAFC;
padding: 20pt 22pt 12pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1;">FEATURES &amp; PRICING</p>
</div>
<!-- 대시보드 7대 기능 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="11" width="4" height="6" rx="0.5" fill="#0EA5E9" opacity="0.45"/>
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#0EA5E9"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">실시간 KPI 카드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="4.5" r="2.5" fill="none" stroke="#10B981" stroke-width="1.1"/>
<line x1="10" y1="7" x2="10" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<line x1="5" y1="9.5" x2="15" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<circle cx="5" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="10" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="15" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<line x1="5" y1="9.5" x2="5" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="10" y1="9.5" x2="10" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="15" y1="9.5" x2="15" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="3" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<circle cx="7" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<line x1="5" y1="15" x2="3" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="5" y1="15" x2="7" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">조직 실적 트리</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="10" r="7.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="10" y="12.5" text-anchor="middle" fill="#8B5CF6" font-size="9" font-weight="800">&#8361;</text>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">역할별 수당 현황</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M10 3 C6 3 3 6 3 9.5 L3 13 L1.5 14.5 L18.5 14.5 L17 13 L17 9.5 C17 6 14 3 10 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
<circle cx="15" cy="5" r="3.5" fill="#EF4444"/>
<text x="15" y="7" text-anchor="middle" fill="#fff" font-size="4.5" font-weight="800">!</text>
<path d="M7.5 15.5 Q10 18 12.5 15.5" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">승인 대기 알림</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 15 L7 11 L10 13 L16 5" fill="none" stroke="#F59E0B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">기간별 트렌드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.4"/>
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="10" x2="12" y2="10" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="15.5" cy="14.5" r="3.5" fill="#F8FAFC" stroke="#EC4899" stroke-width="0.9"/>
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">수익 시뮬레이터</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="5" y="2" width="10" height="16" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
<circle cx="10" cy="16" r="1" fill="#0EA5E9" opacity="0.5"/>
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(14,165,233,0.1)"/>
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#0EA5E9" opacity="0.4"/>
<rect x="8" y="8.5" width="4" height="1.5" rx="0.3" fill="#10B981" opacity="0.4"/>
<rect x="8" y="11" width="4" height="1.5" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">모바일 대응</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.2); margin-bottom: 8pt;"></div>
<!-- 역할별 맞춤 화면 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 4pt;">
<!-- CEO -->
<div style="flex: 1; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #0EA5E9;">CEO</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">전사 KPI 총괄</p>
</div>
<!-- 관리자 -->
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1" opacity="0.6"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #10B981;">관리자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">팀 실적 관리</p>
</div>
<!-- 운영자 -->
<div style="flex: 1; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.4"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#F59E0B" stroke-width="1.2"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #F59E0B;">운영자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">인력/승인 관리</p>
</div>
<!-- 영업자 -->
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #8B5CF6;">영업자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(139,92,246,0.2); margin-bottom: 8pt;"></div>
<!-- SAM 통합 플랫폼 연결 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 5pt;">대시보드 + SAM ERP/MES 통합</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="1.5" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<line x1="5" y1="6" x2="11" y2="6" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="5" y1="8" x2="9" y2="8" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="5" y1="10" x2="11" y2="10" stroke="#CBD5E1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">견적/수주</p>
</div>
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<circle cx="8" cy="8" r="2" fill="none" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="8" y1="3" x2="8" y2="4.5" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="13" y1="8" x2="11.5" y2="8" stroke="#CBD5E1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">생산 MES</p>
</div>
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M5 3 L11 3 L13 6 L8 14 L3 6 Z" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<path d="M3 6 L13 6" stroke="#CBD5E1" stroke-width="0.5"/>
<path d="M8 6 L8 14" stroke="#CBD5E1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">품질/검사</p>
</div>
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="4" width="10" height="9" rx="1" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<line x1="3" y1="7" x2="13" y2="7" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="8" y1="7" x2="8" y2="13" stroke="#CBD5E1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">재고/자재</p>
</div>
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="6" r="3" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<path d="M3 14 Q3 10 8 10 Q13 10 13 14" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">인사/회계</p>
</div>
</div>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 3pt; text-align: center;">대시보드의 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">투자 비용</p>
<div style="display: flex; gap: 5pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.14); border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="12" height="12" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0EA5E9;">대시보드 포함 기본 패키지</p>
</div>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #0F172A;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: #F1F5F9; border-radius: 3pt; padding: 3pt 5pt;">
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.14); border-radius: 6pt; padding: 7pt 8pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 4pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B;">추가 옵션 (선택)</p>
</div>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 8pt;"></div>
<!-- 도입 프로세스 (SVG 화살표 연결) -->
<div style="margin-bottom: 6pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="5" r="3" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#0EA5E9" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">현장 인터뷰</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="#10B981" stroke-width="0.8"/>
<line x1="6" y1="5" x2="10" y2="5" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="7" x2="10" y2="7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="9" x2="10" y2="9" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="11" x2="9" y2="11" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">맞춤 개발</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<rect x="9" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8"/>
<path d="M7 7 L9 8 M7 8 L9 7" stroke="#8B5CF6" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">데이터 이관</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(245,158,11,0.05); border: 1pt solid rgba(245,158,11,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 8 L8 14 L2 8 Z" fill="none" stroke="#F59E0B" stroke-width="0.8"/>
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(14,165,233,0.04); border: 1.5pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 9pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.5"/>
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #0F172A;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8; margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

260
sam/docs/brochure/v4/slides/brochure-dashboard-front.html
View File

@@ -1,260 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #F8FAFC;
padding: 26pt 22pt 16pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 16pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1;">CEO DASHBOARD v4</p>
</div>
<!-- 히어로 섹션 -->
<div style="display: flex; align-items: center; gap: 14pt; margin-bottom: 18pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 19pt; font-weight: 800; color: #0F172A; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 8pt; color: #64748B; line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기<br>더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- 히어로 아이콘 -->
<div style="flex-shrink: 0; width: 80pt; height: 80pt;">
<svg viewBox="0 0 90 90" width="80pt" height="80pt" xmlns="http://www.w3.org/2000/svg">
<!-- 모니터 외곽 -->
<rect x="8" y="10" width="74" height="50" rx="5" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.5"/>
<rect x="12" y="14" width="66" height="42" rx="3" fill="#FFFFFF"/>
<!-- KPI 미니 카드들 -->
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(14,165,233,0.15)"/>
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.15)"/>
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.15)"/>
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.15)"/>
<!-- 미니 차트 -->
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25 L75 50 L16 50 Z" fill="url(#heroGrad)" opacity="0.3"/>
<!-- 모니터 받침 -->
<rect x="36" y="60" width="18" height="3" rx="1" fill="#0EA5E9" opacity="0.3"/>
<rect x="32" y="63" width="26" height="2" rx="1" fill="#0EA5E9" opacity="0.2"/>
<!-- 알림 뱃지 -->
<circle cx="73" cy="14" r="5" fill="#EF4444" opacity="0.9"/>
<text x="73" y="16.5" text-anchor="middle" fill="#fff" font-size="6" font-weight="800">5</text>
<!-- 와이파이 -->
<path d="M66 72 Q72 66 78 72" fill="none" stroke="#10B981" stroke-width="1" opacity="0.4"/>
<path d="M63 76 Q72 68 81 76" fill="none" stroke="#10B981" stroke-width="1" opacity="0.25"/>
<circle cx="72" cy="76" r="1.5" fill="#10B981" opacity="0.5"/>
<defs>
<linearGradient id="heroGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.2); margin-bottom: 16pt;"></div>
<!-- 고민 섹션 (타임라인 인포그래픽) -->
<div style="margin-bottom: 16pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #EF4444; margin-bottom: 8pt;">대표님의 하루</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<!-- AM 9:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L17 15" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">9AM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: #475569; white-space: nowrap;">"어제 매출 얼마야?" → <span style="color: #EF4444; font-weight: 600;">팀장 보고 대기중...</span></p>
</div>
</div>
<!-- PM 2:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L9 16" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">2PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: #475569; white-space: nowrap;">"수주 밀린 거 없어?" → <span style="color: #EF4444; font-weight: 600;">Excel 취합중...</span></p>
</div>
</div>
<!-- PM 5:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L8 12" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">5PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: #475569; white-space: nowrap;">"결재할 것 정리해줘" → <span style="color: #EF4444; font-weight: 600;">서류 찾는중...</span></p>
</div>
</div>
</div>
</div>
<!-- 전환 화살표 -->
<div style="text-align: center; margin-bottom: 12pt;">
<svg viewBox="0 0 40 24" width="40pt" height="16pt" xmlns="http://www.w3.org/2000/svg">
<path d="M10 6 L20 18 L30 6" fill="none" stroke="#0EA5E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0EA5E9;">SAM 도입 후</p>
</div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 7pt; padding: 9pt; margin-bottom: 16pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.06);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8; margin-left: 5pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
</div>
<!-- KPI 카드 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#0EA5E9" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#0EA5E9"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #0F172A;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #0F172A;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #0F172A;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.06); border: 1pt solid rgba(239,68,68,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 라인 차트 + 도넛 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: #F8FAFC; border-radius: 3pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 35" width="100%" height="26pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7 L135 33 L5 33 Z" fill="url(#fGrad)" opacity="0.35"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7" fill="none" stroke="#0EA5E9" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="4" r="2" fill="#0EA5E9"/>
<defs>
<linearGradient id="fGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<div style="flex: 2; background: #F8FAFC; border-radius: 3pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 4pt;">
<svg viewBox="0 0 40 40" width="30pt" height="30pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(15,23,42,0.06)" stroke-width="4.5"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#0EA5E9" stroke-width="4.5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4.5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="4.5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4.5" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 약속 박스 -->
<div style="background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 10pt 12pt; margin-bottom: 12pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
<path d="M7 11 L10 14 L15 8" fill="none" stroke="#0EA5E9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0EA5E9;">SAM 대시보드가 드리는 약속</p>
<p style="font-size: 7pt; color: #64748B; margin-top: 2pt; line-height: 1.5;">로그인 한 번이면 전사 매출, 수주, 승인 대기를 한눈에.<br>보고를 기다리는 시간을 제로로 만들어 드립니다.</p>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="#94A3B8" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="#94A3B8"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">클라우드 기반</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="#94A3B8"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="#94A3B8" stroke-width="0.5"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">역할별 권한</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #475569;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 &#9654;</p>
</div>
</div>
</div>
</body>
</html>

52
sam/docs/brochure/v5/convert-1page.cjs
View File

@@ -1,52 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
const sharp = require('sharp');
async function generateGradientBg() {
const svgGradient = `<svg width="810" height="1440" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg" x1="0.087" y1="0" x2="-0.087" y2="1">
<stop offset="0%" stop-color="#0F172A"/>
<stop offset="55%" stop-color="#1E1B4B"/>
<stop offset="100%" stop-color="#312E81"/>
</linearGradient>
</defs>
<rect width="810" height="1440" fill="url(#bg)"/>
</svg>`;
const buf = await sharp(Buffer.from(svgGradient)).png().toBuffer();
return buf.toString('base64');
}
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
// Pre-generate gradient background PNG
console.log('Generating gradient background...');
const bgBase64 = await generateGradientBg();
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v5 (Premium Gradient) 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
// Set gradient background on each slide
for (const slide of pres.slides) {
slide.background = { data: `image/png;base64,${bgBase64}` };
}
const outputPath = path.join(__dirname, 'sam-brochure-v5-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

56
sam/docs/brochure/v5/convert-2page.cjs
View File

@@ -1,56 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
const sharp = require('sharp');
async function generateGradientBg() {
const svgGradient = `<svg width="810" height="1440" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg" x1="0.087" y1="0" x2="-0.087" y2="1">
<stop offset="0%" stop-color="#0F172A"/>
<stop offset="55%" stop-color="#1E1B4B"/>
<stop offset="100%" stop-color="#312E81"/>
</linearGradient>
</defs>
<rect width="810" height="1440" fill="url(#bg)"/>
</svg>`;
const buf = await sharp(Buffer.from(svgGradient)).png().toBuffer();
return buf.toString('base64');
}
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
// Pre-generate gradient background PNG
console.log('Generating gradient background...');
const bgBase64 = await generateGradientBg();
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
// Set gradient background on each slide
for (const slide of pres.slides) {
slide.background = { data: `image/png;base64,${bgBase64}` };
}
const outputPath = path.join(__dirname, 'sam-brochure-v5-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v5/sam-brochure-v5-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v5/sam-brochure-v5-dashboard-2page.pptx
View File

Binary file not shown.

319
sam/docs/brochure/v5/slides/brochure-dashboard-1page.html
View File

@@ -1,319 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #1A1640;
padding: 22pt 20pt 12pt 20pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<div style="background: rgba(251,191,36,0.12); border: 1pt solid rgba(251,191,36,0.25); border-radius: 3pt; padding: 2pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FBBF24; letter-spacing: 0.08em;">EXECUTIVE EDITION</p>
</div>
</div>
<!-- 히어로 -->
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #FBBF24; letter-spacing: 0.12em; margin-bottom: 3pt;">CEO DASHBOARD</p>
<h1 style="font-size: 16pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 5pt;">대표님의 시간은<br>보고를 기다리는 데<br>쓰여선 안 됩니다.</h1>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.45); line-height: 1.5;">로그인 3초. 매출, 수주, 승인까지<br>모든 경영 현황이 한 화면에.</p>
</div>
<!-- 히어로 SVG 아이콘 -->
<div style="flex-shrink: 0; width: 68pt; height: 68pt;">
<svg viewBox="0 0 80 80" width="68pt" height="68pt" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#FBBF24" stroke-width="1.5" opacity="0.5"/>
<rect x="12" y="14" width="56" height="36" rx="2" fill="rgba(255,255,255,0.04)"/>
<rect x="16" y="38" width="6" height="8" rx="1" fill="#FBBF24" opacity="0.35"/>
<rect x="24" y="34" width="6" height="12" rx="1" fill="#FBBF24" opacity="0.5"/>
<rect x="32" y="30" width="6" height="16" rx="1" fill="#FBBF24" opacity="0.65"/>
<rect x="40" y="26" width="6" height="20" rx="1" fill="#FBBF24" opacity="0.8"/>
<rect x="48" y="22" width="6" height="24" rx="1" fill="#FBBF24"/>
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.6"/>
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.6"/>
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.6"/>
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.6"/>
<rect x="32" y="54" width="16" height="3" rx="1" fill="#FBBF24" opacity="0.3"/>
<rect x="28" y="57" width="24" height="2" rx="1" fill="#FBBF24" opacity="0.2"/>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="display: flex; align-items: center; gap: 6pt; margin-bottom: 10pt;">
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
<div style="background: rgba(251,191,36,0.1); border: 1pt solid rgba(251,191,36,0.2); border-radius: 4pt; padding: 2pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FBBF24;">SAM 도입 후</p>
</div>
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
</div>
<!-- 대시보드 Mock UI (글래스모피즘) -->
<div style="background: rgba(255,255,255,0.05); border: 1pt solid rgba(255,255,255,0.1); border-radius: 7pt; padding: 7pt; margin-bottom: 9pt;">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 5pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.2); margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: rgba(251,191,36,0.08); border: 1pt solid rgba(251,191,36,0.15); border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FBBF24;">5.2억</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.1); border: 1pt solid rgba(239,68,68,0.2); border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 차트 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.25); margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 30" width="100%" height="22pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<path d="M5 26 L18 20 L31 22 L44 17 L57 14 L70 10 L83 12 L96 7 L109 8 L122 3 L135 6 L135 28 L5 28 Z" fill="url(#fGrad5p)" opacity="0.4"/>
<path d="M5 26 L18 20 L31 22 L44 17 L57 14 L70 10 L83 12 L96 7 L109 8 L122 3 L135 6" fill="none" stroke="#FBBF24" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="3" r="2" fill="#FBBF24"/>
<defs>
<linearGradient id="fGrad5p" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FBBF24" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#FBBF24" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
<svg viewBox="0 0 40 40" width="28pt" height="28pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="5"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#FBBF24" stroke-width="5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #FBBF24; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">생산팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 3개 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24; margin-bottom: 5pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="15pt" height="15pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#FBBF24" stroke-width="1.2" opacity="0.4"/>
<path d="M12 7 L12 12 L15 14" fill="none" stroke="#FBBF24" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="1.2" fill="#FBBF24"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #FBBF24; white-space: nowrap;">즉시 현황 파악</p>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">로그인 3초면 전사 확인</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="15pt" height="15pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="10" r="6" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M9 7 Q12 5 15 7" fill="none" stroke="#10B981" stroke-width="0.8" stroke-linecap="round"/>
<path d="M9 10 Q12 8 15 10" fill="none" stroke="#10B981" stroke-width="0.8" stroke-linecap="round"/>
<path d="M9 13 Q12 11 15 13" fill="none" stroke="#10B981" stroke-width="0.8" stroke-linecap="round"/>
<circle cx="8" cy="19" r="1" fill="#10B981" opacity="0.5"/>
<circle cx="12" cy="19" r="1" fill="#10B981" opacity="0.7"/>
<circle cx="16" cy="19" r="1" fill="#10B981"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #10B981; white-space: nowrap;">데이터로 판단</p>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">감이 아닌 KPI 비교</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="15pt" height="15pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M8 12 L11 15 L16 9" fill="none" stroke="#8B5CF6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #8B5CF6; white-space: nowrap;">모바일 승인</p>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">이동중 즉시 결재</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(251,191,36,0.1); margin-bottom: 9pt;"></div>
<!-- 대시보드 6대 기능 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24; margin-bottom: 5pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#FBBF24" opacity="0.5"/>
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#FBBF24" opacity="0.75"/>
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#FBBF24"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">실시간 <span style="color: #FBBF24; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="14" cy="13" r="3.5" fill="#1E1B4B" stroke="#EC4899" stroke-width="0.8"/>
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.05); margin-bottom: 9pt;"></div>
<!-- Before → After -->
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
<!-- Before -->
<div style="flex: 5; background: rgba(239,68,68,0.06); border: 1pt solid rgba(239,68,68,0.12); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">매출? → 보고 대기 1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">수주? → Excel 취합 반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">승인? → 서류 찾기 30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">실적? → 각 팀장 개별 보고</p>
</div>
<!-- 화살표 -->
<div style="display: flex; align-items: center; flex-shrink: 0;">
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10 L14 10" stroke="#FBBF24" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#FBBF24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- After -->
<div style="flex: 5; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="rgba(251,191,36,0.5)"/></svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">클라우드</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="rgba(251,191,36,0.5)"/></svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.5"/></svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">역할별 권한</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M4 1 Q6.5 1 6.5 3.5 L6.5 4.5 Q6.5 7 4 7 Q1.5 7 1.5 4.5 L1.5 3.5 Q1.5 1 4 1 Z" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><line x1="4" y1="3.5" x2="4" y2="5" stroke="rgba(251,191,36,0.5)" stroke-width="0.5" stroke-linecap="round"/></svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">데이터 암호화</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(251,191,36,0.1); padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25);">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #FBBF24;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

311
sam/docs/brochure/v5/slides/brochure-dashboard-back.html
View File

@@ -1,311 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #1A1640;
padding: 20pt 22pt 12pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(251,191,36,0.4);">FEATURES &amp; PRICING</p>
</div>
<!-- 대시보드 7대 기능 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="11" width="4" height="6" rx="0.5" fill="#FBBF24" opacity="0.45"/>
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#FBBF24" opacity="0.7"/>
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#FBBF24"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">실시간 KPI 카드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="4.5" r="2.5" fill="none" stroke="#10B981" stroke-width="1.1"/>
<line x1="10" y1="7" x2="10" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<line x1="5" y1="9.5" x2="15" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<circle cx="5" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="10" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="15" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<line x1="5" y1="9.5" x2="5" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="10" y1="9.5" x2="10" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="15" y1="9.5" x2="15" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">조직 실적 트리</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="10" r="7.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="10" y="12.5" text-anchor="middle" fill="#8B5CF6" font-size="9" font-weight="800">&#8361;</text>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">역할별 수당 현황</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M10 3 C6 3 3 6 3 9.5 L3 13 L1.5 14.5 L18.5 14.5 L17 13 L17 9.5 C17 6 14 3 10 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
<circle cx="15" cy="5" r="3.5" fill="#EF4444"/>
<text x="15" y="7" text-anchor="middle" fill="#fff" font-size="4.5" font-weight="800">!</text>
<path d="M7.5 15.5 Q10 18 12.5 15.5" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">승인 대기 알림</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 15 L7 11 L10 13 L16 5" fill="none" stroke="#F59E0B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">기간별 트렌드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.4"/>
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="10" x2="12" y2="10" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="15.5" cy="14.5" r="3.5" fill="#1E1B4B" stroke="#EC4899" stroke-width="0.9"/>
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">수익 시뮬레이터</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="5" y="2" width="10" height="16" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
<circle cx="10" cy="16" r="1" fill="#0EA5E9" opacity="0.5"/>
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(14,165,233,0.15)"/>
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#FBBF24" opacity="0.4"/>
<rect x="8" y="8.5" width="4" height="1.5" rx="0.3" fill="#10B981" opacity="0.4"/>
<rect x="8" y="11" width="4" height="1.5" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">모바일 대응</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(251,191,36,0.1); margin-bottom: 8pt;"></div>
<!-- 역할별 맞춤 화면 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#FBBF24" stroke-width="1.2"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#FBBF24" stroke-width="1.2"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#FBBF24" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #FBBF24;">CEO</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.5); margin-top: 1pt;">전사 KPI 총괄</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1" opacity="0.6"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #10B981;">관리자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.5); margin-top: 1pt;">팀 실적 관리</p>
</div>
<div style="flex: 1; background: rgba(245,158,11,0.06); border: 1pt solid rgba(245,158,11,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.4"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#F59E0B" stroke-width="1.2"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #F59E0B;">운영자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.5); margin-top: 1pt;">인력/승인 관리</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #8B5CF6;">영업자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.5); margin-top: 1pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(139,92,246,0.1); margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24; margin-bottom: 5pt;">투자 비용</p>
<div style="display: flex; gap: 5pt;">
<div style="flex: 1;">
<div style="background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.15); border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="12" height="12" rx="2" fill="none" stroke="#FBBF24" stroke-width="1" opacity="0.5"/>
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#FBBF24" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #FBBF24;">대시보드 포함 기본 패키지</p>
</div>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #ffffff;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 3pt 5pt;">
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.25); line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
</div>
</div>
<div style="flex: 1;">
<div style="background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.08); border-radius: 6pt; padding: 7pt 8pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 4pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B;">추가 옵션 (선택)</p>
</div>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FBBF24;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FBBF24;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FBBF24;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.05); margin-bottom: 8pt;"></div>
<!-- 도입 프로세스 -->
<div style="margin-bottom: 6pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.12);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="5" r="3" fill="none" stroke="#FBBF24" stroke-width="0.8"/>
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#FBBF24" stroke-width="0.8"/>
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#FBBF24" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">현장 인터뷰</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(251,191,36,0.25)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="#10B981" stroke-width="0.8"/>
<line x1="6" y1="5" x2="10" y2="5" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="7" x2="10" y2="7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="9" x2="10" y2="9" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="11" x2="9" y2="11" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">맞춤 개발</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(251,191,36,0.25)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<rect x="9" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8"/>
<path d="M7 7 L9 8 M7 8 L9 7" stroke="#8B5CF6" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">데이터 이관</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(251,191,36,0.25)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(245,158,11,0.06); border: 1pt solid rgba(245,158,11,0.12);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 8 L8 14 L2 8 Z" fill="none" stroke="#F59E0B" stroke-width="0.8"/>
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(251,191,36,0.06); border: 1.5pt solid rgba(251,191,36,0.15); border-radius: 7pt; padding: 9pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#FBBF24" stroke-width="1.2" opacity="0.5"/>
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#FBBF24" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #FBBF24;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.15);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

216
sam/docs/brochure/v5/slides/brochure-dashboard-front.html
View File

@@ -1,216 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #1A1640;
padding: 26pt 22pt 16pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 18pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<div style="background: rgba(251,191,36,0.12); border: 1pt solid rgba(251,191,36,0.25); border-radius: 3pt; padding: 2pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FBBF24; letter-spacing: 0.08em;">EXECUTIVE EDITION</p>
</div>
</div>
<!-- 히어로 섹션 -->
<div style="margin-bottom: 20pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #FBBF24; letter-spacing: 0.12em; margin-bottom: 6pt;">CEO DASHBOARD</p>
<h1 style="font-size: 20pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8pt;">대표님의 시간은<br>보고를 기다리는 데<br>쓰여선 안 됩니다.</h1>
<p style="font-size: 8.5pt; color: rgba(255,255,255,0.5); line-height: 1.55;">로그인 3초. 매출, 수주, 승인 대기까지<br>모든 경영 현황이 한 화면에.</p>
</div>
<!-- 잃어버린 시간 카드 -->
<div style="margin-bottom: 16pt;">
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(239,68,68,0.08); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 8pt 7pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="12" cy="12" r="9" fill="none" stroke="#EF4444" stroke-width="1.2" opacity="0.4"/>
<path d="M12 7 L12 12 L16 14" fill="none" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">매출 보고 대기</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.08); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 8pt 7pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#EF4444" stroke-width="1.2" opacity="0.4"/>
<line x1="8" y1="8" x2="16" y2="8" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
<line x1="8" y1="11" x2="14" y2="11" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
<line x1="8" y1="14" x2="12" y2="14" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">Excel 수주 취합</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.08); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 8pt 7pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<path d="M12 3 C7 3 3 7 3 11 L3 15 L1 17 L23 17 L21 15 L21 11 C21 7 17 3 12 3 Z" fill="none" stroke="#EF4444" stroke-width="1.2" opacity="0.4"/>
<path d="M9 18 Q12 21 15 18" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">결재 서류 찾기</p>
</div>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(239,68,68,0.5); text-align: center; margin-top: 4pt;">매일 반복되는 비효율, SAM이 제로로 만듭니다.</p>
</div>
<!-- 전환 -->
<div style="display: flex; align-items: center; gap: 6pt; margin-bottom: 14pt;">
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
<div style="background: rgba(251,191,36,0.1); border: 1pt solid rgba(251,191,36,0.2); border-radius: 4pt; padding: 3pt 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24;">SAM 도입 후</p>
</div>
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
</div>
<!-- 대시보드 Mock UI (글래스모피즘) -->
<div style="background: rgba(255,255,255,0.05); border: 1pt solid rgba(255,255,255,0.1); border-radius: 8pt; padding: 10pt; margin-bottom: 16pt;">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 7pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.2); margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 -->
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
<div style="flex: 1; background: rgba(251,191,36,0.08); border: 1pt solid rgba(251,191,36,0.15); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#FBBF24" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#FBBF24" opacity="0.65"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#FBBF24"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #FBBF24;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.1); border: 1pt solid rgba(239,68,68,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 라인 차트 + 도넛 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.25); margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 35" width="100%" height="26pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7 L135 33 L5 33 Z" fill="url(#fGrad5)" opacity="0.4"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7" fill="none" stroke="#FBBF24" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="4" r="2" fill="#FBBF24"/>
<defs>
<linearGradient id="fGrad5" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FBBF24" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#FBBF24" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt; display: flex; align-items: center; gap: 5pt;">
<svg viewBox="0 0 40 40" width="30pt" height="30pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="5"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#FBBF24" stroke-width="5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#0EA5E9" stroke-width="5" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #FBBF24; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 약속 박스 (골드 강조) -->
<div style="background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.15); border-radius: 7pt; padding: 10pt 12pt; margin-bottom: 14pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#FBBF24" stroke-width="1.2" opacity="0.4"/>
<path d="M7 11 L10 14 L15 8" fill="none" stroke="#FBBF24" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #FBBF24;">대표님께 드리는 약속</p>
<p style="font-size: 7pt; color: rgba(255,255,255,0.45); margin-top: 2pt; line-height: 1.5;">보고를 기다리는 시간을 제로로.<br>의사결정에만 집중하실 수 있도록.</p>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="rgba(251,191,36,0.5)"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">클라우드 기반</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="rgba(251,191,36,0.5)"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.5"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">역할별 권한</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(251,191,36,0.1); padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">뒷면에서 상세 기능을 확인하세요 &#9654;</p>
</div>
</div>
</div>
</body>
</html>

27
sam/docs/brochure/v6/convert-1page.cjs
View File

@@ -1,27 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v6 (Corporate Blue & White) 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v6-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

31
sam/docs/brochure/v6/convert-2page.cjs
View File

@@ -1,31 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v6-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v6/sam-brochure-v6-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v6/sam-brochure-v6-dashboard-2page.pptx
View File

Binary file not shown.

374
sam/docs/brochure/v6/slides/brochure-dashboard-1page.html
View File

@@ -1,374 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 0;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 블루 헤더 바 -->
<div style="background: #1E40AF; padding: 8pt 20pt; display: flex; align-items: center; gap: 8pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<div style="background: rgba(255,255,255,0.15); border-radius: 3pt; padding: 2pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: #FFFFFF; font-weight: 600; letter-spacing: 0.05em;">CEO DASHBOARD</p>
</div>
</div>
<!-- 본문 영역 -->
<div style="flex: 1; padding: 12pt 20pt 8pt 20pt; display: flex; flex-direction: column;">
<!-- 히어로 -->
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 10pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2563EB; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 16pt; font-weight: 800; color: #1E293B; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 7.5pt; color: #475569; line-height: 1.5;">보고 대기 없이, 로그인 한 번이면</p>
<p style="font-size: 7.5pt; color: #475569; line-height: 1.5;">전사 현황이 한눈에 들어옵니다.</p>
</div>
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#2563EB" stroke-width="1.5" opacity="0.6"/>
<rect x="12" y="14" width="56" height="36" rx="2" fill="#FFFFFF"/>
<rect x="16" y="38" width="6" height="8" rx="1" fill="#2563EB" opacity="0.5"/>
<rect x="24" y="34" width="6" height="12" rx="1" fill="#2563EB" opacity="0.65"/>
<rect x="32" y="30" width="6" height="16" rx="1" fill="#2563EB" opacity="0.8"/>
<rect x="40" y="26" width="6" height="20" rx="1" fill="#2563EB" opacity="0.9"/>
<rect x="48" y="22" width="6" height="24" rx="1" fill="#2563EB"/>
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.7"/>
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.7"/>
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
<rect x="32" y="54" width="16" height="3" rx="1" fill="#2563EB" opacity="0.4"/>
<rect x="28" y="57" width="24" height="2" rx="1" fill="#2563EB" opacity="0.3"/>
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 7pt; padding: 7pt; margin-bottom: 8pt; box-shadow: 0 1pt 4pt rgba(30,64,175,0.06);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 5pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 4개 -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: #EFF6FF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#2563EB" opacity="0.4"/>
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#2563EB" opacity="0.65"/>
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#2563EB"/>
<path d="M3 16 L17 16" stroke="#2563EB" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #1E293B;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #2563EB; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #1E293B;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #1E293B;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 차트 영역 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: #EFF6FF; border-radius: 4pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(30,64,175,0.05)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(30,64,175,0.05)" stroke-width="0.5"/>
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(30,64,175,0.05)" stroke-width="0.5"/>
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="#2563EB" opacity="0.08"/>
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="140" cy="5" r="2.5" fill="#2563EB"/>
<circle cx="155" cy="8" r="2" fill="#2563EB" opacity="0.5" stroke="#2563EB" stroke-width="0.5" stroke-dasharray="1 1"/>
</svg>
</div>
<div style="flex: 2; background: #EFF6FF; border-radius: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(30,64,175,0.06)" stroke-width="5"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#2563EB" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #2563EB; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #475569;">영업1팀 38%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #475569;">영업2팀 25%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #475569;">생산팀 22%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #475569;">품질팀 15%</p>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 3개 -->
<div style="margin-bottom: 8pt;">
<div style="background: #EFF6FF; border-radius: 3pt; padding: 2pt 8pt; display: inline-block; margin-bottom: 5pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">대표님이 얻는 것</p>
</div>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 6pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 28 28" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="14" cy="14" r="10" fill="none" stroke="#2563EB" stroke-width="1.2" opacity="0.4"/>
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="14" r="1.5" fill="#2563EB"/>
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">즉시 현황 파악</p>
<p style="font-size: 5pt; color: #94A3B8; margin-top: 1pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 6pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 28 28" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
</svg>
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">데이터로 판단</p>
<p style="font-size: 5pt; color: #94A3B8; margin-top: 1pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 6pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 28 28" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">모바일 승인</p>
<p style="font-size: 5pt; color: #94A3B8; margin-top: 1pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
<!-- 대시보드 6대 기능 -->
<div style="margin-bottom: 8pt;">
<div style="background: #EFF6FF; border-radius: 3pt; padding: 2pt 8pt; display: inline-block; margin-bottom: 4pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #1E40AF;">대시보드 핵심 기능</p>
</div>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#2563EB" opacity="0.5"/>
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#2563EB" opacity="0.75"/>
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#2563EB"/>
</svg>
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">실시간 <span style="color: #2563EB; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="14" cy="13" r="3.5" fill="#FFFFFF" stroke="#EC4899" stroke-width="0.8"/>
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
<!-- Before → After -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 5pt 6pt 10pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">매출? → 보고 대기 1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">수주? → Excel 취합 반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">승인? → 서류 찾기 30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">실적? → 각 팀장 개별 보고</p>
</div>
<div style="display: flex; align-items: center; flex-shrink: 0;">
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10 L14 10" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div style="flex: 5; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 5pt 6pt 10pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="3.5" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="#3B82F6" stroke-width="0.6" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">실시간 업데이트</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.5" fill="#3B82F6"/>
</svg>
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
<circle cx="5" cy="5" r="1.5" fill="none" stroke="#3B82F6" stroke-width="0.6"/>
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="#3B82F6" stroke-width="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">역할별 권한</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
<line x1="5" y1="4" x2="5" y2="6" stroke="#3B82F6" stroke-width="0.6" stroke-linecap="round"/>
<circle cx="5" cy="3.5" r="0.5" fill="#3B82F6"/>
</svg>
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">데이터 암호화</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M2 7 Q5 3 8 7" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.8" fill="#3B82F6"/>
</svg>
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">클라우드</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; background: #EFF6FF; border-radius: 5pt; padding: 7pt 10pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E293B;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2563EB;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</div>
</body>
</html>

337
sam/docs/brochure/v6/slides/brochure-dashboard-back.html
View File

@@ -1,337 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 0;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 블루 헤더 바 -->
<div style="background: #1E40AF; padding: 10pt 22pt; display: flex; align-items: center; gap: 8pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<div style="background: rgba(255,255,255,0.15); border-radius: 3pt; padding: 2pt 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #FFFFFF; font-weight: 600; letter-spacing: 0.05em;">FEATURES &amp; PRICING</p>
</div>
</div>
<!-- 본문 영역 -->
<div style="flex: 1; padding: 14pt 22pt 10pt 22pt; display: flex; flex-direction: column;">
<!-- 대시보드 핵심 기능 -->
<div style="margin-bottom: 9pt;">
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 6pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">대시보드 핵심 기능</p>
</div>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="11" width="4" height="6" rx="0.5" fill="#2563EB" opacity="0.45"/>
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#2563EB" opacity="0.7"/>
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#2563EB"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">실시간 KPI 카드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="4.5" r="2.5" fill="none" stroke="#10B981" stroke-width="1.1"/>
<line x1="10" y1="7" x2="10" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<line x1="5" y1="9.5" x2="15" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<circle cx="5" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="10" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="15" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<line x1="5" y1="9.5" x2="5" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="10" y1="9.5" x2="10" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="15" y1="9.5" x2="15" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="3" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<circle cx="7" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<line x1="5" y1="15" x2="3" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="5" y1="15" x2="7" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">조직 실적 트리</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="10" r="7.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="10" y="12.5" text-anchor="middle" fill="#8B5CF6" font-size="9" font-weight="800">&#8361;</text>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">역할별 수당 현황</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M10 3 C6 3 3 6 3 9.5 L3 13 L1.5 14.5 L18.5 14.5 L17 13 L17 9.5 C17 6 14 3 10 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
<circle cx="15" cy="5" r="3.5" fill="#EF4444"/>
<text x="15" y="7" text-anchor="middle" fill="#fff" font-size="4.5" font-weight="800">!</text>
<path d="M7.5 15.5 Q10 18 12.5 15.5" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">승인 대기 알림</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 15 L7 11 L10 13 L16 5" fill="none" stroke="#F59E0B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">기간별 트렌드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.4"/>
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="10" x2="12" y2="10" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="15.5" cy="14.5" r="3.5" fill="#FFFFFF" stroke="#EC4899" stroke-width="0.9"/>
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">수익 시뮬레이터</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="5" y="2" width="10" height="16" rx="2" fill="none" stroke="#2563EB" stroke-width="1" opacity="0.5"/>
<circle cx="10" cy="16" r="1" fill="#2563EB" opacity="0.5"/>
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(37,99,235,0.1)"/>
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#2563EB" opacity="0.4"/>
<rect x="8" y="8.5" width="4" height="1.5" rx="0.3" fill="#10B981" opacity="0.4"/>
<rect x="8" y="11" width="4" height="1.5" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">모바일 대응</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
<!-- 역할별 맞춤 화면 -->
<div style="margin-bottom: 9pt;">
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 5pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">역할별 맞춤 화면</p>
</div>
<div style="display: flex; gap: 4pt;">
<!-- CEO -->
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 5pt; padding: 6pt 4pt; text-align: center; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#2563EB" stroke-width="1.2"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#2563EB" stroke-width="1.2"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #2563EB;">CEO</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">전사 KPI 총괄</p>
</div>
<!-- 관리자 -->
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 5pt; padding: 6pt 4pt; text-align: center; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1" opacity="0.6"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #10B981;">관리자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">팀 실적 관리</p>
</div>
<!-- 운영자 -->
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 5pt; padding: 6pt 4pt; text-align: center; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.4"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#F59E0B" stroke-width="1.2"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #F59E0B;">운영자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">인력/승인 관리</p>
</div>
<!-- 영업자 -->
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 5pt; padding: 6pt 4pt; text-align: center; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #8B5CF6;">영업자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 9pt;">
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 5pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">투자 비용</p>
</div>
<div style="display: flex; gap: 5pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="12" height="12" rx="2" fill="none" stroke="#2563EB" stroke-width="1" opacity="0.5"/>
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#2563EB" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #2563EB;">대시보드 포함 기본 패키지</p>
</div>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #1E293B;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 5pt;">
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산</p>
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 8pt; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 4pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B;">추가 옵션 (선택)</p>
</div>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #475569;">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #475569;">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #475569;">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
<!-- 도입 프로세스 -->
<div style="margin-bottom: 6pt;">
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 5pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">도입 프로세스</p>
</div>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: #FFFFFF; border: 1.5pt solid #DBEAFE; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="5" r="3" fill="none" stroke="#2563EB" stroke-width="0.8"/>
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#2563EB" stroke-width="0.8"/>
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#2563EB" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #1E293B;">현장 인터뷰</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#DBEAFE" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: #FFFFFF; border: 1.5pt solid #DBEAFE; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="#10B981" stroke-width="0.8"/>
<line x1="6" y1="5" x2="10" y2="5" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="7" x2="10" y2="7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="9" x2="10" y2="9" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="11" x2="9" y2="11" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #1E293B;">맞춤 개발</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#DBEAFE" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: #FFFFFF; border: 1.5pt solid #DBEAFE; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<rect x="9" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8"/>
<path d="M7 7 L9 8 M7 8 L9 7" stroke="#8B5CF6" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #1E293B;">데이터 이관</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#DBEAFE" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: #FFFFFF; border: 1.5pt solid #DBEAFE; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 8 L8 14 L2 8 Z" fill="none" stroke="#F59E0B" stroke-width="0.8"/>
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #1E293B;">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: #1E40AF; border-radius: 7pt; padding: 9pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="1.2"/>
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #FFFFFF;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.6); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #FFFFFF;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</div>
</body>
</html>

231
sam/docs/brochure/v6/slides/brochure-dashboard-front.html
View File

@@ -1,231 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 0;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 블루 헤더 바 -->
<div style="background: #1E40AF; padding: 10pt 22pt; display: flex; align-items: center; gap: 8pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<div style="background: rgba(255,255,255,0.15); border-radius: 3pt; padding: 2pt 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #FFFFFF; font-weight: 600; letter-spacing: 0.05em;">CEO DASHBOARD</p>
</div>
</div>
<!-- 본문 영역 -->
<div style="flex: 1; padding: 18pt 22pt 12pt 22pt; display: flex; flex-direction: column;">
<!-- 히어로 섹션 -->
<div style="display: flex; align-items: center; gap: 14pt; margin-bottom: 16pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #2563EB; letter-spacing: 0.1em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 19pt; font-weight: 800; color: #1E293B; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 8pt; color: #475569; line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기</p>
<p style="font-size: 8pt; color: #475569; line-height: 1.55;">더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- 히어로 아이콘 -->
<div style="flex-shrink: 0; width: 80pt; height: 80pt;">
<svg viewBox="0 0 90 90" width="80pt" height="80pt" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="10" width="74" height="50" rx="5" fill="none" stroke="#2563EB" stroke-width="1.5" opacity="0.5"/>
<rect x="12" y="14" width="66" height="42" rx="3" fill="#FFFFFF"/>
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(37,99,235,0.15)"/>
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.15)"/>
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.15)"/>
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.15)"/>
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25" fill="none" stroke="#2563EB" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25 L75 50 L16 50 Z" fill="#2563EB" opacity="0.08"/>
<rect x="36" y="60" width="18" height="3" rx="1" fill="#2563EB" opacity="0.3"/>
<rect x="32" y="63" width="26" height="2" rx="1" fill="#2563EB" opacity="0.2"/>
<circle cx="73" cy="14" r="5" fill="#EF4444" opacity="0.9"/>
<text x="73" y="16.5" text-anchor="middle" fill="#fff" font-size="6" font-weight="800">5</text>
<path d="M66 72 Q72 66 78 72" fill="none" stroke="#10B981" stroke-width="1" opacity="0.4"/>
<path d="M63 76 Q72 68 81 76" fill="none" stroke="#10B981" stroke-width="1" opacity="0.25"/>
<circle cx="72" cy="76" r="1.5" fill="#10B981" opacity="0.5"/>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 16pt;"></div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 7pt; padding: 9pt; margin-bottom: 16pt; box-shadow: 0 1pt 4pt rgba(30,64,175,0.06);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8; margin-left: 5pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
</div>
<!-- KPI 카드 -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: #EFF6FF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#2563EB" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#2563EB" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#2563EB"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #1E293B;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #2563EB; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #1E293B;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #1E293B;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.06); border: 1pt solid rgba(239,68,68,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 라인 차트 + 도넛 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: #EFF6FF; border-radius: 3pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 35" width="100%" height="26pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(30,64,175,0.05)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(30,64,175,0.05)" stroke-width="0.5"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7 L135 33 L5 33 Z" fill="#2563EB" opacity="0.08"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7" fill="none" stroke="#2563EB" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="4" r="2" fill="#2563EB"/>
</svg>
</div>
<div style="flex: 2; background: #EFF6FF; border-radius: 3pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 4pt;">
<svg viewBox="0 0 40 40" width="30pt" height="30pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(30,64,175,0.06)" stroke-width="4.5"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#2563EB" stroke-width="4.5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4.5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="4.5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4.5" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #2563EB; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #475569;">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #475569;">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #475569;">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #475569;">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 대표님이 얻는 것 -->
<div style="margin-bottom: 16pt;">
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 7pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #1E40AF;">대표님이 얻는 것</p>
</div>
<div style="display: flex; gap: 4pt;">
<!-- 즉시 현황 파악 -->
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="10" fill="none" stroke="#2563EB" stroke-width="1.2" opacity="0.4"/>
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="14" r="1.5" fill="#2563EB"/>
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #1E293B; white-space: nowrap;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
</div>
<!-- 데이터 기반 의사결정 -->
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #1E293B; white-space: nowrap;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
</div>
<!-- 빠른 승인 -->
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #1E293B; white-space: nowrap;">모바일 승인</p>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="#3B82F6" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="#3B82F6" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="#3B82F6"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #3B82F6;">클라우드 기반</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="#3B82F6" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="#3B82F6"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #3B82F6;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="#3B82F6" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="#3B82F6" stroke-width="0.5"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #3B82F6;">역할별 권한</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; background: #EFF6FF; border-radius: 5pt; padding: 8pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #1E293B;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 &#9654;</p>
</div>
</div>
</div>
</div>
</body>
</html>

27
sam/docs/brochure/v7/convert-1page.cjs
View File

@@ -1,27 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v7 (Warm Gray + Teal) 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v7-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

31
sam/docs/brochure/v7/convert-2page.cjs
View File

@@ -1,31 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v7-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v7/sam-brochure-v7-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v7/sam-brochure-v7-dashboard-2page.pptx
View File

Binary file not shown.

376
sam/docs/brochure/v7/slides/brochure-dashboard-1page.html
View File

@@ -1,376 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FAFAF9;
padding: 22pt 20pt 12pt 20pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">CEO DASHBOARD v7</p>
</div>
<!-- 히어로 -->
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0D9488; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 16pt; font-weight: 800; color: #292524; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 7.5pt; color: #57534E; line-height: 1.5;">보고 대기 없이, 로그인 한 번이면<br>전사 현황이 한눈에 들어옵니다.</p>
</div>
<!-- 히어로 SVG 아이콘: 대시보드 모니터 -->
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#0D9488" stroke-width="1.5" opacity="0.6"/>
<rect x="12" y="14" width="56" height="36" rx="2" fill="#FFFFFF"/>
<!-- 미니 차트 바 -->
<rect x="16" y="38" width="6" height="8" rx="1" fill="#0D9488" opacity="0.5"/>
<rect x="24" y="34" width="6" height="12" rx="1" fill="#0D9488" opacity="0.65"/>
<rect x="32" y="30" width="6" height="16" rx="1" fill="#0D9488" opacity="0.8"/>
<rect x="40" y="26" width="6" height="20" rx="1" fill="#0D9488" opacity="0.9"/>
<rect x="48" y="22" width="6" height="24" rx="1" fill="#0D9488"/>
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
<!-- 상단 KPI 표시 -->
<circle cx="18" cy="20" r="3" fill="#0D9488" opacity="0.7"/>
<circle cx="28" cy="20" r="3" fill="#10B981" opacity="0.7"/>
<circle cx="38" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
<!-- 모니터 받침대 -->
<rect x="32" y="54" width="16" height="3" rx="1" fill="#0D9488" opacity="0.4"/>
<rect x="28" y="57" width="24" height="2" rx="1" fill="#0D9488" opacity="0.3"/>
<!-- 와이파이 시그널 -->
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 10pt;"></div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1pt solid #E7E5E4; border-radius: 7pt; padding: 8pt; margin-bottom: 9pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.05);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E; margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 4개 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<!-- 월 매출 -->
<div style="flex: 1; background: rgba(13,148,136,0.05); border: 1pt solid rgba(13,148,136,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#0D9488" opacity="0.4"/>
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#0D9488" opacity="0.65"/>
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#0D9488"/>
<path d="M3 16 L17 16" stroke="#0D9488" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #0D9488; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<!-- 수주 잔량 -->
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
</div>
<!-- 납기 준수율 -->
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<!-- 승인 대기 -->
<div style="flex: 1; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 차트 영역 -->
<div style="display: flex; gap: 4pt;">
<!-- 매출 추이 (라인 차트 SVG) -->
<div style="flex: 3; background: #F5F5F4; border-radius: 5pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #A8A29E; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="#0D9488" opacity="0.08"/>
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="140" cy="5" r="2.5" fill="#0D9488"/>
<circle cx="155" cy="8" r="2" fill="#0D9488" opacity="0.5" stroke="#0D9488" stroke-width="0.5" stroke-dasharray="1 1"/>
</svg>
</div>
<!-- 도넛 차트: 팀별 비중 -->
<div style="flex: 2; background: #F5F5F4; border-radius: 5pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(41,37,36,0.06)" stroke-width="5"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#0D9488" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #0D9488; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">영업1팀 38%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">영업2팀 25%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">생산팀 22%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">품질팀 15%</p>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 3개 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0D9488; margin-bottom: 5pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.12); border-radius: 7pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="10" fill="none" stroke="#0D9488" stroke-width="1.2" opacity="0.4"/>
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="14" r="1.5" fill="#0D9488"/>
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 7pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 7pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">모바일 승인</p>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 9pt;"></div>
<!-- 대시보드 6대 기능 (SVG 아이콘 + 텍스트) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#0D9488" opacity="0.5"/>
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#0D9488" opacity="0.75"/>
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#0D9488"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">실시간 <span style="color: #0D9488; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="14" cy="13" r="3.5" fill="#FAFAF9" stroke="#EC4899" stroke-width="0.8"/>
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 9pt;"></div>
<!-- Before / After 인포그래픽 -->
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
<!-- Before -->
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 7pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">매출? 보고 대기 1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">수주? Excel 취합 반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">승인? 서류 찾기 30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">실적? 각 팀장 개별 보고</p>
</div>
<!-- 화살표 -->
<div style="display: flex; align-items: center; flex-shrink: 0;">
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10 L14 10" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- After -->
<div style="flex: 5; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 7pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#0D9488" stroke-width="1"/>
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0D9488;">AFTER (SAM)</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">로그인 <span style="color:#0D9488;font-weight:600;">3초 전사 현황</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">클릭 <span style="color:#0D9488;font-weight:600;">실시간 수주 데이터</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">뱃지 <span style="color:#0D9488;font-weight:600;">즉시 승인 처리</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">트리 <span style="color:#0D9488;font-weight:600;">전 조직 한눈에</span></p>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="3.5" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="#A8A29E" stroke-width="0.6" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">실시간 업데이트</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.5" fill="#A8A29E"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<circle cx="5" cy="5" r="1.5" fill="none" stroke="#A8A29E" stroke-width="0.6"/>
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="#A8A29E" stroke-width="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">역할별 권한</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<line x1="5" y1="4" x2="5" y2="6" stroke="#A8A29E" stroke-width="0.6" stroke-linecap="round"/>
<circle cx="5" cy="3.5" r="0.5" fill="#A8A29E"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">데이터 암호화</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M2 7 Q5 3 8 7" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.8" fill="#A8A29E"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">클라우드</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid #D6D3D1; padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #57534E;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0D9488;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

373
sam/docs/brochure/v7/slides/brochure-dashboard-back.html
View File

@@ -1,373 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FAFAF9;
padding: 20pt 22pt 12pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">FEATURES &amp; PRICING</p>
</div>
<!-- 대시보드 7대 기능 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0D9488; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 6pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="11" width="4" height="6" rx="0.5" fill="#0D9488" opacity="0.45"/>
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#0D9488" opacity="0.7"/>
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#0D9488"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #292524; white-space: nowrap;">실시간 KPI 카드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 6pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="4.5" r="2.5" fill="none" stroke="#10B981" stroke-width="1.1"/>
<line x1="10" y1="7" x2="10" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<line x1="5" y1="9.5" x2="15" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<circle cx="5" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="10" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="15" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<line x1="5" y1="9.5" x2="5" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="10" y1="9.5" x2="10" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="15" y1="9.5" x2="15" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="3" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<circle cx="7" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<line x1="5" y1="15" x2="3" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="5" y1="15" x2="7" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #292524; white-space: nowrap;">조직 실적 트리</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 6pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="10" r="7.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="10" y="12.5" text-anchor="middle" fill="#8B5CF6" font-size="9" font-weight="800">&#8361;</text>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #292524; white-space: nowrap;">역할별 수당 현황</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 6pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M10 3 C6 3 3 6 3 9.5 L3 13 L1.5 14.5 L18.5 14.5 L17 13 L17 9.5 C17 6 14 3 10 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
<circle cx="15" cy="5" r="3.5" fill="#EF4444"/>
<text x="15" y="7" text-anchor="middle" fill="#fff" font-size="4.5" font-weight="800">!</text>
<path d="M7.5 15.5 Q10 18 12.5 15.5" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #292524; white-space: nowrap;">승인 대기 알림</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 6pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 15 L7 11 L10 13 L16 5" fill="none" stroke="#F59E0B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #292524; white-space: nowrap;">기간별 트렌드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 6pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.4"/>
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="10" x2="12" y2="10" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="15.5" cy="14.5" r="3.5" fill="#FAFAF9" stroke="#EC4899" stroke-width="0.9"/>
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #292524; white-space: nowrap;">수익 시뮬레이터</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 6pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="5" y="2" width="10" height="16" rx="2" fill="none" stroke="#0D9488" stroke-width="1" opacity="0.5"/>
<circle cx="10" cy="16" r="1" fill="#0D9488" opacity="0.5"/>
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(13,148,136,0.1)"/>
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#0D9488" opacity="0.4"/>
<rect x="8" y="8.5" width="4" height="1.5" rx="0.3" fill="#10B981" opacity="0.4"/>
<rect x="8" y="11" width="4" height="1.5" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #292524; white-space: nowrap;">모바일 대응</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 8pt;"></div>
<!-- 역할별 맞춤 화면 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #14B8A6; margin-bottom: 5pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 4pt;">
<!-- CEO -->
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.12); border-radius: 7pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#0D9488" stroke-width="1.2"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#0D9488" stroke-width="1.2"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #0D9488;">CEO</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E; margin-top: 1pt;">전사 KPI 총괄</p>
</div>
<!-- 관리자 -->
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 7pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1" opacity="0.6"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #10B981;">관리자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E; margin-top: 1pt;">팀 실적 관리</p>
</div>
<!-- 운영자 -->
<div style="flex: 1; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.12); border-radius: 7pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.4"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#F59E0B" stroke-width="1.2"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #F59E0B;">운영자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E; margin-top: 1pt;">인력/승인 관리</p>
</div>
<!-- 영업자 -->
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 7pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #8B5CF6;">영업자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E; margin-top: 1pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 8pt;"></div>
<!-- SAM 통합 플랫폼 연결 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 5pt;">대시보드 + SAM ERP/MES 통합</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: #F5F5F4; border-radius: 5pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="1.5" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<line x1="5" y1="6" x2="11" y2="6" stroke="#D6D3D1" stroke-width="0.5"/>
<line x1="5" y1="8" x2="9" y2="8" stroke="#D6D3D1" stroke-width="0.5"/>
<line x1="5" y1="10" x2="11" y2="10" stroke="#D6D3D1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">견적/수주</p>
</div>
<div style="flex: 1; background: #F5F5F4; border-radius: 5pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<circle cx="8" cy="8" r="2" fill="none" stroke="#D6D3D1" stroke-width="0.5"/>
<line x1="8" y1="3" x2="8" y2="4.5" stroke="#D6D3D1" stroke-width="0.5"/>
<line x1="13" y1="8" x2="11.5" y2="8" stroke="#D6D3D1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">생산 MES</p>
</div>
<div style="flex: 1; background: #F5F5F4; border-radius: 5pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M5 3 L11 3 L13 6 L8 14 L3 6 Z" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<path d="M3 6 L13 6" stroke="#D6D3D1" stroke-width="0.5"/>
<path d="M8 6 L8 14" stroke="#D6D3D1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">품질/검사</p>
</div>
<div style="flex: 1; background: #F5F5F4; border-radius: 5pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="4" width="10" height="9" rx="1" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<line x1="3" y1="7" x2="13" y2="7" stroke="#D6D3D1" stroke-width="0.5"/>
<line x1="8" y1="7" x2="8" y2="13" stroke="#D6D3D1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">재고/자재</p>
</div>
<div style="flex: 1; background: #F5F5F4; border-radius: 5pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="6" r="3" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<path d="M3 14 Q3 10 8 10 Q13 10 13 14" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">인사/회계</p>
</div>
</div>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 3pt; text-align: center;">대시보드의 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">투자 비용</p>
<div style="display: flex; gap: 5pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.14); border-radius: 7pt; padding: 7pt 8pt; margin-bottom: 3pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="12" height="12" rx="2" fill="none" stroke="#0D9488" stroke-width="1" opacity="0.5"/>
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0D9488;">대시보드 포함 기본 패키지</p>
</div>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #292524;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: #F5F5F4; border-radius: 5pt; padding: 3pt 5pt;">
<p style="font-size: 5.5pt; color: #A8A29E; line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.14); border-radius: 7pt; padding: 7pt 8pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 4pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B;">추가 옵션 (선택)</p>
</div>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #57534E;">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #57534E;">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #57534E;">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 8pt;"></div>
<!-- 도입 프로세스 (SVG 화살표 연결) -->
<div style="margin-bottom: 6pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #14B8A6; margin-bottom: 5pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; border-radius: 7pt; padding: 4pt 2pt; text-align: center; background: rgba(13,148,136,0.05); border: 1pt solid rgba(13,148,136,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="5" r="3" fill="none" stroke="#0D9488" stroke-width="0.8"/>
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#0D9488" stroke-width="0.8"/>
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#0D9488" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #57534E;">현장 인터뷰</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#D6D3D1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 7pt; padding: 4pt 2pt; text-align: center; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="#10B981" stroke-width="0.8"/>
<line x1="6" y1="5" x2="10" y2="5" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="7" x2="10" y2="7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="9" x2="10" y2="9" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="11" x2="9" y2="11" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #57534E;">맞춤 개발</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#D6D3D1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 7pt; padding: 4pt 2pt; text-align: center; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<rect x="9" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8"/>
<path d="M7 7 L9 8 M7 8 L9 7" stroke="#8B5CF6" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #57534E;">데이터 이관</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#D6D3D1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 7pt; padding: 4pt 2pt; text-align: center; background: rgba(245,158,11,0.05); border: 1pt solid rgba(245,158,11,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 8 L8 14 L2 8 Z" fill="none" stroke="#F59E0B" stroke-width="0.8"/>
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #57534E;">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(13,148,136,0.04); border: 1.5pt solid rgba(13,148,136,0.15); border-radius: 7pt; padding: 9pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#0D9488" stroke-width="1.2" opacity="0.5"/>
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #292524;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0D9488;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E; margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

278
sam/docs/brochure/v7/slides/brochure-dashboard-front.html
View File

@@ -1,278 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FAFAF9;
padding: 26pt 22pt 16pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 16pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">CEO DASHBOARD v7</p>
</div>
<!-- 히어로 섹션 -->
<div style="display: flex; align-items: center; gap: 14pt; margin-bottom: 18pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #0D9488; letter-spacing: 0.1em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 19pt; font-weight: 800; color: #292524; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 8pt; color: #57534E; line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기<br>더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- 히어로 아이콘 -->
<div style="flex-shrink: 0; width: 80pt; height: 80pt;">
<svg viewBox="0 0 90 90" width="80pt" height="80pt" xmlns="http://www.w3.org/2000/svg">
<!-- 모니터 외곽 -->
<rect x="8" y="10" width="74" height="50" rx="5" fill="none" stroke="#0D9488" stroke-width="1.5" opacity="0.5"/>
<rect x="12" y="14" width="66" height="42" rx="3" fill="#FFFFFF"/>
<!-- KPI 미니 카드들 -->
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(13,148,136,0.15)"/>
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.15)"/>
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.15)"/>
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.15)"/>
<!-- 미니 차트 -->
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25 L75 50 L16 50 Z" fill="#0D9488" opacity="0.08"/>
<!-- 모니터 받침 -->
<rect x="36" y="60" width="18" height="3" rx="1" fill="#0D9488" opacity="0.3"/>
<rect x="32" y="63" width="26" height="2" rx="1" fill="#0D9488" opacity="0.2"/>
<!-- 알림 뱃지 -->
<circle cx="73" cy="14" r="5" fill="#EF4444" opacity="0.9"/>
<text x="73" y="16.5" text-anchor="middle" fill="#fff" font-size="6" font-weight="800">5</text>
<!-- 와이파이 -->
<path d="M66 72 Q72 66 78 72" fill="none" stroke="#10B981" stroke-width="1" opacity="0.4"/>
<path d="M63 76 Q72 68 81 76" fill="none" stroke="#10B981" stroke-width="1" opacity="0.25"/>
<circle cx="72" cy="76" r="1.5" fill="#10B981" opacity="0.5"/>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 16pt;"></div>
<!-- 고민 섹션 (타임라인 인포그래픽) -->
<div style="margin-bottom: 16pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #EF4444; margin-bottom: 8pt;">대표님의 하루</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<!-- AM 9:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L17 15" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">9AM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 6pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: #57534E; white-space: nowrap;">"어제 매출 얼마야?" <span style="color: #EF4444; font-weight: 600;">팀장 보고 대기중...</span></p>
</div>
</div>
<!-- PM 2:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L9 16" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">2PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 6pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: #57534E; white-space: nowrap;">"수주 밀린 거 없어?" <span style="color: #EF4444; font-weight: 600;">Excel 취합중...</span></p>
</div>
</div>
<!-- PM 5:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L8 12" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">5PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 6pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: #57534E; white-space: nowrap;">"결재할 것 정리해줘" <span style="color: #EF4444; font-weight: 600;">서류 찾는중...</span></p>
</div>
</div>
</div>
</div>
<!-- 전환 화살표 -->
<div style="text-align: center; margin-bottom: 12pt;">
<svg viewBox="0 0 40 24" width="40pt" height="16pt" xmlns="http://www.w3.org/2000/svg">
<path d="M10 6 L20 18 L30 6" fill="none" stroke="#0D9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0D9488;">SAM 도입 후</p>
</div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1pt solid #E7E5E4; border-radius: 7pt; padding: 9pt; margin-bottom: 16pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.05);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E; margin-left: 5pt;">SAM CEO Dashboard --- 로그인 후 3초</p>
</div>
<!-- KPI 카드 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: rgba(13,148,136,0.06); border: 1pt solid rgba(13,148,136,0.15); border-radius: 6pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#0D9488" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#0D9488" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#0D9488"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #292524;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #0D9488; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.15); border-radius: 6pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #292524;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #292524;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.06); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 라인 차트 + 도넛 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: #F5F5F4; border-radius: 5pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #A8A29E; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 35" width="100%" height="26pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7 L135 33 L5 33 Z" fill="#0D9488" opacity="0.08"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7" fill="none" stroke="#0D9488" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="4" r="2" fill="#0D9488"/>
</svg>
</div>
<div style="flex: 2; background: #F5F5F4; border-radius: 5pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 4pt;">
<svg viewBox="0 0 40 40" width="30pt" height="30pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(41,37,36,0.06)" stroke-width="4.5"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#0D9488" stroke-width="4.5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4.5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="4.5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4.5" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #0D9488; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #57534E;">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #57534E;">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #57534E;">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #57534E;">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 대표님이 얻는 것 -->
<div style="margin-bottom: 12pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0D9488; margin-bottom: 6pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<!-- 즉시 현황 파악 -->
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.12); border-radius: 7pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="10" fill="none" stroke="#0D9488" stroke-width="1.2" opacity="0.4"/>
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="14" r="1.5" fill="#0D9488"/>
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
</div>
<!-- 데이터로 판단 -->
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 7pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
</div>
<!-- 모바일 승인 -->
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 7pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">모바일 승인</p>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="#A8A29E" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="#A8A29E" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="#A8A29E"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">클라우드 기반</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="#A8A29E" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="#A8A29E"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="#A8A29E" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="#A8A29E" stroke-width="0.5"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">역할별 권한</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid #D6D3D1; padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #57534E;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">뒷면에서 상세 기능을 확인하세요 &#9654;</p>
</div>
</div>
</div>
</body>
</html>

27
sam/docs/brochure/v8/convert-1page.cjs
View File

@@ -1,27 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v8 (Two-Tone Split) 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v8-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

31
sam/docs/brochure/v8/convert-2page.cjs
View File

@@ -1,31 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v8-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v8/sam-brochure-v8-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v8/sam-brochure-v8-dashboard-2page.pptx
View File

Binary file not shown.

238
sam/docs/brochure/v8/slides/brochure-dashboard-1page.html
View File

@@ -1,238 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 0;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- ===== DARK ZONE (top ~240pt) ===== -->
<div style="background: #1E293B; padding: 20pt 20pt 16pt 20pt;">
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 12pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<div style="background: rgba(249,115,22,0.15); border: 1pt solid rgba(249,115,22,0.3); border-radius: 3pt; padding: 2pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #F97316; letter-spacing: 0.08em;">EXECUTIVE DASHBOARD</p>
</div>
</div>
<!-- 히어로 -->
<div style="margin-bottom: 14pt;">
<h1 style="font-size: 16pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 4pt;">대표님, 우리 회사</h1>
<h1 style="font-size: 16pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 6pt;">지금 어떤 상태인가요?</h1>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.6); line-height: 1.5;">보고 대기 없이, 로그인 한 번이면 전사 현황이 한눈에.</p>
</div>
<!-- KPI 카드 4개 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#F97316" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#F97316" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#F97316"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FFFFFF;">5.2억</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4pt; color: #F97316; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FFFFFF;">127건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FFFFFF;">96%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
</div>
<!-- ===== WHITE ZONE ===== -->
<div style="flex: 1; padding: 14pt 20pt 10pt 20pt; display: flex; flex-direction: column;">
<!-- 대표님이 얻는 것 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A; margin-bottom: 5pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 4pt; padding: 5pt 5pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
<p style="font-size: 5pt; color: #475569; margin-top: 1pt; line-height: 1.4;">로그인 3초면</p>
<p style="font-size: 5pt; color: #475569; line-height: 1.4;">전사 현황 확인</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #10B981; border-radius: 4pt; padding: 5pt 5pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
<p style="font-size: 5pt; color: #475569; margin-top: 1pt; line-height: 1.4;">감이 아닌 숫자로</p>
<p style="font-size: 5pt; color: #475569; line-height: 1.4;">KPI/팀 성과 비교</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #8B5CF6; border-radius: 4pt; padding: 5pt 5pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
<p style="font-size: 5pt; color: #475569; margin-top: 1pt; line-height: 1.4;">이동중에도 즉시</p>
<p style="font-size: 5pt; color: #475569; line-height: 1.4;">결재/승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
<!-- 핵심 기능 7개 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A; margin-bottom: 5pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#F97316" opacity="0.45"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#F97316" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#F97316"/>
</svg>
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">실시간 KPI 카드</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">매출, 수주, 납기율, 승인</p>
</div>
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #10B981; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="8" cy="3.5" r="2" fill="none" stroke="#10B981" stroke-width="0.9"/>
<line x1="8" y1="5.5" x2="8" y2="7.5" stroke="#10B981" stroke-width="0.7"/>
<line x1="4" y1="7.5" x2="12" y2="7.5" stroke="#10B981" stroke-width="0.7"/>
<circle cx="4" cy="10" r="1.5" fill="none" stroke="#10B981" stroke-width="0.7" opacity="0.6"/>
<circle cx="8" cy="10" r="1.5" fill="none" stroke="#10B981" stroke-width="0.7" opacity="0.6"/>
<circle cx="12" cy="10" r="1.5" fill="none" stroke="#10B981" stroke-width="0.7" opacity="0.6"/>
</svg>
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">조직 실적 트리</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">계층별 팀/개인 실적</p>
</div>
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #8B5CF6; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="8" cy="8" r="6" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.3"/>
<text x="8" y="10" text-anchor="middle" fill="#8B5CF6" font-size="7" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">역할별 수당 현황</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">판매자/관리자/협업자</p>
</div>
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #EF4444; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M8 2.5 C5 2.5 3 5 3 7.5 L3 10.5 L2 11.5 L14 11.5 L13 10.5 L13 7.5 C13 5 11 2.5 8 2.5 Z" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
<circle cx="12" cy="4" r="2.5" fill="#EF4444"/>
<text x="12" y="5.5" text-anchor="middle" fill="#fff" font-size="3.5" font-weight="700">!</text>
</svg>
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">승인 대기 알림</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">미처리 빨간 뱃지</p>
</div>
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #FB923C; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 12 L6 9 L8 10.5 L13 4" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 4 L13 4 L13 6" fill="none" stroke="#FB923C" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">기간별 트렌드</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">당월/분기/연간 추이</p>
</div>
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="3" width="12" height="10" rx="1.5" fill="none" stroke="#F97316" stroke-width="0.8" opacity="0.4"/>
<line x1="4" y1="6" x2="11" y2="6" stroke="#F97316" stroke-width="0.5" opacity="0.3"/>
<line x1="4" y1="8" x2="9" y2="8" stroke="#F97316" stroke-width="0.5" opacity="0.3"/>
<circle cx="12" cy="11.5" r="2.5" fill="#FFFFFF" stroke="#F97316" stroke-width="0.7"/>
<path d="M11.2 11.5 L12.8 11.5 M12 10.7 L12 12.3" stroke="#F97316" stroke-width="0.7" stroke-linecap="round"/>
</svg>
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">수익 시뮬레이터</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">가상 시나리오 계산</p>
</div>
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="4.5" y="2" width="7" height="12" rx="1.5" fill="none" stroke="#F97316" stroke-width="0.8" opacity="0.5"/>
<circle cx="8" cy="12.5" r="0.7" fill="#F97316" opacity="0.5"/>
<rect x="6" y="4.5" width="4" height="5.5" rx="0.5" fill="rgba(249,115,22,0.1)"/>
<rect x="6.5" y="5.2" width="3" height="1" rx="0.3" fill="#F97316" opacity="0.4"/>
<rect x="6.5" y="7" width="3" height="1" rx="0.3" fill="#10B981" opacity="0.4"/>
<rect x="6.5" y="8.8" width="3" height="1" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
</svg>
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">모바일 대응</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">스마트폰 KPI/승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A; margin-bottom: 5pt;">투자 비용</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #F97316; border-radius: 5pt; padding: 6pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #F97316; margin-bottom: 2pt;">기본 패키지</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #0F172A;">2,000만원</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #FB923C; border-radius: 5pt; padding: 6pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #FB923C; margin-bottom: 2pt;">추가 옵션 (선택)</p>
<div style="display: flex; justify-content: space-between; margin-top: 2pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FB923C;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FB923C;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FB923C;">월 10~20만원</p>
</div>
</div>
</div>
</div>
<!-- ===== DARK CTA ZONE ===== -->
<div style="margin-top: auto; background: #1E293B; border-radius: 7pt; padding: 10pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#F97316" stroke-width="1.2" opacity="0.5"/>
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#F97316" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #FFFFFF;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F97316;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</div>
</body>
</html>

320
sam/docs/brochure/v8/slides/brochure-dashboard-back.html
View File

@@ -1,320 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 20pt 22pt 0 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더: BI 로고 (on white) + badge -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 12pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<div style="background: rgba(249,115,22,0.1); border: 1pt solid rgba(249,115,22,0.2); border-radius: 3pt; padding: 2pt 7pt;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F97316; letter-spacing: 0.08em;">FEATURES &amp; PRICING</p>
</div>
</div>
<!-- 대시보드 7대 기능 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 실시간 KPI -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #F97316; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="11" width="4" height="6" rx="0.5" fill="#F97316" opacity="0.45"/>
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#F97316" opacity="0.7"/>
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#F97316"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">실시간 KPI 카드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 조직 실적 트리 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #10B981; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="4.5" r="2.5" fill="none" stroke="#10B981" stroke-width="1.1"/>
<line x1="10" y1="7" x2="10" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<line x1="5" y1="9.5" x2="15" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<circle cx="5" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="10" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="15" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<line x1="5" y1="9.5" x2="5" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="10" y1="9.5" x2="10" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="15" y1="9.5" x2="15" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">조직 실적 트리</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 수당 현황 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #8B5CF6; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="10" r="7.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="10" y="12.5" text-anchor="middle" fill="#8B5CF6" font-size="9" font-weight="800">&#8361;</text>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">역할별 수당 현황</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 승인 대기 알림 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #EF4444; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M10 3 C6 3 3 6 3 9.5 L3 13 L1.5 14.5 L18.5 14.5 L17 13 L17 9.5 C17 6 14 3 10 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
<circle cx="15" cy="5" r="3.5" fill="#EF4444"/>
<text x="15" y="7" text-anchor="middle" fill="#fff" font-size="4.5" font-weight="800">!</text>
<path d="M7.5 15.5 Q10 18 12.5 15.5" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">승인 대기 알림</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 기간별 트렌드 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #FB923C; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 15 L7 11 L10 13 L16 5" fill="none" stroke="#FB923C" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">기간별 트렌드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 수익 시뮬레이터 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #F97316; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#F97316" stroke-width="1" opacity="0.4"/>
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="10" x2="12" y2="10" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
<circle cx="15.5" cy="14.5" r="3.5" fill="#FFFFFF" stroke="#F97316" stroke-width="0.9"/>
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#F97316" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">수익 시뮬레이터</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 모바일 대응 -->
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #F97316; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="5" y="2" width="10" height="16" rx="2" fill="none" stroke="#F97316" stroke-width="1" opacity="0.5"/>
<circle cx="10" cy="16" r="1" fill="#F97316" opacity="0.5"/>
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(249,115,22,0.1)"/>
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#F97316" opacity="0.4"/>
<rect x="8" y="8.5" width="4" height="1.5" rx="0.3" fill="#10B981" opacity="0.4"/>
<rect x="8" y="11" width="4" height="1.5" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">모바일 대응</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
<!-- 역할별 맞춤 화면 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 4pt;">
<!-- CEO -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #F97316; border-radius: 5pt; padding: 7pt 4pt; text-align: center; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#F97316" stroke-width="1.2"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#F97316" stroke-width="1.2"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #F97316;">CEO</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">전사 KPI 총괄</p>
</div>
<!-- 관리자 -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #10B981; border-radius: 5pt; padding: 7pt 4pt; text-align: center; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1" opacity="0.6"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #10B981;">관리자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">팀 실적 관리</p>
</div>
<!-- 운영자 -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #FB923C; border-radius: 5pt; padding: 7pt 4pt; text-align: center; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#FB923C" stroke-width="1" opacity="0.4"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#FB923C" stroke-width="1.2"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #FB923C;">운영자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">인력/승인 관리</p>
</div>
<!-- 영업자 -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #8B5CF6; border-radius: 5pt; padding: 7pt 4pt; text-align: center; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #8B5CF6;">영업자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">투자 비용</p>
<div style="display: flex; gap: 5pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #F97316; border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="12" height="12" rx="2" fill="none" stroke="#F97316" stroke-width="1" opacity="0.5"/>
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#F97316" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F97316;">대시보드 포함 기본 패키지</p>
</div>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #0F172A;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: #F8FAFC; border-radius: 3pt; padding: 3pt 5pt;">
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산</p>
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #FB923C; border-radius: 6pt; padding: 7pt 8pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 4pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#FB923C" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #FB923C;">추가 옵션 (선택)</p>
</div>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #475569;">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FB923C;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #475569;">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FB923C;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #475569;">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FB923C;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
<!-- 도입 프로세스 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; border-radius: 5pt; padding: 5pt 2pt; text-align: center; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #F97316; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="5" r="3" fill="none" stroke="#F97316" stroke-width="0.8"/>
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#F97316" stroke-width="0.8"/>
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#F97316" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">현장 인터뷰</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#F97316" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 5pt 2pt; text-align: center; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #10B981; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="#10B981" stroke-width="0.8"/>
<line x1="6" y1="5" x2="10" y2="5" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="7" x2="10" y2="7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="9" x2="10" y2="9" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="11" x2="9" y2="11" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">맞춤 개발</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#F97316" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 5pt 2pt; text-align: center; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #8B5CF6; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<rect x="9" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8"/>
<path d="M7 7 L9 8 M7 8 L9 7" stroke="#8B5CF6" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">데이터 이관</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#F97316" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 5pt 2pt; text-align: center; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #FB923C; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 8 L8 14 L2 8 Z" fill="none" stroke="#FB923C" stroke-width="0.8"/>
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">교육/안정화</p>
</div>
</div>
</div>
<!-- ===== DARK CTA ZONE (bottom) ===== -->
<div style="margin-top: auto; background: #1E293B; border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 0;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 7pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#F97316" stroke-width="1.2" opacity="0.5"/>
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#F97316" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #FFFFFF;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F97316;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="padding: 5pt 0; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

281
sam/docs/brochure/v8/slides/brochure-dashboard-front.html
View File

@@ -1,281 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 0;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- ===== DARK ZONE (top ~280pt) ===== -->
<div style="background: #1E293B; padding: 24pt 22pt 20pt 22pt;">
<!-- 헤더: BI 로고 + 배지 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 16pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<div style="background: rgba(249,115,22,0.15); border: 1pt solid rgba(249,115,22,0.3); border-radius: 3pt; padding: 2pt 7pt;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F97316; letter-spacing: 0.08em;">EXECUTIVE DASHBOARD</p>
</div>
</div>
<!-- 히어로 텍스트 -->
<div style="margin-bottom: 18pt;">
<h1 style="font-size: 19pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 6pt;">대표님, 우리 회사</h1>
<h1 style="font-size: 19pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 8pt;">지금 어떤 상태인가요?</h1>
<p style="font-size: 8pt; color: rgba(255,255,255,0.6); line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기</p>
<p style="font-size: 8pt; color: rgba(255,255,255,0.6); line-height: 1.55;">더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- KPI 카드 4개 (on dark) -->
<div style="display: flex; gap: 4pt;">
<!-- 월 매출 -->
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#F97316" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#F97316" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#F97316"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #FFFFFF;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #F97316; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<!-- 누적 수주 -->
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #FFFFFF;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<!-- 납기 준수율 -->
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #FFFFFF;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<!-- 승인 대기 -->
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
</div>
<!-- ===== WHITE ZONE (bottom ~440pt) ===== -->
<div style="flex: 1; padding: 18pt 22pt 14pt 22pt; display: flex; flex-direction: column;">
<!-- 대표님이 얻는 것 - 3 value cards -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 7pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<!-- 즉시 현황 파악 -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #F97316; border-radius: 5pt; padding: 8pt 6pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
<circle cx="12" cy="12" r="9" fill="none" stroke="#F97316" stroke-width="1.2" opacity="0.4"/>
<path d="M12 6 L12 12 L16 15" fill="none" stroke="#F97316" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="1.2" fill="#F97316"/>
<path d="M19 4 L17 8 L20 8 L18 12" fill="none" stroke="#FB923C" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: #475569; margin-top: 2pt; line-height: 1.4;">로그인 3초면</p>
<p style="font-size: 5.5pt; color: #475569; line-height: 1.4;">전사 현황 확인</p>
</div>
<!-- 데이터로 판단 -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #10B981; border-radius: 5pt; padding: 8pt 6pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
<circle cx="12" cy="10" r="7" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M9 7 Q12 5 15 7" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M8 10 Q12 8 16 10" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M9 13 Q12 11 15 13" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<circle cx="7" cy="20" r="1" fill="#10B981" opacity="0.6"/>
<circle cx="12" cy="20" r="1" fill="#10B981" opacity="0.8"/>
<circle cx="17" cy="20" r="1" fill="#10B981"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: #475569; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로</p>
<p style="font-size: 5.5pt; color: #475569; line-height: 1.4;">KPI/팀 성과 비교</p>
</div>
<!-- 모바일 승인 -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #8B5CF6; border-radius: 5pt; padding: 8pt 6pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M8 12 L11 15 L17 9" fill="none" stroke="#8B5CF6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="18" y="16" width="4.5" height="7" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.7" opacity="0.5"/>
<circle cx="20.25" cy="21.5" r="0.4" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
<p style="font-size: 5.5pt; color: #475569; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시</p>
<p style="font-size: 5.5pt; color: #475569; line-height: 1.4;">결재/승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 14pt;"></div>
<!-- Before / After -->
<div style="display: flex; gap: 4pt; margin-bottom: 14pt;">
<!-- Before -->
<div style="flex: 5; background: #FFFFFF; border: 1pt solid rgba(239,68,68,0.2); border-left: 3pt solid #EF4444; border-radius: 5pt; padding: 7pt 8pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 5pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">매출? → 보고 대기 1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">수주? → Excel 취합 반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">승인? → 서류 찾기 30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">실적? → 각 팀장 개별 보고</p>
</div>
<!-- 화살표 -->
<div style="display: flex; align-items: center; flex-shrink: 0;">
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10 L14 10" stroke="#F97316" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#F97316" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- After -->
<div style="flex: 5; background: #FFFFFF; border: 1pt solid rgba(16,185,129,0.2); border-left: 3pt solid #10B981; border-radius: 5pt; padding: 7pt 8pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 5pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">로그인 3초 → <span style="color:#10B981;font-weight:600;">전사 현황</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">클릭 한 번 → <span style="color:#10B981;font-weight:600;">실시간 수주</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">뱃지 터치 → <span style="color:#10B981;font-weight:600;">즉시 승인</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">트리 펼침 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 14pt;"></div>
<!-- 대시보드 핵심 기능 6개 (2x3 grid) -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#F97316" opacity="0.5"/>
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#F97316" opacity="0.75"/>
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#F97316"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">실시간 <span style="color: #F97316; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#FB923C" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">기간별 <span style="color: #FB923C; font-weight: 700;">트렌드 분석</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#F97316" stroke-width="1" opacity="0.5"/>
<line x1="5" y1="7" x2="13" y2="7" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="9" x2="11" y2="9" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="11" x2="9" y2="11" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
<circle cx="14" cy="13" r="3.5" fill="#FFFFFF" stroke="#F97316" stroke-width="0.8"/>
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#F97316" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">수익 <span style="color: #F97316; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="#94A3B8" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="#94A3B8"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">클라우드 기반</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="#94A3B8"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="#94A3B8" stroke-width="0.5"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">역할별 권한</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M4 1 Q6.5 1 6.5 3.5 L6.5 4.5 Q6.5 7 4 7 Q1.5 7 1.5 4.5 L1.5 3.5 Q1.5 1 4 1 Z" fill="none" stroke="#94A3B8" stroke-width="0.7"/><line x1="4" y1="3.5" x2="4" y2="5" stroke="#94A3B8" stroke-width="0.5" stroke-linecap="round"/><circle cx="4" cy="3" r="0.4" fill="#94A3B8"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">데이터 암호화</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #475569;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 &#9654;</p>
</div>
</div>
</div>
</div>
</body>
</html>

27
sam/docs/brochure/v9/convert-1page.cjs
View File

@@ -1,27 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v9 (Minimal White + Indigo) 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v9-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

31
sam/docs/brochure/v9/convert-2page.cjs
View File

@@ -1,31 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v9-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v9/sam-brochure-v9-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v9/sam-brochure-v9-dashboard-2page.pptx
View File

Binary file not shown.

266
sam/docs/brochure/v9/slides/brochure-dashboard-1page.html
View File

@@ -1,266 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 22pt 24pt 12pt 28pt;
display: flex; flex-direction: column;
position: relative;
}
</style>
</head>
<body>
<!-- Left accent line -->
<div style="position: absolute; left: 0; top: 0; width: 3pt; height: 100%; background: #6366F1;"></div>
<!-- Header -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 16pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1; letter-spacing: 0.15em;">v9</p>
</div>
<!-- Hero -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #6366F1; letter-spacing: 0.15em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
<p style="white-space: nowrap; font-size: 15pt; font-weight: 300; color: #0F172A; margin-bottom: 2pt;">대표님, 우리 회사</p>
<p style="white-space: nowrap; font-size: 15pt; font-weight: 800; color: #0F172A; margin-bottom: 6pt;">지금 어떤 상태인가요?</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #64748B;">보고 대기 없이, 로그인 한 번이면 전사 현황이 한눈에.</p>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 12pt;"></div>
<!-- Dashboard Mock UI - compact -->
<div style="background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 7pt; margin-bottom: 12pt;">
<!-- Title bar -->
<div style="display: flex; align-items: center; gap: 2pt; margin-bottom: 5pt;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1; margin-left: 4pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI cards -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #6366F1;">5.2억</p>
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">+15.3%</p>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #10B981;">127건</p>
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">+8건</p>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #818CF8;">96%</p>
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 4pt; color: #EF4444; font-weight: 600;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- Chart area -->
<div style="display: flex; gap: 3pt;">
<div style="flex: 3; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt;">
<p style="white-space: nowrap; font-size: 4pt; color: #CBD5E1; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 28" width="100%" height="20pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="14" x2="150" y2="14" stroke="#F1F5F9" stroke-width="0.5"/>
<path d="M5 24 L20 18 L35 20 L50 14 L65 10 L80 7 L95 9 L110 4 L125 6 L140 2" fill="none" stroke="#6366F1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="140" cy="2" r="1.5" fill="#6366F1"/>
</svg>
</div>
<div style="flex: 2; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt; display: flex; align-items: center; gap: 3pt;">
<svg viewBox="0 0 36 36" width="24pt" height="24pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="18" cy="18" r="12" fill="none" stroke="#F1F5F9" stroke-width="3.5"/>
<circle cx="18" cy="18" r="12" fill="none" stroke="#6366F1" stroke-width="3.5" stroke-dasharray="29 47" stroke-dashoffset="19" stroke-linecap="round"/>
<circle cx="18" cy="18" r="12" fill="none" stroke="#10B981" stroke-width="3.5" stroke-dasharray="19 57" stroke-dashoffset="-10" stroke-linecap="round"/>
<circle cx="18" cy="18" r="12" fill="none" stroke="#818CF8" stroke-width="3.5" stroke-dasharray="16 60" stroke-dashoffset="-29" stroke-linecap="round"/>
<circle cx="18" cy="18" r="12" fill="none" stroke="#F59E0B" stroke-width="3.5" stroke-dasharray="10 66" stroke-dashoffset="-45" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 1.5pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #6366F1; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #818CF8; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 3 value props - compact -->
<div style="display: flex; gap: 4pt; margin-bottom: 12pt;">
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 5pt; text-align: center;">
<svg viewBox="0 0 20 20" width="12pt" height="12pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="7" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.3"/>
<path d="M10 5 L10 10 L13 12.5" fill="none" stroke="#6366F1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
<p style="font-size: 5pt; color: #64748B; margin-top: 1pt;">3초면 전사 현황</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 5pt; text-align: center;">
<svg viewBox="0 0 20 20" width="12pt" height="12pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="3" y="11" width="3" height="6" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.4"/>
<rect x="8" y="7" width="3" height="10" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.6"/>
<rect x="13" y="3" width="3" height="14" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
<p style="font-size: 5pt; color: #64748B; margin-top: 1pt;">KPI/팀 성과 비교</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 5pt; text-align: center;">
<svg viewBox="0 0 20 20" width="12pt" height="12pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="6.5" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.3"/>
<path d="M7 10 L9 12 L13 8" fill="none" stroke="#6366F1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
<p style="font-size: 5pt; color: #64748B; margin-top: 1pt;">즉시 결재 처리</p>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 10pt;"></div>
<!-- Features list - compact -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 5pt;">핵심 기능</p>
<div style="display: flex; flex-wrap: wrap; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">실시간 KPI 카드</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">조직 실적 트리</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">역할별 수당 현황</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">승인 대기 알림</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">기간별 트렌드</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">수익 시뮬레이터</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">모바일 대응</p>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 10pt;"></div>
<!-- 4 role cards - compact -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 5pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">CEO</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">전사 KPI</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #818CF8;">관리자</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">팀 실적</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">운영자</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">인력/승인</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #818CF8;">영업자</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">내 실적</p>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 10pt;"></div>
<!-- Pricing - compact -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 5pt;">투자 비용</p>
<div style="display: flex; align-items: baseline; gap: 6pt;">
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #0F172A;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">+ 월 50만원 (유지보수)</p>
</div>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 2pt;">CEO 대시보드 + 견적/수주 + 생산 + 인사/회계 포함</p>
</div>
<!-- Process - compact -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 4pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">01</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">현장 인터뷰</p>
</div>
<svg viewBox="0 0 6 6" width="4pt" height="4pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M1 3 L5 3 M4 1.5 L5.5 3 L4 4.5" fill="none" stroke="#CBD5E1" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">02</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">맞춤 개발</p>
</div>
<svg viewBox="0 0 6 6" width="4pt" height="4pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M1 3 L5 3 M4 1.5 L5.5 3 L4 4.5" fill="none" stroke="#CBD5E1" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">03</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">데이터 이관</p>
</div>
<svg viewBox="0 0 6 6" width="4pt" height="4pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M1 3 L5 3 M4 1.5 L5.5 3 L4 4.5" fill="none" stroke="#CBD5E1" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">04</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA + Footer -->
<div style="margin-top: auto; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 10pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #0F172A;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
<div style="text-align: right; border-left: 2pt solid #6366F1; padding-left: 8pt;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1;">(주)코드브릿지엑스</p>
</div>
</body>
</html>

229
sam/docs/brochure/v9/slides/brochure-dashboard-back.html
View File

@@ -1,229 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 24pt 28pt 14pt 32pt;
display: flex; flex-direction: column;
position: relative;
}
</style>
</head>
<body>
<!-- Left accent line -->
<div style="position: absolute; left: 0; top: 0; width: 3pt; height: 100%; background: #6366F1;"></div>
<!-- Header -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 18pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; letter-spacing: 0.15em;">FEATURES & PRICING</p>
</div>
<!-- Section: 7 features as text rows -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">실시간 KPI 카드</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">조직 실적 트리</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">역할별 수당 현황</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">승인 대기 알림</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">기간별 트렌드</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">수익 시뮬레이터</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">모바일 대응</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 14pt;"></div>
<!-- 4 role cards - ultra minimal -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 5pt;">
<!-- CEO -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#6366F1" stroke-width="0.8"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#6366F1" stroke-width="0.8"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #6366F1;">CEO</p>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">전사 KPI 총괄</p>
</div>
<!-- Manager -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#818CF8" stroke-width="0.8"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.5"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#818CF8" stroke-width="0.8"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #818CF8;">관리자</p>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">팀 실적 관리</p>
</div>
<!-- Operator -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.3"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#6366F1" stroke-width="0.8"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #6366F1;">운영자</p>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">인력/승인 관리</p>
</div>
<!-- Sales -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.4"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#818CF8" stroke-width="0.5" opacity="0.3"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#818CF8" stroke-width="0.5" opacity="0.3"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#818CF8" stroke-width="0.5" opacity="0.3"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#818CF8" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #818CF8;">영업자</p>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 14pt;"></div>
<!-- Pricing - clean typography -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">투자 비용</p>
<div style="display: flex; gap: 6pt;">
<!-- Base package -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-bottom: 3pt;">대시보드 포함 기본 패키지</p>
<p style="white-space: nowrap; font-size: 15pt; font-weight: 800; color: #0F172A;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B; margin-top: 2pt;">+ 월 50만원 (유지보수)</p>
<div style="margin-top: 5pt; padding-top: 5pt; border-top: 1pt solid #F1F5F9;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">CEO 대시보드 + 견적/수주 + 생산</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">인사/회계 무료 포함</p>
</div>
</div>
<!-- Add-ons -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-bottom: 5pt;">추가 옵션 (선택)</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 14pt;"></div>
<!-- Process steps - simple numbered list -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">도입 프로세스</p>
<div style="display: flex; gap: 3pt; align-items: center;">
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">01</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">현장 인터뷰</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">1~2주</p>
</div>
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">02</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">맞춤 개발</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">2~4주</p>
</div>
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">03</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">데이터 이관</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">1~2주</p>
</div>
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">04</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">교육/안정화</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">1~2주</p>
</div>
</div>
</div>
<!-- CTA -->
<div style="margin-top: auto; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 6pt; padding: 12pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B; margin-top: 2pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
<div style="text-align: right; border-left: 2pt solid #6366F1; padding-left: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- Footer -->
<div style="margin-top: 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1;">(주)코드브릿지엑스</p>
</div>
</body>
</html>

181
sam/docs/brochure/v9/slides/brochure-dashboard-front.html
View File

@@ -1,181 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 32pt 28pt 18pt 32pt;
display: flex; flex-direction: column;
position: relative;
}
</style>
</head>
<body>
<!-- Left accent line -->
<div style="position: absolute; left: 0; top: 0; width: 3pt; height: 100%; background: #6366F1;"></div>
<!-- Header -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 28pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; letter-spacing: 0.15em;">v9</p>
</div>
<!-- Hero section -->
<div style="margin-bottom: 28pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #6366F1; letter-spacing: 0.15em; margin-bottom: 8pt;">EXECUTIVE DASHBOARD</p>
<p style="white-space: nowrap; font-size: 18pt; font-weight: 300; color: #0F172A; margin-bottom: 3pt;">대표님, 우리 회사</p>
<p style="white-space: nowrap; font-size: 18pt; font-weight: 800; color: #0F172A; margin-bottom: 10pt;">지금 어떤 상태인가요?</p>
<p style="white-space: nowrap; font-size: 7.5pt; color: #64748B; line-height: 1.6;">매출, 수주, 조직 실적, 승인 대기</p>
<p style="white-space: nowrap; font-size: 7.5pt; color: #64748B; line-height: 1.6;">더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 24pt;"></div>
<!-- Dashboard Mock UI -->
<div style="background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 6pt; padding: 10pt; margin-bottom: 24pt;">
<!-- Title bar -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 7pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI cards -->
<div style="display: flex; gap: 4pt; margin-bottom: 6pt;">
<!-- Revenue -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.6"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #6366F1;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">+15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">월 매출</p>
</div>
<!-- Orders -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #10B981;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">+8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">누적 수주</p>
</div>
<!-- Delivery -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#818CF8" stroke-width="1" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #818CF8;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">납기 준수율</p>
</div>
<!-- Pending -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="0.8" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.5" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- Chart area -->
<div style="display: flex; gap: 4pt;">
<!-- Line chart -->
<div style="flex: 3; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 5pt;">
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1; margin-bottom: 3pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 32" width="100%" height="24pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="#F1F5F9" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="#F1F5F9" stroke-width="0.5"/>
<path d="M5 28 L18 22 L31 24 L44 18 L57 14 L70 10 L83 12 L96 6 L109 8 L122 2 L135 5" fill="none" stroke="#6366F1" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="2" r="1.8" fill="#6366F1"/>
</svg>
</div>
<!-- Donut -->
<div style="flex: 2; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 5pt; display: flex; align-items: center; gap: 4pt;">
<svg viewBox="0 0 40 40" width="28pt" height="28pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="#F1F5F9" stroke-width="4"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#6366F1" stroke-width="4" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#818CF8" stroke-width="4" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #6366F1; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #818CF8; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 3 value proposition cards -->
<div style="display: flex; gap: 6pt; margin-bottom: 24pt;">
<!-- Instant insight -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 10pt 7pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
<circle cx="12" cy="12" r="9" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.3"/>
<path d="M12 6 L12 12 L16 15" fill="none" stroke="#6366F1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: #64748B; margin-top: 3pt; line-height: 1.5;">로그인 3초면</p>
<p style="font-size: 5.5pt; color: #64748B; line-height: 1.5;">전사 현황 확인</p>
</div>
<!-- Data-driven -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 10pt 7pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
<rect x="3" y="14" width="4" height="7" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.4"/>
<rect x="10" y="8" width="4" height="13" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.6"/>
<rect x="17" y="3" width="4" height="18" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: #64748B; margin-top: 3pt; line-height: 1.5;">감이 아닌 숫자로</p>
<p style="font-size: 5.5pt; color: #64748B; line-height: 1.5;">KPI/팀 성과 비교</p>
</div>
<!-- Mobile approval -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 10pt 7pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.3"/>
<path d="M8 12 L11 15 L16 9" fill="none" stroke="#6366F1" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
<p style="font-size: 5.5pt; color: #64748B; margin-top: 3pt; line-height: 1.5;">이동중에도 즉시</p>
<p style="font-size: 5.5pt; color: #64748B; line-height: 1.5;">결재/승인 처리</p>
</div>
</div>
<!-- Footer -->
<div style="margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0F172A;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">뒷면에서 상세 기능을 확인하세요</p>
</div>
</body>
</html>

119
sam/docs/changes/20260303_gemini_model_upgrade.md
View File

@@ -1,119 +0,0 @@
# Gemini 모델 업그레이드: 2.0-flash → 2.5-flash
**날짜:** 2026-03-03
**작업자:** Claude Code
---
## 변경 개요
Google이 2026년 6월 1일부로 Gemini 2.0 Flash 모델 서비스를 종료한다는 통보를 받아, SAM 시스템 전체의 Gemini 모델을 `gemini-2.0-flash` → `gemini-2.5-flash`로 마이그레이션했다.
---
## 변경 사유
- Google의 공식 메일 통보: Gemini 2.0 Flash / 2.0 Flash-Lite → 2026-06-01 강제 종료
- 마이그레이션 경로: `gemini-2.0-flash` → `gemini-2.5-flash`
- API 키, Base URL 변경 없음 (모델명만 변경)
---
## 수정된 파일
### API 프로젝트 (`/home/aweso/sam/api`)
| 파일 | 변경 내용 |
|------|----------|
| `.env` | `GEMINI_MODEL=gemini-2.0-flash` → `gemini-2.5-flash` |
| `config/services.php` | fallback 기본값 `gemini-2.0-flash` → `gemini-2.5-flash` |
| `app/Services/AiReportService.php` | fallback 기본값 변경 |
### MNG 프로젝트 (`/home/aweso/sam/mng`)
| 파일 | 변경 내용 |
|------|----------|
| `.env` | `GEMINI_MODEL=gemini-2.0-flash` → `gemini-2.5-flash` |
| `config/services.php` | fallback 기본값 변경 |
| `app/Models/System/AiConfig.php` | `DEFAULT_MODELS['gemini']` 상수 + `getActiveGemini()` fallback 변경 |
| `app/Services/NotionService.php` | fallback 기본값 변경 |
| `resources/views/system/ai-config/index.blade.php` | UI placeholder, 기본값, JS defaultModels 변경 |
| `resources/views/google-cloud/ai-guide/index.blade.php` | 서비스 현황 테이블 모델명 7곳 변경 |
| `resources/views/academy/env-management.blade.php` | 환경변수 예시 테이블 변경 |
### 문서 (`/home/aweso/sam/docs`)
| 파일 | 변경 내용 |
|------|----------|
| `guides/ai-config-settings.md` | 기본 모델명 업데이트, 최종 업데이트 날짜 변경 |
| `guides/ai-management.md` | **신규** — AI 관리 종합 가이드 (아키텍처, 버전 이력, 온보딩) |
| `guides/ai-model-update-workflow.md` | **신규** — 모델 업데이트 표준 절차 (7단계 워크플로우) |
| `changes/20260303_gemini_model_upgrade.md` | **신규** — 이 변경 이력 문서 |
### 수정하지 않은 파일 (의도적)
| 파일 | 이유 |
|------|------|
| `api/database/migrations/2026_01_27_*.php` | 이미 실행된 마이그레이션 — 변경 시 DB 무결성 문제 |
| `api/database/migrations/2026_02_07_*.php` | 동일 |
| `api/database/migrations/2026_02_09_*.php` | 동일 |
| `mng/views/google-cloud/cloud-api-pricing/index.blade.php` | `2.0 → 2.5` 마이그레이션 안내 UI — 이전 모델명이 의도적 잔존 |
---
## 서버 .env 수정 필요 (배포 후)
| 환경 | 파일 | 변수 | 담당 |
|------|------|------|------|
| 개발서버 | `/home/webservice/api/.env` | `GEMINI_MODEL=gemini-2.5-flash` | SSH 접속 수정 |
| 개발서버 | `/home/webservice/mng/.env` | `GEMINI_MODEL=gemini-2.5-flash` | SSH 접속 수정 |
| 운영서버 | `/home/webservice/api/.env` | `GEMINI_MODEL=gemini-2.5-flash` | 개발팀장 직접 |
| 운영서버 | `/home/webservice/mng/.env` | `GEMINI_MODEL=gemini-2.5-flash` | 개발팀장 직접 |
수정 후 반드시 실행:
```bash
php artisan config:clear
```
---
## DB 단가 설정 필요
MNG `/system/ai-token-usage` → 단가 설정에서:
- 기존 `gemini-2.0-flash` 단가 → 비활성화
- 신규 `gemini-2.5-flash` 단가 추가:
- `input_price_per_million`: 0.15
- `output_price_per_million`: 0.60
- `exchange_rate`: 현재 환율
---
## 테스트 체크리스트
- [x] 로컬 .env 수정 완료
- [x] 코드 fallback 전체 변경 완료
- [ ] 로컬 연결 테스트 (MNG `/system/ai-config`)
- [ ] 개발서버 .env 수정 + config:clear
- [ ] 개발서버 연결 테스트
- [ ] 운영서버 .env 수정 + config:clear
- [ ] DB 단가 설정 (gemini-2.5-flash)
- [ ] 토큰 사용량 로그 확인 (새 모델명)
---
## 롤백 절차
문제 발생 시 `.env`만 되돌리면 즉시 복구:
```bash
# 모든 환경의 .env에서
GEMINI_MODEL=gemini-2.0-flash
php artisan config:clear
```
---
## 관련 문서
- [AI 관리 종합 가이드](../guides/ai-management.md)
- [모델 업데이트 워크플로우](../guides/ai-model-update-workflow.md)
- [AI 설정 기술문서](../guides/ai-config-settings.md)

165
sam/docs/changes/20260304_eaccount_infinite_loop_fix.md
View File

@@ -1,165 +0,0 @@
# 계좌 입출금내역 부분 월 조회 시 무한루프 크래시 수정
**날짜:** 2026-03-04
**작업자:** Claude Code
---
## 변경 개요
계좌 입출금내역 페이지에서 **날짜를 수동 입력**하여 조회 시 500 에러가 발생하는 문제를 수정했다.
편의 버튼(이번달, 지난달 등)은 항상 전체 월(1일~말일)을 사용하여 문제가 없었으나,
수동으로 날짜를 입력하면 **부분 월**(예: 12/01~12/18)이 되어 무한루프가 발생했다.
---
## 근본 원인
### `splitDateRangeMonthly()` 함수의 cursor 이동 버그
긴 기간 조회 시 바로빌 SOAP API의 한계로 인해 기간을 **월별 청크**로 분할하는 함수에서,
endDate가 **월 중간**일 때 cursor가 **같은 달 1일로 되돌아가** 무한루프가 발생했다.
```php
// ❌ 버그 코드 — endDate가 월 중간이면 무한루프
$cursor = $chunkEnd->copy()->addDay()->startOfMonth();
// 예시: endDate = 20251218
// chunkEnd = 20251218
// → addDay() = 20251219
// → startOfMonth() = 20251201 ← 같은 달 1일로 되돌아감!
// → while($cursor <= $end) 조건 여전히 true → 무한 반복
```
```php
// ✅ 수정 코드 — chunkStart 기준으로 다음 월로 이동
$cursor = $chunkStart->copy()->addMonth()->startOfMonth();
// 예시: startDate = 20251201
// chunkStart = 20251201
// → addMonth() = 20260101
// → startOfMonth() = 20260101 ← 다음 달로 정상 이동
// → while($cursor <= $end) 조건 false → 루프 종료
```
### 재현 조건
| 조건 | 결과 |
|------|------|
| 전체 월 (12/01~12/31) | 정상 — `addDay()` = 01/01 → `startOfMonth()` = 01/01 |
| 부분 월 (12/01~12/18) | **무한루프** — `addDay()` = 12/19 → `startOfMonth()` = 12/01 |
| 다중 월 (12/01~02/18) | **무한루프** — 마지막 월이 부분 월이면 동일 증상 |
### 증상
- PHP 프로세스가 메모리 한도(256M/512M)에 도달하여 **Fatal Error로 크래시**
- Laravel 로그에 에러 기록 없음 (try-catch 밖에서 프로세스가 종료)
- 프론트엔드에 `서버 응답 오류 (500):` (빈 응답 본문)
---
## 수정된 파일
| 파일 | 변경 내용 |
|------|----------|
| `app/Http/Controllers/Barobill/EaccountController.php` | `splitDateRangeMonthly()` cursor 이동 로직 수정 |
---
## 검증 결과
tinker에서 수정 전후 비교 테스트:
```
=== 수정 전 (버그): 20251201~20251218 ===
→ 같은 청크 무한 반복 (10회 제한으로 강제 중단)
=== 수정 후: 20251201~20251218 ===
→ [{start: 20251201, end: 20251218}] ← 1개 청크, 정상
=== 수정 후: 20251201~20260218 (다중 월) ===
→ [{20251201~20251231}, {20260101~20260131}, {20260201~20260218}] ← 3개 청크, 정상
=== 수정 후: 20251215~20251231 ===
→ [{start: 20251215, end: 20251231}] ← 1개 청크, 정상
```
---
## 동일 패턴 코드베이스 점검 결과
`sam/mng` 전체를 검색하여 유사 패턴을 점검했다:
| 파일 | 함수 | 패턴 | 위험도 |
|------|------|------|--------|
| `EaccountController.php` | `splitDateRangeMonthly()` | 월별 청크 분할 | ✅ 수정 완료 |
| `DashboardStatService.php` | `generateDateRange()` | `addDay()` 단순 증가 | 안전 |
| `InspectionCycle.php` | `getHolidayDates()` | `addDay()` 단순 증가 | 안전 |
| `CorporateCardController.php` | `getNextBusinessDay()` | `addDay()` 단순 증가 | 안전 |
| `PartitionManagementService.php` | `addPartitions()` | `for` 루프 (고정 횟수) | 안전 |
> **결론**: `EaccountController` 외에 동일 버그 패턴 없음.
> 다른 코드들은 모두 `addDay()` 단순 증가 패턴을 사용하여 무한루프 위험 없음.
---
## 교훈 및 방지 규칙
### R1. 날짜 cursor 이동 시 `chunkEnd` 기반 이동 금지
```php
// ❌ 위험: chunkEnd가 월 중간이면 startOfMonth()가 같은 달로 되돌림
$cursor = $chunkEnd->copy()->addDay()->startOfMonth();
// ✅ 안전: chunkStart 기준으로 항상 다음 월로 이동
$cursor = $chunkStart->copy()->addMonth()->startOfMonth();
```
### R2. 날짜 루프에 안전장치(max iterations) 추가 권장
```php
$maxIterations = 120; // 10년 = 120개월
$iterations = 0;
while ($cursor->lte($end) && $iterations < $maxIterations) {
// ... 청크 처리 ...
$iterations++;
}
if ($iterations >= $maxIterations) {
Log::error('날짜 분할 루프 안전장치 작동', compact('startDate', 'endDate'));
}
```
### R3. 부분 월 테스트 필수
날짜 범위를 분할하는 코드 작성/수정 시 반드시 다음 케이스를 테스트:
- [ ] 전체 월 (01일~말일)
- [ ] 부분 월 — 시작 (01일~중간)
- [ ] 부분 월 — 끝 (중간~말일)
- [ ] 다중 월 (마지막 월이 부분 월)
- [ ] 같은 날 (시작일 = 종료일)
---
## 부수 개선 사항
이 문제 조사 과정에서 추가로 발견/수정된 항목:
| 항목 | 내용 |
|------|------|
| WSDL 캐싱 | `WSDL_CACHE_NONE` → `WSDL_CACHE_BOTH` (4개 바로빌 컨트롤러 전체) |
| 소켓 타임아웃 | `default_socket_timeout` 60→120초 연장 |
| Shutdown handler | PHP Fatal Error 감지 시 Laravel 로그에 기록 |
| SOAP 호출 로깅 | 호출 시작/완료 시간 + 소요시간(ms) 기록 |
---
## 관련 문서
- `app/Http/Controllers/Barobill/EaccountController.php` — 바로빌 계좌 입출금내역
---
**최종 업데이트**: 2026-03-04

42
sam/docs/contracts/CHANGELOG.md
View File

@@ -1,42 +0,0 @@
# 계약서 개정이력
> **작성일**: 2026-02-22
> **관리 대상**: 전자계약 DOCX 4종
---
## v4.1 (2026-02-22)
**작성자**: 개발팀
**대상**: 고객사 서비스 이용계약서
- 제4조에 사용량 기반 추가 과금 조항(4.5) 추가
- 파일 저장 공간: 기본 100GB 초과 시 100GB당 100,000원/월
- AI 토큰: 월 100만 토큰 기본, 초과 시 1,000토큰 단위 실비 과금
- 제4조에 바로빌 부가 서비스 요금 조항(4.6) 추가
- 계좌조회, 카드내역, 세금계산서 발행 요금 명시
- 홈택스 매입/매출 조회는 회사 부담 명시
---
## v4.0 (2026-02-22)
**작성자**: 개발팀
- 계약서 버전 관리 시스템 도입
- DOCX → Markdown 미러링 체계 구축
- 4개 전자계약 문서에 개정이력 테이블 삽입
- 동기화 검증 스크립트 구축
### 대상 문서
| 파일 | 문서명 |
|------|--------|
| `01_고객_서비스이용계약서_v4_0_전자서명용.docx` | 고객사 서비스 이용계약서 |
| `비밀유지서약서.docx` | 비밀유지서약서 (NDA) |
| `영업파트너 위촉계약서.docx` | 영업파트너 위촉계약서 |
| `영업파트너 위촉계약서(단체용).docx` | 영업파트너 위촉계약서 (단체용) |
---
**최종 업데이트**: 2026-02-22 (v4.1)

BIN
sam/docs/contracts/docx/01_고객_서비스이용계약서_v4_0_전자서명용.docx
View File

Binary file not shown.

BIN
sam/docs/contracts/docx/비밀유지서약서.docx
View File

Binary file not shown.

BIN
sam/docs/contracts/docx/영업파트너 위촉계약서(단체용).docx
View File

Binary file not shown.

BIN
sam/docs/contracts/docx/영업파트너 위촉계약서.docx
View File

Binary file not shown.

458
sam/docs/contracts/markdown/01-service-agreement.md
View File

@@ -1,458 +0,0 @@
---
title: "고객사 서비스 이용계약서"
version: "v4.2"
date: "2026-02-24"
docx_file: "01_고객_서비스이용계약서_v4_0_전자서명용.docx"
---
# 고객사 서비스 이용계약서
Customer Service Agreement
계약번호:
계약일:
본 계약은 주식회사 코드브릿지엑스(이하 “회사”)와 간에 SAM 서비스 제공과 관련하여 다음과 같이 계약을 체결합니다.
## 제1조 (계약의 목적)
본 계약은 회사가 고객에게 SAM(Smart MES/ERP Solution) 서비스를 제공함에 있어 필요한 사항을 규정하고, 양측의 권리와 의무를 명확히 함을 목적으로 합니다.
## 제2조 (용어의 정의)
- **서비스**: 회사가 제공하는 SAM 클라우드 기반 MES/ERP 솔루션
- **SaaS**: Software as a Service (서비스형 소프트웨어)
- **서비스 게시**: 개발 완료 후 고객이 서비스에 접근 가능하도록 제공하는 것
- **액세스 제공**: 고객에게 서비스 사용 권한을 부여하는 것
- **검수 기간**: 서비스 게시 전 고객이 완성도를 확인하는 기간 (최대 1개월)
- **하자**: 계약서에 명시된 기능의 오류, 미구현, 성능 미달 등
- **하자담보 책임**: 서비스 게시 후 1년간 하자를 무상으로 수정하는 의무
## 제3조 (서비스 내용)
### 3.1 서비스 범위
회사는 다음의 서비스를 제공합니다:
- **맞춤형 개발**:
- 고객 요구사항에 맞춘 SAM 시스템 개발
- 개발 범위: [별첨 기획서 참조]
- 개발 기간: 계약일로부터 [ 3 ]개월
- **클라우드 제공** (SaaS):
- 연중무휴 24시간 접근 가능
- 자동 백업 및 보안
- **기술 지원**:
- 고객센터 운영 (평일 09:00~18:00)
- 이메일 지원 (24시간)
- 긴급 장애 대응
- **하자담보 책임** (1년):
- 서비스 게시일로부터 1년간 무상 수정
- 버그, 미구현 기능, 성능 개선 등
### 3.2 제공 방식
- 회사는 서비스를 **SaaS 방식**으로 제공합니다.
- 고객은 서비스에 대한 **사용 권한**만을 부여받으며, 소유권은 회사에 귀속됩니다.
- 소스코드는 제공되지 않습니다.
## 제4조 (비용 및 납부)
### 4.1 개발비
| 구분 | 금액 (부가세 별도) | 지급 시기 | 비고 |
| --- | --- | --- | --- |
| 1차 개발비 | 총 개발비의 50% | 계약 체결 시 | 착수금 |
| 2차 개발비 | 총 개발비의 50% | 서비스 게시일로부터 3일 이내 | 잔금 |
| 총 개발비 | [ ]원 | | |
### 4.2 월 구독료
| 구분 | 금액 (부가세 별도) | 지급 시기 | 비고 |
| --- | --- | --- | --- |
| 월 구독료 | 원 ~ | 매월 말일 | 후불제, 사용량 기준 청구 |
> ⚠️ 중요: - 월 구독료는 원이며, 영업 협상 및 개발 범위에 따라 증액될 수 있습니다.
- 계약 시 확정된 구독료: [ ]원/월
### 4.3 납부 방법
- **개발비**:
- 계좌이체 (세금계산서 발행)
- 입금 계좌: 기업은행 170-175519-04-011  (주)코드브릿지엑스
- **구독료**:
- CMS 자동이체 (권장)
- 또는 세금계산서 발행 후 계좌이체
### 4.4 잔금 지급 기한 [법률 검토 반영]
- **지급 기한**: 서비스 게시일로부터 **3일 이내**
- **사전 준비**: 회사는 영업 단계부터 납품 일정을 공유하여 고객이 미리 준비할 수 있도록 합니다.
- **미납 시 조치**: 제13조 참조
### 4.5 사용량 기반 추가 과금
기본 제공 한도 초과 시 다음과 같이 실비 과금됩니다.
| 항목 | 기본 제공 | 추가 과금 기준 |
| --- | --- | --- |
| 파일 저장 공간 | 100GB | 100GB당 100,000원/월 (부가세 별도) |
| AI 토큰 | 월 100만 토큰 | 1,000토큰 단위 실비 과금 |
- **파일 저장 공간: **기본 100GB를 초과하는 경우 100GB 단위로 월 100,000원(부가세 별도)이 추가 과금됩니다.
- **AI 토큰: **월 100만 토큰 기본 제공되며, 초과 사용 시 1,000토큰 단위로 실비 과금됩니다.
- 미사용 잔여 토큰은 이월되지 않습니다. (매월 1일 갱신)
- 기본 제공량 80%, 100% 소진 시 자동 알림이 발송됩니다.
### 4.6 바로빌 부가 서비스 요금
고객이 선택적으로 이용하는 바로빌 연동 서비스의 요금은 다음과 같습니다.
| 서비스 | 과금 방식 | 기본 제공 | 추가 과금 |
| --- | --- | --- | --- |
| 계좌조회 | 월정액 10,000원 | 1계좌 | 추가 1계좌당 10,000원 |
| 카드내역 | 월정액 10,000원 | 5장 | 추가 1장당 5,000원 |
| 세금계산서 발행 | 건별 | 100건 | 추가 50건당 5,000원 |
- **바로빌 서비스 요금은 고객이 부담하며, 월 구독료와 별도로 청구됩니다.**
- 홈택스 매입/매출 조회 서비스(월 30,000원)는 회사가 부담합니다.
- 상기 금액은 부가세 별도입니다.
## 제5조 (마일스톤 및 진행 일정)
### 5.1 개발 단계 (5단계 통일)
| 단계 | 주요 활동 | 진행률 | 기간 | 납부 |
| --- | --- | --- | --- | --- |
| M1 | 요구사항 분석 및 기획 | 20% | [ 2 ]주 | 1차 개발비 (착수금 50%) |
| M2 | 설계 및 개발 착수 | 50% | [ 2 ]주 | - |
| M3 | 개발 진행 (50% 완료) | 60% | [ 2 ]주 | - |
| M4 | 개발 완료 및 테스트 | 80% | [ 2 ]주 | - |
| M5 | 검수 및 서비스 게시 | 100% | 최대 2주 | 2차 개발비 (잔금 50%) |
> ⚠️ 중요: - 5단계 마일스톤으로 통일 관리 - M5 검수 완료 후 서비스 게시 - 서비스 게시일로부터 3일 이내 잔금 납부
### 5.2 일정 조정
- 개발 일정은 고객의 협조에 따라 변동될 수 있습니다.
- 고객 귀책 사유로 인한 지연은 회사의 책임이 아닙니다.
- 불가항력으로 인한 지연 시 양측 협의하여 일정을 조정합니다.
## 제6조 (서비스 게시 및 검수)
### 6.1 서비스 게시
- 회사는 개발 완료 후 고객에게 **서비스 게시**를 통지합니다.
- **서비스 게시일**은 고객이 서비스에 접근 가능한 날짜를 의미합니다.
- 서비스 게시일부터 구독료가 발생합니다.
### 6.2 검수 기간
- 고객은 개발 완료 후 **최대 2주간 검수 기간**을 가집니다.
- 검수 기간은 서비스 게시 **전**에 이루어집니다.
- 검수 기간 중 발견된 하자는 회사가 무상으로 수정합니다.
### 6.3 검수 완료
- 고객이 서면으로 검수 완료를 통지하거나,
- 검수 기간 2주 종료 시점에 특별한 이의가 없으면 자동 승인으로 간주합니다.
- 검수 완료 후 서비스 게시일이 확정되고, 하자담보 책임 정책이 적용됩니다.
## 제7조 (하자담보 책임)
### 7.1 책임 기간
서비스 게시일로부터 1년 (소프트웨어산업진흥법 제16조, 민법 제667조)
### 7.2 하자담보 범위 (무상 처리)
| 항목 | 내용 | 예시 |
| --- | --- | --- |
| 버그 수정 | 소프트웨어 오류 | 계산 오류, 기능 미작동 |
| 미구현 기능 | 계약서에 명시된 기능 누락 | 약속된 기능 미구현 |
| 성능 개선 | 명시된 성능 기준 미달 | 속도 저하, 응답 지연 |
| UI/UX 수정 | 사용성 문제 | 버튼 미작동, 화면 깨짐 |
| 데이터 오류 | 데이터 손실 또는 오류 | 데이터 삭제, 중복 생성 |
| 보안 패치 | 보안 취약점 수정 | 해킹 방지, 암호화 |
### 7.3 제외 사항 (별도 비용)
| 항목 | 내용 | 예시 |
| --- | --- | --- |
| 신규 기능 개발 | 계약서에 없던 새 기능 | 새로운 모듈, 기능 확장 |
| 구조 변경 | 시스템 아키텍처 변경 | DB 구조, 프레임워크 교체 |
| 추가 모듈 | 새로운 모듈 개발 | 회계 모듈, 재고 모듈 |
| 기획 변경 | 초기 기획과 다른 요구사항 | 화면 구성, 프로세스 변경 |
| 교육/컨설팅 | 사용자 교육, 업무 컨설팅 | 직원 교육, 프로세스 개선 |
### 7.4 하자 처리 절차
| 단계 | 내용 | 기간 |
| --- | --- | --- |
| 1. 하자 신고 | 고객이 이메일로 하자 신고 | - |
| 2. 하자 확인 | 회사가 하자 여부 판정 | 3영업일 |
| 3. 수정 작업 | 하자 인정 시 무상 수정 | 7영업일 |
| 4. 검수 완료 | 고객이 수정 사항 확인 | - |
> ⚠️ 긴급 하자 (서비스 중단)는 24시간 이내 조치합니다.
### 7.5 책임 면제 사유
다음의 경우 하자담보 책임이 면제됩니다:
- **고객 귀책 사유**:
- 고객의 임의 수정 또는 변경
- 승인되지 않은 제3자 개입
- 사용 환경 미준수
- **불가항력**:
- 천재지변 (지진, 태풍 등)
- 전쟁, 테러, 전염병
- 정부 규제 또는 법령 변경
- **기간 만료**:
- 서비스 게시일로부터 1년 경과
## 제8조 (계약 해제 및 환불)
### 8.1 환불 정책 개요
고객의 임의 해제 권리와 회사의 투입 비용 보전의 균형을 고려하여 수립되었습니다.
### 8.2 단계별 환불
### Phase 1: 상담(인터뷰) 시작 전
- **환불율**: 100% (전액 환불)
- **조건**: 계약 후 상담(인터뷰) 배정 전
- **위약금**: 없음
- **임의 해제 가능**
### Phase 2: 상담(인터뷰) 시작 후, 개발 착수 전
| 진행 상황 | 환불율 | 공제 내역 |
| --- | --- | --- |
| M1: 기획안 작성 중 (50% 미만) | 80% | 상담매니저 및 기획/개발자 투입 비용 20% 공제 |
| M2: 기획안 완료 (50% 이상) | 50% | 상담매니저 및 기획/개발자 투입 비용 50% 공제 |
### Phase 3: 개발 진행 중 (5단계 마일스톤 기준)
| 마일스톤 | 진행률 | 청구 금액(개발비 대비) | 비고 |
| --- | --- | --- | --- |
| M3: 개발 진행 중 (50%) | 70% | 70% | 30% 환불 |
| M4: 개발 완료 및 테스트 | 90% | 90% | 10% 환불 |
| M5: 서비스 개시 완료 | 100% | 100% | 환불 불가 |
> ⚠️ 중요: 5단계 마일스톤으로 통일 관리
### Phase 4: 서비스 게시 후
- **환불율**: 0% (환불 불가)
- **개발비**: 전액 확정, 환불 불가
- **구독료**: 매월 말일 후불제이므로 사용한 만큼만 청구 (환불 개념 없음)
- **대신 제공**: 하자담보 책임 (1년) + 유지보수 (구독 기간 전체)
### 8.3 환불 불가 사유
- **고객 귀책 사유**:
- 협조 지연으로 인한 개발 지연
- 요구사항 변경으로 인한 추가 개발
- 승인 거부 또는 회피
- **약관 위반**:
- 허위 정보 제공
- 부정 사용 또는 재판매
- 회사 명예 훼손
### 8.4 할인 계약 해지 시 추가 조건
본 계약이 정상가 대비 할인 조건으로 체결된 경우, 다음 조건이 추가 적용된다.
- 발주자 귀책 해지 시 정상가(할인 전 금액) 기준으로 정산한다.
## 제9조 (구독 및 해지)
### 9.1 구독 시작
- **시작일**: 서비스 게시일 (검수 완료 후)
- **결제일**: 매월 말일
- **청구 방식**: 후불제 (해당 월 사용량 기준)
- **일할 계산**: (사용 일수 / 해당 월 일수) × 구독료
> ⚠️ 중요: - 계약 시 확정된 구독료 금액은 [ ]원/월입니다.
- 매월 말일에 해당 월 사용일수만큼만 후불 청구됩니다.
### 9.2 구독 해지
- 고객은 언제든지 구독을 해지할 수 있습니다. (위약금 없음)
- 해지 신청 후 30일간 데이터 백업 기간 제공
- 해지일로부터 30일 후 모든 데이터 완전 삭제
## 제10조 (유지보수 정책)
### 10.1 유지보수 개요
- **적용 대상**: 구독료를 정상 납부하는 고객
- **적용 기간**: 구독 기간 전체 (하자담보 책임 1년 이후에도 구독 중이면 계속 제공)
- **비용**: 월 구독료(500,000원)에 포함
### 10.2 하자담보 책임과의 차이
| 구분 | 하자담보 책임 (제7조) | 유지보수 (제9조의2) |
| --- | --- | --- |
| 기간 | 서비스 게시일로부터 1년 | 구독 기간 전체 |
| 근거 | 법적 의무 (소프트웨어산업진흥법) | 계약 조건 |
| 비용 | 무상 | 구독료에 포함 |
| 범위 | 하자(버그, 미구현 등) | 하자 + 일반 유지보수 |
### 10.3 유지보수 범위 (구독료에 포함)
> ✅ 무상 제공: - 모든 버그 수정 및 오류 처리 - 보안 패치 및 업데이트 - 성능 최적화 - 긴급 장애 대응 (24시간 이내) - 데이터 백업 및 복구 - 기술 지원 (고객센터, 이메일) - 플랫폼 업데이트 (프레임워크, 브라우저 호환성)
> ❌ 별도 비용: - 신규 기능 개발 - 커스터마이징 및 추가 개발 - 기획 변경 (화면 구성, 프로세스 변경) - 외부 시스템 연동 - 추가 교육 및 컨설팅
### 10.4 서비스 레벨 (SLA)
| 심각도 | 상황 | 응답 시간 | 해결 목표 |
| --- | --- | --- | --- |
| 긴급 (P0) | 서비스 완전 중단 | 1시간 | 24시간 |
| 높음 (P1) | 주요 기능 장애 | 4시간 | 3영업일 |
| 보통 (P2) | 일반 버그 | 1영업일 | 7영업일 |
| 낮음 (P3) | 문의/안내 | 1영업일 | 3영업일 |
### 10.5 정기 유지보수
- **월간**: 보안 패치, 백업 점검 (매월 첫째 주 일요일 새벽)
- **분기**: 성능 최적화 (분기 말 일요일 새벽)
- **반기**: 시스템 점검 (6월/12월 일요일 새벽)
> ⚠️ 모든 정기 점검은 최소 7일 전 사전 공지됩니다.
### 10.6 유지보수 신청
- **고객센터**: 02-6347-0005 (평일 09:00~18:00 )
- **이메일**: support@codebridge-x.com (24시간)
- **시스템 내**: SAM 시스템 내 고객지원 메뉴
### 10.7 유지보수 종료
다음의 경우 유지보수 서비스가 종료됩니다: 1. 구독 해지 시 2. 구독료 3개월 연속 미납 시 3. 중대한 약관 위반 시
## 제11조 (고객의 의무)
고객은 다음 사항을 준수해야 합니다:
- **정확한 정보 제공**: 허위 정보 제공 금지
- **협조 의무**: 개발에 필요한 자료 및 정보 제공
- **부정 사용 금지**: 서비스의 재판매, 재배포 금지
- **지적재산권 존중**: 무단 복제, 역설계 금지
## 제12조 (회사의 의무)
회사는 다음 사항을 준수합니다:
- **서비스 제공**: 계약서에 명시된 서비스 제공
- **하자담보 책임**: 1년간 하자 무상 수정
- **개인정보 보호**: 개인정보보호법 준수
- **기술 지원**: 고객센터 운영 및 기술 지원
## 제13조 (미입금 시 법적 조치)
### 13.1 개발비 미입금 절차
| 단계 | 시점 | 조치 내용 |
| --- | --- | --- |
| 1차 독촉 | 기한 경과 후 3일 | 이메일 및 SMS 발송 |
| 내용증명 | 기한 경과 후 7일 | 우편 발송, 7일 내 입금 요청 |
| 추심등 | 기한 경과 후 14일 | 신용정보사 연체 등록, 법률대리인 위임 |
| 법적 조치 | 기한 경과 후 30일 | 지급명령 신청 또는 소송 제기 |
### 13.2 구독료 미입금 절차
| 단계 | 시점 | 조치 내용 |
| --- | --- | --- |
| 1차 실패 | 익일 | 재출금 |
| 2차 실패 | 기한 경과 후 3일 | 재출금 |
| 3차 실패 | 미수금 처리 | 서비스 접근 제한, 1차 독촉 |
| 내용증명 | 기한 경과 후 7일 | 우편 발송, 7일 내 입금 요청 |
| 서비스 중단 | 기한 경과 후 14일 | 로그인 불가, 데이터 격리 |
| 강제 해지 | 기한 경과 후 30일 | 계약 해지, 법적 조치 검토 |
## 제14조 (개인정보 보호)
- 회사는 「개인정보 보호법」을 준수합니다.
- 고객의 개인정보는 서비스 제공 목적으로만 사용됩니다.
- 제3자에게 제공하지 않습니다. (법령 제외)
- 계약 종료 시 개인정보는 즉시 삭제됩니다. (법정 보관 의무 제외)
## 제15조 (지적재산권)
- **소유권**: 서비스에 대한 모든 지적재산권은 회사에 귀속됩니다.
- **사용 권한**: 고객은 서비스 사용 권한만을 부여받습니다.
- **금지 사항**: 복제, 배포, 역설계, 재판매 금지
## 제16조 (손해배상)
- 회사 또는 고객이 본 계약을 위반하여 상대방에게 손해를 입힌 경우 배상 책임이 있습니다.
- 다만, 불가항력으로 인한 손해는 배상 책임에서 제외됩니다.
## 제17조 (불가항력)
다음의 사유로 서비스 제공이 불가능한 경우 회사는 책임을 지지 않습니다:
- 천재지변 (지진, 태풍, 홍수 등)
- 전쟁, 테러, 전염병
- 정부 규제 또는 법령 변경
- 제3자의 불법 행위 (해킹 등)
## 제18조 (분쟁 해결)
- 본 계약과 관련한 분쟁은 상호 협의하여 해결합니다.
- 협의가 이루어지지 않을 경우, **서울중앙지방법원**을 관할 법원으로 합니다.
## 제19조 (계약의 효력)
- 본 계약은 계약일로부터 효력이 발생합니다.
- 본 계약은 구독 해지 시까지 유효합니다.
## 제20조 (기타)
- 본 계약서는 2부 작성하여 회사와 고객이 각 1부씩 보관합니다.
- 본 계약의 해석 및 적용은 대한민국 법률을 준거법으로 합니다.
## 계약 당사자
### [회사]
상호: 주식회사 코드브릿지엑스
대표자: 이의찬
사업자등록번호: 664-86-03713
주소: 서울특별시 강서구 양천로 583, 우림블루나인 B동 1602호
이메일: contact@codebridge-x.com
전화: 02-6347-0005
서명:
날짜:
### [고객]
상호:
대표자:
사업자등록번호:
주소:
이메일:
전화:
서명:
날짜:
## 별첨
### 별첨 1: 기획서
[별도 첨부]
### 별첨 2: 개발 일정표
[별도 첨부]
### 별첨 3: 기능 명세서
[별도 첨부]
주식회사 코드브릿지엑스
이메일: contact@codebridge-x.com
전화: 02-6347-0005
주소: 서울특별시 강서구 양천로 583, 우림블루나인 B동 1602호

199
sam/docs/contracts/markdown/02-nda.md
View File

@@ -1,199 +0,0 @@
---
title: "비밀유지서약서 (NDA)"
version: "v4.0"
date: "2026-02-22"
docx_file: "비밀유지서약서.docx"
---
# 비밀유지서약서 (NDA)
- **작성일**:
- **서약인 정보**
- **구분**:
- **인적 사항:**
상호(성명): _______________
대표자(본인): _______________
사업자등록번호(주민등록번호): ____________________
주소: ______________________________________________________________________
연락처: _______________
이메일: _______________
## 제1조 (목적)
- 본 서약서는 주식회사 코드브릿지(이하 “회사”)와의 업무 관계에서 알게 된 기밀 정보를
- 보호하기 위해 작성되었습니다.
## 제2조 (기밀 정보의 정의)
- 다음 각 호의 정보는 회사의 기밀 정보로 간주됩니다:
### 2.1 고객 정보
- 고객사 명단 (법인명, 대표자명, 연락처)
- 고객사 담당자 정보 (성명, 부서, 연락처, 이메일)
- 계약 내역 (가입비, 할인율, 구독료, 특약 사항)
- 고객사의 사업 정보 (매출, 직원 수, 거래처 등)
- 고객사가 회사에 요구한 개발 내역 및 기획 문서
### 2.2 영업 정보
- 가격 정책 (정가, 할인 정책, 최소 가입비)
- 수수료 정책 (비율, 지급 기준, 상계 방식)
- 영업 전략 및 마케팅 계획
- 잠재 고객 리스트
- 계약 체결 노하우 및 제안서 템플릿
### 2.3 기술 정보
- SAM 시스템의 소스코드
- 데이터베이스 구조 및 설계 문서
- 개발 프로세스 및 방법론
- 서버 인프라 구성 및 보안 정책
- API 키, 접속 정보, 관리자 권한
### 2.4 경영 정보
- 회사의 재무 정보 (매출, 이익, 원가)
- 조직도 및 인사 정보
- 사업 계획 및 전략
- 투자 유치 및 M&A 관련 정보
### 2.5 기타
- 회사가 **“기밀(Confidential)”** 또는 **“대외비”**로 표시한 모든 문서 및 정보
## 제3조 (기밀 유지 의무)
### 3.1 기본 의무
- 본인은 업무 수행 중 알게 된 모든 기밀 정보를:
- **외부에 누설하지 않습니다**
- **업무 목적 외에 사용하지 않습니다**
- **무단으로 복사, 복제, 전송하지 않습니다**
- **제3자에게 제공하거나 공개하지 않습니다**
### 3.2 정보 관리
- 기밀 문서는 안전한 장소에 보관
- 이메일, 메신저 등 전송 시 암호화
- 업무 종료 시 모든 기밀 자료 반환 또는 파기
- 개인 디바이스에 기밀 정보 저장 금지
### 3.3 제3자 접근 차단
- 가족, 친구 등 타인이 기밀 정보에 접근하지 못하도록 조치
- 공공장소(카페, 도서관 등)에서 기밀 정보 취급 금지
- 비밀번호 및 접속 정보 타인 공유 금지
## 제4조 (예외 사항)
- 다음의 정보는 기밀 정보에서 제외됩니다:
- 본인이 알기 전에 이미 공개된 정보
- 본인의 귀책사유 없이 공개된 정보
- 제3자로부터 적법하게 취득한 정보
- 본인이 독자적으로 개발한 정보
- 법원, 정부기관의 법적 요구에 따라 공개해야 하는 정보 (단, 회사에 사전 통지 필수)
## 제5조 (의무 기간)
### 5.1 기간
- 본 서약서의 기밀 유지 의무는:
- **계약 체결일로부터 효력 발생**
- **계약 종료 후 2년간 유지**
### 5.2 영구 보호
- 단, 다음 정보는 **영구적으로** 보호됩니다:
- 고객사 개인정보
- 회사의 영업 비밀 (부정경쟁방지법상 영업 비밀)
- 기술 정보 (특허, 저작권 대상)
## 제6조 (위반 시 책임)
### 6.1 민사 책임
- 본인이 본 서약을 위반하여 회사 또는 고객에게 손해를 입힌 경우:
- **실손해**** 배상**: 실제 발생한 손해 전액
- **징벌적 손해배상**: 실손해의 최대 3배 (악의적 유출 시)
- **법률 비용**: 소송 비용, 변호사 비용 등
### 6.2 형사 책임
- 다음의 경우 형사 고발 대상이 됩니다:
- **부정경쟁방지법** 위반 (영업 비밀 침해)
- **개인정보보호법** 위반 (고객 정보 유출)
- **정보통신망법** 위반 (기술 정보 침해)
- **형법** 위반 (업무상 배임)
- **※ 형사 처벌: 5년 이하 징역 또는 5천만원 이하 벌금**
### 6.3 계약 해지
- 회사는 본 서약 위반 시 즉시 계약을 해지할 수 있으며, 이미 지급한 수수료 또는
- 대금을 환수할 수 있습니다.
## 제7조 (자료 반환)
### 7.1 반환 대상
- 계약 종료 또는 요청 시 다음을 즉시 반환해야 합니다:
- 회사로부터 제공받은 모든 문서 (종이, 파일)
- 고객사 계약서 및 개인정보
- 가격표, 제안서, 템플릿 등 영업 자료
- USB, 하드디스크 등 저장 매체
### 7.2 파기 확인
- 반환 불가능한 파일(이메일, 클라우드 등)은 즉시 삭제하고, **삭제 확인서**를 회사에
- 제출해야 합니다.
## 제8조 (경업 금지)
### 8.1 경업 금지 기간
- 계약 종료 후 **6개월간** 다음 행위를 금지합니다:
- 회사의 고객에게 경쟁 제품 판매
- 회사의 기밀 정보를 이용한 유사 사업
- 회사 직원 또는 영업파트너를 스카우트
### 8.2 예외
- 단순히 경쟁사 제품을 판매하는 것은 허용되나, 회사의 기밀 정보를 활용해서는
- 안 됩니다.
## 제9조 (분쟁 해결)
### 9.1 관할 법원
- 본 서약과 관련된 분쟁은 회사 본사 소재지 관할 법원으로 합니다.
### 9.2 준거법
- 본 서약은 대한민국 법률에 따라 해석됩니다.
- **서약 확인**
- 본인은 위 내용을 충분히 이해하였으며, 이를 성실히 준수할 것을 서약합니다.
- **서약일**: ___________________
- **서약인**
상호(성명): _______________
대표자(본인): _______________
주민등록번호(또는 사업자등록번호): _______________
- **서명 또는 인**: _______________
- **수령인 (주식회사 ****코드브릿지엑스****)**
- 대표이사: 이의찬
- **확인****일**: ___________________
- **서명 또는 인**: _______________
- **참고: 관련 법률**
- **부정경쟁방지법 제2조 (영업비밀)**
- “영업비밀”이란 공공연히 알려져 있지 아니하고 독립된 경제적 가치를 가지는 것으로서,
- 비밀로 관리된 생산방법, 판매방법, 그 밖에 영업활동에 유용한 기술상 또는 경영상의
- 정보를 말한다.
- **부정경쟁방지법 제18조 (벌칙)**
- 영업비밀을 외국에서 사용하거나 외국에서 사용되게 할 목적으로 취득·사용 또는 제3자에게 누설한 자는 **15년 이하의 징역** 또는 **15억원 이하의 벌금**에 처한다.
- **※ 본 서약서는 2부를 작성하여 회사와 서약인이 각 1부씩 보관합니다.**
- **※ 서약 위반 시 민·형사상 책임을 질 수 있습니다.**

276
sam/docs/contracts/markdown/03-partner-agreement.md
View File

@@ -1,276 +0,0 @@
---
title: "영업파트너 위촉계약서"
version: "v4.0"
date: "2026-02-22"
docx_file: "영업파트너 위촉계약서.docx"
---
# < 영업파트너 위촉계약서 >
# Sales Partner Engagement Agreement
- 본 계약은 주식회사 코드브릿지엑스(이하 “회사”)와 (이하 “파트너)간에 SAM 서비스 영업 활동과 관련하여 다음과 같이 위촉계약을 체결합니다.
## 제1조 (계약의 목적)
- 본 계약은 회사와 파트너 간의 영업파트너 위촉 관계를 규정하고, 상호 권리와 의무를
- 명확히 함을 목적으로 합니다.
## 제2조 (용어의 정의)
- **판매자**: 고객을 발굴하고 계약 체결을 주도하는 영업파트너
- **관리자**: 판매자를 관리하고 지원하는 상급 영업파트너
- **개발비**: 고객이 SAM 서비스 개발을 위해 지급하는 비용
- **수수료**: 파트너가 영업 활동의 대가로 받는 보상
- **서비스 게시**: 개발 완료 후 고객이 서비스에 접근 가능하도록 제공하는 것
## 제3조 (파트너의 역할 및 업무)
### 3.1 판매자의 역할
- 잠재 고객 발굴 및 초기 접촉
- SAM 서비스 소개 및 제안
- 고객과의 계약 체결 지원
- 계약 후 고객 관리 및 사후 지원
### 3.2 관리자의 역할
- 판매자 모집 및 관리
- 판매자 교육 및 지원
- 영업 전략 수립 및 실행
- 회사와 판매자 간 소통 중재
### 3.3 공통 의무
- 회사의 브랜드 이미지 유지
- 정확한 정보 제공
- 윤리적 영업 활동 준수
- 비밀 유지 의무
## 제4조 (수수료 정책)
### 4.1 수수료 비율
| 역할 | 수수료 비율 | 산정 기준 |
| --- | --- | --- |
| 판매자 | 개발비의 20% | 1차,2차 입금액 기준 |
| 관리자 | 개발비의 5% | 1차,2차 입금액 기준 |
### 4.2 수수료 산정 예시
- **총 개발비 80,000,000원 계약 시**
| 단계 | 고객 입금 | 판매자 수수료 (20%) | 관리자 수수료 (5%) |
| --- | --- | --- | --- |
| 1차 착수금 (50%) | 40,000,000원 | 8,000,000원 | 2,000,000원 |
| 2차 잔금 (50%) | 40,000,000원 | 8,000,000원 | 2,000,000원 |
| 총계 | 80,000,000원 | 16,000,000원 | 4,000,000원 |
- **⚠️ 중요**: 개발비만 수수료 산정 대상이며, 구독료는 수수료 대상이 아닙니다.
### 4.3 지급 시기
- **지급일**: 고객 입금일 **익월 10일**
- **지급 방식**: 계좌 이체
- **세금**: 3.3% 원천징수 (사업소득)
### 4.4 수수료 지급 조건
- 고객이 개발비를 실제로 입금한 경우에만 지급
- 계약 해지 또는 환불 시 수수료 미지급 또는 환수
- 파트너가 계약 위반 시 수수료 지급 보류
## 제5조 (수수료 정책 변경)
### 5.1 사전 고지 의무
- 회사는 수수료 정책을 변경할 경우 **최소 1개월 전** 서면 또는 이메일로 파트너에게 고지합니다.
- 수수료 정책을 완전히 폐지하는 경우에도 동일하게 1개월 전 고지합니다.
- 고지 기간 중 체결된 계약은 기존 수수료 정책을 적용합니다.
### 5.2 변경 효력
- 변경된 수수료 정책은 고지일로부터 **1개월 후** 새로 체결되는 계약부터 적용됩니다.
- 고지 기간 만료 전에 체결된 계약은 기존 정책을 따릅니다.
- 진행 중인 계약은 최초 약정 조건을 유지합니다.
### 5.3 변경 예시
#### 예시 1: 수수료율 변경
- 고지일: 2026년 2월 1일
- 변경 내용: 판매자 수수료 20% → 18%
- 적용일: 2026년 3월 1일 이후 체결 계약부터
#### 예시 2: 수수료 정책 폐지
- 고지일: 2026년 2월 1일
- 변경 내용: 수수료 정책 완전 폐지
- 적용일: 2026년 3월 1일 이후 체결 계약부터
## 제6조 (계약 기간)
- 본 계약은 계약일로부터 **1년간** 유효합니다.
- 양측이 계약 만료 **30일 전**까지 서면으로 해지 의사를 통지하지 않으면 자동으로 **1년 연장**됩니다.
- 자동 연장은 동일한 조건으로 반복됩니다.
## 제7조 (계약 해지)
### 7.1 일반 해지 (양방향)
- **통지 기간**: 양측은 **30일 전** 서면 통지로 계약을 해지할 수 있습니다.
- **통지 방법**: 이메일 또는 등기우편
- **효력 발생**: 통지일로부터 30일 후
- **미지급 수수료**: 해지일 이전에 발생한 수수료는 정산하여 지급
- **예시**:
- 통지일: 2026년 2월 1일
- 해지일: 2026년 3월 1일
- 2월 중 발생한 수수료는 3월 10일 정상 지급
### 7.2 즉시 해지 사유
- 회사는 다음의 경우 **즉시 계약을 해지**할 수 있습니다:
- **(1) 품위 유지 결격사유 발생 [신설]**
- 음주운전으로 적발된 경우
- 형사 범죄로 기소 또는 구속된 경우
- 사회적 물의를 일으킨 경우
- 기타 파트너로서의 품위를 훼손한 경우
- **(2) 계약 위반**
- 허위 정보 제공 또는 사기 행위
- 회사 명예 훼손 또는 영업 방해
- 비밀 유지 의무 위반
- 중대한 업무 태만
- **(3) 부정 행위**
- 고객으로부터 금품 수수
- 계약서 위조 또는 변조
- 회사 자산 횡령 또는 유용
### 7.3 즉시 해지 시 조치
- 미지급 수수료는 지급하지 않습니다.
- 이미 지급한 수수료는 환수하지 않습니다. (단, 사기 행위는 예외)
- 진행 중인 계약은 회사가 직접 관리합니다.
## 제8조 (비밀 유지)
### 8.1 비밀 정보
- 다음 정보는 비밀로 유지되어야 합니다:
- 회사의 영업 전략 및 계획
- 고객 정보 (회사명, 담당자, 연락처 등)
- 수수료 정책 및 계약 조건
- 기술 정보 및 노하우
- 회사 내부 자료
### 8.2 비밀 유지 의무
- 파트너는 업무 중 알게 된 비밀 정보를 외부에 누설하지 않습니다.
- 비밀 유지 의무는 계약 종료 후에도 **3년간** 유효합니다.
- 위반 시 손해배상 책임이 있습니다.
## 제9조 (지적재산권)
- SAM 서비스에 대한 모든 지적재산권은 회사에 귀속됩니다.
- 파트너는 회사의 사전 서면 동의 없이 회사의 상표, 로고, 브랜드를 무단으로 사용할 수 없습니다.
- 영업 활동에 필요한 자료는 회사가 제공합니다.
## 제10조 (세금 및 원천징수)
### 10.1 사업소득
- 파트너 수수료는 **사업소득**으로 간주됩니다.
### 10.2 원천징수
| 항목 | 비율 | 비고 |
| --- | --- | --- |
| 소득세 | 3.0% | |
| 지방소득세 | 0.3% | 소득세의 10% |
| 합계 | 3.3% | |
### 10.3 지급명세서
- 회사는 매월 수수료를 지급한 후에 파트너에게 **지급명세서**를 발급합니다.
## 제11조 (손해배상)
### 11.1 파트너의 귀책 사유
- 파트너가 다음의 행위로 회사에 손해를 입힌 경우 배상 책임이 있습니다:
- 허위 정보 제공으로 계약 취소
- 고객과의 분쟁으로 회사 명예 훼손
- 비밀 유지 의무 위반
- 부정 행위
### 11.2 회사의 귀책 사유
- 회사가 정당한 사유 없이 수수료를 지급하지 않을 경우, 연체 이자를 더하여 지급합니다.
## 제12조 (분쟁 해결)
- 본 계약과 관련한 분쟁은 상호 협의하여 해결합니다.
- 협의가 이루어지지 않을 경우, **서울중앙지방법원**을 관할 법원으로 합니다.
## 제13조 (기타 사항)
### 13.1 계약서 교부
- 본 계약서는 2부 작성하여 회사와 파트너가 각 1부씩 보관합니다.
### 13.2 통지
- 모든 통지는 다음의 연락처로 발송됩니다:
- **회사**:
- 이메일: admin@codebridge-x.com
- 전화: 02-6347-0005
- **파트너**:
- 이메일:
- 전화:
### 13.3 준거법
- 본 계약은 대한민국 법률에 따라 해석되고 적용됩니다.
- **계약 당사자**
- **[회사]**
- **상호**: 주식회사 코드브릿지엑스
- **대표자**: 이의찬 (인)
- **사업자등록번호**: 664-86-03713
- **주소**: 서울특별시 강서구 양천로 583, 우림블루나인 B동 1602호
- **이메일**: admin@codebridge-x.com
- **전화**: 02-6347-0005
- **날짜**:
- **[파트너]**
- **상호/성명**:
- **대표자/본인**: (서명)
- **사업자등록번호**:
- **주소**:
- **이메일**:
- **전화**:
- **날짜**:
- **별첨**
#### 별첨 1: 수수료 정산표
| 계약번호 | 고객사 | 입금일 | 입금액 | 수수료율 | 수수료 | 지급일 |
| --- | --- | --- | --- | --- | --- | --- |
| | | | | | | |
#### 별첨 2: 영업 활동 보고서
| 날짜 | 활동내용 | 고객사 | 진행 상황 |
| --- | --- | --- | --- |
| | | | |
- 첨부 서류
- 사업자등록증 사본 (사업자인 경우)
- 주민등록등본 사본 (개인인 경우)
- 통장 사본 (수수료 입금용)
- 비밀유지서약서
- **주식회사 코드브릿지엑스**
- 이메일: admin@codebridge-x.com
- 전화: 02-6347-0005
- 주소: 서울특별시 강서구 양천로 583, 우림블루나인 B동 1602호

267
sam/docs/contracts/markdown/04-partner-agreement-group.md
View File

@@ -1,267 +0,0 @@
---
title: "영업파트너 위촉계약서 (단체용)"
version: "v4.0"
date: "2026-02-22"
docx_file: "영업파트너 위촉계약서(단체용).docx"
---
# < 영업파트너 위촉계약서 >
# Sales Partner Engagement Agreement
- 본 계약은 주식회사 코드브릿지엑스(이하 “회사”)와 (이하 “파트너)간에 SAM 서비스 영업 활동과 관련하여 다음과 같이 위촉계약을 체결합니다.
## 제1조 (계약의 목적)
- 본 계약은 회사와 파트너 간의 영업파트너 위촉 관계를 규정하고, 상호 권리와 의무를
- 명확히 함을 목적으로 합니다.
## 제2조 (용어의 정의)
- **판매자**: 고객을 발굴하고 계약 체결을 주도하는 영업파트너
- **개발비**: 고객이 SAM 서비스 개발을 위해 지급하는 비용
- **수수료**: 파트너가 영업 활동의 대가로 받는 보상
- **서비스 게시**: 개발 완료 후 고객이 서비스에 접근 가능하도록 제공하는 것
## 제3조 (파트너의 역할 및 업무)
### 3.1 판매자의 역할
- 잠재 고객 발굴 및 초기 접촉
- SAM 서비스 소개 및 제안
- 고객과의 계약 체결 지원
- 계약 후 고객 관리 및 사후 지원
### 3.2 공통 의무
- 회사의 브랜드 이미지 유지
- 정확한 정보 제공
- 윤리적 영업 활동 준수
- 비밀 유지 의무
## 제4조 (수수료 정책)
### 4.1 수수료 비율
| 역할 | 수수료 비율 | 산정 기준 |
| --- | --- | --- |
| 판매자 | 개발비의 30% | 1차,2차 입금액 기준 |
### 4.2 수수료 산정 예시
- **총 개발비 80,000,000원 계약 시**
| 단계 | 고객 입금 | 판매자 수수료 (30%) |
| --- | --- | --- |
| 1차 착수금 (50%) | 40,000,000원 | 12,000,000원 |
| 2차 잔금 (50%) | 40,000,000원 | 12,000,000원 |
| 총계 | 80,000,000원 | 24,000,000원 |
- **⚠️ 중요**: 개발비만 수수료 산정 대상이며, 구독료는 수수료 대상이 아닙니다.
### 4.3 지급 시기
- **지급일**: 고객 입금일 **익월 10일**
- **지급 방식**: 계좌 이체
- **세금**: 사업소득일 경우 3.3% 원천징수
### 4.4 수수료 지급 조건
- 고객이 개발비를 실제로 입금한 경우에만 지급
- 계약 해지 또는 환불 시 수수료 미지급 또는 환수
- 파트너가 계약 위반 시 수수료 지급 보류
## 제5조 (수수료 정책 변경)
### 5.1 사전 고지 의무
- 회사는 수수료 정책을 변경할 경우 **최소 1개월 전** 서면 또는 이메일로 파트너에게 고지합니다.
- 수수료 정책을 완전히 폐지하는 경우에도 동일하게 1개월 전 고지합니다.
- 고지 기간 중 체결된 계약은 기존 수수료 정책을 적용합니다.
### 5.2 변경 효력
- 변경된 수수료 정책은 고지일로부터 **1개월 후** 새로 체결되는 계약부터 적용됩니다.
- 고지 기간 만료 전에 체결된 계약은 기존 정책을 따릅니다.
- 진행 중인 계약은 최초 약정 조건을 유지합니다.
### 5.3 변경 예시
#### 예시 1: 수수료율 변경
- 고지일: 2026년 2월 1일
- 변경 내용: 판매자 수수료 20% → 18%
- 적용일: 2026년 3월 1일 이후 체결 계약부터
#### 예시 2: 수수료 정책 폐지
- 고지일: 2026년 2월 1일
- 변경 내용: 수수료 정책 완전 폐지
- 적용일: 2026년 3월 1일 이후 체결 계약부터
## 제6조 (계약 기간)
- 본 계약은 계약일로부터 **1년간** 유효합니다.
- 양측이 계약 만료 **30일 전**까지 서면으로 해지 의사를 통지하지 않으면 자동으로 **1년 연장**됩니다.
- 자동 연장은 동일한 조건으로 반복됩니다.
## 제7조 (계약 해지)
### 7.1 일반 해지 (양방향)
- **통지 기간**: 양측은 **30일 전** 서면 통지로 계약을 해지할 수 있습니다.
- **통지 방법**: 이메일 또는 등기우편
- **효력 발생**: 통지일로부터 30일 후
- **미지급 수수료**: 해지일 이전에 발생한 수수료는 정산하여 지급
- **예시**:
- 통지일: 2026년 2월 1일
- 해지일: 2026년 3월 1일
- 2월 중 발생한 수수료는 3월 10일 정상 지급
### 7.2 즉시 해지 사유
- 회사는 다음의 경우 **즉시 계약을 해지**할 수 있습니다:
- **(1) 품위 유지 결격사유 발생 [신설]**
- 음주운전으로 적발된 경우
- 형사 범죄로 기소 또는 구속된 경우
- 사회적 물의를 일으킨 경우
- 기타 파트너로서의 품위를 훼손한 경우
- **(2) 계약 위반**
- 허위 정보 제공 또는 사기 행위
- 회사 명예 훼손 또는 영업 방해
- 비밀 유지 의무 위반
- 중대한 업무 태만
- **(3) 부정 행위**
- 고객으로부터 금품 수수
- 계약서 위조 또는 변조
- 회사 자산 횡령 또는 유용
### 7.3 즉시 해지 시 조치
- 미지급 수수료는 지급하지 않습니다.
- 이미 지급한 수수료는 환수하지 않습니다. (단, 사기 행위는 예외)
- 진행 중인 계약은 회사가 직접 관리합니다.
## 제8조 (비밀 유지)
### 8.1 비밀 정보
- 다음 정보는 비밀로 유지되어야 합니다:
- 회사의 영업 전략 및 계획
- 고객 정보 (회사명, 담당자, 연락처 등)
- 수수료 정책 및 계약 조건
- 기술 정보 및 노하우
- 회사 내부 자료
### 8.2 비밀 유지 의무
- 파트너는 업무 중 알게 된 비밀 정보를 외부에 누설하지 않습니다.
- 비밀 유지 의무는 계약 종료 후에도 **3년간** 유효합니다.
- 위반 시 손해배상 책임이 있습니다.
## 제9조 (지적재산권)
- SAM 서비스에 대한 모든 지적재산권은 회사에 귀속됩니다.
- 파트너는 회사의 사전 서면 동의 없이 회사의 상표, 로고, 브랜드를 무단으로 사용할 수 없습니다.
- 영업 활동에 필요한 자료는 회사가 제공합니다.
## 제10조 (세금 및 원천징수)
### 10.1 사업소득
- 파트너 수수료는 **사업소득**으로 간주됩니다.
### 10.2 원천징수
| 항목 | 비율 | 비고 |
| --- | --- | --- |
| 소득세 | 3.0% | |
| 지방소득세 | 0.3% | 소득세의 10% |
| 합계 | 3.3% | |
### 10.3 지급명세서
- 회사는 매월 수수료를 지급한 후에 파트너에게 **지급명세서**를 발급합니다.
## 제11조 (손해배상)
### 11.1 파트너의 귀책 사유
- 파트너가 다음의 행위로 회사에 손해를 입힌 경우 배상 책임이 있습니다:
- 허위 정보 제공으로 계약 취소
- 고객과의 분쟁으로 회사 명예 훼손
- 비밀 유지 의무 위반
- 부정 행위
### 11.2 회사의 귀책 사유
- 회사가 정당한 사유 없이 수수료를 지급하지 않을 경우, 연체 이자를 더하여 지급합니다.
## 제12조 (분쟁 해결)
- 본 계약과 관련한 분쟁은 상호 협의하여 해결합니다.
- 협의가 이루어지지 않을 경우, **서울중앙지방법원**을 관할 법원으로 합니다.
## 제13조 (기타 사항)
### 13.1 계약서 교부
- 본 계약서는 2부 작성하여 회사와 파트너가 각 1부씩 보관합니다.
### 13.2 통지
- 모든 통지는 다음의 연락처로 발송됩니다:
- **회사**:
- 이메일: admin@codebridge-x.com
- 전화: 02-6347-0005
- **파트너**:
- 이메일:
- 전화:
### 13.3 준거법
- 본 계약은 대한민국 법률에 따라 해석되고 적용됩니다.
- **계약 당사자**
- **[회사]**
- **상호**: 주식회사 코드브릿지엑스
- **대표자**: 이의찬 (인)
- **사업자등록번호**: 664-86-03713
- **주소**: 서울특별시 강서구 양천로 583, 우림블루나인 B동 1602호
- **이메일**: admin@codebridge-x.com
- **전화**: 02-6347-0005
- **날짜**:
- **[파트너]**
- **상호/성명**:
- **대표자/본인**: (서명)
- **사업자등록번호**:
- **주소**:
- **이메일**:
- **전화**:
- **날짜**:
- **별첨**
#### 별첨 1: 수수료 정산표
| 계약번호 | 고객사 | 입금일 | 입금액 | 수수료율 | 수수료 | 지급일 |
| --- | --- | --- | --- | --- | --- | --- |
| | | | | | | |
#### 별첨 2: 영업 활동 보고서
| 날짜 | 활동내용 | 고객사 | 진행 상황 |
| --- | --- | --- | --- |
| | | | |
- 첨부 서류
- 사업자등록증 사본 (사업자인 경우)
- 주민등록등본 사본 (개인인 경우)
- 통장 사본 (수수료 입금용)
- 비밀유지서약서
- **주식회사 코드브릿지엑스**
- 이메일: admin@codebridge-x.com
- 전화: 02-6347-0005
- 주소: 서울특별시 강서구 양천로 583, 우림블루나인 B동 1602호

58
sam/docs/contracts/revisions.json
View File

@@ -1,58 +0,0 @@
{
"documents": {
"01-service-agreement": {
"title": "고객사 서비스 이용계약서",
"docx_file": "01_고객_서비스이용계약서_v4_0_전자서명용.docx",
"revisions": [
{
"version": "v4.0",
"date": "2026-02-22",
"author": "개발팀",
"description": "버전 관리 시스템 도입, 개정이력 추적 시작"
},
{
"version": "v4.1",
"date": "2026-02-22",
"author": "개발팀",
"description": "제4조에 사용량 기반 추가 과금(4.5) 및 바로빌 부가 서비스 요금(4.6) 조항 추가"
}
]
},
"02-nda": {
"title": "비밀유지서약서 (NDA)",
"docx_file": "비밀유지서약서.docx",
"revisions": [
{
"version": "v4.0",
"date": "2026-02-22",
"author": "개발팀",
"description": "버전 관리 시스템 도입, 개정이력 추적 시작"
}
]
},
"03-partner-agreement": {
"title": "영업파트너 위촉계약서",
"docx_file": "영업파트너 위촉계약서.docx",
"revisions": [
{
"version": "v4.0",
"date": "2026-02-22",
"author": "개발팀",
"description": "버전 관리 시스템 도입, 개정이력 추적 시작"
}
]
},
"04-partner-agreement-group": {
"title": "영업파트너 위촉계약서 (단체용)",
"docx_file": "영업파트너 위촉계약서(단체용).docx",
"revisions": [
{
"version": "v4.0",
"date": "2026-02-22",
"author": "개발팀",
"description": "버전 관리 시스템 도입, 개정이력 추적 시작"
}
]
}
}
}

334
sam/docs/contracts/scripts/extract_to_markdown.py
View File

@@ -1,334 +0,0 @@
#!/usr/bin/env python3
"""
DOCX → Markdown 추출 스크립트
4개 전자계약 DOCX 파일을 Markdown으로 변환한다.
- 서비스이용계약서: Heading 스타일 기반 매핑
- 나머지 3개: Bold 런 + 패턴 매칭으로 구조 유추
"""
import re
import sys
from datetime import date
from pathlib import Path
from docx import Document
# 경로 설정
BASE_DIR = Path(__file__).resolve().parent.parent
DOCX_DIR = BASE_DIR / "docx"
MD_DIR = BASE_DIR / "markdown"
# DOCX → Markdown 매핑
FILE_MAP = {
"01_고객_서비스이용계약서_v4_0_전자서명용.docx": {
"output": "01-service-agreement.md",
"title": "고객사 서비스 이용계약서",
"type": "styled",
},
"비밀유지서약서.docx": {
"output": "02-nda.md",
"title": "비밀유지서약서 (NDA)",
"type": "pattern",
},
"영업파트너 위촉계약서.docx": {
"output": "03-partner-agreement.md",
"title": "영업파트너 위촉계약서",
"type": "pattern",
},
"영업파트너 위촉계약서(단체용).docx": {
"output": "04-partner-agreement-group.md",
"title": "영업파트너 위촉계약서 (단체용)",
"type": "pattern",
},
}
def table_to_markdown(table):
"""DOCX 테이블을 Markdown 테이블로 변환"""
rows = []
for row in table.rows:
cells = [cell.text.strip().replace("\n", " ") for cell in row.cells]
rows.append(cells)
if not rows:
return ""
lines = []
# 헤더
lines.append("| " + " | ".join(rows[0]) + " |")
lines.append("| " + " | ".join(["---"] * len(rows[0])) + " |")
# 본문
for row in rows[1:]:
# 셀 개수 맞추기
while len(row) < len(rows[0]):
row.append("")
lines.append("| " + " | ".join(row[: len(rows[0])]) + " |")
return "\n".join(lines)
def get_paragraph_heading_level_styled(para):
"""스타일 기반 문서의 헤딩 레벨 판별 (서비스이용계약서)"""
style = para.style.name if para.style else ""
if style == "Heading 1":
return 1
elif style == "Heading 2":
return 2
elif style == "Heading 3":
return 3
return 0
def get_paragraph_heading_level_pattern(para):
"""패턴 매칭 기반 문서의 헤딩 레벨 판별 (비밀유지서약서, 영업파트너 위촉계약서)"""
text = para.text.strip()
has_bold = any(r.bold for r in para.runs if r.bold)
if not text or not has_bold:
return 0
# "제X조" 패턴 → ## (h2)
if re.match(r"^<?[ ]*제\d+조", text):
return 2
# "X.X " 패턴 (소제목) → ### (h3)
if re.match(r"^\d+\.\d+\s", text):
return 3
# 문서 제목 (첫 번째 bold 텍스트)
if re.match(r"^<?\s*(영업파트너|비밀유지서약서|Sales Partner)", text):
return 1
return 0
def is_list_item(para, doc_type):
"""리스트 아이템인지 판별"""
text = para.text.strip()
if not text:
return False
if doc_type == "styled":
style = para.style.name if para.style else ""
return style == "Compact"
# pattern 기반: bold가 아닌 일반 텍스트이면서 제X조나 X.X 패턴이 아닌 것
has_bold = any(r.bold for r in para.runs if r.bold)
if not has_bold and not re.match(r"^(제\d+조|<?|계약 당사자|\[)", text):
return True
return False
def extract_styled_doc(doc, file_info):
"""스타일 기반 문서 추출 (서비스이용계약서)"""
lines = []
table_positions = {}
# 테이블 위치 매핑: 문단 인덱스 기준으로 테이블이 어디에 삽입되는지 추적
body = doc.element.body
table_idx = 0
para_idx = 0
for child in body:
tag = child.tag.split("}")[-1] if "}" in child.tag else child.tag
if tag == "p":
para_idx += 1
elif tag == "tbl":
table_positions[para_idx] = table_idx
table_idx += 1
para_idx = 0
for child in body:
tag = child.tag.split("}")[-1] if "}" in child.tag else child.tag
if tag == "p":
para = doc.paragraphs[para_idx]
para_idx += 1
text = para.text.strip()
if not text:
lines.append("")
continue
style = para.style.name if para.style else ""
level = get_paragraph_heading_level_styled(para)
if level > 0:
lines.append("")
lines.append(f"{'#' * level} {text}")
lines.append("")
elif style == "Compact":
# Bold 런이 있으면 강조 리스트
has_bold = any(r.bold for r in para.runs if r.bold)
if has_bold:
# Bold 부분과 일반 부분 분리
parts = []
for run in para.runs:
if run.bold:
parts.append(f"**{run.text}**")
else:
parts.append(run.text)
combined = "".join(parts)
lines.append(f"- {combined}")
else:
# 들여쓰기된 하위 항목
lines.append(f" - {text}")
elif style in ("Body Text", "First Paragraph"):
# 본문 텍스트
if text.startswith("⚠️") or text.startswith("✅") or text.startswith("❌"):
lines.append("")
lines.append(f"> {text}")
lines.append("")
else:
lines.append(text)
else:
lines.append(text)
elif tag == "tbl":
if table_idx <= len(doc.tables):
current_table_idx = sum(
1
for c in list(body)[: list(body).index(child)]
if (c.tag.split("}")[-1] if "}" in c.tag else c.tag) == "tbl"
)
if current_table_idx < len(doc.tables):
lines.append("")
lines.append(table_to_markdown(doc.tables[current_table_idx]))
lines.append("")
return "\n".join(lines)
def extract_pattern_doc(doc, file_info):
"""패턴 매칭 기반 문서 추출 (비밀유지서약서, 영업파트너 위촉계약서)"""
lines = []
body = doc.element.body
para_idx = 0
for child in body:
tag = child.tag.split("}")[-1] if "}" in child.tag else child.tag
if tag == "p":
para = doc.paragraphs[para_idx]
para_idx += 1
text = para.text.strip()
if not text:
lines.append("")
continue
level = get_paragraph_heading_level_pattern(para)
has_bold = any(r.bold for r in para.runs if r.bold)
if level > 0:
lines.append("")
# 제목에서 < > 제거
clean_text = re.sub(r"^<\s*|\s*>$", "", text).strip()
lines.append(f"{'#' * level} {clean_text}")
lines.append("")
elif has_bold:
# Bold 텍스트는 강조 처리
parts = []
for run in para.runs:
if run.bold:
parts.append(f"**{run.text}**")
else:
parts.append(run.text)
combined = "".join(parts)
# (1), (2) 같은 번호 패턴
if re.match(r"^\*\*\(\d+\)", combined):
lines.append(f"- {combined}")
# "예시 N:", "Phase N:" 같은 패턴
elif re.match(r"^\*\*(예시|Phase|별첨)\s", combined):
lines.append("")
lines.append(f"#### {text}")
lines.append("")
else:
lines.append(f"- {combined}")
else:
# 일반 텍스트
# 빈칸 양식 (___) 유지
if "___" in text:
lines.append(text)
elif re.match(r"^(이메일|전화|주소|상호|대표|사업자|주민|연락처|날짜):", text):
lines.append(f"- {text}")
else:
lines.append(f" - {text}")
elif tag == "tbl":
current_table_idx = sum(
1
for c in list(body)[: list(body).index(child)]
if (c.tag.split("}")[-1] if "}" in c.tag else c.tag) == "tbl"
)
if current_table_idx < len(doc.tables):
lines.append("")
lines.append(table_to_markdown(doc.tables[current_table_idx]))
lines.append("")
return "\n".join(lines)
def add_frontmatter(content, file_info, docx_name):
"""YAML 프론트매터 추가"""
frontmatter = f"""---
title: "{file_info['title']}"
version: "v4.0"
date: "{date.today().isoformat()}"
docx_file: "{docx_name}"
---
"""
return frontmatter + "\n" + content
def extract_file(docx_name, file_info):
"""단일 DOCX 파일 추출"""
docx_path = DOCX_DIR / docx_name
if not docx_path.exists():
print(f" [SKIP] {docx_name} - 파일 없음")
return False
doc = Document(str(docx_path))
if file_info["type"] == "styled":
content = extract_styled_doc(doc, file_info)
else:
content = extract_pattern_doc(doc, file_info)
# 프론트매터 추가
content = add_frontmatter(content, file_info, docx_name)
# 연속 빈 줄 정리 (3줄 이상 → 2줄로)
content = re.sub(r"\n{3,}", "\n\n", content)
# 파일 저장
output_path = MD_DIR / file_info["output"]
output_path.write_text(content, encoding="utf-8")
print(f" [OK] {docx_name} → {file_info['output']}")
return True
def main():
print("DOCX → Markdown 추출 시작")
print(f" DOCX 디렉토리: {DOCX_DIR}")
print(f" 출력 디렉토리: {MD_DIR}")
print()
MD_DIR.mkdir(parents=True, exist_ok=True)
success = 0
for docx_name, file_info in FILE_MAP.items():
if extract_file(docx_name, file_info):
success += 1
print(f"\n완료: {success}/{len(FILE_MAP)} 파일 변환됨")
return 0 if success == len(FILE_MAP) else 1
if __name__ == "__main__":
sys.exit(main())

263
sam/docs/contracts/scripts/sync_check.py
View File

@@ -1,263 +0,0 @@
#!/usr/bin/env python3
"""
DOCX ↔ Markdown 동기화 검증 스크립트
DOCX에서 텍스트를 추출하고 Markdown 파일의 텍스트와 비교하여
불일치 항목을 리포트한다.
"""
import difflib
import re
import sys
from pathlib import Path
from docx import Document
BASE_DIR = Path(__file__).resolve().parent.parent
DOCX_DIR = BASE_DIR / "docx"
MD_DIR = BASE_DIR / "markdown"
# DOCX → Markdown 파일 매핑
FILE_MAP = {
"01_고객_서비스이용계약서_v4_0_전자서명용.docx": "01-service-agreement.md",
"비밀유지서약서.docx": "02-nda.md",
"영업파트너 위촉계약서.docx": "03-partner-agreement.md",
"영업파트너 위촉계약서(단체용).docx": "04-partner-agreement-group.md",
}
def extract_text_from_docx(docx_path):
"""DOCX에서 순수 텍스트만 추출 (개정이력 테이블 제외, 인터리빙 방식)"""
doc = Document(str(docx_path))
lines = []
from docx.oxml.ns import qn as _qn
body = doc.element.body
para_idx = 0
table_idx = 0
skip_revision = False
for child in body:
tag = child.tag.split("}")[-1] if "}" in child.tag else child.tag
if tag == "p":
if para_idx < len(doc.paragraphs):
text = doc.paragraphs[para_idx].text.strip()
para_idx += 1
if "개정이력" in text:
skip_revision = True
continue
if text:
skip_revision = False
lines.append(text)
elif tag == "tbl":
if table_idx < len(doc.tables):
table = doc.tables[table_idx]
table_idx += 1
# 개정이력 테이블 건너뛰기
if len(table.rows) > 0:
first_row_text = [cell.text.strip() for cell in table.rows[0].cells]
if "버전" in first_row_text and "날짜" in first_row_text:
skip_revision = False
continue
if skip_revision:
skip_revision = False
continue
for row in table.rows:
cells = [cell.text.strip() for cell in row.cells]
# 빈 셀만 있는 행 건너뛰기
if not any(cells):
continue
row_text = " | ".join(cells)
if row_text.strip():
lines.append(row_text)
return lines
def extract_text_from_markdown(md_path):
"""Markdown에서 순수 텍스트만 추출 (프론트매터, 마크업 제거)"""
content = md_path.read_text(encoding="utf-8")
lines = []
in_frontmatter = False
in_table = False
for line in content.split("\n"):
stripped = line.strip()
# YAML 프론트매터 건너뛰기
if stripped == "---":
in_frontmatter = not in_frontmatter
continue
if in_frontmatter:
continue
# 빈 줄 건너뛰기
if not stripped:
in_table = False
continue
# Markdown 마크업 제거
text = stripped
# 헤딩 마크업 제거
text = re.sub(r"^#{1,6}\s+", "", text)
# 리스트 마크업 제거
text = re.sub(r"^\s*[-*+]\s+", "", text)
# Bold/Italic 마크업 제거
text = re.sub(r"\*\*(.+?)\*\*", r"\1", text)
text = re.sub(r"\*(.+?)\*", r"\1", text)
# 블록인용 제거
text = re.sub(r"^>\s*", "", text)
# 테이블 구분선 건너뛰기
if re.match(r"^\|[\s\-|]+\|$", text):
continue
# 테이블 행
if text.startswith("|") and text.endswith("|"):
# 파이프 제거하고 셀 텍스트 추출
cells = [c.strip() for c in text.strip("|").split("|")]
text = " | ".join(cells)
text = text.strip()
if text:
lines.append(text)
return lines
def normalize_text(text):
"""비교를 위한 텍스트 정규화"""
# 공백 정규화
text = re.sub(r"\s+", " ", text).strip()
# 특수문자 정규화
text = text.replace("\u00a0", " ") # non-breaking space
text = text.replace("\u3000", " ") # ideographic space
# 언더스코어 빈칸 정규화
text = re.sub(r"_{3,}", "___", text)
# Bold 마크업(**) 제거 (DOCX 텍스트에 리터럴 ** 포함되는 경우)
text = re.sub(r"\*\*(.+?)\*\*", r"\1", text)
# 선행 리스트 마커 제거 (DOCX 텍스트가 "- "로 시작하는 경우)
text = re.sub(r"^-\s+", "", text)
return text
def compare_documents(docx_name, md_name):
"""두 문서의 텍스트를 비교"""
docx_path = DOCX_DIR / docx_name
md_path = MD_DIR / md_name
if not docx_path.exists():
return {"status": "error", "message": f"DOCX 파일 없음: {docx_name}"}
if not md_path.exists():
return {"status": "error", "message": f"Markdown 파일 없음: {md_name}"}
docx_lines = [normalize_text(l) for l in extract_text_from_docx(docx_path) if l.strip()]
md_lines = [normalize_text(l) for l in extract_text_from_markdown(md_path) if l.strip()]
# difflib로 비교
matcher = difflib.SequenceMatcher(None, docx_lines, md_lines)
ratio = matcher.ratio()
# 차이점 추출
diffs = []
for tag, i1, i2, j1, j2 in matcher.get_opcodes():
if tag == "equal":
continue
elif tag == "replace":
for idx in range(max(i2 - i1, j2 - j1)):
docx_text = docx_lines[i1 + idx] if i1 + idx < i2 else "(없음)"
md_text = md_lines[j1 + idx] if j1 + idx < j2 else "(없음)"
diffs.append({
"type": "변경",
"docx": docx_text[:80],
"markdown": md_text[:80],
})
elif tag == "delete":
for idx in range(i1, i2):
diffs.append({
"type": "DOCX에만 존재",
"docx": docx_lines[idx][:80],
"markdown": "-",
})
elif tag == "insert":
for idx in range(j1, j2):
diffs.append({
"type": "Markdown에만 존재",
"docx": "-",
"markdown": md_lines[idx][:80],
})
return {
"status": "ok",
"similarity": round(ratio * 100, 1),
"docx_lines": len(docx_lines),
"md_lines": len(md_lines),
"diff_count": len(diffs),
"diffs": diffs[:20], # 상위 20개만
}
def main():
print("=" * 70)
print("DOCX ↔ Markdown 동기화 검증")
print("=" * 70)
all_ok = True
for docx_name, md_name in FILE_MAP.items():
print(f"\n{'─' * 50}")
print(f"문서: {docx_name}")
print(f" ↔ {md_name}")
print(f"{'─' * 50}")
result = compare_documents(docx_name, md_name)
if result["status"] == "error":
print(f" [ERROR] {result['message']}")
all_ok = False
continue
similarity = result["similarity"]
status_icon = "OK" if similarity >= 80 else "WARN" if similarity >= 60 else "FAIL"
print(f" 유사도: {similarity}% [{status_icon}]")
print(f" DOCX 라인: {result['docx_lines']}")
print(f" Markdown 라인: {result['md_lines']}")
print(f" 차이점: {result['diff_count']}개")
if result["diffs"]:
print(f"\n 주요 차이점 (상위 {min(len(result['diffs']), 10)}개):")
for i, diff in enumerate(result["diffs"][:10]):
print(f" [{diff['type']}]")
if diff["docx"] != "-":
print(f" DOCX: {diff['docx']}")
if diff["markdown"] != "-":
print(f" MD: {diff['markdown']}")
if similarity < 80:
all_ok = False
print(f"\n{'=' * 70}")
if all_ok:
print("결과: 모든 문서 동기화 상태 양호")
else:
print("결과: 일부 문서에서 불일치 발견 - 확인 필요")
print(f"{'=' * 70}")
return 0 if all_ok else 1
if __name__ == "__main__":
sys.exit(main())

279
sam/docs/data/interview-master-questions.sql
View File

@@ -1,279 +0,0 @@
-- ============================================================
-- 인터뷰 질문 마스터 데이터 SQL
-- 8개 도메인 × 16개 템플릿 × 80개 질문
--
-- 실행 방법:
-- 로컬: docker exec -i sam-mysql-1 mysql -u root -p samdb < docs/data/interview-master-questions.sql
-- 개발서버: mysql -u <user> -p samdb < interview-master-questions.sql
-- phpMyAdmin: SQL 탭에서 전체 복사 후 실행
--
-- 주의: 한 번만 실행할 것. 중복 실행 시 데이터가 중복됨.
-- ============================================================
SET NAMES utf8mb4;
SET @tenant_id = 1;
SET @user_id = 1;
SET @now = NOW();
-- ============================================================
-- 대분류: 제조업-방화셔터 (parent_id=null, 루트 카테고리)
-- ============================================================
INSERT INTO interview_categories (tenant_id, interview_project_id, parent_id, name, description, domain, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, NULL, NULL, '제조업-방화셔터', '방화셔터 제조업 인터뷰', NULL, 1, 1, @user_id, @user_id, @now, @now);
SET @root_manufacturing = LAST_INSERT_ID();
-- ============================================================
-- Domain 1: 제품 분류 체계 (product_classification)
-- ============================================================
INSERT INTO interview_categories (tenant_id, interview_project_id, parent_id, name, description, domain, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, NULL, @root_manufacturing, '제품 분류 체계', '제품 카테고리, 모델 코드, 분류 기준 파악', 'product_classification', 3, 1, @user_id, @user_id, @now, @now);
SET @cat_1 = LAST_INSERT_ID();
-- 템플릿 1.1: 제품 카테고리 구조
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_1, '제품 카테고리 구조', 1, 1, @user_id, @user_id, @now, @now);
SET @tpl_1_1 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_1_1, '귀사의 주요 제품군을 모두 나열해주세요', 'text', NULL, '쉼표 구분으로 제품군 나열', NULL, NULL, 'product_classification', 1, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_1_1, '각 제품군의 하위 모델명과 코드 체계를 알려주세요', 'table_input', '{"columns":["모델코드","모델명","비고"]}', '코드-이름 매핑 테이블', NULL, NULL, 'product_classification', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_1_1, '제품을 분류하는 기준은 무엇인가요? (소재, 용도, 크기 등)', 'multi_select', '{"choices":["소재별","용도별","크기별","설치방식별","인증여부별"]}', NULL, NULL, NULL, 'product_classification', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_1_1, '인증(인정) 제품과 비인증 제품의 구분이 있나요?', 'select', '{"choices":["있음","없음"]}', NULL, NULL, NULL, 'product_classification', 0, 4, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_1_1, '인증 제품의 경우 구성이 고정되나요?', 'checkbox', NULL, NULL, NULL, '{"question_index":3,"value":"있음"}', 'product_classification', 0, 5, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_1_1, '카테고리별 제품 수는 대략 몇 개인가요?', 'number', NULL, NULL, '개', NULL, 'product_classification', 0, 6, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_1_1, '제품 코드 명명 규칙을 설명해주세요 (예: KSS01의 의미)', 'text', NULL, '코드 체계의 각 자릿수 의미', NULL, NULL, 'product_classification', 0, 7, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_1_1, '기존 시스템(ERP/엑셀)에서 사용하는 제품 분류 방식을 캡처하여 업로드해주세요', 'file_upload', NULL, NULL, NULL, NULL, 'product_classification', 0, 8, 1, @user_id, @user_id, @now, @now);
-- 템플릿 1.2: 설치 유형별 분류
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_1, '설치 유형별 분류', 2, 1, @user_id, @user_id, @now, @now);
SET @tpl_1_2 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_1_2, '설치 유형(벽면형, 측면형, 혼합형 등)에 따라 견적이 달라지나요?', 'select', '{"choices":["예, 크게 달라짐","약간 달라짐","달라지지 않음"]}', NULL, NULL, NULL, 'product_classification', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_1_2, '각 설치 유형별로 어떤 부품이 달라지나요?', 'table_input', '{"columns":["설치유형","추가부품","제외부품","비고"]}', NULL, NULL, NULL, 'product_classification', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_1_2, '설치 유형에 따른 추가 비용 항목이 있나요?', 'text', NULL, NULL, NULL, NULL, 'product_classification', 0, 3, 1, @user_id, @user_id, @now, @now);
-- ============================================================
-- Domain 2: BOM 구조 (bom_structure)
-- ============================================================
INSERT INTO interview_categories (tenant_id, interview_project_id, parent_id, name, description, domain, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, NULL, @root_manufacturing, 'BOM 구조', '완제품-부품 관계, 부품 카테고리, BOM 레벨', 'bom_structure', 4, 1, @user_id, @user_id, @now, @now);
SET @cat_2 = LAST_INSERT_ID();
-- 템플릿 2.1: 완제품-부품 관계
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_2, '완제품-부품 관계', 1, 1, @user_id, @user_id, @now, @now);
SET @tpl_2_1 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_2_1, '대표 제품 1개의 완제품→부품 구성을 트리로 그려주세요', 'bom_tree', NULL, '최상위 제품부터 하위 부품까지 트리 구조', NULL, NULL, 'bom_structure', 1, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_2_1, '모든 제품에 공통으로 들어가는 부품은 무엇인가요?', 'multi_select', '{"choices":["가이드레일","케이스","모터","제어기","브라켓","볼트/너트"]}', '직접 입력 가능', NULL, NULL, 'bom_structure', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_2_1, '제품별로 선택적(옵션)인 부품은 무엇인가요?', 'table_input', '{"columns":["제품명","옵션부품","적용조건"]}', NULL, NULL, NULL, 'bom_structure', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_2_1, 'BOM이 현재 엑셀로 관리되고 있나요? 파일을 업로드해주세요', 'file_upload', NULL, NULL, NULL, NULL, 'bom_structure', 0, 4, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_2_1, '하위 부품의 단계(레벨)는 최대 몇 단계인가요?', 'number', NULL, NULL, '단계', NULL, 'bom_structure', 0, 5, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_2_1, '부품 수량이 고정인 것과 계산이 필요한 것을 구분해주세요', 'table_input', '{"columns":["부품명","고정/계산","고정수량 또는 계산식"]}', NULL, NULL, NULL, 'bom_structure', 0, 6, 1, @user_id, @user_id, @now, @now);
-- 템플릿 2.2: 부품 카테고리
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_2, '부품 카테고리', 2, 1, @user_id, @user_id, @now, @now);
SET @tpl_2_2 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_2_2, '부품을 카테고리로 분류하면 어떻게 나눠지나요? (본체, 절곡품, 전동부, 부자재 등)', 'text', NULL, '부품 분류 체계', NULL, NULL, 'bom_structure', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_2_2, '각 카테고리에 속하는 부품 목록을 정리해주세요', 'table_input', '{"columns":["카테고리","부품명","규격"]}', NULL, NULL, NULL, 'bom_structure', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_2_2, '외주 구매 부품과 자체 제작 부품의 구분이 있나요?', 'select', '{"choices":["있음","없음"]}', NULL, NULL, NULL, 'bom_structure', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_2_2, '부자재(볼트, 너트, 패킹 등)는 별도 관리하나요?', 'checkbox', NULL, NULL, NULL, NULL, 'bom_structure', 0, 4, 1, @user_id, @user_id, @now, @now);
-- ============================================================
-- Domain 3: 치수/변수 계산 (dimension_formula)
-- ============================================================
INSERT INTO interview_categories (tenant_id, interview_project_id, parent_id, name, description, domain, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, NULL, @root_manufacturing, '치수/변수 계산', '오픈 사이즈→제작 사이즈 변환, 파생 변수 계산', 'dimension_formula', 5, 1, @user_id, @user_id, @now, @now);
SET @cat_3 = LAST_INSERT_ID();
-- 템플릿 3.1: 오픈 사이즈 → 제작 사이즈
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_3, '오픈 사이즈 → 제작 사이즈', 1, 1, @user_id, @user_id, @now, @now);
SET @tpl_3_1 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_3_1, '고객이 입력하는 기본 치수 항목은 무엇인가요? (폭, 높이, 깊이 등)', 'multi_select', '{"choices":["폭(W)","높이(H)","깊이(D)","두께(T)","지름(Ø)"]}', NULL, NULL, NULL, 'dimension_formula', 1, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_3_1, '오픈 사이즈에서 제작 사이즈로 변환할 때 더하는 마진값은?', 'formula_input', NULL, '예: W1 = W0 + 120, H1 = H0 + 50', 'mm', NULL, 'dimension_formula', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_3_1, '제품 카테고리별로 마진값이 다른가요?', 'table_input', '{"columns":["제품카테고리","W 마진(mm)","H 마진(mm)","비고"]}', NULL, NULL, NULL, 'dimension_formula', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_3_1, '면적(㎡) 계산 공식을 알려주세요', 'formula_input', NULL, '예: area = W1 * H1 / 1000000', '㎡', NULL, 'dimension_formula', 0, 4, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_3_1, '중량(kg) 계산 공식을 알려주세요', 'formula_input', NULL, '예: weight = area * 단위중량(kg/㎡)', 'kg', NULL, 'dimension_formula', 0, 5, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_3_1, '기타 파생 변수가 있나요? (예: 분할 개수, 절곡 길이 등)', 'table_input', '{"columns":["변수명","계산식","단위","비고"]}', NULL, NULL, NULL, 'dimension_formula', 0, 6, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_3_1, '치수 계산에 사용하는 엑셀 수식을 캡처해주세요', 'file_upload', NULL, NULL, NULL, NULL, 'dimension_formula', 0, 7, 1, @user_id, @user_id, @now, @now);
-- 템플릿 3.2: 변수 의존 관계
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_3, '변수 의존 관계', 2, 1, @user_id, @user_id, @now, @now);
SET @tpl_3_2 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_3_2, '변수 간 의존 관계를 설명해주세요 (A는 B와 C로 계산)', 'text', NULL, '계산 순서와 변수 의존성', NULL, NULL, 'dimension_formula', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_3_2, '계산 순서가 중요한 변수가 있나요?', 'text', NULL, NULL, NULL, NULL, 'dimension_formula', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_3_2, '단위는 mm, m, kg 중 어떤 것을 기본으로 사용하나요?', 'select', '{"choices":["mm","m","cm","혼용"]}', NULL, NULL, NULL, 'dimension_formula', 0, 3, 1, @user_id, @user_id, @now, @now);
-- ============================================================
-- Domain 4: 부품 구성 상세 (component_config)
-- ============================================================
INSERT INTO interview_categories (tenant_id, interview_project_id, parent_id, name, description, domain, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, NULL, @root_manufacturing, '부품 구성 상세', '주요 부품별 규격, 선택 기준, 특수 구성', 'component_config', 6, 1, @user_id, @user_id, @now, @now);
SET @cat_4 = LAST_INSERT_ID();
-- 템플릿 4.1: 주요 부품별 상세
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_4, '주요 부품별 상세', 1, 1, @user_id, @user_id, @now, @now);
SET @tpl_4_1 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_4_1, '가이드레일의 표준 길이 규격은? (예: 1219, 2438, 3305mm)', 'table_input', '{"columns":["규격코드","길이(mm)","비고"]}', NULL, NULL, NULL, 'component_config', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_4_1, '가이드레일 길이 조합 규칙은? (어떤 길이를 몇 개 사용?)', 'text', NULL, '높이에 따른 가이드레일 조합 로직', NULL, NULL, 'component_config', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_4_1, '케이스(하우징) 크기별 규격과 부속품 차이를 설명해주세요', 'table_input', '{"columns":["케이스규격","적용조건","부속품"]}', NULL, NULL, NULL, 'component_config', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_4_1, '모터 용량 종류와 선택 기준은? (무게별? 면적별?)', 'table_input', '{"columns":["모터용량","적용범위(최소)","적용범위(최대)","단위"]}', '무게/면적 범위별 모터 매핑', NULL, NULL, 'component_config', 0, 4, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_4_1, '모터 전압 옵션은? (380V, 220V 등)', 'multi_select', '{"choices":["380V","220V","110V","DC 24V"]}', NULL, NULL, NULL, 'component_config', 0, 5, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_4_1, '제어기 종류와 선택 기준은? (노출형/매립형 등)', 'table_input', '{"columns":["제어기유형","적용조건","비고"]}', NULL, NULL, NULL, 'component_config', 0, 6, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_4_1, '절곡품(판재 가공) 목록과 각각의 치수 결정 방식은?', 'table_input', '{"columns":["절곡품명","치수결정방식","재질","두께(mm)"]}', NULL, NULL, NULL, 'component_config', 0, 7, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_4_1, '부자재(볼트, 너트, 패킹 등) 목록과 수량 결정 방식은?', 'table_input', '{"columns":["부자재명","규격","수량결정방식","기본수량"]}', NULL, NULL, NULL, 'component_config', 0, 8, 1, @user_id, @user_id, @now, @now);
-- 템플릿 4.2: 특수 구성
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_4, '특수 구성', 2, 1, @user_id, @user_id, @now, @now);
SET @tpl_4_2 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_4_2, '연기차단재 등 특수 부품이 있나요? 적용 조건은?', 'text', NULL, NULL, NULL, NULL, 'component_config', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_4_2, '보강재(샤프트, 파이프, 앵글 등) 사용 조건은?', 'table_input', '{"columns":["보강재명","규격","적용조건","수량"]}', NULL, NULL, NULL, 'component_config', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_4_2, '고객 요청에 따라 추가/제외되는 옵션 부품은?', 'table_input', '{"columns":["옵션부품","추가/제외","추가비용","비고"]}', NULL, NULL, NULL, 'component_config', 0, 3, 1, @user_id, @user_id, @now, @now);
-- ============================================================
-- Domain 5: 단가 체계 (pricing_structure)
-- ============================================================
INSERT INTO interview_categories (tenant_id, interview_project_id, parent_id, name, description, domain, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, NULL, @root_manufacturing, '단가 체계', '단가 관리 방식, 계산 방식, 마진/LOSS율', 'pricing_structure', 7, 1, @user_id, @user_id, @now, @now);
SET @cat_5 = LAST_INSERT_ID();
-- 템플릿 5.1: 단가 관리 방식
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_5, '단가 관리 방식', 1, 1, @user_id, @user_id, @now, @now);
SET @tpl_5_1 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_5_1, '부품별 단가를 어디서 관리하나요? (엑셀, ERP, 구두 등)', 'select', '{"choices":["엑셀","ERP 시스템","구두/경험","기타"]}', NULL, NULL, NULL, 'pricing_structure', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_1, '단가표 파일을 업로드해주세요', 'file_upload', NULL, NULL, NULL, NULL, 'pricing_structure', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_1, '단가 변경 주기는? (월/분기/연 등)', 'select', '{"choices":["수시","월 단위","분기 단위","반기 단위","연 단위"]}', NULL, NULL, NULL, 'pricing_structure', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_1, '단가에 포함되는 항목은? (재료비만? 가공비 포함?)', 'multi_select', '{"choices":["재료비","가공비","운송비","설치비","마진"]}', NULL, NULL, NULL, 'pricing_structure', 0, 4, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_1, '고객별/거래처별 차등 단가가 있나요?', 'select', '{"choices":["있음 (등급별)","있음 (거래처별)","없음 (일괄 동일)"]}', NULL, NULL, NULL, 'pricing_structure', 0, 5, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_1, 'LOSS율(손실률)을 적용하나요? 적용 방식은?', 'formula_input', NULL, '예: 실제수량 = 계산수량 × (1 + LOSS율)', '%', NULL, 'pricing_structure', 0, 6, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_1, '마진율 설정 방식은? (일괄? 품목별?)', 'select', '{"choices":["일괄 마진율","품목별 마진율","카테고리별 마진율","고객별 마진율"]}', NULL, NULL, NULL, 'pricing_structure', 0, 7, 1, @user_id, @user_id, @now, @now);
-- 템플릿 5.2: 단가 계산 방식
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_5, '단가 계산 방식', 2, 1, @user_id, @user_id, @now, @now);
SET @tpl_5_2 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_5_2, '면적 기반 단가 품목은? (원/㎡)', 'table_input', '{"columns":["품목명","단가(원/㎡)","비고"]}', NULL, '원/㎡', NULL, 'pricing_structure', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_2, '중량 기반 단가 품목은? (원/kg)', 'table_input', '{"columns":["품목명","단가(원/kg)","비고"]}', NULL, '원/kg', NULL, 'pricing_structure', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_2, '수량 기반 단가 품목은? (원/EA)', 'table_input', '{"columns":["품목명","단가(원/EA)","비고"]}', NULL, '원/EA', NULL, 'pricing_structure', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_2, '길이 기반 단가 품목은? (원/m)', 'table_input', '{"columns":["품목명","단가(원/m)","비고"]}', NULL, '원/m', NULL, 'pricing_structure', 0, 4, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_5_2, '기타 특수 단가 계산 방식이 있나요?', 'text', NULL, NULL, NULL, NULL, 'pricing_structure', 0, 5, 1, @user_id, @user_id, @now, @now);
-- ============================================================
-- Domain 6: 수량 수식 (quantity_formula)
-- ============================================================
INSERT INTO interview_categories (tenant_id, interview_project_id, parent_id, name, description, domain, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, NULL, @root_manufacturing, '수량 수식', '부품별 수량 결정 규칙, 계산식, 검증', 'quantity_formula', 8, 1, @user_id, @user_id, @now, @now);
SET @cat_6 = LAST_INSERT_ID();
-- 템플릿 6.1: 수량 결정 규칙
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_6, '수량 결정 규칙', 1, 1, @user_id, @user_id, @now, @now);
SET @tpl_6_1 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_6_1, '고정 수량 부품 목록 (항상 1개, 2개 등)', 'table_input', '{"columns":["부품명","고정수량","비고"]}', NULL, NULL, NULL, 'quantity_formula', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_6_1, '치수 기반 수량 계산 부품과 수식', 'formula_input', NULL, '예: 슬랫수량 = CEIL(H1 / 슬랫피치)', NULL, NULL, 'quantity_formula', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_6_1, '면적 기반 수량 계산 부품과 수식', 'formula_input', NULL, '예: 스크린수량 = area / 기준면적', NULL, NULL, 'quantity_formula', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_6_1, '중량 기반 수량 계산 부품과 수식', 'formula_input', NULL, NULL, NULL, NULL, 'quantity_formula', 0, 4, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_6_1, '올림/내림/반올림 규칙이 있는 계산은?', 'table_input', '{"columns":["계산항목","올림/내림/반올림","소수점자릿수"]}', NULL, NULL, NULL, 'quantity_formula', 0, 5, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_6_1, '여유 수량(LOSS) 적용 품목과 비율은?', 'table_input', '{"columns":["품목명","LOSS율(%)","비고"]}', NULL, NULL, NULL, 'quantity_formula', 0, 6, 1, @user_id, @user_id, @now, @now);
-- 템플릿 6.2: 수식 검증
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_6, '수식 검증', 2, 1, @user_id, @user_id, @now, @now);
SET @tpl_6_2 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_6_2, '실제 견적서에서 수량 계산 예시를 보여주세요 (W=3000, H=2500일 때)', 'table_input', '{"columns":["부품명","수식","계산결과","단위"]}', NULL, NULL, NULL, 'quantity_formula', 1, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_6_2, '수식에 사용하는 함수가 있나요? (SUM, CEIL, ROUND 등)', 'multi_select', '{"choices":["CEIL (올림)","FLOOR (내림)","ROUND (반올림)","MAX","MIN","IF 조건문","SUM"]}', NULL, NULL, NULL, 'quantity_formula', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_6_2, '조건에 따라 수식이 달라지는 경우가 있나요?', 'text', NULL, '예: 폭이 3000 초과이면 분할 계산', NULL, NULL, 'quantity_formula', 0, 3, 1, @user_id, @user_id, @now, @now);
-- ============================================================
-- Domain 7: 조건부 로직 (conditional_logic)
-- ============================================================
INSERT INTO interview_categories (tenant_id, interview_project_id, parent_id, name, description, domain, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, NULL, @root_manufacturing, '조건부 로직', '범위/매핑 기반 부품 자동 선택 규칙', 'conditional_logic', 9, 1, @user_id, @user_id, @now, @now);
SET @cat_7 = LAST_INSERT_ID();
-- 템플릿 7.1: 범위 기반 선택
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_7, '범위 기반 선택', 1, 1, @user_id, @user_id, @now, @now);
SET @tpl_7_1 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_7_1, '무게 범위별 모터 용량 선택표를 작성해주세요', 'price_table', '{"columns":["범위 시작(kg)","범위 끝(kg)","모터용량","비고"]}', NULL, NULL, NULL, 'conditional_logic', 1, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_7_1, '크기 범위별 부품 자동 선택 규칙이 있나요?', 'table_input', '{"columns":["조건(변수)","범위","선택부품","비고"]}', NULL, NULL, NULL, 'conditional_logic', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_7_1, '브라켓 크기 결정 기준은?', 'table_input', '{"columns":["조건","범위","브라켓 규격"]}', NULL, NULL, NULL, 'conditional_logic', 0, 3, 1, @user_id, @user_id, @now, @now);
-- 템플릿 7.2: 매핑 기반 선택
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_7, '매핑 기반 선택', 2, 1, @user_id, @user_id, @now, @now);
SET @tpl_7_2 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_7_2, '제품 모델 → 기본 부품 세트 매핑표', 'table_input', '{"columns":["제품모델","기본부품1","기본부품2","기본부품3"]}', NULL, NULL, NULL, 'conditional_logic', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_7_2, '설치 유형 → 추가 부품 매핑표', 'table_input', '{"columns":["설치유형","추가부품","수량","비고"]}', NULL, NULL, NULL, 'conditional_logic', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_7_2, '제어기 유형 → 부속품 매핑표', 'table_input', '{"columns":["제어기유형","부속품1","부속품2","부속품3"]}', NULL, NULL, NULL, 'conditional_logic', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_7_2, '기타 조건부 자동 선택 규칙', 'text', NULL, '위 항목에 해당하지 않는 조건-결과 매핑', NULL, NULL, 'conditional_logic', 0, 4, 1, @user_id, @user_id, @now, @now);
-- ============================================================
-- Domain 8: 견적서 양식 (quote_format)
-- ============================================================
INSERT INTO interview_categories (tenant_id, interview_project_id, parent_id, name, description, domain, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, NULL, @root_manufacturing, '견적서 양식', '출력 양식, 항목 그룹, 소계/합계 구조', 'quote_format', 10, 1, @user_id, @user_id, @now, @now);
SET @cat_8 = LAST_INSERT_ID();
-- 템플릿 8.1: 출력 양식
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_8, '출력 양식', 1, 1, @user_id, @user_id, @now, @now);
SET @tpl_8_1 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_8_1, '현재 사용 중인 견적서 양식을 업로드해주세요', 'file_upload', NULL, NULL, NULL, NULL, 'quote_format', 1, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_8_1, '견적서에 표시되는 항목 그룹은? (재료비, 노무비, 설치비 등)', 'multi_select', '{"choices":["재료비","노무비","경비","설치비","운반비","이윤","부가세"]}', NULL, NULL, NULL, 'quote_format', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_8_1, '소계/합계 계산 구조를 설명해주세요', 'text', NULL, '항목 그룹별 소계와 최종 합계의 관계', NULL, NULL, 'quote_format', 0, 3, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_8_1, '할인 적용 방식은? (일괄? 항목별?)', 'select', '{"choices":["일괄 할인","항목별 할인","할인 없음","협의 할인"]}', NULL, NULL, NULL, 'quote_format', 0, 4, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_8_1, '부가세 표시 방식은? (별도? 포함?)', 'select', '{"choices":["별도 표시","포함 표시","선택 가능"]}', NULL, NULL, NULL, 'quote_format', 0, 5, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_8_1, '견적서에 표시하지 않는 내부 관리 항목은?', 'text', NULL, NULL, NULL, NULL, 'quote_format', 0, 6, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_8_1, '견적 번호 체계를 알려주세요', 'text', NULL, '예: Q-2026-001 형식', NULL, NULL, 'quote_format', 0, 7, 1, @user_id, @user_id, @now, @now);
-- 템플릿 8.2: 특수 요구사항
INSERT INTO interview_templates (tenant_id, interview_category_id, name, sort_order, is_active, created_by, updated_by, created_at, updated_at)
VALUES (@tenant_id, @cat_8, '특수 요구사항', 2, 1, @user_id, @user_id, @now, @now);
SET @tpl_8_2 = LAST_INSERT_ID();
INSERT INTO interview_questions (tenant_id, interview_template_id, question_text, question_type, options, ai_hint, expected_format, depends_on, domain, is_required, sort_order, is_active, created_by, updated_by, created_at, updated_at) VALUES
(@tenant_id, @tpl_8_2, '산출내역서(세부 내역)를 별도로 제공하나요?', 'checkbox', NULL, NULL, NULL, NULL, 'quote_format', 0, 1, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_8_2, '위치별(층/부호) 개별 산출이 필요한가요?', 'checkbox', NULL, NULL, NULL, NULL, 'quote_format', 0, 2, 1, @user_id, @user_id, @now, @now),
(@tenant_id, @tpl_8_2, '일괄 산출(여러 위치 합산)을 사용하나요?', 'checkbox', NULL, NULL, NULL, NULL, 'quote_format', 0, 3, 1, @user_id, @user_id, @now, @now);
-- ============================================================
-- 완료 확인
-- ============================================================
SELECT
(SELECT COUNT(*) FROM interview_categories WHERE interview_project_id IS NULL AND domain IS NOT NULL) AS master_categories,
(SELECT COUNT(*) FROM interview_templates t JOIN interview_categories c ON t.interview_category_id = c.id WHERE c.interview_project_id IS NULL AND c.domain IS NOT NULL) AS master_templates,
(SELECT COUNT(*) FROM interview_questions q JOIN interview_templates t ON q.interview_template_id = t.id JOIN interview_categories c ON t.interview_category_id = c.id WHERE c.interview_project_id IS NULL AND c.domain IS NOT NULL) AS master_questions;

369
sam/docs/features/academy/fire-shutter-image-prompts.md
View File

@@ -1,369 +0,0 @@
# 방화셔터 백과사전 이미지 생성 프롬프트
> **작성일**: 2026-02-22
> **상태**: 확정
> **용도**: Google Gemini (Nano Banana Pro) 이미지 생성용
---
## 1. 개요
### 1.1 목적
MNG 아카데미 > 방화셔터 백과사전 페이지에 삽입할 기술 일러스트레이션을 AI 이미지 생성 도구(Google Gemini)로 제작하기 위한 프롬프트 모음이다.
### 1.2 사용 방법
1. Google Gemini (Nano Banana Pro 모델)에서 프롬프트를 입력한다
2. 생성된 이미지를 `mng/public/images/academy/fire-shutter/` 경로에 저장한다
3. Blade 뷰에서 `<img>` 태그로 참조한다
### 1.3 주의사항
- **화면 내 모든 라벨은 영어**로 작성되어 있다 (한글 텍스트는 AI 이미지 생성 시 깨짐 현상 발생)
- 전체 구성도, 설치 장면 등 넓은 이미지는 **16:9** 비율 권장
- 단면도, 부품 상세 등은 **1:1** 또는 **4:3** 비율 권장
- 생성 실패 시 프롬프트 앞에 `Detailed technical engineering illustration, clean white background, ` 를 추가한다
---
## 2. 프롬프트 목록
### 2.1 방화셔터 전체 구성도 (Full Component Diagram)
```
Technical illustration of a fire shutter (automatic fire-rated rolling shutter) installed in a building opening, cutaway side view showing all components with English labels.
Show these parts clearly labeled:
- Top: "CEILING SLAB" with "HEAD BOX / CASE" mounted below
- Inside head box: "SHAFT" with coiled steel slats, "BALANCE SPRING", "GEAR BOX", "MOTOR", "ELECTROMAGNETIC BRAKE", "BRACKET" on both sides
- Both sides: vertical "GUIDE RAIL" mounted on fireproof walls with "ANCHOR BOLTS"
- Center: multiple horizontal "STEEL SLATS" hanging down in interlocking pattern
- Bottom: "BOTTOM BAR" touching the floor with rubber seal
- Nearby wall: "MANUAL CONTROL BOX" with UP/STOP/DOWN buttons
- Ceiling: "SMOKE DETECTOR" and "HEAT DETECTOR"
- Wall-mounted: "FIRE SHUTTER CONTROLLER"
Style: Clean technical cutaway diagram, white background, professional engineering illustration, labeled with arrows pointing to each component. Color-coded: structural parts in gray/silver, electrical parts in blue, safety parts in red. Isometric or 3/4 perspective view.
```
---
### 2.2 슬랫 인터록킹 구조 (Slat Interlocking)
```
Technical cross-section illustration showing how fire shutter steel slats interlock with each other.
Show 3-4 slats connected in interlocking pattern:
- Each slat is a C-shaped or S-shaped profile made from 1.6mm EGI steel
- The curved edges of adjacent slats hook into each other, allowing flexibility while maintaining a continuous curtain surface
- One slat highlighted with dimension labels: "THICKNESS 1.6mm", "PITCH 75-100mm"
- Show the slight curved profile that allows the slat to wrap around the shaft when rolled up
- Arrow labeled "ROLLING DIRECTION"
Label each part: "SLAT", "INTERLOCKING JOINT", "EGI STEEL 1.6mm"
Style: Clean engineering cross-section diagram, white background, metallic silver color for steel. Include dimension lines. Zoomed-in detail view with magnified interlocking joint area in a callout circle.
```
---
### 2.3 가이드레일 단면도 (Guide Rail Cross-Section)
```
Technical cross-section illustration of a fire shutter guide rail mounted on a fireproof wall, viewed from top-down.
Show the C-channel shaped guide rail:
- C-channel profile, steel thickness 2.3mm+
- Inside the channel: slat edge sitting in the groove
- Smoke seal material strips on both sides of the channel, pressing against the slat
- Anchor bolts securing the guide rail to the concrete wall
- Wall shown as hatched concrete pattern
Labels with arrows:
- "GUIDE RAIL BODY (C-CHANNEL)"
- "SLAT EDGE"
- "SMOKE SEAL PACKING"
- "ANCHOR BOLT"
- "FIREPROOF WALL"
- "STEEL 2.3mm+"
Style: Clean technical cross-section, white background, steel parts in metallic gray, seal material in orange/red, wall in light brown hatched pattern. Include dimension annotations.
```
---
### 2.4 샤프트 어셈블리 (Shaft Assembly)
```
Technical illustration showing the inside of a fire shutter head box, exploded or cutaway view.
Show these components assembled on or around the shaft:
- Central pipe labeled "SHAFT" with slats attached, partially wound
- Left side: "BRACKET" steel plate bolted to wall, with "BEARING" supporting shaft end
- Right side: "GEAR BOX" and "MOTOR" mounted on bracket
- "ELECTROMAGNETIC BRAKE" attached to motor assembly
- "BALANCE SPRING" torsion spring visible inside the shaft
- "AUTO CLOSER" device mounted near the brake
- "LIMIT SWITCH" small switches with actuator arms
- "HEAD BOX CASE" shown as transparent or partially removed to reveal internals
- Wiring connections going down labeled "TO CONTROLLER"
Style: Exploded technical diagram or cutaway 3D illustration, white background, professional engineering style. Color-coded: mechanical parts in silver/gray, motor in dark blue, brake in red, spring in green. All labels in English with leader lines.
```
---
### 2.5 감속기+모터+브레이크 (Gear Box + Motor + Brake Assembly)
```
Technical illustration of a fire shutter drive unit assembly, showing three main components connected together.
Show them assembled in sequence with labels:
1. "MOTOR (220V)" - cylindrical body with power cables
2. "ELECTROMAGNETIC BRAKE" - disc-type brake between motor and gearbox, showing brake disc, coil, and spring
3. "WORM GEAR BOX" - rectangular housing with cutaway revealing the worm gear and worm wheel inside
Assembly order shown with arrows: MOTOR → BRAKE → GEAR BOX → "OUTPUT TO SHAFT"
Include rotation direction arrows
Small inset callout showing worm gear mechanism detail labeled: "WORM", "WORM WHEEL", "SELF-LOCKING"
Style: Technical exploded/assembly diagram, white background, metallic rendering, engineering illustration style.
```
---
### 2.6 연동제어기 시스템 (Controller System)
```
Technical schematic diagram showing the fire shutter interlock control system wiring and signal flow.
Layout (block diagram style):
- Top center: "FIRE ALARM PANEL" - rectangular box
- Left: "SMOKE DETECTOR (PHOTOELECTRIC)" - circular device on ceiling
- Right: "HEAT DETECTOR (FIXED TEMP.)" - circular device on ceiling
- Center: "FIRE SHUTTER CONTROLLER" - panel with LED indicators labeled "POWER", "PARTIAL CLOSE", "FULL CLOSE"
- Below controller: "AUTO CLOSER" connected to shutter mechanism
- Bottom left: "MANUAL CONTROL BOX" with "UP / STOP / DOWN" buttons
- Bottom: "FIRE SHUTTER" shown schematically
Signal flow arrows with labels:
- Smoke detector → Controller: "STAGE 1: PARTIAL CLOSE (1m gap)"
- Heat detector → Controller: "STAGE 2: FULL CLOSE (floor sealed)"
- Controller → Auto closer: "CLOSE COMMAND"
- Controller → Speaker icon: "ALARM OUTPUT"
- Controller ↔ Fire alarm panel: "STATUS SIGNAL"
Style: Clean schematic/block diagram, white background, professional electrical diagram style. Color coding: red for fire signals, blue for power, green for status. All labels in English.
```
---
### 2.7 2단계 폐쇄 시퀀스 (2-Stage Closure Sequence)
```
Technical illustration showing the two-stage closing sequence of an automatic fire shutter, presented as 3 side-by-side panels:
Panel 1 - Title: "NORMAL (OPEN)":
- Fire shutter fully open, rolled up inside head box
- People walking through the opening freely
- Smoke and heat detectors on ceiling shown in standby (green LED)
- Caption: "Shutter open, passage clear"
Panel 2 - Title: "STAGE 1: PARTIAL CLOSE":
- Smoke detector activated (red LED, smoke wisps shown)
- Shutter descended leaving about 1 meter gap from floor
- A person crouching to pass under the gap
- Alarm buzzer icon showing sound waves
- Caption: "Smoke detected → Partial close, 1m gap for evacuation"
Panel 3 - Title: "STAGE 2: FULL CLOSE":
- Heat detector activated (red LED, flames shown)
- Shutter fully closed to floor, bottom bar sealed against floor
- Fire and smoke on one side, clean air on other side
- Caption: "Heat detected → Full close, fire/smoke blocked"
Arrow at bottom labeled "TIME SEQUENCE →"
Style: Clean technical illustration with slight architectural rendering, sequential format left to right, white background. People as simple silhouettes. Fire/smoke rendered subtly.
```
---
### 2.8 롤포밍 공정 (Roll Forming Process)
```
Technical illustration showing the roll forming manufacturing process for fire shutter steel slats, production line viewed from the side.
Show the line from left to right with labels:
1. "UNCOILER" - Steel coil (EGI 1.6mm) being unrolled
2. "LEVELER" - Flattening rollers correcting coil curvature
3. "ROLL FORMING STATION" - 6-8 pairs of forming rollers progressively shaping the flat strip into C/S-shaped slat profile
4. "CUTTING STATION" - Flying shear cutting the formed strip to length
5. "FINISHED SLATS" - Slats stacked neatly on output table
Detail callout at top showing progressive cross-section shape changes: "FLAT → STAGE 1 → STAGE 2 → STAGE 3 → FINAL PROFILE"
Arrow at bottom: "MATERIAL FLOW →"
Label on coil: "EGI STEEL COIL 1.6mm"
Style: Technical factory/manufacturing illustration, clean white background, machinery in industrial gray/green, steel in silver. Side view. Directional arrows showing material flow.
```
---
### 2.9 현장 설치 (Field Installation)
```
Technical illustration showing fire shutter installation at a construction site, depicting key installation steps in a single scene.
Scene showing a large building opening (about 5m wide, 4m tall) with:
- Two workers on scaffolding installing the head box assembly at the top
- Brackets already bolted to both side walls near the ceiling
- Guide rails mounted vertically on walls with anchor bolts
- Shaft with wound slat curtain being lifted up to place on brackets
- Manual control box being mounted on adjacent wall
- Wiring conduits visible running from controller to head box
- Construction tools: level tool, drill, anchor bolts, wrenches
Labels with arrows pointing to activities:
- "BRACKET MOUNTING"
- "GUIDE RAIL ANCHORING"
- "SHAFT PLACEMENT"
- "ELECTRICAL WIRING"
- "LEVEL CHECK"
- "ANCHOR BOLT FIXING"
Style: Technical construction illustration, slightly warm tone, realistic building interior with exposed concrete. Workers wearing safety helmets and vests. Clean architectural illustration style. All text in English.
```
---
### 2.10 유지보수 점검 (Maintenance Inspection)
```
Technical illustration showing fire shutter maintenance inspection scene.
Show a maintenance technician inspecting a fire shutter:
- Technician with safety vest and hard hat, holding a tablet
- Fire shutter partially lowered (halfway) for testing
- Close-up callout bubbles showing key inspection points:
1. "SLAT CONDITION" - checking for deformation, rust
2. "SMOKE SEAL CHECK" - checking guide rail seal condition
3. "BOTTOM BAR PACKING" - checking floor seal
4. "MOTOR / BRAKE CHECK" - head box open, listening for sounds
5. "MANUAL BOX TEST" - pressing UP/STOP/DOWN buttons
6. "CONTROLLER STATUS" - checking LED indicators
Checklist overlay in corner:
☑ MOTOR OPEN/CLOSE TEST
☑ DETECTOR INTERLOCK TEST
☑ ALARM SOUND CHECK
☑ MANUAL OPERATION CHECK
☑ BOTTOM BAR SEAL CHECK
Style: Clean technical illustration, bright well-lit building interior, professional maintenance scene. Color callout bubbles with icons. All text in English.
```
---
### 2.11 강판형 vs 스크린형 (Steel Plate vs Screen Type)
```
Technical side-by-side comparison illustration of two types of fire shutters in similar building openings:
Left side - Title "STEEL PLATE TYPE":
- Steel slat fire shutter in partially closed position
- Opaque metallic surface of interlocking steel slats visible
- Heavier, industrial appearance with thick guide rails
- Bottom bar with rubber seal
- Callout: "EGI STEEL 1.6mm / HEAVY / OPAQUE / HIGH SEALING"
Right side - Title "SCREEN / FABRIC TYPE":
- Fabric fire shutter in partially closed position
- Semi-transparent woven silica fiber screen, you can faintly see light through it
- Lighter, sleeker with thin guide rails (11mm)
- Fabric gathered at top
- Callout: "SILICA FIBER / LIGHTWEIGHT / SEMI-TRANSPARENT / RAIL 11mm"
Center dividing line with "VS" label
Bottom comparison bar: "WEIGHT: Heavy vs Light | VISIBILITY: Opaque vs See-through | RAIL WIDTH: Wide vs 11mm"
Style: Clean technical comparison, white background, same scale, professional product comparison layout. All text in English.
```
---
### 2.12 주요 고장 유형 (Major Fault Types)
```
Technical illustration showing 6 common fire shutter failure types in a 2x3 grid layout, each in its own panel with a red problem highlight:
Panel 1 - "SLAT DERAILMENT":
- A slat edge coming out of the guide rail groove, curtain jammed
- Red circle on problem area
Panel 2 - "MOTOR BURNOUT":
- Motor with smoke marks, burnt wiring
- Overheat warning symbol
Panel 3 - "BRAKE PAD WEAR":
- Electromagnetic brake with worn disc pad
- Side comparison: "NEW" thick pad vs "WORN" thin pad
Panel 4 - "CONTROLLER MALFUNCTION":
- Controller panel with error LED, disconnected wires
- Broken signal path indicator
Panel 5 - "CLOSER SPEED FAULT":
- Shutter dropping fast, speedometer showing "0.15 m/s LIMIT EXCEEDED"
- Governor mechanism detail
Panel 6 - "SMOKE SEAL FAILURE":
- Smoke wisps leaking through guide rail gaps
- Comparison: "NEW SEAL" vs "DEGRADED SEAL"
Style: Technical diagnostic illustration, white background, bordered panels. Problem areas in red/orange highlight. Clean maintenance manual style. All titles and labels in English.
```
---
## 3. 이미지 파일 관리
### 3.1 저장 경로
```
mng/public/images/academy/fire-shutter/
├── 01-full-component-diagram.png
├── 02-slat-interlocking.png
├── 03-guide-rail-cross-section.png
├── 04-shaft-assembly.png
├── 05-gearbox-motor-brake.png
├── 06-controller-system.png
├── 07-two-stage-closure.png
├── 08-roll-forming-process.png
├── 09-field-installation.png
├── 10-maintenance-inspection.png
├── 11-steel-vs-screen-type.png
└── 12-major-fault-types.png
```
### 3.2 Blade 참조 예시
```html
<img src="{{ asset('images/academy/fire-shutter/01-full-component-diagram.png') }}"
alt="방화셔터 전체 구성도"
class="w-full rounded-lg shadow">
```
---
## 관련 문서
- `mng/resources/views/academy/fire-shutter.blade.php` - 방화셔터 백과사전 Blade 뷰
- `mng/app/Http/Controllers/AcademyController.php` - 아카데미 컨트롤러
---
**최종 업데이트**: 2026-02-22

298
sam/docs/features/approvals/README.md
View File

@@ -1,298 +0,0 @@
# 결재관리 시스템
> **작성일**: 2026-02-28
> **상태**: Phase 2 구현 완료
> **프로젝트**: SAM MNG (관리자 웹)
> **우선순위**: 🔴 필수
---
## 1. 개요
### 1.1 목적
SAM MNG 전자결재 시스템. 기안부터 최종 승인, 반려, 회수, 보류, 전결, 참조까지 기업 결재 프로세스를 디지털화한다.
### 1.2 문서 구조
| 문서 | 설명 |
|------|------|
| **README.md** (이 문서) | 시스템 전체 개요, 아키텍처, 상태 관리 |
| [form-types.md](form-types.md) | 양식별 필드/JSON 구조/인터랙션 기술 명세 |
| [workflows.md](workflows.md) | 상세 워크플로우 (승인/반려/회수/보류/전결/복사재기안) |
| [api-reference.md](api-reference.md) | API 엔드포인트 명세 |
| [ui-screens.md](ui-screens.md) | 화면별 UI 구성 및 동작 |
| [db-changes-and-model-sync.md](db-changes-and-model-sync.md) | DB 변경사항 및 API/MNG 모델 동기화 현황 |
### 1.3 구현 현황
| Phase | 범위 | 상태 |
|-------|------|------|
| **Phase 1** | 순차결재, 기안/상신/승인/반려/회수 | ✅ 완료 |
| **Phase 2** | 보류/해제, 전결, 참조 열람 추적, 복사 재기안 | ✅ 완료 |
| **Phase 3** | 병렬결재, 위임(대결), 알림 | 미착수 |
| **Phase 4** | ERP 연동, 결재 통계, 관리자 설정 | 미착수 |
---
## 2. 아키텍처
### 2.1 기술 스택
| 계층 | 기술 | 설명 |
|------|------|------|
| 뷰 | Blade + HTMX + Alpine.js | 동적 UI, 부분 렌더링 |
| API | Laravel Controller + Service | JSON API (내부용) |
| 모델 | Eloquent ORM | Multi-tenant 스코프 |
| DB | MySQL 8.0 | API 프로젝트에서 마이그레이션 관리 |
### 2.2 프로젝트 분리
```
API (/home/aweso/sam/api)
├── database/migrations/ ← 모든 결재 테이블 마이그레이션
MNG (/home/aweso/sam/mng)
├── app/Models/Approvals/ ← 모델 (Approval, ApprovalStep, ApprovalForm, ApprovalLine, ApprovalDelegation)
├── app/Services/ ← ApprovalService (비즈니스 로직)
├── app/Http/Controllers/ ← ApprovalController (웹), ApprovalApiController (API)
├── resources/views/approvals/ ← Blade 뷰
└── routes/ ← 웹 라우트 + API 라우트
```
### 2.3 핵심 클래스
```
ApprovalService
├── 목록 조회: getMyDrafts(), getPendingForMe(), getCompletedByMe(), getReferencesForMe()
├── CRUD: createApproval(), updateApproval(), deleteApproval(), getApproval()
├── 워크플로우: submit(), approve(), reject(), cancel(), hold(), releaseHold(), preDecide(), copyForRedraft()
├── 참조: markAsRead()
└── 유틸: getBadgeCounts(), getApprovalLines(), getApprovalForms(), saveApprovalSteps()
```
---
## 3. 데이터베이스
### 3.1 테이블 관계
```
approval_forms (결재 양식)
│ 1:N
▼
approvals (결재 문서)
│ 1:N │ N:1 (self)
▼ ▼
approval_steps (결재 단계) approvals (parent_doc_id → 원본 문서)
approval_lines (결재선 템플릿) ← approvals.line_id 참조
approval_delegations (위임 설정) ← Phase 3 준비
```
### 3.2 approvals (결재 문서)
| 컬럼 | 타입 | 설명 |
|------|------|------|
| `id` | BIGINT PK | |
| `tenant_id` | BIGINT | 테넌트 격리 |
| `document_number` | VARCHAR | `APR-YYMMDD-001` 형식 |
| `form_id` | BIGINT FK | 양식 |
| `line_id` | BIGINT FK NULL | 결재선 템플릿 |
| `title` | VARCHAR(200) | 제목 |
| `content` | JSON | 양식 필드 데이터 |
| `body` | TEXT NULL | 본문 |
| `status` | VARCHAR(20) | 문서 상태 (6가지) |
| `is_urgent` | BOOLEAN | 긴급 여부 |
| `drafter_id` | BIGINT FK | 기안자 |
| `department_id` | BIGINT FK NULL | 기안 부서 |
| `current_step` | INT | 현재 결재 단계 번호 |
| `drafted_at` | TIMESTAMP NULL | 상신 일시 |
| `completed_at` | TIMESTAMP NULL | 완료 일시 |
| `recall_reason` | TEXT NULL | 회수 사유 |
| `parent_doc_id` | BIGINT FK NULL | 재기안 원본 문서 |
| `attachments` | JSON NULL | 첨부파일 |
### 3.3 approval_steps (결재 단계)
| 컬럼 | 타입 | 설명 |
|------|------|------|
| `id` | BIGINT PK | |
| `approval_id` | BIGINT FK | 결재 문서 |
| `step_order` | INT | 순서 (1, 2, 3...) |
| `step_type` | VARCHAR | `approval`, `agreement`, `reference` |
| `parallel_group` | INT NULL | 병렬 그룹 (Phase 3) |
| `approver_id` | BIGINT FK | 결재자 |
| `acted_by` | BIGINT FK NULL | 실제 처리자 (대결 시) |
| `approver_name` | VARCHAR | 결재자명 스냅샷 |
| `approver_department` | VARCHAR | 부서 스냅샷 |
| `approver_position` | VARCHAR | 직급 스냅샷 |
| `status` | VARCHAR(20) | 단계 상태 (5가지) |
| `approval_type` | VARCHAR(20) | `normal`, `pre_decided`, `delegated` |
| `comment` | TEXT NULL | 결재 의견 |
| `acted_at` | TIMESTAMP NULL | 처리 일시 |
| `is_read` | BOOLEAN | 참조 열람 여부 |
| `read_at` | TIMESTAMP NULL | 열람 일시 |
### 3.4 approval_delegations (위임 설정, Phase 3)
| 컬럼 | 타입 | 설명 |
|------|------|------|
| `id` | BIGINT PK | |
| `tenant_id` | BIGINT FK | |
| `delegator_id` | BIGINT FK | 위임자 |
| `delegate_id` | BIGINT FK | 대리인 |
| `start_date` | DATE | 위임 시작일 |
| `end_date` | DATE | 위임 종료일 |
| `form_ids` | JSON NULL | 대상 양식 (NULL=전체) |
| `notify_delegator` | BOOLEAN | 대결 시 보고 여부 |
| `is_active` | BOOLEAN | 활성 여부 |
| `reason` | VARCHAR(200) | 위임 사유 |
---
## 4. 상태 관리
### 4.1 문서 상태 (6가지)
| 상태 | 코드 | 라벨 | 색상 | 설명 |
|------|------|------|------|------|
| 임시저장 | `draft` | 임시저장 | gray | 작성 중, 미상신 |
| 진행 | `pending` | 진행 | blue | 결재선 순환 중 |
| 완료 | `approved` | 완료 | green | 최종 승인 |
| 반려 | `rejected` | 반려 | red | 결재자가 반려 |
| 회수 | `cancelled` | 회수 | yellow | 기안자가 회수 |
| 보류 | `on_hold` | 보류 | amber | 결재자가 보류 |
### 4.2 단계 상태 (5가지)
| 상태 | 코드 | 라벨 | 아이콘 | 설명 |
|------|------|------|--------|------|
| 대기 | `pending` | 대기 | 숫자 | 차례 아직 아님 |
| 승인 | `approved` | 승인 | ✓ (녹색) | 승인 완료 |
| 반려 | `rejected` | 반려 | ✗ (적색) | 반려 |
| 건너뜀 | `skipped` | 건너뜀 | — (회색) | 전결/회수로 소멸 |
| 보류 | `on_hold` | 보류 | ⏸ (노란) | 보류 중 |
### 4.3 결재 유형 (approval_type)
| 유형 | 코드 | 아이콘 | 설명 |
|------|------|--------|------|
| 일반결재 | `normal` | ✓ | 기본 승인 |
| 전결 | `pre_decided` | ⚡ (남색) | 이후 단계 모두 건너뛰고 즉시 완료 |
| 대결 | `delegated` | — | 대리인이 처리 (Phase 3) |
### 4.4 참여자 역할 (step_type)
| 역할 | 코드 | 의사결정 | 설명 |
|------|------|---------|------|
| 결재 | `approval` | ✅ 있음 | 승인/반려/보류/전결 가능 |
| 합의 | `agreement` | ✅ 있음 | 타부서 동의 (승인/반려 가능) |
| 참조 | `reference` | ❌ 없음 | 열람만 가능, 열람 추적 |
### 4.5 상태 전이 다이어그램
```
┌─────────────────────────────┐
│ │
┌────────┐ submit() │ ┌─────────┐ │
│ draft │────────────→│ │ pending │ │
└────────┘ │ └────┬────┘ │
▲ │ │ │
│ │ ┌────┼─────────┬───────┐ │
│ (수정 후 재상신) │ │ │ │ │ │
│ │ │ approve() reject() hold()│
│ │ │ │ │ │ │
│ │ │ ▼ ▼ ▼ │
│ │ │ 다음 step rejected on_hold│
│ │ │ 또는 │ │ │
│ │ │ approved │ releaseHold()
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ └────┼────────┼───────┘ │
│ │ │ │ │
│ │ preDecide() │ │
│ │ → approved │ │
│ │ │ │ cancel() │
│ │ │ │ │ │
│ │ ▼ │ ▼ │
│ │ ┌─────────┐ │ ┌──────────┐
│ │ │approved │ │ │cancelled │
│ │ └─────────┘ │ └──────────┘
│ │ │ │ │
│ │ │ │ │
│ │ copyForRedraft() │
│ │ │ │ │
└───────────────────┼───────┴────────┘ │
(새 draft 생성) │ │
│ copyForRedraft() │
│◀──────────────────────┘
└─────────────────────────────┘
```
---
## 5. 권한 매트릭스
### 5.1 누가 무엇을 할 수 있는가
| 액션 | 대상자 | 조건 |
|------|--------|------|
| **기안 작성** | 모든 사용자 | — |
| **수정** | 기안자 | `draft` 또는 `rejected` |
| **삭제** | 기안자 | `draft`만 |
| **상신** | 기안자 | `draft` 또는 `rejected`, 결재선 1명 이상 |
| **승인** | 현재 결재자 | `pending`, 자신이 현재 차례 |
| **반려** | 현재 결재자 | `pending`, 사유 필수 |
| **보류** | 현재 결재자 | `pending`, 사유 필수 |
| **보류 해제** | 보류한 결재자 | `on_hold`, 자신이 보류한 건 |
| **전결** | 현재 결재자 | `pending`, 이후 모든 단계 건너뜀 |
| **회수** | 기안자 | `pending` 또는 `on_hold`, 첫 결재자 미처리 |
| **복사 재기안** | 기안자 | `approved`, `rejected`, `cancelled` |
| **참조 열람** | 참조자 | `reference` step 보유 |
### 5.2 회수 가능 조건 상세
```
회수(cancel) 가능 여부 판단:
1. 문서 상태가 pending 또는 on_hold인가? → 아니면 불가
2. 요청자가 기안자(drafter_id)인가? → 아니면 불가
3. 첫 번째 결재자(approval/agreement)의 상태가 pending 또는 on_hold인가?
→ 이미 approved/rejected이면 불가 (첫 결재자가 이미 처리)
```
---
## 6. 메뉴 구조
```
결재관리
├── 기안함 /approval-mgmt/drafts ← 내가 기안한 문서
├── 결재 대기함 /approval-mgmt/pending ← 내가 결재해야 할 문서
├── 처리 완료함 /approval-mgmt/completed ← 내가 결재한 문서
└── 참조함 /approval-mgmt/references ← 참조 문서 (열람 추적)
```
### 추가 페이지
| URL | 설명 |
|-----|------|
| `/approval-mgmt/create` | 기안 작성 |
| `/approval-mgmt/{id}` | 상세 조회 |
| `/approval-mgmt/{id}/edit` | 기안 수정 |
---
## 7. 관련 문서
- [결재 양식 기술 명세](form-types.md) — 양식별 필드, JSON 구조, 인터랙션
- [결재관리 워크플로우 상세](workflows.md) — 각 동작의 상세 흐름
- [API 명세](api-reference.md) — 엔드포인트 목록 및 요청/응답 예시
- [UI 화면 구성](ui-screens.md) — 화면별 UI 요소 및 동작
- [기획서 원본](../../plans/approval-management-system-plan.md) — Phase 1~4 전체 기획
---
**최종 업데이트**: 2026-03-06

594
sam/docs/features/approvals/api-reference.md
View File

@@ -1,594 +0,0 @@
# 결재관리 API 명세
> **작성일**: 2026-02-28
> **상태**: Phase 2 구현 완료
> **Base URL**: `/api/admin/approvals`
> **미들웨어**: `web`, `auth`, `hq.member`
> **관련**: [README.md](README.md) | [워크플로우](workflows.md) | [UI 화면](ui-screens.md)
---
## 1. 개요
모든 API는 JSON 응답을 반환한다. 인증은 세션 기반이며, CSRF 토큰이 필요하다.
### 1.1 공통 응답 형식
**성공:**
```json
{
"success": true,
"message": "처리 메시지",
"data": { ... }
}
```
**실패 (400):**
```json
{
"success": false,
"message": "에러 메시지"
}
```
### 1.2 공통 헤더
```
Content-Type: application/json
Accept: application/json
X-CSRF-TOKEN: {csrf_token}
```
---
## 2. 목록 조회 API
### 2.1 기안함
내가 기안한 문서 목록을 조회한다.
```
GET /api/admin/approvals/drafts
```
**Query Parameters:**
| 파라미터 | 타입 | 설명 |
|---------|------|------|
| `search` | string | 제목/문서번호 검색 |
| `status` | string | 상태 필터 (`draft`, `pending`, `approved`, `rejected`, `cancelled`, `on_hold`) |
| `is_urgent` | boolean | 긴급 문서만 |
| `date_from` | date | 시작일 (YYYY-MM-DD) |
| `date_to` | date | 종료일 (YYYY-MM-DD) |
| `per_page` | int | 페이지당 건수 (기본 15) |
| `page` | int | 페이지 번호 |
**응답:** Laravel 페이지네이션 형식
```json
{
"data": [
{
"id": 1,
"document_number": "APR-260228-001",
"title": "휴가 신청",
"status": "pending",
"is_urgent": false,
"form": { "id": 1, "name": "휴가신청서" },
"steps": [...],
"created_at": "2026-02-28T10:00:00",
"drafted_at": "2026-02-28T10:05:00"
}
],
"current_page": 1,
"last_page": 3,
"per_page": 15,
"total": 42
}
```
---
### 2.2 결재 대기함
내가 현재 결재해야 할 문서 목록을 조회한다.
```
GET /api/admin/approvals/pending
```
**Query Parameters:**
| 파라미터 | 타입 | 설명 |
|---------|------|------|
| `search` | string | 제목/문서번호 검색 |
| `is_urgent` | boolean | 긴급 문서만 |
| `date_from` | date | 시작일 |
| `date_to` | date | 종료일 |
| `per_page` | int | 페이지당 건수 |
> 현재 사용자가 결재 차례인 문서만 표시된다. 이미 승인/반려한 문서는 표시되지 않는다.
---
### 2.3 처리 완료함
내가 승인 또는 반려한 문서 목록을 조회한다.
```
GET /api/admin/approvals/completed
```
**Query Parameters:**
| 파라미터 | 타입 | 설명 |
|---------|------|------|
| `search` | string | 제목/문서번호 검색 |
| `status` | string | 상태 필터 |
| `date_from` | date | 시작일 |
| `date_to` | date | 종료일 |
| `per_page` | int | 페이지당 건수 |
---
### 2.4 참조함
내가 참조자로 지정된 문서 목록을 조회한다.
```
GET /api/admin/approvals/references
```
**Query Parameters:**
| 파라미터 | 타입 | 설명 |
|---------|------|------|
| `search` | string | 제목/문서번호 검색 |
| `is_read` | string | 열람 상태 필터 (`true`=열람완료, `false`=미열람) |
| `date_from` | date | 시작일 |
| `date_to` | date | 종료일 |
| `per_page` | int | 페이지당 건수 |
---
## 3. CRUD API
### 3.1 상세 조회
```
GET /api/admin/approvals/{id}
```
**응답:**
```json
{
"success": true,
"data": {
"id": 1,
"tenant_id": 1,
"document_number": "APR-260228-001",
"form_id": 1,
"line_id": null,
"title": "휴가 신청",
"content": {},
"body": "2월 27일~28일 연차 사용 신청합니다.",
"status": "pending",
"is_urgent": false,
"drafter_id": 10,
"department_id": 3,
"current_step": 2,
"drafted_at": "2026-02-28T10:05:00",
"completed_at": null,
"recall_reason": null,
"parent_doc_id": null,
"form": { "id": 1, "name": "휴가신청서" },
"drafter": { "id": 10, "name": "홍길동" },
"line": null,
"steps": [
{
"id": 1,
"step_order": 1,
"step_type": "approval",
"approver_id": 20,
"approver_name": "김과장",
"approver_department": "경영지원팀",
"approver_position": "과장",
"status": "approved",
"approval_type": "normal",
"comment": "승인합니다.",
"acted_at": "2026-02-28T11:00:00",
"is_read": false,
"read_at": null
},
{
"id": 2,
"step_order": 2,
"step_type": "approval",
"approver_id": 30,
"approver_name": "박부장",
"approver_department": "경영지원팀",
"approver_position": "부장",
"status": "pending",
"approval_type": "normal",
"comment": null,
"acted_at": null,
"is_read": false,
"read_at": null
}
]
}
}
```
---
### 3.2 생성 (임시저장)
```
POST /api/admin/approvals
```
**Request Body:**
```json
{
"form_id": 1,
"title": "휴가 신청",
"body": "2월 27일~28일 연차 사용",
"is_urgent": false,
"steps": [
{ "user_id": 20, "step_type": "approval" },
{ "user_id": 30, "step_type": "approval" },
{ "user_id": 40, "step_type": "reference" }
]
}
```
**Validation:**
| 필드 | 규칙 |
|------|------|
| `form_id` | required, exists:approval_forms,id |
| `title` | required, string, max:200 |
| `body` | nullable, string |
| `is_urgent` | boolean |
| `steps` | nullable, array |
| `steps.*.user_id` | required_with:steps, exists:users,id |
| `steps.*.step_type` | required_with:steps, in:approval,agreement,reference |
**응답 (201):**
```json
{
"success": true,
"message": "결재 문서가 저장되었습니다.",
"data": { ... }
}
```
---
### 3.3 수정
```
PUT /api/admin/approvals/{id}
```
> `draft` 또는 `rejected` 상태에서만 수정 가능
**Request Body:** (생성과 동일, 모든 필드 선택)
**Validation:**
| 필드 | 규칙 |
|------|------|
| `title` | sometimes, string, max:200 |
| `body` | nullable, string |
| `is_urgent` | boolean |
| `steps` | nullable, array |
---
### 3.4 삭제
```
DELETE /api/admin/approvals/{id}
```
> `draft` 상태에서만 삭제 가능
**응답:**
```json
{
"success": true,
"message": "결재 문서가 삭제되었습니다."
}
```
---
## 4. 워크플로우 API
### 4.1 상신
```
POST /api/admin/approvals/{id}/submit
```
> 기안자가 `draft`/`rejected` 문서를 결재 요청한다.
**Request Body:** 없음
**응답:** `{ "success": true, "message": "결재가 상신되었습니다.", "data": {...} }`
---
### 4.2 승인
```
POST /api/admin/approvals/{id}/approve
```
> 현재 결재자가 승인한다.
**Request Body:**
```json
{
"comment": "승인합니다." // 선택
}
```
**응답:** `{ "success": true, "message": "승인되었습니다.", "data": {...} }`
---
### 4.3 반려
```
POST /api/admin/approvals/{id}/reject
```
> 현재 결재자가 반려한다. 사유 필수.
**Request Body:**
```json
{
"comment": "예산 초과로 반려합니다." // 필수
}
```
**Validation:** `comment` — required, string, max:1000
**응답:** `{ "success": true, "message": "반려되었습니다.", "data": {...} }`
---
### 4.4 회수
```
POST /api/admin/approvals/{id}/cancel
```
> 기안자가 `pending`/`on_hold` 문서를 회수한다. 첫 결재자 미처리 시에만 가능.
**Request Body:**
```json
{
"recall_reason": "내용 수정 필요" // 선택
}
```
**응답:** `{ "success": true, "message": "결재가 회수되었습니다.", "data": {...} }`
---
### 4.5 보류
```
POST /api/admin/approvals/{id}/hold
```
> 현재 결재자가 결재를 보류한다. 사유 필수.
**Request Body:**
```json
{
"comment": "추가 자료 검토 필요" // 필수
}
```
**Validation:** `comment` — required, string, max:1000
**응답:** `{ "success": true, "message": "보류되었습니다.", "data": {...} }`
---
### 4.6 보류 해제
```
POST /api/admin/approvals/{id}/release-hold
```
> 보류한 결재자가 보류를 해제한다.
**Request Body:** 없음
**응답:** `{ "success": true, "message": "보류가 해제되었습니다.", "data": {...} }`
---
### 4.7 전결
```
POST /api/admin/approvals/{id}/pre-decide
```
> 현재 결재자가 이후 모든 결재를 건너뛰고 최종 승인한다.
**Request Body:**
```json
{
"comment": "전결 처리합니다." // 선택
}
```
**응답:** `{ "success": true, "message": "전결 처리되었습니다.", "data": {...} }`
---
### 4.8 복사 재기안
```
POST /api/admin/approvals/{id}/copy
```
> 기안자가 `approved`/`rejected`/`cancelled` 문서를 복사하여 새 draft를 생성한다.
**Request Body:** 없음
**응답:**
```json
{
"success": true,
"message": "문서가 복사되었습니다.",
"data": {
"id": 15,
"document_number": "APR-260228-003",
"parent_doc_id": 1,
"status": "draft",
...
}
}
```
> 응답의 `data.id`를 사용하여 `/approval-mgmt/{id}/edit`로 이동한다.
---
### 4.9 참조 열람 추적
```
POST /api/admin/approvals/{id}/mark-read
```
> 참조자가 문서를 열람했음을 기록한다.
**Request Body:** 없음
**응답:** `{ "success": true, "message": "열람 처리되었습니다." }`
---
## 5. 유틸리티 API
### 5.1 결재선 템플릿 목록
```
GET /api/admin/approvals/lines
```
**응답:**
```json
{
"success": true,
"data": [
{ "id": 1, "name": "일반 결재선", "steps": [...] }
]
}
```
---
### 5.2 양식 목록
```
GET /api/admin/approvals/forms
```
**응답:**
```json
{
"success": true,
"data": [
{ "id": 1, "name": "휴가신청서", "is_active": true }
]
}
```
---
### 5.3 미처리 건수 (뱃지)
```
GET /api/admin/approvals/badge-counts
```
**응답:**
```json
{
"success": true,
"data": {
"pending": 3,
"draft": 1,
"reference_unread": 5
}
}
```
| 필드 | 설명 |
|------|------|
| `pending` | 내가 결재해야 할 문서 수 |
| `draft` | 내 임시저장 문서 수 |
| `reference_unread` | 미열람 참조 문서 수 |
---
## 6. 라우트 전체 목록
| Method | Path | 컨트롤러 메서드 | 이름 | 설명 |
|--------|------|---------------|------|------|
| GET | `/drafts` | `drafts` | `drafts` | 기안함 |
| GET | `/pending` | `pending` | `pending` | 결재 대기함 |
| GET | `/completed` | `completed` | `completed` | 처리 완료함 |
| GET | `/references` | `references` | `references` | 참조함 |
| GET | `/lines` | `lines` | `lines` | 결재선 템플릿 |
| GET | `/forms` | `forms` | `forms` | 양식 목록 |
| GET | `/badge-counts` | `badgeCounts` | `badge-counts` | 뱃지 건수 |
| POST | `/` | `store` | `store` | 생성 |
| GET | `/{id}` | `show` | `show` | 상세 |
| PUT | `/{id}` | `update` | `update` | 수정 |
| DELETE | `/{id}` | `destroy` | `destroy` | 삭제 |
| POST | `/{id}/submit` | `submit` | `submit` | 상신 |
| POST | `/{id}/approve` | `approve` | `approve` | 승인 |
| POST | `/{id}/reject` | `reject` | `reject` | 반려 |
| POST | `/{id}/cancel` | `cancel` | `cancel` | 회수 |
| POST | `/{id}/hold` | `hold` | `hold` | 보류 |
| POST | `/{id}/release-hold` | `releaseHold` | `release-hold` | 보류 해제 |
| POST | `/{id}/pre-decide` | `preDecide` | `pre-decide` | 전결 |
| POST | `/{id}/copy` | `copyForRedraft` | `copy` | 복사 재기안 |
| POST | `/{id}/mark-read` | `markAsRead` | `mark-read` | 열람 추적 |
---
## 관련 문서
- [README.md](README.md) — 시스템 전체 개요
- [워크플로우 상세](workflows.md) — 각 동작의 상세 흐름
- [UI 화면 구성](ui-screens.md) — 화면별 동작
---
**최종 업데이트**: 2026-02-28

286
sam/docs/features/approvals/db-changes-and-model-sync.md
View File

@@ -1,286 +0,0 @@
# 결재관리 DB 변경사항 및 API 모델 동기화 현황
> **작성일**: 2026-03-09
> **상태**: 조사 완료
> **관련**: [README.md](README.md) | [API 명세](api-reference.md)
---
## 1. 개요
### 1.1 목적
2026-02-27 ~ 2026-03-05 기간에 결재관리 테이블에 대규모 컬럼 추가가 이루어졌다. 이 문서는 변경된 DB 스키마와 API/MNG 프로젝트 간 모델 동기화 상태를 기록한다.
### 1.2 핵심 발견
- 마이그레이션 **15개** 실행 (API 프로젝트에서 관리)
- MNG 모델: ✅ 모든 신규 컬럼 반영 완료
- API 모델: ❌ **`$fillable`/`$casts` 미반영** — 오류 원인 가능성
---
## 2. 마이그레이션 변경 타임라인
### 2.1 Phase 2 확장 (2026-02-27)
| 마이그레이션 파일 | 대상 테이블 | 작업 |
|------------------|-----------|------|
| `add_columns_to_approvals_table` | `approvals` | `line_id`, `body`, `is_urgent`, `department_id` 추가 |
| `add_columns_to_approval_steps_table` | `approval_steps` | `approver_name`, `approver_department`, `approver_position` 추가 |
| `add_phase2_columns_to_approval_steps_table` | `approval_steps` | `parallel_group`, `acted_by`, `approval_type` 추가 |
| `add_phase2_columns_to_approvals_table` | `approvals` | `recall_reason`, `parent_doc_id` 추가 |
| `create_approval_delegations_table` | `approval_delegations` | 위임 테이블 신규 생성 |
| `add_linkable_to_approvals_table` | `approvals` | `linkable_type`, `linkable_id` 추가 (다형성) |
### 2.2 도메인 연동 (2026-02-28)
| 마이그레이션 파일 | 대상 테이블 | 작업 |
|------------------|-----------|------|
| `add_approval_id_to_leaves_table` | `leaves` | `approval_id` FK 추가 |
| `insert_leave_approval_form` | `approval_forms` | 휴가신청 양식 데이터 등록 |
### 2.3 양식 확장 (2026-03-03 ~ 03-04)
| 마이그레이션 파일 | 대상 테이블 | 작업 |
|------------------|-----------|------|
| `insert_attendance_approval_forms` | `approval_forms` | 근태신청, 사유서 양식 등록 |
| `add_body_template_to_approval_forms` | `approval_forms` | `body_template` 컬럼 추가 |
| `insert_expense_approval_form` | `approval_forms` | 지출결의서 양식 + body_template 등록 |
| `update_expense_approval_form_body_template` | `approval_forms` | 지출결의서 body_template 고도화 |
### 2.4 추적 기능 (2026-03-05)
| 마이그레이션 파일 | 대상 테이블 | 작업 |
|------------------|-----------|------|
| `add_drafter_read_at_to_approvals_table` | `approvals` | `drafter_read_at` 추가 |
| `add_resubmit_count_to_approvals_table` | `approvals` | `resubmit_count` 추가 |
| `add_rejection_history_to_approvals_table` | `approvals` | `rejection_history` 추가 |
---
## 3. 추가된 컬럼 상세
### 3.1 `approvals` 테이블 (11개 컬럼 추가)
| 컬럼 | 타입 | 기본값 | 추가일 | 용도 |
|------|------|--------|--------|------|
| `line_id` | BIGINT FK NULL | NULL | 02-27 | 결재선 템플릿 참조 |
| `body` | LONGTEXT NULL | NULL | 02-27 | 문서 본문 HTML |
| `is_urgent` | BOOLEAN | false | 02-27 | 긴급 여부 |
| `department_id` | BIGINT NULL | NULL | 02-27 | 기안 부서 |
| `recall_reason` | TEXT NULL | NULL | 02-27 | 회수 사유 |
| `parent_doc_id` | BIGINT FK NULL | NULL | 02-27 | 재기안 원본 문서 |
| `linkable_type` | VARCHAR NULL | NULL | 02-27 | 다형성 모델 타입 |
| `linkable_id` | BIGINT NULL | NULL | 02-27 | 다형성 모델 ID |
| `drafter_read_at` | TIMESTAMP NULL | NULL | 03-05 | 기안자 열람 시각 |
| `resubmit_count` | TINYINT UNSIGNED | 0 | 03-05 | 재상신 횟수 |
| `rejection_history` | JSON NULL | NULL | 03-05 | 반려 이력 배열 |
### 3.2 `approval_steps` 테이블 (6개 컬럼 추가)
| 컬럼 | 타입 | 기본값 | 추가일 | 용도 |
|------|------|--------|--------|------|
| `approver_name` | VARCHAR(50) NULL | NULL | 02-27 | 결재자명 스냅샷 |
| `approver_department` | VARCHAR(100) NULL | NULL | 02-27 | 결재자 부서 스냅샷 |
| `approver_position` | VARCHAR(50) NULL | NULL | 02-27 | 결재자 직급 스냅샷 |
| `parallel_group` | INT NULL | NULL | 02-27 | 병렬 결재 그룹 (Phase 3) |
| `acted_by` | BIGINT FK NULL | NULL | 02-27 | 실제 처리자 (대결) |
| `approval_type` | VARCHAR(20) | 'normal' | 02-27 | normal/pre_decided/delegated |
### 3.3 `approval_forms` 테이블 (1개 컬럼 추가)
| 컬럼 | 타입 | 기본값 | 추가일 | 용도 |
|------|------|--------|--------|------|
| `body_template` | TEXT NULL | NULL | 03-04 | HTML 양식 렌더링 템플릿 |
### 3.4 `approval_delegations` 테이블 (신규 생성)
| 컬럼 | 타입 | 설명 |
|------|------|------|
| `tenant_id` | BIGINT FK | 테넌트 격리 |
| `delegator_id` | BIGINT FK | 위임자 |
| `delegate_id` | BIGINT FK | 대리인 |
| `start_date` | DATE | 위임 시작일 |
| `end_date` | DATE | 위임 종료일 |
| `form_ids` | JSON NULL | 대상 양식 (NULL=전체) |
| `notify_delegator` | BOOLEAN | 대결 시 보고 여부 |
| `is_active` | BOOLEAN | 활성 여부 |
| `reason` | VARCHAR(200) | 위임 사유 |
---
## 4. API/MNG 모델 동기화 현황
### 4.1 Approval 모델 비교
| 항목 | MNG (`mng/app/Models/Approvals/Approval.php`) | API (`api/app/Models/Tenants/Approval.php`) |
|------|:---:|:---:|
| `line_id` in $fillable | ✅ | ❌ |
| `body` in $fillable | ✅ | ❌ |
| `is_urgent` in $fillable/$casts | ✅ boolean | ❌ |
| `department_id` in $fillable | ✅ | ❌ |
| `recall_reason` in $fillable | ✅ | ❌ |
| `parent_doc_id` in $fillable | ✅ | ❌ |
| `linkable_type/id` in $fillable | ✅ | ✅ |
| `drafter_read_at` in $fillable/$casts | ✅ datetime | ❌ |
| `resubmit_count` in $fillable/$casts | ✅ integer | ❌ |
| `rejection_history` in $fillable/$casts | ✅ array | ❌ |
### 4.2 ApprovalStep 모델 비교
| 항목 | MNG | API |
|------|:---:|:---:|
| `approver_name` in $fillable | ✅ | ❌ |
| `approver_department` in $fillable | ✅ | ❌ |
| `approver_position` in $fillable | ✅ | ❌ |
| `parallel_group` in $fillable | ✅ | ❌ |
| `acted_by` in $fillable | ✅ | ❌ |
| `approval_type` in $fillable | ✅ | ❌ |
### 4.3 ApprovalForm 모델 비교
| 항목 | MNG | API |
|------|:---:|:---:|
| `body_template` in $fillable | ✅ | ❌ |
### 4.4 ApprovalDelegation 모델
| 항목 | MNG | API |
|------|:---:|:---:|
| 모델 파일 존재 | ✅ | ❌ 미생성 |
---
## 5. 오류 영향 분석
### 5.1 API 모델 미반영으로 인한 잠재적 오류
API 프로젝트의 모델 `$fillable`에 신규 컬럼이 누락되어, API 엔드포인트를 통한 결재 문서 처리 시 다음 오류가 발생할 수 있다:
| 증상 | 원인 | 영향 범위 |
|------|------|----------|
| `create()`/`update()` 시 신규 필드 저장 안 됨 | `$fillable` 미포함 → mass assignment 차단 | API v1 결재 CRUD |
| JSON 필드(`rejection_history`) 문자열로 반환 | `$casts` 미정의 → 타입 변환 안 됨 | API 응답 파싱 오류 |
| `drafter_read_at` 날짜 비교 실패 | `$casts` datetime 미정의 → Carbon 미변환 | 열람 추적 기능 |
| `is_urgent` 비교 오류 | `$casts` boolean 미정의 → 문자열 비교 | 긴급 필터링 |
| 위임(delegation) 기능 완전 불가 | 모델 자체 미생성 | Phase 3 기능 전체 |
### 5.2 MNG는 정상
MNG 프로젝트의 모델은 모든 신규 컬럼이 `$fillable`, `$casts`, `$attributes`에 반영되어 있으며, `ApprovalService`에서 정상 사용 중이다.
```
MNG 정상 동작 확인 기능:
✅ 반려 이력 저장 (rejection_history)
✅ 재상신 횟수 추적 (resubmit_count)
✅ 기안자 열람 추적 (drafter_read_at)
✅ 결재자 스냅샷 저장 (approver_name/department/position)
✅ 전결 처리 (approval_type = pre_decided)
✅ 회수 사유 기록 (recall_reason)
```
---
## 6. 수정 필요 파일 목록
### 6.1 API 모델 업데이트 필요
| 파일 | 수정 내용 |
|------|----------|
| `api/app/Models/Tenants/Approval.php` | `$fillable`에 9개 필드, `$casts`에 4개 필드 추가 |
| `api/app/Models/Tenants/ApprovalStep.php` | `$fillable`에 6개 필드 추가 |
| `api/app/Models/Tenants/ApprovalForm.php` | `$fillable`에 `body_template` 추가 |
| `api/app/Models/Tenants/ApprovalDelegation.php` | 모델 파일 신규 생성 |
### 6.2 Approval.php 수정 상세
**`$fillable` 추가 필요:**
```php
'line_id',
'body',
'is_urgent',
'department_id',
'recall_reason',
'parent_doc_id',
'drafter_read_at',
'resubmit_count',
'rejection_history',
```
**`$casts` 추가 필요:**
```php
'drafter_read_at' => 'datetime',
'resubmit_count' => 'integer',
'rejection_history' => 'array',
'is_urgent' => 'boolean',
```
### 6.3 ApprovalStep.php 수정 상세
**`$fillable` 추가 필요:**
```php
'approver_name',
'approver_department',
'approver_position',
'parallel_group',
'acted_by',
'approval_type',
```
### 6.4 ApprovalForm.php 수정 상세
**`$fillable` 추가 필요:**
```php
'body_template',
```
---
## 7. 연관 테이블 참조 변경
결재 시스템과 연동된 다른 테이블의 변경사항:
| 테이블 | 추가 컬럼 | 추가일 | 용도 |
|--------|----------|--------|------|
| `leaves` | `approval_id` (BIGINT FK) | 02-28 | 휴가 ↔ 결재 연동 |
| `purchases` | `approval_id` (BIGINT FK) | (기존) | 구매 ↔ 결재 연동 |
---
## 8. 등록된 결재 양식 (13종)
2026-02-28 ~ 03-07 기간에 마이그레이션으로 등록된 양식:
| 코드 | 양식명 | 카테고리 | 등록일 |
|------|--------|---------|--------|
| `leave` | 휴가신청서 | request | 02-28 |
| `attendance_request` | 근태신청서 | request | 03-03 |
| `reason_report` | 사유서 | request | 03-03 |
| `expense` | 지출결의서 | expense | 03-04 |
| `employment_cert` | 재직증명서 | request | 03-05 |
| `career_cert` | 경력증명서 | request | 03-05 |
| `appointment_cert` | 위촉증명서 | request | 03-05 |
| `resignation` | 사직서 | request | 03-06 |
| `seal_usage` | 사용인감계 | request | 03-06 |
| `delegation` | 위임장 | request | 03-06 |
| `board_minutes` | 이사회의사록 | request | 03-06 |
| `quotation` | 견적서 | request | 03-06 |
| `official_letter` | 공문서 | request | 03-07 |
---
## 관련 문서
- [결재관리 시스템 개요](README.md) — 아키텍처, 상태 관리, 권한
- [API 명세](api-reference.md) — 20개 엔드포인트 상세
- [워크플로우 상세](workflows.md) — 승인/반려/회수/보류/전결 흐름
- [기획서 원본](../../plans/approval-management-system-plan.md) — Phase 1~4 전체 기획
---
**최종 업데이트**: 2026-03-09

999
sam/docs/features/approvals/form-types.md
View File

@@ -1,999 +0,0 @@
# 결재 양식 기술 명세
> **작성일**: 2026-03-06
> **상태**: Phase 2 구현 완료
> **관련**: [README.md](README.md) | [워크플로우](workflows.md) | [API 명세](api-reference.md) | [UI 화면](ui-screens.md)
---
## 1. 개요
### 1.1 목적
SAM MNG 결재관리의 **기안함 양식** 기술 명세. 각 양식의 필드 구조, JSON Content 데이터 형식, UI 인터랙션, 특수 로직을 정의한다.
### 1.2 양식 목록
| 코드 | 양식명 | 분류 | Blade 파일 | 설명 |
|------|--------|------|------------|------|
| `BUSINESS_DRAFT` | 업무기안서 | 일반 | (body 편집기) | 일반 업무 보고·요청 |
| `leave` | 휴가신청 | 인사/근태 | `_leave-form.blade.php` | 연차, 휴가, 근태 신청 |
| `attendance_request` | 근태신청 | 인사/근태 | `_leave-form.blade.php` | 외근, 출장, 조퇴 등 |
| `reason_report` | 사유서 | 인사/근태 | `_leave-form.blade.php` | 지각, 결근 등 사유 소명 |
| `resignation` | 사직서 | 인사/근태 | `_resignation-form.blade.php` | 퇴직 서류 |
| `employment_cert` | 재직증명서 | 증명서 | `_certificate-form.blade.php` | 재직 증명 발급 (PDF) |
| `career_cert` | 경력증명서 | 증명서 | `_career-cert-form.blade.php` | 경력 증명 발급 (PDF) |
| `appointment_cert` | 위촉증명서 | 증명서 | `_appointment-cert-form.blade.php` | 위촉/임명 증명 발급 (PDF) |
| `pr_expense` | 지출품의서 | 품의 | `_purchase-request-form.blade.php` | 지출 전 사전 승인 |
| `pr_contract` | 계약체결품의서 | 품의 | `_purchase-request-form.blade.php` | 계약 체결 전 승인 |
| `pr_purchase` | 구매품의서 | 품의 | `_purchase-request-form.blade.php` | 물품 구매 전 승인 |
| `pr_trip` | 출장품의서 | 품의 | `_purchase-request-form.blade.php` | 출장 계획 승인 |
| `pr_settlement` | 비용정산품의서 | 품의 | `_purchase-request-form.blade.php` | 비용 정산 승인 |
| `expense` | 지출결의서 | 재무 | `_expense-form.blade.php` | 법인카드/송금/자동이체 지출 |
### 1.3 공통 구조
모든 양식은 동일한 패턴으로 동작한다:
```
양식 선택 (form_id)
↓
양식별 Blade 파셜 렌더링 (create.blade.php 내 조건부 display)
↓
사용자 입력 → Alpine.js / JavaScript 인터랙션
↓
getFormData() → JSON content 생성
↓
ApprovalService::createApproval() → Approval.content (JSON 컬럼) 저장
```
### 1.4 양식 선택 UI (2단계 분류 + 설명 카드)
양식 선택은 **2단계 드롭다운 + 설명 카드** 레이아웃으로 구성된다.
```
┌─────────────────────────────────────────────────────────────────────────┐
│ 양식 * │
│ ┌──── 30% ────────┐ ┌─────────────── 70% ───────────────────────────┐ │
│ │ 📋 품의 ▼ │ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ │ │ 📋 지출품의서 │ │ │
│ │ 지출품의서 ▼ │ │ │ 지출이 발생하기 전 사전 승인을 받는 │ │ │
│ │ │ │ │ 문서입니다. 예산 범위 내에서 지출 항목과 │ │ │
│ │ │ │ │ 금액을 기재하여 사전에 승락을 받습니다. │ │ │
│ └──────────────────┘ │ └─────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
```
#### 1단계: 분류 선택 (`form_category`)
| 분류 | 아이콘 | 포함 양식 |
|------|--------|----------|
| 일반 | 📄 | 업무기안서 |
| 인사/근태 | 👤 | 휴가신청, 근태신청, 사유서, 사직서 |
| 증명서 | 📜 | 재직증명서, 경력증명서, 위촉증명서 |
| 품의 | 📋 | 지출품의서, 계약체결품의서, 구매품의서, 출장품의서, 비용정산품의서 |
| 재무 | 💰 | 지출결의서 |
#### 2단계: 양식 선택 (`form_id`)
- 1단계 분류 선택 시 해당 분류에 속하지 않는 양식은 `display:none` + `disabled`
- 분류 내 첫 번째 양식 자동 선택
#### 설명 카드 (`formDescriptions`)
- 양식 선택 시 우측에 해당 양식의 아이콘/제목/설명 텍스트 표시
- 14종 전체 양식에 대한 설명 정의 (create/edit 공통)
- 색상: 양식별 Tailwind 테마 색상 (`border-*-200 bg-*-50`)
#### 핵심 JavaScript 함수
| 함수 | 설명 |
|------|------|
| `buildCategoryOptions()` | 사용 가능한 카테고리만 `form_category` 옵션으로 생성 |
| `filterFormsByCategory(cat)` | 선택된 분류 외 양식 옵션 숨김/비활성화 |
| `selectCategoryByFormId(formId)` | formId로 카테고리 역산하여 자동 선택 |
| `updateFormDescription(formId)` | 설명 카드 DOM 업데이트 |
### 1.5 파일 구조
```
resources/views/approvals/
├── create.blade.php ← 기안 작성 (2단계 양식 선택 + 설명 카드 + 동적 폼)
├── edit.blade.php ← 기안 수정 (create와 동일한 2단계 선택 구조)
├── show.blade.php ← 상세 조회 (양식별 조회 컴포넌트)
└── partials/
├── _leave-form.blade.php ← 휴가신청 폼
├── _expense-form.blade.php ← 지출결의서 폼
├── _expense-show.blade.php ← 지출결의서 조회
├── _purchase-request-form.blade.php ← 품의서 5종 통합 폼 (Alpine.js)
├── _purchase-request-show.blade.php ← 품의서 5종 통합 조회
├── _certificate-form.blade.php ← 재직증명서 폼
├── _certificate-show.blade.php ← 재직증명서 조회
├── _career-cert-form.blade.php ← 경력증명서 폼
├── _career-cert-show.blade.php ← 경력증명서 조회
├── _appointment-cert-form.blade.php ← 위촉증명서 폼
├── _appointment-cert-show.blade.php ← 위촉증명서 조회
├── _resignation-form.blade.php ← 사직서 폼
├── _resignation-show.blade.php ← 사직서 조회
├── _approval-stamp-table.blade.php ← 결재 도장 테이블
└── _approval-line-editor.blade.php ← 결재선 편집기
```
---
## 2. 휴가신청 (leave)
### 2.1 폼 필드
| 필드 ID | 라벨 | 타입 | 필수 | 기본값 | 설명 |
|---------|------|------|------|--------|------|
| `leave-user-id` | 신청자 | select | 필수 | `auth()->id()` | 활성 사원 목록 |
| `leave-type` | 유형 | select | 필수 | - | 휴가/근태신청/사유서 |
| `leave-start-date` | 시작일 | date | 필수 | - | `YYYY-MM-DD` |
| `leave-end-date` | 종료일 | date | 필수 | - | `YYYY-MM-DD` |
| `leave-reason` | 사유 | textarea | 선택 | - | 자유 텍스트 |
### 2.2 Content JSON
```json
{
"user_id": "10",
"leave_type": "연차",
"start_date": "2026-03-06",
"end_date": "2026-03-07",
"reason": "개인 사유"
}
```
### 2.3 특수 로직
- **자동 선택**: 로그인 사용자가 기본 선택 (`auth()->id()`)
- **직원 목록**: `$employees` Props로 전달 (활성 사원만)
- **단순 구조**: Alpine.js 없이 Blade 폼으로 구현
---
## 3. 지출결의서 (expense)
### 3.1 폼 구조 (Alpine.js 기반)
```javascript
x-data="expenseForm(initialData, authUserName, initialFiles, cardsData, accountsData)"
```
### 3.2 기본 정보 필드
| 필드 | 라벨 | 타입 | 필수 | 기본값 |
|------|------|------|------|--------|
| `expense_type` | 지출형식 | radio | 필수 | `corporate_card` |
| `tax_invoice` | 세금계산서 | radio | 필수 | `normal` |
| `write_date` | 작성일자 | date | 선택 | 오늘 |
| `approval_date` | 결재일자 | date | 선택 | 오늘 |
| `department` | 부서 | text | 선택 | `경리부` |
| `writer_name` | 이름 | text | 선택 | 인증 사용자명 |
### 3.3 지출형식별 선택
| 지출형식 | 코드 | 연결 데이터 |
|---------|------|------------|
| 법인카드 | `corporate_card` | `$cards` → `selected_card` |
| 송금 | `transfer` | `$accounts` → `selected_account` |
| 자동이체 출금 | `auto_transfer` | `$accounts` → `selected_account` |
| 현금/가지급정산 | `cash_advance` | 없음 |
**법인카드 선택 시 저장 구조:**
```json
{
"selected_card": {
"id": 1,
"card_name": "삼성카드",
"card_company": "삼성",
"card_number_last4": "1234",
"card_holder_name": "홍길동"
}
}
```
**계좌 선택 시 저장 구조:**
```json
{
"selected_account": {
"id": 1,
"bank_name": "국민은행",
"account_number": "123-456-789012",
"account_holder": "주일기업"
}
}
```
### 3.4 세금계산서 옵션
| 옵션 | 코드 |
|------|------|
| 일반 | `normal` |
| 이월발행 | `deferred` |
| 없음 | `none` |
### 3.5 내역 테이블
**동적 rows** (`.items` 배열):
| 필드 | 라벨 | 타입 | 설명 |
|------|------|------|------|
| `date` | 일자 | date | `YYYY-MM-DD` |
| `description` | 적요 | text | 지출 설명 |
| `amount` | 금액 | number | 콤마 제거 정수 |
| `vendor` | 거래처 | text | Autocomplete 검색 |
| `vendor_id` | 거래처 ID | hidden | API 연결 ID |
| `vendor_biz_no` | 사업자번호 | hidden | 자동 채움 |
| `bank` | 은행명 | text | 수동 입력 |
| `account_no` | 계좌번호 | text | 수동 입력 |
| `depositor` | 예금주 | text | 수동 입력 |
| `remark` | 비고 | text | 메모 |
### 3.6 Content JSON (전체)
```json
{
"expense_type": "corporate_card",
"tax_invoice": "normal",
"write_date": "2026-03-06",
"approval_date": "2026-03-06",
"department": "경리부",
"writer_name": "홍길동",
"items": [
{
"date": "2026-03-05",
"description": "사무용품 구매",
"amount": 150000,
"vendor": "오피스디포",
"vendor_id": 123,
"vendor_biz_no": "123-45-67890",
"bank": "",
"account_no": "",
"depositor": "",
"remark": ""
}
],
"total_amount": 150000,
"attachment_memo": "영수증 첨부",
"selected_card": { ... },
"selected_account": null
}
```
### 3.7 특수 기능
#### 거래처 검색 (Autocomplete)
```
입력 → 250ms 디바운싱 → API 호출 → 드롭다운 렌더링
API: /barobill/tax-invoice/search-partners?keyword=...
키보드: ↑↓(네비게이션), Enter(선택), Esc(닫기)
마우스: 항목 클릭(선택)
```
#### 금액 입력 포맷팅
```
입력 시: 콤마 제거 → 정수 저장 (parseMoney)
표시 시: 콤마 포맷 (formatMoney)
합계: totalAmount getter → footer 실시간 업데이트
```
#### 파일 업로드
```
드래그 앤 드롭 + 파일 입력
최대: 20MB
형식: pdf, doc, docx, xls, xlsx, ppt, pptx, txt, jpg, jpeg, png, gif, zip, rar
API: POST /api/admin/approvals/upload-file
진행률: XHR 업로드 이벤트
```
#### 카드/계좌 연동
```
카드 선택 → 모든 내역 행에 "결제카드" 자동 표시
계좌 선택 → 모든 내역 행에 "은행/계좌/예금주" 자동 채움
```
### 3.8 조회 화면 (_expense-show.blade.php)
| 섹션 | 내용 |
|------|------|
| 기본 정보 | 지출형식, 세금계산서, 작성일, 결재일, 부서, 이름 |
| 선택 카드/계좌 | 유색 박스로 표시 |
| 내역 테이블 | 읽기 전용, `number_format()` 금액 |
| 첨부서류 메모 | `whitespace-pre-wrap` |
| 첨부파일 목록 | 다운로드 링크 + 파일 크기 |
---
## 4. 증명서 양식 공통
### 4.1 공통 패턴
모든 증명서 양식은 동일한 패턴을 따른다:
```
사원 선택 → loadXxxInfo(userId) → API 호출 → 읽기 전용 필드 자동 채움
↓
일부 필드만 수정 가능
↓
미리보기 모달 (인쇄 가능)
```
### 4.2 공통 함수
| 함수 | 설명 |
|------|------|
| `loadXxxInfo(userId)` | 사원 선택 시 인적/재직 정보 로드 |
| `openXxxPreview()` | 미리보기 모달 열기 |
| `printXxxPreview()` | 미리보기 인쇄 (`window.print()`) |
| `closeXxxPreview()` | 미리보기 닫기 |
| `onXxxPurposeChange()` | 용도 선택 시 직접입력 필드 표시 |
### 4.3 조회 화면 공통
- 읽기 전용 필드 표시
- PDF 다운로드: `route('api.admin.approvals.cert-pdf', $approval->id)`
---
## 5. 재직증명서 (employment_cert)
### 5.1 폼 필드
| 섹션 | 필드 ID | 라벨 | 타입 | 수정 | 설명 |
|------|---------|------|------|------|------|
| 인적사항 | `cert-name` | 성명 | text | readonly | DB 자동 채움 |
| | `cert-resident` | 주민등록번호 | text | readonly | DB 자동 채움 |
| | `cert-address` | 주소 | text | editable | 직접 입력 |
| 재직사항 | `cert-company` | 회사명 | text | readonly | DB 자동 채움 |
| | `cert-business-num` | 사업자번호 | text | readonly | DB 자동 채움 |
| | `cert-department` | 근무부서 | text | readonly | DB 자동 채움 |
| | `cert-position` | 직급 | text | readonly | DB 자동 채움 |
| | `cert-hire-date` | 재직기간 | text | readonly | DB 자동 채움 |
| 발급정보 | `cert-purpose-select` | 사용용도 | select | editable | 드롭다운 선택 |
| | (custom) | 기타 용도 | text | editable | "기타" 선택 시 표시 |
| | `cert-issue-date` | 발급일 | text | readonly | `now()->format('Y-m-d')` |
### 5.2 Content JSON
```json
{
"name": "홍길동",
"resident_number": "900101-1XXXXXX",
"address": "서울특별시 강남구",
"company_name": "(주)코드브릿지엑스",
"business_num": "123-45-67890",
"department": "개발팀",
"position": "과장",
"hire_date": "2020-03-01",
"purpose": "은행 제출용",
"issue_date": "2026-03-06"
}
```
---
## 6. 경력증명서 (career_cert)
### 6.1 폼 필드 (재직증명서 대비 추가/변경)
| 섹션 | 필드 ID | 라벨 | 타입 | 수정 | 설명 |
|------|---------|------|------|------|------|
| 인적사항 | `cc-birth-date` | 생년월일 | text | readonly | DB 자동 채움 |
| 경력사항 | `cc-ceo-name` | 대표자 | text | readonly | DB 자동 채움 |
| | `cc-phone` | 대표전화 | text | readonly | DB 자동 채움 |
| | `cc-company-address` | 소재지 | text | readonly | DB 자동 채움 |
| | `cc-department` | 소속부서 | text | readonly | DB 자동 채움 |
| | `cc-position` | 직위/직급 | text | readonly | DB 자동 채움 |
| | `cc-hire-date` | 근무기간 시작 | text | readonly | DB 자동 채움 |
| | `cc-resign-date` | 근무기간 종료 | date | editable | 직접 입력 |
| | `cc-job-description` | 담당업무 | text | editable | 직접 입력 |
| 발급정보 | 용도 | select | editable | + "이직 제출용" 옵션 |
### 6.2 Content JSON
```json
{
"name": "홍길동",
"birth_date": "1990-01-01",
"address": "서울특별시 강남구",
"company_name": "(주)코드브릿지엑스",
"business_num": "123-45-67890",
"ceo_name": "김대표",
"phone": "02-1234-5678",
"company_address": "서울특별시 강남구 테헤란로",
"department": "개발팀",
"position": "과장",
"hire_date": "2020-03-01",
"resign_date": "2026-02-28",
"job_description": "웹 애플리케이션 개발",
"purpose": "이직 제출용",
"issue_date": "2026-03-06"
}
```
---
## 7. 위촉증명서 (appointment_cert)
### 7.1 폼 필드
| 섹션 | 필드 ID | 라벨 | 타입 | 수정 | 설명 |
|------|---------|------|------|------|------|
| 인적사항 | `ac-name` | 성명 | text | readonly | DB 자동 채움 |
| | `ac-resident` | 주민등록번호 | text | readonly | DB 자동 채움 |
| | `ac-department` | 소속 | text | readonly | DB 자동 채움 |
| | `ac-phone` | 연락처 | text | editable | 직접 입력 |
| 위촉정보 | `ac-hire-date` | 위촉기간 시작 | text | readonly | DB 자동 채움 |
| | `ac-resign-date` | 위촉기간 종료 | date | editable | 직접 입력 |
| | `ac-contract-type` | 계약자격 | text | editable | 직접 입력 |
| 발급정보 | `ac-purpose-select` | 용도 | select | editable | 드롭다운 선택 |
| | `ac-issue-date` | 발급일 | text | readonly | 자동 설정 |
| (숨김) | `ac-company-name` | 회사명 | hidden | - | 미리보기용 |
| | `ac-ceo-name` | 대표자명 | hidden | - | 미리보기용 |
### 7.2 Content JSON
```json
{
"name": "홍길동",
"resident_number": "900101-1XXXXXX",
"department": "기술자문팀",
"phone": "010-1234-5678",
"hire_date": "2024-01-01",
"resign_date": "2026-12-31",
"contract_type": "기술자문위원",
"purpose": "관공서 제출용",
"issue_date": "2026-03-06"
}
```
---
## 8. 사직서 (resignation)
### 8.1 폼 필드
| 섹션 | 필드 ID | 라벨 | 타입 | 수정 | 필수 |
|------|---------|------|------|------|------|
| 인적사항 | `rg-department` | 소속 | text | readonly | - |
| | `rg-position` | 직위 | text | readonly | - |
| | `rg-name` | 성명 | text | readonly | - |
| | `rg-resident` | 주민등록번호 | text | readonly | - |
| | `rg-hire-date` | 입사일 | text | readonly | - |
| | `rg-resign-date` | 퇴사(예정)일 | date | editable | 필수 |
| | `rg-address` | 주소 | text | editable | - |
| 사직사유 | `rg-reason-select` | 사유 | select | editable | 필수 |
| | (custom) | 기타 사유 | text | editable | - |
| 제출일 | `rg-issue-date` | 제출일 | text | readonly | - |
### 8.2 사직사유 옵션
| 옵션 |
|------|
| 일신상의 사유 |
| 가사 사정 |
| 건강상의 이유 |
| 진학/학업 |
| 이직 |
| 기타 (직접입력) |
### 8.3 Content JSON
```json
{
"department": "개발팀",
"position": "대리",
"name": "홍길동",
"resident_number": "900101-1XXXXXX",
"hire_date": "2020-03-01",
"resign_date": "2026-04-01",
"address": "서울특별시 강남구",
"reason": "이직",
"issue_date": "2026-03-06"
}
```
---
## 9. 품의서 5종 공통 (_purchase-request-form/show)
### 9.1 통합 Alpine.js 컴포넌트
품의서 5종은 **단일 Blade 파일**(`_purchase-request-form.blade.php`)에서 `prType` 프로퍼티로 동적 전환된다.
```javascript
x-data="purchaseRequestForm(initialData, authUserName, initialFiles)"
```
#### 타입 전환 메커니즘
```
create.blade.php → switchFormMode()
↓
code.startsWith('pr_') 감지
↓
#purchase-request-form-container display: block
↓
setTimeout(50ms) → _x_dataStack[0].setPrType(code)
↓
Alpine.js x-if 분기 → 해당 폼 렌더링
```
#### prType 코드 및 라벨
| prType | 라벨 | 색상 |
|--------|------|------|
| `pr_expense` | 지출품의서 | `bg-orange-50 text-orange-700` |
| `pr_contract` | 계약체결품의서 | `bg-purple-50 text-purple-700` |
| `pr_purchase` | 구매품의서 | `bg-blue-50 text-blue-700` |
| `pr_trip` | 출장품의서 | `bg-green-50 text-green-700` |
| `pr_settlement` | 비용정산품의서 | `bg-teal-50 text-teal-700` |
### 9.2 공통 필드 (모든 품의서)
| 필드 | 라벨 | 타입 | 기본값 |
|------|------|------|--------|
| `write_date` | 작성일자 | date | 오늘 |
| `department` | 요청부서 | text | - |
| `writer_name` | 요청자 | text | 인증 사용자명 |
| `attachment_memo` | 첨부서류 메모 | textarea | - |
| `files` | 파일 업로드 | file[] | - |
### 9.3 공통 함수
| 함수 | 설명 |
|------|------|
| `setPrType(type)` | 외부에서 prType 설정 (switchFormMode에서 호출) |
| `getFormData()` | prType별 다른 JSON 구조 반환 (base에 `pr_type` 포함) |
| `addItem()` | 내역 행 추가 |
| `removeItem(index)` | 내역 행 삭제 |
| `formatMoney(val)` | 숫자 → 콤마 포맷 |
| `parseMoney(str)` | 콤마 문자열 → 정수 |
| `prVendorSearch(target, fieldName)` | 범용 거래처 Autocomplete 검색 |
### 9.4 조회 화면 분기 (show.blade.php)
```php
// show.blade.php에서 pr_ prefix로 분기
@if(str_starts_with($approval->form?->code ?? '', 'pr_'))
@include('approvals.partials._purchase-request-show', ['content' => $content])
@endif
```
`_purchase-request-show.blade.php`에서 `$content['pr_type']`으로 5종 분기 렌더링.
---
## 10. 지출품의서 (pr_expense)
### 10.1 추가 필드
| 필드 | 라벨 | 타입 | 필수 |
|------|------|------|------|
| `expense_category` | 지출항목 | text | 선택 |
| `usage_date` | 사용일자 | date | 선택 |
| `purpose` | 사용목적 | textarea | 필수 |
### 10.2 내역 테이블
| 컬럼 | 라벨 | 타입 |
|------|------|------|
| `description` | 항목 | text |
| `amount` | 금액 | number (콤마 포맷) |
| `remark` | 비고 | text |
### 10.3 Content JSON
```json
{
"pr_type": "pr_expense",
"write_date": "2026-03-06",
"department": "개발팀",
"writer_name": "홍길동",
"expense_category": "사무용품",
"usage_date": "2026-03-05",
"purpose": "업무용 모니터 구매",
"items": [
{ "description": "27인치 모니터", "amount": 350000, "remark": "LG전자" }
],
"total_amount": 350000,
"attachment_memo": "견적서 첨부"
}
```
---
## 11. 계약체결품의서 (pr_contract)
### 11.1 추가 필드
| 필드 | 라벨 | 타입 | 필수 |
|------|------|------|------|
| `contract_party` | 계약상대방 | text + Autocomplete | 필수 |
| `contract_party_biz_no` | 사업자번호 | text (자동) | - |
| `contract_content` | 계약내용 | textarea | 필수 |
| `contract_period_start` | 계약기간 시작 | date | 선택 |
| `contract_period_end` | 계약기간 종료 | date | 선택 |
| `contract_amount` | 계약금액 | number (콤마) | 필수 |
| `contract_conditions` | 주요조건 | textarea | 선택 |
### 11.2 Content JSON
```json
{
"pr_type": "pr_contract",
"write_date": "2026-03-06",
"department": "경영지원팀",
"writer_name": "홍길동",
"contract_party": "(주)에이비씨",
"contract_party_biz_no": "123-45-67890",
"contract_content": "연간 IT 유지보수 계약",
"contract_period_start": "2026-04-01",
"contract_period_end": "2027-03-31",
"contract_amount": 12000000,
"contract_conditions": "월 1회 정기점검, 장애 발생 시 4시간 내 대응",
"attachment_memo": "계약서 초안 첨부"
}
```
### 11.3 특수 로직
- **거래처 검색**: `prVendorSearch(formData, 'contract_party')` — 계약상대방 필드에 Autocomplete 적용
- 선택 시 `contract_party_biz_no` 자동 채움
---
## 12. 구매품의서 (pr_purchase)
### 12.1 추가 필드
| 필드 | 라벨 | 타입 | 필수 |
|------|------|------|------|
| `vendor` | 납품업체 | text + Autocomplete | 선택 |
| `vendor_biz_no` | 사업자번호 | text (자동) | - |
| `delivery_date` | 납품예정일 | date | 선택 |
| `delivery_location` | 납품장소 | text | 선택 |
### 12.2 내역 테이블
| 컬럼 | 라벨 | 타입 |
|------|------|------|
| `name` | 품목 | text |
| `spec` | 규격 | text |
| `quantity` | 수량 | number |
| `unit_price` | 단가 | number (콤마) |
| `amount` | 금액 | number (자동: 수량×단가) |
| `remark` | 비고 | text |
### 12.3 Content JSON
```json
{
"pr_type": "pr_purchase",
"write_date": "2026-03-06",
"department": "생산팀",
"writer_name": "홍길동",
"vendor": "(주)공급사",
"vendor_biz_no": "987-65-43210",
"delivery_date": "2026-03-20",
"delivery_location": "본사 1층 창고",
"items": [
{ "name": "A4용지", "spec": "80g 500매", "quantity": 10, "unit_price": 25000, "amount": 250000, "remark": "" }
],
"total_amount": 250000,
"attachment_memo": ""
}
```
### 12.4 특수 로직
- **금액 자동 계산**: `quantity × unit_price → amount` (x-effect 반응)
- **거래처 검색**: `prVendorSearch(formData, 'vendor')` — 납품업체 필드에 Autocomplete 적용
---
## 13. 출장품의서 (pr_trip)
### 13.1 추가 필드
| 필드 | 라벨 | 타입 | 필수 |
|------|------|------|------|
| `destination` | 출장지 | text | 필수 |
| `trip_period_start` | 출장기간 시작 | date | 필수 |
| `trip_period_end` | 출장기간 종료 | date | 필수 |
| `trip_purpose` | 출장목적 | textarea | 필수 |
### 13.2 일정표 (items)
| 컬럼 | 라벨 | 타입 |
|------|------|------|
| `date` | 일자 | date |
| `schedule` | 일정 | text |
| `remark` | 비고 | text |
### 13.3 경비 내역 (expenses)
| 필드 | 라벨 | 타입 |
|------|------|------|
| `transport` | 교통비 | number (콤마) |
| `accommodation` | 숙박비 | number (콤마) |
| `meals` | 식비 | number (콤마) |
| `others` | 기타 | number (콤마) |
| (자동) | 합계 | number (합산) |
### 13.4 Content JSON
```json
{
"pr_type": "pr_trip",
"write_date": "2026-03-06",
"department": "영업팀",
"writer_name": "홍길동",
"destination": "부산 해운대",
"trip_period_start": "2026-03-10",
"trip_period_end": "2026-03-11",
"trip_purpose": "거래처 방문 및 현장 점검",
"items": [
{ "date": "2026-03-10", "schedule": "거래처 미팅", "remark": "오전 10시" },
{ "date": "2026-03-11", "schedule": "현장 점검 및 복귀", "remark": "" }
],
"expenses": {
"transport": 120000,
"accommodation": 80000,
"meals": 40000,
"others": 0
},
"total_amount": 240000,
"attachment_memo": ""
}
```
### 13.5 조회 화면 특수 구조
- **일정표**: 테이블 형태로 일자/일정/비고 렌더링
- **경비 카드**: 교통비/숙박비/식비/기타 4개 항목 + 합계를 카드 그리드로 표시
---
## 14. 비용정산품의서 (pr_settlement)
### 14.1 추가 필드
| 필드 | 라벨 | 타입 | 필수 |
|------|------|------|------|
| `settlement_period_start` | 정산기간 시작 | date | 선택 |
| `settlement_period_end` | 정산기간 종료 | date | 선택 |
| `payment_method` | 지급방법 | radio | 필수 |
### 14.2 지급방법 옵션
| 값 | 라벨 |
|----|------|
| `corporate_card` | 법인카드 사용 |
| `personal_advance` | 개인 선지출 (환급 요청) |
### 14.3 내역 테이블
| 컬럼 | 라벨 | 타입 |
|------|------|------|
| `date` | 사용일자 | date |
| `description` | 항목 | text |
| `amount` | 금액 | number (콤마) |
| `remark` | 비고 | text |
### 14.4 Content JSON
```json
{
"pr_type": "pr_settlement",
"write_date": "2026-03-06",
"department": "개발팀",
"writer_name": "홍길동",
"settlement_period_start": "2026-02-01",
"settlement_period_end": "2026-02-28",
"payment_method": "personal_advance",
"items": [
{ "date": "2026-02-15", "description": "택시비", "amount": 25000, "remark": "야근 귀가" },
{ "date": "2026-02-20", "description": "회의 다과", "amount": 15000, "remark": "팀 미팅" }
],
"total_amount": 40000,
"attachment_memo": "영수증 첨부"
}
```
### 14.5 조회 화면 특수 구조
- **지급방법 표시**: `corporate_card` → "법인카드 사용", `personal_advance` → "개인 선지출 (환급 요청)"
- 해당 라벨을 뱃지 형태로 표시
---
## 15. 결재 도장 테이블 (_approval-stamp-table.blade.php)
### 15.1 구조
전통 한글 결재 양식의 도장 테이블을 구현한다.
```
┌──────┬────────┬────────┬────────┐
│ │ 과장 │ 부장 │ 이사 │ ← 1행: 직급 헤더
│ 결재 ├────────┼────────┼────────┤
│ │ [승인] │ [대기] │ [대기] │ ← 2행: 서명/도장 영역
│ ├────────┼────────┼────────┤
│ │ 김과장 │ 박부장 │ 이이사 │ ← 3행: 이름 + 처리일
│ │ 03/06 │ │ │
└──────┴────────┴────────┴────────┘
```
### 15.2 상태별 표시
| 상태 | approval_type | 표시 | 색상 |
|------|---------------|------|------|
| 승인 | `normal` | 빨간 원형 "승인" | `bg-red-500` |
| 전결 | `pre_decided` | 파란 원형 "전결" | `bg-blue-500` |
| 반려 | - | 빨간 원형 "반려" | `bg-red-500` |
| 보류 | - | 주황 원형 "보류" | `bg-amber-500` |
| 건너뜀 | - | 회색 "-" | `bg-gray-300` |
---
## 16. 결재선 편집기 (_approval-line-editor.blade.php)
### 16.1 2패널 구조
```
┌─────────────────────┬─────────────────────┐
│ 인원 목록 │ 결재선 │
│ │ │
│ [검색 input] │ [템플릿 선택 ▼] │
│ │ │
│ ▼ 개발팀 │ ① 김과장 (결재) [✗] │
│ 홍길동 과장 [+] │ ② 박부장 (합의) [✗] │
│ 김영희 대리 [+] │ ③ 이대리 (참조) [✗] │
│ │ │
│ ▼ 경영지원팀 │ (드래그로 순서 변경) │
│ 박부장 부장 [+] │ │
│ │ │
├─────────────────────┴─────────────────────┤
│ 결재: 1명 합의: 1명 참조: 1명 합계: 3명 │
└───────────────────────────────────────────┘
```
### 16.2 기능
| 기능 | 설명 |
|------|------|
| **인원 검색** | 이름/부서 실시간 검색 |
| **부서별 접기** | 부서 헤더 클릭으로 인원 접기/펼치기 |
| **드래그 정렬** | SortableJS로 결재선 순서 변경 |
| **유형 선택** | 각 단계별 approval/agreement/reference 선택 |
| **템플릿 로드** | 저장된 결재선 템플릿 드롭다운 |
### 16.3 데이터 소스
```
API: /api/admin/tenant-users/list
응답:
[
{
"department_id": 1,
"department_name": "개발팀",
"users": [
{ "id": 10, "name": "홍길동", "position": "과장", "job_title": "팀장" }
]
}
]
```
### 16.4 Hidden Inputs (form 전송)
```html
<input type="hidden" name="steps[0][user_id]" value="10">
<input type="hidden" name="steps[0][step_type]" value="approval">
<input type="hidden" name="steps[1][user_id]" value="20">
<input type="hidden" name="steps[1][step_type]" value="agreement">
```
---
## 17. ApprovalForm 모델
### 17.1 테이블 스키마
| 컬럼 | 타입 | 설명 |
|------|------|------|
| `id` | BIGINT PK | |
| `tenant_id` | BIGINT FK | 테넌트 격리 |
| `name` | VARCHAR | 양식명 (예: "휴가신청서") |
| `code` | VARCHAR UNIQUE | 양식 코드 (예: `leave`) |
| `category` | ENUM | `request`, `expense`, `certificate`, `expense_estimate` |
| `template` | JSON | 필드 정의 메타데이터 |
| `body_template` | LONGTEXT NULL | HTML 본문 템플릿 |
| `is_active` | BOOLEAN | 활성 여부 |
### 17.2 카테고리
#### DB 카테고리 (ApprovalForm.category)
| 카테고리 | 설명 | 양식 코드 |
|---------|------|----------|
| `request` | 신청서 | `leave`, `attendance_request`, `reason_report` |
| `expense` | 지출결의서 | `expense` |
| `certificate` | 증명서/서류 | `employment_cert`, `career_cert`, `appointment_cert`, `resignation` |
| `expense_estimate` | 품의서 | `pr_expense`, `pr_contract`, `pr_purchase`, `pr_trip`, `pr_settlement` |
#### UI 분류 (formCategoryMap — 2단계 선택용)
| UI 분류 | 양식 코드 |
|---------|----------|
| 일반 | `BUSINESS_DRAFT` |
| 인사/근태 | `leave`, `attendance_request`, `reason_report`, `resignation` |
| 증명서 | `employment_cert`, `career_cert`, `appointment_cert` |
| 품의 | `pr_expense`, `pr_contract`, `pr_purchase`, `pr_trip`, `pr_settlement` |
| 재무 | `expense` |
> **참고**: DB 카테고리와 UI 분류는 별도 매핑이다. DB는 `approval_forms.category` ENUM이고, UI 분류는 JavaScript `formCategoryMap` 객체로 정의된다.
---
## 18. 양식별 저장/조회 흐름
### 18.1 저장 (create/update)
```
사용자 입력
↓
getFormData() (JavaScript)
↓
POST /api/admin/approvals
body: { form_id, title, content: {...}, body, steps: [...] }
↓
ApprovalService::createApproval()
↓
Approval.content = JSON encode → DB 저장
```
### 18.2 조회 (show)
```
GET /approval-mgmt/{id}
↓
ApprovalController::show()
↓
Blade: show.blade.php
↓
양식 코드별 분기:
leave → (본문에 인라인 표시)
expense → @include('_expense-show')
pr_* → @include('_purchase-request-show') ← str_starts_with 매칭
employment_cert → @include('_certificate-show')
career_cert → @include('_career-cert-show')
appointment_cert → @include('_appointment-cert-show')
resignation → @include('_resignation-show')
```
> **품의서 분기**: `str_starts_with($approval->form?->code ?? '', 'pr_')` 조건으로 5종 모두 단일 include로 처리. `_purchase-request-show.blade.php` 내부에서 `$content['pr_type']`으로 세부 분기.
---
## 관련 문서
- [README.md](README.md) — 결재관리 시스템 전체 개요
- [워크플로우 상세](workflows.md) — 승인/반려/회수/보류/전결 흐름
- [API 명세](api-reference.md) — 엔드포인트별 요청/응답
- [UI 화면 구성](ui-screens.md) — 화면별 UI 요소 및 동작
---
**최종 업데이트**: 2026-03-06

381
sam/docs/features/approvals/ui-screens.md
View File

@@ -1,381 +0,0 @@
# 결재관리 UI 화면 구성
> **작성일**: 2026-02-28
> **상태**: Phase 2 구현 완료
> **기술**: Blade + HTMX + Alpine.js + Tailwind CSS
> **관련**: [README.md](README.md) | [워크플로우](workflows.md) | [API 명세](api-reference.md)
---
## 1. 개요
결재관리 화면은 MNG(관리자 웹)에서 Blade 템플릿으로 구현되며, API 호출은 `fetch()`를 사용한다.
### 1.1 파일 구조
```
resources/views/approvals/
├── drafts.blade.php ← 기안함 (목록)
├── pending.blade.php ← 결재 대기함 (목록)
├── completed.blade.php ← 처리 완료함 (목록)
├── references.blade.php ← 참조함 (목록)
├── create.blade.php ← 기안 작성
├── edit.blade.php ← 기안 수정
├── show.blade.php ← 상세 조회 + 결재 처리
└── partials/
├── _status-badge.blade.php ← 상태 뱃지 컴포넌트
└── _step-progress.blade.php ← 결재 단계 진행 표시
```
---
## 2. 목록 화면
### 2.1 기안함 (`/approval-mgmt/drafts`)
내가 기안한 모든 문서를 표시한다.
**UI 구성:**
```
┌──────────────────────────────────────────────────────────┐
│ 기안함 [+ 새 기안] │
├──────────────────────────────────────────────────────────┤
│ [검색] [상태 필터 ▼] [긴급만 □] [날짜 범위] │
├──────────────────────────────────────────────────────────┤
│ 문서번호 │ 제목 │ 양식 │ 상태 │ 기안일 │
│ APR-260228-001│ 휴가 신청 │ 휴가서 │ 🟢완료 │ 02-28 │
│ APR-260228-002│ 출장 보고 │ 출장서 │ 🔵진행 │ 02-28 │
│ APR-260227-001│ 경비 청구 │ 경비서 │ ⬜임시 │ 02-27 │
├──────────────────────────────────────────────────────────┤
│ [◀ 이전] 1 / 3 [다음 ▶] │
└──────────────────────────────────────────────────────────┘
```
**상태 필터:** 전체, 임시저장, 진행, 완료, 반려, 회수, 보류
---
### 2.2 결재 대기함 (`/approval-mgmt/pending`)
내가 현재 결재해야 할 문서를 표시한다.
**UI 구성:**
```
┌──────────────────────────────────────────────────────────┐
│ 결재 대기함 [뱃지: 3건] │
├──────────────────────────────────────────────────────────┤
│ 문서번호 │ 제목 │ 기안자 │ 양식 │ 상신일 │
│ 🔴 APR-260..│ 긴급 승인 │ 홍길동 │ 구매서 │ 02-28 │
│ APR-260..│ 휴가 신청 │ 김영희 │ 휴가서 │ 02-27 │
└──────────────────────────────────────────────────────────┘
```
> 긴급 문서는 🔴 아이콘과 함께 상단에 표시
---
### 2.3 참조함 (`/approval-mgmt/references`)
내가 참조자로 지정된 문서를 표시한다.
**UI 구성:**
```
┌──────────────────────────────────────────────────────────┐
│ 참조함 │
├──────────────────────────────────────────────────────────┤
│ [전체] [미열람 (5)] [열람완료] │
├──────────────────────────────────────────────────────────┤
│ 문서번호 │ 제목 │ 기안자 │ 상태 │ 열람 │
│ APR-260228-001│ 회의록 │ 박부장 │ 🟢완료 │ ❌미열람│
│ APR-260227-003│ 인사발령 │ 이팀장 │ 🔵진행 │ ✅열람 │
└──────────────────────────────────────────────────────────┘
```
**열람 추적:**
- 문서 클릭 시 `mark-read` API가 자동 호출된다
- 미열람/열람완료 탭으로 필터링 가능
- 미열람 건수가 뱃지로 표시된다
---
## 3. 상세 화면 (`/approval-mgmt/{id}`)
### 3.1 전체 레이아웃
```
┌──────────────────────────────────────────────────────────┐
│ 결재 상세 [수정] [목록으로] │
│ APR-260228-001 │
├──────────────────────────────────────────────────────────┤
│ │
│ 상태: [🔵 진행] [🔴 긴급] │
│ 양식: 휴가신청서 기안자: 홍길동 │
│ 기안일: 2026-02-28 10:05 완료일: - │
│ 원본 문서: APR-260225-003 (재기안 시 표시) │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 회수 사유 (cancelled 상태에서만) │ │
│ │ 내용 수정이 필요하여 회수합니다. │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ 제목: 2월 연차 사용 신청 │
│ 본문: 2월 27일~28일 연차 사용합니다... │
│ │
├──────────────────────────────────────────────────────────┤
│ │
│ 결재 진행 │
│ ┌────────────────────────────────────────────────┐ │
│ │ [결재 단계 프로그레스 바] │ │
│ │ ✓김과장(승인) → ●박부장(대기) → ③이사(대기) │ │
│ └────────────────────────────────────────────────┘ │
│ │
│ 결재 의견 │
│ ┌────────────────────────────────────────────────┐ │
│ │ ✓ 김과장 2026-02-28 11:00 │ │
│ │ 승인합니다. │ │
│ └────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────┤
│ │
│ 결재 처리 (현재 결재자에게만 표시) │
│ [결재 의견 textarea] │
│ [승인] [반려] [보류] [전결] │
│ │
├──────────────────────────────────────────────────────────┤
│ 보류 해제 (on_hold + 보류한 본인에게만) │
│ [보류 해제] │
├──────────────────────────────────────────────────────────┤
│ 회수 (기안자 + pending/on_hold) │
│ [회수 사유 textarea] │
│ [결재 회수] │
├──────────────────────────────────────────────────────────┤
│ 복사 재기안 (기안자 + approved/rejected/cancelled) │
│ [복사하여 재기안] │
└──────────────────────────────────────────────────────────┘
```
### 3.2 조건부 섹션 표시
| 섹션 | 표시 조건 |
|------|----------|
| **수정 버튼** | 기안자 + `draft`/`rejected` |
| **회수 사유** | `cancelled` + `recall_reason` 존재 |
| **원본 문서 링크** | `parent_doc_id` 존재 (재기안 문서) |
| **결재 처리** | `pending` + 현재 결재자 |
| **보류 해제** | `on_hold` + 보류한 본인 |
| **회수** | 기안자 + `pending`/`on_hold` |
| **복사 재기안** | 기안자 + `approved`/`rejected`/`cancelled` |
---
## 4. 파셜 컴포넌트
### 4.1 상태 뱃지 (`_status-badge.blade.php`)
문서 상태를 색상 뱃지로 표시한다.
| 상태 | 라벨 | 스타일 |
|------|------|--------|
| `draft` | 임시저장 | `bg-gray-100 text-gray-700` |
| `pending` | 진행 | `bg-blue-100 text-blue-700` |
| `approved` | 완료 | `bg-green-100 text-green-700` |
| `rejected` | 반려 | `bg-red-100 text-red-700` |
| `cancelled` | 회수 | `bg-yellow-100 text-yellow-700` |
| `on_hold` | 보류 | `bg-amber-100 text-amber-700` |
---
### 4.2 결재 단계 프로그레스 (`_step-progress.blade.php`)
결재선의 각 단계를 가로 프로그레스 바로 표시한다.
**단계 아이콘:**
| 상태 | 아이콘 | 배경색 | 텍스트색 |
|------|--------|--------|---------|
| `approved` (normal) | ✓ | `bg-green-500` | white |
| `approved` (pre_decided) | ⚡ | `bg-indigo-500` | white |
| `rejected` | ✗ | `bg-red-500` | white |
| `on_hold` | ⏸ | `bg-amber-400` | white |
| `skipped` | — | `bg-gray-300` | gray |
| `pending` (현재 차례) | 번호 | `bg-blue-500` | white |
| `pending` (대기) | 번호 | `bg-gray-200` | gray |
**레이아웃:**
```
┌──────────────────────────────────────────────────────┐
│ │
│ ✓ ──── ⚡ ──── — ──── — ──── ● ──── 3 │
│ 김과장 박부장 이사장 팀장 최대리 참조자 │
│ 경영팀 경영팀 대표실 개발팀 개발팀 인사팀 │
│ (승인) (전결) (건너뜀)(건너뜀)(대기) (참조) │
│ │
└──────────────────────────────────────────────────────┘
```
**특수 표시:**
- **전결** step: ⚡ 아이콘 + "전결" 라벨 (남색)
- **보류** step: ⏸ 아이콘 + "보류" 라벨 (노란색)
- **건너뜀** step: 이름에 취소선 (line-through)
- **참조** step: 별도 구분 없이 동일 프로그레스 바에 표시
- **연결선**: 단계 사이 가로선 (`border-t-2`)
---
## 5. 결재 처리 인터랙션
### 5.1 승인
```
[승인 버튼 클릭]
→ confirm("승인하시겠습니까?")
→ POST /api/admin/approvals/{id}/approve
body: { comment: "의견 텍스트" }
→ 성공 시: 토스트("승인되었습니다") + 페이지 리로드
```
### 5.2 반려
```
[반려 버튼 클릭]
→ comment 빈 값 체크 → 경고 토스트("반려 시 사유를 입력해주세요")
→ confirm("반려하시겠습니까?")
→ POST /api/admin/approvals/{id}/reject
body: { comment: "사유" }
→ 성공 시: 토스트("반려되었습니다") + 페이지 리로드
```
### 5.3 보류
```
[보류 버튼 클릭]
→ comment 빈 값 체크 → 경고 토스트("보류 사유를 입력해주세요")
→ confirm("이 결재를 보류하시겠습니까?")
→ POST /api/admin/approvals/{id}/hold
body: { comment: "사유" }
→ 성공 시: 토스트("보류되었습니다") + 페이지 리로드
```
### 5.4 전결
```
[전결 버튼 클릭]
→ confirm("전결 처리하시겠습니까?\n이후 모든 결재를 건너뛰고 문서를 최종 승인합니다.")
→ POST /api/admin/approvals/{id}/pre-decide
body: { comment: "의견(선택)" }
→ 성공 시: 토스트("전결 처리되었습니다") + 페이지 리로드
```
### 5.5 보류 해제
```
[보류 해제 버튼 클릭]
→ confirm("보류를 해제하시겠습니까?")
→ POST /api/admin/approvals/{id}/release-hold
→ 성공 시: 토스트("보류가 해제되었습니다") + 페이지 리로드
```
### 5.6 회수
```
[결재 회수 버튼 클릭]
→ confirm("결재를 회수하시겠습니까? 이 작업은 되돌릴 수 없습니다.")
→ POST /api/admin/approvals/{id}/cancel
body: { recall_reason: "사유(선택)" }
→ 성공 시: 토스트("결재가 회수되었습니다") + 페이지 리로드
```
### 5.7 복사 재기안
```
[복사하여 재기안 버튼 클릭]
→ confirm("이 문서를 복사하여 새 결재를 작성하시겠습니까?")
→ POST /api/admin/approvals/{id}/copy
→ 성공 시: 토스트("문서가 복사되었습니다")
→ /approval-mgmt/{newId}/edit로 이동
```
---
## 6. 결재 의견 표시
상세 페이지에서 결재 의견이 있는 step을 카드 형태로 표시한다.
```
┌──────────────────────────────────────┐
│ ✓ 김과장 2026-02-28 11:00 │
│ 승인합니다. │
├──────────────────────────────────────┤
│ ⚡ 박부장 (전결) 2026-02-28 14:00 │
│ 전결 처리합니다. │
├──────────────────────────────────────┤
│ ⏸ 이사장 (보류) 2026-02-28 15:00 │
│ 추가 자료 검토 필요 │
├──────────────────────────────────────┤
│ ✗ 팀장 2026-02-28 16:00 │
│ 예산 초과로 반려합니다. │
└──────────────────────────────────────┘
```
**아이콘 색상:**
- ✓ 승인: 녹색 (`bg-green-100 text-green-600`)
- ⚡ 전결: 남색 (`bg-indigo-100 text-indigo-600`)
- ⏸ 보류: 노란색 (`bg-amber-100 text-amber-600`)
- ✗ 반려: 적색 (`bg-red-100 text-red-600`)
---
## 7. 참조함 열람 추적 UI
### 7.1 탭 필터
```
[전체] [미열람 (5)] [열람완료]
```
- 탭 클릭 시 `is_read` 파라미터로 API 재호출
- 미열람 탭에 건수 뱃지 표시
### 7.2 열람 상태 표시
| 상태 | 표시 |
|------|------|
| 미열람 | `bg-red-100 text-red-700` "미열람" |
| 열람완료 | `bg-green-100 text-green-700` "열람완료" |
### 7.3 자동 열람 처리
문서 행 클릭 시:
1. `mark-read` API 호출 (비동기)
2. 상세 페이지로 이동
---
## 8. 버튼 스타일 가이드
| 버튼 | 색상 | Tailwind 클래스 |
|------|------|----------------|
| 승인 | 녹색 | `bg-green-600 hover:bg-green-700` |
| 반려 | 적색 | `bg-red-600 hover:bg-red-700` |
| 보류 | 노란색 | `bg-amber-500 hover:bg-amber-600` |
| 전결 | 남색 | `bg-indigo-600 hover:bg-indigo-700` |
| 보류 해제 | 노란색 | `bg-amber-500 hover:bg-amber-600` |
| 회수 | 노란색 | `bg-yellow-500 hover:bg-yellow-600` |
| 복사 재기안 | 회색 | `bg-gray-600 hover:bg-gray-700` |
| 수정 | 회색 | `bg-gray-600 hover:bg-gray-700` |
---
## 관련 문서
- [README.md](README.md) — 시스템 전체 개요
- [워크플로우 상세](workflows.md) — 각 동작의 상세 흐름
- [API 명세](api-reference.md) — 엔드포인트별 요청/응답
---
**최종 업데이트**: 2026-02-28

565
sam/docs/features/approvals/workflows.md
View File

@@ -1,565 +0,0 @@
# 결재관리 워크플로우 상세
> **작성일**: 2026-02-28
> **상태**: Phase 2 구현 완료
> **관련**: [README.md](README.md) | [API 명세](api-reference.md) | [UI 화면](ui-screens.md)
---
## 1. 개요
이 문서는 결재관리 시스템의 각 동작(Action)에 대한 상세 워크플로우를 정의한다.
모든 워크플로우는 `ApprovalService`에서 트랜잭션으로 처리된다.
### 1.1 용어 정의
| 용어 | 설명 |
|------|------|
| **기안자** | 결재 문서를 작성한 사람 (`drafter_id`) |
| **현재 결재자** | 결재선에서 현재 차례인 사람 (가장 작은 `step_order`의 `pending` step) |
| **결재자** | `step_type`이 `approval` 또는 `agreement`인 참여자 |
| **참조자** | `step_type`이 `reference`인 참여자 (의사결정 권한 없음) |
| **전결** | 현재 결재자가 이후 모든 결재를 건너뛰고 즉시 최종 승인 |
---
## 2. 기안 작성 (createApproval)
### 2.1 흐름
```
사용자 → [양식 선택] → [제목/본문 입력] → [결재선 설정] → [임시저장]
│
▼
새 Approval 생성
status = 'draft'
current_step = 0
```
### 2.2 조건
- 모든 로그인 사용자가 작성 가능
- `form_id` 필수 (양식 선택)
- 결재선(steps)은 저장 시 선택사항 (상신 시 필수)
### 2.3 처리 로직
1. 문서번호 자동 채번 (`APR-YYMMDD-001` 형식)
2. `numbering_sequences` 테이블로 일일 순번 관리
3. 결재선 설정 시 `approval_steps` 저장 + 사용자 정보 스냅샷 (이름, 부서, 직급)
4. `status = 'draft'`, `current_step = 0`
---
## 3. 상신 (submit)
### 3.1 흐름
```
기안자 → [상신 버튼] → 유효성 검사 → 결재선 검사 → 상신 완료
│
▼
status = 'pending'
current_step = 1
drafted_at = now()
```
### 3.2 조건
| 조건 | 설명 |
|------|------|
| 문서 상태 | `draft` 또는 `rejected` |
| 결재선 | 결재/합의 step 1명 이상 필수 |
| 요청자 | 기안자만 |
### 3.3 처리 로직
1. `isSubmittable()` 검증 → `draft` 또는 `rejected`인지 확인
2. 결재/합의 step 존재 확인
3. **반려 후 재상신인 경우**: 모든 step을 `pending`으로 초기화 (comment, acted_at도 초기화)
4. `status → pending`, `drafted_at → now()`, `current_step → 1`
### 3.4 반려 후 재상신
```
rejected 문서
│
├── 기안자가 내용 수정 (updateApproval)
│
└── 상신 (submit)
├── 모든 steps → pending (초기화)
├── status → pending
└── current_step → 1 (처음부터 다시)
```
> 반려 후 재상신 시 결재선이 초기화되므로, 이전 결재 의견(comment)은 사라진다.
---
## 4. 승인 (approve)
### 4.1 흐름
```
현재 결재자 → [의견 입력(선택)] → [승인 버튼]
│
┌──────────┴──────────┐
│ 현재 step │
│ status → 'approved' │
│ comment → (입력값) │
│ acted_at → now() │
└──────────┬──────────┘
│
┌─────────────────┴─────────────────┐
│ │
다음 pending step 있음 마지막 결재자
│ │
current_step 갱신 status → 'approved'
(다음 순서 결재자 대기) completed_at → now()
```
### 4.2 조건
| 조건 | 설명 |
|------|------|
| 문서 상태 | `pending` |
| 요청자 | 현재 차례 결재자 (`approver_id === auth()->id()`) |
### 4.3 처리 로직
1. `isActionable()` 검증 → `pending` 상태인지 확인
2. `getCurrentApproverStep()` → 현재 차례 step 조회
3. 현재 step → `approved` + comment + acted_at
4. 다음 pending 결재/합의 step 조회
- **있으면**: `current_step` 갱신
- **없으면**: 문서 `approved` + `completed_at`
### 4.4 순차결재 순서 결정
```
step_order = 1 (결재) → step_order = 2 (합의) → step_order = 3 (결재)
│ │ │
1번째 승인 → 2번째 승인 → 3번째 승인 → 문서 완료
```
> 결재와 합의는 동일한 순차 흐름을 따른다. `step_order` 순서대로 처리된다.
---
## 5. 반려 (reject)
### 5.1 흐름
```
현재 결재자 → [반려 사유 입력(필수)] → [반려 버튼]
│
┌──────────┴──────────┐
│ 현재 step │
│ status → 'rejected' │
│ comment → (사유) │
│ acted_at → now() │
└──────────┬──────────┘
│
▼
문서 status → 'rejected'
completed_at → now()
```
### 5.2 조건
| 조건 | 설명 |
|------|------|
| 문서 상태 | `pending` |
| 요청자 | 현재 차례 결재자 |
| 반려 사유 | **필수** (빈 값 불가) |
### 5.3 처리 로직
1. `isActionable()` 검증
2. 현재 결재자 확인
3. 반려 사유 빈 값 체크
4. 현재 step → `rejected` + comment + acted_at
5. 문서 → `rejected` + completed_at
### 5.4 반려 후 가능한 동작
```
rejected 문서
│
├── 기안자가 수정 → 재상신 (submit)
│ └── 결재선 초기화, 처음부터 다시 진행
│
└── 기안자가 복사 재기안 (copyForRedraft)
└── 새 문서 생성 (draft), 원본은 그대로 유지
```
---
## 6. 회수 (cancel)
### 6.1 흐름
```
기안자 → [회수 사유 입력(선택)] → [회수 버튼]
│
┌──────────┴──────────┐
│ 회수 가능 여부 판단 │
│ (첫 결재자 미처리?) │
└──────────┬──────────┘
│
┌───────────┴───────────┐
│ │
첫 결재자 첫 결재자 이미
pending/on_hold 승인/반려
│ │
회수 진행 회수 불가
│ (에러 반환)
▼
모든 pending/on_hold steps → 'skipped'
문서 status → 'cancelled'
recall_reason → (입력값)
completed_at → now()
```
### 6.2 조건
| 조건 | 설명 |
|------|------|
| 문서 상태 | `pending` 또는 `on_hold` |
| 요청자 | 기안자만 (`drafter_id === auth()->id()`) |
| 첫 결재자 상태 | `pending` 또는 `on_hold` (이미 처리했으면 불가) |
### 6.3 회수 가능 판단 로직
```php
// 1단계: 문서 상태 확인
$approval->isCancellable() // pending 또는 on_hold
// 2단계: 기안자 확인
$approval->drafter_id === auth()->id()
// 3단계: 첫 결재자 상태 확인
$firstStep = steps.approvalOnly().orderBy('step_order').first()
$firstStep->status === 'pending' || 'on_hold' // 미처리 상태여야 함
```
### 6.4 처리 로직
1. `isCancellable()` 검증 → `pending` 또는 `on_hold`
2. 기안자 확인
3. 첫 번째 결재/합의 step의 상태 확인 → `pending`/`on_hold`이 아니면 거부
4. 모든 `pending`/`on_hold` steps → `skipped`
5. 문서 → `cancelled` + `recall_reason` + `completed_at`
---
## 7. 보류 (hold)
### 7.1 흐름
```
현재 결재자 → [보류 사유 입력(필수)] → [보류 버튼]
│
┌──────────┴──────────┐
│ 현재 step │
│ status → 'on_hold' │
│ comment → (사유) │
│ acted_at → now() │
└──────────┬──────────┘
│
▼
문서 status → 'on_hold'
```
### 7.2 조건
| 조건 | 설명 |
|------|------|
| 문서 상태 | `pending` (`isHoldable()`) |
| 요청자 | 현재 차례 결재자 |
| 보류 사유 | **필수** (빈 값 불가) |
### 7.3 처리 로직
1. `isHoldable()` 검증 → `pending` 상태인지 확인
2. `getCurrentApproverStep()` → 현재 차례 step 조회
3. 현재 결재자 확인 (`approver_id === auth()->id()`)
4. 보류 사유 빈 값 체크
5. 현재 step → `on_hold` + comment + acted_at
6. 문서 → `on_hold`
### 7.4 보류 상태의 영향
```
on_hold 상태에서:
├── 다른 결재자는 아무 동작 불가 (결재 흐름 중단)
├── 기안자는 회수 가능 (첫 결재자가 미처리 상태이면)
└── 보류한 결재자만 보류 해제 가능
```
---
## 8. 보류 해제 (releaseHold)
### 8.1 흐름
```
보류한 결재자 → [보류 해제 버튼]
│
┌──────────┴──────────┐
│ on_hold step │
│ status → 'pending' │
│ comment → null │
│ acted_at → null │
└──────────┬──────────┘
│
▼
문서 status → 'pending'
(결재 흐름 재개)
```
### 8.2 조건
| 조건 | 설명 |
|------|------|
| 문서 상태 | `on_hold` (`isHoldReleasable()`) |
| 요청자 | 보류한 본인만 (`on_hold` step의 `approver_id === auth()->id()`) |
### 8.3 처리 로직
1. `isHoldReleasable()` 검증 → `on_hold` 상태인지 확인
2. `on_hold` 상태인 step 조회
3. 해당 step의 `approver_id`가 현재 사용자인지 확인
4. step → `pending` + comment/acted_at 초기화
5. 문서 → `pending`
---
## 9. 전결 (preDecide)
### 9.1 흐름
```
현재 결재자 → [의견 입력(선택)] → [전결 버튼] → 확인 팝업
│
┌──────────┴──────────┐
│ 현재 step │
│ status → 'approved' │
│ approval_type → │
│ 'pre_decided' │
│ comment → (입력값) │
│ acted_at → now() │
└──────────┬──────────┘
│
▼
이후 모든 pending
approval/agreement steps
→ status = 'skipped'
│
▼
문서 status → 'approved'
completed_at → now()
```
### 9.2 조건
| 조건 | 설명 |
|------|------|
| 문서 상태 | `pending` (`isActionable()`) |
| 요청자 | 현재 차례 결재자 |
### 9.3 처리 로직
1. `isActionable()` 검증
2. `getCurrentApproverStep()` → 현재 차례 step 조회
3. 현재 결재자 확인
4. 현재 step → `approved` + `approval_type = 'pre_decided'` + comment + acted_at
5. 이후 모든 pending 결재/합의 steps → `skipped`
6. 문서 → `approved` + `completed_at`
### 9.4 전결 예시
```
step_order=1 (이사장, 결재) → approved (normal)
step_order=2 (부장, 결재) → approved (pre_decided) ← 여기서 전결
step_order=3 (과장, 합의) → skipped (전결로 건너뜀)
step_order=4 (팀장, 결재) → skipped (전결로 건너뜀)
step_order=5 (참조자, 참조) → (참조는 영향 없음, 그대로 유지)
문서 → approved, completed_at = now()
```
> 전결은 결재/합의 step만 건너뛴다. 참조 step은 영향받지 않는다.
---
## 10. 복사 재기안 (copyForRedraft)
### 10.1 흐름
```
기안자 → [복사하여 재기안 버튼]
│
▼
┌─────────────────────────────┐
│ 원본 문서에서 복사 │
│ ├── form_id │
│ ├── title │
│ ├── content (양식 데이터) │
│ ├── body │
│ ├── is_urgent │
│ ├── department_id │
│ └── 결재선 (모두 pending) │
└─────────────┬───────────────┘
│
▼
새 문서 생성 (status = 'draft')
parent_doc_id = 원본.id
새 문서번호 채번
│
▼
수정 페이지로 이동
(/approval-mgmt/{newId}/edit)
```
### 10.2 조건
| 조건 | 설명 |
|------|------|
| 원본 문서 상태 | `approved`, `rejected`, `cancelled` (`isCopyable()`) |
| 요청자 | 기안자만 (`drafter_id === auth()->id()`) |
### 10.3 처리 로직
1. `isCopyable()` 검증 → `approved`/`rejected`/`cancelled` 중 하나
2. 기안자 확인
3. 새 문서 생성:
- 새 문서번호 채번
- 원본의 양식, 제목, 내용, 본문, 긴급 여부, 부서 복사
- `parent_doc_id = 원본.id`
- `status = 'draft'`, `current_step = 0`
4. 결재선 복사: 원본의 모든 steps를 새 문서에 복사 (모두 `pending` 상태)
5. 새 문서의 edit 페이지로 리다이렉트
### 10.4 원본과의 관계
```
원본 문서 (approved/rejected/cancelled)
│
└── parent_doc_id로 연결
│
▼
새 문서 (draft)
├── 상세 페이지에서 "원본 문서" 링크 표시
└── 기안자가 내용 수정 후 상신 가능
```
---
## 11. 참조 열람 추적 (markAsRead)
### 11.1 흐름
```
참조자 → [참조함 목록에서 문서 클릭]
│
├── markAsRead API 호출
│ ├── is_read → true
│ └── read_at → now()
│
└── 상세 페이지로 이동
```
### 11.2 조건
| 조건 | 설명 |
|------|------|
| 요청자 | 해당 문서의 참조자 (`step_type = 'reference'`) |
### 11.3 처리 로직
1. 현재 사용자의 참조 step 조회
2. `is_read = false`인 step → `is_read = true`, `read_at = now()`
3. 이미 열람한 경우 중복 업데이트 없음 (`where('is_read', false)`)
---
## 12. 전체 상태 전이 요약
```
┌───────────────────────────────────────────────────────────────────┐
│ │
│ draft ──submit()──→ pending ──approve()──→ (다음 step 또는) │
│ ▲ │ │ approved │
│ │ │ │ │
│ │ │ ├──reject()──→ rejected │
│ │ │ │ │ │
│ │ │ │ ├── 수정 → submit() │
│ │ │ │ │ (재상신, draft X) │
│ │ │ │ │ │
│ │ │ │ └── copyForRedraft() │
│ │ │ │ → 새 draft 생성 │
│ │ │ │ │
│ │ │ ├──hold()──→ on_hold │
│ │ │ │ │ │
│ │ │ │ ├── releaseHold() │
│ │ │ │ │ → pending 복원 │
│ │ │ │ │ │
│ │ │ │ └── cancel() (기안자) │
│ │ │ │ → cancelled │
│ │ │ │ │
│ │ │ ├──preDecide()──→ approved │
│ │ │ │ (이후 steps → skipped) │
│ │ │ │ │
│ │ │ └──cancel()──→ cancelled │
│ │ │ (기안자, 첫결재자 미처리 시) │
│ │ │ │ │
│ │ │ └── copyForRedraft() │
│ │ │ → 새 draft 생성 │
│ │ │ │
│ │ └── approved ──copyForRedraft() │
│ │ → 새 draft 생성 │
│ │ │
│ └── updateApproval() (draft/rejected 상태에서 수정) │
│ │
└───────────────────────────────────────────────────────────────────┘
```
---
## 13. 에러 케이스 정리
| 동작 | 에러 조건 | 에러 메시지 |
|------|----------|------------|
| submit | 상태가 draft/rejected 아님 | "상신할 수 없는 상태입니다." |
| submit | 결재선 없음 | "결재선을 설정해주세요." |
| approve | 상태가 pending 아님 | "승인할 수 없는 상태입니다." |
| approve | 현재 결재자 아님 | "현재 결재자가 아닙니다." |
| reject | 상태가 pending 아님 | "반려할 수 없는 상태입니다." |
| reject | 사유 미입력 | "반려 사유를 입력해주세요." |
| cancel | 상태가 pending/on_hold 아님 | "회수할 수 없는 상태입니다." |
| cancel | 기안자 아님 | "기안자만 회수할 수 있습니다." |
| cancel | 첫 결재자 이미 처리 | "첫 번째 결재자가 이미 처리하여 회수할 수 없습니다." |
| hold | 상태가 pending 아님 | "보류할 수 없는 상태입니다." |
| hold | 현재 결재자 아님 | "현재 결재자가 아닙니다." |
| hold | 사유 미입력 | "보류 사유를 입력해주세요." |
| releaseHold | 상태가 on_hold 아님 | "보류 해제할 수 없는 상태입니다." |
| releaseHold | 보류한 본인 아님 | "보류한 결재자만 해제할 수 있습니다." |
| preDecide | 상태가 pending 아님 | "전결할 수 없는 상태입니다." |
| preDecide | 현재 결재자 아님 | "현재 결재자가 아닙니다." |
| copyForRedraft | 상태가 approved/rejected/cancelled 아님 | "복사할 수 없는 상태입니다." |
| copyForRedraft | 기안자 아님 | "기안자만 복사할 수 있습니다." |
| update | 상태가 draft/rejected 아님 | "수정할 수 없는 상태입니다." |
| delete | 상태가 draft 아님 | "삭제할 수 없는 상태입니다." |
---
## 관련 문서
- [README.md](README.md) — 시스템 전체 개요
- [API 명세](api-reference.md) — 엔드포인트별 요청/응답
- [UI 화면 구성](ui-screens.md) — 화면별 동작
---
**최종 업데이트**: 2026-02-28

410
sam/docs/features/barobill-kakaotalk/README.md
View File

@@ -1,410 +0,0 @@
# 바로빌 카카오톡 (알림톡/친구톡) 연동
> **문서 버전**: 1.1
> **작성일**: 2026-02-14
> **최종 수정**: 2026-02-27
> **상태**: 운영 중 (알림톡 + SMS + 환경별 분기 완료)
> **대상 프로젝트**: MNG
---
## 1. 개요
### 1.1 목적
바로빌(Barobill) 플랫폼의 카카오톡 알림톡/친구톡 API를 SAM에 연동하여,
고객사에 카카오톡 메시지를 자동 또는 수동으로 발송하는 기능을 제공한다.
### 1.2 사전 요구사항
| 항목 | 상태 | 설명 |
|------|------|------|
| 법인 명의 휴대폰 준비 | **완료** | 카카오톡 채널 가입에 법인 명의 번호 사용 |
| 카카오톡 채널 개설 | **완료** (2026-02-20) | 채널 ID: `@codebridge`, 채널명: (주)코드브릿지엑스 |
| 바로빌 카카오톡 서비스 신청 | **완료** (2026-02-20) | 바로빌 관리자 페이지에서 카카오톡 서비스 활성화 |
| 채널 연동 (바로빌↔카카오) | **완료** (2026-02-20) | 바로빌 관리 URL에서 채널 연동 처리 |
| 바로빌 파트너 과금 설정 | **완료** (2026-02-23) | 바로빌 측에서 파트너사 과금 설정 완료 |
| 알림톡 템플릿 v1 검수 | **완료** (2026-02-22) | `전자계약_서명요청`, `전자계약_리마인드` 2종 승인 |
| 알림톡 템플릿 v2 검수 | **완료** (2026-02-25) | 버튼 URL에 `#{토큰}` 변수 포함 3종 승인 |
| 알림톡 `전자계약_완료` | **완료** (2026-02-26) | 서명 완료 알림 발송용 템플릿 승인 |
| 역할 기반 알림 분기 | **완료** (2026-02-26) | 본사=이메일, 상대방=알림톡/SMS |
| 환경별 템플릿 분기 | **완료** (2026-02-27) | `_DEV` 접미사 개발 템플릿 등록 |
| DEV 템플릿 검수 | **심사 중** (2026-02-27 접수) | 개발서버용 3종 (`admin.codebridge-x.com`) |
> 상세 등록 가이드: [카카오톡 알림톡 채널 및 템플릿 등록 가이드](../../guides/카카오톡-알림톡-채널-템플릿-등록.md)
### 1.3 알림톡 vs 친구톡
| 구분 | 알림톡 | 친구톡 |
|------|--------|--------|
| **용도** | 정보성 메시지 (주문확인, 배송안내 등) | 광고성 메시지 (프로모션, 이벤트 등) |
| **수신 대상** | 모든 카카오톡 사용자 | 채널 친구 추가한 사용자만 |
| **템플릿** | 필수 (카카오 사전 검수) | 불필요 (자유 형식) |
| **광고 표시** | 불가 | 필수 (`(광고)` 표기) |
| **이미지 첨부** | 불가 | 가능 (이미지/와이드 이미지) |
| **비용** | 건당 약 8~9원 | 건당 약 15~20원 |
| **SMS 대체발송** | 설정 가능 | 설정 가능 |
---
## 2. 아키텍처
### 2.1 시스템 구조
```
SAM MNG (브라우저)
│
├─ [페이지] /barobill/kakaotalk/* ← Blade 뷰
│ KakaotalkController (페이지 렌더링)
│
├─ [API] /api/admin/barobill/kakaotalk/* ← AJAX 호출
│ BarobillKakaotalkController
│
└─ [전자계약] /esign/* ← 자동 발송
EsignApiController::sendAlimtalk()
│
└─ BarobillService (SOAP 클라이언트)
│
└─ 바로빌 KAKAOTALK.asmx (WSDL)
│
└─ 카카오톡 서버
```
### 2.2 바로빌 SOAP API 엔드포인트
| 환경 | WSDL URL |
|------|----------|
| **테스트** | `https://testws.baroservice.com/KAKAOTALK.asmx?WSDL` |
| **운영** | `https://ws.baroservice.com/KAKAOTALK.asmx?WSDL` |
---
## 3. 전자계약 알림톡 연동 (핵심)
### 3.1 발송 흐름
```
전자계약 생성 (E-Sign)
│
├─ [1단계] EsignApiController::sendAlimtalk()
│ │
│ ├─ 채널 ID 조회 (getKakaotalkChannelId)
│ ├─ 템플릿 본문 + 버튼 조회 (getTemplateData)
│ ├─ 변수 치환 (#{이름}, #{계약명}, #{기한})
│ └─ SendATKakaotalkEx 호출
│
├─ [2단계] 바로빌 접수 → SendKey 반환
│
├─ [3단계] 3초 대기 후 GetSendKakaotalk으로 전달 결과 확인
│ │
│ ├─ ResultCode = 1 → 성공
│ └─ ResultCode != 1 → 실패 (에러 반환)
│
└─ [이메일 폴백] 알림톡 실패 시 이메일로 자동 전환
```
### 3.2 등록된 템플릿 (v1 — 현재 운영)
**`전자계약_서명요청`**
```
안녕하세요, #{이름}님.
전자계약 서명 요청이 도착했습니다.
■ 계약명: #{계약명}
■ 서명 기한: #{기한}
아래 버튼을 눌러 계약서를 확인하고 서명해 주세요.
```
- 버튼: `계약서 확인하기` (WL)
- Url1/Url2: `https://mng.codebridge-x.com`
**`전자계약_리마인드`**
```
안녕하세요, #{이름}님.
아직 서명이 완료되지 않은 전자계약이 있습니다.
■ 계약명: #{계약명}
■ 서명 기한: #{기한}
기한 내에 서명을 완료해 주세요.
```
- 버튼: `계약서 확인하기` (WL)
- Url1/Url2: `https://mng.codebridge-x.com`
### 3.3 등록 예정 템플릿 (v2 — 심사 중)
> **2026-02-24 재등록**: 버튼 URL에 `#{토큰}` 변수를 포함하여 동적 서명 URL 지원
- Url1/Url2: `https://mng.codebridge-x.com/esign/sign/#{토큰}`
v2 승인 후 코드 변경 필요:
- `EsignApiController::sendAlimtalk()`에서 동적 `$signUrl`을 버튼 URL로 전달
- 현재 코드의 등록된 URL 그대로 사용 → 동적 URL 사용으로 전환
### 3.4 임시 우회: 로그인 페이지 서명 확인
v1 템플릿의 버튼 URL이 대시보드(`https://mng.codebridge-x.com`)로 고정되어 있어,
로그인 페이지에 전화번호 기반 서명 확인 기능을 추가하였다.
```
알림톡 버튼 클릭 → https://mng.codebridge-x.com → 로그인 페이지
│
└─ "전자계약 서명하기" 섹션
│
├─ 전화번호 입력
├─ POST /esign/verify-phone
└─ 대기 중인 계약 조회 → /esign/sign/{token} 리다이렉트
```
- 라우트: `POST /esign/verify-phone`
- 컨트롤러: `EsignPublicController::verifyPhone()`
- v2 템플릿 승인 후에도 유지 (비로그인 사용자 대응)
### 3.5 관련 파일
| 파일 | 역할 |
|------|------|
| `app/Http/Controllers/ESign/EsignApiController.php` | `sendAlimtalk()`, `getTemplateData()` |
| `app/Http/Controllers/ESign/EsignPublicController.php` | `verifyPhone()` 전화번호 확인 |
| `app/Services/Barobill/BarobillService.php` | SOAP 클라이언트, `sendATKakaotalkEx()` |
| `resources/views/auth/login.blade.php` | 로그인 페이지 서명 확인 UI |
| `routes/web.php` | `/esign/verify-phone` 라우트 |
---
## 4. 트러블슈팅 (실전 경험)
> **경고: 아래 내용은 실제 연동 과정에서 발견한 핵심 이슈다. 반드시 숙지할 것.**
### 4.1 바로빌 API 응답 구조
바로빌 SOAP 응답은 `stdClass` 객체로 반환된다. 배열이 아니므로 주의:
```php
// ❌ 잘못된 접근
$channels = $result['data']; // 배열이 아님
// ✅ 올바른 접근
$data = $result['data']; // stdClass
$channels = is_array($data->KakaotalkChannel)
? $data->KakaotalkChannel
: [$data->KakaotalkChannel]; // 1건이면 객체, N건이면 배열
```
### 4.2 SendKey vs ResultCode (2단계 검증 필수)
> **핵심**: 바로빌이 SendKey를 반환해도 **실제 카카오톡 전달이 실패할 수 있다.**
```
[1단계] SendATKakaotalkEx 호출
→ SendKey 반환 (예: BB_6648603713_AT_3044107_260224)
→ 이것은 "접수 성공"이지 "전달 성공"이 아님!
[2단계] 3초 후 GetSendKakaotalk(SendKey) 호출
→ ResultCode = 1: 전달 성공 ✅
→ ResultCode = 4: 템플릿 데이터 일치 오류 ❌
→ ResultCode != 1: 기타 실패 ❌
```
```php
// 반드시 2단계 검증 필요
if ($result['success'] && is_string($result['data'])) {
$sendKey = $result['data'];
sleep(3); // 카카오톡 전달 대기
$sendResult = $barobill->getSendKakaotalk($member->biz_no, $sendKey);
$resultCode = $sendResult['data']->ResultCode ?? null;
if ($resultCode != 1) {
// 실패 처리!
}
}
```
### 4.3 템플릿 URL 정확 일치 규칙
> **핵심**: 버튼 URL은 등록된 템플릿의 URL과 **정확히 일치**해야 한다. 1글자라도 다르면 실패.
| 등록된 URL | 전송 시 URL | 결과 |
|------------|------------|------|
| `https://mng.codebridge-x.com` | `https://mng.codebridge-x.com` | ResultCode=1 (성공) |
| `https://mng.codebridge-x.com` | `https://mng.codebridge-x.com/esign/sign/xxx` | ResultCode=4 (실패) |
| `https://mng.codebridge-x.com` | `https://mng.codebridge-x.com?sign=xxx` | ResultCode=4 (실패) |
| `https://mng.codebridge-x.com` | `https://mng.codebridge-x.com#sign=xxx` | ResultCode=4 (실패) |
- 경로 추가: 실패
- 쿼리 파라미터 추가: 실패
- URL 프래그먼트(#) 추가: 실패
- **동적 URL을 사용하려면 템플릿에 `#{변수}` 포함하여 재등록 필요**
### 4.4 SmsReply 오류 (-31325)
`SmsReply` 파라미터가 `'S'`(대체발송 사용)인데 `SmsSenderNum`이 비어있으면 `-31325` 오류 발생.
```php
// ❌ 오류 발생
'SmsReply' => empty($smsMessage) ? 'N' : 'S', // SmsSenderNum이 비어도 S로 설정
// ✅ 수정
'SmsReply' => (empty($smsMessage) || empty($smsSenderNum)) ? 'N' : 'S',
```
### 4.5 SOAP 파라미터 구조
바로빌 SOAP API의 파라미터 구조에 주의:
```php
// 올바른 구조
$params = [
'CorpNum' => $bizNo, // 사업자번호 (하이픈 포함: 123-45-67890)
'SenderID' => $barobillId, // 바로빌 계정 ID
'YellowId' => $channelId, // 카카오 채널 ID (@codebridge)
'TemplateName' => '전자계약_서명요청',
'SendDT' => '', // 즉시발송: 빈 문자열
'SmsReply' => 'N', // SMS 발신번호 없으면 반드시 'N'
'SmsSenderNum' => '',
'KakaotalkMessage' => [
'ReceiverName' => $name,
'ReceiverNum' => $phone, // 하이픈 없이: 01012345678
'Title' => '',
'Message' => $message, // 템플릿 변수 치환 완료된 본문
'SmsMessage' => '',
'SmsSubject' => '',
'Buttons' => ['KakaotalkButton' => $buttons], // 버튼 배열
],
];
```
### 4.6 에러 코드 정리
| 코드 | 메시지 | 원인 | 해결 |
|------|--------|------|------|
| 1 | 성공 | 정상 전달 | - |
| 4 | 템플릿 데이터 일치 오류 | 본문/버튼 URL이 등록 템플릿과 불일치 | 등록된 템플릿과 동일하게 전송 |
| -31325 | 대체문자 유형 오류 | SmsReply=S인데 SmsSenderNum 비어있음 | SmsReply를 N으로 설정 |
| 음수값 | 바로빌 API 오류 | 파라미터 오류 또는 서비스 미설정 | 바로빌 에러코드 문서 참조 |
---
## 5. 구현 현황
### 5.1 완료된 항목
| 구분 | 파일 | 설명 |
|------|------|------|
| SOAP 서비스 | `app/Services/Barobill/BarobillService.php` | kakaotalk SOAP 클라이언트 + 15개 API 메서드 |
| 전자계약 알림톡 | `app/Http/Controllers/ESign/EsignApiController.php` | `sendAlimtalk()`, `getTemplateData()` |
| 서명 확인 | `app/Http/Controllers/ESign/EsignPublicController.php` | `verifyPhone()` 전화번호 기반 서명 확인 |
| API 컨트롤러 | `app/Http/Controllers/Api/Admin/Barobill/BarobillKakaotalkController.php` | 15개 API 엔드포인트 |
| 페이지 컨트롤러 | `app/Http/Controllers/Barobill/KakaotalkController.php` | 6개 관리 페이지 |
| 로그인 페이지 | `resources/views/auth/login.blade.php` | 전자계약 서명하기 섹션 |
| 라우트 | `routes/web.php` | `/esign/verify-phone`, `/barobill/kakaotalk/*` |
| 메뉴 등록 | DB (menus 테이블) | 로컬/서버 모두 등록 완료 |
### 5.2 검증 완료 항목
| 항목 | 결과 | 날짜 |
|------|------|------|
| 채널 API 호출 | **성공** | 2026-02-22 |
| 템플릿 조회 | **성공** | 2026-02-22 |
| 알림톡 발송 (본문) | **성공** (ResultCode=1) | 2026-02-24 |
| 알림톡 버튼 URL | **성공** (등록된 URL 사용 시) | 2026-02-24 |
| 전달 결과 확인 (2단계) | **구현 완료** | 2026-02-24 |
| 로그인 페이지 서명 확인 | **성공** | 2026-02-24 |
### 5.3 완료된 추가 항목 (2026-02-26~27)
| 항목 | 상태 | 비고 |
|------|------|------|
| 템플릿 v2 승인 | **완료** | 버튼 URL에 `#{토큰}` 변수 포함 3종 승인 |
| `전자계약_완료` 템플릿 | **완료** | 서명 완료 알림 발송 — PDF 다운로드 버튼 |
| 역할 기반 알림 분기 | **완료** | 본사(creator)=이메일, 상대방(counterpart)=알림톡 |
| OTP SMS 발송 | **완료** | 상대방에게 SMS로 인증코드 발송 |
| 환경별 템플릿 분기 | **완료** | `resolveTemplateName()` — `_DEV` 접미사 자동 적용 |
| 서명 PDF 재생성 | **완료** | `downloadDocument()`에서 완료 계약 PDF 자동 재생성 |
> 상세 가이드: [전자계약 알림톡/SMS 환경별 설정 가이드](./esign-notification-guide.md)
### 5.4 대기 중인 항목
| 항목 | 상태 | 비고 |
|------|------|------|
| DEV 템플릿 검수 | **심사 중** | `admin.codebridge-x.com` 도메인 3종 |
| 친구톡 발송 | **대기** | 채널 친구 추가 후 가능 |
| 대량 발송 | **대기** | 단건 안정화 후 |
---
## 6. v2 템플릿 승인 후 코드 변경 가이드
### 6.1 변경 대상
`EsignApiController::sendAlimtalk()` (약 1059~1063행)
### 6.2 현재 코드 (v1)
```php
// 등록된 버튼 URL을 그대로 사용 (동적 URL 사용 시 템플릿 불일치 오류)
$buttons = ! empty($templateButtons) ? $templateButtons : [
['Name' => '계약서 확인하기', 'ButtonType' => 'WL',
'Url1' => 'https://mng.codebridge-x.com', 'Url2' => 'https://mng.codebridge-x.com'],
];
```
### 6.3 변경 코드 (v2 승인 후)
```php
// v2 템플릿: 버튼 URL에 동적 서명 URL 사용
$buttons = [
['Name' => '계약서 확인하기', 'ButtonType' => 'WL',
'Url1' => $signUrl, 'Url2' => $signUrl],
];
```
- `$signUrl`은 1033행에서 이미 생성됨: `config('app.url').'/esign/sign/'.$signer->access_token`
- `getTemplateData()`에서 등록된 버튼 조회는 더 이상 필요 없음 (제거 가능)
---
## 7. API 메서드 목록
### 7.1 BarobillService 카카오톡 메서드
| 메서드 | SOAP Action | 설명 |
|--------|-------------|------|
| `getKakaotalkChannels` | `GetKakaotalkChannels` | 채널 목록 조회 |
| `getKakaotalkChannelManagementUrl` | `GetKakaotalkChannelManagementURL` | 채널 관리 URL |
| `getKakaotalkTemplates` | `GetKakaotalkTemplates` | 템플릿 목록 조회 |
| `getKakaotalkTemplateManagementUrl` | `GetKakaotalkTemplateManagementURL` | 템플릿 관리 URL |
| `sendATKakaotalk` | `SendATKakaotalk` | 알림톡 단건 발송 |
| `sendATKakaotalkEx` | `SendATKakaotalkEx` | 알림톡 단건 발송 (버튼 포함) |
| `sendATKakaotalks` | `SendATKakaotalks` | 알림톡 대량 발송 |
| `sendFTKakaotalk` | `SendFTKakaotalk` | 친구톡 텍스트 단건 |
| `sendFTKakaotalks` | `SendFTKakaotalks` | 친구톡 텍스트 대량 |
| `sendFIKakaotalk` | `SendFIKakaotalk` | 친구톡 이미지 |
| `sendFWKakaotalk` | `SendFWKakaotalk` | 친구톡 와이드 이미지 |
| `getSendKakaotalk` | `GetSendKakaotalk` | 전송 결과 단건 조회 |
| `getSendKakaotalks` | `GetSendKakaotalks` | 전송 결과 다건 조회 |
| `cancelReservedKakaotalk` | `CancelReservedKakaotalk` | 예약 전송 취소 |
---
## 8. 참고 자료
- [바로빌 API 문서](https://dev.barobill.co.kr)
- [카카오비즈니스 채널 관리](https://business.kakao.com)
- [카카오 알림톡 가이드](https://kakaobusiness.gitbook.io)
- 바로빌 템플릿 관리: 로그인 후 `https://www.barobill.co.kr` → 카카오톡 템플릿 관리
---
## 변경 이력
| 날짜 | 버전 | 변경 내용 |
|------|------|----------|
| 2026-02-27 | 1.1 | 역할 기반 알림, OTP SMS, 환경별 템플릿 분기, 완료 알림톡 추가 |
| 2026-02-24 | 1.0 | 전자계약 알림톡 연동 완료, 트러블슈팅 문서화, v2 템플릿 가이드 추가 |
| 2026-02-14 | 0.2 | 전자계약(E-Sign) 알림톡 연동 활용 계획 추가 |
| 2026-02-14 | 0.1 | 초안 작성 - 코드 구현 완료, 실 서비스 연동 대기 |

250
sam/docs/features/barobill-kakaotalk/esign-notification-guide.md
View File

@@ -1,250 +0,0 @@
# 전자계약 알림톡/SMS 환경별 설정 가이드
> **작성일**: 2026-02-27
> **상태**: 운영 중
> **대상 프로젝트**: MNG
---
## 1. 개요
### 1.1 목적
전자계약(E-Sign) 시스템의 카카오톡 알림톡, SMS, 이메일 발송을 **3개 환경(로컬/개발/운영)**에서 올바르게 설정하고 테스트하기 위한 가이드이다.
### 1.2 핵심 원칙
- **역할 기반 알림**: 본사(creator)는 이메일, 상대방(counterpart)은 카카오톡/SMS
- **환경별 템플릿 분리**: 운영은 원본 템플릿, 개발은 `_DEV` 접미사 템플릿 사용
- **URL 자동 분기**: `config('app.url')`로 환경별 도메인 자동 적용
---
## 2. 환경별 설정
### 2.1 도메인 및 APP_URL
| 환경 | `APP_ENV` | `APP_URL` | 알림톡 버튼 URL 도메인 |
|------|-----------|-----------|----------------------|
| 로컬 (Docker) | `local` | `https://mng.sam.kr` | 로컬 — 알림톡 미사용 |
| 개발 서버 | `local` | `https://admin.codebridge-x.com` | `admin.codebridge-x.com` |
| 운영 서버 | `production` | `https://mng.codebridge-x.com` | `mng.codebridge-x.com` |
### 2.2 바로빌 서버 모드
`barobill_members.server_mode` 컬럼으로 바로빌 API 엔드포인트를 결정한다:
| server_mode | WSDL (카카오톡) | WSDL (SMS) | 용도 |
|-------------|----------------|------------|------|
| `test` | `testws.baroservice.com/KAKAOTALK.asmx` | `testws.baroservice.com/SMS.asmx` | 테스트 |
| `production` | `ws.baroservice.com/KAKAOTALK.asmx` | `ws.baroservice.com/SMS.asmx` | 실제 발송 |
> `server_mode`는 환경(로컬/개발/운영)과 독립적이다. 개발서버에서도 `production` 모드로 실제 발송 가능.
### 2.3 알림톡 템플릿 환경별 분기
코드에서 `resolveTemplateName()` 메서드가 `APP_ENV`에 따라 템플릿명을 자동 결정한다:
```php
private function resolveTemplateName(string $baseName): string
{
return $baseName . (app()->environment('production') ? '' : '_DEV');
}
```
| 기본 템플릿명 | 운영 (`production`) | 개발/로컬 (기타) |
|-------------|--------------------|--------------------|
| `전자계약_서명요청` | `전자계약_서명요청` | `전자계약_서명요청_DEV` |
| `전자계약_완료` | `전자계약_완료` | `전자계약_완료_DEV` |
| `전자계약_리마인드` | `전자계약_리마인드` | `전자계약_리마인드_DEV` |
---
## 3. 등록된 알림톡 템플릿
### 3.1 운영 템플릿 (mng.codebridge-x.com)
| 템플릿명 | 용도 | 상태 | 버튼 URL |
|---------|------|------|---------|
| `전자계약_서명요청` | 서명 요청 알림 | 승인 완료 | `https://mng.codebridge-x.com/esign/sign/#{토큰}` |
| `전자계약_완료` | 서명 완료 알림 | 승인 완료 | `https://mng.codebridge-x.com/esign/sign/#{토큰}` |
| `전자계약_리마인드` | 서명 독촉 알림 | 승인 완료 | `https://mng.codebridge-x.com/esign/sign/#{토큰}` |
### 3.2 개발 템플릿 (admin.codebridge-x.com)
| 템플릿명 | 용도 | 상태 | 버튼 URL |
|---------|------|------|---------|
| `전자계약_서명요청_DEV` | 서명 요청 알림 | 심사 중 | `https://admin.codebridge-x.com/esign/sign/#{토큰}` |
| `전자계약_완료_DEV` | 서명 완료 알림 | 심사 중 | `https://admin.codebridge-x.com/esign/sign/#{토큰}` |
| `전자계약_리마인드_DEV` | 서명 독촉 알림 | 심사 중 | `https://admin.codebridge-x.com/esign/sign/#{토큰}` |
> 개발 템플릿 본문은 운영 템플릿과 동일하며, 버튼 URL 도메인만 다르다.
### 3.3 템플릿 변수
| 변수 | 용도 | 사용 템플릿 |
|------|------|-----------|
| `#{이름}` | 서명자 이름 | 서명요청, 완료, 리마인드 |
| `#{계약명}` | 계약 제목 | 서명요청, 완료, 리마인드 |
| `#{기한}` | 서명 기한 | 서명요청, 리마인드 |
| `#{완료일}` | 계약 완료일 | 완료 |
| `#{토큰}` | 서명자 액세스 토큰 | 버튼 URL |
---
## 4. 역할 기반 알림 흐름
### 4.1 전체 흐름
```
① 계약 발송 ─→ 본사: 이메일 / 상대방: 카카오톡 알림톡
② OTP 인증 ─→ 본사: 이메일 / 상대방: SMS
③ 다음 서명자 ─→ 본사: 이메일 / 상대방: 카카오톡 알림톡
④ 서명 완료 ─→ 본사: 이메일(PDF) / 상대방: 카카오톡(PDF 다운로드)
```
### 4.2 역할 판별
```php
$isCounterpart = $signer->role === EsignSigner::ROLE_COUNTERPART;
```
| 역할 | 상수 | 알림톡 | SMS(OTP) | 이메일 |
|------|------|--------|----------|--------|
| 본사 (creator) | `ROLE_CREATOR` | ❌ | ❌ | ✅ 항상 |
| 상대방 (counterpart) | `ROLE_COUNTERPART` | ✅ 우선 | ✅ OTP만 | ✅ 폴백 |
### 4.3 이메일 폴백 조건
상대방(counterpart)에게도 이메일을 보내는 경우:
- 전화번호가 없을 때 (`$signer->phone` 없음)
- 알림톡 발송 실패 시 (`$alimtalkFailed = true`)
- 발송 방식이 `email` 또는 `both`일 때
### 4.4 완료 알림 특수 처리
완료 알림톡 버튼은 **서명 페이지가 아닌 문서 다운로드 URL**로 강제 변경된다:
```php
// sendCompletionAlimtalk() 내부
$documentUrl = config('app.url') . '/esign/sign/' . $signer->access_token . '/api/document';
// 버튼 URL 강제 변경 (서명페이지 → 문서 다운로드)
if (str_contains($btn[$urlKey], '/esign/sign/') && !str_contains($btn[$urlKey], '/api/document')) {
$btn[$urlKey] = $documentUrl;
}
```
---
## 5. SMS (OTP 인증)
### 5.1 발송 조건
상대방(counterpart)이 `alimtalk` 또는 `both` 발송 방식이고 전화번호가 있을 때 SMS로 OTP 발송:
```php
if (in_array($sendMethod, ['alimtalk', 'both'])
&& $signer->phone
&& $signer->role === EsignSigner::ROLE_COUNTERPART) {
$this->sendOtpViaSms($contract, $signer, $otpCode);
}
```
### 5.2 SMS 발송 파라미터
| 항목 | 값 |
|------|-----|
| API | `BarobillService::sendSMSMessage()` |
| 발신번호 | `barobill_members.manager_hp` |
| 수신번호 | `esign_signers.phone` |
| 메시지 | `[SAM] 전자계약 인증코드: {코드} (5분 이내 입력)` |
| OTP 유효시간 | 5분 |
| 최대 시도 | 5회 |
### 5.3 SMS 실패 시 이메일 폴백
SMS 발송 실패 → 이메일 OTP 폴백 → 이메일도 없으면 500 에러 반환.
---
## 6. 바로빌 템플릿 등록 절차
### 6.1 관리자 페이지
```
https://www.barobill.co.kr 로그인 → 카카오톡 → 템플릿관리
```
### 6.2 DEV 템플릿 등록 시 주의사항
1. **본문**: 운영 템플릿과 **완전히 동일** (1글자도 다르면 안 됨)
2. **버튼 URL**: 도메인만 `admin.codebridge-x.com`으로 변경
3. **템플릿명**: 운영 이름 + `_DEV` 접미사 (예: `전자계약_서명요청_DEV`)
4. **검수 기간**: 영업일 기준 2~3일
### 6.3 새 템플릿 추가 시 체크리스트
- [ ] 바로빌에서 운영용 + 개발용 2개 등록
- [ ] 코드에서 `resolveTemplateName('기본명')`으로 호출
- [ ] 본문의 변수 치환 로직 추가 (str_replace)
- [ ] 버튼 URL의 `#{토큰}` 치환 확인
- [ ] 2단계 검증 (SendKey → GetSendKakaotalk) 포함
---
## 7. 관련 파일
| 파일 | 역할 |
|------|------|
| `app/Http/Controllers/ESign/EsignApiController.php` | 계약 발송, `sendAlimtalk()`, `resolveTemplateName()` |
| `app/Http/Controllers/ESign/EsignPublicController.php` | OTP SMS, 완료 알림톡, `sendCompletionAlimtalk()` |
| `app/Services/Barobill/BarobillService.php` | SOAP 클라이언트 (`sendATKakaotalkEx`, `sendSMSMessage`) |
| `app/Models/ESign/EsignSigner.php` | `ROLE_CREATOR`, `ROLE_COUNTERPART` 상수 |
| `app/Mail/EsignCompletedMail.php` | 완료 이메일 (PDF 다운로드 링크) |
| `app/Services/ESign/PdfSignatureService.php` | 서명 PDF 합성 (`mergeSignatures`) |
---
## 8. 트러블슈팅
### 8.1 환경별 템플릿 미스매치
**증상**: `ResultCode=4` (템플릿 데이터 일치 오류)
**원인**: 개발서버에서 운영용 템플릿(`전자계약_서명요청`)으로 발송 시 버튼 URL 도메인 불일치
**해결**: DEV 템플릿 등록 후 `APP_ENV`가 `production`이 아닌지 확인
### 8.2 서명 PDF 누락 (이메일)
**증상**: 완료 이메일의 다운로드 링크가 서명 없는 초안 PDF 반환
**원인**: `mergeSignatures()` 실패 → `signed_file_path` 미설정 → preview PDF 폴백
**해결**: `downloadDocument()`가 완료 상태에서 자동 재생성 시도. 로그에서 trace 확인:
```bash
# 개발서버 로그 확인
ssh pro@114.203.209.83 "tail -100 /home/webservice/mng/storage/logs/laravel.log | grep 'PDF 서명'"
```
**주요 실패 원인**:
- `storage/fonts/Pretendard-Regular.ttf` 폰트 파일 누락
- FPDI/TCPDF 패키지 미설치 → `composer install` 필요
- `storage/app/esign/{tenant_id}/signed/` 디렉토리 권한 문제
### 8.3 MNG 모델 상수 누락
**증상**: `Undefined constant App\Models\ESign\EsignSigner::ROLE_COUNTERPART`
**원인**: API 프로젝트와 MNG 프로젝트의 모델이 독립적 — API에만 상수 정의됨
**해결**: MNG `EsignSigner.php`에도 동일한 상수 추가 (2026-02-26 핫픽스 완료)
---
## 관련 문서
- [바로빌 카카오톡 연동 README](./README.md) — SOAP API 전체 연동 가이드
- [E-Sign 기술 설계](../../projects/e-sign/technical-design.md) — 전자계약 아키텍처
- [E-Sign API 명세](../../projects/e-sign/api-specification.md) — API 엔드포인트
- [알림톡 연동 계획](../../plans/esign-alimtalk-integration.md) — 초기 계획 (구현 완료)
---
**최종 업데이트**: 2026-02-27

173
sam/docs/features/business-card-request.md
View File

@@ -1,173 +0,0 @@
# 명함신청 관리
> **작성일**: 2026-02-25
> **상태**: 구현 완료
---
## 1. 개요
### 1.1 목적
영업파트너가 명함을 신청하면 본사에서 제작소에 의뢰하고, 완료 후 처리하는 3단계 워크플로우를 제공한다.
### 1.2 워크플로우
```
요청(pending) ──제작의뢰──→ 제작중(ordered) ──처리완료──→ 완료(processed)
노랑 파랑 초록
```
### 1.3 메뉴 구조
| 메뉴 | URL | 대상 | 설명 |
|------|-----|------|------|
| 파트너 명함신청 | `/sales/business-cards` | 모든 사용자 | 신청폼 + 내 이력 |
| 명함신청 처리 | `/sales/business-cards/manage` | 관리자 전용 | 3단계 처리 + 뱃지 |
---
## 2. 테이블 구조
### 2.1 `business_card_requests`
| 필드 | 타입 | 설명 |
|------|------|------|
| `id` | bigint | PK |
| `tenant_id` | bigint | 테넌트 ID |
| `user_id` | bigint | 신청자 ID |
| `name` | varchar(50) | 성함 |
| `phone` | varchar(20) | 전화번호 |
| `title` | varchar(50) | 직함 (nullable) |
| `email` | varchar(100) | 이메일 (nullable) |
| `quantity` | int | 수량 (기본 100) |
| `memo` | text | 비고 (nullable) |
| `status` | varchar(20) | 상태: `pending`, `ordered`, `processed` |
| `ordered_by` | bigint | 제작의뢰 처리자 ID (nullable) |
| `ordered_at` | timestamp | 제작의뢰 일시 (nullable) |
| `processed_by` | bigint | 처리완료 처리자 ID (nullable) |
| `processed_at` | timestamp | 처리완료 일시 (nullable) |
| `process_memo` | text | 처리 메모 (nullable) |
| `created_at` | timestamp | 생성일 |
| `updated_at` | timestamp | 수정일 |
**인덱스**: `(tenant_id, status)`, `user_id`
---
## 3. 상태 전이
```
pending ──→ ordered ──→ processed
│ ▲
└── (역방향 전이 없음) ──┘
```
| 상태 | 라벨 | 색상 | 설명 |
|------|------|------|------|
| `pending` | 요청 | 노랑 | 파트너가 신청, 관리자 확인 대기 |
| `ordered` | 제작의뢰 | 파랑 | 관리자가 제작소에 의뢰 |
| `processed` | 처리완료 | 초록 | 제작 완료, 전달 완료 |
---
## 4. API 엔드포인트
| Method | Path | 이름 | 설명 |
|--------|------|------|------|
| GET | `/sales/business-cards` | `sales.business-cards.index` | 파트너 명함신청 (신청폼 + 이력) |
| POST | `/sales/business-cards` | `sales.business-cards.store` | 신청 등록 |
| GET | `/sales/business-cards/manage` | `sales.business-cards.manage` | 관리자 처리 화면 |
| POST | `/sales/business-cards/{id}/order` | `sales.business-cards.order` | 제작의뢰 (관리자) |
| POST | `/sales/business-cards/{id}/process` | `sales.business-cards.process` | 처리완료 (관리자) |
---
## 5. 파일 구조
### 5.1 API 프로젝트
| 파일 | 설명 |
|------|------|
| `database/migrations/2026_02_24_100000_create_business_card_requests_table.php` | 테이블 생성 |
| `database/migrations/2026_02_25_100000_add_ordered_columns_to_business_card_requests_table.php` | ordered 컬럼 추가 |
### 5.2 MNG 프로젝트
| 파일 | 설명 |
|------|------|
| `app/Models/Sales/BusinessCardRequest.php` | 모델 (상태 상수, 스코프, 헬퍼) |
| `app/Services/Sales/BusinessCardRequestService.php` | 서비스 (CRUD, 통계, 뱃지) |
| `app/Http/Controllers/Sales/BusinessCardRequestController.php` | 컨트롤러 |
| `app/Providers/ViewServiceProvider.php` | 사이드바 뱃지 연동 |
| `routes/web.php` | 라우트 5개 |
| `resources/views/sales/business-cards/admin-index.blade.php` | 관리자 뷰 |
| `resources/views/sales/business-cards/partner-index.blade.php` | 파트너 뷰 |
---
## 6. 화면 구성
### 6.1 파트너 명함신청 (`partner-index`)
```
┌─ 회사 정보 안내 (코드브릿지엑스) ──────────────┐
├─ 신청 폼 ─────────────────────────────────────┤
│ 성함* │ 직함 │ 전화번호* │ 이메일 │
│ 수량 │ 메모 │ [명함 신청하기] │
├─ 내 신청 이력 ────────────────────────────────┤
│ 신청일 │ 성함 │ 직함 │ 전화번호 │ 수량 │ 상태 │
│ (요청=노랑, 제작중=파랑, 처리완료=초록) │
└───────────────────────────────────────────────┘
```
- 로그인 사용자 정보(name, phone, email)로 자동 채움
- 관리자도 동일한 화면 접근 가능
### 6.2 명함신청 처리 (`admin-index`)
```
┌─ 통계 ──────────────────────────────────────┐
│ 신규요청(노랑) │ 제작의뢰(파랑) │ 오늘처리(초록) │ 전체 │
├─────────────────┬───────────────────────────┤
│ 신규 요청 │ 제작 중 │
│ [제작의뢰] 버튼 │ 의뢰일 + [처리완료] 버튼 │
├─────────────────┴───────────────────────────┤
│ 처리 완료 이력 (하단 스크롤 테이블) │
└─────────────────────────────────────────────┘
```
- 사이드바 뱃지: 요청 + 제작의뢰 합산 건수 표시
- 처리 버튼 클릭 시 `showConfirm()` 확인 다이얼로그
---
## 7. 뱃지 연동
`ViewServiceProvider`에서 `BusinessCardRequestService::getPendingCount()`를 호출하여 사이드바 메뉴 뱃지에 대기 건수를 표시한다.
- **카운트 기준**: `pending` + `ordered` 합산
- **표시 위치**: "명함신청 처리" 메뉴 (`sales.business-cards.manage`)
- **0건일 때**: 뱃지 미표시
---
## 8. 메뉴 등록 정보
| ID | parent_id | 이름 | URL | sort_order |
|----|-----------|------|-----|------------|
| 15507 | 15456 | 파트너 명함신청 | `/sales/business-cards` | 5 |
| 15508 | 15456 | 명함신청 처리 | `/sales/business-cards/manage` | 6 |
> 영업파트너에게는 "파트너 명함신청"만 보이도록 메뉴 권한 설정 필요
---
## 관련 문서
- 참고 패턴: `api/app/Models/CompanyRequest.php` (상태 관리 모델)
- 참고 뷰: `mng/resources/views/sales/managers/approvals.blade.php` (2분할 레이아웃)
---
**최종 업데이트**: 2026-02-25

284
sam/docs/features/credit-evaluation/README.md
View File

@@ -1,284 +0,0 @@
# 신용평가 시스템 (쿠콘 연동)
> **작성일**: 2026-03-02
> **상태**: 운영중
---
## 1. 개요
### 1.1 목적
SAM에서 거래처/협력업체의 **기업 신용정보를 조회**하여, 거래 안전성을 사전 판단하는 시스템이다.
### 1.2 핵심 원칙
- **쿠콘(KooCon/나이스평가정보)** API로 기업 신용정보 7개 항목 조회
- **국세청 공공데이터포털** API로 사업자등록 상태(영업/휴업/폐업) 확인
- 모든 조회 결과는 DB에 원본 저장 (감사 추적용)
- 테넌트별 월 5건 무료, 초과 시 건당 2,000원 과금
---
## 2. 시스템 구조
### 2.1 전체 흐름
```
사용자 (SAM MNG)
│
▼
CreditController::search()
│
├──▶ CooconService::getAllCreditInfo()
│ ├── OA08: 기업 기본정보
│ ├── OA12: 신용요약정보
│ ├── OA13: 단기연체정보
│ ├── OA14: 신용도판단정보 (KCI)
│ ├── OA15: 신용도판단정보 (CB)
│ ├── OA16: 당좌거래정지정보
│ └── OA17: 법정관리/워크아웃
│
├──▶ NtsBusinessService::getBusinessStatus()
│ └── 국세청 사업자등록 상태 조회
│
└──▶ CreditInquiry::createFromApiResponse()
└── DB에 조회 이력 저장
```
### 2.2 파트너 구조
| 역할 | 대상 | 설명 |
|------|------|------|
| **API 제공사** | 쿠콘(KooCon) / 나이스평가정보 | 기업 신용정보 API 플랫폼 |
| **파트너사** | (주)코드브릿지엑스 | API 키 보유, 쿠콘과 직접 계약 |
| **이용사** | 각 테넌트 (주일, 경동 등) | SAM을 통해 신용조회 실행 |
---
## 3. 쿠콘(KooCon) API
### 3.1 API 엔드포인트
| 환경 | URL |
|------|-----|
| 테스트 | `https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp` |
| 운영 | `https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp` |
### 3.2 인증 방식
- **API_KEY**: 쿠콘에서 발급받은 인증키 (DB `coocon_configs` 테이블에서 관리)
- **API_ID**: 조회할 API 식별자 (OA08~OA17)
- **TR_SEQ**: 거래일련번호 (중복 방지용, `YmdHis` + 마이크로초 6자리)
### 3.3 요청 형식
```json
{
"API_KEY": "발급받은_API_키",
"API_ID": "OA12",
"TR_SEQ": "20260302173000123456",
"COMPANY_KEY": "1234567890"
}
```
- **Method**: POST
- **Content-Type**: application/json
- **Timeout**: 30초
### 3.4 API 목록
| API ID | 상수명 | 설명 | 데이터 출처 |
|--------|--------|------|------------|
| `OA08` | `API_COMPANY_INFO` | 기업 기본정보 | 나이스평가정보 |
| `OA12` | `API_CREDIT_SUMMARY` | 신용요약정보 (이슈 건수 요약) | 나이스평가정보 |
| `OA13` | `API_SHORT_TERM_OVERDUE` | 단기연체정보 | 한국신용정보원 |
| `OA14` | `API_NEGATIVE_INFO_KCI` | 신용도판단정보 (KCI) | 한국신용정보원 + 공공정보 |
| `OA15` | `API_NEGATIVE_INFO_CB` | 신용도판단정보 (CB) | 신용정보사 |
| `OA16` | `API_SUSPENSION_INFO` | 당좌거래정지정보 | 금융결제원 |
| `OA17` | `API_WORKOUT_INFO` | 법정관리/워크아웃정보 | 법원 |
### 3.5 응답 형식
```json
{
"RSLT_CD": "00000000",
"RSLT_MSG": "정상처리되었습니다.",
"RSLT_DATA": { ... }
}
```
- `RSLT_CD === '00000000'`: 성공
- 기타 값: 에러 (에러 메시지는 `RSLT_MSG`에 포함)
---
## 4. 국세청 사업자등록 조회 API
### 4.1 API 정보
| 항목 | 값 |
|------|------|
| URL | `https://api.odcloud.kr/api/nts-businessman/v1/status` |
| 인증 | serviceKey (쿼리 파라미터) |
| 출처 | 공공데이터포털 |
### 4.2 상태 코드
| 코드 | 상태 | 설명 |
|------|------|------|
| `01` | 계속사업자 | 정상 영업 중 |
| `02` | 휴업자 | 영업 중지 |
| `03` | 폐업자 | 사업 종료 |
---
## 5. 데이터베이스
### 5.1 `coocon_configs` — API 설정
| 컬럼 | 타입 | 설명 |
|------|------|------|
| `id` | BIGINT PK | |
| `name` | VARCHAR(100) | 설정 이름 |
| `environment` | ENUM('test', 'production') | 환경 |
| `api_key` | VARCHAR(100) | 쿠콘 API 키 |
| `base_url` | VARCHAR(255) | API 기본 URL |
| `description` | TEXT | 설명 |
| `is_active` | BOOLEAN | 활성화 여부 |
> **규칙**: 환경당 1개만 활성화 가능. 새 설정 활성화 시 기존 설정은 자동 비활성화.
### 5.2 `credit_inquiries` — 조회 이력
| 컬럼 | 타입 | 설명 |
|------|------|------|
| `id` | BIGINT PK | |
| `tenant_id` | BIGINT FK | 테넌트 |
| `inquiry_key` | VARCHAR(32) UNIQUE | 조회 고유키 |
| `company_key` | VARCHAR(20) | 사업자번호/법인번호 |
| `company_name` | VARCHAR | 업체명 |
| `user_id` | BIGINT FK | 조회자 |
| `inquired_at` | TIMESTAMP | 조회 일시 |
| `nts_status` | VARCHAR(20) | 국세청 상태 |
| `nts_status_code` | VARCHAR(2) | 국세청 상태코드 |
| `short_term_overdue_cnt` | UINT | 단기연체 건수 |
| `negative_info_kci_cnt` | UINT | KCI 건수 |
| `negative_info_pb_cnt` | UINT | 공공정보 건수 |
| `negative_info_cb_cnt` | UINT | CB 건수 |
| `suspension_info_cnt` | UINT | 당좌거래정지 건수 |
| `workout_cnt` | UINT | 법정관리/워크아웃 건수 |
| `raw_*` | JSON | 각 API 원본 응답 (7개 + NTS) |
| `status` | ENUM | success / partial / failed |
---
## 6. 과금 정책
| 항목 | 값 |
|------|------|
| 월 무료 할당량 | **5건** |
| 초과 건당 요금 | **2,000원** |
| 계산식 | `max(0, (조회건수 - 5)) × 2,000` |
### 요금 예시
| 월 조회 건수 | 무료 | 유료 | 요금 |
|-------------|------|------|------|
| 3건 | 3 | 0 | 0원 |
| 5건 | 5 | 0 | 0원 |
| 10건 | 5 | 5 | 10,000원 |
| 20건 | 5 | 15 | 30,000원 |
---
## 7. 환경 설정
### 7.1 테스트/운영 분리
| 환경 | API URL | 설명 |
|------|---------|------|
| 테스트 | `dev2.coocon.co.kr:8443` | 개발/검증용 (과금 없음) |
| 운영 | `sgw.coocon.co.kr` | 실 서비스 (과금 발생) |
- `coocon_configs` 테이블에서 환경별로 별도 설정 관리
- 각 환경에서 `is_active=true`인 설정 1개만 사용
### 7.2 필요한 설정
| 항목 | 관리 위치 | 설명 |
|------|----------|------|
| 쿠콘 API 키 | DB (`coocon_configs`) | 쿠콘에서 발급 |
| 쿠콘 API URL | DB (`coocon_configs`) | 환경별 URL |
| 국세청 API 키 | 코드 내 하드코딩 | 공공데이터포털 발급 |
---
## 8. MNG 라우트
| Method | Path | 설명 |
|--------|------|------|
| GET | `/credit/inquiry` | 조회 이력 목록 |
| POST | `/credit/inquiry/search` | 신용정보 조회 실행 |
| POST | `/credit/inquiry/test` | API 연결 테스트 |
| GET | `/credit/inquiry/{key}/raw` | 원본 데이터 조회 |
| GET | `/credit/inquiry/{key}/report` | 리포트 조회 |
| DELETE | `/credit/inquiry/{id}` | 이력 삭제 |
| GET | `/credit/usage` | 조회회수 집계 |
| GET | `/credit/settings` | 설정 관리 |
| POST | `/credit/settings` | 설정 생성 |
| PUT | `/credit/settings/{id}` | 설정 수정 |
| DELETE | `/credit/settings/{id}` | 설정 삭제 |
| POST | `/credit/settings/{id}/toggle` | 활성화 토글 |
---
## 9. 에러 코드
### 9.1 쿠콘 API
| 코드 | 설명 |
|------|------|
| `NO_CONFIG` | API 설정 없음 |
| `HTTP_ERROR` | HTTP 통신 오류 |
| `EXCEPTION` | 예외 발생 |
| `RSLT_CD ≠ 00000000` | 쿠콘 API 에러 (RSLT_MSG 참조) |
### 9.2 국세청 API
| 코드 | 설명 |
|------|------|
| `INVALID_FORMAT` | 사업자번호 형식 오류 |
| `NOT_FOUND` | 조회 결과 없음 |
| `HTTP_ERROR` | HTTP 통신 오류 |
---
## 10. 관련 파일
### MNG 프로젝트
| 구분 | 경로 |
|------|------|
| 컨트롤러 | `app/Http/Controllers/Credit/CreditController.php` |
| 컨트롤러 | `app/Http/Controllers/Credit/CreditUsageController.php` |
| 서비스 | `app/Services/Coocon/CooconService.php` |
| 서비스 | `app/Services/Nts/NtsBusinessService.php` |
| 모델 | `app/Models/Coocon/CooconConfig.php` |
| 모델 | `app/Models/Credit/CreditInquiry.php` |
| 뷰 | `resources/views/credit/inquiry/index.blade.php` |
| 뷰 | `resources/views/credit/usage/index.blade.php` |
| 뷰 | `resources/views/credit/settings/index.blade.php` |
### API 프로젝트 (마이그레이션)
| 경로 |
|------|
| `database/migrations/2026_01_22_192637_create_coocon_configs_table.php` |
| `database/migrations/2026_01_22_201143_create_credit_inquiries_table.php` |
| `database/migrations/2026_01_22_203001_add_company_info_to_credit_inquiries_table.php` |
| `database/migrations/2026_01_28_163000_add_tenant_id_to_credit_inquiries_table.php` |
---
**최종 업데이트**: 2026-03-02

122
sam/docs/features/documents/README.md
View File

@@ -1,122 +0,0 @@
# 문서관리 시스템 (Document Management)
> **상태**: API 완전 구현
> **최종 갱신**: 2026-02-27
---
## 1. 개요
EAV(Entity-Attribute-Value) 패턴 기반의 동적 문서 관리 시스템. 문서 서식(Template)을 정의하면 해당 서식에 따라 문서를 생성·결재·관리할 수 있다. 제품 검사(FQC), 공정 검사 등 다양한 문서 유형을 하나의 시스템으로 처리한다.
**핵심 기능:**
- 문서 서식(Template) 관리: 결재선, 기본필드, 섹션, 컬럼 정의
- EAV 기반 동적 데이터 저장 (section_id + column_id + row_index + field_key)
- 결재 워크플로우: 작성 → 검토 → 승인 (다단계)
- FQC(제품검사) 일괄 생성 및 진행 현황
- 첨부파일 관리 (서명, 이미지, 참조 문서)
---
## 2. 모델
### 서식 (Template) 계층
| 모델 | 설명 |
|------|------|
| `DocumentTemplate` | 서식 마스터 (이름, 카테고리, 회사 정보, 활성 여부) |
| `DocumentTemplateApprovalLine` | 결재선 (이름, 부서, 역할, 순서) |
| `DocumentTemplateBasicField` | 기본 필드 (라벨, 유형, 기본값) |
| `DocumentTemplateSection` | 섹션 (제목, 이미지, 순서) |
| `DocumentTemplateSectionField` | 섹션 필드 (field_key, 유형, 옵션, 필수 여부) |
| `DocumentTemplateColumn` | 컬럼 (라벨, 너비, 유형, 하위 라벨) |
| `DocumentTemplateLink` | 서식 간 연결 |
### 문서 (Document) 계층
| 모델 | 설명 | Traits |
|------|------|--------|
| `Document` | 문서 인스턴스 (서식 기반, 상태, 연결 대상) | BelongsToTenant, Auditable, SoftDeletes |
| `DocumentApproval` | 결재 기록 (단계, 역할, 상태, 코멘트) | BelongsToTenant |
| `DocumentData` | EAV 데이터 (section + column + row + field_key → value) | BelongsToTenant |
| `DocumentAttachment` | 첨부파일 (유형: general, signature, image, reference) | BelongsToTenant |
**문서 상태 흐름:**
```
DRAFT → PENDING → APPROVED
→ REJECTED → DRAFT (재작성)
→ CANCELLED
```
**컬럼 유형:** text, check, complex, select, measurement
---
## 3. 서비스
| 서비스 | 주요 메서드 |
|--------|-----------|
| `DocumentService` | list, show, create, update, destroy, submit, approve, reject, cancel, bulkCreateFqc, fqcStatus, resolve, upsert, formatTemplateForReact |
| `DocumentTemplateService` | list, show |
---
## 4. API 엔드포인트
### 서식 조회 (읽기 전용)
| HTTP | URI | 설명 |
|------|-----|------|
| GET | `/v1/document-templates` | 서식 목록 |
| GET | `/v1/document-templates/{id}` | 서식 상세 (필드·컬럼·섹션 포함) |
### 문서 CRUD + 워크플로우
| HTTP | URI | 설명 |
|------|-----|------|
| GET | `/v1/documents` | 문서 목록 (필터: status, template_id, 날짜, 검색) |
| POST | `/v1/documents` | 문서 생성 |
| GET | `/v1/documents/{id}` | 문서 상세 |
| PATCH | `/v1/documents/{id}` | 문서 수정 |
| DELETE | `/v1/documents/{id}` | 문서 삭제 |
| POST | `/v1/documents/{id}/submit` | 결재 요청 |
| POST | `/v1/documents/{id}/approve` | 승인 |
| POST | `/v1/documents/{id}/reject` | 반려 |
| POST | `/v1/documents/{id}/cancel` | 취소/회수 |
### 특수 기능
| HTTP | URI | 설명 |
|------|-----|------|
| POST | `/v1/documents/bulk-create-fqc` | FQC 일괄 생성 |
| GET | `/v1/documents/fqc-status` | FQC 진행 현황 |
| GET | `/v1/documents/resolve` | 카테고리+item_id로 문서 조회 |
| POST | `/v1/documents/upsert` | 생성 또는 업데이트 |
---
## 5. FormRequest
| Request | 주요 검증 |
|---------|----------|
| `StoreRequest` | template_id (필수, exists), title, approvers[], data[] (EAV), attachments[] |
| `UpdateRequest` | title, data[] (EAV), attachments[] |
| `IndexRequest` | status, template_id, search, 날짜 범위, 정렬 |
| `BulkCreateFqcRequest` | order_id, template_id, item_count |
| `ResolveRequest` | category, item_id |
| `ApproveRequest` | comment (선택) |
| `RejectRequest` | comment (필수) |
---
## 관련 문서
- [MNG 문서관리 시스템 상세](mng-document-system.md) — MNG 화면 구성, 탭별 기능, 서식 빌더, EAV 저장 패턴 상세
- [MNG 문서양식관리](mng-document-template.md) — 서식 생성/편집, Legacy/Block Builder, 프리셋, 연결품목 관리
- [DB 스키마 — 문서/전자서명](../../system/database/documents.md)
- [게시판 시스템](../boards/README.md) — 유사한 EAV 패턴 적용
- Swagger: `/api-docs` → Documents 섹션
---
**최종 업데이트**: 2026-03-06

Some files were not shown because too many files have changed in this diff Show More