# Task: InfoKeyword Step 1~4 UI 개선 (Step 5/6/7 스타일 통일)

## 프로젝트 경로
`/home/jay/projects/InfoKeyword/`

## 배경
- task-241.1에서 Step 2/3/4 Worker 크롤러 정확도 수정 완료
- task-245.1에서 Step 5/6/7 Frontend UI를 개선 완료 (숫자 카드, 순위 배지, Progress bar 등)
- Step 1~4 UI는 아직 예전 스타일이라 Step 5/6/7과 시각적 일관성이 없음
- Step 1~4도 동일한 디자인 패턴으로 통일 필요

## 수정 대상
**`src/app/report/[id]/page.tsx`** — `renderStepDetail()` 함수 내 step1~4 케이스

## 현재 UI 문제점과 개선 방향

### Step 1 (다중 단어)
- **현재**: `"N개 단어로 구성"` 텍스트만 보여줌
- **개선**: 숫자 카드로 변경 — "단어 수 N개" 크게 표시, 통과 기준 설명 추가
  - 예: bg-slate-50 카드에 "단어 수" 라벨 + "2개" 큰 폰트

### Step 2 (연관 검색어)
- **현재**: 키워드 pill 배지만 나열
- **개선**: 상단에 개수 카드 추가 — "연관 검색어 N개" (Step 6/7과 동일한 카드 패턴)
  - 카드: bg-slate-50 border rounded-lg, "연관 검색어" 라벨 + "N개" text-lg font-bold
  - 0개일 때: "연관 검색어가 없습니다" 보조 텍스트
  - 아래에 기존 pill 배지 유지

### Step 3 (자동완성)
- **현재**: 제안어 pill 배지만 나열
- **개선**: 상단에 개수 카드 추가 — "자동완성 제안어 N개" (Step 2와 동일 패턴)
  - 카드 + 아래 pill 배지 유지
  - 0개일 때: "자동완성 제안어가 없습니다" 보조 텍스트

### Step 4 (검색량)
- **현재**: PC/모바일/합계 3개 카드 — 이미 깔끔함
- **개선**: 큰 변경 불필요. 다만 합계를 더 강조하는 것을 고려
  - 합계 카드만 bg-indigo-50으로 살짝 강조 (현재 bg-white로 동일)
  - 합계 숫자 text-lg font-bold로 키움 (현재 text-xs)

## 디자인 패턴 참고 (Step 5/6/7에서 이미 구현된 패턴)
```
┌──────────────────────────────────────────────────┐
│    [라벨]    N개    / 추가정보                      │
│    (선택) 보조 텍스트                               │
└──────────────────────────────────────────────────┘
```
- 라벨: text-xs text-slate-500 font-medium
- 숫자: text-lg font-bold text-slate-800
- 카드: bg-slate-50 border border-slate-200 rounded-lg p-3

## 주의사항
- 기존 pill 배지(step2의 blue, step3의 violet)는 유지 — 개수 카드를 상단에 추가하는 것
- Step 4는 최소 변경 — 이미 카드 UI가 있으므로 합계 강조만
- optional chaining 유지 (기존 데이터 호환)
- **빌드 후 반드시 서버 재시작**:
  1. `cd /home/jay/projects/InfoKeyword && npm run build`
  2. `lsof -ti:3100 | xargs kill`
  3. `cd /home/jay/projects/InfoKeyword && PORT=3100 nohup npm run start > /tmp/infokeyword.log 2>&1 &`