# InfoKeyword Phase 3: 프론트엔드 개발

## 개요
InfoKeyword 서비스의 Next.js 프론트엔드를 개발한다.
백엔드 Worker API는 이미 완성되어 있다 (`/home/jay/projects/InfoKeyword/worker/`).

## 프로젝트 경로
- **프론트엔드**: `/home/jay/projects/InfoKeyword/` (루트에 Next.js 설치)
- **백엔드 Worker**: `/home/jay/projects/InfoKeyword/worker/` (기존, 수정 금지)
- **아키텍처 참고**: `/home/jay/workspace/memory/specs/infor-keyword/architecture-v1.md`
- **Phase 계획 참고**: `/home/jay/workspace/memory/specs/infor-keyword/phase-plan.md`

## 기술스택
- Next.js 15 (App Router, TypeScript)
- Tailwind CSS + shadcn/ui
- Firebase Auth (이메일/비밀번호)
- 데스크톱 전용 (모바일 대응 불필요)

## Worker API 엔드포인트 (기존 완성)
Worker는 FastAPI로 구현되어 있으며, 아래 엔드포인트를 사용한다:

```
GET  /health              — 헬스체크 (인증 불필요)
POST /generate            — 키워드 생성 (X-API-Key 필요)
     Body: { "topic": str, "tier": 2|3 }
     Response: { "keywords": [{"keyword": str, "tier": int}, ...] }

POST /analyze             — 분석 요청 (X-API-Key 필요)
     Body: { "keywords": [str, ...] }  (최대 5개)
     Response: { "analysis_id": str, "status": "processing" }

GET  /status/{analysis_id} — 분석 상태 조회 (X-API-Key 필요)
     Response: { "analysis_id": str, "status": str, "results": list|null, "error": str|null }
```

## 페이지 구조 (필수 구현)

### 1. 인증 (`/login`, `/signup`)
- Firebase Auth 이메일/비밀번호
- 미인증 시 `/login`으로 리다이렉트
- 로그인 후 `/dashboard`로 이동

### 2. 대시보드 (`/dashboard`)
- 과거 분석 이력 목록 (Firestore `analyses` 컬렉션에서 조회)
- 날짜순 정렬
- "새 분석" 버튼 → `/analyze/topic`으로 이동
- 각 이력 클릭 시 → `/report/{id}`로 이동

### 3. 분석 플로우
- **`/analyze/topic`**: 주제 입력 + 2단/3단 키워드 선택 UI → "키워드 생성" 클릭
- **`/analyze/select`**: Worker `/generate` 결과로 키워드 30개 카드 그리드 표시 → 최대 5개 선택 → "분석 시작" 클릭
- **`/analyze/progress`**: Worker `/analyze` 호출 후, `/status/{id}` 3초 간격 폴링 → 진행 상황 표시 → 완료 시 리포트 페이지로 이동

### 4. 리포트 (`/report/{id}`)
- 키워드별 7단계 PASS/FAIL 시각화 (체크마크/X 아이콘)
- 정보성 키워드 vs 비정보성 요약
- 상세 분석 결과 접기/펼치기
- 전체 키워드 요약 (5개 중 몇 개 통과)

## Next.js API Routes (프록시)
프론트엔드에서 Worker를 직접 호출하지 않고, Next.js API Routes를 프록시로 사용한다:
```
/api/keyword/generate  → Worker POST /generate
/api/analyze           → Worker POST /analyze
/api/analyze/[id]      → Worker GET /status/{id}
```
- Worker URL과 API Key는 서버 사이드 환경변수로 관리
- `WORKER_URL`, `WORKER_API_KEY` 환경변수 사용

## Firebase 설정
- 프로젝트: `insuwiki-j2h` (기존)
- Firestore 컬렉션: `ik_analyses` (InsuWiki와 구분하기 위해 접두사 사용)
- Firebase config는 `.env.local`에서 로드

## UI 가이드
- 깔끔하고 전문적인 분석 도구 느낌
- shadcn/ui 컴포넌트 적극 활용 (Card, Button, Badge, Progress, Table 등)
- 색상: 파란색 계열 기본 (보험 전문가 이미지)
- 진행률 페이지는 시각적으로 명확하게 (단계별 아이콘 + 프로그레스 바)

## 테스트
- 컴포넌트 테스트 작성 (최소 주요 플로우)
- Worker Mock으로 API 연동 테스트

## 주의사항
- `/home/jay/projects/InfoKeyword/worker/` 디렉터리는 절대 수정하지 말 것 (기존 백엔드)
- `package.json`, `next.config.*`, `tsconfig.json` 등은 프로젝트 루트에 생성
- worker 폴더와 Next.js가 같은 루트에 공존하는 구조
- `.env.local` 예시 파일도 함께 생성할 것

## 산출물
- Next.js 전체 페이지 코드
- 컴포넌트 테스트
- `.env.local.example` (환경변수 예시)
- 설치/실행 방법 README (간단히)

## 완료 조건
- `npm run build` 성공
- 모든 페이지 접근 가능
- Worker API 연동 로직 구현 완료
- 컴포넌트 테스트 PASS