mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 15:36:23 +00:00
6cccafa822
주요 변경사항: - Step flow 통합: localStorage 기반 eventId 사용 - 자동 이미지 생성: 이미지 없을 시 자동 생성 트리거 - 진행률 바 추가: 0-100% 진행률 표시 - 동적 로딩 메시지: 단계별 메시지 업데이트 - Next.js 15 API routes 수정: params를 Promise로 처리 - 실제 배포 API 연동: Content API 서버 URL 설정 기술 세부사항: - API proxy routes 추가 (CORS 우회) - 2초 폴링 메커니즘 (최대 60초) - 환경변수: NEXT_PUBLIC_CONTENT_API_URL 설정 - CDN URL 디버그 오버레이 제거 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
146 lines
4.5 KiB
Markdown
146 lines
4.5 KiB
Markdown
# 🚀 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` 참조
|