# task-247.1 완료 보고서

## 작업 내용
InfoKeyword Step 1~4 UI를 Step 5/6/7 디자인 패턴과 통일

## 수정 파일
- `/home/jay/projects/InfoKeyword/src/app/report/[id]/page.tsx` — `renderStepDetail()` 함수 내 step1~4 케이스

## 변경 상세

### Step 1 (step1_multiword)
- 기존: `"N개 단어로 구성"` 텍스트만 표시
- 변경: `bg-slate-50` 숫자 카드로 변경 — "단어 수" 라벨 + "N개" `text-lg font-bold`
- 하단에 "2개 이상이면 다중 단어로 판단" 보조 텍스트 추가

### Step 2 (step2_related)
- 기존: pill 배지만 나열 (0개 시 이탤릭 텍스트)
- 변경: 상단에 개수 카드 추가 ("연관 검색어 N개"), 0개 시 "연관 검색어가 없습니다" 안내
- 기존 blue pill 배지는 카드 아래에 유지

### Step 3 (step3_autocomplete)
- 기존: pill 배지만 나열 (0개 시 이탤릭 텍스트)
- 변경: 상단에 개수 카드 추가 ("자동완성 제안어 N개"), 0개 시 "자동완성 제안어가 없습니다" 안내
- 기존 violet pill 배지는 카드 아래에 유지

### Step 4 (step4_search_volume)
- 합계 카드: `bg-white` → `bg-indigo-50`, `border-slate-100` → `border-indigo-100`
- 합계 숫자: `text-xs font-semibold` → `text-lg font-bold` (강조)
- PC/모바일 카드는 변경 없음

## 디자인 패턴 통일 확인
모든 Step 1~4가 아래 Step 5/6/7 카드 패턴을 따름:
- 라벨: `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`

## 빌드 & 배포
- `npm run build`: 성공 (에러/경고 없음)
- 서버 재시작: PORT=3100, HTTP 307 응답 확인 (정상)

## 테스트 결과
- TypeScript 빌드 타입 체크 통과
- 서버 기동 확인
- UI 전용 스타일 변경으로 로직 변경 없음

## 버그 유무
없음

## QC 자동 검증 결과
```json
{
  "task_id": "task-247.1",
  "overall": "PASS",
  "checks": {
    "api_health": "SKIP (서버 작업 아님)",
    "file_check": "PASS",
    "data_integrity": "PASS",
    "test_runner": "SKIP",
    "schema_contract": "SKIP (workers 변경 없음)"
  }
}
```

## 비고
- optional chaining 기존 패턴 유지
- 기존 pill 배지 색상(blue, violet) 유지
- Step 4는 최소 변경(합계 강조만)으로 기존 레이아웃 보존