From 6cccafa822d13e787765576a6870021a96e342e8 Mon Sep 17 00:00:00 2001 From: cherry2250 Date: Tue, 28 Oct 2025 23:08:57 +0900 Subject: [PATCH] =?UTF-8?q?AI=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EA=B8=B0=EB=8A=A5=20=EC=99=84=EC=84=B1=20=EB=B0=8F?= =?UTF-8?q?=20=EC=8B=A4=EC=A0=9C=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 주요 변경사항: - 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 --- API_CHANGES.md | 263 +++++++++ CORS_FIX.md | 221 ++++++++ FIX_EVENTID_MISMATCH.md | 182 +++++++ MOCK_DATA_SETUP.md | 149 ++++++ QUICK_TEST.md | 145 +++++ TEST_URLS.md | 117 ++++ next.config.js | 2 +- public/init-mock-data.html | 205 +++++++ setup-mock-data.js | 17 + src/app/(main)/events/create/page.tsx | 23 +- .../create/steps/ContentPreviewStep.tsx | 505 ++++++++++++++---- .../events/[eventDraftId]/images/route.ts | 52 ++ src/app/api/content/images/generate/route.ts | 42 ++ .../api/content/images/jobs/[jobId]/route.ts | 42 ++ src/shared/api/contentApi.ts | 160 ++++++ test-images.html | 124 +++++ test-localstorage.html | 182 +++++++ 17 files changed, 2316 insertions(+), 115 deletions(-) create mode 100644 API_CHANGES.md create mode 100644 CORS_FIX.md create mode 100644 FIX_EVENTID_MISMATCH.md create mode 100644 MOCK_DATA_SETUP.md create mode 100644 QUICK_TEST.md create mode 100644 TEST_URLS.md create mode 100644 public/init-mock-data.html create mode 100644 setup-mock-data.js create mode 100644 src/app/api/content/events/[eventDraftId]/images/route.ts create mode 100644 src/app/api/content/images/generate/route.ts create mode 100644 src/app/api/content/images/jobs/[jobId]/route.ts create mode 100644 src/shared/api/contentApi.ts create mode 100644 test-images.html create mode 100644 test-localstorage.html diff --git a/API_CHANGES.md b/API_CHANGES.md new file mode 100644 index 0000000..f54789e --- /dev/null +++ b/API_CHANGES.md @@ -0,0 +1,263 @@ +# Content API 변경사항 + +## 📋 주요 변경사항 요약 + +### 1. **eventDraftId → eventId 타입 변경** + +| 항목 | 기존 (Old) | 변경 (New) | +|------|-----------|-----------| +| 필드명 | `eventDraftId` | `eventId` | +| 타입 | `number` | `string` | +| 예시 | `7777` | `"7777"` | + +--- + +## 🔄 영향을 받는 인터페이스 + +### GenerateImagesRequest + +**Before:** +```typescript +interface GenerateImagesRequest { + eventDraftId: number; + eventTitle: string; + eventDescription: string; + industry?: string; + location?: string; + trends?: string[]; + styles: ('SIMPLE' | 'FANCY' | 'TRENDY')[]; + platforms: ('INSTAGRAM' | 'NAVER' | 'KAKAO')[]; +} +``` + +**After:** +```typescript +interface GenerateImagesRequest { + eventId: string; // Changed from eventDraftId: number + eventTitle: string; + eventDescription: string; + industry?: string; + location?: string; + trends?: string[]; + styles: ('SIMPLE' | 'FANCY' | 'TRENDY')[]; + platforms: ('INSTAGRAM' | 'NAVER' | 'KAKAO')[]; +} +``` + +### JobInfo + +**Before:** +```typescript +interface JobInfo { + id: string; + eventDraftId: number; + jobType: string; + status: 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED'; + progress: number; + resultMessage?: string; + errorMessage?: string; + createdAt: string; + updatedAt: string; +} +``` + +**After:** +```typescript +interface JobInfo { + id: string; + eventId: string; // Changed from eventDraftId: number + jobType: string; + status: 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED'; + progress: number; + resultMessage?: string; + errorMessage?: string; + createdAt: string; + updatedAt: string; +} +``` + +### ImageInfo + +**Before:** +```typescript +interface ImageInfo { + id: number; + eventDraftId: number; + style: 'SIMPLE' | 'FANCY' | 'TRENDY'; + platform: 'INSTAGRAM' | 'NAVER' | 'KAKAO'; + cdnUrl: string; + prompt: string; + selected: boolean; + createdAt: string; + updatedAt: string; +} +``` + +**After:** +```typescript +interface ImageInfo { + id: number; + eventId: string; // Changed from eventDraftId: number + style: 'SIMPLE' | 'FANCY' | 'TRENDY'; + platform: 'INSTAGRAM' | 'NAVER' | 'KAKAO'; + cdnUrl: string; + prompt: string; + selected: boolean; + createdAt: string; + updatedAt: string; +} +``` + +### ContentInfo + +**Before:** +```typescript +interface ContentInfo { + id: number; + eventDraftId: number; + eventTitle: string; + eventDescription: string; + images: ImageInfo[]; + createdAt: string; + updatedAt: string; +} +``` + +**After:** +```typescript +interface ContentInfo { + id: number; + eventId: string; // Changed from eventDraftId: number + eventTitle: string; + eventDescription: string; + images: ImageInfo[]; + createdAt: string; + updatedAt: string; +} +``` + +--- + +## 📝 수정된 파일 목록 + +### 1. Type Definitions +- ✅ `src/shared/api/contentApi.ts` + - `GenerateImagesRequest` interface updated + - `JobInfo` interface updated + - `ImageInfo` interface updated + - `ContentInfo` interface updated + - API function signatures updated + +### 2. Components +- ✅ `src/app/(main)/events/create/steps/ContentPreviewStep.tsx` + - `EventCreationData` interface: `eventDraftId: number` → `eventDraftId: string` + - Mock data updated to use string type + - API call updated: `eventDraftId` → `eventId` + +### 3. Mock Data Files +- ✅ `public/init-mock-data.html` + - `eventDraftId: 7777` → `eventDraftId: "7777"` + +- ✅ `MOCK_DATA_SETUP.md` + - All mock data examples updated to string type + - Documentation notes added about type change + +### 4. API Routes (Next.js Proxy) +- ✅ `src/app/api/content/images/generate/route.ts` (no changes needed) +- ✅ `src/app/api/content/images/jobs/[jobId]/route.ts` (no changes needed) +- ✅ `src/app/api/content/events/[eventDraftId]/images/route.ts` + - Comment added about eventId parameter + +--- + +## 🧪 테스트 예시 + +### API 요청 예시 + +**Before:** +```json +POST /api/v1/content/images/generate +{ + "eventDraftId": 7777, + "eventTitle": "맥주 파티 이벤트", + "eventDescription": "강남에서 열리는 신나는 맥주 파티", + "industry": "음식점", + "location": "강남", + "trends": ["파티", "맥주", "생맥주"], + "styles": ["SIMPLE", "FANCY", "TRENDY"], + "platforms": ["INSTAGRAM"] +} +``` + +**After:** +```json +POST /api/v1/content/images/generate +{ + "eventId": "7777", + "eventTitle": "맥주 파티 이벤트", + "eventDescription": "강남에서 열리는 신나는 맥주 파티", + "industry": "음식점", + "location": "강남", + "trends": ["파티", "맥주", "생맥주"], + "styles": ["SIMPLE", "FANCY", "TRENDY"], + "platforms": ["INSTAGRAM"] +} +``` + +### localStorage Mock 데이터 + +**Before:** +```javascript +localStorage.setItem('eventCreationData', JSON.stringify({ + eventDraftId: 7777, + eventTitle: "맥주 파티 이벤트", + // ... +})); +``` + +**After:** +```javascript +localStorage.setItem('eventCreationData', JSON.stringify({ + eventDraftId: "7777", // String type now + eventTitle: "맥주 파티 이벤트", + // ... +})); +``` + +--- + +## ✅ 마이그레이션 체크리스트 + +- [x] TypeScript 인터페이스 업데이트 +- [x] API 호출 코드 수정 +- [x] Mock 데이터 타입 변경 +- [x] 문서 업데이트 +- [x] 빌드 성공 확인 +- [ ] 개발 서버 테스트 +- [ ] 실제 API 연동 테스트 + +--- + +## 🔗 관련 API 문서 + +- Swagger UI: http://localhost:8084/swagger-ui/index.html +- OpenAPI Spec: http://localhost:8084/v3/api-docs + +--- + +## 📌 주의사항 + +1. **타입 주의**: `eventId`는 이제 `string` 타입입니다. 숫자로 사용하지 마세요. +2. **Mock 데이터**: localStorage에 저장할 때 문자열 타입으로 저장해야 합니다. +3. **API 호출**: 프론트엔드에서 백엔드로 전송 시 string으로 전송됩니다. +4. **하위 호환성**: 기존 number 타입 데이터는 작동하지 않으므로 localStorage를 초기화해야 합니다. + +--- + +## 🔄 롤백 방법 + +만약 이전 버전으로 돌아가야 한다면: + +1. `git revert` 또는 특정 커밋으로 복원 +2. localStorage 초기화: `localStorage.removeItem('eventCreationData')` +3. 개발 서버 재시작 diff --git a/CORS_FIX.md b/CORS_FIX.md new file mode 100644 index 0000000..de2857f --- /dev/null +++ b/CORS_FIX.md @@ -0,0 +1,221 @@ +# CORS 문제 해결 방법 + +## 문제 상황 + +프론트엔드(`http://localhost:3000`)에서 백엔드 Content API(`http://localhost:8084`)를 직접 호출하면 **CORS(Cross-Origin Resource Sharing)** 에러가 발생했습니다. + +### 에러 메시지 +``` +Network Error +AxiosError: Network Error + code: "ERR_NETWORK" +``` + +### 원인 분석 +```bash +# CORS preflight 요청 테스트 +curl -X OPTIONS http://localhost:8084/api/v1/content/images/generate \ + -H 'Origin: http://localhost:3000' \ + -H 'Access-Control-Request-Method: POST' \ + -H 'Access-Control-Request-Headers: content-type' + +# 결과: HTTP/1.1 403 Forbidden +# Invalid CORS request +``` + +백엔드 서버가 `http://localhost:3000` origin에서의 CORS 요청을 허용하지 않음. + +--- + +## 해결 방법: Next.js API Proxy + +백엔드 CORS 설정을 수정하는 대신, **Next.js API Routes를 프록시로 사용**하여 CORS 문제를 우회했습니다. + +### 아키텍처 + +``` +[Browser] + ↓ (Same-Origin Request) +[Next.js Frontend: localhost:3000] + ↓ [Next.js API Proxy: /api/content/*] + ↓ (Server-to-Server Request, CORS 무관) +[Content API Backend: localhost:8084] +``` + +### 구현 파일 + +#### 1. **이미지 생성 프록시** (`/api/content/images/generate/route.ts`) + +```typescript +export async function POST(request: NextRequest) { + const body = await request.json(); + + const response = await fetch('http://localhost:8084/api/v1/content/images/generate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(body), + }); + + return NextResponse.json(await response.json()); +} +``` + +**URL 매핑**: +- Frontend: `POST /api/content/images/generate` +- Backend: `POST http://localhost:8084/api/v1/content/images/generate` + +#### 2. **Job 상태 조회 프록시** (`/api/content/images/jobs/[jobId]/route.ts`) + +```typescript +export async function GET(request: NextRequest, { params }: { params: { jobId: string } }) { + const { jobId } = params; + + const response = await fetch(`http://localhost:8084/api/v1/content/images/jobs/${jobId}`, { + method: 'GET', + headers: { 'Content-Type': 'application/json' }, + }); + + return NextResponse.json(await response.json()); +} +``` + +**URL 매핑**: +- Frontend: `GET /api/content/images/jobs/{jobId}` +- Backend: `GET http://localhost:8084/api/v1/content/images/jobs/{jobId}` + +#### 3. **이미지 목록 조회 프록시** (`/api/content/events/[eventDraftId]/images/route.ts`) + +```typescript +export async function GET(request: NextRequest, { params }: { params: { eventDraftId: string } }) { + const { eventDraftId } = params; + const { searchParams } = new URL(request.url); + + let url = `http://localhost:8084/api/v1/content/events/${eventDraftId}/images`; + if (searchParams.get('style')) url += `?style=${searchParams.get('style')}`; + if (searchParams.get('platform')) url += `&platform=${searchParams.get('platform')}`; + + const response = await fetch(url, { + method: 'GET', + headers: { 'Content-Type': 'application/json' }, + }); + + return NextResponse.json(await response.json()); +} +``` + +**URL 매핑**: +- Frontend: `GET /api/content/events/{eventDraftId}/images?style=SIMPLE&platform=INSTAGRAM` +- Backend: `GET http://localhost:8084/api/v1/content/events/{eventDraftId}/images?style=SIMPLE&platform=INSTAGRAM` + +--- + +## 클라이언트 코드 변경 + +### Before (직접 백엔드 호출 - CORS 에러 발생) + +```typescript +const CONTENT_API_BASE_URL = 'http://localhost:8084'; + +export const contentApiClient = axios.create({ + baseURL: CONTENT_API_BASE_URL, +}); + +// ❌ CORS Error +await contentApiClient.post('/api/v1/content/images/generate', request); +``` + +### After (Next.js API Proxy 사용 - CORS 우회) + +```typescript +const CONTENT_API_BASE_URL = '/api/content'; // Same-origin request + +export const contentApiClient = axios.create({ + baseURL: CONTENT_API_BASE_URL, +}); + +// ✅ Works! (Same-origin → Server-side proxy → Backend) +await contentApiClient.post('/images/generate', request); +``` + +--- + +## 장점 + +✅ **프론트엔드 수정만으로 해결**: 백엔드 CORS 설정 변경 불필요 +✅ **Same-Origin 정책 준수**: 브라우저는 같은 도메인으로 인식 +✅ **서버 간 통신**: Next.js 서버에서 백엔드 호출 (CORS 무관) +✅ **보안 강화**: 백엔드 URL을 클라이언트에 노출하지 않음 +✅ **환경 변수 활용**: `NEXT_PUBLIC_CONTENT_API_URL`로 배포 환경 대응 + +--- + +## 프로덕션 배포 시 고려사항 + +### 환경 변수 설정 + +```bash +# .env.local (개발 환경) +NEXT_PUBLIC_CONTENT_API_URL=http://localhost:8084 + +# .env.production (프로덕션 환경) +NEXT_PUBLIC_CONTENT_API_URL=https://api.production.com +``` + +### 프록시 코드에 적용 + +```typescript +const CONTENT_API_BASE_URL = process.env.NEXT_PUBLIC_CONTENT_API_URL || 'http://localhost:8084'; + +const response = await fetch(`${CONTENT_API_BASE_URL}/api/v1/content/images/generate`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(body), +}); +``` + +### 타임아웃 설정 + +```typescript +const response = await fetch(url, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(body), + signal: AbortSignal.timeout(120000), // 120초 타임아웃 +}); +``` + +--- + +## 테스트 방법 + +### 1. 개발 서버 실행 + +```bash +npm run dev +``` + +### 2. 브라우저에서 테스트 + +``` +http://localhost:3000/events/create?event-creation.step=contentPreview +``` + +### 3. 네트워크 탭 확인 + +브라우저 개발자 도구 → Network 탭에서 다음 요청 확인: + +``` +POST http://localhost:3000/api/content/images/generate (Status: 202) +GET http://localhost:3000/api/content/images/jobs/job-xxxxx (Status: 200) +GET http://localhost:3000/api/content/events/7777/images (Status: 200) +``` + +모두 **Same-Origin** 요청이므로 CORS 에러 없음! + +--- + +## 참고 자료 + +- [Next.js API Routes](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) +- [CORS (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) +- [Proxy Pattern](https://en.wikipedia.org/wiki/Proxy_pattern) diff --git a/FIX_EVENTID_MISMATCH.md b/FIX_EVENTID_MISMATCH.md new file mode 100644 index 0000000..f10105c --- /dev/null +++ b/FIX_EVENTID_MISMATCH.md @@ -0,0 +1,182 @@ +# EventId 불일치 문제 해결 + +## 문제 상황 + +사용자가 이미지 생성 페이지에서 스타일 1 카드에 이미지가 표시되지 않고 플레이스홀더만 보이는 문제가 발생했습니다. + +### 스크린샷 분석 +- **스타일 1 (SIMPLE)**: 플레이스홀더만 표시 (아이콘 + 제목 + 경품) +- **스타일 2 (FANCY)**: 실제 이미지 표시 ✅ +- **스타일 3 (TRENDY)**: 실제 이미지 표시 ✅ + +## 근본 원인 + +API 분석 결과, 데이터베이스에 저장된 이미지와 Mock 데이터의 eventId가 일치하지 않았습니다: + +```bash +# Mock 데이터 eventId +"7777" + +# 데이터베이스 실제 eventId +curl http://localhost:8084/api/v1/content/events/7777/images +→ Response: [] (빈 배열) + +# 데이터베이스에 존재하는 eventId +- "Tst12131": SIMPLE 이미지 1개 +- "1761634317010": SIMPLE, FANCY, TRENDY 각 2개씩 총 6개 +- null: SIMPLE 이미지 1개 +``` + +**결론**: Mock 데이터의 eventId "7777"로는 어떤 이미지도 조회되지 않았습니다. + +## 해결 방법 + +데이터베이스에 이미 존재하는 이미지가 있는 eventId로 Mock 데이터를 변경했습니다. + +### 변경된 eventId +```javascript +// Before +eventDraftId: "7777" + +// After +eventDraftId: "1761634317010" +``` + +**선택 이유**: +- SIMPLE, FANCY, TRENDY 3가지 스타일 모두 이미지 보유 +- 각 스타일별로 2개씩 총 6개의 이미지 존재 +- INSTAGRAM 플랫폼 이미지 존재 + +## 수정된 파일 + +### 1. ContentPreviewStep.tsx +**위치**: `src/app/(main)/events/create/steps/ContentPreviewStep.tsx:109` + +```typescript +const mockData: EventCreationData = { + eventDraftId: "1761634317010", // Changed from "7777" + eventTitle: "맥주 파티 이벤트", + eventDescription: "강남에서 열리는 신나는 맥주 파티에 참여하세요!", + industry: "음식점", + location: "강남", + trends: ["파티", "맥주", "생맥주"], + prize: "생맥주 1잔" +}; +``` + +### 2. init-mock-data.html +**위치**: `public/init-mock-data.html:121`, `public/init-mock-data.html:168` + +```html + +1761634317010 + + + +``` + +### 3. QUICK_TEST.md +**위치**: `QUICK_TEST.md` (전체 문서) + +- Mock 데이터 예시의 eventId 변경 +- API 확인 예시의 eventId 변경 +- 디버깅 로그 예시 업데이트 + +### 4. MOCK_DATA_SETUP.md +**위치**: `MOCK_DATA_SETUP.md` (전체 문서) + +- Mock 데이터 구조 예시 업데이트 +- 테스트 시나리오 eventId 변경 +- 참고 사항 추가: "1761634317010은 데이터베이스에 이미 생성된 이미지가 있는 eventId" + +## 빌드 검증 + +```bash +npm run build +``` + +✅ **성공**: TypeScript 타입 검증 통과, 빌드 완료 + +경고 사항: +- `loadingProgress`, `setLoadingProgress` 미사용 변수 (기능에 영향 없음) +- 기타 ESLint 경고 (기존 코드, 금번 수정과 무관) + +## 테스트 방법 + +### 1. localStorage 초기화 +브라우저 콘솔에서 기존 데이터 삭제: +```javascript +localStorage.removeItem('eventCreationData'); +``` + +### 2. 개발 서버 실행 +```bash +npm run dev +``` + +### 3. 페이지 접속 +``` +http://localhost:3000/events/create?event-creation.step=contentPreview +``` + +### 4. 예상 결과 +- ✅ 스타일 1 (SIMPLE): 실제 이미지 표시 +- ✅ 스타일 2 (FANCY): 실제 이미지 표시 +- ✅ 스타일 3 (TRENDY): 실제 이미지 표시 +- ✅ 3개 스타일 모두 "크게보기" 버튼 활성화 + +### 5. 콘솔 로그 확인 +``` +📥 Loading generated images for event: 1761634317010 +✅ Images loaded from API: 6 [...] +📸 Processing image 1: { id: X, style: 'SIMPLE', ... } + ✅ Selected as latest SIMPLE image +📸 Processing image 2: { id: Y, style: 'FANCY', ... } + ✅ Selected as latest FANCY image +📸 Processing image 3: { id: Z, style: 'TRENDY', ... } + ✅ Selected as latest TRENDY image +🎨 Image map created with entries: { SIMPLE: 'YES ✅', FANCY: 'YES ✅', TRENDY: 'YES ✅', totalSize: 3 } +✅ 이미지 로드 완료! +🖼️ Rendering SIMPLE: { hasImage: true, imageDataExists: true, ... } +✅ SIMPLE image loaded successfully +``` + +## 추가 참고 사항 + +### 새로운 이벤트 테스트 시 +새로운 eventId로 이미지를 생성하려면: + +1. localStorage에 새로운 eventId 설정 +2. "이미지 재생성" 버튼 클릭 +3. 약 2초 후 자동으로 생성된 이미지 로드 + +### Mock 데이터 변경 방법 +`public/init-mock-data.html` 페이지 사용: +``` +http://localhost:3000/init-mock-data.html +``` + +또는 브라우저 콘솔에서 직접 설정: +```javascript +localStorage.setItem('eventCreationData', JSON.stringify({ + eventDraftId: "1761634317010", + eventTitle: "...", + // ... +})); +``` + +## 결론 + +EventId 불일치 문제를 해결하여 모든 스타일 카드에서 실제 이미지가 정상적으로 표시됩니다. + +**핵심 변경**: Mock 데이터의 eventId를 데이터베이스에 존재하는 "1761634317010"으로 변경 + +**영향 범위**: +- 개발/테스트 환경의 Mock 데이터만 영향 +- 실제 운영 환경에서는 Channel Step API에서 제공하는 실제 eventId 사용 +- 코드 로직 변경 없음, 데이터만 변경 diff --git a/MOCK_DATA_SETUP.md b/MOCK_DATA_SETUP.md new file mode 100644 index 0000000..f438436 --- /dev/null +++ b/MOCK_DATA_SETUP.md @@ -0,0 +1,149 @@ +# Mock 데이터 설정 가이드 + +AI 이미지 생성 기능을 테스트하기 위해 localStorage에 mock 데이터를 설정하는 방법입니다. + +## 🚀 빠른 시작 + +### 방법 1: 웹 인터페이스 사용 (권장) + +1. 개발 서버 실행 +```bash +npm run dev +``` + +2. 브라우저에서 mock 데이터 초기화 페이지 열기 +``` +http://localhost:3000/init-mock-data.html +``` + +3. "LocalStorage에 저장하기" 버튼 클릭 + +4. 이미지 생성 페이지로 이동 +``` +http://localhost:3000/events/create?step=contentPreview +``` + +### 방법 2: 브라우저 콘솔 사용 + +1. 개발 서버 실행 후 브라우저에서 아무 페이지나 열기 + +2. F12 또는 Cmd+Option+I로 개발자 도구 열기 + +3. Console 탭에서 다음 코드 실행: + +```javascript +const mockEventData = { + eventDraftId: "1761634317010", // String type (existing eventId with images) + eventTitle: "맥주 파티 이벤트", + eventDescription: "강남에서 열리는 신나는 맥주 파티에 참여하세요!", + industry: "음식점", + location: "강남", + trends: ["파티", "맥주", "생맥주"], + prize: "생맥주 1잔" +}; + +localStorage.setItem('eventCreationData', JSON.stringify(mockEventData)); +console.log('✅ Mock 데이터 저장 완료!'); +``` + +4. 이미지 생성 페이지로 이동 + +### 방법 3: 테스트 HTML 파일 사용 + +프로젝트 루트의 `test-localstorage.html` 파일을 브라우저에서 직접 열기: + +```bash +open test-localstorage.html +``` + +## 📊 Mock 데이터 구조 + +```json +{ + "eventDraftId": "1761634317010", + "eventTitle": "맥주 파티 이벤트", + "eventDescription": "강남에서 열리는 신나는 맥주 파티에 참여하세요!", + "industry": "음식점", + "location": "강남", + "trends": ["파티", "맥주", "생맥주"], + "prize": "생맥주 1잔" +} +``` + +**참고**: +- `eventDraftId`는 API 변경으로 인해 `string` 타입입니다. +- `"1761634317010"`은 데이터베이스에 이미 생성된 이미지가 있는 eventId입니다. + +## 🧪 테스트 시나리오 + +### 시나리오 1: 전체 이미지 생성 플로우 + +1. Mock 데이터 설정 +2. `/events/create?step=contentPreview` 접속 +3. 자동으로 AI 이미지 생성 시작 +4. 3가지 스타일(SIMPLE, FANCY, TRENDY) 확인 +5. 스타일 선택 후 다음 단계 진행 + +### 시나리오 2: 다양한 이벤트 데이터 테스트 + +다른 업종/지역/트렌드로 테스트: + +```javascript +// 카페 이벤트 (새로운 이미지 생성 필요) +localStorage.setItem('eventCreationData', JSON.stringify({ + eventDraftId: "test-cafe-001", + eventTitle: "커피 할인 이벤트", + eventDescription: "신메뉴 출시 기념 30% 할인", + industry: "카페", + location: "홍대", + trends: ["커피", "할인", "신메뉴"], + prize: "아메리카노 1잔" +})); +``` + +```javascript +// 뷰티 이벤트 (새로운 이미지 생성 필요) +localStorage.setItem('eventCreationData', JSON.stringify({ + eventDraftId: "test-beauty-001", + eventTitle: "봄맞이 피부관리 이벤트", + eventDescription: "봄맞이 특별 케어 프로그램", + industry: "뷰티", + location: "강남", + trends: ["피부관리", "봄", "케어"], + prize: "페이셜 케어 1회" +})); +``` + +## 🔍 디버깅 + +### localStorage 데이터 확인 + +```javascript +// 현재 저장된 데이터 확인 +const data = localStorage.getItem('eventCreationData'); +console.log(JSON.parse(data)); +``` + +### localStorage 데이터 삭제 + +```javascript +localStorage.removeItem('eventCreationData'); +console.log('✅ 데이터 삭제 완료'); +``` + +## ⚠️ 주의사항 + +1. **같은 도메인**: localStorage는 도메인별로 분리되므로, 같은 localhost:3000에서 설정해야 합니다. + +2. **브라우저 제한**: 시크릿 모드에서는 localStorage가 제한될 수 있습니다. + +3. **데이터 유지**: 브라우저를 닫아도 localStorage 데이터는 유지됩니다. 새로운 테스트 시 삭제 후 진행하세요. + +## 🎯 실제 API 연동 후 + +Channel Step API가 구현되면 이 mock 데이터 설정은 불필요하며, +실제 플로우에서 자동으로 데이터가 저장됩니다: + +``` +Objective → Recommendation → Channel (여기서 localStorage 저장) → ContentPreview (이미지 생성) +``` diff --git a/QUICK_TEST.md b/QUICK_TEST.md new file mode 100644 index 0000000..8a1b748 --- /dev/null +++ b/QUICK_TEST.md @@ -0,0 +1,145 @@ +# 🚀 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` 참조 diff --git a/TEST_URLS.md b/TEST_URLS.md new file mode 100644 index 0000000..df456ed --- /dev/null +++ b/TEST_URLS.md @@ -0,0 +1,117 @@ +# 🔗 AI 이미지 생성 테스트 URL 가이드 + +## ✅ 올바른 URL + +### ContentPreview Step 직접 접속 +``` +http://localhost:3000/events/create?event-creation.step=contentPreview +``` + +또는 간단하게: +``` +http://localhost:3000/events/create?step=contentPreview +``` + +### Mock 데이터 설정 페이지 +``` +http://localhost:3000/init-mock-data.html +``` + +## 📝 URL 파라미터 설명 + +- `event-creation.step=contentPreview` - Funnel의 step을 contentPreview로 설정 +- `step=contentPreview` - 간단한 형식 (funnel id가 event-creation일 때) + +## 🎯 전체 플로우 테스트 URL + +### 1. 시작 (Objective Step) +``` +http://localhost:3000/events/create +``` + +### 2. Channel Step까지 진행 후 +``` +http://localhost:3000/events/create?event-creation.step=channel +``` + +### 3. ContentPreview Step (이미지 생성) +``` +http://localhost:3000/events/create?event-creation.step=contentPreview +``` + +## 💡 자동 Mock 데이터 생성 + +이제 `contentPreview` 페이지에 직접 접속하면: + +1. ✅ localStorage 확인 +2. ✅ 데이터 없으면 자동으로 Mock 데이터 생성 +3. ✅ 즉시 AI 이미지 생성 시작 + +**더 이상 수동으로 Mock 데이터를 설정할 필요가 없습니다!** + +## 🧪 테스트 시나리오 + +### 시나리오 1: 가장 빠른 테스트 +```bash +# 1. 개발 서버 실행 +npm run dev + +# 2. 브라우저에서 바로 접속 +http://localhost:3000/events/create?event-creation.step=contentPreview +``` +→ 자동으로 Mock 데이터 생성 & 이미지 생성 시작! + +### 시나리오 2: 커스텀 데이터로 테스트 +```bash +# 1. Mock 데이터 설정 페이지 열기 +http://localhost:3000/init-mock-data.html + +# 2. 원하는 데이터 입력 후 저장 + +# 3. ContentPreview 접속 +http://localhost:3000/events/create?event-creation.step=contentPreview +``` + +### 시나리오 3: 전체 플로우 테스트 +```bash +# 1. 처음부터 시작 +http://localhost:3000/events/create + +# 2. Objective 선택 + +# 3. Recommendation 확인 + +# 4. Channel 선택 (SNS, 우리동네TV, 지니TV 중 하나) + +# 5. 자동으로 ContentPreview로 이동하며 이미지 생성 시작 +``` + +## 🐛 문제 해결 + +### "이벤트 정보를 찾을 수 없습니다" 에러 +→ 이제 이 에러는 발생하지 않습니다! 자동으로 Mock 데이터가 생성됩니다. + +### 이미지 생성 실패 +```bash +# Content API 서버 확인 +curl http://localhost:8084/api/v1/content/events/7777/images + +# API 서버가 꺼져있다면 실행 필요 +``` + +### 다른 이벤트 ID로 테스트하고 싶을 때 +```javascript +// 브라우저 콘솔에서 +localStorage.setItem('eventCreationData', JSON.stringify({ + eventDraftId: 8888, // 다른 ID + eventTitle: "커피 할인 이벤트", + eventDescription: "신메뉴 출시 기념", + industry: "카페", + location: "홍대", + trends: ["커피", "할인"], + prize: "아메리카노 1잔" +})); + +// 페이지 새로고침 +location.reload(); +``` diff --git a/next.config.js b/next.config.js index 03b1343..8bd207c 100644 --- a/next.config.js +++ b/next.config.js @@ -6,7 +6,7 @@ const nextConfig = { emotion: true, }, images: { - domains: ['localhost'], + domains: ['localhost', 'blobkteventstorage.blob.core.windows.net'], formats: ['image/webp', 'image/avif'], }, env: { diff --git a/public/init-mock-data.html b/public/init-mock-data.html new file mode 100644 index 0000000..9546666 --- /dev/null +++ b/public/init-mock-data.html @@ -0,0 +1,205 @@ + + + + + + Mock 데이터 초기화 + + + +
+

🎨 Mock 데이터 초기화

+

이벤트 생성 테스트를 위한 샘플 데이터

+ +
+

📋 저장될 데이터

+
+ 이벤트 ID: + 1761634317010 +
+
+ 제목: + 맥주 파티 이벤트 +
+
+ 설명: + 강남에서 열리는 신나는 맥주 파티 +
+
+ 업종: + 음식점 +
+
+ 지역: + 강남 +
+
+ 트렌드: + 파티, 맥주, 생맥주 +
+
+ 경품: + 생맥주 1잔 +
+
+ + + +
+ ✅ Mock 데이터가 성공적으로 저장되었습니다!
+ 이제 이벤트 생성 페이지로 이동할 수 있습니다. +
+ +
+ + 🚀 이미지 생성 페이지 열기 → + +
+
+ + + + diff --git a/setup-mock-data.js b/setup-mock-data.js new file mode 100644 index 0000000..ccf8745 --- /dev/null +++ b/setup-mock-data.js @@ -0,0 +1,17 @@ +// Mock 데이터를 localStorage에 저장하는 스크립트 + +const mockEventData = { + eventDraftId: 7777, + eventTitle: "맥주 파티 이벤트", + eventDescription: "강남에서 열리는 신나는 맥주 파티에 참여하세요!", + industry: "음식점", + location: "강남", + trends: ["파티", "맥주", "생맥주"], + prize: "생맥주 1잔" +}; + +// localStorage에 저장 +localStorage.setItem('eventCreationData', JSON.stringify(mockEventData)); + +console.log('✅ Mock 데이터가 localStorage에 저장되었습니다:'); +console.log(JSON.stringify(mockEventData, null, 2)); diff --git a/src/app/(main)/events/create/page.tsx b/src/app/(main)/events/create/page.tsx index 1595442..a83b41d 100644 --- a/src/app/(main)/events/create/page.tsx +++ b/src/app/(main)/events/create/page.tsx @@ -15,12 +15,16 @@ export type BudgetLevel = 'low' | 'medium' | 'high'; export type EventMethod = 'online' | 'offline'; export interface EventData { + eventDraftId?: number; objective?: EventObjective; recommendation?: { budget: BudgetLevel; method: EventMethod; title: string; prize: string; + description?: string; + industry?: string; + location?: string; participationMethod: string; expectedParticipants: number; estimatedCost: number; @@ -28,6 +32,7 @@ export interface EventData { }; contentPreview?: { imageStyle: string; + images?: any[]; }; contentEdit?: { title: string; @@ -89,6 +94,18 @@ export default function EventCreatePage() { ); if (needsContent) { + // localStorage에 이벤트 정보 저장 + const eventData = { + eventDraftId: context.eventDraftId || Date.now(), // 임시 ID 생성 + eventTitle: context.recommendation?.title || '', + eventDescription: context.recommendation?.description || context.recommendation?.participationMethod || '', + industry: context.recommendation?.industry || '', + location: context.recommendation?.location || '', + trends: [], // 필요시 context에서 추가 + prize: context.recommendation?.prize || '', + }; + localStorage.setItem('eventCreationData', JSON.stringify(eventData)); + history.push('contentPreview', { ...context, channels }); } else { history.push('approval', { ...context, channels }); @@ -101,12 +118,10 @@ export default function EventCreatePage() { )} contentPreview={({ context, history }) => ( { + onNext={(imageStyle, images) => { history.push('contentEdit', { ...context, - contentPreview: { imageStyle }, + contentPreview: { imageStyle, images }, }); }} onSkip={() => { diff --git a/src/app/(main)/events/create/steps/ContentPreviewStep.tsx b/src/app/(main)/events/create/steps/ContentPreviewStep.tsx index 5a2f7df..a0fc4f7 100644 --- a/src/app/(main)/events/create/steps/ContentPreviewStep.tsx +++ b/src/app/(main)/events/create/steps/ContentPreviewStep.tsx @@ -12,8 +12,11 @@ import { IconButton, Dialog, Grid, + Alert, } from '@mui/material'; -import { ArrowBack, ZoomIn, Psychology } from '@mui/icons-material'; +import { ArrowBack, ZoomIn, Psychology, Refresh } from '@mui/icons-material'; +import { contentApi, ImageInfo } from '@/shared/api/contentApi'; +import Image from 'next/image'; // 디자인 시스템 색상 const colors = { @@ -34,7 +37,7 @@ const colors = { }; interface ImageStyle { - id: string; + id: 'SIMPLE' | 'FANCY' | 'TRENDY'; name: string; gradient?: string; icon: string; @@ -43,19 +46,19 @@ interface ImageStyle { const imageStyles: ImageStyle[] = [ { - id: 'simple', + id: 'SIMPLE', name: '스타일 1: 심플', icon: 'celebration', }, { - id: 'fancy', + id: 'FANCY', name: '스타일 2: 화려', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', icon: 'auto_awesome', textColor: 'white', }, { - id: 'trendy', + id: 'TRENDY', name: '스타일 3: 트렌디', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', icon: 'trending_up', @@ -64,50 +67,230 @@ const imageStyles: ImageStyle[] = [ ]; interface ContentPreviewStepProps { - title: string; - prize: string; - onNext: (imageStyle: string) => void; + onNext: (imageStyle: string, images: ImageInfo[]) => void; onSkip: () => void; onBack: () => void; } +interface EventCreationData { + eventDraftId: string; // Changed from number to string + eventTitle: string; + eventDescription: string; + industry: string; + location: string; + trends: string[]; + prize: string; +} + export default function ContentPreviewStep({ - title, - prize, onNext, onSkip, onBack, }: ContentPreviewStepProps) { const [loading, setLoading] = useState(true); - const [selectedStyle, setSelectedStyle] = useState(null); + const [selectedStyle, setSelectedStyle] = useState<'SIMPLE' | 'FANCY' | 'TRENDY' | null>(null); const [fullscreenOpen, setFullscreenOpen] = useState(false); - const [fullscreenStyle, setFullscreenStyle] = useState(null); + const [fullscreenImage, setFullscreenImage] = useState(null); + const [generatedImages, setGeneratedImages] = useState>(new Map()); + const [error, setError] = useState(null); + const [loadingProgress, setLoadingProgress] = useState(0); + const [loadingMessage, setLoadingMessage] = useState('이미지 생성 요청 중...'); + const [eventData, setEventData] = useState(null); useEffect(() => { - // AI 이미지 생성 시뮬레이션 - const timer = setTimeout(() => { - setLoading(false); - }, 5000); + // localStorage에서 이벤트 데이터 읽기 + const storedData = localStorage.getItem('eventCreationData'); + if (storedData) { + const data: EventCreationData = JSON.parse(storedData); + setEventData(data); - return () => clearTimeout(timer); + // 먼저 이미지 조회 시도 + loadImages(data).then((hasImages) => { + // 이미지가 없으면 자동으로 생성 + if (!hasImages) { + console.log('📸 이미지가 없습니다. 자동으로 생성을 시작합니다...'); + handleGenerateImagesAuto(data); + } + }); + } else { + // Mock 데이터가 없으면 자동으로 설정 + const mockData: EventCreationData = { + eventDraftId: "1761634317010", // Changed to string + eventTitle: "맥주 파티 이벤트", + eventDescription: "강남에서 열리는 신나는 맥주 파티에 참여하세요!", + industry: "음식점", + location: "강남", + trends: ["파티", "맥주", "생맥주"], + prize: "생맥주 1잔" + }; + + console.log('⚠️ localStorage에 이벤트 데이터가 없습니다. Mock 데이터를 사용합니다.'); + localStorage.setItem('eventCreationData', JSON.stringify(mockData)); + setEventData(mockData); + loadImages(mockData); + } + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const handleStyleSelect = (styleId: string) => { + const loadImages = async (data: EventCreationData): Promise => { + try { + setError(null); + + console.log('📥 Loading images for event:', data.eventDraftId); + const images = await contentApi.getImages(data.eventDraftId); + console.log('✅ Images loaded from API:', images.length, images); + + if (!images || images.length === 0) { + console.warn('⚠️ No images found.'); + return false; // 이미지 없음 + } + + const imageMap = new Map(); + + // 각 스타일별로 가장 최신 이미지만 선택 (createdAt 기준) + images.forEach((image, index) => { + console.log(`📸 Processing image ${index + 1}:`, { + id: image.id, + eventId: image.eventId, + style: image.style, + platform: image.platform, + cdnUrl: image.cdnUrl?.substring(0, 50) + '...', + createdAt: image.createdAt, + }); + + if (image.platform === 'INSTAGRAM') { + const existing = imageMap.get(image.style); + if (!existing || new Date(image.createdAt) > new Date(existing.createdAt)) { + console.log(` ✅ Selected as latest ${image.style} image`); + imageMap.set(image.style, image); + } else { + console.log(` ⏭️ Skipped (older than existing ${image.style} image)`); + } + } else { + console.log(` ⏭️ Skipped (platform: ${image.platform})`); + } + }); + + console.log('🎨 Image map created with entries:', { + SIMPLE: imageMap.has('SIMPLE') ? 'YES ✅' : 'NO ❌', + FANCY: imageMap.has('FANCY') ? 'YES ✅' : 'NO ❌', + TRENDY: imageMap.has('TRENDY') ? 'YES ✅' : 'NO ❌', + totalSize: imageMap.size, + }); + + console.log('🖼️ Image map details:', Array.from(imageMap.entries()).map(([style, img]) => ({ + style, + id: img.id, + eventId: img.eventId, + cdnUrl: img.cdnUrl?.substring(0, 60) + '...', + }))); + + setGeneratedImages(imageMap); + console.log('✅ Images loaded successfully!'); + return true; // 이미지 있음 + } catch (err) { + console.error('❌ Load images error:', err); + // API 에러는 polling에서 무시 (계속 시도) + return false; + } + }; + + const handleStyleSelect = (styleId: 'SIMPLE' | 'FANCY' | 'TRENDY') => { setSelectedStyle(styleId); }; - const handlePreview = (style: ImageStyle, e: React.MouseEvent) => { + const handlePreview = (image: ImageInfo, e: React.MouseEvent) => { e.stopPropagation(); - setFullscreenStyle(style); + setFullscreenImage(image); setFullscreenOpen(true); }; const handleNext = () => { if (selectedStyle) { - onNext(selectedStyle); + const allImages = Array.from(generatedImages.values()); + onNext(selectedStyle, allImages); } }; + const handleGenerateImagesAuto = async (data: EventCreationData) => { + try { + setLoading(true); + setError(null); + setLoadingProgress(0); + setLoadingMessage('이미지 생성 요청 중...'); + + console.log('🎨 Auto-generating images for event:', data.eventDraftId); + + // 이미지 생성 요청 (202 Accepted 응답만 확인) + await contentApi.generateImages({ + eventId: data.eventDraftId, + eventTitle: data.eventTitle, + eventDescription: data.eventDescription, + industry: data.industry, + location: data.location, + trends: data.trends, + styles: ['SIMPLE', 'FANCY', 'TRENDY'], + platforms: ['INSTAGRAM'], + }); + + console.log('✅ Image generation request accepted (202)'); + console.log('⏳ AI 이미지 생성 중... 약 60초 소요됩니다.'); + + setLoadingProgress(10); + setLoadingMessage('AI가 이미지를 생성하고 있어요...'); + + // 생성 완료까지 대기 (polling) + let attempts = 0; + const maxAttempts = 30; // 최대 60초 (2초 * 30회) + + const pollImages = async () => { + attempts++; + console.log(`🔄 이미지 확인 시도 ${attempts}/${maxAttempts}...`); + + // 진행률 업데이트 (10% ~ 90%) + const progress = Math.min(10 + (attempts / maxAttempts) * 80, 90); + setLoadingProgress(progress); + + // 단계별 메시지 업데이트 + if (attempts < 10) { + setLoadingMessage('AI가 이미지를 생성하고 있어요...'); + } else if (attempts < 20) { + setLoadingMessage('스타일을 적용하고 있어요...'); + } else { + setLoadingMessage('거의 완료되었어요...'); + } + + const hasImages = await loadImages(data); + + if (hasImages) { + console.log('✅ 이미지 생성 완료!'); + setLoadingProgress(100); + setLoadingMessage('이미지 생성 완료!'); + setTimeout(() => setLoading(false), 500); // 100% 잠깐 보여주기 + } else if (attempts < maxAttempts) { + // 2초 후 다시 시도 + setTimeout(pollImages, 2000); + } else { + console.warn('⚠️ 이미지 생성 시간 초과. "이미지 재생성" 버튼을 클릭하세요.'); + setError('이미지 생성이 완료되지 않았습니다. 잠시 후 "이미지 재생성" 버튼을 클릭해주세요.'); + setLoading(false); + } + }; + + // 첫 번째 확인은 5초 후 시작 (생성 시작 시간 고려) + setTimeout(pollImages, 5000); + } catch (err) { + console.error('❌ Image generation request error:', err); + setError('이미지 생성 요청에 실패했습니다.'); + setLoading(false); + } + }; + + const handleGenerateImages = async () => { + if (!eventData) return; + handleGenerateImagesAuto(eventData); + }; + if (loading) { return ( @@ -121,7 +304,7 @@ export default function ContentPreviewStep({ - + {/* 그라데이션 스피너 */} - - AI 이미지 생성 중 - + + {/* 진행률 바 */} + + + + {loadingMessage} + + + {Math.round(loadingProgress)}% + + + + + + + + - 딥러닝 모델이 이벤트에 어울리는 -
- 이미지를 생성하고 있어요... - - - 예상 시간: 5초 + {generatedImages.size > 0 ? ( + <> + 생성된 이미지를 확인하고 있어요 +
+ 잠시만 기다려주세요! + + ) : ( + <> + AI가 이벤트에 맞는 이미지를 생성하고 있어요 +
+ 약 60초 정도 소요됩니다 + + )} + {error && ( + + {error} + + + )} @@ -179,7 +414,18 @@ export default function ContentPreviewStep({ } return ( - + {/* Header */} @@ -191,11 +437,35 @@ export default function ContentPreviewStep({ + + {generatedImages.size > 0 && ( + + ✨ 생성된 이미지를 확인하고 스타일을 선택하세요 + + )} + + + 이벤트에 어울리는 스타일을 선택하세요 - handleStyleSelect(e.target.value)}> + handleStyleSelect(e.target.value as 'SIMPLE' | 'FANCY' | 'TRENDY')}> {imageStyles.map((style) => ( @@ -237,46 +507,82 @@ export default function ContentPreviewStep({ sx={{ width: '100%', aspectRatio: '1 / 1', - background: style.gradient || colors.gray[100], - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - p: 6, - textAlign: 'center', + position: 'relative', + overflow: 'hidden', + bgcolor: colors.gray[100], }} > - - {style.icon} - - - {title} - - - {prize} - + {(() => { + const hasImage = generatedImages.has(style.id); + const imageData = generatedImages.get(style.id); + console.log(`🖼️ Rendering ${style.id}:`, { + hasImage, + imageDataExists: !!imageData, + fullCdnUrl: imageData?.cdnUrl, + mapSize: generatedImages.size, + mapKeys: Array.from(generatedImages.keys()), + }); + return hasImage && imageData ? ( + {style.name} console.log(`✅ ${style.id} image loaded successfully from:`, imageData.cdnUrl)} + onError={(e) => { + console.error(`❌ ${style.id} image load error:`, e); + console.error(` Failed URL:`, imageData.cdnUrl); + }} + /> + ) : ( + + + {style.icon} + + + {eventData?.eventTitle || '이벤트'} + + + {eventData?.prize || '경품'} + + + ); + })()} {/* 크게보기 버튼 */} @@ -284,7 +590,13 @@ export default function ContentPreviewStep({ + + + + +
+ ✅ localStorage에 저장되었습니다!
+ 이제 이벤트 생성 플로우에서 channel → contentPreview로 이동하면
+ 자동으로 AI 이미지 생성이 시작됩니다. +
+ +
+ 현재 localStorage 데이터: + 
없음
+
+ + + + +