# 네이버 블로그 키워드 선택 UX 개선: 클릭 선택 + 드래그 순위

## 배경
- 현재: 분석 결과 아래에 "추천 순위 편집" 섹션이 드롭다운 방식으로 존재
- 제이회장님 요청: 테이블에서 클릭 선택 → 드래그로 순위 결정하는 직관적 UX

## 수정 대상
- `/home/jay/workspace/dashboard/components/NaverBlogView.js` — `KeywordAnalysisStep` 컴포넌트 (라인 78~317)

## 현재 구조 (순서)
1. 키워드 입력 (라인 180~206)
2. 분석 결과 테이블 (라인 208~259)
3. 추천 순위 편집 — 드롭다운 (라인 261~317)

## 변경 후 구조 (순서)
1. **키워드 입력** (기존 유지)
2. **선택된 키워드 영역 (신규)** — "키워드 입력"과 "분석 결과" 사이에 위치
   - 선택된 키워드 1~5개가 카드/칩 형태로 표시
   - **드래그 앤 드롭**으로 순위(1~5순위) 변경 가능
   - 각 카드에 순위 번호 표시 (파란 원형 배지)
   - X 버튼으로 선택 해제 가능
   - 키워드 미선택 시: "아래 분석 결과에서 키워드를 클릭하여 선택하세요" 안내 문구
   - 최대 5개까지 선택 가능, 5개 도달 시 추가 선택 불가 표시
   - "순위 확정 → 글 생성으로" 버튼은 이 영역 하단에 배치
3. **분석 결과 테이블** (수정)
   - 각 키워드 행 클릭 시 위 "선택된 키워드 영역"에 추가
   - 이미 선택된 키워드는 행 배경색 변경 (예: bg-blue-50) + 체크 아이콘
   - 다시 클릭하면 선택 해제

## 드래그 구현
- HTML5 Drag and Drop API 사용 (외부 라이브러리 없이)
- `draggable`, `onDragStart`, `onDragOver`, `onDrop` 이벤트 활용
- 드래그 시 시각적 피드백 (opacity 변경, 드롭 영역 하이라이트)
- 모바일에서는 터치 이벤트 고려 (touch-action: none)

## 기존 코드 제거
- "추천 순위 편집" 섹션 (라인 261~317) 전체 제거
- `rankings` state의 초기화 로직 변경: 분석 결과 시 자동 추천 5개 → 빈 배열로 시작
- `updateRanking()` 함수 제거, 대신 `addKeyword()`, `removeKeyword()`, `reorderKeywords()` 함수

## state 변경
```javascript
// 변경 전
const [rankings, setRankings] = React.useState([
    { rank: 1, keyword: '', isCustom: false },
    ...
]);

// 변경 후
const [selectedKeywords, setSelectedKeywords] = React.useState([]);
// 배열 순서가 곧 순위. [{keyword: '인카금융', data: {...}}, ...]
```

## 유지할 것
- `handleConfirm` 함수의 출력 형태 유지 (rankings 배열로 변환하여 onConfirm 호출)
- 분석 결과 테이블의 정렬 기능 유지
- 에러 처리 유지

## 테스트
1. 키워드 분석 후 테이블에서 3개 키워드 클릭 → 선택 영역에 표시되는지
2. 드래그로 순위 변경 → 순서가 바뀌는지
3. X 버튼으로 선택 해제 → 테이블 행 배경색 복원되는지
4. 5개 초과 선택 시 제한되는지
5. "순위 확정 → 글 생성으로" 클릭 시 기존과 동일한 데이터가 전달되는지

## 보고서
`/home/jay/workspace/memory/reports/task-1567.md`에 작성