shared-dg05-dodari/kt-event-marketing-fe
7
0
Fork 0
mirror of https://github.com/ktds-dg0501/kt-event-marketing-fe.git synced 2025-12-06 05:36:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
AI 이미지 생성 기능 완성 및 실제 API 연동
This commit is contained in:
Cherry Kim 2025-10-29 10:06:52 +09:00 committed by GitHub
commit 0c14cfe289
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 2316 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
API_CHANGES.md Normal file
View File

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

221
CORS_FIX.md Normal file
View File

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

182
FIX_EVENTID_MISMATCH.md Normal file
View File

@ -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 사용
- 코드 로직 변경 없음, 데이터만 변경

149
MOCK_DATA_SETUP.md Normal file
View File

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

145
QUICK_TEST.md Normal file
View File

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

117
TEST_URLS.md Normal file
View File

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

2
next.config.js
View File

@ -6,7 +6,7 @@ const nextConfig = {
emotion: true,
},
images: {
domains: ['localhost'],
domains: ['localhost', 'blobkteventstorage.blob.core.windows.net'],
formats: ['image/webp', 'image/avif'],
},
env: {

205
public/init-mock-data.html Normal file
View File

@ -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>

17
setup-mock-data.js Normal file
View File

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

23
src/app/(main)/events/create/page.tsx
View File

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

505
src/app/(main)/events/create/steps/ContentPreviewStep.tsx
View File

@ -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<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 이미지 생성 시뮬레이션
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<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 이미지 생성 중
</Typography>
{/* 진행률 바 */}
<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' }}>
딥러닝 모델이 이벤트에 어울리는
<br />
이미지를 생성하고 있어요...
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
예상 시간: 5초
{generatedImages.size > 0 ? (
<>
생성된 이미지를 확인하고 있어요
<br />
잠시만 기다려주세요!
</>
) : (
<>
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,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],
}}
>
<span
className="material-icons"
style={{
fontSize: 64,
marginBottom: 24,
color: style.textColor || colors.gray[700],
}}
>
{style.icon}
</span>
<Typography
variant="h6"
sx={{
fontWeight: 700,
mb: 2,
color: style.textColor || 'text.primary',
fontSize: '1.25rem',
}}
>
{title}
</Typography>
<Typography
variant="body1"
sx={{
color: style.textColor || 'text.secondary',
opacity: style.textColor ? 0.9 : 1,
fontSize: '1rem',
}}
>
{prize}
</Typography>
{(() => {
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',
alignItems: 'center',
justifyContent: 'center',
p: 6,
textAlign: 'center',
}}
>
<span
className="material-icons"
style={{
fontSize: 64,
marginBottom: 24,
color: style.textColor || colors.gray[700],
}}
>
{style.icon}
</span>
<Typography
variant="h6"
sx={{
fontWeight: 700,
mb: 2,
color: style.textColor || 'text.primary',
fontSize: '1.25rem',
}}
>
{eventData?.eventTitle || '이벤트'}
</Typography>
<Typography
variant="body1"
sx={{
color: style.textColor || 'text.secondary',
opacity: style.textColor ? 0.9 : 1,
fontSize: '1rem',
}}
>
{eventData?.prize || '경품'}
</Typography>
</Box>
);
})()}
</Box>
{/* 크게보기 버튼 */}
@ -284,7 +590,13 @@ export default function ContentPreviewStep({
<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',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
p: 6,
textAlign: 'center',
overflow: 'hidden',
}}
>
<span
className="material-icons"
style={{
fontSize: 80,
marginBottom: 24,
color: fullscreenStyle.textColor || 'inherit',
}}
>
{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>
<Image
src={fullscreenImage.cdnUrl}
alt={`${fullscreenImage.style} style`}
fill
style={{ objectFit: 'contain' }}
unoptimized
/>
</Box>
)}
</Box>

52
src/app/api/content/events/[eventDraftId]/images/route.ts Normal file
View File

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

42
src/app/api/content/images/generate/route.ts Normal file
View File

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

42
src/app/api/content/images/jobs/[jobId]/route.ts Normal file
View File

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

160
src/shared/api/contentApi.ts Normal file
View File

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

124
test-images.html Normal file
View File

@ -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>

182
test-localstorage.html Normal file
View File

@ -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>