Files
sam-kd/salesmanagement/sales_commission_ui_plan.md
hskwon aca1767eb9 초기 커밋: 5130 레거시 시스템
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경
- DB 연결 하드코딩 → .env 기반으로 변경
- MySQL strict mode DATE 오류 수정
2025-12-10 20:14:31 +09:00

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. 개발 단계

  1. 기획 및 디자인: 본 계획서 확정 및 와이어프레임 작성.
  2. 프론트엔드 개발: 컴포넌트 개발 및 시뮬레이션 로직 구현.
  3. 데이터 연동: (백엔드 필요 시) API 연동 또는 로컬 목업 데이터 사용.
  4. 배포 및 테스트.