# InsuRo 메뉴 이동 시 빈 화면 개선 — Prefetch + Skeleton UI

## 작업 레벨: Lv.1

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

## 문제
메뉴 이동 시 1~3초간 빈 화면(스피너만 표시). React lazy loading으로 첫 방문 시 JS 번들 다운로드 필요. 사용자가 "페이지가 안 넘어간다"고 인식.

## 수정 사항

### 1. 메뉴 Hover 시 Prefetch
상단 메뉴(TopNavBar) 및 사이드바 메뉴에서 hover 시 해당 페이지 번들을 미리 다운로드:

```tsx
// 예시: TopNavBar에서 메뉴 hover 시 prefetch
const prefetchMap: Record<string, () => Promise<any>> = {
  "/generate": () => import("@/pages/Generate"),
  "/market/newsletter": () => import("@/pages/MarketNewsletter"),
  "/tools/image-editor": () => import("@/pages/ImageEditor"),
  "/crm/dashboard": () => import("@/pages/CrmDashboard"),
  // ... 주요 페이지
};

const handleMouseEnter = (path: string) => {
  if (prefetchMap[path]) prefetchMap[path]();
};
```

### 2. Skeleton UI (PageLoader 개선)
현재 `PageLoader`가 스피너만 표시 → DashboardLayout 구조의 스켈레톤으로 변경:

```tsx
const PageLoader = () => (
  <div className="flex min-h-screen">
    {/* 사이드바 스켈레톤 */}
    <div className="w-[200px] bg-muted/30 animate-pulse" />
    {/* 메인 영역 스켈레톤 */}
    <div className="flex-1 p-6 space-y-4">
      <div className="h-8 w-48 bg-muted/50 rounded animate-pulse" />
      <div className="h-4 w-96 bg-muted/30 rounded animate-pulse" />
      <div className="h-64 bg-muted/20 rounded animate-pulse" />
    </div>
  </div>
);
```

### 3. 사이드바 메뉴 Link에 onMouseEnter 추가
`src/components/navigation/` 하위의 사이드바 메뉴 링크에 prefetch 적용.

## affected_files
- `src/App.tsx` (수정 — PageLoader 스켈레톤 UI)
- `src/components/navigation/TopNavBar.tsx` (수정 — hover prefetch)
- `src/components/DashboardLayout.tsx` (수정 — 사이드바 link prefetch)

## 검증 시나리오
1. 메뉴 hover → 네트워크 탭에서 해당 페이지 JS 번들 prefetch 확인
2. 메뉴 클릭 → 빈 화면 없이 즉시 전환 (또는 스켈레톤 표시)
3. 기존 기능에 영향 없음
4. npm run build 성공