# Option E 구현 계획: 전체 에이전트 회의
> **일시**: 2026-02-09 13:54
> **참석자**: PM, UX, Frontend, Backend, QA, Reflect, Planner
> **안건**: Option E (5탭 + 백링크 허브) 구현 계획 수립 및 Phase 배치
---
## 1. 프로젝트 현황 분석
### 1.1. 완료된 Phase 현황
| Phase | 주요 기능 | 상태 |
|-------|----------|------|
| **Phase 1** | 환경 세팅 (Next.js, Firebase, Auth) | ✅ 완료 |
| **Phase 2** | 핵심 기능 (문서 CRUD, 동시 편집 잠금) | ✅ 완료 |
| **Phase 3-1** | 전역 검색 (Ctrl+K) | ✅ 완료 |
| **Phase 3-2** | 데일리 노트 | ✅ 완료 |
| **Phase 3-3** | 대시보드 v2 (Wiki/Daily 탭) | ✅ 완료 |
| **Phase 3-4** | 아웃라이너, 원클릭 링크 | ✅ 완료 |
| **Phase 4** | Rename 자동 동기화 | ✅ 완료 |
### 1.2. 기존 구현 자산 (Option E 활용 가능)
| 구현물 | 파일 | 재활용 가능 여부 |
|-------|-----|-----------------|
| `docType: 'wiki' \| 'daily'` | `firestore.ts` | ✅ 확장 필요 |
| Wiki/Daily 탭 UI | `page.tsx` | ✅ 확장 필요 |
| 백링크 패널 | `BacklinksPanel.tsx` | ✅ 허브 기능 추가 |
| 검색 모달 | `SearchModal.tsx` | ✅ 그대로 유지 |
| `outgoingLinkIds` | 스키마 | ✅ 집계 활용 |
---
## 2. Option E 최종 확정 스펙
### 2.1. 탭 구조 (5탭)
```
[🔍전체] [🏥의료] [🚗손해] [💰자산] [⚖️실무]
```
### 2.2. 탭별 포함 내용
| 탭 | 아이콘 | 내부 카테고리 (확장용) |
|---|--------|----------------------|
| **전체** | 🔍 | 필터 없음 |
| **의료** | 🏥 | 암/뇌/심, 실비, 입원/수술, 케어, 가족(태아/어린이/펫) |
| **손해** | 🚗 | 자동차, 운전자, 화재, 배상책임 |
| **자산** | 💰 | 연금/저축, 종신, 상속증여 |
| **실무** | ⚖️ | 보상&판례, 고지의무, 약관, 기타 |
### 2.3. 데이터 모델 변경
```typescript
// firestore.ts 확장
interface Document {
// 기존...
docType: 'wiki' | 'daily';
// 신규 (Option E)
category?: DocumentCategory; // 5탭 분류
incomingLinkCount?: number; // 백링크 수 (허브 랭킹용)
}
type DocumentCategory =
| 'medical' // 🏥 의료
| 'casualty' // 🚗 손해
| 'wealth' // 💰 자산
| 'practice' // ⚖️ 실무
| 'general'; // 기본값
```
### 2.4. 백링크 허브 섹션
```
┌─────────────────────────────────────────────────────────────┐
│ 🔗 허브 문서 (가장 많이 연결된 지식) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 📄 일배책 │ │ 📄 청약 │ │ 📄 종신보험 │ │
│ │ 🔗 15 연결 │ │ 🔗 12 연결 │ │ 🔗 10 연결 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
---
## 3. Phase 구성 및 일정
### Phase 5: 탐색 구조 고도화 (Option E)
| Sub-Phase | 내용 | 예상 공수 | 담당 |
|-----------|-----|----------|-----|
| **5-1** | 카테고리 필터 탭 (5탭 UI) | 2일 | Frontend |
| **5-2** | 데이터 모델 확장 + 마이그레이션 | 1일 | Backend |
| **5-3** | 백링크 허브 섹션 구현 | 2일 | Frontend + Backend |
| **5-4** | 검증 및 테스트 | 1일 | QA |
**총 예상 공수: 6일 (1주)**
### 전체 로드맵 업데이트
```mermaid
gantt
title InsuWiki 개발 로드맵
dateFormat YYYY-MM-DD
section Phase 1-2
환경 세팅 + 핵심 기능 :done, p1, 2026-02-07, 1d
section Phase 3
전역 검색 + 데일리 노트 :done, p3a, 2026-02-08, 1d
대시보드 v2 + 아웃라이너 :done, p3b, 2026-02-08, 1d
section Phase 4
Rename 자동 동기화 :active, p4, 2026-02-10, 2d
section Phase 5 (NEW)
5탭 카테고리 필터 :p5a, after p4, 2d
백링크 허브 섹션 :p5b, after p5a, 2d
검증 및 테스트 :p5c, after p5b, 1d
```
---
## 4. 구현 상세 계획
### 4.1. Phase 5-1: 카테고리 필터 탭 UI
#### [MODIFY] [page.tsx](file:///c:/Users/drumb/.gemini/antigravity/scratch/InsuWiki/nextapp/src/app/page.tsx)
**현재 탭 구조:**
```tsx
// 기존 (2탭)
```
**변경 탭 구조:**
```tsx
// 신규 (5탭 + 기존 2탭 유지)
// Row 1: 문서 타입 (Wiki / Daily)
// Row 2: 카테고리 필터 (Wiki 선택 시만 표시)
```
**핵심 변경사항:**
1. 카테고리 상태 관리 추가 (`selectedCategory`)
2. Firestore 쿼리에 카테고리 필터 조건 추가
3. 카테고리 탭 애니메이션 (Wiki 선택 시만 슬라이드 인)
---
### 4.2. Phase 5-2: 데이터 모델 확장
#### [MODIFY] [firestore.ts](file:///c:/Users/drumb/.gemini/antigravity/scratch/InsuWiki/nextapp/src/types/firestore.ts)
```typescript
export type DocumentCategory =
| 'medical'
| 'casualty'
| 'wealth'
| 'practice'
| 'general';
export interface Document {
// ... 기존 필드
category?: DocumentCategory;
incomingLinkCount?: number;
}
```
#### [MODIFY] [page.tsx (docs)](file:///c:/Users/drumb/.gemini/antigravity/scratch/InsuWiki/nextapp/src/app/docs/[id]/page.tsx)
- 편집 UI에 카테고리 드롭다운 추가
- 저장 시 `category` 필드 함께 저장
#### 마이그레이션 스크립트
```typescript
// scripts/migrate-category.ts
// 기존 문서에 category: 'general' 기본값 설정
```
---
### 4.3. Phase 5-3: 백링크 허브 섹션
#### [NEW] [HubDocuments.tsx](file:///c:/Users/drumb/.gemini/antigravity/scratch/InsuWiki/nextapp/src/components/HubDocuments.tsx)
**핵심 로직:**
1. `incomingLinkCount` 기준 상위 5개 문서 조회
2. 카드 형태로 허브 문서 표시
3. 클릭 시 해당 문서로 이동
**집계 방식 (2가지 옵션):**
| 방식 | 장점 | 단점 |
|-----|-----|-----|
| **A. 실시간 집계** | 항상 최신 | 쿼리 비용 높음 |
| **B. 배치 집계** | 비용 효율적 | 약간의 지연 |
**권장: 방식 B** - Cloud Functions 트리거로 문서 저장 시 `incomingLinkCount` 업데이트
---
### 4.4. Phase 5-4: 검증 및 테스트
#### QA 테스트 케이스
| ID | 테스트 항목 | 기대 결과 |
|----|-----------|----------|
| T1 | 카테고리 탭 클릭 | 해당 카테고리 문서만 필터링 |
| T2 | 카테고리 "전체" 클릭 | 모든 Wiki 문서 표시 |
| T3 | Daily Notes 탭 클릭 | 카테고리 탭 숨김 |
| T4 | 허브 문서 표시 | 백링크 수 상위 5개 표시 |
| T5 | 허브 문서 클릭 | 해당 문서 페이지 이동 |
| T6 | 신규 문서 저장 (카테고리 선택) | 올바른 카테고리로 저장 |
| T7 | 기존 문서 편집 (카테고리 미선택) | 기본값 'general' 유지 |
---
## 5. 에이전트별 담당 업무
| 에이전트 | Phase 5-1 | 5-2 | 5-3 | 5-4 |
|---------|----------|-----|-----|-----|
| **PM** | 일정 관리 | 마이그레이션 감독 | - | 최종 검수 |
| **Frontend** | 탭 UI 구현 | 편집 UI 수정 | 허브 컴포넌트 | - |
| **Backend** | - | 스키마 + 마이그레이션 | 집계 로직 | - |
| **UX** | 탭 디자인 리뷰 | - | 허브 UI 리뷰 | - |
| **QA** | - | - | - | 전체 테스트 |
| **Reflect** | - | - | 백링크 로직 검증 | - |
---
## 6. 리스크 완화 적용
이전 미팅에서 식별된 리스크에 대한 완화 전략 적용:
| 리스크 | 완화 전략 | 적용 |
|-------|---------|-----|
| 카테고리 8개 복잡성 | 5개로 축소 | ✅ |
| 다중 태그 Firestore 제한 | 태그 시스템 제외 (Phase 5 범위 외) | ✅ |
| 모바일 UX | 5탭 가로 스크롤 친화적 | ✅ |
| Firestore 인덱스 | 단일 필드 필터로 단순화 | ✅ |
| 사용자 부담 | 카테고리 선택 선택적 (기본값 제공) | ✅ |
---
## 7. 결정 사항 요약
| 항목 | 결정 |
|-----|------|
| **탭 구조** | 5탭 (전체, 의료, 손해, 자산, 실무) |
| **아이콘** | 🔍🏥🚗💰⚖️ 사용 |
| **태그 시스템** | Phase 5에서 제외 (추후 검토) |
| **백링크 허브** | 상위 5개 문서 표시 |
| **마이그레이션** | 기본값 'general' 적용 |
| **Phase 배치** | Phase 5 (Phase 4 Rename 이후) |
---
## 8. Action Items
| 담당 | 항목 | 기한 |
|-----|------|-----|
| **사용자** | 구현 계획 승인 | 즉시 |
| PM | Phase 4 완료 후 Phase 5 시작 | Phase 4 완료 시 |
| Frontend | 탭 UI 와이어프레임 확정 | 승인 후 |
| Backend | 스키마 변경 + 인덱스 설계 | 승인 후 |
---
> 📋 **다음 단계**: 사용자 승인 후 Phase 4 (Rename 동기화) 완료 → Phase 5 착수