# Task: InfoKeyword 리포트 상세페이지 — OR 조건 시각화 + 상세 데이터 가독성 개선

## Task ID: task-238.1

## 배경
InfoKeyword 분석 파이프라인의 7단계 중 **step2(연관검색어), step3(자동완성), step4(검색량)는 OR 조건**이다.
셋 중 하나만 통과하면 전체 통과인데, 현재 UI는 각 step을 독립적으로 빨강/초록으로 보여줘서
마치 통과를 못 한 것처럼 보임. 또한 상세 데이터가 raw JSON key-value로만 표시되어 가독성이 떨어짐.

## Worker가 저장하는 데이터 구조 (참고)
Worker 코드: `/home/jay/projects/InfoKeyword/worker/pipeline/analyzer.py`

결과에 `steps_2_4_or: boolean` 필드가 포함됨 (셋 중 하나라도 true면 true).
각 step 상세 데이터:
- step1: `{ pass, word_count }`
- step2: `{ pass, related_keywords: string[] }`
- step3: `{ pass, suggestions: string[] }`
- step4: `{ pass, pc_volume, mobile_volume, total_volume }`
- step5: `{ pass, ratio, promotional_count, total_analyzed, details: [{url, blog_name, is_promotional, reasons}] }`
- step6: `{ pass, external_count, external_blogs: [] }`
- step7: `{ pass, representative_count, total_results }`

## 요구사항

### 1. Step 2/3/4 OR 조건 그룹 시각화
- step2, step3, step4를 하나의 **그룹으로 묶어서** 시각적으로 표현
- 그룹 전체가 OR 조건임을 명확히 표시 (예: "OR 그룹 — 1개 이상 통과 시 Pass")
- 그룹 내 개별 step이 빨간색이어도, 그룹 전체가 통과면 **그룹 테두리/배경이 녹색**
- 그룹이 미통과(3개 모두 실패)일 때만 빨간색
- Worker 결과의 `steps_2_4_or` 필드를 활용 (TypeScript 타입에 추가 필요할 수 있음)

### 2. 상세 데이터 가독성 개선
현재 상세보기 펼치면 raw key-value가 나오는데, step별로 맞춤 렌더링:
- **step1**: "N개 단어" 간단 표시
- **step2**: 연관키워드 태그/칩 형태로 나열
- **step3**: 자동완성 제안 태그/칩 형태로 나열
- **step4**: PC/모바일/합계 검색량을 깔끔한 수치 카드로
- **step5**: 분석된 블로그 목록 — 각 블로그별 홍보성 판정 이유를 아이콘+텍스트로
- **step6**: 외부 블로그 목록 (있으면 표시, 없으면 "없음" 표시)
- **step7**: 대표뱃지 수 / 전체 결과 수 비율 표시

### 3. 타입 수정 (필요시)
- `/home/jay/projects/InfoKeyword/src/types/index.ts`에 `steps_2_4_or` 필드 추가
- 각 StepResult의 상세 타입을 보다 구체적으로 정의할 수 있음 (선택사항)

## 대상 파일
- `/home/jay/projects/InfoKeyword/src/app/report/[id]/page.tsx` (메인)
- `/home/jay/projects/InfoKeyword/src/components/step-badge.tsx` (뱃지)
- `/home/jay/projects/InfoKeyword/src/components/analysis-summary.tsx` (요약)
- `/home/jay/projects/InfoKeyword/src/types/index.ts` (타입)

## 주의사항
- **API 로직(lib/api.ts) 변경 금지**
- **Worker Python 코드 변경 금지**
- `.git`이 없으므로 git 명령어 사용 금지
- 기존 기능(펼침/접기, 뒤로가기, 요약 대시보드) 유지
- 1팀이 방금 UI를 개선해놓았으니, 현재 코드를 먼저 읽고 그 위에서 수정할 것

## 완료 후
1. `npm run build` 성공 확인
2. 기존 서버(포트 3100) kill 후 `PORT=3100 nohup npm run start > /tmp/infokeyword.log 2>&1 &`로 재시작
3. 보고서: `/home/jay/workspace/memory/reports/task-238.1.md`