mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2026-06-12 22:59:11 +00:00
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>
This commit is contained in:
cherry2250
@@ -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>
|
||||
Reference in New Issue
Block a user