72 lines
3.5 KiB
Markdown
72 lines
3.5 KiB
Markdown
# CodeBridgeExy 영업 수당 체계 UI 계획서
|
|
|
|
## 1. 프로젝트 개요
|
|
**프로젝트명**: CodeBridgeExy 영업 수당 관리 및 시뮬레이션 시스템
|
|
**목적**: 엑셀로 관리되던 영업 수당 체계(`sample.xlsx`)를 웹 기반 UI로 전환하여, 영업 사원 및 관리자가 수당을 쉽게 계산하고 시뮬레이션하며, 실적을 관리할 수 있도록 함.
|
|
|
|
## 2. 주요 기능 및 UI 구성
|
|
|
|
### 2.1 대시보드 (Dashboard)
|
|
* **개요**: 전체 영업 현황 및 수당 지급 현황을 한눈에 파악.
|
|
* **주요 지표 (KPI)**:
|
|
* 총 매출액 (Total Sales)
|
|
* 총 지급 수당 (Total Commission Paid)
|
|
* 이번 달 예상 수당 (Estimated Commission)
|
|
* 프로그램별 판매 비중 (Pie Chart)
|
|
* **디자인 컨셉**: Glassmorphism 카드 디자인, 다크/라이트 모드 지원, 동적 그래프 (Chart.js or Recharts).
|
|
|
|
### 2.2 수당 시뮬레이터 (Commission Simulator)
|
|
* **기능**: 프로그램 유형과 조건을 입력하면 예상 수당을 자동으로 계산하여 보여줌.
|
|
* **입력 항목**:
|
|
* 프로그램 선택 (QR코드, 사진 관리 등)
|
|
* 계약 기간 (기본 7년/84개월)
|
|
* 가입비 및 구독료 설정 (기본값 자동 로드, 수정 가능)
|
|
* **출력 항목 (실시간 계산)**:
|
|
* **판매자 수당 (Seller)**: 가입비의 20% + 구독료의 50%
|
|
* **영업 관리자 수당 (Manager)**: 가입비의 5% + 구독료의 30%
|
|
* **교육 지원자 수당 (Educator)**: 가입비의 3% + 구독료의 20%
|
|
* **회사 마진 (Company Margin)**: 가입비의 70% 등
|
|
* **UI 구성**: 좌측 입력 폼, 우측 결과 카드 (영수증 형태 또는 카드 형태).
|
|
|
|
### 2.3 프로그램 및 수당 기준 관리 (Admin)
|
|
* **기능**: `sample.xlsx`의 기준 데이터를 관리 (CRUD).
|
|
* **데이터 테이블**:
|
|
* 프로그램명
|
|
* 단가
|
|
* 구독료
|
|
* 수당 배분율 (판매자, 관리자, 교육자)
|
|
* **UI 구성**: 정렬 및 필터링이 가능한 데이터 그리드.
|
|
|
|
## 3. 데이터 모델 (Data Model)
|
|
`sample.xlsx` 분석 기반:
|
|
|
|
| 필드명 | 설명 | 예시 데이터 |
|
|
| :--- | :--- | :--- |
|
|
| `program_type` | 프로그램 타입 | QR코드, 사진 관리 |
|
|
| `unit_price` | 프로그램 단가 | 10,400,000 |
|
|
| `subscription_fee` | 월 구독료 | 100,000 |
|
|
| `duration_months` | 계약 기간 | 84 |
|
|
| `join_fee` | 가입비 | 2,000,000 |
|
|
| `commission_seller_join_rate` | 판매자 가입비 수당율 | 20% |
|
|
| `commission_seller_sub_rate` | 판매자 구독료 수당율 | 50% |
|
|
| `commission_manager_join_rate` | 관리자 가입비 수당율 | 5% |
|
|
| `commission_manager_sub_rate` | 관리자 구독료 수당율 | 30% |
|
|
|
|
## 4. 기술 스택 (제안)
|
|
* **Frontend**: React (Next.js)
|
|
* **Styling**: Tailwind CSS (Premium Design, Responsive)
|
|
* **State Management**: Zustand or Context API
|
|
* **Charts**: Recharts or Chart.js
|
|
* **Icons**: Lucide React or Heroicons
|
|
|
|
## 5. 디자인 가이드 (Aesthetics)
|
|
* **Color Palette**: 신뢰감을 주는 Deep Blue & Purple Gradients.
|
|
* **Typography**: Pretendard or Inter (가독성 최우선).
|
|
* **Interaction**: 버튼 호버 효과, 모달 등장 애니메이션, 수치 카운트업 효과.
|
|
|
|
## 6. 개발 단계
|
|
1. **기획 및 디자인**: 본 계획서 확정 및 와이어프레임 작성.
|
|
2. **프론트엔드 개발**: 컴포넌트 개발 및 시뮬레이션 로직 구현.
|
|
3. **데이터 연동**: (백엔드 필요 시) API 연동 또는 로컬 목업 데이터 사용.
|
|
4. **배포 및 테스트**.
|