# 계획서: task-130.1 — InsuWiki 3단계 요약 프론트엔드 UI Phase 4

## 작업 개요
약관 목록+상세 페이지에 Level 탭(1/2/3), Level 1 요약 카드, Level 2 아코디언, Level 3 원문 검색 UI 구현

## 서브태스크 분해

### ST-1: 약관 목록 페이지 (insurance terms list)
- `/app/insurance` 또는 admin 하위에 약관 목록 라우트 생성
- InsuranceMetadata 목록 조회 → 카드 형태 표시
- 상세 페이지 링크 연결

### ST-2: 약관 상세 페이지 라우트
- `/app/insurance/[productId]/page.tsx` 생성
- InsuranceMetadata + SummaryJob 상태 로드
- 요약 레벨 탭(Level 1 / Level 2 / Level 3) UI

### ST-3: Level 1 요약 카드 컴포넌트
- `components/insurance/SummaryLevel1Card.tsx`
- Firestore `insurance_summaries` (level=1) 조회
- 전체 요약 카드 표시, pending 상태 표시

### ST-4: Level 2 아코디언 컴포넌트
- `components/insurance/SummaryLevel2Accordion.tsx`
- level=2 문서 목록 조회, sectionTitle 기반 아코디언 UI

### ST-5: Level 3 원문 검색 연동
- 기존 벡터 검색 API 활용
- 검색어 입력 → `/api/ai/search` 또는 기존 검색 라우트 연동

### ST-6: 요약 진행 상태 표시
- SummaryJob pending/complete/failed 상태 배지
- 요약 중 로딩 인디케이터

## 팀원 배정
- **GLM-5 (오픈클로)**: 전체 구현 순차 실행 (spawn 없음)

## 실행 순서
1. 기존 코드 파악 (admin 페이지, 컴포넌트 패턴, API 라우트 패턴)
2. ST-1 목록 페이지
3. ST-2 상세 페이지 라우트
4. ST-3 Level 1 카드
5. ST-4 Level 2 아코디언
6. ST-5 Level 3 검색
7. ST-6 상태 표시
8. TypeScript 빌드 확인 (`npm run build` in nextapp)

## 예상 위험 및 대안
- **Firestore 권한**: insurance_summaries read 규칙이 없을 수 있음 → firestore.rules 확인 및 추가
- **기존 검색 API 경로**: 정확한 엔드포인트 모르면 코드 탐색 필요
- **컴포넌트 스타일 불일치**: 기존 Tailwind 패턴 파악 후 일관성 유지
- **빌드 오류**: 타입 불일치 시 InsuranceSummary 타입 활용

## 실패 시나리오 체크리스트

### 1. 비정상 입력/상태
- productId가 없거나 존재하지 않는 상품 → notFound() 또는 빈 상태 UI 표시
- insurance_summaries 문서가 없을 때 → "요약 준비 중" 상태 표시

### 2. 동시성/경쟁 조건
- 프론트엔드 읽기 전용 → Firestore 실시간 구독 or 단순 fetch, 경쟁 조건 없음
- 동시에 여러 사용자가 같은 페이지 접근 → 해당 없음 (읽기 전용)

### 3. 비정상 종료/타임아웃
- 페이지 로드 중 이탈 → React cleanup으로 구독 해제 (useEffect return)
- Firestore 응답 지연 → 로딩 스켈레톤 표시

### 4. 스테일 데이터
- 요약 업데이트 후 캐시 → SSR/ISR 없이 클라이언트 사이드 fetch (실시간 반영)
- onSnapshot 구독 시 자동 갱신

### 5. 통합 시 충돌
- admin 페이지와 경로 충돌 가능성 → /admin/insurance vs /insurance 경로 분리 확인
- 기존 컴포넌트 import 충돌 없는지 확인