# task-1567.1 완료 보고서

## SCQA

**S**: 네이버 블로그 키워드 분석 워크플로우(`NaverBlogView.js`)에서 키워드 순위 선택이 드롭다운 방식으로 구현되어 있으며, 5개 고정 순위 슬롯에 키워드를 하나씩 선택해야 한다.

**C**: 제이회장님이 요청한 "테이블에서 클릭 선택 → 드래그로 순위 결정" 직관적 UX가 구현되어 있지 않아 사용성이 떨어진다. 드롭다운으로 키워드를 찾아 선택하는 과정이 비직관적이다.

**Q**: 클릭 선택 + 드래그 순위 방식으로 UX를 개선하여 키워드 순위 설정 과정을 직관적으로 만들 수 있는가?

**A**: `KeywordAnalysisStep` 컴포넌트를 리팩토링하여 해결. 드롭다운 기반 순위 편집 섹션을 완전히 제거하고, (1) 분석 결과 테이블 행 클릭으로 키워드 선택/해제, (2) 선택된 키워드를 카드형 UI로 표시하며 HTML5 Drag and Drop으로 순위 변경 가능, (3) X 버튼으로 해제, (4) 최대 5개 제한 구현. `onConfirm` 출력 형태를 동일하게 유지하여 하위 호환성 보장.

## 변경 내역

### 수정 파일
- `/home/jay/workspace/dashboard/components/NaverBlogView.js`

### 주요 변경 사항

**State 변경 (라인 86~88)**
- 삭제: `rankings` (5개 고정 배열), `keywordList`
- 추가: `selectedKeywords` (동적 배열, 순서=순위), `dragIndex`, `dragOverIndex`

**함수 변경**
- 삭제: `updateRanking`
- 추가: `addKeyword`, `removeKeyword`, `isKeywordSelected`, `handleDragStart`, `handleDragOver`, `handleDrop`, `handleDragEnd`
- 수정: `handleConfirm` (selectedKeywords → rankings 형태 변환), `handleAnalyze` (빈 배열로 초기화)

**UI 변경 (라인 238~364)**
- 신규 "선택된 키워드 순위" 영역: 키워드 입력과 분석 결과 사이에 배치
  - 빈 상태: "아래 분석 결과에서 키워드를 클릭하여 선택하세요" 안내문
  - 선택 시: 파란 원형 배지(순위 번호) + 드래그 핸들 + X 삭제 버튼
  - "순위 확정 → 글 생성으로" 버튼은 이 영역 하단에 배치
- 분석 결과 테이블: 행 클릭으로 선택 토글, 선택된 행은 bg-blue-50 + ✓ 체크 아이콘
- 5개 선택 시 미선택 행 반투명(opacity-50) 처리
- 드롭다운 기반 "추천 순위 편집" 섹션 전체 제거

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **드래그 시 시각적 피드백 부재 가능성** — dragIndex/dragOverIndex state로 드래그 중인 아이템은 opacity-50, 드롭 대상은 border-blue-400 표시
2. **모바일 터치 이벤트 간섭** — `touch-action: none` CSS 속성 추가하여 스크롤과 드래그 간섭 방지
3. **중복 선택 방지 누락 가능성** — `addKeyword`에서 `selectedKeywords.find(s => s.keyword === name)` 체크로 중복 방지

### 범위 외 미해결 (0건)
없음

## 하위 호환성

`onConfirm(rankings, results)` 호출 형태 유지:
- `rankings` 배열: `[{rank: 1, keyword: '인카금융', isCustom: false}, ...]`
- `BlogGenerateStep`이 기대하는 `rankings.filter(r => r.keyword.trim())` 호출 정상 동작

## 셀프 QC 체크리스트
- [x] 1. 영향 파일: NaverBlogView.js 1건만 수정
- [x] 2. 엣지 케이스: 0개 선택(에러 메시지), 5개 초과(차단), 중복 클릭(해제), 동일 위치 드래그(무시)
- [x] 3. 작업 지시와 정확히 일치
- [x] 4. 에러 처리 유지, XSS 위험 없음 (React JSX 자동 이스케이프)
- [x] 5. NaverBlog 관련 테스트 파일 없음 — 기존 테스트 없으므로 회귀 불가
- [x] 6. 이슈 3건 자체 해결 완료
- [x] 7. 기존 컴포넌트 패턴과 일관성 유지 (SOLID/DRY 위반 없음)
- [x] 8. onConfirm 인터페이스 변경 없음 — 문서 갱신 불필요
- [x] 9. 이미지/배너 작업 아님 — 해당 없음

## 모델 사용 기록
- 팀원: 이리스 / 작업 내용: KeywordAnalysisStep 컴포넌트 UX 리팩토링 / 사용 모델: sonnet / 정당성: -