# task-427: 대시보드 모바일 최적화 + PWA 설치 기능

## 목표
대시보드를 모바일에서 쾌적하게 사용할 수 있도록 최적화하고,
크롬에서 "홈 화면에 추가"로 앱처럼 설치할 수 있는 PWA 기능을 추가한다.

## 현재 상태
- 대시보드 URL: `http://100.76.130.39:8000/dashboard/`
- 기술: 단일 HTML + React CDN + Tailwind
- Tailwind responsive 일부 적용되어 있으나 모바일 전용 최적화는 미흡
- PWA 기능 없음

## 작업 항목

### 1. 모바일 UI 최적화
- **탭 네비게이션**: 모바일에서 하단 고정 탭바 (Bottom Navigation) 또는 상단 스크롤 탭
- **카드 레이아웃**: 모바일에서 1열 풀 너비 카드
- **터치 타겟**: 모든 클릭 영역 최소 44px
- **폰트 사이즈**: 모바일에서 읽기 편한 크기 (최소 14px)
- **조직뷰**: 팀 카드들이 모바일에서 세로 스택으로 깔끔하게 쌓임
- **프로젝트뷰**: 프로젝트 카드 + 작업 리스트 모바일 최적화
- **시스템뷰**: 봇 상태 카드 모바일 최적화
- **safe-area**: 노치/다이나믹 아일랜드 대응 (`env(safe-area-inset-*)`)
- viewport meta tag 확인: `<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">`

### 2. PWA 기능 구현

#### manifest.json
```json
{
  "name": "제이 조직 대시보드",
  "short_name": "대시보드",
  "description": "AI 에이전트 조직 대시보드",
  "start_url": "/dashboard/",
  "display": "standalone",
  "background_color": "#f1f5f9",
  "theme_color": "#1e40af",
  "orientation": "any",
  "icons": [
    { "src": "/dashboard/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/dashboard/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}
```

#### Service Worker (sw.js)
- 기본 캐시 전략: Network First (항상 최신 데이터 우선)
- 오프라인 fallback: "연결 없음" 페이지
- 캐시 대상: HTML, CSS(Tailwind CDN), JS(React CDN), 아이콘
- API 호출은 캐시하지 않음 (항상 서버에서 가져오기)

#### index.html 수정
- `<link rel="manifest" href="/dashboard/manifest.json">`
- `<meta name="theme-color" content="#1e40af">`
- `<meta name="apple-mobile-web-app-capable" content="yes">`
- `<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">`
- Service Worker 등록 스크립트

#### 아이콘 생성
- 192x192, 512x512 PNG 아이콘 필요
- 간단한 텍스트 기반 아이콘으로 생성 (Canvas API 또는 SVG → PNG 변환)
- 배경: #1e40af (파란색), 텍스트: "JH" 또는 "대시보드" 아이콘

#### server.py 수정
- `/dashboard/manifest.json` 서빙 경로 추가
- `/dashboard/sw.js` 서빙 경로 추가
- `/dashboard/icon-*.png` 서빙 경로 추가
- MIME type 올바르게 설정

### 3. 설치 프롬프트 UI
- 크롬에서 PWA 설치 가능 시 "앱 설치" 배너 또는 버튼 표시
- `beforeinstallprompt` 이벤트 활용
- 설치 완료 후 배너 숨김

## 파일 참조
- `/home/jay/workspace/dashboard/index.html`
- `/home/jay/workspace/dashboard/server.py`
- 신규: `/home/jay/workspace/dashboard/manifest.json`
- 신규: `/home/jay/workspace/dashboard/sw.js`
- 신규: `/home/jay/workspace/dashboard/icon-192.png`, `icon-512.png`

## 완료 조건
1. 모바일에서 대시보드 3개 탭 모두 쾌적하게 표시
2. 크롬에서 "홈 화면에 추가" 가능 (PWA 설치)
3. standalone 모드로 앱처럼 실행
4. 아이콘 정상 표시
5. 기존 데스크탑 뷰 깨지지 않음