# task-1584.1 완료 보고서: 네이버 블로그 미리보기 + 클린 복사 (Phase 1)

## SCQA

**S**: 네이버 블로그 글 생성 기능이 대시보드에 구현되어 있으며, `BlogGenerateStep` 컴포넌트에서 생성된 콘텐츠를 표시한다.

**C**: 생성된 블로그 글이 마크다운 원문 그대로 `whitespace-pre-wrap`으로 표시되어 실제 블로그 글 형태와 괴리가 크며, 복사 시 plain text만 지원하여 네이버 SE 에디터에 서식 없이 붙여넣기된다.

**Q**: 블로그 스타일 미리보기 렌더링과 스타일이 적용된 HTML 클린 복사를 구현하여, 실제 블로그 게시 워크플로우를 개선할 수 있는가?

**A**: `parseBlogContent` (미리보기용)과 `generateCleanHTML` (복사용) 2개의 파서 함수를 추가하여 마크다운→HTML 변환을 구현했다. "텍스트 복사" / "블로그용 복사" 2개 버튼으로 복사 옵션을 제공하며, `ClipboardItem` API로 HTML MIME type 복사를 지원한다. 이미지 플레이스홀더는 미리보기에서 회색 점선 박스로, 복사 시에는 원문 텍스트로 유지된다.

## 수정 파일

- `/home/jay/workspace/dashboard/components/NaverBlogView.js`

## 변경 내역

### 1. parseBlogContent 함수 추가 (line 374-442)
- `# / ## / ###` → h1/h2/h3 (인라인 스타일, 네이버 블로그 유사 폰트 사이즈)
- `[이미지: 설명]` → 회색 dashed 플레이스홀더 div (📷 이모지)
- `[quotation_line]...[/quotation_line]` → 파란 좌측 보더 blockquote
- 빈 줄 기준 문단 분리 → p 태그 (16px, line-height 1.8)
- `**볼드**` → `<strong>` 일괄 치환
- HTML escape 적용 (XSS 방지)

### 2. generateCleanHTML 함수 추가 (line 444-513)
- parseBlogContent와 동일 구조
- 차이점: `[이미지: 설명]` → 원문 텍스트 p 태그로 유지 (이모지 없음)
- 인라인 스타일만 사용 (class/data 속성 없음)

### 3. BlogGenerateStep 컴포넌트 수정
- `copied` 상태 + `handleCopy(mode)` 함수 추가
- "복사" 단일 버튼 → "텍스트 복사" / "블로그용 복사" 2개 버튼으로 교체
- alert() 제거 → "✓ 복사됨" 인라인 피드백 (2초)
- `whitespace-pre-wrap` 텍스트 → `dangerouslySetInnerHTML` + parseBlogContent 렌더링
- ClipboardItem API로 text/html + text/plain 동시 복사 (fallback: writeText)

## 발견 이슈 및 해결

### 자체 해결 (3건)

1. **미사용 copyMode/setCopyMode 상태** — handleCopy가 매개변수로 mode를 받으므로 불필요한 상태 제거
   - 수정: NaverBlogView.js에서 해당 useState 라인 삭제

2. **범위 외 이미지 생성 인프라 코드** — 이리스가 Phase 2용 이미지 생성 기능(handleGenerateImages, imageTaskId, imageStatus, imageLoading, imageError, 폴링 useEffect, 이미지 그리드 UI)을 사전 추가했으나 UI 트리거 없이 데드코드 상태
   - 수정: 이미지 생성 관련 상태 5개, 함수 1개, useEffect 1개, JSX 150줄, parseImageDescriptions 헬퍼 함수 전체 제거

3. **이미지 렌더링 JSX 복잡도** — imageStatus 조건 분기로 인해 React.createElement 혼합 사용
   - 수정: 단순 dangerouslySetInnerHTML 렌더링으로 교체 (parseBlogContent 함수 내에서 이미지 플레이스홀더 처리)

## 테스트 결과

- 구문 검증: JSX 파일 (빌드 파이프라인에서 트랜스파일, Node.js 직접 검증 불가)
- 기존 테스트 파일: 없음 (UI 컴포넌트)
- TypeScript 진단: NaverBlogView/keywordAnalysisResult "declared but never read" 2건 — 기존 경고 (본 작업 범위 외)

### 수동 테스트 시나리오
1. 글 생성 후 미리보기가 블로그 스타일로 렌더링되는지 확인
2. "블로그용 복사" → 네이버 SE 에디터 붙여넣기 → 폰트 16px, 깔끔한 포맷 확인
3. "텍스트 복사" → 일반 텍스트 붙여넣기 확인
4. `[이미지: 설명]` 이 미리보기에서 회색 박스로 표시되는지 확인
5. 불필요한 class, data 속성이 없는지 확인

## 모델 사용 기록

- 팀원: 이리스(프론트엔드) / 작업 내용: parseBlogContent, generateCleanHTML 함수 구현 + BlogGenerateStep UI 수정 / 사용 모델: sonnet / 정당성: -
- 팀장(헤르메스): 코드 리뷰 + 범위 외 데드코드 제거 (직접 개입 사유: 이리스가 범위 외 코드를 추가하여 팀장이 정리)