# 🚀 AI 이미지 생성 빠른 테스트 가이드

## ⚡ 가장 빠른 방법 (기존 이미지 확인)

```bash
# 1. 개발 서버 실행
npm run dev

# 2. 브라우저에서 바로 접속
http://localhost:3000/events/create?event-creation.step=contentPreview
```

✨ **끝!** 자동으로 Mock 데이터(eventId: "1761634317010")가 생성되고 기존 생성된 이미지를 불러옵니다.

💡 **이미지가 없을 경우**: "이미지 생성하기" 버튼을 클릭하면 새로운 이미지를 생성합니다.

---

## 📋 커스텀 데이터로 테스트 (선택사항)

### 1단계: 개발 서버 실행

```bash
npm run dev
```

### 2단계: Mock 데이터 설정 (3가지 방법 중 선택)

### ✨ 방법 A: 웹 UI 사용 (가장 쉬움!)

브라우저에서 열기:
```
http://localhost:3000/init-mock-data.html
```

"LocalStorage에 저장하기" 버튼 클릭 → 완료!

---

### 방법 B: 브라우저 콘솔 사용

1. `http://localhost:3000` 접속
2. F12 (개발자 도구) → Console 탭
3. 다음 코드 복사 & 붙여넣기:

```javascript
localStorage.setItem('eventCreationData', JSON.stringify({
  eventDraftId: "1761634317010",
  eventTitle: "맥주 파티 이벤트",
  eventDescription: "강남에서 열리는 신나는 맥주 파티에 참여하세요!",
  industry: "음식점",
  location: "강남",
  trends: ["파티", "맥주", "생맥주"],
  prize: "생맥주 1잔"
}));
```

---

### 방법 C: HTML 파일 직접 열기

```bash
open test-localstorage.html
```

## 3단계: 이미지 생성 페이지 접속

브라우저에서 열기:
```
http://localhost:3000/events/create?event-creation.step=contentPreview
```

## 4단계: 자동 실행 확인 ✅

1. 페이지 로딩되면 자동으로 이미지 생성 시작
2. 로딩 스피너와 진행률 확인
3. 약 60초 후 3가지 스타일 이미지 완성
   - 스타일 1: 심플
   - 스타일 2: 화려
   - 스타일 3: 트렌디

## 예상 결과

### 이미지가 있는 경우
- ✅ **즉시 표시**: 로딩 후 바로 이미지 미리보기 화면
- ✅ **3개 스타일 이미지**: SIMPLE, FANCY, TRENDY 각각 최신 이미지 표시
- ✅ **이미지 선택**: 라디오 버튼으로 원하는 스타일 선택
- ✅ **재생성 버튼**: "이미지 재생성" 버튼으로 새로운 이미지 생성 가능
- ✅ **크게보기**: 각 이미지 클릭 시 전체화면 미리보기

### 이미지가 없는 경우
- ⚠️ **에러 메시지**: "생성된 이미지가 없습니다. 이미지를 먼저 생성해주세요."
- 🔄 **생성 버튼**: "이미지 생성하기" 버튼 클릭
- ⏳ **생성 대기**: API 요청 후 2초 뒤 자동으로 이미지 조회
- ✅ **이미지 표시**: 생성 완료된 이미지 자동 표시

## 문제 해결

### ~~"이벤트 정보를 찾을 수 없습니다" 에러~~
→ ✅ **해결됨!** 이제 자동으로 Mock 데이터가 생성됩니다.

### ~~Network Error / CORS 에러~~
→ ✅ **해결됨!** Next.js API proxy를 통해 CORS 문제 우회
→ 프론트엔드가 `/api/content/*` → 백엔드 `localhost:8084` 로 자동 프록시

### 이미지 생성 실패
→ Content API (localhost:8084) 실행 여부 확인
→ 터미널에서 확인: `curl http://localhost:8084/api/v1/content/events/7777/images`

### 이미지가 표시되지 않음
→ 네트워크 탭에서 CDN URL 로드 상태 확인
→ Azure Blob Storage 접근 권한 확인

## API 확인

```bash
# 이벤트 1761634317010의 이미지 확인
curl http://localhost:8084/api/v1/content/events/1761634317010/images

# 프론트엔드 프록시를 통한 확인 (개발 서버 실행 중)
curl http://localhost:3000/api/content/events/1761634317010/images
```

## 디버깅

브라우저 개발자 도구 (F12) → Console 탭에서 다음 로그 확인:

```
📥 Loading generated images for event: 1761634317010
✅ Images loaded from API: 6 [...]
📸 Processing image 1: { id: 1, style: 'SIMPLE', platform: 'INSTAGRAM', ... }
  ✅ Selected as latest SIMPLE image
📸 Processing image 2: { id: 3, style: 'FANCY', platform: 'INSTAGRAM', ... }
  ✅ Selected as latest FANCY image
📸 Processing image 3: { id: 5, style: 'TRENDY', platform: 'INSTAGRAM', ... }
  ✅ Selected as latest TRENDY image
🎨 Image map created with entries: { SIMPLE: 'YES ✅', FANCY: 'YES ✅', TRENDY: 'YES ✅', totalSize: 3 }
✅ 이미지 로드 완료! 미리보기 화면으로 전환합니다.
🖼️ Rendering SIMPLE: { hasImage: true, imageDataExists: true, cdnUrl: 'https://blob...' }
✅ SIMPLE image loaded successfully
```

---

더 자세한 내용은 `MOCK_DATA_SETUP.md` 참조