# InsuRo × 인포키워드 연동 — Phase 2: 프론트엔드 UI + 플랜별 차등

## 작업 레벨: Lv.3

## 프로젝트 시스템 3문서
- DevSystem: `/home/jay/workspace/memory/plans/anu-guide-system/plan.md`

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`

## 연동 스펙 (필독)
- `/home/jay/.claude/projects/-home-jay--cokacdir-workspace-autoset/memory/project_insuro_infokeyword_integration.md`

## Phase 1 완료 내용 (참고)
- 인포키워드 서버 systemd 등록 완료
- InsuRo 서버에 프록시 엔드포인트 4개 (generate, analyze, status, history) 완료
- infokeyword_analyses DB 테이블 완료
- 플랜 검증 + 월 사용량 제한 완료

## Phase 2 범위: 프론트엔드 전체

### 1. 정보성키워드 페이지 전면 개편
파일: `src/pages/InfoKeyword.tsx` (또는 `src/pages/KeywordAnalysis.tsx`)

현재 간이 분석 UI → 인포키워드 연동 UI로 전면 개편.

#### 플랜별 3단계 화면:

**A) 무료/베이직/프로 (infokeyword 접근 불가):**
- 궁금증 유발 + 업그레이드 유도 화면
- 헤더: "🔑 정보성 키워드 분석" + 부제: "네이버 블로그ID 지수를 높일 키워드를 AI가 판별합니다"
- 브랜딩: "서울대보험쌤이 직접 설계한 7가지 판별 기준"
- 샘플 결과 미리보기 (블러 처리):
  - 실제 분석 예시 3~5개 키워드의 판정 결과를 보여주되 블러/잠금 처리
  - "암보험 추천 → 정보성 ✅", "실손보험 비교 → 비정보성 ⚠️" 등 하드코딩 예시
- 기능 설명 카드: "7가지 AI 판별 기준으로 정밀 분석", "30개 키워드 자동 생성", "분석 히스토리 저장"
- CTA: "맥스 플랜에서 바로 분석해보세요 →" (프로페셔널 톤)
- ★ "AI 알고리즘 기반 보험 키워드 분석으로 블로그 상위노출을 최적화합니다" 같은 일반적 문구 금지

**B) 맥스 플랜 (infokeyword 접근 가능, 상세 숨김):**
- 분석 요청 화면: 인포키워드 analyze/topic 동일 플로우
  1. 주제 입력 (예: "암보험")
  2. "키워드 생성" 클릭 → `/api/insuro/infokeyword/generate` 호출 → 30개 키워드 목록
  3. 키워드 선택 (체크박스, 최대 5개)
  4. "분석 시작" 클릭 → `/api/insuro/infokeyword/analyze` 호출
  5. 분석 중 로딩 (예상 소요시간 표시: "약 1~2분")
  6. 결과 표시

- 결과 화면:
  - 키워드별 카드: **"정보성 ✅ / 비정보성 ⚠️"** + **"7가지 판단조건 중 X개 탈락"**
  - 7단계 상세 내용은 **표시 안 함** (서버에서 steps 필드 미반환)
  - 하단 안내 박스 (프로페셔널 톤):
    ```
    🎓 더 자세한 분석이 필요하신가요?
    
    각 판단조건의 상세 분석과 키워드 전략 수립은
    "서울대보험쌤"의 1:1 컨설팅에서 제공됩니다.
    
    • 탈락 조건별 개선 방향 제시
    • 맞춤 대안 키워드 추천
    • 블로그 상위노출 실전 전략
    
    [서울대보험쌤과 상담하기 →]
    ```

- 히스토리: `/api/insuro/infokeyword/history` 호출 → 과거 분석 이력 표시
- 월 사용량 표시: "이번 달 분석 3/10회 사용"

**C) 히든 플랜 (전체 오픈):**
- 맥스와 동일한 분석 요청 플로우
- 결과 화면: **7단계 상세 전부 표시**
  - step1~7 각각 pass/fail + 상세 데이터
  - 상세보기 (인포키워드 기존과 동일: 검색량, 자동완성, 블로그 TOP10 목록, 카페 뱃지 등)
- 컨설팅 안내 박스 미표시

### 2. 서버 API 플랜별 응답 차등 (Phase 1 보완)
`server/main.py`의 인포키워드 프록시 엔드포인트에서:

```python
# status 엔드포인트 응답 시 플랜 확인
if plan_name in ("히든",):
    # 전체 결과 반환 (steps 포함)
    return result
else:  # 맥스
    # steps 제거, 탈락 수만 포함
    for r in result["results"]:
        steps = r.pop("steps", {})
        fail_count = sum(1 for v in steps.values() if not v.get("pass", True))
        r["fail_count"] = fail_count
        r["total_steps"] = 7
    return result
```

### 3. 월 사용량 UI 표시
마이페이지 또는 정보성키워드 페이지 상단에:
- "이번 달 분석: 3 / 10회" (맥스 기준)
- 잔여 횟수 적으면 경고 색상

## affected_files
- `src/pages/InfoKeyword.tsx` 또는 `src/pages/KeywordAnalysis.tsx` (전면 개편)
- `server/main.py` (수정 — 플랜별 응답 차등)
- `src/config/planSkillMap.ts` (수정 필요 시)

## 검증 시나리오
1. 무료 플랜 → 샘플 블러 + 업그레이드 CTA + "서울대보험쌤 7가지 판별" 브랜딩
2. 프로 플랜 → 동일 (접근 불가)
3. 맥스 플랜 → 분석 요청 + 키워드 생성 30개 + 분석 결과 "7가지 중 X개 탈락"
4. 맥스 플랜 → 7단계 상세 안 보임 + 컨설팅 안내 박스 표시
5. 히든 플랜 → 7단계 상세 전부 표시 + 상세보기 동작
6. 히스토리 → 본인 이력만 표시
7. 월 사용량 → "3/10회" 정상 표시
8. npm run build 성공