# InsuRo 사이드바 메뉴 디자인 밸런스 개선

## 배경
이전에 메뉴 간격을 줄이는 작업을 했는데, 결과가 아마추어처럼 보임. 글자와 아이콘 사이 밸런스가 어색하고, 전체적인 완성도가 떨어짐. 프로페셔널한 SaaS 사이드바 수준으로 개선 필요.

## 참고 스크린샷
현재 상태: `/home/jay/.cokacdir/workspace/autoset/photo_AQADEg9rG3mKaVZ-.jpg`

## 대상 파일
1. `/home/jay/projects/InsuRo/src/components/AppSidebar.tsx` — 메인 사이드바 컴포넌트
2. `/home/jay/projects/InsuRo/src/components/ui/sidebar.tsx` — 베이스 UI 사이드바

## 현재 문제점
- 확장 섹션(AI 마케팅, 고객관리) 메뉴 항목 간 간격이 넓어 산만함
- 아이콘과 텍스트 크기/간격 밸런스 안 맞음
- 섹션 그룹 간 패딩이 과해 전체적으로 늘어진 느낌
- 프로 SaaS 느낌이 아니라 프로토타입 느낌

## 현재 스타일 값 (참고)
- SidebarContent: `py-2` (line 241)
- SidebarMenu gap: `gap-0.5` (sidebar.tsx line 405)
- SidebarGroup: `py-0.5 px-2` (sidebar.tsx line 348)
- Menu items: `gap-2 px-3 py-1` (AppSidebar.tsx line 305)
- Section labels: `px-4 mb-0, text-[10px]` (AppSidebar.tsx line 283)
- Menu item title gap: `gap-1.5` (AppSidebar.tsx line 314)
- SidebarFooter: `p-3` (AppSidebar.tsx line 334)

## 개선 방향
1. **메뉴 항목 간격**: 더 타이트하게 (Notion, Linear, Figma 등 참고 SaaS 사이드바 수준)
2. **아이콘-텍스트 밸런스**: 아이콘 크기와 텍스트 크기 비율 조정
3. **섹션 그룹 간 구분**: 패딩 대신 미세한 구분선이나 레이블 스타일로 구분
4. **전체 밀도**: 컴팩트하되 답답하지 않은 적정 밀도
5. **프로 완성도**: 호버 효과, 활성 상태, 전환 애니메이션 자연스럽게

## 레퍼런스
- Linear App 사이드바
- Notion 사이드바
- Figma 좌측 패널
→ 이런 수준의 타이트하고 정돈된 느낌

## 주의사항
- 기능 변경 없음 (메뉴 구조, 라우팅 등 유지)
- Tailwind CSS 클래스만 수정
- 모바일 반응형 깨지지 않도록 확인
- 작업 후 로컬에서 UI 확인 (개발 서버 실행해서 스크린샷 캡처)