# task-603.1 완료 보고서: 대시보드 모바일 UI 최적화

## SCQA

**S**: 운영 대시보드(`/home/jay/workspace/dashboard/index.html`)가 데스크톱 기준으로 설계되어, 모바일(375px)에서 탭 메뉴 깨짐, 상태 표시 불일치, 작업내용 표시 문제가 존재한다.

**C**: 5개 탭이 `flex-1` 균등 분할되어 모바일에서 "프로젝트뷰" 등 긴 텍스트가 두 줄로 깨지고, `active` 상태가 "활성"으로 표시되어 다른 상태("유휴"/"대기")와 불일치하며, 작업내용(currentTask)이 한 줄 truncate로 긴 내용 파악이 어렵다.

**Q**: 모바일 뷰포트에서 탭, 상태 표시, 작업내용 표시를 깔끔하게 최적화할 수 있는가?

**A**: 3건 모두 수정 완료. (1) 탭에 `shortLabel` 추가하여 모바일에서 축약 표시, (2) `active` 상태를 `idle`과 동일하게 "유휴"/`bg-slate-300`으로 통일, (3) MemberRow/CenterCard/FlexTeamCard 3개 컴포넌트에서 currentTask를 이름 아래 별도 줄에 2줄 제한(`-webkit-line-clamp: 2`)으로 표시.

## 수정 파일

- `/home/jay/workspace/dashboard/index.html` (6개소 수정)

## 변경 상세

### 1. 탭 메뉴 모바일 최적화
- **라인 1603-1609**: tabs 배열에 `shortLabel` 속성 추가 (조직/프로젝트/시스템/기록/지성)
- **라인 1912-1913**: 탭 렌더링에서 `sm:` 이상은 `tab.label`, 미만은 `tab.shortLabel` 표시

### 2. "활성" 상태 → "유휴" 통일
- **라인 86**: `active` 상태의 색상을 `bg-blue-500` → `bg-slate-300`, 레이블을 `'활성'` → `'유휴'`로 변경

### 3. currentTask 2줄 제한
- **MemberRow (라인 139-146)**: currentTask를 이름/뱃지 flex div 외부로 이동, `-webkit-line-clamp: 2` 적용
- **CenterCard (라인 243-248)**: currentTask를 이름/StatusDot div 아래 별도 줄로 이동, `ml-8` 정렬, 2줄 제한
- **FlexTeamCard (라인 302-314)**: currentTask를 외부 flex에서 제거하고 role 아래 내부로 이동, 2줄 제한

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **FlexTeamCard currentTask 위치 불일치** — currentTask가 `flex-1` div 외부에 위치하여 레이아웃 불일치. 내부로 이동하여 role 아래 배치
2. **CenterCard currentTask 정렬** — 아바타(w-6+gap) 대비 왼쪽 여백이 없어 시각적 불일치. `ml-8` 추가로 정렬
3. **모바일 탭 font-size 미세 이슈** — 축약 라벨 사용으로 모바일에서 5개 탭이 한 줄에 안정적으로 표시됨. 추가 font-size 조정 불필요 확인

## 검증

- HTML/JSX 문법 오류 없음 (수동 검증)
- 수정 6개소 모두 정확한 위치에 반영 확인 (Read tool 재검증 완료)
- pyright 대상 아님 (순수 HTML/JSX 파일, Python 파일 변경 없음)
- 기존 테스트 파일 없음 (프론트엔드 HTML 단일 파일)

## QC 자동 검증

```
overall: PASS (3 PASS, 7 SKIP)
- file_check: PASS (115634 bytes)
- data_integrity: PASS
- critical_gap: PASS
- api_health: SKIP (서버 작업 아님)
- tdd_check: SKIP (Lv.1 HTML/CSS UI 수정, TDD 적용 대상 아님)
- pyright_check: SKIP (Python 파일 없음)
- style_check: SKIP (Python 파일 없음)
- test_runner: SKIP (테스트 디렉토리 없음)
- schema_contract: SKIP (workers 없음)
- scope_check: SKIP
```