# task-907.1 완료 보고서: 대시보드 index.html 모듈화 (파일 분할)

**작업일:** 2026-03-24
**팀:** dev8-team (라/Ra 팀장)
**소요시간:** 39분 (15:25 → 16:04)
**GLM 재시도:** 1회 (1차 타임아웃 → 2차 성공)

---

## SCQA

**S**: `dashboard/index.html`이 190KB / 3,253줄 / 54,137 토큰의 단일 파일로, CDN 기반 React + Babel standalone 구조의 대시보드 전체 코드를 포함하고 있다.

**C**: AI 도구의 파일 읽기 제한(25,000 토큰)을 초과하여 "File content exceeds maximum allowed tokens" 에러가 반복 발생. 대시보드 코드 분석/수정이 불가능해지는 운영 장애가 지속되고 있었다.

**Q**: Babel standalone의 `<script type="text/babel" src="...">` 외부 파일 로드를 활용하여, 기능 동일성을 유지하면서 모든 파일을 25,000 토큰(80KB) 이내로 분할할 수 있는가?

**A**: 9개 컴포넌트 파일로 분할 완료. index.html은 190KB → 4.6KB(97.5% 감소)로 축소, 최대 파일(App.js)이 38KB/~9,500토큰으로 25K 토큰 제한 이내. 기존 테스트 78건 전체 통과, 서버 정적 파일 서빙 정상 동작 확인.

---

## 분할 결과

**Before → After**
- index.html: 190,340 bytes → 4,667 bytes (97.5% 감소, 목표 <10KB 충족)

**생성된 컴포넌트 (9개, 모두 <80KB)**
- utils.js: 35,995B (654줄, ~9,000 토큰) — teamLabels, teamColors, React hooks
- App.js: 38,010B (586줄, ~9,500 토큰) — org 탭 + 메인 라우팅
- ProjectView.js: 35,448B (557줄, ~9,000 토큰)
- SystemView.js: 20,668B (362줄, ~5,200 토큰)
- MktingAutoView.js: 15,783B (260줄, ~4,000 토큰)
- GroupChatView.js: 12,927B (269줄, ~3,300 토큰)
- HistoryView.js: 11,465B (198줄, ~2,900 토큰)
- AutomationView.js: 11,210B (187줄, ~2,800 토큰)
- ArchiveView.js: 5,051B (108줄, ~1,300 토큰)

**로드 순서**: utils → 7개 View → App (의존성 순서 준수)

---

## 검증 결과

**기존 테스트**
- dashboard/tests/: 78 passed, 0 failed (test_mktingauto_api.py 40건 제외 — 기존 이슈)
- test_mktingauto_api.py 40건 실패: `DataLoader.parse_mktingauto_todo` 메서드 미존재 (본 작업과 무관)

**파일 크기**
- index.html: 4.6KB (목표 <10KB)
- 최대 컴포넌트: App.js 38KB (목표 <80KB)
- 최대 토큰 추정: ~9,500 (목표 <25,000)

**서버 서빙**
- SimpleHTTPRequestHandler가 `/dashboard/components/*.js` 자동 서빙 (server.py 수정 불필요)

**수정 금지 파일 확인**
- scripts/, orchestrator/, utils/ 디렉토리: 미변경 확인

---

## 발견 이슈 및 해결

### 자체 해결 (4건)

1. **.tmp 파일 잔존** — GLM 작업 중 생성된 ProjectView.js.tmp, utils.js.tmp 삭제 완료
2. **GLM 1차 타임아웃** — GLM이 컴포넌트는 생성했으나 index.html 축소 미완료. 2차 시도에서 완료
3. **보고서 SCQA 포맷 미준수** — GLM 보고서를 팀장이 SCQA로 재작성
4. **Babel networkidle 이슈** — GLM이 테스트 wait_until을 "load" + sleep(3)으로 변경하여 해결

### 범위 외 미해결 (2건)

1. **test_mktingauto_api.py 40건 실패** — 범위 외: `DataLoader.parse_mktingauto_todo` 메서드 미구현 기존 이슈
2. **sw.js 캐시 목록에 components/ 미포함** — 범위 외: PWA 오프라인 캐시 전략은 본 작업 범위 밖. 향후 sw.js PRE_CACHE_URLS에 component 파일 추가 권장

---

## 생성/수정 파일

**신규 (9개)**: dashboard/components/{utils,App,ProjectView,SystemView,ArchiveView,HistoryView,GroupChatView,MktingAutoView,AutomationView}.js

**수정 (2개)**: dashboard/index.html (190KB→4.6KB 셸), dashboard/sw.js (v6→v8)

**백업**: dashboard/index.html.backup (원본 보존)

---

## QC 검증

```json
{
  "task_id": "task-907.1",
  "overall": "WARN",
  "summary": "4 PASS, 7 SKIP, 1 WARN",
  "details": {
    "data_integrity": "PASS (completed, .done 일치, 39분)",
    "critical_gap": "PASS",
    "spec_compliance": "PASS",
    "duplicate_check": "PASS (최대 유사도 4.8%)",
    "file_check": "WARN (SCQA 재작성으로 해결)",
    "test_runner": "SKIP (HTML/JS 분할, 관련 테스트 0개)",
    "pyright_check": "SKIP (Python 파일 미변경)",
    "style_check": "SKIP (Python 파일 미변경)"
  }
}
```