### 2.2 엔드포인트 * **URL**: `/api/v1/company/sales-config` (예시) * **Method**: `GET` * **Headers**: * `X-Tenant-ID`: `{company_id}` (또는 세션/토큰 기반 인증) ### 2.3 응답 데이터 구조 (JSON) ```json { "company_info": { "id": "comp_12345", "name": "건축자재(주)", 3. **Commission Simulator**: * 프로그램 선택 Dropdown (API에서 로드된 프로그램 목록). * 실시간 수당 계산기. 4. **Sales List & Detail Modal** (New): * **Sales List**: API에서 가져온 `sales_records`를 테이블 형태로 표시. * **Detail Modal**: * **기본 정보**: 5가지 주요 일자(계약일, 가입비일, 구독료일, 시작일, 수정일) 표시. * **수당 상세**: 현재 상품 기준 수당 계산. * **히스토리**: 상품 변경 이력(타임라인) 표시. 5. **Sub-Manager Management** (New): * **Hierarchy View**: 내 하위 관리자/영업사원 목록 표시. * **Performance**: 하위 관리자의 실적(매출, 계약 건수) 요약 표시. * **Detail Modal**: 하위 관리자 클릭 시, 상세 실적 요약(매출, 등급 등)을 모달로 표시. ### 3.3 디자인 적용 (`tone.md` 준수) * **Background**: `bg-gray-50` (rgb(250, 250, 250)) * **Font**: `font-sans` (Pretendard) * **Primary Color**: `text-blue-600`, `bg-blue-600` (버튼 등) * **Cards**: `bg-white rounded-xl shadow-sm p-6` ## 4. 개발 단계 1. **API Mocking**: `api_mock.json` 또는 PHP 파일로 간단한 Mock API 구현. 2. **UI Skeleton**: `index.php`에 HTML 구조 및 Tailwind CSS 로드. 3. **Data Fetching**: `fetch()`를 사용하여 API에서 회사 정보 로드. 4. **Component Rendering**: 로드된 데이터를 기반으로 UI 렌더링. ## 5. User Review Required * **API 방식**: 별도의 백엔드 프레임워크 없이 PHP로 간단한 JSON 응답을 주는 API를 `api/company_info.php`와 같이 만들어서 테스트하시겠습니까? * **Frontend 환경**: `index.php` 파일 하나에서 작업하려면 React CDN 방식이 간편합니다. Node.js 기반의 Next.js 프로젝트로 완전히 분리하시겠습니까? (현재 폴더 구조상 `index.php` 수정을 요청하셨으므로 **PHP + JS** 방식을 추천합니다.)