# task-454.1: 대시보드 탭 네비게이션 sticky 고정

## 레벨: Lv.1

## 파일
- `/home/jay/workspace/dashboard/index.html`

## 현재 상황
- `<header>` (line 1098): `sticky top-0 z-50` — 이미 고정됨
- `<TabNavigation>` 데스크탑 탭 (line 372): `sticky top-0 z-10` — 헤더 뒤에 숨겨져서 스크롤 시 안 보임
- 모바일 하단 탭 (line 388): `mobile-bottom-nav` CSS class로 `position: fixed; bottom: 0` — 이미 고정됨

## 수정 사항

### 1. 데스크탑 탭 (line 372)
현재:
```
<div className="hidden md:flex items-center gap-2 mb-1 sticky top-0 z-10 bg-[#f1f5f9] py-2">
```
수정:
- `top-0` → 헤더 높이 만큼 오프셋 (헤더 높이 약 56px = `top-14` 또는 `top-[56px]`)
- `z-10` → `z-40` (헤더 z-50보다 약간 아래, 하지만 콘텐츠보다 위)
- `bg-[#f1f5f9]` 유지 (배경색 있어야 스크롤 시 내용이 비침 방지)
- 하단에 약간의 그림자 추가하면 더 깔끔: `shadow-sm`

### 2. TabNavigation을 main 밖으로 빼기 (선택)
현재 `<main>` 안에 있어서 `space-y-4` 마진이 적용됨.
sticky가 제대로 작동하려면 `<main>` 밖, `<header>` 바로 아래로 빼는 것이 가장 깔끔.

구조 변경:
```jsx
</header>
{/* PWA 설치 배너 */}
...
{isOn && <TabNavigation activeTab={activeTab} setActiveTab={setActiveTab} />}
{isOn && (
    <main className="...">
        {/* TabNavigation 여기서 제거 */}
        ...
    </main>
)}
```

이 경우 TabNavigation 데스크탑 div의 클래스를 수정:
```
<div className="hidden md:flex items-center gap-2 sticky top-[56px] z-40 bg-[#f1f5f9] py-2 px-4 md:px-6 max-w-7xl mx-auto shadow-sm">
```
(`px-4 md:px-6 max-w-7xl mx-auto`는 main에서 빠지면서 직접 추가)

### 3. 검증
- 데스크탑: 스크롤 시 헤더 아래에 탭바가 고정되어 보이는지
- 모바일: 하단 탭바 기존대로 정상 동작하는지
- 탭 전환 정상 동작