# InsuRo 사이드바 프리미엄 디자인 개선

## 현재 스크린샷
`/home/jay/.cokacdir/workspace/autoset/photo_AQADow9rG8XPeVZ-.jpg`

## 현재 문제점
1. 메뉴 아이템 간격 불균일 (섹션마다 다름)
2. 섹션 헤더(안내/구독/AI 마케팅/고객관리)와 하위 아이템 시각적 구분 약함
3. 아이콘 크기/정렬 불일치
4. 프로필 카드 디자인 촌스러움 (둥근 "종혁" 뱃지)
5. PREMIUM 뱃지 색상이 전체 톤과 부조화
6. 호버/활성 상태 피드백 없음
7. 전체적으로 프로토타입 수준 — SaaS 프리미엄 느낌 부족

## 레퍼런스 (목표 수준)
- Linear App 사이드바: 미니멀, 타이트, 정돈
- Notion 사이드바: 깔끔한 계층 구조, 호버 효과
- Figma 좌측 패널: 아이콘-텍스트 밸런스

## 개선 방향 (Supanova 원칙 적용)

### 1. 타이포그래피
- Pretendard 폰트 적용 (현재 기본 폰트에서 변경)
- 섹션 헤더: text-[11px] uppercase tracking-[0.08em] font-semibold text-gray-400
- 메뉴 아이템: text-[13px] font-medium text-gray-700
- 활성 아이템: text-[13px] font-semibold text-blue-600

### 2. 간격 통일
- 메뉴 아이템: py-[6px] px-3 (전체 통일)
- 섹션 간 구분: mt-4 + 미세 구분선(border-t border-gray-100)
- 아이콘-텍스트 gap: gap-2.5 (통일)

### 3. 아이콘 정규화
- 모든 아이콘: w-[18px] h-[18px] (통일)
- 아이콘 색상: text-gray-400, 활성 시 text-blue-500
- Iconify Solar 또는 Lucide로 통일 (가능하면)

### 4. 프로필 카드 개선
- 둥근 뱃지 → 깔끔한 아바타 이니셜 (bg-gradient-to-br from-blue-500 to-blue-600, text-white, rounded-lg)
- 이름/조직/이메일 정보 레이아웃 정리
- 카드 배경: bg-gray-50 rounded-xl p-3

### 5. PREMIUM 뱃지 개선
- 현재 파란색 → 골드/앰버 계열 그라데이션 (bg-gradient-to-r from-amber-400 to-amber-500)
- 텍스트: text-[9px] font-bold text-amber-900
- rounded-full px-2 py-0.5

### 6. 호버/활성 상태
- 호버: bg-gray-50 rounded-lg transition-colors duration-150
- 활성: bg-blue-50 text-blue-600 font-semibold rounded-lg + 좌측 3px 블루 바
- 트랜지션: cubic-bezier(0.16, 1, 0.3, 1) (Supanova 모션 시그니처)

### 7. 섹션 접기/펼치기 쉐브론
- 현재 ">" 가 너무 단순 → 부드러운 회전 애니메이션
- transform rotate-90 transition-transform duration-200

## 대상 파일
- `/home/jay/projects/InsuRo/src/components/AppSidebar.tsx`
- `/home/jay/projects/InsuRo/src/components/ui/sidebar.tsx`
- 필요 시 글로벌 CSS: `/home/jay/projects/InsuRo/src/index.css`

## 참고
- Supanova 레퍼런스: `/home/jay/workspace/memory/specs/supanova-reference.md`
- 이전 사이드바 수정: task-1327.1 보고서

## 주의
- 기능 변경 없음 (메뉴 구조, 라우팅 유지)
- Tailwind CSS 클래스만 수정
- 모바일 반응형 확인 (사이드바 collapse)
- 작업 후 dev 서버에서 시각적 확인