# Option E: 5탭 카테고리 + 백링크 허브 탐색 구조 스펙

> **문서 유형**: 상세 설계/명세
> **작성일**: 2026-02-09
> **상태**: ✅ 확정 (사용자 승인 완료)

---

## 1. 개요

### 1.1. 목표
문서 수가 수백~수천 개로 증가해도 사용자가 원하는 정보를 **3클릭 이내**에 찾을 수 있는 탐색 구조 구현.

### 1.2. 핵심 원칙
- **최소 침습**: 기존 UX 대부분 유지
- **Reflect 철학 존중**: Bottom-up 연결 (백링크) 강조
- **점진적 확장**: 허브 기능 검증 후 카테고리 확대 가능

---

## 2. 확정된 탭 구조

```
[🔍전체] [🏥의료] [🚗손해] [💰자산] [⚖️실무]
```

### 탭별 포함 내용

| 탭 | 아이콘 | 색상 | 포함 내용 |
|---|--------|-----|----------|
| **전체** | 🔍 | 그레이 | 필터 없음 (모든 Wiki 문서) |
| **의료** | 🏥 | 인디고 | 암/뇌/심, 실비, 입원/수술, 케어, 가족(태아/어린이/펫) |
| **손해** | 🚗 | 블루 | 자동차, 운전자, 화재, 배상책임 |
| **자산** | 💰 | 엠버 | 연금/저축, 종신, 상속증여 |
| **실무** | ⚖️ | 슬레이트 | 보상&판례, 고지의무, 약관, 기타 |

---

## 3. 데이터 모델

### 3.1. Document 인터페이스 확장

```typescript
// firestore.ts
export type DocumentCategory = 
  | 'medical'    // 🏥 의료
  | 'casualty'   // 🚗 손해
  | 'wealth'     // 💰 자산
  | 'practice'   // ⚖️ 실무
  | 'general';   // 기본값 (미분류)

export interface Document {
  // 기존 필드...
  docType?: 'wiki' | 'daily';
  
  // 신규 필드 (Phase 5)
  category?: DocumentCategory;       // 5탭 분류
  incomingLinkCount?: number;        // 백링크 수 (허브 랭킹용)
}
```

### 3.2. 기본값 정책
- 신규 문서: `category: 'general'` (미선택 시)
- 기존 문서: 마이그레이션으로 `'general'` 설정

---

## 4. UI/UX 상세

### 4.1. 메인 페이지 레이아웃

```
┌──────────────────────────────────────────────────────────────┐
│ [InsuWiki Logo]    [검색바 Ctrl+K]    [사용자] [로그아웃]    │
├──────────────────────────────────────────────────────────────┤
│      [Knowledge Wiki]  [Daily Notes]   ← Row 1: 문서 타입    │
├──────────────────────────────────────────────────────────────┤
│  [🔍전체] [🏥의료] [🚗손해] [💰자산] [⚖️실무]  ← Row 2: 카테고리│
│  (Wiki 선택 시에만 표시)                                     │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  🔗 허브 문서 (가장 많이 연결된 지식)                        │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
│  │ 📄 일배책    │ │ 📄 청약     │ │ 📄 종신보험  │            │
│  │ 🔗 15 연결   │ │ 🔗 12 연결  │ │ 🔗 10 연결   │            │
│  └─────────────┘ └─────────────┘ └─────────────┘            │
│                                                              │
│  📄 문서 리스트 (기존 카드 UI 유지)                          │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
│  │ 문서 카드 1  │ │ 문서 카드 2  │ │ 문서 카드 3  │            │
│  └─────────────┘ └─────────────┘ └─────────────┘            │
└──────────────────────────────────────────────────────────────┘
```

### 4.2. 카테고리 탭 디자인

```tsx
// 탭 버튼 스타일
const categoryTabs = [
  { id: 'all', label: '전체', icon: '🔍', color: 'gray' },
  { id: 'medical', label: '의료', icon: '🏥', color: 'indigo' },
  { id: 'casualty', label: '손해', icon: '🚗', color: 'blue' },
  { id: 'wealth', label: '자산', icon: '💰', color: 'amber' },
  { id: 'practice', label: '실무', icon: '⚖️', color: 'slate' },
];
```

### 4.3. 허브 문서 섹션

- **표시 조건**: Wiki 탭 선택 시
- **표시 개수**: 상위 5개 (백링크 수 기준)
- **디자인**: 가로 스크롤 카드 (모바일 친화)
- **클릭 시**: 해당 문서 페이지로 이동

---

## 5. 편집 페이지 변경

### 5.1. 카테고리 드롭다운 추가

```
┌─────────────────────────────────────────────┐
│ 문서 제목: [일상생활배상책임               ]│
├─────────────────────────────────────────────┤
│ 📂 카테고리: [🚗 손해 ▼]                    │
│              ├─ 🔍 전체 (미분류)            │
│              ├─ 🏥 의료                     │
│              ├─ 🚗 손해 ✓                   │
│              ├─ 💰 자산                     │
│              └─ ⚖️ 실무                     │
├─────────────────────────────────────────────┤
│ (본문 편집 영역)                            │
└─────────────────────────────────────────────┘
```

- **필수 여부**: 선택적 (기본값 '전체' 자동 적용)
- **위치**: 제목 입력 필드 아래

---

## 6. 쿼리 로직

### 6.1. 필터링 우선순위

```
1. docType (wiki | daily) - 상단 탭 선택
2. category - 카테고리 탭 선택 시 (전체 = 필터 없음)
3. updatedAt (DESC) - 최신순 정렬
```

### 6.2. Firestore 쿼리 예시

```typescript
// Wiki + 의료 카테고리 필터
const q = query(
  collection(db, 'documents'),
  where('docType', '==', 'wiki'),
  where('category', '==', 'medical'),
  orderBy('updatedAt', 'desc'),
  limit(20)
);

// 허브 문서 조회 (백링크 상위 5개)
const hubQuery = query(
  collection(db, 'documents'),
  where('docType', '==', 'wiki'),
  orderBy('incomingLinkCount', 'desc'),
  limit(5)
);
```

---

## 7. 마이그레이션 전략

| 대상 | 처리 방식 |
|-----|----------|
| 기존 Wiki 문서 | `category: 'general'` 기본값 설정 |
| 기존 Daily 문서 | 변경 없음 (category 필드 불필요) |
| `incomingLinkCount` | 배치 스크립트로 백링크 수 집계 |

---

## 8. 제외된 기능 (추후 검토)

| 기능 | 제외 이유 |
|-----|----------|
| 태그 시스템 | Firestore 쿼리 제한, 복잡도 증가 |
| 다중 카테고리 | 단순성 우선 |
| 그래프 뷰 | Phase 5 범위 초과 |

---

## 9. 참조 문서

- [전체 미팅 회의록](file:///c:/Users/drumb/.gemini/antigravity/scratch/InsuWiki/docs/meetings/260209-13.54-option-e-implementation-meeting.md)
- [리스크 분석 미팅](file:///c:/Users/drumb/.gemini/antigravity/scratch/InsuWiki/docs/meetings/260209-13.26-risk-analysis-meeting.md)
- [Reflect 에이전트 검토](file:///c:/Users/drumb/.gemini/antigravity/scratch/InsuWiki/docs/meetings/260209-13.33-reflect-agent-review.md)