# 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.  **배포 및 테스트**.