# Task: InfoKeyword 리포트 페이지 UI 개선

## Task ID: task-235.1

## 대상 파일
- `/home/jay/projects/InfoKeyword/src/app/report/[id]/page.tsx` (메인 리포트 페이지)
- `/home/jay/projects/InfoKeyword/src/components/analysis-summary.tsx` (요약 카드)
- `/home/jay/projects/InfoKeyword/src/components/step-badge.tsx` (단계 뱃지)
- UI 컴포넌트: `/home/jay/projects/InfoKeyword/src/components/ui/` (shadcn 사용 가능)

## 현재 상태
- 리포트 페이지는 기능적으로 동작함 (snake_case 키 매핑 수정 완료)
- 하지만 UI가 밋밋하고 단조로움
- 현재 구조: AnalysisSummary(요약) + KeywordResultCard(키워드별 상세) 리스트

## 요구사항

### 1. 전체 레이아웃 개선
- 모던하고 깔끔한 카드 기반 디자인
- 적절한 여백, 그림자, 라운딩 적용
- 색상 조합을 세련되게 (현재 blue/green/red 기본 조합 개선)

### 2. 분석 요약 (AnalysisSummary) 개선
- 시각적으로 눈에 띄는 요약 대시보드
- 통과율 게이지/차트를 더 직관적으로
- 정보성/비정보성 비율을 한눈에 파악 가능하게

### 3. 키워드 결과 카드 (KeywordResultCard) 개선
- 각 키워드의 verdict(정보성/비정보성) 상태가 시각적으로 확실히 구분
- 7단계 스텝 뱃지 디자인 개선 (현재 기본 뱃지 → 더 세련된 인디케이터)
- 상세 보기 펼침 영역 디자인 개선
- step별 상세 데이터 표시 가독성 향상

### 4. 반응형
- 모바일에서도 보기 좋게 (반응형 그리드)

## 기술 스택
- Next.js 15 + React + TypeScript
- Tailwind CSS + shadcn/ui 컴포넌트
- lucide-react 아이콘

## 주의사항
- **타입 정의(types/index.ts)는 변경하지 마세요** — snake_case 키로 확정됨
- **API 로직(lib/api.ts)은 변경하지 마세요**
- UI/스타일링만 수정할 것
- 기존 기능(펼침/접기, 뒤로가기 등)은 유지
- `.git`이 없으므로 git 명령어 사용 금지

## 완료 후
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-235.1.md`