# InsuRo 네비게이션 하이브리드 전환 구현

## 배경
제이회장님이 InsuRo 좌측 사이드바의 메뉴 항목(23개+)이 많아 시각적으로 불안하다고 판단.
task-1362.1 설계 검토 결과 **옵션 B(하이브리드)** 가 선정되어 구현 착수.

## 설계안 (task-1362.1 보고서 기반)

### 구조: 상단 4개 도메인 탭 + 좌측 컨텍스트 서브메뉴 (최대 5개)

| 도메인 탭 | 서브메뉴 항목 | 항목 수 |
|-----------|-------------|---------|
| 고객관리 | 대시보드, 고객 목록, 파이프라인, 메신저, 디지털 명함 | 5 |
| AI 마케팅 | AI 키워드 분석, AI 콘텐츠 작성, 콘텐츠 관리, AI 원스탑 포스팅, AI 포스팅 자동화 | 5 |
| 분석 & 도구 | 소식지분석, 보험료/환급률 분석, 보험사 전산정보, 각종 계산기, 외부 참고 사이트 | 5 |
| 안내 & 설정 | 인슈로 소개, 이용방법/가이드, API키, 금소법, 공지/커뮤니티 | 5 |

### 비메뉴 요소 배치
- 로고 + 구독 상태: 상단 바 양끝
- 유저 프로필: 우측 드롭다운 (아바타/이름/소속/이메일/로그아웃 통합)
- PREMIUM 업그레이드 CTA 카드: 서브메뉴 하단 (FREE 유저만 표시)
- 관리자 메뉴: adminOnly 유저에게만 "설정" 드롭다운 내 관리자 섹션으로 분기

### 서브메뉴
- 폭: 180px (기존 220~260px에서 축소)
- 선택된 도메인 탭에 해당하는 항목만 표시 (항상 최대 5개)
- 현재 활성 페이지의 도메인 탭 자동 하이라이트

### 모바일 (768px 미만)
- 바텀 탭 바 4개 아이콘 (고객관리/AI마케팅/분석도구/안내설정) + "더보기"
- 서브메뉴는 바텀 시트로 표시

### 디자인 톤 유지
- Pretendard 폰트 유지
- 골드 PREMIUM 배지 스타일 유지
- hover/active 상태 기존 스타일 유지
- task-1358.1에서 적용된 프리미엄 SaaS 디자인 톤 계승

## 현재 코드 구조
- 프로젝트: `/home/jay/projects/InsuRo/`
- 현재 사이드바: `src/components/AppSidebar.tsx`
- 기술 스택: React + react-router-dom, shadcn/ui, Tailwind CSS, lucide-react
- 인증: Supabase auth, useUserPlan/useUserRole 커스텀 훅
- 조건 렌더링: premiumOnly(PREMIUM 배지+클릭가드), adminOnly(섹션 필터)

## 구현 범위
1. 상단 도메인 탭 바 컴포넌트 신규 생성
2. 좌측 컨텍스트 서브메뉴 컴포넌트 (선택된 탭의 항목만 표시)
3. AppSidebar.tsx → 새 레이아웃으로 전환 (기존 사이드바 코드 제거 또는 교체)
4. 라우팅 연동: URL 기반 도메인 탭 자동 선택
5. 유저 프로필 드롭다운 (상단 바 우측)
6. PREMIUM CTA 카드 (서브메뉴 하단, FREE 유저만)
7. 관리자 메뉴 분기
8. 모바일 반응형 (바텀 탭 + 바텀 시트)
9. premiumOnly / adminOnly 조건 렌더링 유지

## 참조 문서
- 설계 보고서: `/home/jay/workspace/memory/reports/task-1362.1.md`
- 현재 사이드바 코드: `/home/jay/projects/InsuRo/src/components/AppSidebar.tsx`

## 주의사항
- 기존 라우팅 경로 변경 금지 (URL 구조 유지)
- premiumOnly, adminOnly 로직 반드시 보존
- Supabase auth 연동 깨지지 않도록 주의
- 기존 페이지 컴포넌트 수정 최소화 — 레이아웃만 변경