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