# Task 31: 블로그형 에디터 (WYSIWYG) 구현

**작업 일시:** 2026-02-19 19:35
**상태:** 완료 (Deployed)
**관련 Task ID:** 35

## 1. 개요 (Context)
사용자는 기존의 마크다운 기반 텍스트 에디터가 아닌, **네이버 블로그나 티스토리처럼** 직관적인 이미지 첨부 기능을 원했습니다.
이에 따라 9-Agent 회의(`docs/plans/260219-blog-style-editor-plan.md`)를 통해 기존 Tiptap 에디터를 확장하여 WYSIWYG(What You See Is What You Get) 경험을 구현하기로 결정했습니다.

## 2. 구현 내용 (Implementation Details)

### A. Tiptap Image Extension 설치
-   `@tiptap/extension-image` 패키지를 설치하여 에디터가 이미지 노드를 인식하고 렌더링할 수 있도록 했습니다.
-   이제 텍스트 사이에 이미지가 시각적으로 배치됩니다.

### B. 사용자 맞춤형 툴바 (Sticky Toolbar)
-   **파일:** `src/components/EditorToolbar.tsx`
-   **기능:**
    -   에디터 상단에 고정된(Sticky) 툴바를 배치하여 스크롤 시에도 접근 가능하게 했습니다.
    -   굵게, 기울임, 헤딩(H1~H3), 리스트, 인용구 버튼 제공.
    -   **[📷 사진] 버튼:** 클릭 시 로컬 파일 탐색기가 열리고 이미지를 선택할 수 있습니다.

### C. 이미지 업로드 프로세스 (Secure Flow)
사용자가 이미지를 선택하면 다음과 같은 과정이 자동으로 진행됩니다:
1.  **Upload:** `/api/upload` (Google Drive)로 파일을 전송합니다.
2.  **Get ID:** 업로드된 파일의 Google Drive File ID를 반환받습니다.
3.  **Insert:** 에디터의 현재 커서 위치에 이미지 노드를 삽입합니다.
    -   URL 패턴: `/api/drive-image/[FileID]`
4.  **Render:** 보안 프록시 API가 이미지를 스트리밍하여 프론트엔드에 표시합니다.

### D. 호환성 패치 (Next.js 15+)
-   **이슈:** `/api/drive-image/[fileId]` 라우트 핸들러에서 500 에러 발생.
-   **원인:** Next.js 15 이상에서는 `params` 객체가 비동기(`Promise`)로 변경됨.
-   **해결:** `await props.params`를 먼저 수행한 후 `fileId`에 접근하도록 수정했습니다.

## 3. 검증 (Verification)
-   **기능 테스트:**
    1.  [사진] 버튼 클릭 -> 이미지 선택.
    2.  업로드 로딩 표시 확인.
    3.  에디터 본문에 이미지가 정상적으로 삽입되는지 확인.
-   **빌드 테스트:** `npm run build` 성공 확인 (TypeScript 오류 없음).

## 4. 향후 계획
-   이미지 클릭 시 사이즈 조절(Resizing) 기능 추가 고려.
-   드래그 앤 드롭(Drag & Drop) 업로드 지원 검토.