mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 14:16:24 +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>
206 lines
6.3 KiB
HTML
206 lines
6.3 KiB
HTML
<!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>
|