# 대시보드 index.html 모듈화 (파일 분할)

## 태스크 ID: task-907.1
## 한정위임: 분석 → 분할 → 테스트 → 보고까지 완료

---

## 문제

`dashboard/index.html`이 190KB / 3,253줄 / 54,137 토큰으로, AI 도구의 파일 읽기 제한(25,000 토큰)을 초과한다.
이로 인해 세션 시작 시 "File content exceeds maximum allowed tokens" 에러가 발생하여 대시보드 코드 분석/수정이 불가능해지는 상황이 반복된다.

## 목표

index.html을 **컴포넌트 단위로 분할**하여 단일 파일이 25,000 토큰(약 80KB)을 초과하지 않도록 한다.

## 기술 스택 확인

현재 대시보드는 **CDN 기반 React + Babel standalone** (빌드 도구 없음)을 사용한다:
- React/ReactDOM CDN
- Babel standalone (브라우저 내 JSX 변환)
- Tailwind CSS CDN
- 단일 `<script type="text/babel">` 블록에 모든 컴포넌트 포함

## 분할 전략

### 방법: `<script type="text/babel" src="...">` 방식
Babel standalone은 외부 파일 로드를 지원한다.

```html
<!-- index.html (메인) -->
<script type="text/babel" src="components/TaskView.js"></script>
<script type="text/babel" src="components/TeamView.js"></script>
<script type="text/babel" src="components/AutomationView.js"></script>
<script type="text/babel" src="components/App.js"></script>
```

### 분할 기준
1. **각 탭 뷰 컴포넌트** → 독립 파일 (TaskView, TeamView, OrgView, TechDebtView, AutomationView 등)
2. **공통 유틸/상수** → `components/utils.js` (teamLabels, teamColors, API fetcher 등)
3. **메인 App + 라우팅** → `components/App.js`
4. **index.html** → HTML 셸 + script 태그만 (CSS, CDN imports, mount point)

### 파일 크기 목표
- 각 컴포넌트 파일: **80KB 이하** (25K 토큰 이내)
- index.html (셸): **10KB 이하**

## 서버 설정

`dashboard/server.py`의 정적 파일 서빙에서 `.js` 파일에 올바른 Content-Type을 반환하는지 확인.
필요 시 `components/` 경로를 정적 파일로 서빙하도록 추가.

## 검증 기준

1. **기능 동일성**: 분할 전후 대시보드 동작 완전 동일 (6개 탭 + 헤더 토글 + API 연동)
2. **파일 크기**: 모든 파일 80KB 이하
3. **서버 테스트**: `curl http://localhost:8000/dashboard/components/TaskView.js` 200 OK 반환
4. **브라우저 호환**: Babel standalone 외부 파일 로드 정상 동작
5. **기존 테스트**: dashboard/tests/ 기존 테스트 통과 유지

## 수정 대상 파일

- `dashboard/index.html` — 분할 (기존 파일 → 셸로 축소)
- `dashboard/components/*.js` — 신규 생성 (분할된 컴포넌트)
- `dashboard/server.py` — 정적 파일 서빙 경로 추가 (필요 시)

## 수정 금지 파일

- `scripts/` 디렉토리 전체
- `orchestrator/` 디렉토리 전체
- `utils/` 디렉토리 전체

## 주의사항

- Babel standalone의 외부 파일 로드는 **동기적 XMLHttpRequest**를 사용하므로 file:// 프로토콜에서는 동작하지 않지만, HTTP 서버 경유이므로 문제없음
- 컴포넌트 간 의존성 순서 주의: utils → 개별 View → App 순서로 로드
- window 전역 객체를 통한 컴포넌트 공유 또는 모듈 패턴 활용
- ⚠️ Babel standalone src 방식이 동작하지 않을 경우, 대안으로 `fetch()` + `eval()` 또는 빌드 도구 도입 검토 (보고서에 명시)