3.5 KiB
3.5 KiB
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. 개발 단계
- 기획 및 디자인: 본 계획서 확정 및 와이어프레임 작성.
- 프론트엔드 개발: 컴포넌트 개발 및 시뮬레이션 로직 구현.
- 데이터 연동: (백엔드 필요 시) API 연동 또는 로컬 목업 데이터 사용.
- 배포 및 테스트.