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

주요 변경사항: - Step flow 통합: localStorage 기반 eventId 사용 - 자동 이미지 생성: 이미지 없을 시 자동 생성 트리거 - 진행률 바 추가: 0-100% 진행률 표시 - 동적 로딩 메시지: 단계별 메시지 업데이트 - Next.js 15 API routes 수정: params를 Promise로 처리 - 실제 배포 API 연동: Content API 서버 URL 설정 기술 세부사항: - API proxy routes 추가 (CORS 우회) - 2초 폴링 메커니즘 (최대 60초) - 환경변수: NEXT_PUBLIC_CONTENT_API_URL 설정 - CDN URL 디버그 오버레이 제거 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-13 09:39:09 +00:00 · 2025-10-28 23:08:57 +09:00
parent 135e5c5635
commit 6cccafa822
17 changed files with 2316 additions and 115 deletions
@@ -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>