Merge pull request #7 from ktds-dg0501/feature/content

AI 이미지 생성 기능 완성 및 실제 API 연동

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. 개발 서버 재시작

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)

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
+<!-- UI 표시 -->
+<span id="eventId">1761634317010</span>
+
+<!-- JavaScript 데이터 -->
+<script>
+const mockEventData = {
+  eventDraftId: "1761634317010", // Changed from "7777"
+  // ...
+};
+</script>
+```
+
+### 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 사용
+- 코드 로직 변경 없음, 데이터만 변경

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 (이미지 생성)
+```

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` 참조

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();
+```

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: {

public/init-mock-data.html

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mock 데이터 초기화</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            margin: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .container {
+            background: white;
+            border-radius: 16px;
+            padding: 40px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+            max-width: 500px;
+            text-align: center;
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 28px;
+        }
+        .subtitle {
+            color: #666;
+            margin-bottom: 30px;
+            font-size: 14px;
+        }
+        .data-box {
+            background: #f9fafb;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            padding: 20px;
+            text-align: left;
+            margin-bottom: 25px;
+        }
+        .data-box h3 {
+            margin: 0 0 15px 0;
+            color: #374151;
+            font-size: 16px;
+        }
+        .data-item {
+            margin-bottom: 10px;
+            font-size: 14px;
+        }
+        .data-item strong {
+            color: #4b5563;
+            display: inline-block;
+            width: 120px;
+        }
+        .data-item span {
+            color: #6b7280;
+        }
+        button {
+            background: linear-gradient(135deg, #C084FC 0%, #F472B6 100%);
+            color: white;
+            border: none;
+            padding: 14px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s;
+            width: 100%;
+        }
+        button:hover {
+            transform: translateY(-2px);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        .success {
+            background: #10b981;
+            color: white;
+            padding: 15px;
+            border-radius: 8px;
+            margin-top: 20px;
+            display: none;
+            animation: slideIn 0.3s ease-out;
+        }
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .link {
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid #e5e7eb;
+        }
+        .link a {
+            color: #667eea;
+            text-decoration: none;
+            font-weight: 500;
+        }
+        .link a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎨 Mock 데이터 초기화</h1>
+        <p class="subtitle">이벤트 생성 테스트를 위한 샘플 데이터</p>
+
+        <div class="data-box">
+            <h3>📋 저장될 데이터</h3>
+            <div class="data-item">
+                <strong>이벤트 ID:</strong>
+                <span id="eventId">1761634317010</span>
+            </div>
+            <div class="data-item">
+                <strong>제목:</strong>
+                <span id="title">맥주 파티 이벤트</span>
+            </div>
+            <div class="data-item">
+                <strong>설명:</strong>
+                <span id="description">강남에서 열리는 신나는 맥주 파티</span>
+            </div>
+            <div class="data-item">
+                <strong>업종:</strong>
+                <span id="industry">음식점</span>
+            </div>
+            <div class="data-item">
+                <strong>지역:</strong>
+                <span id="location">강남</span>
+            </div>
+            <div class="data-item">
+                <strong>트렌드:</strong>
+                <span id="trends">파티, 맥주, 생맥주</span>
+            </div>
+            <div class="data-item">
+                <strong>경품:</strong>
+                <span id="prize">생맥주 1잔</span>
+            </div>
+        </div>
+
+        <button onclick="setupMockData()">
+            💾 LocalStorage에 저장하기
+        </button>
+
+        <div id="success" class="success">
+            ✅ Mock 데이터가 성공적으로 저장되었습니다!<br>
+            이제 이벤트 생성 페이지로 이동할 수 있습니다.
+        </div>
+
+        <div class="link">
+            <a href="/events/create?step=contentPreview" target="_blank">
+                🚀 이미지 생성 페이지 열기 →
+            </a>
+        </div>
+    </div>
+
+    <script>
+        function setupMockData() {
+            const mockEventData = {
+                eventDraftId: "1761634317010",
+                eventTitle: "맥주 파티 이벤트",
+                eventDescription: "강남에서 열리는 신나는 맥주 파티에 참여하세요!",
+                industry: "음식점",
+                location: "강남",
+                trends: ["파티", "맥주", "생맥주"],
+                prize: "생맥주 1잔"
+            };
+
+            // localStorage에 저장
+            localStorage.setItem('eventCreationData', JSON.stringify(mockEventData));
+
+            // 성공 메시지 표시
+            const successDiv = document.getElementById('success');
+            successDiv.style.display = 'block';
+
+            // 콘솔에 로그
+            console.log('✅ Mock 데이터가 localStorage에 저장되었습니다:');
+            console.log(JSON.stringify(mockEventData, null, 2));
+
+            // 5초 후 메시지 숨기기
+            setTimeout(() => {
+                successDiv.style.display = 'none';
+            }, 5000);
+        }
+
+        // 페이지 로드 시 현재 localStorage 확인
+        window.onload = function() {
+            const existingData = localStorage.getItem('eventCreationData');
+            if (existingData) {
+                console.log('📦 기존 localStorage 데이터:', JSON.parse(existingData));
+            } else {
+                console.log('📭 localStorage가 비어있습니다.');
+            }
+        };
+    </script>
+</body>
+</html>

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));

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 }) => (
         <ContentPreviewStep
-          title={context.recommendation?.title || ''}
+          onNext={(imageStyle, images) => {
-          prize={context.recommendation?.prize || ''}
-          onNext={(imageStyle) => {
             history.push('contentEdit', {
               ...context,
-              contentPreview: { imageStyle },
+              contentPreview: { imageStyle, images },
             });
           }}
           onSkip={() => {

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;
+  onNext: (imageStyle: string, images: ImageInfo[]) => void;
-  prize: string;
-  onNext: (imageStyle: string) => 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<string | null>(null);
+  const [selectedStyle, setSelectedStyle] = useState<'SIMPLE' | 'FANCY' | 'TRENDY' | null>(null);
   const [fullscreenOpen, setFullscreenOpen] = useState(false);
-  const [fullscreenStyle, setFullscreenStyle] = useState<ImageStyle | null>(null);
+  const [fullscreenImage, setFullscreenImage] = useState<ImageInfo | null>(null);
+  const [generatedImages, setGeneratedImages] = useState<Map<string, ImageInfo>>(new Map());
+  const [error, setError] = useState<string | null>(null);
+  const [loadingProgress, setLoadingProgress] = useState(0);
+  const [loadingMessage, setLoadingMessage] = useState('이미지 생성 요청 중...');
+  const [eventData, setEventData] = useState<EventCreationData | null>(null);
 
   useEffect(() => {
-    // AI 이미지 생성 시뮬레이션
+    // localStorage에서 이벤트 데이터 읽기
-    const timer = setTimeout(() => {
+    const storedData = localStorage.getItem('eventCreationData');
-      setLoading(false);
+    if (storedData) {
-    }, 5000);
+      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<boolean> => {
+    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<string, ImageInfo>();
+
+      // 각 스타일별로 가장 최신 이미지만 선택 (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 (
       <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
@@ -121,7 +304,7 @@ export default function ContentPreviewStep({
             </Typography>
           </Box>
 
-          <Box sx={{ textAlign: 'center', mt: 15, mb: 15 }}>
+          <Box sx={{ textAlign: 'center', mt: 15, mb: 15, maxWidth: 600, mx: 'auto' }}>
             {/* 그라데이션 스피너 */}
             <Box
               sx={{
@@ -161,17 +344,69 @@ export default function ContentPreviewStep({
                 }}
               />
             </Box>
-            <Typography variant="h5" sx={{ fontWeight: 700, mb: 3, fontSize: '1.5rem' }}>
+
-              AI 이미지 생성 중
+            {/* 진행률 바 */}
+            <Box sx={{ mb: 4 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                <Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
+                  {loadingMessage}
                 </Typography>
+                <Typography variant="h6" sx={{ fontWeight: 600, color: colors.purple, fontSize: '1.25rem' }}>
+                  {Math.round(loadingProgress)}%
+                </Typography>
+              </Box>
+
+              <Box
+                sx={{
+                  width: '100%',
+                  height: 8,
+                  bgcolor: 'rgba(0,0,0,0.1)',
+                  borderRadius: 4,
+                  overflow: 'hidden',
+                  position: 'relative',
+                }}
+              >
+                <Box
+                  sx={{
+                    width: `${loadingProgress}%`,
+                    height: '100%',
+                    background: `linear-gradient(90deg, ${colors.purple}, ${colors.pink})`,
+                    borderRadius: 4,
+                    transition: 'width 0.3s ease-in-out',
+                  }}
+                />
+              </Box>
+            </Box>
+
             <Typography variant="body1" color="text.secondary" sx={{ mb: 3, fontSize: '1.125rem' }}>
-              딥러닝 모델이 이벤트에 어울리는
+              {generatedImages.size > 0 ? (
+                <>
+                  생성된 이미지를 확인하고 있어요
                   <br />
-              이미지를 생성하고 있어요...
+                  잠시만 기다려주세요!
-            </Typography>
+                </>
-            <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
+              ) : (
-              예상 시간: 5초
+                <>
+                  AI가 이벤트에 맞는 이미지를 생성하고 있어요
+                  <br />
+                  약 60초 정도 소요됩니다
+                </>
+              )}
             </Typography>
+            {error && (
+              <Alert severity="error" sx={{ maxWidth: 400, mx: 'auto', mt: 3 }}>
+                {error}
+                <Button
+                  variant="outlined"
+                  size="small"
+                  startIcon={<Refresh />}
+                  onClick={handleGenerateImages}
+                  sx={{ mt: 2 }}
+                >
+                  이미지 생성하기
+                </Button>
+              </Alert>
+            )}
           </Box>
         </Container>
       </Box>
@@ -179,7 +414,18 @@ export default function ContentPreviewStep({
   }
 
   return (
-    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
+    <Box
+      sx={{
+        minHeight: '100vh',
+        bgcolor: 'background.default',
+        pb: 20,
+        animation: 'fadeIn 0.5s ease-in',
+        '@keyframes fadeIn': {
+          from: { opacity: 0, transform: 'translateY(10px)' },
+          to: { opacity: 1, transform: 'translateY(0)' },
+        },
+      }}
+    >
       <Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
         {/* Header */}
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
@@ -191,11 +437,35 @@ export default function ContentPreviewStep({
           </Typography>
         </Box>
 
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 8 }}>
+          {generatedImages.size > 0 && (
+            <Alert severity="success" sx={{ flex: 1, fontSize: '1rem' }}>
+              ✨ 생성된 이미지를 확인하고 스타일을 선택하세요
+            </Alert>
+          )}
+          <Button
+            variant="outlined"
+            startIcon={<Refresh />}
+            onClick={handleGenerateImages}
+            sx={{
+              ml: 4,
+              py: 2,
+              px: 4,
+              borderRadius: 2,
+              fontSize: '1rem',
+              fontWeight: 600,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            이미지 재생성
+          </Button>
+        </Box>
+
         <Typography variant="body2" color="text.secondary" sx={{ mb: 8, textAlign: 'center', fontSize: '1rem' }}>
           이벤트에 어울리는 스타일을 선택하세요
         </Typography>
 
-        <RadioGroup value={selectedStyle} onChange={(e) => handleStyleSelect(e.target.value)}>
+        <RadioGroup value={selectedStyle} onChange={(e) => handleStyleSelect(e.target.value as 'SIMPLE' | 'FANCY' | 'TRENDY')}>
           <Grid container spacing={6} sx={{ mb: 10 }}>
             {imageStyles.map((style) => (
               <Grid item xs={12} md={4} key={style.id}>
@@ -237,6 +507,39 @@ export default function ContentPreviewStep({
                       sx={{
                         width: '100%',
                         aspectRatio: '1 / 1',
+                        position: 'relative',
+                        overflow: 'hidden',
+                        bgcolor: colors.gray[100],
+                      }}
+                    >
+                      {(() => {
+                        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 ? (
+                          <Image
+                            src={imageData.cdnUrl}
+                            alt={style.name}
+                            fill
+                            style={{ objectFit: 'cover' }}
+                            unoptimized
+                            onLoad={() => 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);
+                            }}
+                          />
+                        ) : (
+                        <Box
+                          sx={{
+                            width: '100%',
+                            height: '100%',
                             background: style.gradient || colors.gray[100],
                             display: 'flex',
                             flexDirection: 'column',
@@ -265,7 +568,7 @@ export default function ContentPreviewStep({
                               fontSize: '1.25rem',
                             }}
                           >
-                        {title}
+                            {eventData?.eventTitle || '이벤트'}
                           </Typography>
                           <Typography
                             variant="body1"
@@ -275,16 +578,25 @@ export default function ContentPreviewStep({
                               fontSize: '1rem',
                             }}
                           >
-                        {prize}
+                            {eventData?.prize || '경품'}
                           </Typography>
                         </Box>
+                        );
+                      })()}
+                    </Box>
 
                     {/* 크게보기 버튼 */}
                     <Box sx={{ p: 4, display: 'flex', justifyContent: 'center' }}>
                       <Button
                         variant="outlined"
                         startIcon={<ZoomIn />}
-                        onClick={(e) => handlePreview(style, e)}
+                        onClick={(e) => {
+                          const image = generatedImages.get(style.id);
+                          if (image) {
+                            handlePreview(image, e);
+                          }
+                        }}
+                        disabled={!generatedImages.has(style.id)}
                         sx={{
                           borderRadius: 2,
                           py: 1.5,
@@ -387,51 +699,24 @@ export default function ContentPreviewStep({
             <span className="material-icons">close</span>
           </IconButton>
 
-          {fullscreenStyle && (
+          {fullscreenImage && (
             <Box
               sx={{
                 width: '100%',
-                maxWidth: 600,
+                maxWidth: 800,
                 aspectRatio: '1 / 1',
-                background: fullscreenStyle.gradient || '#f5f5f5',
+                position: 'relative',
                 borderRadius: 4,
-                display: 'flex',
+                overflow: 'hidden',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                p: 6,
-                textAlign: 'center',
               }}
             >
-              <span
+              <Image
-                className="material-icons"
+                src={fullscreenImage.cdnUrl}
-                style={{
+                alt={`${fullscreenImage.style} style`}
-                  fontSize: 80,
+                fill
-                  marginBottom: 24,
+                style={{ objectFit: 'contain' }}
-                  color: fullscreenStyle.textColor || 'inherit',
+                unoptimized
-                }}
+              />
-              >
-                {fullscreenStyle.icon}
-              </span>
-              <Typography
-                variant="h4"
-                sx={{
-                  fontWeight: 700,
-                  mb: 2,
-                  color: fullscreenStyle.textColor || 'text.primary',
-                }}
-              >
-                {title}
-              </Typography>
-              <Typography
-                variant="h6"
-                sx={{
-                  color: fullscreenStyle.textColor || 'text.secondary',
-                  opacity: fullscreenStyle.textColor ? 0.9 : 1,
-                }}
-              >
-                {prize}
-              </Typography>
             </Box>
           )}
         </Box>

src/app/api/content/events/[eventDraftId]/images/route.ts

@@ -0,0 +1,52 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const CONTENT_API_BASE_URL = process.env.NEXT_PUBLIC_CONTENT_API_URL || 'http://localhost:8084';
+
+export async function GET(
+  request: NextRequest,
+  context: { params: Promise<{ eventDraftId: string }> }
+) {
+  try {
+    const { eventDraftId } = await context.params;
+    const { searchParams } = new URL(request.url);
+    const style = searchParams.get('style');
+    const platform = searchParams.get('platform');
+
+    // eventDraftId is now eventId in the API
+    let url = `${CONTENT_API_BASE_URL}/api/v1/content/events/${eventDraftId}/images`;
+    const queryParams = [];
+    if (style) queryParams.push(`style=${style}`);
+    if (platform) queryParams.push(`platform=${platform}`);
+    if (queryParams.length > 0) {
+      url += `?${queryParams.join('&')}`;
+    }
+
+    console.log('🔄 Proxying images request to Content API:', { url });
+
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('❌ Content API error:', response.status, errorText);
+      return NextResponse.json(
+        { error: 'Failed to get images', details: errorText },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('❌ Proxy error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error', details: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/content/images/generate/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const CONTENT_API_BASE_URL = process.env.NEXT_PUBLIC_CONTENT_API_URL || 'http://localhost:8084';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+
+    console.log('🔄 Proxying image generation request to Content API:', {
+      url: `${CONTENT_API_BASE_URL}/api/v1/content/images/generate`,
+      body,
+    });
+
+    const response = await fetch(`${CONTENT_API_BASE_URL}/api/v1/content/images/generate`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('❌ Content API error:', response.status, errorText);
+      return NextResponse.json(
+        { error: 'Failed to generate images', details: errorText },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    console.log('✅ Image generation job created:', data);
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('❌ Proxy error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error', details: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/content/images/jobs/[jobId]/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const CONTENT_API_BASE_URL = process.env.NEXT_PUBLIC_CONTENT_API_URL || 'http://localhost:8084';
+
+export async function GET(
+  request: NextRequest,
+  context: { params: Promise<{ jobId: string }> }
+) {
+  try {
+    const { jobId } = await context.params;
+
+    console.log('🔄 Proxying job status request to Content API:', {
+      url: `${CONTENT_API_BASE_URL}/api/v1/content/images/jobs/${jobId}`,
+    });
+
+    const response = await fetch(`${CONTENT_API_BASE_URL}/api/v1/content/images/jobs/${jobId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('❌ Content API error:', response.status, errorText);
+      return NextResponse.json(
+        { error: 'Failed to get job status', details: errorText },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('❌ Proxy error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error', details: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}

src/shared/api/contentApi.ts

@@ -0,0 +1,160 @@
+import axios, { AxiosInstance } from 'axios';
+
+// Use Next.js API proxy to bypass CORS issues
+const CONTENT_API_BASE_URL = '/api/content';
+
+export const contentApiClient: AxiosInstance = axios.create({
+  baseURL: CONTENT_API_BASE_URL,
+  timeout: 120000, // 이미지 생성은 시간이 오래 걸릴 수 있으므로 120초
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor
+contentApiClient.interceptors.request.use(
+  (config) => {
+    console.log('🎨 Content API Request:', {
+      method: config.method?.toUpperCase(),
+      url: config.url,
+      baseURL: config.baseURL,
+      data: config.data,
+    });
+
+    const token = localStorage.getItem('accessToken');
+    if (token && config.headers) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    console.error('❌ Content API Request Error:', error);
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor
+contentApiClient.interceptors.response.use(
+  (response) => {
+    console.log('✅ Content API Response:', {
+      status: response.status,
+      url: response.config.url,
+      data: response.data,
+    });
+    return response;
+  },
+  (error) => {
+    console.error('❌ Content API Error:', {
+      message: error.message,
+      status: error.response?.status,
+      url: error.config?.url,
+      data: error.response?.data,
+    });
+    return Promise.reject(error);
+  }
+);
+
+// Types
+export interface GenerateImagesRequest {
+  eventId: string;
+  eventTitle: string;
+  eventDescription: string;
+  industry?: string;
+  location?: string;
+  trends?: string[];
+  styles: ('SIMPLE' | 'FANCY' | 'TRENDY')[];
+  platforms: ('INSTAGRAM' | 'NAVER' | 'KAKAO')[];
+}
+
+export interface JobInfo {
+  id: string;
+  eventId: string;
+  jobType: string;
+  status: 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED';
+  progress: number;
+  resultMessage?: string;
+  errorMessage?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ImageInfo {
+  id: number;
+  eventId: string;
+  style: 'SIMPLE' | 'FANCY' | 'TRENDY';
+  platform: 'INSTAGRAM' | 'NAVER' | 'KAKAO';
+  cdnUrl: string;
+  prompt: string;
+  selected: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ContentInfo {
+  id: number;
+  eventId: string;
+  eventTitle: string;
+  eventDescription: string;
+  images: ImageInfo[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+// API Functions
+export const contentApi = {
+  // 이미지 생성 (Next.js API proxy 사용)
+  generateImages: async (request: GenerateImagesRequest): Promise<JobInfo> => {
+    const response = await contentApiClient.post<JobInfo>('/images/generate', request);
+    return response.data;
+  },
+
+  // Job 상태 조회 (Next.js API proxy 사용)
+  getJobStatus: async (jobId: string): Promise<JobInfo> => {
+    const response = await contentApiClient.get<JobInfo>(`/images/jobs/${jobId}`);
+    return response.data;
+  },
+
+  // 이벤트별 콘텐츠 조회
+  getContentByEventId: async (eventId: string): Promise<ContentInfo> => {
+    const response = await contentApiClient.get<ContentInfo>(`/events/${eventId}`);
+    return response.data;
+  },
+
+  // 이미지 목록 조회 (Next.js API proxy 사용)
+  getImages: async (
+    eventId: string,
+    style?: 'SIMPLE' | 'FANCY' | 'TRENDY',
+    platform?: 'INSTAGRAM' | 'NAVER' | 'KAKAO'
+  ): Promise<ImageInfo[]> => {
+    const params = new URLSearchParams();
+    if (style) params.append('style', style);
+    if (platform) params.append('platform', platform);
+
+    const response = await contentApiClient.get<ImageInfo[]>(
+      `/events/${eventId}/images${params.toString() ? `?${params.toString()}` : ''}`
+    );
+    return response.data;
+  },
+
+  // 특정 이미지 조회
+  getImageById: async (imageId: number): Promise<ImageInfo> => {
+    const response = await contentApiClient.get<ImageInfo>(`/api/v1/content/images/${imageId}`);
+    return response.data;
+  },
+
+  // 이미지 삭제
+  deleteImage: async (imageId: number): Promise<void> => {
+    await contentApiClient.delete(`/api/v1/content/images/${imageId}`);
+  },
+
+  // 이미지 재생성
+  regenerateImage: async (imageId: number, newPrompt?: string): Promise<JobInfo> => {
+    const response = await contentApiClient.post<JobInfo>(
+      `/api/v1/content/images/${imageId}/regenerate`,
+      { imageId, newPrompt }
+    );
+    return response.data;
+  },
+};
+
+export default contentApi;

test-images.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Event 7777 - AI Generated Images Test</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+        .images-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .image-card {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .image-card h2 {
+            margin: 0 0 10px 0;
+            color: #666;
+            font-size: 18px;
+        }
+        .image-card img {
+            width: 100%;
+            height: auto;
+            border-radius: 8px;
+            aspect-ratio: 1 / 1;
+            object-fit: cover;
+        }
+        .image-info {
+            margin-top: 10px;
+            font-size: 12px;
+            color: #999;
+        }
+        .loading {
+            text-align: center;
+            padding: 50px;
+            font-size: 18px;
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <h1>🎨 Event 7777 - AI Generated Images</h1>
+    <div id="content" class="loading">Loading images...</div>
+
+    <script>
+        const eventId = 7777;
+        const apiUrl = `http://localhost:8084/api/v1/content/events/${eventId}/images`;
+
+        async function loadImages() {
+            try {
+                const response = await fetch(apiUrl);
+                const images = await response.json();
+
+                // 스타일별로 최신 이미지 필터링
+                const imagesByStyle = {};
+                images.forEach(img => {
+                    if (img.platform === 'INSTAGRAM') {
+                        const existing = imagesByStyle[img.style];
+                        if (!existing || new Date(img.createdAt) > new Date(existing.createdAt)) {
+                            imagesByStyle[img.style] = img;
+                        }
+                    }
+                });
+
+                // HTML 생성
+                const container = document.getElementById('content');
+                container.className = 'images-grid';
+                container.innerHTML = '';
+
+                ['SIMPLE', 'FANCY', 'TRENDY'].forEach(style => {
+                    const image = imagesByStyle[style];
+                    if (image) {
+                        const card = document.createElement('div');
+                        card.className = 'image-card';
+                        card.innerHTML = `
+                            <h2>스타일: ${style}</h2>
+                            <img src="${image.cdnUrl}" alt="${style}" onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22%3E%3Crect fill=%22%23ddd%22 width=%22400%22 height=%22400%22/%3E%3Ctext fill=%22%23999%22 font-size=%2224%22 x=%2250%25%22 y=%2250%25%22 text-anchor=%22middle%22%3EImage Load Error%3C/text%3E%3C/svg%3E';">
+                            <div class="image-info">
+                                <div>ID: ${image.id}</div>
+                                <div>Created: ${new Date(image.createdAt).toLocaleString('ko-KR')}</div>
+                            </div>
+                        `;
+                        container.appendChild(card);
+                    } else {
+                        const card = document.createElement('div');
+                        card.className = 'image-card';
+                        card.innerHTML = `
+                            <h2>스타일: ${style}</h2>
+                            <div style="aspect-ratio: 1/1; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999;">
+                                이미지 없음
+                            </div>
+                        `;
+                        container.appendChild(card);
+                    }
+                });
+            } catch (error) {
+                document.getElementById('content').innerHTML = `
+                    <div style="text-align: center; color: red;">
+                        <h2>Error loading images</h2>
+                        <p>${error.message}</p>
+                    </div>
+                `;
+            }
+        }
+
+        loadImages();
+    </script>
+</body>
+</html>

test-localstorage.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LocalStorage 테스트</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            border-radius: 12px;
+            padding: 30px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 20px;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            color: #666;
+            font-weight: 500;
+        }
+        input, textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            box-sizing: border-box;
+        }
+        textarea {
+            min-height: 80px;
+            resize: vertical;
+        }
+        button {
+            background: linear-gradient(135deg, #C084FC 0%, #F472B6 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+        button:hover {
+            opacity: 0.9;
+        }
+        button.secondary {
+            background: #6b7280;
+        }
+        .success {
+            background: #10b981;
+            color: white;
+            padding: 15px;
+            border-radius: 6px;
+            margin-top: 20px;
+            display: none;
+        }
+        .current-data {
+            background: #f9fafb;
+            border: 1px solid #e5e7eb;
+            border-radius: 6px;
+            padding: 15px;
+            margin-top: 20px;
+        }
+        .current-data pre {
+            margin: 10px 0 0 0;
+            overflow-x: auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎨 이벤트 생성 데이터 설정</h1>
+
+        <div class="form-group">
+            <label>이벤트 ID</label>
+            <input type="number" id="eventDraftId" value="7777">
+        </div>
+
+        <div class="form-group">
+            <label>이벤트 제목</label>
+            <input type="text" id="eventTitle" value="맥주 파티 이벤트">
+        </div>
+
+        <div class="form-group">
+            <label>이벤트 설명</label>
+            <textarea id="eventDescription">강남에서 열리는 신나는 맥주 파티에 참여하세요!</textarea>
+        </div>
+
+        <div class="form-group">
+            <label>업종</label>
+            <input type="text" id="industry" value="음식점">
+        </div>
+
+        <div class="form-group">
+            <label>지역</label>
+            <input type="text" id="location" value="강남">
+        </div>
+
+        <div class="form-group">
+            <label>트렌드 (쉼표로 구분)</label>
+            <input type="text" id="trends" value="파티,맥주,생맥주">
+        </div>
+
+        <div class="form-group">
+            <label>경품</label>
+            <input type="text" id="prize" value="생맥주 1잔">
+        </div>
+
+        <div style="margin-top: 25px;">
+            <button onclick="saveToLocalStorage()">💾 LocalStorage에 저장</button>
+            <button class="secondary" onclick="clearLocalStorage()">🗑️ 삭제</button>
+            <button class="secondary" onclick="loadCurrentData()">🔄 현재 데이터 보기</button>
+        </div>
+
+        <div id="success" class="success">
+            ✅ localStorage에 저장되었습니다!<br>
+            이제 이벤트 생성 플로우에서 channel → contentPreview로 이동하면<br>
+            자동으로 AI 이미지 생성이 시작됩니다.
+        </div>
+
+        <div class="current-data">
+            <strong>현재 localStorage 데이터:</strong>
+            <pre id="currentData">없음</pre>
+        </div>
+    </div>
+
+    <script>
+        function saveToLocalStorage() {
+            const eventData = {
+                eventDraftId: parseInt(document.getElementById('eventDraftId').value),
+                eventTitle: document.getElementById('eventTitle').value,
+                eventDescription: document.getElementById('eventDescription').value,
+                industry: document.getElementById('industry').value,
+                location: document.getElementById('location').value,
+                trends: document.getElementById('trends').value.split(',').map(t => t.trim()),
+                prize: document.getElementById('prize').value
+            };
+
+            localStorage.setItem('eventCreationData', JSON.stringify(eventData));
+
+            document.getElementById('success').style.display = 'block';
+            setTimeout(() => {
+                document.getElementById('success').style.display = 'none';
+            }, 5000);
+
+            loadCurrentData();
+        }
+
+        function clearLocalStorage() {
+            localStorage.removeItem('eventCreationData');
+            document.getElementById('currentData').textContent = '없음';
+            alert('localStorage가 삭제되었습니다.');
+        }
+
+        function loadCurrentData() {
+            const data = localStorage.getItem('eventCreationData');
+            if (data) {
+                document.getElementById('currentData').textContent = JSON.stringify(JSON.parse(data), null, 2);
+            } else {
+                document.getElementById('currentData').textContent = '없음';
+            }
+        }
+
+        // 페이지 로드 시 현재 데이터 표시
+        window.onload = loadCurrentData;
+    </script>
+</body>
+</html>