# task-1404.1 완료 보고서: InsuRo 디자인 업그레이드 Phase 2 — P0 즉시 처리 6건

## SCQA

**S**: InsuRo 프로젝트에 대한 task-1364.1 디자인 감사 결과, P0 우선순위(임팩트 높고 난이도 낮음) 6건이 식별되어 즉시 수정이 필요한 상태이다.

**C**: 모바일 premiumOnly 메뉴에 UpgradeModal이 미연결되어 전환 접점이 상실되고, Intro 페이지에 CTA가 전무하여 이탈을 유발하며, ErrorBoundary 부재로 JS 에러 시 White Screen이 발생하고, h1 크기 역전/하드코딩된 색상 등 UI 일관성 문제가 존재한다.

**Q**: 6건의 P0 이슈를 수정하여 전환율 개선, 에러 복구, UI 일관성을 달성할 수 있는가?

**A**: 6건 모두 수정 완료. Vite 빌드 성공(7.22초, 에러 0건), 프리뷰 서버 재시작 확인(PID 424262, port 5173). 수정 파일 8개, premiumOnly UpgradeModal 연동/CTA 추가/ErrorBoundary 래핑/h1 표준화/Skeleton 로딩/bg-primary 통일 적용.

---

## 수정 상세

### 1. 모바일 premiumOnly → UpgradeModal 연결 (임팩트 5/난이도 1)
- `src/components/navigation/MobileBottomNav.tsx`: `onPremiumClick` optional prop 추가, `handleItemClick`에서 premiumOnly 클릭 시 `onPremiumClick(featureName)` 호출
- `src/components/DashboardLayout.tsx`: `MobileBottomNav`에 `onPremiumClick={handlePremiumClick}` prop 전달 (기존 `handlePremiumClick` 콜백 재활용)

### 2. Intro.tsx Hero CTA 버튼 추가 (임팩트 4/난이도 1)
- `src/pages/Intro.tsx`: `Button` 컴포넌트 import, `useNavigate` hook 사용, Hero 섹션 badges 아래에 "무료로 시작하기"(/pricing) + "서비스 둘러보기"(/guide) CTA 2개 추가

### 3. ErrorBoundary 추가 (임팩트 5/난이도 2)
- `src/App.tsx`: React `Component` 기반 ErrorBoundary 클래스 추가, `QueryClientProvider` 내부에서 전체 앱을 래핑, 에러 시 "오류가 발생했습니다" 복구 UI + "홈으로 돌아가기" 버튼 표시

### 4. h1 크기 표준화 (임팩트 3/난이도 1)
- `src/pages/MarketNewsletter.tsx:132`: `text-base` → `text-2xl`
- `src/pages/PremiumComparison.tsx:224`: `text-base` → `text-2xl`

### 5. CrmDashboard 로딩 → Skeleton 교체 (임팩트 3/난이도 1)
- `src/pages/CrmDashboard.tsx`: `Skeleton` import 추가, 텍스트 로딩("불러오는 중...")을 구조화된 Skeleton 레이아웃(h1 + stat 카드 4개 + 패널 2개)으로 교체

### 6. Pricing.tsx bg-blue-500 → bg-primary (임팩트 2/난이도 1)
- `src/pages/Pricing.tsx:217`: `bg-blue-500 text-white hover:bg-blue-600` → `bg-primary text-white hover:bg-primary/90`
- `src/pages/Pricing.tsx:367`: `border-blue-500` → `border-primary`
- `src/pages/Pricing.tsx:373`: Badge `bg-blue-500` → `bg-primary`

---

## 발견 이슈 및 해결

### 자체 해결 (4건)
1. **Pricing.tsx에 border-blue-500도 하드코딩됨** — bg-blue-500과 함께 border-primary로 통일 수정 (line 367)
2. **MobileBottomNav에서 premiumOnly 항목의 제목 미전달** — `handleItemClick`에 `title` 파라미터 추가, `onClick`에서 `item.title` 전달하여 UpgradeModal에 기능명 표시
3. **Intro.tsx에 useNavigate 미사용** — CTA 버튼의 onClick에서 navigate 사용을 위해 import 및 hook 호출 추가
4. **CrmDashboard Skeleton 구조 설계** — 실제 대시보드 레이아웃(h1 + 4개 stat 그리드 + 2개 차트 패널)을 반영하는 Skeleton 구조 적용

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

---

## 산출물 파일 목록

- `/home/jay/projects/InsuRo/src/components/navigation/MobileBottomNav.tsx`
- `/home/jay/projects/InsuRo/src/components/DashboardLayout.tsx`
- `/home/jay/projects/InsuRo/src/pages/Intro.tsx`
- `/home/jay/projects/InsuRo/src/App.tsx`
- `/home/jay/projects/InsuRo/src/pages/MarketNewsletter.tsx`
- `/home/jay/projects/InsuRo/src/pages/PremiumComparison.tsx`
- `/home/jay/projects/InsuRo/src/pages/CrmDashboard.tsx`
- `/home/jay/projects/InsuRo/src/pages/Pricing.tsx`

---

## 테스트 결과

- Vite 빌드: ✅ 성공 (7.22초, TypeScript 에러 0건, 번들 132 entries)
- 프리뷰 서버: ✅ 실행 중 (port 5173, PID 424262)
- bg-blue-500 잔존: 0건 (Pricing.tsx grep 확인)
- h1 text-base 잔존: MarketNewsletter/PremiumComparison에서 text-2xl로 변경 확인

---

## 셀프 QC 체크리스트

- [x] 1. 영향 파일: MobileBottomNav ↔ DashboardLayout (prop 연동), 나머지 독립
- [x] 2. 엣지 케이스: onPremiumClick optional(?.)으로 안전, ErrorBoundary 상태 리셋 + 홈 리다이렉트
- [x] 3. 작업 지시 일치: 6건 모두 지시대로 수정
- [x] 4. 에러 처리/보안: ErrorBoundary로 전역 에러 핸들링, XSS 리스크 없음
- [x] 5. 테스트 커버리지: Vite 빌드(TypeScript + 번들링) 통과
- [x] 6. 이슈 자체 해결: 4건 발견/해결 완료
- [x] 7. 아키텍처 원칙: SOLID 준수 (MobileBottomNav에 callback prop 패턴)
- [x] 8. 인터페이스 변경: MobileBottomNavProps에 optional prop 추가 (하위 호환)

---

## 모델 사용 기록

- 팀원: 라다A / 작업: Task 1,2,3 (MobileBottomNav, Intro CTA, ErrorBoundary) / 모델: sonnet / 정당성: -
- 팀원: 라다B / 작업: Task 4,5,6 (h1 표준화, Skeleton, bg-primary) / 모델: sonnet / 정당성: -
- 팀원: 로키 (횡단조직) / 작업: 디자인 QC 검증 (P0 6건 수정 전체) / 모델: opus / 정당성: 디자인 QC 필수 검증자

## 머지 판단
- **머지 필요**: No (메인 브랜치 직접 수정, worktree 미사용 — Lv.1 난이도)