# InsuRo 모바일 UX — 토스 스타일 카드형 허브 네비게이션

## 작업 레벨: Lv.3

## 프로젝트 시스템 3문서
- DevSystem: `/home/jay/workspace/memory/plans/anu-guide-system/plan.md`

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`

## 미팅 기록
- 2026-04-29 모바일 UX 에이전트 미팅 (미미르/아테나/프레이야/로키)
- 합의: 토스 스타일 카드형 허브로 모바일 서브메뉴 접근 개선

## 기능 개요
현재 모바일에서 하단 탭 4개 → 재터치 시 팝업 서브메뉴 → UX 허들.
토스 앱처럼 각 탭 터치 시 **카드형 허브 화면**으로 진입하여 서브메뉴를 카드 리스트로 표시.

## 수정 사항

### 1. 모바일 전용 카드형 허브 레이아웃
**모바일(md 이하)에서만 적용. PC는 기존 사이드바 유지.**

각 메인 메뉴 탭 터치 시 → 해당 카테고리의 **카드형 허브 화면** 표시:

```
┌─────────────────────────────┐
│ AI 마케팅                     │
│ AI 기반 콘텐츠 마케팅           │
│                               │
│ ┌──────────┐ ┌──────────┐    │
│ │ 🔍        │ │ ✏️        │    │
│ │ AI 키워드  │ │ AI 콘텐츠  │    │
│ │ 분석      │ │ 작성      │    │
│ └──────────┘ └──────────┘    │
│ ┌──────────┐ ┌──────────┐    │
│ │ 📋        │ │ ⚡        │    │
│ │ 콘텐츠    │ │ 원스탑    │    │
│ │ 관리      │ │ 포스팅    │    │
│ └──────────┘ └──────────┘    │
│ ┌──────────┐                  │
│ │ 🤖        │                  │
│ │ AI 포스팅  │                  │
│ │ 자동화    │                  │
│ └──────────┘                  │
├─────────────────────────────┤
│ 고객관리  AI마케팅  분석&도구  설정 │
└─────────────────────────────┘
```

각 카드 구성:
- 아이콘 (크게, 눈에 띄게)
- 기능명 (2줄 이내)
- 간단 설명 (선택, 1줄)
- 프리미엄 뱃지 (premiumOnly 항목)

카드 터치 → 해당 기능 페이지로 바로 이동.

### 2. 4개 카테고리 각각 카드 허브 구성

**고객관리**: 대시보드, 고객 목록, 파이프라인, 고객 증권분석, 메신저, 디지털 명함
**AI 마케팅**: AI 키워드 분석, AI 콘텐츠 작성, 콘텐츠 관리, 원스탑 포스팅, AI 포스팅 자동화
**분석 & 도구**: 정보성 키워드 분석, 소식지분석, 보험료/환급률 분석, 인슈위키, 메디스캔, PDF 편집기, 이미지 편집기, 보험사 전산정보, 각종 계산기, 외부 참고 사이트
**안내 & 설정**: 인슈로 소개, 이용방법/가이드, API키, 금소법, 공지/커뮤니티, 마이페이지, 개인 설정, 플랜 & 구독

### 3. 기존 팝업 서브메뉴 제거 (모바일만)
- 현재 하단 탭 재터치 시 뜨는 서브메뉴 팝업 → **모바일에서 제거**
- 하단 탭 터치 = 항상 카드 허브 화면으로 이동
- PC에서는 기존 동작 유지 (사이드바)

### 4. 카드 데이터는 navigationConfig.ts에서 가져오기
`src/components/navigation/navigationConfig.ts`에 이미 메뉴 구조가 정의되어 있으므로, 카드 허브는 이 데이터를 재사용.
하드코딩 금지 — navigationConfig의 items 배열을 그대로 카드로 렌더링.

### 5. 2열 그리드 레이아웃
- 모바일: 2열 그리드 (작은 화면에서도 깔끔)
- 카드 간격: gap-3
- 카드 스타일: 라운드 코너, 약한 그림자, 아이콘 중앙

## affected_files
- `src/components/navigation/MobileTabBar.tsx` 또는 관련 모바일 네비게이션 컴포넌트 (수정)
- `src/components/MobileCategoryHub.tsx` (신규 — 카드형 허브 컴포넌트)
- `src/components/DashboardLayout.tsx` (수정 — 모바일 레이아웃 분기)

## 검증 시나리오
1. 모바일(375px) → 하단 "AI 마케팅" 터치 → 카드형 허브 표시 (5개 카드)
2. 카드 터치 → 해당 기능 페이지로 이동
3. 프리미엄 기능 → 카드에 뱃지 표시
4. PC → 기존 사이드바 유지 (변경 없음)
5. 하단 탭 재터치 시 팝업 안 뜸 (모바일)
6. 4개 카테고리 모두 카드 허브 정상 표시
7. npm run build 성공