edit prototype
This commit is contained in:
cherry2250
@@ -1,300 +1,394 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SNS 이미지 생성 - KT AI 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
.image-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--color-gray-100);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.image-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.image-preview-placeholder {
|
||||
color: var(--color-gray-400);
|
||||
text-align: center;
|
||||
}
|
||||
.fullscreen-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
.fullscreen-modal.active {
|
||||
display: flex;
|
||||
}
|
||||
.fullscreen-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.fullscreen-close {
|
||||
position: absolute;
|
||||
top: var(--spacing-lg);
|
||||
right: var(--spacing-lg);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--color-text-primary);
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page page-with-header">
|
||||
<!-- Header -->
|
||||
<div id="header"></div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SNS 이미지 생성 - KT AI 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
|
||||
/>
|
||||
<style>
|
||||
.image-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--color-gray-100);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.image-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.image-preview-placeholder {
|
||||
color: var(--color-gray-400);
|
||||
text-align: center;
|
||||
}
|
||||
.fullscreen-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
.fullscreen-modal.active {
|
||||
display: flex;
|
||||
}
|
||||
.fullscreen-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.fullscreen-close {
|
||||
position: absolute;
|
||||
top: var(--spacing-lg);
|
||||
right: var(--spacing-lg);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--color-text-primary);
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page page-with-header">
|
||||
<!-- Header -->
|
||||
<div id="header"></div>
|
||||
|
||||
<div class="container" style="max-width: 800px;">
|
||||
<!-- Loading State -->
|
||||
<div id="loadingState" class="text-center mt-2xl mb-2xl">
|
||||
<span class="material-icons" style="font-size: 64px; color: var(--color-ai-blue); animation: spin 2s linear infinite;">psychology</span>
|
||||
<h3 class="text-headline mt-md mb-sm">AI 이미지 생성 중</h3>
|
||||
<p class="text-body text-secondary mb-lg">
|
||||
딥러닝 모델이 이벤트에 어울리는<br>
|
||||
이미지를 생성하고 있어요...
|
||||
</p>
|
||||
<div class="spinner mx-auto"></div>
|
||||
<p class="text-caption text-tertiary mt-md">예상 시간: 5초</p>
|
||||
<div class="container" style="max-width: 800px">
|
||||
<!-- Loading State -->
|
||||
<div id="loadingState" class="text-center mt-2xl mb-2xl">
|
||||
<span
|
||||
class="material-icons"
|
||||
style="
|
||||
font-size: 64px;
|
||||
color: var(--color-ai-blue);
|
||||
animation: spin 2s linear infinite;
|
||||
"
|
||||
>psychology</span
|
||||
>
|
||||
<h3 class="text-headline mt-md mb-sm">AI 이미지 생성 중</h3>
|
||||
<p class="text-body text-secondary mb-lg">
|
||||
딥러닝 모델이 이벤트에 어울리는<br />
|
||||
이미지를 생성하고 있어요...
|
||||
</p>
|
||||
<p class="text-caption text-tertiary mt-md">예상 시간: 5초</p>
|
||||
</div>
|
||||
|
||||
<!-- Generated Images (hidden initially) -->
|
||||
<div id="generatedImages" class="hidden">
|
||||
<!-- Style 1: 심플 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">스타일 1: 심플</h3>
|
||||
<div class="card">
|
||||
<div class="image-preview mb-md">
|
||||
<div class="image-preview-placeholder">
|
||||
<span class="material-icons" style="font-size: 48px"
|
||||
>celebration</span
|
||||
>
|
||||
<p class="text-body-small mt-sm" id="style1Title">
|
||||
SNS 팔로우 이벤트
|
||||
</p>
|
||||
<p class="text-caption text-secondary" id="style1Prize">
|
||||
커피 쿠폰
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="radio"
|
||||
name="imageStyle"
|
||||
id="style1"
|
||||
value="simple"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label for="style1" class="form-check-label">선택</label>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-text btn-small preview-btn"
|
||||
data-style="simple"
|
||||
>
|
||||
<span class="material-icons">zoom_in</span>
|
||||
크게보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Style 2: 화려 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">스타일 2: 화려</h3>
|
||||
<div class="card">
|
||||
<div
|
||||
class="image-preview mb-md"
|
||||
style="
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
"
|
||||
>
|
||||
<div class="image-preview-placeholder" style="color: white">
|
||||
<span class="material-icons" style="font-size: 48px"
|
||||
>auto_awesome</span
|
||||
>
|
||||
<p class="text-body-small mt-sm" id="style2Title">
|
||||
SNS 팔로우 이벤트
|
||||
</p>
|
||||
<p class="text-caption" style="opacity: 0.9" id="style2Prize">
|
||||
커피 쿠폰
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="radio"
|
||||
name="imageStyle"
|
||||
id="style2"
|
||||
value="fancy"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label for="style2" class="form-check-label">선택</label>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-text btn-small preview-btn"
|
||||
data-style="fancy"
|
||||
>
|
||||
<span class="material-icons">zoom_in</span>
|
||||
크게보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Style 3: 트렌디 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">스타일 3: 트렌디</h3>
|
||||
<div class="card">
|
||||
<div
|
||||
class="image-preview mb-md"
|
||||
style="
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
"
|
||||
>
|
||||
<div class="image-preview-placeholder" style="color: white">
|
||||
<span class="material-icons" style="font-size: 48px"
|
||||
>trending_up</span
|
||||
>
|
||||
<p class="text-body-small mt-sm" id="style3Title">
|
||||
SNS 팔로우 이벤트
|
||||
</p>
|
||||
<p class="text-caption" style="opacity: 0.9" id="style3Prize">
|
||||
커피 쿠폰
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="radio"
|
||||
name="imageStyle"
|
||||
id="style3"
|
||||
value="trendy"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label for="style3" class="form-check-label">선택</label>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-text btn-small preview-btn"
|
||||
data-style="trendy"
|
||||
>
|
||||
<span class="material-icons">zoom_in</span>
|
||||
크게보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<section class="mb-2xl">
|
||||
<div class="grid grid-cols-2 gap-sm">
|
||||
<button id="skipBtn" class="btn btn-text btn-large">
|
||||
건너뛰기
|
||||
</button>
|
||||
<button id="nextBtn" class="btn btn-primary btn-large" disabled>
|
||||
다음
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generated Images (hidden initially) -->
|
||||
<div id="generatedImages" class="hidden">
|
||||
<!-- Style 1: 심플 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">스타일 1: 심플</h3>
|
||||
<div class="card">
|
||||
<div class="image-preview mb-md">
|
||||
<div class="image-preview-placeholder">
|
||||
<span class="material-icons" style="font-size: 48px;">celebration</span>
|
||||
<p class="text-body-small mt-sm" id="style1Title">SNS 팔로우 이벤트</p>
|
||||
<p class="text-caption text-secondary" id="style1Prize">커피 쿠폰</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="form-check">
|
||||
<input type="radio" name="imageStyle" id="style1" value="simple" class="form-check-input">
|
||||
<label for="style1" class="form-check-label">선택</label>
|
||||
</div>
|
||||
<button class="btn btn-text btn-small preview-btn" data-style="simple">
|
||||
<span class="material-icons">zoom_in</span>
|
||||
크게보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Style 2: 화려 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">스타일 2: 화려</h3>
|
||||
<div class="card">
|
||||
<div class="image-preview mb-md" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||||
<div class="image-preview-placeholder" style="color: white;">
|
||||
<span class="material-icons" style="font-size: 48px;">auto_awesome</span>
|
||||
<p class="text-body-small mt-sm" id="style2Title">SNS 팔로우 이벤트</p>
|
||||
<p class="text-caption" style="opacity: 0.9;" id="style2Prize">커피 쿠폰</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="form-check">
|
||||
<input type="radio" name="imageStyle" id="style2" value="fancy" class="form-check-input">
|
||||
<label for="style2" class="form-check-label">선택</label>
|
||||
</div>
|
||||
<button class="btn btn-text btn-small preview-btn" data-style="fancy">
|
||||
<span class="material-icons">zoom_in</span>
|
||||
크게보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Style 3: 트렌디 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">스타일 3: 트렌디</h3>
|
||||
<div class="card">
|
||||
<div class="image-preview mb-md" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
||||
<div class="image-preview-placeholder" style="color: white;">
|
||||
<span class="material-icons" style="font-size: 48px;">trending_up</span>
|
||||
<p class="text-body-small mt-sm" id="style3Title">SNS 팔로우 이벤트</p>
|
||||
<p class="text-caption" style="opacity: 0.9;" id="style3Prize">커피 쿠폰</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="form-check">
|
||||
<input type="radio" name="imageStyle" id="style3" value="trendy" class="form-check-input">
|
||||
<label for="style3" class="form-check-label">선택</label>
|
||||
</div>
|
||||
<button class="btn btn-text btn-small preview-btn" data-style="trendy">
|
||||
<span class="material-icons">zoom_in</span>
|
||||
크게보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<section class="mb-2xl">
|
||||
<div class="grid grid-cols-2 gap-sm">
|
||||
<button id="skipBtn" class="btn btn-text btn-large">건너뛰기</button>
|
||||
<button id="nextBtn" class="btn btn-primary btn-large" disabled>다음</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Bottom Navigation -->
|
||||
<div id="bottomNav"></div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div id="bottomNav"></div>
|
||||
</div>
|
||||
<!-- Fullscreen Image Modal -->
|
||||
<div id="fullscreenModal" class="fullscreen-modal">
|
||||
<button class="fullscreen-close" onclick="closeFullscreen()">
|
||||
<span class="material-icons">close</span>
|
||||
</button>
|
||||
<img
|
||||
id="fullscreenImage"
|
||||
class="fullscreen-image"
|
||||
alt="이벤트 이미지 미리보기"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Fullscreen Image Modal -->
|
||||
<div id="fullscreenModal" class="fullscreen-modal">
|
||||
<button class="fullscreen-close" onclick="closeFullscreen()">
|
||||
<span class="material-icons">close</span>
|
||||
</button>
|
||||
<img id="fullscreenImage" class="fullscreen-image" alt="이벤트 이미지 미리보기">
|
||||
</div>
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
// 로그인 확인
|
||||
KTEventApp.Session.requireAuth();
|
||||
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
// 로그인 확인
|
||||
KTEventApp.Session.requireAuth();
|
||||
|
||||
// Header 생성
|
||||
const header = KTEventApp.Navigation.createHeader({
|
||||
title: 'SNS 이미지 생성',
|
||||
showBack: true,
|
||||
showMenu: false,
|
||||
showProfile: false
|
||||
});
|
||||
document.getElementById('header').appendChild(header);
|
||||
|
||||
// Bottom Navigation 생성
|
||||
const bottomNav = KTEventApp.Navigation.createBottomNav('events');
|
||||
document.getElementById('bottomNav').appendChild(bottomNav);
|
||||
|
||||
// 저장된 데이터 불러오기
|
||||
const recommendation = KTEventApp.Utils.getFromStorage('selected_recommendation') || {
|
||||
title: 'SNS 팔로우 이벤트',
|
||||
prize: '커피 쿠폰'
|
||||
};
|
||||
|
||||
// 로딩 시뮬레이션
|
||||
setTimeout(() => {
|
||||
// 이미지 생성 완료
|
||||
document.getElementById('loadingState').classList.add('hidden');
|
||||
document.getElementById('generatedImages').classList.remove('hidden');
|
||||
|
||||
// 데이터 표시
|
||||
document.getElementById('style1Title').textContent = recommendation.title;
|
||||
document.getElementById('style1Prize').textContent = recommendation.prize;
|
||||
document.getElementById('style2Title').textContent = recommendation.title;
|
||||
document.getElementById('style2Prize').textContent = recommendation.prize;
|
||||
document.getElementById('style3Title').textContent = recommendation.title;
|
||||
document.getElementById('style3Prize').textContent = recommendation.prize;
|
||||
}, 5000);
|
||||
|
||||
// 선택 상태 관리
|
||||
let selectedStyle = null;
|
||||
|
||||
document.querySelectorAll('input[name="imageStyle"]').forEach(radio => {
|
||||
radio.addEventListener('change', function() {
|
||||
selectedStyle = this.value;
|
||||
document.getElementById('nextBtn').disabled = false;
|
||||
// Header 생성
|
||||
const header = KTEventApp.Navigation.createHeader({
|
||||
title: "SNS 이미지 생성",
|
||||
showBack: true,
|
||||
showMenu: false,
|
||||
showProfile: false,
|
||||
});
|
||||
});
|
||||
document.getElementById("header").appendChild(header);
|
||||
|
||||
// 크게보기 버튼
|
||||
document.querySelectorAll('.preview-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const style = this.dataset.style;
|
||||
openFullscreen(style);
|
||||
// Bottom Navigation 생성
|
||||
const bottomNav = KTEventApp.Navigation.createBottomNav("events");
|
||||
document.getElementById("bottomNav").appendChild(bottomNav);
|
||||
|
||||
// 저장된 데이터 불러오기
|
||||
const recommendation = KTEventApp.Utils.getFromStorage(
|
||||
"selected_recommendation"
|
||||
) || {
|
||||
title: "SNS 팔로우 이벤트",
|
||||
prize: "커피 쿠폰",
|
||||
};
|
||||
|
||||
// 로딩 시뮬레이션
|
||||
setTimeout(() => {
|
||||
// 이미지 생성 완료
|
||||
document.getElementById("loadingState").classList.add("hidden");
|
||||
document.getElementById("generatedImages").classList.remove("hidden");
|
||||
|
||||
// 데이터 표시
|
||||
document.getElementById("style1Title").textContent =
|
||||
recommendation.title;
|
||||
document.getElementById("style1Prize").textContent =
|
||||
recommendation.prize;
|
||||
document.getElementById("style2Title").textContent =
|
||||
recommendation.title;
|
||||
document.getElementById("style2Prize").textContent =
|
||||
recommendation.prize;
|
||||
document.getElementById("style3Title").textContent =
|
||||
recommendation.title;
|
||||
document.getElementById("style3Prize").textContent =
|
||||
recommendation.prize;
|
||||
}, 5000);
|
||||
|
||||
// 선택 상태 관리
|
||||
let selectedStyle = null;
|
||||
|
||||
document.querySelectorAll('input[name="imageStyle"]').forEach((radio) => {
|
||||
radio.addEventListener("change", function () {
|
||||
selectedStyle = this.value;
|
||||
document.getElementById("nextBtn").disabled = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function openFullscreen(style) {
|
||||
const modal = document.getElementById('fullscreenModal');
|
||||
const img = document.getElementById('fullscreenImage');
|
||||
// 크게보기 버튼
|
||||
document.querySelectorAll(".preview-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", function () {
|
||||
const style = this.dataset.style;
|
||||
openFullscreen(style);
|
||||
});
|
||||
});
|
||||
|
||||
// 실제로는 생성된 이미지 URL을 사용
|
||||
// 여기서는 placeholder 사용
|
||||
img.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="800" height="800" fill="%23f0f0f0"/><text x="50%" y="50%" text-anchor="middle" fill="%23666" font-size="24">' + recommendation.title + '</text></svg>';
|
||||
function openFullscreen(style) {
|
||||
const modal = document.getElementById("fullscreenModal");
|
||||
const img = document.getElementById("fullscreenImage");
|
||||
|
||||
modal.classList.add('active');
|
||||
}
|
||||
// 실제로는 생성된 이미지 URL을 사용
|
||||
// 여기서는 placeholder 사용
|
||||
img.src =
|
||||
'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="800" height="800" fill="%23f0f0f0"/><text x="50%" y="50%" text-anchor="middle" fill="%23666" font-size="24">' +
|
||||
recommendation.title +
|
||||
"</text></svg>";
|
||||
|
||||
window.closeFullscreen = function() {
|
||||
document.getElementById('fullscreenModal').classList.remove('active');
|
||||
};
|
||||
|
||||
// 배경 클릭 시 닫기
|
||||
document.getElementById('fullscreenModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeFullscreen();
|
||||
modal.classList.add("active");
|
||||
}
|
||||
});
|
||||
|
||||
// 건너뛰기 버튼
|
||||
document.getElementById('skipBtn').addEventListener('click', function() {
|
||||
KTEventApp.Feedback.showModal({
|
||||
title: '건너뛰기',
|
||||
content: '<p class="text-body">이미지 없이 다음 단계로 진행하시겠습니까?</p>',
|
||||
buttons: [
|
||||
{
|
||||
text: '취소',
|
||||
variant: 'text',
|
||||
onClick: function() {
|
||||
this.closest('.modal-backdrop').remove();
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '확인',
|
||||
variant: 'primary',
|
||||
onClick: function() {
|
||||
this.closest('.modal-backdrop').remove();
|
||||
window.location.href = '11-배포채널선택.html';
|
||||
}
|
||||
window.closeFullscreen = function () {
|
||||
document.getElementById("fullscreenModal").classList.remove("active");
|
||||
};
|
||||
|
||||
// 배경 클릭 시 닫기
|
||||
document
|
||||
.getElementById("fullscreenModal")
|
||||
.addEventListener("click", function (e) {
|
||||
if (e.target === this) {
|
||||
closeFullscreen();
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 다음 버튼
|
||||
document.getElementById('nextBtn').addEventListener('click', function() {
|
||||
if (selectedStyle) {
|
||||
KTEventApp.Utils.saveToStorage('selected_image_style', selectedStyle);
|
||||
window.location.href = '10-콘텐츠편집.html';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
// 건너뛰기 버튼
|
||||
document.getElementById("skipBtn").addEventListener("click", function () {
|
||||
KTEventApp.Feedback.showModal({
|
||||
title: "건너뛰기",
|
||||
content:
|
||||
'<p class="text-body">이미지 없이 다음 단계로 진행하시겠습니까?</p>',
|
||||
buttons: [
|
||||
{
|
||||
text: "취소",
|
||||
variant: "text",
|
||||
onClick: function () {
|
||||
this.closest(".modal-backdrop").remove();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "확인",
|
||||
variant: "primary",
|
||||
onClick: function () {
|
||||
this.closest(".modal-backdrop").remove();
|
||||
window.location.href = "11-배포채널선택.html";
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// 다음 버튼
|
||||
document.getElementById("nextBtn").addEventListener("click", function () {
|
||||
if (selectedStyle) {
|
||||
KTEventApp.Utils.saveToStorage("selected_image_style", selectedStyle);
|
||||
window.location.href = "10-콘텐츠편집.html";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+299
-228
@@ -1,219 +1,287 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>최종 승인 - KT AI 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page page-with-header">
|
||||
<!-- Header -->
|
||||
<div id="header"></div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>최종 승인 - KT AI 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page page-with-header">
|
||||
<!-- Header -->
|
||||
<div id="header"></div>
|
||||
|
||||
<div class="container" style="max-width: 600px;">
|
||||
<!-- Title Section -->
|
||||
<section class="mt-lg mb-lg text-center">
|
||||
<div class="mb-md">
|
||||
<span class="material-icons" style="font-size: 64px; color: var(--color-success);">check_circle</span>
|
||||
</div>
|
||||
<h2 class="text-title-large mb-sm">이벤트를 확인해주세요</h2>
|
||||
<p class="text-body text-secondary">모든 정보를 검토한 후 배포하세요</p>
|
||||
</section>
|
||||
|
||||
<!-- Event Summary Card -->
|
||||
<section class="mb-lg">
|
||||
<div class="card">
|
||||
<h3 class="text-headline mb-md" id="eventTitle">SNS 팔로우 이벤트</h3>
|
||||
|
||||
<div class="flex items-center gap-sm mb-md">
|
||||
<span class="event-card-badge badge-scheduled">배포 대기</span>
|
||||
<span class="event-card-badge" style="background: rgba(0, 102, 255, 0.1); color: var(--color-ai-blue);">
|
||||
AI 추천
|
||||
</span>
|
||||
<div class="container" style="max-width: 600px">
|
||||
<!-- Title Section -->
|
||||
<section class="mt-lg mb-lg text-center">
|
||||
<div class="mb-md">
|
||||
<span
|
||||
class="material-icons"
|
||||
style="font-size: 64px; color: var(--color-success)"
|
||||
>check_circle</span
|
||||
>
|
||||
</div>
|
||||
<h2 class="text-title-large mb-sm">이벤트를 확인해주세요</h2>
|
||||
<p class="text-body text-secondary">
|
||||
모든 정보를 검토한 후 배포하세요
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="border-t pt-md">
|
||||
<div class="grid grid-cols-2 gap-md text-body-small">
|
||||
<div>
|
||||
<p class="text-tertiary mb-xs">이벤트 기간</p>
|
||||
<p class="text-semibold" id="eventPeriod">2025.02.01 ~ 2025.02.28</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-tertiary mb-xs">목표 참여자</p>
|
||||
<p class="text-semibold" id="targetParticipants">180명</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-tertiary mb-xs">예상 비용</p>
|
||||
<p class="text-semibold" id="estimatedCost">250,000원</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-tertiary mb-xs">예상 ROI</p>
|
||||
<p class="text-semibold text-kt-red" id="estimatedROI">520%</p>
|
||||
<!-- Event Summary Card -->
|
||||
<section class="mb-lg">
|
||||
<div class="card">
|
||||
<h3 class="text-headline mb-md" id="eventTitle">
|
||||
SNS 팔로우 이벤트
|
||||
</h3>
|
||||
|
||||
<div class="flex items-center gap-sm mb-md">
|
||||
<span class="event-card-badge badge-scheduled">배포 대기</span>
|
||||
<span
|
||||
class="event-card-badge"
|
||||
style="
|
||||
background: rgba(0, 102, 255, 0.1);
|
||||
color: var(--color-ai-blue);
|
||||
"
|
||||
>
|
||||
AI 추천
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="border-t pt-md">
|
||||
<div class="grid grid-cols-2 gap-md text-body-small">
|
||||
<div>
|
||||
<p class="text-tertiary mb-xs">이벤트 기간</p>
|
||||
<p class="text-semibold" id="eventPeriod">
|
||||
2025.02.01 ~ 2025.02.28
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-tertiary mb-xs">목표 참여자</p>
|
||||
<p class="text-semibold" id="targetParticipants">180명</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-tertiary mb-xs">예상 비용</p>
|
||||
<p class="text-semibold" id="estimatedCost">250,000원</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-tertiary mb-xs">예상 ROI</p>
|
||||
<p class="text-semibold text-kt-red" id="estimatedROI">
|
||||
520%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Event Details -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">이벤트 상세</h3>
|
||||
<!-- Event Details -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">이벤트 상세</h3>
|
||||
|
||||
<div class="card mb-sm">
|
||||
<div class="flex items-start gap-md">
|
||||
<span class="material-icons text-kt-red">celebration</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-body-small text-tertiary mb-xs">이벤트 제목</p>
|
||||
<p class="text-body" id="detailTitle">SNS 팔로우 이벤트</p>
|
||||
<div class="card mb-sm">
|
||||
<div class="flex items-start gap-md">
|
||||
<span class="material-icons text-kt-red">celebration</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-body-small text-tertiary mb-xs">이벤트 제목</p>
|
||||
<p class="text-body" id="detailTitle">SNS 팔로우 이벤트</p>
|
||||
</div>
|
||||
<button
|
||||
class="header-icon-btn"
|
||||
onclick="window.location.href='10-콘텐츠편집.html'"
|
||||
>
|
||||
<span class="material-icons">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="header-icon-btn" onclick="window.location.href='10-콘텐츠편집.html'">
|
||||
</div>
|
||||
|
||||
<div class="card mb-sm">
|
||||
<div class="flex items-start gap-md">
|
||||
<span class="material-icons text-kt-red">card_giftcard</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-body-small text-tertiary mb-xs">경품</p>
|
||||
<p class="text-body" id="detailPrize">커피 쿠폰</p>
|
||||
</div>
|
||||
<button
|
||||
class="header-icon-btn"
|
||||
onclick="window.location.href='10-콘텐츠편집.html'"
|
||||
>
|
||||
<span class="material-icons">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-sm">
|
||||
<div class="flex items-start gap-md">
|
||||
<span class="material-icons text-kt-red">description</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-body-small text-tertiary mb-xs">이벤트 설명</p>
|
||||
<p class="text-body" id="detailDescription">
|
||||
SNS를 팔로우하고 커피 쿠폰을 받으세요!<br />
|
||||
많은 참여 부탁드립니다.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="header-icon-btn"
|
||||
onclick="window.location.href='10-콘텐츠편집.html'"
|
||||
>
|
||||
<span class="material-icons">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex items-start gap-md">
|
||||
<span class="material-icons text-kt-red">how_to_reg</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-body-small text-tertiary mb-xs">참여 방법</p>
|
||||
<p class="text-body" id="detailMethod">SNS 팔로우</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Distribution Channels -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">배포 채널</h3>
|
||||
<div class="card">
|
||||
<div id="channels" class="flex flex-wrap gap-sm">
|
||||
<span class="event-card-badge badge-active">
|
||||
<span
|
||||
class="material-icons"
|
||||
style="font-size: 16px; vertical-align: middle"
|
||||
>language</span
|
||||
>
|
||||
홈페이지
|
||||
</span>
|
||||
<span class="event-card-badge badge-active">
|
||||
<span
|
||||
class="material-icons"
|
||||
style="font-size: 16px; vertical-align: middle"
|
||||
>chat_bubble</span
|
||||
>
|
||||
카카오톡
|
||||
</span>
|
||||
<span class="event-card-badge badge-active">
|
||||
<span
|
||||
class="material-icons"
|
||||
style="font-size: 16px; vertical-align: middle"
|
||||
>share</span
|
||||
>
|
||||
Instagram
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-text btn-small mt-md"
|
||||
onclick="window.location.href='11-배포채널선택.html'"
|
||||
>
|
||||
<span class="material-icons">edit</span>
|
||||
채널 수정하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="card mb-sm">
|
||||
<div class="flex items-start gap-md">
|
||||
<span class="material-icons text-kt-red">card_giftcard</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-body-small text-tertiary mb-xs">경품</p>
|
||||
<p class="text-body" id="detailPrize">커피 쿠폰</p>
|
||||
<!-- Terms Agreement -->
|
||||
<section class="mb-xl">
|
||||
<div class="card" style="background: var(--color-gray-50)">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="agreeTerms"
|
||||
class="form-check-input"
|
||||
required
|
||||
/>
|
||||
<label for="agreeTerms" class="form-check-label">
|
||||
이벤트 약관 및 개인정보 처리방침에 동의합니다
|
||||
<span class="text-kt-red">(필수)</span>
|
||||
</label>
|
||||
</div>
|
||||
<button class="header-icon-btn" onclick="window.location.href='10-콘텐츠편집.html'">
|
||||
<span class="material-icons">edit</span>
|
||||
</button>
|
||||
<a
|
||||
href="#"
|
||||
class="text-body-small text-kt-red mt-sm inline-block"
|
||||
id="viewTerms"
|
||||
>약관 보기</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="card mb-sm">
|
||||
<div class="flex items-start gap-md">
|
||||
<span class="material-icons text-kt-red">description</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-body-small text-tertiary mb-xs">이벤트 설명</p>
|
||||
<p class="text-body" id="detailDescription">
|
||||
SNS를 팔로우하고 커피 쿠폰을 받으세요!<br>
|
||||
많은 참여 부탁드립니다.
|
||||
</p>
|
||||
</div>
|
||||
<button class="header-icon-btn" onclick="window.location.href='10-콘텐츠편집.html'">
|
||||
<span class="material-icons">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex items-start gap-md">
|
||||
<span class="material-icons text-kt-red">how_to_reg</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-body-small text-tertiary mb-xs">참여 방법</p>
|
||||
<p class="text-body" id="detailMethod">SNS 팔로우</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Distribution Channels -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">배포 채널</h3>
|
||||
<div class="card">
|
||||
<div id="channels" class="flex flex-wrap gap-sm">
|
||||
<span class="event-card-badge badge-active">
|
||||
<span class="material-icons" style="font-size: 16px; vertical-align: middle;">language</span>
|
||||
홈페이지
|
||||
</span>
|
||||
<span class="event-card-badge badge-active">
|
||||
<span class="material-icons" style="font-size: 16px; vertical-align: middle;">chat_bubble</span>
|
||||
카카오톡
|
||||
</span>
|
||||
<span class="event-card-badge badge-active">
|
||||
<span class="material-icons" style="font-size: 16px; vertical-align: middle;">share</span>
|
||||
Instagram
|
||||
</span>
|
||||
</div>
|
||||
<button class="btn btn-text btn-small mt-md" onclick="window.location.href='11-배포채널선택.html'">
|
||||
<span class="material-icons">edit</span>
|
||||
채널 수정하기
|
||||
<!-- Action Buttons -->
|
||||
<section class="mb-2xl">
|
||||
<button
|
||||
id="approveBtn"
|
||||
class="btn btn-primary btn-large btn-full mb-sm"
|
||||
disabled
|
||||
>
|
||||
<span class="material-icons">rocket_launch</span>
|
||||
배포하기
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<button
|
||||
id="saveBtn"
|
||||
class="btn btn-secondary btn-large btn-full mb-sm"
|
||||
>
|
||||
<span class="material-icons">save</span>
|
||||
임시저장
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Terms Agreement -->
|
||||
<section class="mb-xl">
|
||||
<div class="card" style="background: var(--color-gray-50);">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="agreeTerms" class="form-check-input" required>
|
||||
<label for="agreeTerms" class="form-check-label">
|
||||
이벤트 약관 및 개인정보 처리방침에 동의합니다 <span class="text-kt-red">(필수)</span>
|
||||
</label>
|
||||
</div>
|
||||
<a href="#" class="text-body-small text-kt-red mt-sm inline-block" id="viewTerms">약관 보기</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<section class="mb-2xl">
|
||||
<button id="approveBtn" class="btn btn-primary btn-large btn-full mb-sm" disabled>
|
||||
<span class="material-icons">rocket_launch</span>
|
||||
배포하기
|
||||
</button>
|
||||
<button id="saveBtn" class="btn btn-secondary btn-large btn-full mb-sm">
|
||||
<span class="material-icons">save</span>
|
||||
임시저장
|
||||
</button>
|
||||
<button id="backBtn" class="btn btn-text btn-large btn-full">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
이전으로
|
||||
</button>
|
||||
</section>
|
||||
<!-- Bottom Navigation -->
|
||||
<div id="bottomNav"></div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div id="bottomNav"></div>
|
||||
</div>
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
// 로그인 확인
|
||||
KTEventApp.Session.requireAuth();
|
||||
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
// 로그인 확인
|
||||
KTEventApp.Session.requireAuth();
|
||||
// Header 생성
|
||||
const header = KTEventApp.Navigation.createHeader({
|
||||
title: "최종 승인",
|
||||
showBack: true,
|
||||
showMenu: false,
|
||||
showProfile: false,
|
||||
});
|
||||
document.getElementById("header").appendChild(header);
|
||||
|
||||
// Header 생성
|
||||
const header = KTEventApp.Navigation.createHeader({
|
||||
title: '최종 승인',
|
||||
showBack: true,
|
||||
showMenu: false,
|
||||
showProfile: false
|
||||
});
|
||||
document.getElementById('header').appendChild(header);
|
||||
// Bottom Navigation 생성
|
||||
const bottomNav = KTEventApp.Navigation.createBottomNav("events");
|
||||
document.getElementById("bottomNav").appendChild(bottomNav);
|
||||
|
||||
// Bottom Navigation 생성
|
||||
const bottomNav = KTEventApp.Navigation.createBottomNav('events');
|
||||
document.getElementById('bottomNav').appendChild(bottomNav);
|
||||
// 저장된 데이터 불러오기
|
||||
const recommendation = KTEventApp.Utils.getFromStorage(
|
||||
"selected_recommendation"
|
||||
) || {
|
||||
title: "SNS 팔로우 이벤트",
|
||||
prize: "커피 쿠폰",
|
||||
};
|
||||
|
||||
// 저장된 데이터 불러오기
|
||||
const recommendation = KTEventApp.Utils.getFromStorage('selected_recommendation') || {
|
||||
title: 'SNS 팔로우 이벤트',
|
||||
prize: '커피 쿠폰'
|
||||
};
|
||||
// 데이터 표시
|
||||
document.getElementById("eventTitle").textContent = recommendation.title;
|
||||
document.getElementById("detailTitle").textContent = recommendation.title;
|
||||
document.getElementById("detailPrize").textContent = recommendation.prize;
|
||||
|
||||
// 데이터 표시
|
||||
document.getElementById('eventTitle').textContent = recommendation.title;
|
||||
document.getElementById('detailTitle').textContent = recommendation.title;
|
||||
document.getElementById('detailPrize').textContent = recommendation.prize;
|
||||
// 약관 동의 체크박스
|
||||
document
|
||||
.getElementById("agreeTerms")
|
||||
.addEventListener("change", function (e) {
|
||||
document.getElementById("approveBtn").disabled = !e.target.checked;
|
||||
});
|
||||
|
||||
// 약관 동의 체크박스
|
||||
document.getElementById('agreeTerms').addEventListener('change', function(e) {
|
||||
document.getElementById('approveBtn').disabled = !e.target.checked;
|
||||
});
|
||||
|
||||
// 약관 보기
|
||||
document.getElementById('viewTerms').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
KTEventApp.Feedback.showModal({
|
||||
title: '이벤트 약관',
|
||||
content: `
|
||||
// 약관 보기
|
||||
document
|
||||
.getElementById("viewTerms")
|
||||
.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
KTEventApp.Feedback.showModal({
|
||||
title: "이벤트 약관",
|
||||
content: `
|
||||
<div class="p-md" style="max-height: 400px; overflow-y: auto;">
|
||||
<h4 class="text-headline mb-md">제1조 (목적)</h4>
|
||||
<p class="text-body-small mb-lg">
|
||||
@@ -231,29 +299,32 @@
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
buttons: [
|
||||
{
|
||||
text: '확인',
|
||||
variant: 'primary',
|
||||
onClick: function() {
|
||||
this.closest('.modal-backdrop').remove();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
buttons: [
|
||||
{
|
||||
text: "확인",
|
||||
variant: "primary",
|
||||
onClick: function () {
|
||||
this.closest(".modal-backdrop").remove();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// 배포하기 버튼
|
||||
document.getElementById('approveBtn').addEventListener('click', function() {
|
||||
const button = this;
|
||||
button.disabled = true;
|
||||
button.innerHTML = '<span class="material-icons">hourglass_empty</span> 배포 중...';
|
||||
// 배포하기 버튼
|
||||
document
|
||||
.getElementById("approveBtn")
|
||||
.addEventListener("click", function () {
|
||||
const button = this;
|
||||
button.disabled = true;
|
||||
button.innerHTML =
|
||||
'<span class="material-icons">hourglass_empty</span> 배포 중...';
|
||||
|
||||
// 배포 시뮬레이션
|
||||
setTimeout(() => {
|
||||
// 성공 모달 표시
|
||||
const successModal = KTEventApp.Feedback.showModal({
|
||||
content: `
|
||||
// 배포 시뮬레이션
|
||||
setTimeout(() => {
|
||||
// 성공 모달 표시
|
||||
const successModal = KTEventApp.Feedback.showModal({
|
||||
content: `
|
||||
<div class="p-xl text-center">
|
||||
<span class="material-icons" style="font-size: 80px; color: var(--color-success);">check_circle</span>
|
||||
<h3 class="text-title-large mt-md mb-sm">배포 완료!</h3>
|
||||
@@ -270,27 +341,27 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
`,
|
||||
});
|
||||
}, 2000);
|
||||
});
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// 임시저장 버튼
|
||||
document.getElementById('saveBtn').addEventListener('click', function() {
|
||||
// 현재 데이터 저장
|
||||
const draftData = {
|
||||
...recommendation,
|
||||
savedAt: new Date().toISOString()
|
||||
};
|
||||
// 임시저장 버튼
|
||||
document.getElementById("saveBtn").addEventListener("click", function () {
|
||||
// 현재 데이터 저장
|
||||
const draftData = {
|
||||
...recommendation,
|
||||
savedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
KTEventApp.Utils.saveToStorage('event_draft', draftData);
|
||||
KTEventApp.Feedback.showToast('임시저장되었습니다');
|
||||
});
|
||||
KTEventApp.Utils.saveToStorage("event_draft", draftData);
|
||||
KTEventApp.Feedback.showToast("임시저장되었습니다");
|
||||
});
|
||||
|
||||
// 이전으로 버튼
|
||||
document.getElementById('backBtn').addEventListener('click', function() {
|
||||
window.history.back();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
// 이전으로 버튼
|
||||
document.getElementById("backBtn").addEventListener("click", function () {
|
||||
window.history.back();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user