Compare commits
1 Commits
main
...
feature/it
| Author | SHA1 | Date | |
|---|---|---|---|
| bedfb8af82 |
42
.gitignore
vendored
42
.gitignore
vendored
@@ -1,43 +1 @@
|
|||||||
# 모든 파일 무시
|
|
||||||
*
|
|
||||||
|
|
||||||
# 추적할 파일만 허용
|
|
||||||
!.gitignore
|
|
||||||
!INDEX.md
|
|
||||||
!README.md
|
|
||||||
!resources.md
|
|
||||||
|
|
||||||
# 문서 폴더 (루트 기준)
|
|
||||||
!assets/
|
|
||||||
!assets/**
|
|
||||||
!brochure/
|
|
||||||
!brochure/**
|
|
||||||
!changes/
|
|
||||||
!changes/**
|
|
||||||
!contracts/
|
|
||||||
!contracts/**
|
|
||||||
contracts/docx/backup/
|
|
||||||
!data/
|
|
||||||
!data/**
|
|
||||||
!dev/
|
|
||||||
!dev/**
|
|
||||||
!features/
|
|
||||||
!features/**
|
|
||||||
!frontend/
|
|
||||||
!frontend/**
|
|
||||||
!guides/
|
|
||||||
!guides/**
|
|
||||||
!plans/
|
|
||||||
!plans/**
|
|
||||||
!projects/
|
|
||||||
!projects/**
|
|
||||||
!requests/
|
|
||||||
!requests/**
|
|
||||||
!rules/
|
|
||||||
!rules/**
|
|
||||||
!system/
|
|
||||||
!system/**
|
|
||||||
|
|
||||||
# 기타
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
_to_notion/
|
|
||||||
|
|||||||
340
INDEX.md
340
INDEX.md
@@ -1,213 +1,225 @@
|
|||||||
# SAM 문서 인덱스 (Claude Code용)
|
# SAM 프로젝트 문서 인덱스
|
||||||
|
|
||||||
> 작업 유형에 맞는 문서를 먼저 읽고 시작하세요.
|
> **Claude Code 작업 전 필수 확인** - 작업 유형에 맞는 문서를 먼저 읽고 시작하세요.
|
||||||
> 최종 갱신: 2026-03-07
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 작업별 필수 문서
|
## 🎯 작업별 필수 문서 (반드시 먼저 확인)
|
||||||
|
|
||||||
| 작업 유형 | 필수 문서 | 용도 |
|
| 작업 유형 | 필수 문서 | 용도 |
|
||||||
|----------|----------|------|
|
|----------|----------|------|
|
||||||
| API 개발 | `dev/standards/api-rules.md` | Service-First, FormRequest, i18n |
|
| **API 개발** | `standards/api-rules.md` | Service-First, FormRequest, i18n 규칙 |
|
||||||
| DB 변경 | `system/database/README.md` | 테이블 구조, 관계, 컬럼 규칙 |
|
| **DB 변경** | `specs/database-schema.md` | 테이블 구조, 관계, 컬럼 규칙 |
|
||||||
| 새 기능 | `system/overview.md` | 전체 아키텍처 |
|
| **새 기능 구현** | `architecture/system-overview.md` | 전체 아키텍처 이해 |
|
||||||
| 보안 | `system/security-policy.md` | 인증/인가, 보안 규칙 |
|
| **보안 관련** | `architecture/security-policy.md` | 인증/인가, 보안 규칙 |
|
||||||
| Git 커밋 | `dev/standards/git-conventions.md` | 커밋 메시지, 브랜치 전략 |
|
| **Git 커밋** | `standards/git-conventions.md` | 커밋 메시지, 브랜치 전략 |
|
||||||
| 품질 검증 | `dev/standards/quality-checklist.md` | 코드 품질 체크리스트 |
|
| **품질 검증** | `standards/quality-checklist.md` | 코드 품질 체크리스트 |
|
||||||
| Swagger | `dev/guides/swagger-guide.md` | API 문서 작성법 |
|
| **Swagger 작성** | `guides/swagger-guide.md` | API 문서 작성 방법 |
|
||||||
| 품목관리 | `rules/item-policy.md` | 품목 정책 |
|
| **품목관리** | `rules/item-policy.md` | 품목 정책 (유형, 예약어, API 규칙) |
|
||||||
| 단가관리 | `rules/pricing-policy.md` | 원가/판매가, 리비전 |
|
| **게시판** | `specs/board-system-spec.md` | 게시판 시스템 설계 |
|
||||||
| 견적관리 | `features/quotes/README.md` | 견적 시스템, BOM 계산 |
|
| **단가관리** | `rules/pricing-policy.md` | 원가/판매가 계산, 리비전 관리 |
|
||||||
| 운영 배포 | `dev/dev_plans/production-deployment-plan.md` | 배포 계획 |
|
| **MES 개발** | `projects/mes/README.md` | MES 프로젝트 개요 |
|
||||||
| 서버 운영 | `dev/deploys/ops-manual/README.md` | 서버 운영 매뉴얼 |
|
|
||||||
| 서버 접근/백업 | `system/server-access-management.md` | 계정, 권한, 백업, 리플리케이션 |
|
|
||||||
| MES | `projects/mes/README.md` | MES 프로젝트 |
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 폴더 구조
|
## 📁 폴더 구조
|
||||||
|
|
||||||
```
|
```
|
||||||
docs/
|
docs/
|
||||||
├── [공유]
|
├── plans/ # 🆕 개발 계획 - 임시 (작업 완료 후 정리 → 삭제)
|
||||||
│ ├── features/ # 기능별 상세 명세
|
├── standards/ # 개발 표준 - "어떻게 코드를 작성할 것인가"
|
||||||
│ ├── rules/ # 비즈니스 규칙·정책
|
├── architecture/ # 아키텍처 - "왜 이렇게 설계하는가"
|
||||||
│ ├── projects/ # 프로젝트별 자료
|
├── rules/ # 비즈니스 규칙 - "무엇이 유효한 데이터인가"
|
||||||
│ ├── system/ # 시스템 현황 (아키텍처, DB, 인프라)
|
├── specs/ # 기술 스펙 - "무엇을 구현할 것인가"
|
||||||
│
|
├── guides/ # 구현 가이드 - "어떻게 구현할 것인가"
|
||||||
├── [개발팀]
|
├── quickstart/ # 빠른 시작 - 핵심 요약
|
||||||
│ ├── dev/standards/ # 개발 표준
|
├── front/ # 프론트엔드 공유 문서
|
||||||
│ ├── dev/guides/ # 구현 가이드
|
├── features/ # 기능별 상세 문서
|
||||||
│ ├── dev/quickstart/ # 빠른 시작
|
├── projects/ # 프로젝트별 문서 (MES, Legacy)
|
||||||
│ ├── dev/changes/ # 변경 이력
|
├── history/ # 히스토리 및 로드맵
|
||||||
│ ├── dev/deploys/ # 배포/운영
|
├── changes/ # 변경 이력
|
||||||
│ ├── dev/data/ # 데이터 분석
|
└── data/ # 데이터 분석
|
||||||
│ ├── dev/history/ # 과거 이력
|
|
||||||
│ ├── dev/dev_plans/ # 개발 계획 (임시)
|
|
||||||
│
|
|
||||||
├── [프론트엔드]
|
|
||||||
│ ├── frontend/api-specs/ # API 연동 명세
|
|
||||||
│ ├── frontend/integration/ # 연동 가이드
|
|
||||||
│
|
|
||||||
├── [기획팀]
|
|
||||||
│ ├── requests/ # 기획 요청
|
|
||||||
│
|
|
||||||
├── resources.md # 외부 자료 링크 (노션)
|
|
||||||
├── README.md # 사람용 안내
|
|
||||||
└── INDEX.md # 이 파일 (Claude Code용)
|
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 폴더별 문서 목록
|
## 📚 폴더별 문서 목록
|
||||||
|
|
||||||
### system/ — 시스템 현황
|
### 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 전 |
|
||||||
|
|
||||||
|
### architecture/ - 아키텍처 & 설계 원칙
|
||||||
|
> 시스템 설계, 보안 정책, 아키텍처 결정
|
||||||
|
|
||||||
|
| 문서 | 설명 | 필수 확인 시점 |
|
||||||
|
|------|------|--------------|
|
||||||
|
| [system-overview.md](architecture/system-overview.md) | 전체 시스템 아키텍처 | 새 기능 설계 전 |
|
||||||
|
| [security-policy.md](architecture/security-policy.md) | 인증/인가, 보안 규칙 | 보안 관련 작업 전 |
|
||||||
|
|
||||||
|
### rules/ - 비즈니스 규칙
|
||||||
|
> 도메인 로직, 검증 규칙, 상태 전이
|
||||||
|
|
||||||
|
| 문서 | 설명 | 필수 확인 시점 |
|
||||||
|
|------|------|--------------|
|
||||||
|
| [README.md](rules/README.md) | 비즈니스 규칙 개요 | 도메인 로직 구현 전 |
|
||||||
|
| [item-policy.md](rules/item-policy.md) | 품목 정책 (유형 체계, 예약어, API 규칙) | 품목 관련 작업 전 |
|
||||||
|
| [pricing-policy.md](rules/pricing-policy.md) | 단가 정책 (원가/판매가 계산, 리비전 관리) | 단가 관련 작업 전 |
|
||||||
|
|
||||||
|
### specs/ - 기술 스펙
|
||||||
|
> 구현 명세, DB 스키마, 시스템 설정
|
||||||
|
|
||||||
|
| 문서 | 설명 | 필수 확인 시점 |
|
||||||
|
|------|------|--------------|
|
||||||
|
| [database-schema.md](specs/database-schema.md) | DB 구조 및 관계도 | DB 변경 전 |
|
||||||
|
| [board-system-spec.md](specs/board-system-spec.md) | 게시판 시스템 설계 | 게시판 작업 전 |
|
||||||
|
| [item-master-integration.md](specs/item-master-integration.md) | 품목관리 연동 설계 | 품목 연동 구현 시 |
|
||||||
|
| [docker-setup.md](specs/docker-setup.md) | Docker 환경 구성 | 환경 설정 시 |
|
||||||
|
| [remote-work-setup.md](specs/remote-work-setup.md) | 원격 개발 설정 | 원격 작업 시 |
|
||||||
|
|
||||||
|
### 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) | 런칭 준비 현황 | 런칭 관련 작업 시 |
|
||||||
|
|
||||||
|
### quickstart/ - 빠른 시작
|
||||||
|
> 핵심 규칙 요약, 자주 쓰는 명령어
|
||||||
|
|
||||||
|
| 문서 | 설명 | 필수 확인 시점 |
|
||||||
|
|------|------|--------------|
|
||||||
|
| [quick-start.md](quickstart/quick-start.md) | 프로젝트 핵심 규칙 요약 | 세션 시작 시 |
|
||||||
|
| [dev-commands.md](quickstart/dev-commands.md) | 일상 개발 명령어 모음 | 명령어 확인 시 |
|
||||||
|
|
||||||
|
### front/ - 프론트엔드 공유 문서
|
||||||
|
> API 연동 가이드, 프론트엔드 스펙
|
||||||
|
|
||||||
| 문서 | 설명 |
|
| 문서 | 설명 |
|
||||||
|------|------|
|
|------|------|
|
||||||
| [overview.md](system/overview.md) | 전체 시스템 아키텍처 |
|
| [item-master-guide.md](front/item-master-guide.md) | 품목기준관리 페이지-섹션-필드 구조 |
|
||||||
| [api-structure.md](system/api-structure.md) | API 서버 구조 (~1,027 엔드포인트) |
|
|
||||||
| [react-structure.md](system/react-structure.md) | React 프론트엔드 구조 |
|
|
||||||
| [mng-structure.md](system/mng-structure.md) | MNG 관리자 패널 구조 |
|
|
||||||
| [docker-setup.md](system/docker-setup.md) | Docker 환경 + CI/CD |
|
|
||||||
| [database/README.md](system/database/README.md) | DB 스키마 인덱스 |
|
|
||||||
| [security-policy.md](system/security-policy.md) | 보안 정책 |
|
|
||||||
| [server-access-management.md](system/server-access-management.md) | 서버 접근 권한, 백업, 리플리케이션 |
|
|
||||||
| [scaling-roadmap.md](system/scaling-roadmap.md) | 스케일링 로드맵 |
|
|
||||||
| [board-system-spec.md](system/board-system-spec.md) | 게시판 시스템 설계 |
|
|
||||||
| [item-master-integration.md](system/item-master-integration.md) | 품목 마스터 통합 설계 |
|
|
||||||
| [erp-analysis/](system/erp-analysis/) | ERP 스토리보드 분석 |
|
|
||||||
|
|
||||||
DB 도메인별:
|
> 날짜별 API 요청 문서는 `history/2025-11/front-requests/`로 이동됨
|
||||||
|
|
||||||
| 문서 | 도메인 |
|
### data/ - 데이터 분석
|
||||||
|------|--------|
|
> 시스템 분석, 데이터 모델링
|
||||||
| [database/tenants.md](system/database/tenants.md) | 테넌트, 사용자, 권한 |
|
|
||||||
| [database/products.md](system/database/products.md) | 제품, 품목, 설계 |
|
|
||||||
| [database/sales.md](system/database/sales.md) | 영업, 수주, 견적 |
|
|
||||||
| [database/production.md](system/database/production.md) | 생산, 시공, 자재, 품질 |
|
|
||||||
| [database/finance.md](system/database/finance.md) | 재무, 회계 |
|
|
||||||
| [database/hr.md](system/database/hr.md) | 인사 |
|
|
||||||
| [database/documents.md](system/database/documents.md) | 문서, 전자서명 |
|
|
||||||
| [database/commons.md](system/database/commons.md) | 공통, 게시판, 감사 |
|
|
||||||
| [database/stats.md](system/database/stats.md) | 통계 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### dev/standards/ — 개발 표준
|
|
||||||
|
|
||||||
| 문서 | 설명 |
|
| 문서 | 설명 |
|
||||||
|------|------|
|
|------|------|
|
||||||
| [api-rules.md](dev/standards/api-rules.md) | API 개발 규칙 |
|
| [analysis/item-db-analysis.md](data/analysis/item-db-analysis.md) | Item DB/API 분석 최종본 |
|
||||||
| [git-conventions.md](dev/standards/git-conventions.md) | Git 컨벤션 |
|
|
||||||
| [quality-checklist.md](dev/standards/quality-checklist.md) | 품질 체크리스트 |
|
|
||||||
| [pagination-policy.md](dev/standards/pagination-policy.md) | 페이지네이션 표준 |
|
|
||||||
| [options-column-policy.md](dev/standards/options-column-policy.md) | JSON options 컬럼 정책 |
|
|
||||||
|
|
||||||
---
|
### features/ - 기능별 문서
|
||||||
|
|
||||||
### rules/ — 비즈니스 규칙
|
|
||||||
|
|
||||||
| 문서 | 설명 |
|
| 문서 | 설명 |
|
||||||
|------|------|
|
|------|------|
|
||||||
| [item-policy.md](rules/item-policy.md) | 품목 정책 |
|
| [boards/README.md](features/boards/README.md) | 게시판 시스템 구현 |
|
||||||
| [pricing-policy.md](rules/pricing-policy.md) | 단가 정책 |
|
| [boards/mng-implementation.md](features/boards/mng-implementation.md) | MNG 게시판 구현 상세 |
|
||||||
| [numbering-rules.md](rules/numbering-rules.md) | 채번 규칙 |
|
| [hr/hr-api-analysis.md](features/hr/hr-api-analysis.md) | HR API 분석 (근태/직원/부서) |
|
||||||
| [client-policy.md](rules/client-policy.md) | 고객사 관리 정책 |
|
|
||||||
| [billing-policy.md](rules/billing-policy.md) | 과금 정책 (CONFIDENTIAL) |
|
|
||||||
| [customer-pricing.md](rules/customer-pricing.md) | 고객 요금표 |
|
|
||||||
| [partner-commission.md](rules/partner-commission.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 |
|
|
||||||
|
|
||||||
---
|
### projects/ - 프로젝트별 문서
|
||||||
|
|
||||||
### features/ — 기능별 문서
|
|
||||||
|
|
||||||
| 문서 | 설명 |
|
|
||||||
|------|------|
|
|
||||||
| [quotes/README.md](features/quotes/README.md) | 견적 시스템 |
|
|
||||||
| [sales/README.md](features/sales/README.md) | 영업 관리 |
|
|
||||||
| [documents/README.md](features/documents/README.md) | 문서관리 |
|
|
||||||
| [finance/README.md](features/finance/README.md) | 재무 관리 |
|
|
||||||
| [hr/](features/hr/) | 인사관리 |
|
|
||||||
| [crm/README.md](features/crm/README.md) | CRM |
|
|
||||||
| [esign/README.md](features/esign/README.md) | 전자서명 |
|
|
||||||
| [equipment/README.md](features/equipment/README.md) | 설비관리 |
|
|
||||||
| [boards/README.md](features/boards/README.md) | 게시판 |
|
|
||||||
| [ai/README.md](features/ai/README.md) | AI 분석 |
|
|
||||||
| [card-vehicle/README.md](features/card-vehicle/README.md) | 법인카드·차량 |
|
|
||||||
| [settlement/README.md](features/settlement/README.md) | 정산 |
|
|
||||||
| [barobill-kakaotalk/README.md](features/barobill-kakaotalk/README.md) | 바로빌 카카오톡 |
|
|
||||||
| [quality-management/README.md](features/quality-management/README.md) | 품질관리 (제품검사, 실적신고) |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### dev/guides/ — 구현 가이드
|
|
||||||
|
|
||||||
| 문서 | 설명 |
|
|
||||||
|------|------|
|
|
||||||
| [swagger-guide.md](dev/guides/swagger-guide.md) | Swagger 작성법 |
|
|
||||||
| [file-storage-guide.md](dev/guides/file-storage-guide.md) | 파일 업로드/다운로드 |
|
|
||||||
| [item-management-migration.md](dev/guides/item-management-migration.md) | Item 전환 가이드 |
|
|
||||||
| [server-how-it-works.md](dev/guides/server-how-it-works.md) | 서버 동작 원리 |
|
|
||||||
| [jenkins-setup-guide.md](dev/guides/jenkins-setup-guide.md) | Jenkins CI/CD |
|
|
||||||
| [erp-api-list.md](dev/guides/erp-api-list.md) | ERP API 목록 |
|
|
||||||
| [erp-api-detail.md](dev/guides/erp-api-detail.md) | ERP API 상세 |
|
|
||||||
| [item-master-guide.md](dev/guides/item-master-guide.md) | 품목기준관리 구조 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### projects/ — 프로젝트 자료
|
|
||||||
|
|
||||||
| 프로젝트 | 문서 | 설명 |
|
| 프로젝트 | 문서 | 설명 |
|
||||||
|---------|------|------|
|
|---------|------|------|
|
||||||
| MES | [projects/mes/README.md](projects/mes/README.md) | MES 개요 |
|
| **MES** | [README.md](projects/mes/README.md) | MES 프로젝트 개요 |
|
||||||
| 5130 이관 | [projects/5130-migration/](projects/5130-migration/) | 레거시 이관 |
|
| **MES** | [MES_PROJECT_ROADMAP.md](projects/mes/MES_PROJECT_ROADMAP.md) | 개발 로드맵 |
|
||||||
| API 연동 | [projects/api-integration/](projects/api-integration/) | React↔API |
|
| **Legacy** | [draw-module.md](projects/legacy-5130/draw-module.md) | 레거시 드로우 모듈 |
|
||||||
| 견적 | [projects/quotation/](projects/quotation/) | 견적 프로젝트 |
|
|
||||||
| 전자서명 | [projects/e-sign/](projects/e-sign/) | 전자서명 |
|
|
||||||
|
|
||||||
---
|
### history/ - 히스토리
|
||||||
|
|
||||||
### dev/deploys/ — 배포/운영
|
| 기간 | 문서 |
|
||||||
|
|
||||||
| 문서 | 설명 |
|
|
||||||
|------|------|
|
|------|------|
|
||||||
| [ops-manual/README.md](dev/deploys/ops-manual/README.md) | 서버 운영 매뉴얼 |
|
| **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) |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### dev/quickstart/ — 빠른 시작
|
## 🏗️ 서브프로젝트 문서
|
||||||
|
|
||||||
| 문서 | 설명 |
|
각 서브프로젝트는 독립적인 `docs/` 디렉토리를 가집니다.
|
||||||
|------|------|
|
|
||||||
| [quick-start.md](dev/quickstart/quick-start.md) | 핵심 규칙 요약 |
|
| 프로젝트 | 문서 경로 | 설명 |
|
||||||
| [dev-commands.md](dev/quickstart/dev-commands.md) | 개발 명령어 모음 |
|
|---------|----------|------|
|
||||||
|
| **API** | [api/docs/INDEX.md](../api/docs/INDEX.md) | REST API 프로젝트 |
|
||||||
|
| **MNG** | [mng/docs/INDEX.md](../mng/docs/INDEX.md) | Plain Laravel 관리자 (운영 주력) |
|
||||||
|
| **Admin** | [admin/docs/INDEX.md](../admin/docs/INDEX.md) | Filament 관리자 (deprecated) |
|
||||||
|
| **React** | [react/docs/](../react/docs/) | Next.js 프론트엔드 |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 서브프로젝트 문서
|
## 📝 문서 작성 가이드
|
||||||
|
|
||||||
| 프로젝트 | 경로 |
|
### 새 문서 작성 시
|
||||||
|---------|------|
|
1. **적절한 폴더 선택**: 위 폴더 구조 참고
|
||||||
| API | [api/docs/](../api/docs/) |
|
2. **파일명**: 소문자 + 하이픈 (kebab-case)
|
||||||
| MNG | [mng/docs/](../mng/docs/) |
|
3. **크기 목표**: 10KB 이하
|
||||||
| React | [react/docs/](../react/docs/) |
|
4. **INDEX 업데이트**: 새 문서는 반드시 이 파일에 추가
|
||||||
|
|
||||||
|
### 폴더 선택 기준
|
||||||
|
- **"개발 계획/작업 예정"** → `plans/` (임시, 완료 후 삭제)
|
||||||
|
- **"어떻게 코드 작성?"** → `standards/`
|
||||||
|
- **"왜 이렇게 설계?"** → `architecture/`
|
||||||
|
- **"무엇이 유효한 데이터?"** → `rules/`
|
||||||
|
- **"무엇을 구현?"** → `specs/`
|
||||||
|
- **"어떻게 구현?"** → `guides/`
|
||||||
|
|
||||||
|
### plans/ 워크플로우
|
||||||
|
1. 개발 계획 문서를 `plans/`에 작성
|
||||||
|
2. 작업 진행
|
||||||
|
3. 완료 후 결과물을 해당 프로젝트 docs에 정리
|
||||||
|
4. plan 문서 삭제
|
||||||
|
|
||||||
|
### plans/flow-tests/
|
||||||
|
API Flow Tester에서 생성되는 JSON 파일 저장 경로
|
||||||
|
- 경로: `plans/flow-tests/*.json`
|
||||||
|
- 용도: MNG API Flow Tester 테스트 시나리오
|
||||||
|
- 예시: `item-master-page-api-flow.json`, `client-api-flow.json`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 폴더 선택 기준
|
## 🔄 문서 구조 변경 이력
|
||||||
|
|
||||||
| 질문 | 폴더 |
|
- **2025-12-09**: 품목 정책 통합 문서 생성
|
||||||
|------|------|
|
- `rules/item-policy.md` 생성 (4개 문서 통합)
|
||||||
| 시스템 현재 상태? | `system/` |
|
- 삭제: `specs/ITEM-MASTER-INDEX.md`, `specs/item-master-field-key-validation.md`, `specs/item-master-field-integration.md`, `plans/items-api-unified-plan.md`
|
||||||
| 코드 작성 규칙? | `dev/standards/` |
|
- 품목 관련 정책을 rules/ 디렉토리로 이동
|
||||||
| 비즈니스 규칙? | `rules/` |
|
|
||||||
| 기능 동작 방식? | `features/` |
|
- **2025-12-09**: Item Master 문서 정리 및 인덱스 생성
|
||||||
| 구현 방법? | `dev/guides/` |
|
- `specs/ITEM-MASTER-INDEX.md` 생성 (개발 현황/필요 항목 정리)
|
||||||
| 개발 계획? | `dev/dev_plans/` |
|
- `history/2025-11/item-master-archived/` 생성 (구버전 문서 아카이브)
|
||||||
| 프로젝트 자료? | `projects/` |
|
- 중복 문서 정리 (front-requests → history 이동)
|
||||||
| 변경 이력? | `dev/changes/` |
|
|
||||||
|
- **2025-12-09**: 문서 정리 및 통합
|
||||||
|
- 중복 분석 문서 삭제 (v2, DB_Modeling)
|
||||||
|
- `SAM_Item_DB_API_Analysis_v3_FINAL.md` → `item-db-analysis.md` 리네임
|
||||||
|
- `ITEM_MASTER_FIELD_INTEGRATION_PLAN.md` → `item-master-field-integration.md` 리네임
|
||||||
|
- `HR_API_ANALYSIS.md` → `features/hr/hr-api-analysis.md` 이동
|
||||||
|
- 날짜 접두사 front 문서 → `history/2025-11/front-requests/` 이동
|
||||||
|
- api/docs에서 프로젝트 문서 분리 (swagger, api-flows만 유지)
|
||||||
|
|
||||||
|
- **2025-12-09**: api/docs 문서 통합
|
||||||
|
- `api/docs/analysis/` → `docs/data/analysis/` 이동
|
||||||
|
- `api/docs/front/` → `docs/front/` 병합
|
||||||
|
- `api/docs/specs/` → `docs/specs/` 병합
|
||||||
|
- api/docs에는 API 구성/설정 문서만 유지 (swagger, api-flows)
|
||||||
|
|
||||||
|
- **2025-12-09**: `plans/` 폴더 추가
|
||||||
|
- 개발 계획 문서용 임시 폴더
|
||||||
|
- 작업 완료 후 정리 → 삭제 워크플로우
|
||||||
|
|
||||||
|
- **2025-12-05**: 폴더 구조 대폭 재정리
|
||||||
|
- `reference/` → `standards/`, `architecture/`, `quickstart/`로 분리
|
||||||
|
- `principles/` → `architecture/`로 통합
|
||||||
|
- 작업별 필수 문서 가이드 추가
|
||||||
|
|
||||||
|
- **2025-11-20**: 문서 구조 대규모 재정리
|
||||||
|
- claudedocs → docs/ 체계화
|
||||||
|
- 각 서브프로젝트별 docs/ 디렉토리 생성
|
||||||
128
README.md
128
README.md
@@ -1,128 +0,0 @@
|
|||||||
# SAM 프로젝트 문서
|
|
||||||
|
|
||||||
SAM ERP 시스템의 기술 문서, 비즈니스 규칙, 기능 명세를 관리하는 저장소입니다.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 대상별 안내
|
|
||||||
|
|
||||||
### 전 팀 공유
|
|
||||||
누구나 참고할 수 있는 공통 문서입니다.
|
|
||||||
|
|
||||||
| 폴더 | 설명 | 예시 |
|
|
||||||
|------|------|------|
|
|
||||||
| **features/** | 기능별 상세 명세 | 견적, CRM, 문서관리, 인사, 재무 등 |
|
|
||||||
| **rules/** | 비즈니스 규칙·정책 | 품목 정책, 단가 정책, 채번 규칙, 청구 정책 |
|
|
||||||
| **projects/** | 프로젝트별 자료 | MES, 5130 마이그레이션, 전자서명 등 |
|
|
||||||
| **system/** | 시스템 현황 | 아키텍처, DB 스키마, Docker, 인프라 |
|
|
||||||
| **resources.md** | 외부 자료 링크 | BI, 제품 소개서 등 대용량 자료 (노션 링크) |
|
|
||||||
|
|
||||||
### 개발팀 전용 (`dev/`)
|
|
||||||
개발 표준, 가이드, 변경 이력 등 개발자 대상 문서입니다.
|
|
||||||
|
|
||||||
| 폴더 | 설명 | 예시 |
|
|
||||||
|------|------|------|
|
|
||||||
| **dev/standards/** | 개발 표준 | API 규칙, Git 컨벤션, 품질 체크리스트 |
|
|
||||||
| **dev/guides/** | 구현 가이드 | Swagger 작성법, 파일 저장, Jenkins 설정 |
|
|
||||||
| **dev/quickstart/** | 빠른 시작 | 개발 명령어, 퀵스타트 가이드 |
|
|
||||||
| **dev/changes/** | 변경 이력 | 날짜별 변경 내용 기록 |
|
|
||||||
| **dev/deploys/** | 배포·운영 | 운영 매뉴얼, 배포 SQL |
|
|
||||||
| **dev/data/** | 데이터 분석 | BOM 매핑 분석, 견적 데이터 |
|
|
||||||
| **dev/history/** | 과거 이력 | 월별 히스토리, 로드맵 |
|
|
||||||
| **dev/dev_plans/** | 개발 계획 | 작업별 계획 문서 (개인 작업용, 정리 후 폐기 가능) |
|
|
||||||
|
|
||||||
### 프론트엔드 전용 (`frontend/`)
|
|
||||||
프론트엔드 개발자 대상 문서입니다.
|
|
||||||
|
|
||||||
| 폴더 | 설명 | 예시 |
|
|
||||||
|------|------|------|
|
|
||||||
| **frontend/api-specs/** | API 연동 명세 | 문서 API 연동 가이드 |
|
|
||||||
| **frontend/integration/** | 프론트-백엔드 연동 | 연동 패턴, 주의사항 |
|
|
||||||
|
|
||||||
### 기획팀 (`requests/`)
|
|
||||||
기획 요청 및 확인 문서입니다.
|
|
||||||
|
|
||||||
| 폴더 | 설명 | 예시 |
|
|
||||||
|------|------|------|
|
|
||||||
| **requests/** | 기획 확인 요청 | 기획서 검토 요청, 워크플로우 공유 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 폴더 구조
|
|
||||||
|
|
||||||
```
|
|
||||||
docs/
|
|
||||||
├── features/ # [공유] 기능별 상세 명세
|
|
||||||
│ ├── quotes/ # 견적 시스템
|
|
||||||
│ ├── sales/ # 영업/수주
|
|
||||||
│ ├── documents/ # 문서관리
|
|
||||||
│ ├── finance/ # 재무/회계
|
|
||||||
│ ├── hr/ # 인사관리
|
|
||||||
│ ├── crm/ # 고객관리
|
|
||||||
│ ├── esign/ # 전자서명
|
|
||||||
│ ├── equipment/ # 설비관리
|
|
||||||
│ ├── boards/ # 게시판
|
|
||||||
│ ├── ai/ # AI 기능
|
|
||||||
│ └── ...
|
|
||||||
│
|
|
||||||
├── rules/ # [공유] 비즈니스 규칙
|
|
||||||
│ ├── item-policy.md
|
|
||||||
│ ├── pricing-policy.md
|
|
||||||
│ ├── numbering-rules.md
|
|
||||||
│ └── ...
|
|
||||||
│
|
|
||||||
├── projects/ # [공유] 프로젝트별 자료
|
|
||||||
│ ├── mes/
|
|
||||||
│ ├── 5130-migration/
|
|
||||||
│ ├── e-sign/
|
|
||||||
│ └── ...
|
|
||||||
│
|
|
||||||
├── system/ # [공유] 시스템 현황
|
|
||||||
│ ├── overview.md
|
|
||||||
│ ├── database/
|
|
||||||
│ ├── docker-setup.md
|
|
||||||
│ └── ...
|
|
||||||
│
|
|
||||||
├── resources.md # [공유] 외부 자료 링크 (노션)
|
|
||||||
│
|
|
||||||
├── dev/ # [개발팀] 개발 전용
|
|
||||||
│ ├── standards/ # 개발 표준
|
|
||||||
│ ├── guides/ # 구현 가이드
|
|
||||||
│ ├── quickstart/ # 빠른 시작
|
|
||||||
│ ├── changes/ # 변경 이력
|
|
||||||
│ ├── deploys/ # 배포/운영
|
|
||||||
│ ├── data/ # 데이터 분석
|
|
||||||
│ ├── history/ # 과거 이력
|
|
||||||
│ └── dev_plans/ # 개발 계획 (개인 작업용)
|
|
||||||
│
|
|
||||||
├── frontend/ # [프론트엔드] 프론트 전용
|
|
||||||
│ ├── api-specs/ # API 연동 명세
|
|
||||||
│ └── integration/ # 연동 가이드
|
|
||||||
│
|
|
||||||
├── requests/ # [기획팀] 기획 요청
|
|
||||||
│
|
|
||||||
├── README.md # 이 문서 (사람용 안내)
|
|
||||||
├── INDEX.md # Claude Code용 문서 인덱스
|
|
||||||
└── TODO.md
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 문서 작성 규칙
|
|
||||||
|
|
||||||
### 파일 이름
|
|
||||||
- 영문 소문자, 하이픈(`-`) 구분: `item-policy.md`
|
|
||||||
- 변경 이력: `YYYYMMDD_설명.md` (예: `20260305_login_fix.md`)
|
|
||||||
- 한글 파일명 허용 (가이드 등 내부 문서)
|
|
||||||
|
|
||||||
### 문서 구조
|
|
||||||
- 모든 MD 파일은 `# 제목`으로 시작
|
|
||||||
- 폴더에 파일이 3개 이상이면 `README.md`로 목차 제공
|
|
||||||
- 이미지/대용량 파일은 노션에 업로드하고 `resources.md`에 링크 추가
|
|
||||||
|
|
||||||
### 폴더 관리
|
|
||||||
- **공유 폴더**: 전 팀이 수정 가능, 변경 시 관련 팀에 공유
|
|
||||||
- **dev/**: 개발팀만 수정
|
|
||||||
- **frontend/**: 프론트엔드 팀만 수정 (API 명세는 개발팀이 제공)
|
|
||||||
- **requests/**: 기획팀이 작성, 개발팀이 확인
|
|
||||||
- **dev/dev_plans/**: 개인 작업용, 완료 후 archive/ 이동 또는 삭제
|
|
||||||
20
architecture/README.md
Normal file
20
architecture/README.md
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
# Architecture (아키텍처 & 설계 원칙)
|
||||||
|
|
||||||
|
> 시스템 설계와 아키텍처 결정의 근간 - **"왜 이렇게 설계하는가"**
|
||||||
|
|
||||||
|
## 목적
|
||||||
|
- 일관된 아키텍처 결정 기준 제공
|
||||||
|
- 기술 부채 방지
|
||||||
|
- 확장성과 유지보수성 확보
|
||||||
|
|
||||||
|
## 문서 목록
|
||||||
|
|
||||||
|
| 문서 | 설명 | 필수 확인 시점 |
|
||||||
|
|------|------|--------------|
|
||||||
|
| [system-overview.md](system-overview.md) | 전체 시스템 아키텍처 | 새 기능 설계 전 |
|
||||||
|
| [security-policy.md](security-policy.md) | 인증/인가, 보안 규칙 | 보안 관련 작업 전 |
|
||||||
|
|
||||||
|
## 관련 폴더
|
||||||
|
- [standards/](../standards/) - 개발 표준 (어떻게 코드를 작성할 것인가)
|
||||||
|
- [rules/](../rules/) - 비즈니스 규칙 (무엇이 유효한 데이터인가)
|
||||||
|
- [specs/](../specs/) - 기술 스펙 (무엇을 구현할 것인가)
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
SAM API는 다층 보안 구조를 통해 무단 접근과 악의적 공격으로부터 시스템을 보호합니다.
|
SAM API는 다층 보안 구조를 통해 무단 접근과 악의적 공격으로부터 시스템을 보호합니다.
|
||||||
|
|
||||||
**최종 업데이트:** 2025-12-26
|
**최종 업데이트:** 2025-11-13
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -779,6 +779,6 @@ SANCTUM_REFRESH_TOKEN_EXPIRATION=10080 # 7일 → 14일 (20160)
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**작성일:** 2025-12-26
|
**작성일:** 2025-11-13
|
||||||
**버전:** 1.0
|
**버전:** 1.0
|
||||||
**담당자:** SAM Development Team
|
**담당자:** SAM Development Team
|
||||||
359
architecture/system-overview.md
Normal file
359
architecture/system-overview.md
Normal file
@@ -0,0 +1,359 @@
|
|||||||
|
# SAM 시스템 아키텍처
|
||||||
|
|
||||||
|
**업데이트**: 2025-11-18
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 전체 아키텍처
|
||||||
|
|
||||||
|
SAM은 다중 애플리케이션 Laravel 기반 시스템으로 구성됩니다:
|
||||||
|
|
||||||
|
```
|
||||||
|
SAM/
|
||||||
|
├── admin/ # Laravel 12 + Filament v4 (관리자 패널, 점차 deprecated)
|
||||||
|
├── api/ # Laravel 12 REST API (백엔드)
|
||||||
|
├── mng/ # Laravel 12 + Plain Blade/Tailwind (운영 관리자 패널)
|
||||||
|
├── react/ # Next.js 15 프론트엔드
|
||||||
|
├── 5130/ # 레거시 PHP 애플리케이션
|
||||||
|
└── docker/ # Docker 설정
|
||||||
|
```
|
||||||
|
|
||||||
|
## 애플리케이션별 상세
|
||||||
|
|
||||||
|
### admin/ - 관리자 패널
|
||||||
|
|
||||||
|
**기술 스택:**
|
||||||
|
- Laravel 12
|
||||||
|
- Filament v4
|
||||||
|
- TailwindCSS + Vite
|
||||||
|
|
||||||
|
**주요 기능:**
|
||||||
|
- 테넌트 관리
|
||||||
|
- 사용자 관리
|
||||||
|
- 권한 관리 (RBAC)
|
||||||
|
- 메뉴 관리
|
||||||
|
- 역할 및 부서 관리
|
||||||
|
|
||||||
|
**개발 명령어:**
|
||||||
|
```bash
|
||||||
|
composer dev # 전체 서비스 실행
|
||||||
|
php artisan serve # Laravel 서버
|
||||||
|
npm run dev # Vite HMR
|
||||||
|
```
|
||||||
|
|
||||||
|
### mng/ - Plain Laravel 관리자 패널
|
||||||
|
|
||||||
|
**기술 스택:**
|
||||||
|
- Laravel 12
|
||||||
|
- PHP 8.4
|
||||||
|
- Pure Blade + Tailwind CSS 3.x
|
||||||
|
- Sanctum (인증)
|
||||||
|
|
||||||
|
**주요 특징:**
|
||||||
|
- AI 없이 수정 가능한 단순 구조
|
||||||
|
- Filament 의존성 제거
|
||||||
|
- admin/ 기능 점진적 이식
|
||||||
|
- 좌측 사이드바 + 상단 헤더 레이아웃
|
||||||
|
|
||||||
|
**개발 명령어:**
|
||||||
|
```bash
|
||||||
|
php artisan serve # Laravel 서버
|
||||||
|
npm run dev # Vite HMR (Tailwind)
|
||||||
|
```
|
||||||
|
|
||||||
|
**현재 진행 상황:**
|
||||||
|
- ✅ Phase 1: 인증 시스템 (로그인/로그아웃)
|
||||||
|
- ✅ Phase 2: 레이아웃 구조 (sidebar + header)
|
||||||
|
- ✅ Phase 3: 테넌트 선택 기능
|
||||||
|
- 🔄 Phase 4: 시스템 관리 메뉴 (admin/ 이식)
|
||||||
|
|
||||||
|
### api/ - REST API
|
||||||
|
|
||||||
|
**기술 스택:**
|
||||||
|
- Laravel 12
|
||||||
|
- PHP 8.4
|
||||||
|
- Sanctum (인증)
|
||||||
|
- l5-swagger 9.0 (API 문서화)
|
||||||
|
|
||||||
|
**주요 기능:**
|
||||||
|
- RESTful API 엔드포인트
|
||||||
|
- Swagger 문서화
|
||||||
|
- Multi-tenant 지원
|
||||||
|
- 권한 기반 접근 제어
|
||||||
|
|
||||||
|
**API 구조:**
|
||||||
|
- **인증**: `/v1/login`, `/v1/logout`, `/v1/signup`
|
||||||
|
- **사용자**: `/v1/users/*`
|
||||||
|
- **테넌트**: `/v1/tenants/*`
|
||||||
|
- **제품**: `/v1/products/*`
|
||||||
|
- **자재**: `/v1/materials/*`
|
||||||
|
- **카테고리**: `/v1/categories/*`
|
||||||
|
- **파일**: `/v1/file/*`
|
||||||
|
- **디자인**: `/v1/design/*`
|
||||||
|
|
||||||
|
**API 문서:**
|
||||||
|
- Swagger UI: `http://api.sam.kr/api-docs/index.html`
|
||||||
|
- JSON Spec: `http://api.sam.kr/docs/api-docs.json`
|
||||||
|
|
||||||
|
### react/ - Next.js 프론트엔드
|
||||||
|
|
||||||
|
**기술 스택:**
|
||||||
|
- Next.js 15
|
||||||
|
- React 19.2.0
|
||||||
|
- TypeScript 5.x
|
||||||
|
- Tailwind CSS v4
|
||||||
|
- Zustand (상태 관리)
|
||||||
|
- React Hook Form
|
||||||
|
- shadcn/ui
|
||||||
|
- next-intl (i18n)
|
||||||
|
|
||||||
|
**주요 기능:**
|
||||||
|
- 모던 UI/UX
|
||||||
|
- Server Components 및 App Router
|
||||||
|
- 실시간 데이터 동기화
|
||||||
|
- 역할 전환 기능
|
||||||
|
- 대시보드
|
||||||
|
- 다국어 지원 (i18n)
|
||||||
|
|
||||||
|
## Multi-tenant 아키텍처
|
||||||
|
|
||||||
|
### 데이터 격리
|
||||||
|
|
||||||
|
- **방식**: `tenant_id` 컬럼 기반 격리
|
||||||
|
- **스코프**: BelongsToTenant global scope 자동 적용
|
||||||
|
- **모델**: `shared/Models/` 디렉토리의 공통 모델 사용
|
||||||
|
|
||||||
|
### 테넌트 구조
|
||||||
|
|
||||||
|
```
|
||||||
|
Tenant (회사/조직)
|
||||||
|
├── Users (사용자)
|
||||||
|
├── Departments (부서)
|
||||||
|
├── Roles (역할)
|
||||||
|
├── Permissions (권한)
|
||||||
|
└── Data (비즈니스 데이터)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 테넌트 전환
|
||||||
|
|
||||||
|
- 사용자는 여러 테넌트에 속할 수 있음 (`user_tenants` 테이블)
|
||||||
|
- 기본 테넌트 설정 가능
|
||||||
|
- API: `POST /v1/users/me/tenants/switch`
|
||||||
|
|
||||||
|
## 인증 및 권한
|
||||||
|
|
||||||
|
### 인증 흐름
|
||||||
|
|
||||||
|
1. **API Key 인증** (모든 요청)
|
||||||
|
- 헤더: `X-API-KEY`
|
||||||
|
- 미들웨어: `auth.apikey`
|
||||||
|
|
||||||
|
2. **사용자 인증** (보호된 라우트)
|
||||||
|
- 엔드포인트: `POST /v1/login`
|
||||||
|
- 토큰: Sanctum Bearer Token
|
||||||
|
- 미들웨어: `auth:sanctum`
|
||||||
|
|
||||||
|
### 권한 시스템
|
||||||
|
|
||||||
|
**3단계 권한 구조:**
|
||||||
|
1. **사용자 역할 권한**: User → Role → Permissions
|
||||||
|
2. **사용자 직접 권한**: User → Permissions
|
||||||
|
3. **부서 역할 권한**: User → Department → Role → Permissions
|
||||||
|
|
||||||
|
**권한 명명 규칙:**
|
||||||
|
```
|
||||||
|
menu:{menu_id}.{permission_type}
|
||||||
|
```
|
||||||
|
|
||||||
|
**권한 타입:**
|
||||||
|
- `view` - 조회
|
||||||
|
- `create` - 생성
|
||||||
|
- `update` - 수정
|
||||||
|
- `delete` - 삭제
|
||||||
|
- `approve` - 승인
|
||||||
|
- `export` - 내보내기
|
||||||
|
- `manage` - 관리
|
||||||
|
|
||||||
|
## 데이터베이스 구조
|
||||||
|
|
||||||
|
### 핵심 테이블
|
||||||
|
|
||||||
|
**인증 및 권한:**
|
||||||
|
- `api_keys` - API 키 관리
|
||||||
|
- `users` - 사용자 계정
|
||||||
|
- `user_tenants` - 사용자-테넌트 관계
|
||||||
|
- `permissions` - 권한 정의
|
||||||
|
- `roles` - 역할 정의
|
||||||
|
- `model_has_permissions/roles` - 권한 할당
|
||||||
|
|
||||||
|
**멀티테넌트:**
|
||||||
|
- `tenants` - 테넌트 마스터
|
||||||
|
- `tenant_user_profiles` - 테넌트별 사용자 프로필
|
||||||
|
- `departments` - 부서 구조
|
||||||
|
- `department_user` - 사용자-부서 관계
|
||||||
|
|
||||||
|
**제품 관리:**
|
||||||
|
- `categories` - 카테고리 계층
|
||||||
|
- `category_fields` - 동적 필드 정의
|
||||||
|
- `products` - 제품 카탈로그
|
||||||
|
- `product_components` - BOM 관계
|
||||||
|
- `materials` - 자재 마스터
|
||||||
|
|
||||||
|
**디자인 및 제조:**
|
||||||
|
- `models` - 디자인 모델
|
||||||
|
- `model_versions` - 모델 버전
|
||||||
|
- `bom_templates` - BOM 템플릿
|
||||||
|
- `bom_template_items` - BOM 항목
|
||||||
|
|
||||||
|
**주문 및 운영:**
|
||||||
|
- `orders` - 주문/견적 마스터
|
||||||
|
- `order_items` - 주문 항목
|
||||||
|
- `order_item_components` - 주문 항목 구성
|
||||||
|
- `clients` - 고객/벤더 마스터
|
||||||
|
|
||||||
|
**시스템:**
|
||||||
|
- `audit_logs` - 감사 로그 (13개월 보관)
|
||||||
|
- `files` - 다형성 파일 첨부
|
||||||
|
- `common_codes` - 공통 코드
|
||||||
|
|
||||||
|
### 공통 컬럼 패턴
|
||||||
|
|
||||||
|
모든 테이블에 공통으로 포함:
|
||||||
|
- `id` - 기본 키
|
||||||
|
- `tenant_id` - 테넌트 ID (필수)
|
||||||
|
- `created_by` - 생성자 ID
|
||||||
|
- `updated_by` - 수정자 ID
|
||||||
|
- `deleted_by` - 삭제자 ID
|
||||||
|
- `created_at`, `updated_at` - 타임스탬프
|
||||||
|
- `deleted_at` - Soft Delete
|
||||||
|
|
||||||
|
## 미들웨어 스택
|
||||||
|
|
||||||
|
**실행 순서:**
|
||||||
|
1. `ApiRateLimiter` - Rate Limiting
|
||||||
|
2. `ApiKeyMiddleware` - API Key 검증
|
||||||
|
3. `CheckSwaggerAuth` - Swagger 인증 체크
|
||||||
|
4. `CorsMiddleware` - CORS 처리
|
||||||
|
5. `CheckPermission` - 권한 검증
|
||||||
|
6. `PermMapper` - 권한 매핑
|
||||||
|
|
||||||
|
## 라우팅 구조
|
||||||
|
|
||||||
|
**기본 경로 그룹:**
|
||||||
|
```php
|
||||||
|
Route::prefix('v1')->middleware(['auth.apikey'])->group(function () {
|
||||||
|
// 공개 라우트
|
||||||
|
Route::post('/login', [AuthController::class, 'login']);
|
||||||
|
|
||||||
|
// 보호된 라우트
|
||||||
|
Route::middleware(['auth:sanctum'])->group(function () {
|
||||||
|
Route::get('/users', [UserController::class, 'index']);
|
||||||
|
// ...
|
||||||
|
});
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 공유 모델 구조
|
||||||
|
|
||||||
|
`shared/Models/` 디렉토리 구조:
|
||||||
|
- **Members/** - 사용자 및 테넌트 관리
|
||||||
|
- **Products/** - 제품 카탈로그 및 BOM
|
||||||
|
- **Materials/** - 자재 사양 및 재고
|
||||||
|
- **Orders/** - 주문 처리 워크플로우
|
||||||
|
- **Tenants/** - 멀티테넌트 설정
|
||||||
|
- **Commons/** - 공유 유틸리티 및 공통 데이터
|
||||||
|
|
||||||
|
## Docker 설정
|
||||||
|
|
||||||
|
**위치**: `docker/` 디렉토리
|
||||||
|
|
||||||
|
### 서비스 구성
|
||||||
|
|
||||||
|
**docker-compose.yml**에 정의된 5개 서비스:
|
||||||
|
|
||||||
|
1. **nginx** - 리버스 프록시 서버
|
||||||
|
- 포트: 80
|
||||||
|
- 도메인: `api.sam.kr`, `admin.sam.kr`, `dev.sam.kr`
|
||||||
|
- 보안 규칙 적용 (경로 탐색 공격 차단, User-Agent 필터링)
|
||||||
|
|
||||||
|
2. **api** - Laravel 12 API 서버
|
||||||
|
- 이미지: `php:8.4-fpm`
|
||||||
|
- PHP 확장: zip, mysqli, pdo, pdo_mysql, intl
|
||||||
|
- Supervisor로 nginx + php-fpm 동시 실행
|
||||||
|
|
||||||
|
3. **admin** - Laravel 12 Admin 패널
|
||||||
|
- 이미지: `php:8.4-fpm`
|
||||||
|
- Filament v4 지원
|
||||||
|
- Supervisor로 nginx + php-fpm 동시 실행
|
||||||
|
|
||||||
|
4. **react** - Next.js 15 프론트엔드
|
||||||
|
- 이미지: `node:20-alpine`
|
||||||
|
- 포트: 3000 (내부)
|
||||||
|
- HMR 지원 (WebSocket)
|
||||||
|
|
||||||
|
5. **mysql** - MySQL 8.0 데이터베이스
|
||||||
|
- 포트: 3306
|
||||||
|
- 데이터베이스: `samdb`
|
||||||
|
- 사용자: `samuser` / `sampass`
|
||||||
|
|
||||||
|
### 네트워크 구조
|
||||||
|
|
||||||
|
```
|
||||||
|
samnet (bridge network)
|
||||||
|
├── nginx (리버스 프록시)
|
||||||
|
├── api (Laravel API)
|
||||||
|
├── admin (Laravel Admin)
|
||||||
|
├── react (Next.js)
|
||||||
|
└── mysql (데이터베이스)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 도메인 매핑
|
||||||
|
|
||||||
|
| 도메인 | 대상 서비스 | 포트 | 용도 |
|
||||||
|
|--------|-----------|------|------|
|
||||||
|
| `api.sam.kr` | api (Laravel) | 80 | REST API |
|
||||||
|
| `admin.sam.kr` | admin (Laravel) | 80 | 관리자 패널 |
|
||||||
|
| `dev.sam.kr` | react (Next.js) | 3000 | 프론트엔드 |
|
||||||
|
|
||||||
|
### 주요 설정 파일
|
||||||
|
|
||||||
|
**nginx/nginx.conf**
|
||||||
|
- 리버스 프록시 설정
|
||||||
|
- 보안 규칙 (경로 탐색, User-Agent 필터링)
|
||||||
|
- WebSocket 지원 (Next.js HMR)
|
||||||
|
|
||||||
|
**api/Dockerfile, admin/Dockerfile**
|
||||||
|
- PHP 8.4-fpm 기반
|
||||||
|
- Composer 2 포함
|
||||||
|
- Supervisor 설정
|
||||||
|
|
||||||
|
**react/Dockerfile**
|
||||||
|
- Node.js 20 Alpine
|
||||||
|
- Next.js 15 개발 서버
|
||||||
|
|
||||||
|
**mysql/init.sql**
|
||||||
|
- 초기 데이터베이스 설정
|
||||||
|
|
||||||
|
## 저장소 구조
|
||||||
|
|
||||||
|
이 프로젝트는 **3개의 독립적인 Git 저장소**로 구성됩니다:
|
||||||
|
|
||||||
|
1. **api/** - API 프로젝트 저장소
|
||||||
|
2. **admin/** - 관리자 패널 저장소
|
||||||
|
3. **react/** - Next.js 프론트엔드 저장소
|
||||||
|
|
||||||
|
각 저장소는 독립적으로 운영되며:
|
||||||
|
- 개별 Git 히스토리 및 브랜치
|
||||||
|
- 독립적인 환경 설정 (`.env` 파일)
|
||||||
|
- 독립적인 의존성 및 빌드 프로세스
|
||||||
|
|
||||||
|
## 관련 문서
|
||||||
|
|
||||||
|
- [API 개발 규칙](./api_rules.md)
|
||||||
|
- [데이터베이스 스키마](./database_schema.md)
|
||||||
|
- [보안 가이드](./security.md)
|
||||||
|
- [Git 컨벤션](./git_conventions.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**최종 업데이트**: 2025-11-18 (PHP 8.4, Filament v4, Next.js 15 반영)
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
@@ -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 추가)
|
|
||||||
@@ -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);
|
|
||||||
@@ -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);
|
|
||||||
Binary file not shown.
Binary file not shown.
@@ -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>
|
|
||||||
@@ -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 & 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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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);
|
|
||||||
@@ -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);
|
|
||||||
Binary file not shown.
Binary file not shown.
@@ -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>
|
|
||||||
@@ -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 & 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);">▶</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);">▶</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);">▶</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>
|
|
||||||
@@ -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);">▼</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;">▲ 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;">▲ 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>
|
|
||||||
@@ -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);
|
|
||||||
@@ -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);
|
|
||||||
Binary file not shown.
Binary file not shown.
@@ -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;">▲ 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;">▲ 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">₩</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>
|
|
||||||
@@ -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 & 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">₩</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>
|
|
||||||
@@ -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;">▲ 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;">▲ 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);">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -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);
|
|
||||||
@@ -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);
|
|
||||||
Binary file not shown.
Binary file not shown.
@@ -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;">▲ 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;">▲ 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">₩</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>
|
|
||||||
@@ -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 & 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">₩</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>
|
|
||||||
@@ -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;">▲ 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;">▲ 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;">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -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);
|
|
||||||
@@ -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);
|
|
||||||
Binary file not shown.
Binary file not shown.
@@ -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;">▲ 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;">▲ 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">₩</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>
|
|
||||||
@@ -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 & 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">₩</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>
|
|
||||||
@@ -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;">▲ 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;">▲ 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);">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -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);
|
|
||||||
@@ -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);
|
|
||||||
Binary file not shown.
Binary file not shown.
@@ -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;">▲ 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;">▲ 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">₩</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>
|
|
||||||
@@ -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 & 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">₩</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>
|
|
||||||
@@ -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;">▲ 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;">▲ 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;">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -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);
|
|
||||||
@@ -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);
|
|
||||||
Binary file not shown.
Binary file not shown.
@@ -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;">▲ 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;">▲ 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">₩</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>
|
|
||||||
@@ -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 & 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">₩</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>
|
|
||||||
@@ -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;">▲ 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;">▲ 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;">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -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);
|
|
||||||
@@ -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);
|
|
||||||
Binary file not shown.
Binary file not shown.
@@ -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;">▲ 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;">▲ 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">₩</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>
|
|
||||||
@@ -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 & 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">₩</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>
|
|
||||||
@@ -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;">▲ 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;">▲ 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">₩</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;">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -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);
|
|
||||||
@@ -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);
|
|
||||||
Binary file not shown.
Binary file not shown.
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -211,7 +211,7 @@ class ProductResource extends Resource
|
|||||||
|
|
||||||
## 🔗 관련 문서
|
## 🔗 관련 문서
|
||||||
|
|
||||||
- 이전 작업: `docs/changes/20251111_admin_users_improvement.md`
|
- 이전 작업: `/Users/hskwon/Works/@KD_SAM/SAM/docs/changes/20251111_1354_admin_users_improvement.md`
|
||||||
- CLAUDE.md: `/Users/hskwon/Works/@KD_SAM/SAM/CLAUDE.md`
|
- CLAUDE.md: `/Users/hskwon/Works/@KD_SAM/SAM/CLAUDE.md`
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -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)
|
|
||||||
@@ -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
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
# 품의서 지급방법 UI 개선
|
|
||||||
|
|
||||||
**날짜:** 2026-03-06
|
|
||||||
**작업자:** Claude Code
|
|
||||||
|
|
||||||
## 변경 개요
|
|
||||||
|
|
||||||
품의서 2종(구매품의서, 비용정산품의서)에 지급방법 선택 기능을 추가/개선하였다.
|
|
||||||
|
|
||||||
## 변경 내용
|
|
||||||
|
|
||||||
### 1. 구매품의서 (pr_purchase) - 지급방법 추가
|
|
||||||
|
|
||||||
- 납품 정보(납품업체/납품예정일/납품장소) 아래에 **지급방법 radio** 추가
|
|
||||||
- 옵션: `법인카드` / `계좌이체`
|
|
||||||
- **일괄 선택** 방식 (전체 구매건에 하나의 지급방법)
|
|
||||||
|
|
||||||
### 2. 비용정산품의서 (pr_settlement) - 지급방법 행별 변경
|
|
||||||
|
|
||||||
- 기존: 테이블 아래에 일괄 radio (법인카드/개인선지출)
|
|
||||||
- 변경: 각 내역행에 **지급방법 select** 컬럼 추가
|
|
||||||
- 테이블 하단에 **지급방법별 합계표** 추가 (법인카드 합계 / 개인선지출 합계)
|
|
||||||
- 이유: 하나의 정산서에 법인카드/개인선지출 내역이 혼재할 수 있음
|
|
||||||
|
|
||||||
### 3. 지출품의서 (pr_expense) - 라벨 변경
|
|
||||||
|
|
||||||
- `사용일자` -> `지출일자` 라벨 변경 (폼 + 조회 화면)
|
|
||||||
|
|
||||||
## 수정된 파일
|
|
||||||
|
|
||||||
| 파일 | 변경 내용 |
|
|
||||||
|------|----------|
|
|
||||||
| `mng/resources/views/approvals/partials/_purchase-request-form.blade.php` | 구매품의서 지급방법 radio 추가, 비용정산품의서 행별 select + 합계표, 지출일자 라벨 변경 |
|
|
||||||
| `mng/resources/views/approvals/partials/_purchase-request-show.blade.php` | 구매품의서/비용정산품의서 조회 화면 동기화 |
|
|
||||||
|
|
||||||
## Alpine.js 데이터 변경
|
|
||||||
|
|
||||||
### 구매품의서
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// formData에 추가
|
|
||||||
payment_method: initialData?.payment_method || '',
|
|
||||||
|
|
||||||
// getFormData()에 포함
|
|
||||||
{ ...base, ..., payment_method: this.formData.payment_method }
|
|
||||||
```
|
|
||||||
|
|
||||||
### 비용정산품의서
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// makeItem()에 추가
|
|
||||||
payment_method: data?.payment_method || '',
|
|
||||||
|
|
||||||
// computed 속성 추가
|
|
||||||
get corporateCardTotal() { /* corporate_card 행만 합산 */ },
|
|
||||||
get personalAdvanceTotal() { /* personal_advance 행만 합산 */ },
|
|
||||||
|
|
||||||
// getFormData() 변경
|
|
||||||
// 기존: payment_method: this.formData.payment_method (일괄)
|
|
||||||
// 변경: 각 item.payment_method (행별) + corporate_card_total, personal_advance_total
|
|
||||||
```
|
|
||||||
|
|
||||||
## 관련 문서
|
|
||||||
|
|
||||||
- [결재 양식 기술 명세](../features/approvals/form-types.md) - 섹션 12, 14 업데이트
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**최종 업데이트**: 2026-03-06
|
|
||||||
@@ -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)
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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호
|
|
||||||
|
|
||||||
@@ -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부씩 보관합니다.**
|
|
||||||
- **※ 서약 위반 시 민·형사상 책임을 질 수 있습니다.**
|
|
||||||
@@ -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호
|
|
||||||
@@ -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호
|
|
||||||
@@ -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": "버전 관리 시스템 도입, 개정이력 추적 시작"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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())
|
|
||||||
@@ -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())
|
|
||||||
@@ -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;
|
|
||||||
|
Before Width: | Height: | Size: 134 KiB After Width: | Height: | Size: 134 KiB |
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 178 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user