# InsuRo 모바일 최적화

## 배경
- InsuRo: 보험 CRM 앱 (React + Vite + Capacitor + Supabase)
- 프로젝트 경로: `/home/jay/projects/InsuRo/`
- todo.json issue-003에 등록된 6개 최적화 항목

## 작업 항목 (6건)

### 1. 번들 사이즈 축소 (코드 스플리팅)
- React.lazy + Suspense로 라우트 기반 코드 스플리팅 적용
- 현재 번들 사이즈 측정 → 최적화 후 비교
- `vite-plugin-visualizer`로 번들 분석 (이미 설치되어 있으면 실행만)
- 대용량 라이브러리 dynamic import 처리

### 2. Safe Area / 노치 지원
- `env(safe-area-inset-*)` CSS 적용
- Capacitor 앱에서 상/하단 safe area 확보
- 메인 레이아웃 컴포넌트에 safe area padding 추가

### 3. user-scalable=no 제거
- `index.html`의 viewport meta 태그에서 `user-scalable=no` 제거
- 접근성(a11y) 준수: 사용자가 확대/축소 가능하게

### 4. 터치 타겟 44px 이상
- 모든 버튼, 링크, 인터랙티브 요소의 최소 크기를 44x44px로 보장
- Tailwind 클래스로 `min-h-[44px] min-w-[44px]` 적용
- 특히 네비게이션, 폼 입력, 아이콘 버튼 체크

### 5. 오프라인 폴백 페이지
- Service Worker에 오프라인 폴백 페이지 등록
- 네트워크 불가 시 기본 안내 페이지 표시
- Capacitor 환경에서도 동작 확인

### 6. 이미지 WebP 변환 + lazy load
- public/ 내 이미지를 WebP로 변환
- `<img loading="lazy">` 적용
- Vite의 이미지 최적화 플러그인 검토

## 검증 방법
1. `npm run build` (또는 `bun run build`) 성공 확인
2. TypeScript 에러 없음: `npx tsc --noEmit`
3. 번들 사이즈 before/after 비교 (dist/ 크기)
4. 기존 테스트 통과 확인 (있다면)
5. Lighthouse 점수가 있다면 참고 (없으면 생략)

## 주의사항
- InsuRo 프로젝트 디렉토리 외의 파일 수정 금지
- 기존 기능을 깨뜨리지 않도록 주의
- Capacitor 설정 변경 시 기존 값 백업
- git user 설정: `JonghyukJeon <jonghyuk.jeon@gmail.com>` (커밋 시 필요하면)
- 패키지 설치가 필요하면 bun 사용 (`bun add`)