# task-480.1: 대시보드 모바일 최적화 + PWA 재활성화

## 작업 레벨: Lv.2

## 수정 파일
- `/home/jay/workspace/dashboard/index.html` — 모바일 반응형 CSS/레이아웃 개선
- `/home/jay/workspace/dashboard/manifest.json` — PWA 매니페스트 점검/보완
- `/home/jay/workspace/dashboard/sw.js` — 서비스워커 재활성화

## 1. 모바일 반응형 최적화 (index.html)

### 탭바
- 모바일에서 탭 버튼 터치하기 어려움
- 모바일(sm 이하): 탭 버튼 높이 최소 44px, 폰트 14px 이상
- 탭 4개 가로 균등 분할 (flex, 각 25%), 스크롤 없이 한 줄

### 카드 레이아웃
- 모바일: 모든 그리드를 1열(grid-cols-1)로
- sm 이상: 2열, md 이상: 기존 유지
- 카드 내부 패딩 모바일에서 축소

### 폰트/간격
- 모바일 본문 폰트: 최소 14px
- 헤더 영역: 모바일에서 패딩 축소
- 멤버 행(MemberRow): 터치 타겟 최소 44px 높이

### 팀카드 멤버 목록
- 모바일에서 멤버 이름/역할 잘리지 않도록 truncate 또는 줄바꿈
- StatusDot + ModelBadge 한 줄에 표시

### 기록(Archive) 탭
- 모바일 필터 버튼 가로 스크롤 또는 줄바꿈
- 마크다운 상세보기 오버플로우 방지 (overflow-x: auto)

### 시스템뷰/프로젝트뷰
- 통계 카드: 모바일 2열, 데스크탑 4열 유지
- 기술부채 목록 모바일 가독성

## 2. PWA 서비스워커 재활성화

### manifest.json 점검
- name, short_name, start_url, display, theme_color, background_color 필수
- start_url: /dashboard/
- display: standalone
- 아이콘: 최소 192x192, 512x512 (없으면 placeholder SVG 데이터URI)
- scope: /dashboard/

### index.html PWA 메타태그
- <link rel="manifest" href="/dashboard/manifest.json">
- <meta name="theme-color">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="default">

### sw.js 서비스워커
- 현재 해제 코드(unregister) 제거
- 서비스워커 등록: navigator.serviceWorker.register('/dashboard/sw.js')
- 캐시 전략: Network First (API는 항상 최신, HTML/CSS 네트워크 우선+캐시 폴백)
- 캐시 이름: dashboard-v3
- 오프라인 폴백: "오프라인입니다" 메시지

### server.py (필요시만)
- /dashboard/manifest.json, /dashboard/sw.js 서빙 확인
- sw.js에 Cache-Control: no-cache 헤더

## 주의사항
- 기존 4개 탭, 논리적 팀(마케팅팀/컨설팅팀), 횡단조직 등 절대 변경 금지
- CSS/Tailwind 클래스 추가 위주. 데스크탑 레이아웃 깨뜨리지 말 것

## 테스트
- 크롬 DevTools 모바일 시뮬레이션 (375px, 390px, 414px)
- 탭 전환 정상, 카드/멤버 정보 잘림 없음
- PWA: manifest.json 로드, 서비스워커 등록 확인
- 데스크탑 레이아웃 기존 동일

## QC
- pyright 에러 0건 (server.py 변경 시)