mirror of
https://github.com/ktds-dg0501/kt-event-marketing.git
synced 2025-12-06 11:26:26 +00:00
edit prototype
This commit is contained in:
cherry2250
parent
d4728c0078
commit
debf4be7c6
@ -1,214 +1,363 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ko">
|
<html lang="ko">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - AI트렌드분석결과">
|
<meta
|
||||||
<title>AI 트렌드 분석 - KT 이벤트 마케팅</title>
|
name="description"
|
||||||
|
content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - AI트렌드분석결과"
|
||||||
|
/>
|
||||||
|
<title>AI 트렌드 분석 - KT 이벤트 마케팅</title>
|
||||||
|
|
||||||
<!-- Styles -->
|
<!-- Styles -->
|
||||||
<link rel="stylesheet" href="css/common.css">
|
<link rel="stylesheet" href="css/common.css" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
<link
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
rel="stylesheet"
|
||||||
</head>
|
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
<body>
|
/>
|
||||||
<!-- Skip Link -->
|
<link
|
||||||
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Skip Link -->
|
||||||
|
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
||||||
|
|
||||||
<!-- App Wrapper -->
|
<!-- App Wrapper -->
|
||||||
<div class="app-wrapper">
|
<div class="app-wrapper">
|
||||||
<!-- Top App Bar -->
|
<!-- Top App Bar -->
|
||||||
<header class="app-bar">
|
<header class="app-bar">
|
||||||
<button class="app-bar__back" aria-label="뒤로가기" onclick="window.history.back()">
|
<button
|
||||||
<span class="material-icons">arrow_back</span>
|
class="app-bar__back"
|
||||||
</button>
|
aria-label="뒤로가기"
|
||||||
<h1 class="app-bar__title">AI 트렌드 분석</h1>
|
onclick="window.history.back()"
|
||||||
<button class="app-bar__action" aria-label="홈으로" onclick="window.location.href='21.5-홈.html'">
|
>
|
||||||
<span class="material-icons">close</span>
|
<span class="material-icons">arrow_back</span>
|
||||||
</button>
|
</button>
|
||||||
</header>
|
<h1 class="app-bar__title">AI 트렌드 분석</h1>
|
||||||
|
<button
|
||||||
|
class="app-bar__action"
|
||||||
|
aria-label="홈으로"
|
||||||
|
onclick="window.location.href='21.5-홈.html'"
|
||||||
|
>
|
||||||
|
<span class="material-icons">close</span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<main id="main-content" class="app-content">
|
<main id="main-content" class="app-content">
|
||||||
<div class="container" style="max-width: 500px; margin: 0 auto; padding-top: 24px;">
|
<div
|
||||||
<!-- Progress Section -->
|
class="container"
|
||||||
<div style="margin-bottom: 32px;">
|
style="max-width: 500px; margin: 0 auto; padding-top: 24px"
|
||||||
<div class="body-m" style="margin-bottom: 8px; font-weight: 600;">단계 2/6: 트렌드 분석</div>
|
>
|
||||||
<div style="display: flex; gap: 4px;">
|
<!-- Progress Section -->
|
||||||
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
|
<div style="margin-bottom: 32px">
|
||||||
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
|
<div class="body-m" style="margin-bottom: 8px; font-weight: 600">
|
||||||
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
|
단계 2/6: 트렌드 분석
|
||||||
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
|
</div>
|
||||||
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
|
<div style="display: flex; gap: 4px">
|
||||||
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
|
<div
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--color-primary-main);
|
||||||
|
border-radius: 2px;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--color-primary-main);
|
||||||
|
border-radius: 2px;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--color-gray-200);
|
||||||
|
border-radius: 2px;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--color-gray-200);
|
||||||
|
border-radius: 2px;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--color-gray-200);
|
||||||
|
border-radius: 2px;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--color-gray-200);
|
||||||
|
border-radius: 2px;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- AI Analysis Loading -->
|
<!-- AI Analysis Loading -->
|
||||||
<div id="loadingSection" style="text-align: center; padding: 40px 0;">
|
<div id="loadingSection" style="text-align: center; padding: 40px 0">
|
||||||
<div class="spinner" style="margin: 0 auto 24px;"></div>
|
<div class="spinner" style="margin: 0 auto 24px"></div>
|
||||||
<h2 class="h3" style="margin-bottom: 8px;">🤖 AI가 분석중입니다...</h2>
|
<h2 class="h3" style="margin-bottom: 8px">
|
||||||
<p class="body-m text-muted">업종, 지역, 시즌을 고려한 트렌드를 분석하고 있습니다</p>
|
🤖 AI가 분석중입니다...
|
||||||
<div id="progressBar" style="width: 100%; height: 8px; background: var(--color-gray-200); border-radius: 4px; margin: 24px 0; overflow: hidden;">
|
|
||||||
<div id="progressFill" style="height: 100%; background: var(--color-primary-main); width: 0%; transition: width 0.3s ease;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="body-s text-muted" id="progressText">분석 시작 중...</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Analysis Results (Hidden initially) -->
|
|
||||||
<div id="resultsSection" style="display: none; opacity: 0; transition: opacity 0.5s ease;">
|
|
||||||
<!-- Store Info -->
|
|
||||||
<div style="margin-bottom: 32px;">
|
|
||||||
<h2 class="h3" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
|
||||||
<span>📊</span>
|
|
||||||
<span>분석 결과</span>
|
|
||||||
</h2>
|
</h2>
|
||||||
|
<p class="body-m text-muted">
|
||||||
|
업종, 지역, 시즌을 고려한 트렌드를 분석하고 있습니다
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
id="progressBar"
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background: var(--color-gray-200);
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 24px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="progressFill"
|
||||||
|
style="
|
||||||
|
height: 100%;
|
||||||
|
background: var(--color-primary-main);
|
||||||
|
width: 0%;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="body-s text-muted" id="progressText">
|
||||||
|
분석 시작 중...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card" style="padding: 16px;">
|
<!-- Analysis Results (Hidden initially) -->
|
||||||
<div style="display: grid; grid-template-columns: auto 1fr; gap: 12px 16px;">
|
<div
|
||||||
<div class="body-m text-muted">매장</div>
|
id="resultsSection"
|
||||||
<div class="body-m" style="font-weight: 600;" id="storeName">-</div>
|
style="display: none; opacity: 0; transition: opacity 0.5s ease"
|
||||||
|
>
|
||||||
|
<!-- Store Info -->
|
||||||
|
<div style="margin-bottom: 32px">
|
||||||
|
<h2
|
||||||
|
class="h3"
|
||||||
|
style="
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span>📊</span>
|
||||||
|
<span>분석 결과</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
<div class="body-m text-muted">업종</div>
|
<div class="card" style="padding: 16px">
|
||||||
<div class="body-m" style="font-weight: 600;" id="businessType">-</div>
|
<div
|
||||||
|
style="
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 12px 16px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="body-m text-muted">매장</div>
|
||||||
|
<div class="body-m" style="font-weight: 600" id="storeName">
|
||||||
|
-
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="body-m text-muted">지역</div>
|
<div class="body-m text-muted">업종</div>
|
||||||
<div class="body-m" style="font-weight: 600;" id="location">-</div>
|
<div
|
||||||
|
class="body-m"
|
||||||
|
style="font-weight: 600"
|
||||||
|
id="businessType"
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="body-m text-muted">시즌</div>
|
<div class="body-m text-muted">지역</div>
|
||||||
<div class="body-m" style="font-weight: 600;" id="season">-</div>
|
<div class="body-m" style="font-weight: 600" id="location">
|
||||||
|
-
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="body-m text-muted">시즌</div>
|
||||||
|
<div class="body-m" style="font-weight: 600" id="season">
|
||||||
|
-
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Trends -->
|
<!-- Trends -->
|
||||||
<div style="margin-bottom: 32px;">
|
<div style="margin-bottom: 32px">
|
||||||
<h3 class="body-l" style="font-weight: 700; margin-bottom: 16px;">주요 트렌드</h3>
|
<h3 class="body-l" style="font-weight: 700; margin-bottom: 16px">
|
||||||
|
주요 트렌드
|
||||||
|
</h3>
|
||||||
|
|
||||||
<div id="trendsList">
|
<div id="trendsList">
|
||||||
<!-- Trends will be dynamically added here -->
|
<!-- Trends will be dynamically added here -->
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Success Rate -->
|
|
||||||
<div style="margin-bottom: 32px;">
|
|
||||||
<div class="card" style="padding: 20px; text-align: center; background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-white) 100%);">
|
|
||||||
<div class="h2" style="color: var(--color-secondary-main); margin-bottom: 8px;" id="successRate">
|
|
||||||
78% 🎯
|
|
||||||
</div>
|
</div>
|
||||||
<div class="body-m text-muted">예상 성공률 (동일 업종 평균 대비)</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Success Rate -->
|
||||||
|
<div style="margin-bottom: 32px">
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
style="
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
var(--color-secondary-light) 0%,
|
||||||
|
var(--color-white) 100%
|
||||||
|
);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="h2"
|
||||||
|
style="color: var(--color-secondary-main); margin-bottom: 8px"
|
||||||
|
id="successRate"
|
||||||
|
>
|
||||||
|
78% 🎯
|
||||||
|
</div>
|
||||||
|
<div class="body-m text-muted">
|
||||||
|
예상 성공률 (동일 업종 평균 대비)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Retry Button (Hidden unless error) -->
|
||||||
|
<button
|
||||||
|
id="retryBtn"
|
||||||
|
class="btn btn-secondary btn-md btn-block"
|
||||||
|
style="display: none; margin-bottom: 16px"
|
||||||
|
onclick="retryAnalysis()"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="material-icons"
|
||||||
|
style="font-size: 20px; margin-right: 8px"
|
||||||
|
>refresh</span
|
||||||
|
>
|
||||||
|
다시 분석하기
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Next Button -->
|
||||||
|
<button
|
||||||
|
id="nextBtn"
|
||||||
|
class="btn btn-primary btn-lg btn-block"
|
||||||
|
style="margin-bottom: 32px"
|
||||||
|
>
|
||||||
|
다음 (경품추천)
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Retry Button (Hidden unless error) -->
|
|
||||||
<button
|
|
||||||
id="retryBtn"
|
|
||||||
class="btn btn-secondary btn-md btn-block"
|
|
||||||
style="display: none; margin-bottom: 16px;"
|
|
||||||
onclick="retryAnalysis()"
|
|
||||||
>
|
|
||||||
<span class="material-icons" style="font-size: 20px; margin-right: 8px;">refresh</span>
|
|
||||||
다시 분석하기
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Next Button -->
|
|
||||||
<button
|
|
||||||
id="nextBtn"
|
|
||||||
class="btn btn-primary btn-lg btn-block"
|
|
||||||
style="margin-bottom: 32px;"
|
|
||||||
>
|
|
||||||
다음 (경품추천)
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
</main>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="js/common.js"></script>
|
<script src="js/common.js"></script>
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(function () {
|
||||||
'use strict';
|
"use strict";
|
||||||
|
|
||||||
const loadingSection = document.getElementById('loadingSection');
|
const loadingSection = document.getElementById("loadingSection");
|
||||||
const resultsSection = document.getElementById('resultsSection');
|
const resultsSection = document.getElementById("resultsSection");
|
||||||
const progressFill = document.getElementById('progressFill');
|
const progressFill = document.getElementById("progressFill");
|
||||||
const progressText = document.getElementById('progressText');
|
const progressText = document.getElementById("progressText");
|
||||||
const nextBtn = document.getElementById('nextBtn');
|
const nextBtn = document.getElementById("nextBtn");
|
||||||
const retryBtn = document.getElementById('retryBtn');
|
const retryBtn = document.getElementById("retryBtn");
|
||||||
|
|
||||||
// 상태 로드
|
// 상태 로드
|
||||||
window.AppState.load();
|
window.AppState.load();
|
||||||
const store = window.AppState.store;
|
const store = window.AppState.store;
|
||||||
const event = window.AppState.currentEvent;
|
const event = window.AppState.currentEvent;
|
||||||
|
|
||||||
// 매장 정보가 없으면 이전 화면으로
|
// 매장 정보가 없으면 이전 화면으로
|
||||||
if (!store) {
|
if (!store) {
|
||||||
Toast.error('매장 정보를 먼저 등록해주세요.');
|
Toast.error("매장 정보를 먼저 등록해주세요.");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.location.href = '02-매장정보등록.html';
|
window.location.href = "02-매장정보등록.html";
|
||||||
}, 1000);
|
}, 1000);
|
||||||
return;
|
return;
|
||||||
}
|
|
||||||
|
|
||||||
// AI 분석 시뮬레이션
|
|
||||||
let progress = 0;
|
|
||||||
const analysisSteps = [
|
|
||||||
{ progress: 20, text: '업종 데이터 수집 중...' },
|
|
||||||
{ progress: 40, text: '지역 트렌드 분석 중...' },
|
|
||||||
{ progress: 60, text: '시즌 패턴 학습 중...' },
|
|
||||||
{ progress: 80, text: '최적 전략 계산 중...' },
|
|
||||||
{ progress: 100, text: '분석 완료!' }
|
|
||||||
];
|
|
||||||
|
|
||||||
let currentStep = 0;
|
|
||||||
|
|
||||||
function updateProgress() {
|
|
||||||
if (currentStep < analysisSteps.length) {
|
|
||||||
const step = analysisSteps[currentStep];
|
|
||||||
progressFill.style.width = step.progress + '%';
|
|
||||||
progressText.textContent = step.text;
|
|
||||||
currentStep++;
|
|
||||||
|
|
||||||
// 랜덤한 시간 간격으로 진행 (0.5~1초)
|
|
||||||
const delay = 500 + Math.random() * 500;
|
|
||||||
setTimeout(updateProgress, delay);
|
|
||||||
} else {
|
|
||||||
// 분석 완료
|
|
||||||
setTimeout(showResults, 500);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// 분석 결과 표시
|
// AI 분석 시뮬레이션
|
||||||
function showResults() {
|
let progress = 0;
|
||||||
// 로딩 숨기기
|
const analysisSteps = [
|
||||||
loadingSection.style.display = 'none';
|
{ progress: 20, text: "업종 데이터 수집 중..." },
|
||||||
|
{ progress: 40, text: "지역 트렌드 분석 중..." },
|
||||||
|
{ progress: 60, text: "시즌 패턴 학습 중..." },
|
||||||
|
{ progress: 80, text: "최적 전략 계산 중..." },
|
||||||
|
{ progress: 100, text: "분석 완료!" },
|
||||||
|
];
|
||||||
|
|
||||||
// 매장 정보 표시
|
let currentStep = 0;
|
||||||
document.getElementById('storeName').textContent = store.name || '-';
|
|
||||||
document.getElementById('businessType').textContent = store.businessTypeName || '-';
|
|
||||||
|
|
||||||
const addressParts = store.address ? store.address.split(' ') : [];
|
function updateProgress() {
|
||||||
const locationText = addressParts.slice(0, 3).join(' ') || '-';
|
if (currentStep < analysisSteps.length) {
|
||||||
document.getElementById('location').textContent = locationText;
|
const step = analysisSteps[currentStep];
|
||||||
|
progressFill.style.width = step.progress + "%";
|
||||||
|
progressText.textContent = step.text;
|
||||||
|
currentStep++;
|
||||||
|
|
||||||
// 현재 시즌 계산
|
// 랜덤한 시간 간격으로 진행 (0.5~1초)
|
||||||
const currentMonth = new Date().getMonth() + 1;
|
const delay = 500 + Math.random() * 500;
|
||||||
let season = '';
|
setTimeout(updateProgress, delay);
|
||||||
if (currentMonth >= 3 && currentMonth <= 5) season = '봄';
|
} else {
|
||||||
else if (currentMonth >= 6 && currentMonth <= 8) season = '여름';
|
// 분석 완료
|
||||||
else if (currentMonth >= 9 && currentMonth <= 11) season = '가을';
|
setTimeout(showResults, 500);
|
||||||
else season = '겨울';
|
}
|
||||||
document.getElementById('season').textContent = `${season} (${currentMonth}월)`;
|
}
|
||||||
|
|
||||||
// 트렌드 데이터 생성 (업종별 트렌드 시뮬레이션)
|
// 분석 결과 표시
|
||||||
const trends = generateTrends(store.businessType, season, event.purpose);
|
function showResults() {
|
||||||
|
// 로딩 숨기기
|
||||||
|
loadingSection.style.display = "none";
|
||||||
|
|
||||||
// 트렌드 렌더링
|
// 매장 정보 표시
|
||||||
const trendsList = document.getElementById('trendsList');
|
document.getElementById("storeName").textContent = store.name || "-";
|
||||||
trendsList.innerHTML = trends.map((trend, index) => `
|
document.getElementById("businessType").textContent =
|
||||||
|
store.businessTypeName || "-";
|
||||||
|
|
||||||
|
const addressParts = store.address ? store.address.split(" ") : [];
|
||||||
|
const locationText = addressParts.slice(0, 3).join(" ") || "-";
|
||||||
|
document.getElementById("location").textContent = locationText;
|
||||||
|
|
||||||
|
// 현재 시즌 계산
|
||||||
|
const currentMonth = new Date().getMonth() + 1;
|
||||||
|
let season = "";
|
||||||
|
if (currentMonth >= 3 && currentMonth <= 5) season = "봄";
|
||||||
|
else if (currentMonth >= 6 && currentMonth <= 8) season = "여름";
|
||||||
|
else if (currentMonth >= 9 && currentMonth <= 11) season = "가을";
|
||||||
|
else season = "겨울";
|
||||||
|
document.getElementById(
|
||||||
|
"season"
|
||||||
|
).textContent = `${season} (${currentMonth}월)`;
|
||||||
|
|
||||||
|
// 트렌드 데이터 생성 (업종별 트렌드 시뮬레이션)
|
||||||
|
const trends = generateTrends(
|
||||||
|
store.businessType,
|
||||||
|
season,
|
||||||
|
event.purpose
|
||||||
|
);
|
||||||
|
|
||||||
|
// 트렌드 렌더링
|
||||||
|
const trendsList = document.getElementById("trendsList");
|
||||||
|
trendsList.innerHTML = trends
|
||||||
|
.map(
|
||||||
|
(trend, index) => `
|
||||||
<div class="trend-card" onclick="showTrendDetail(${index})" style="margin-bottom: 12px; cursor: pointer;">
|
<div class="trend-card" onclick="showTrendDetail(${index})" style="margin-bottom: 12px; cursor: pointer;">
|
||||||
<div class="card" style="padding: 16px; transition: all 0.3s ease;">
|
<div class="card" style="padding: 16px; transition: all 0.3s ease;">
|
||||||
<div style="display: flex; gap: 12px;">
|
<div style="display: flex; gap: 12px;">
|
||||||
@ -225,116 +374,194 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`).join('');
|
`
|
||||||
|
)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
// 성공률 계산
|
||||||
|
const successRate = calculateSuccessRate(
|
||||||
|
store.businessType,
|
||||||
|
event.purpose,
|
||||||
|
trends
|
||||||
|
);
|
||||||
|
document.getElementById(
|
||||||
|
"successRate"
|
||||||
|
).textContent = `${successRate}% 🎯`;
|
||||||
|
|
||||||
|
// 분석 결과 저장
|
||||||
|
event.trendAnalysis = {
|
||||||
|
trends: trends,
|
||||||
|
successRate: successRate,
|
||||||
|
analyzedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
window.AppState.save();
|
||||||
|
|
||||||
|
// 결과 섹션 표시 (페이드인)
|
||||||
|
resultsSection.style.display = "block";
|
||||||
|
setTimeout(() => {
|
||||||
|
resultsSection.style.opacity = "1";
|
||||||
|
}, 50);
|
||||||
|
|
||||||
|
Toast.success("AI 트렌드 분석이 완료되었습니다!");
|
||||||
|
}
|
||||||
|
|
||||||
|
// 업종/시즌/목적별 트렌드 생성
|
||||||
|
function generateTrends(businessType, season, purpose) {
|
||||||
|
const trendData = {
|
||||||
|
restaurant: {
|
||||||
|
winter: [
|
||||||
|
{
|
||||||
|
emoji: "1️⃣",
|
||||||
|
title: "연말 모임 증가",
|
||||||
|
recommendation: "단체 할인 이벤트 효과적",
|
||||||
|
description:
|
||||||
|
"회식, 송년회 수요 급증으로 단체 예약 고객 공략 필요",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
emoji: "2️⃣",
|
||||||
|
title: "배달 주문 급증",
|
||||||
|
recommendation: "배달 경품 추천",
|
||||||
|
description:
|
||||||
|
"추운 날씨로 배달 주문 40% 증가, 배달 전용 혜택 제공",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
emoji: "3️⃣",
|
||||||
|
title: "SNS 공유 활발",
|
||||||
|
recommendation: "바이럴 참여방법 권장",
|
||||||
|
description:
|
||||||
|
"연말 분위기로 SNS 공유율 높음, 해시태그 이벤트 효과적",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
spring: [
|
||||||
|
{
|
||||||
|
emoji: "1️⃣",
|
||||||
|
title: "야외 활동 증가",
|
||||||
|
recommendation: "테이크아웃 이벤트",
|
||||||
|
description: "봄 나들이 시즌, 테이크아웃 주문 35% 증가",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
emoji: "2️⃣",
|
||||||
|
title: "가족 단위 방문",
|
||||||
|
recommendation: "패밀리 세트 경품",
|
||||||
|
description: "주말 가족 방문객 증가, 어린이 메뉴 할인 효과적",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
emoji: "3️⃣",
|
||||||
|
title: "건강식 선호",
|
||||||
|
recommendation: "건강 메뉴 홍보",
|
||||||
|
description: "봄철 건강관리 트렌드, 저칼로리 메뉴 각광",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
cafe: {
|
||||||
|
winter: [
|
||||||
|
{
|
||||||
|
emoji: "1️⃣",
|
||||||
|
title: "따뜻한 음료 선호",
|
||||||
|
recommendation: "핫 음료 할인 이벤트",
|
||||||
|
description: "겨울철 따뜻한 음료 판매량 60% 증가",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
emoji: "2️⃣",
|
||||||
|
title: "실내 체류 시간 증가",
|
||||||
|
recommendation: "재방문 쿠폰 제공",
|
||||||
|
description: "추운 날씨로 카페 체류시간 2배 증가",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
emoji: "3️⃣",
|
||||||
|
title: "디저트 수요 증가",
|
||||||
|
recommendation: "음료+디저트 세트",
|
||||||
|
description: "연말 분위기로 디저트 주문 45% 상승",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// 기본 트렌드 (업종/시즌이 매칭되지 않을 경우)
|
||||||
|
const defaultTrends = [
|
||||||
|
{
|
||||||
|
emoji: "1️⃣",
|
||||||
|
title: "할인 이벤트 선호",
|
||||||
|
recommendation: "가격 할인 경품 추천",
|
||||||
|
description: "소비자 가격 민감도 증가, 할인 이벤트 참여율 높음",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
emoji: "2️⃣",
|
||||||
|
title: "모바일 접근성 중요",
|
||||||
|
recommendation: "QR코드 참여방식",
|
||||||
|
description: "모바일 결제 증가, 간편한 참여 방법 선호",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
emoji: "3️⃣",
|
||||||
|
title: "후기 공유 활발",
|
||||||
|
recommendation: "리뷰 이벤트 연계",
|
||||||
|
description: "SNS 리뷰 작성 유도로 바이럴 효과 기대",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 업종과 시즌에 맞는 트렌드 반환
|
||||||
|
const seasonKey =
|
||||||
|
season === "봄"
|
||||||
|
? "spring"
|
||||||
|
: season === "여름"
|
||||||
|
? "summer"
|
||||||
|
: season === "가을"
|
||||||
|
? "fall"
|
||||||
|
: "winter";
|
||||||
|
|
||||||
|
if (trendData[businessType] && trendData[businessType][seasonKey]) {
|
||||||
|
return trendData[businessType][seasonKey];
|
||||||
|
} else if (trendData[businessType]) {
|
||||||
|
// 해당 시즌 데이터가 없으면 겨울 데이터 사용
|
||||||
|
return trendData[businessType].winter || defaultTrends;
|
||||||
|
} else {
|
||||||
|
return defaultTrends;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 성공률 계산
|
// 성공률 계산
|
||||||
const successRate = calculateSuccessRate(store.businessType, event.purpose, trends);
|
function calculateSuccessRate(businessType, purpose, trends) {
|
||||||
document.getElementById('successRate').textContent = `${successRate}% 🎯`;
|
let baseRate = 70;
|
||||||
|
|
||||||
// 분석 결과 저장
|
// 업종별 기본 성공률
|
||||||
event.trendAnalysis = {
|
const businessRates = {
|
||||||
trends: trends,
|
restaurant: 75,
|
||||||
successRate: successRate,
|
cafe: 78,
|
||||||
analyzedAt: new Date().toISOString()
|
retail: 72,
|
||||||
};
|
beauty: 80,
|
||||||
window.AppState.save();
|
service: 70,
|
||||||
|
};
|
||||||
|
|
||||||
// 결과 섹션 표시 (페이드인)
|
if (businessRates[businessType]) {
|
||||||
resultsSection.style.display = 'block';
|
baseRate = businessRates[businessType];
|
||||||
setTimeout(() => {
|
|
||||||
resultsSection.style.opacity = '1';
|
|
||||||
}, 50);
|
|
||||||
|
|
||||||
Toast.success('AI 트렌드 분석이 완료되었습니다!');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 업종/시즌/목적별 트렌드 생성
|
|
||||||
function generateTrends(businessType, season, purpose) {
|
|
||||||
const trendData = {
|
|
||||||
restaurant: {
|
|
||||||
winter: [
|
|
||||||
{ emoji: '1️⃣', title: '연말 모임 증가', recommendation: '단체 할인 이벤트 효과적', description: '회식, 송년회 수요 급증으로 단체 예약 고객 공략 필요' },
|
|
||||||
{ emoji: '2️⃣', title: '배달 주문 급증', recommendation: '배달 경품 추천', description: '추운 날씨로 배달 주문 40% 증가, 배달 전용 혜택 제공' },
|
|
||||||
{ emoji: '3️⃣', title: 'SNS 공유 활발', recommendation: '바이럴 참여방법 권장', description: '연말 분위기로 SNS 공유율 높음, 해시태그 이벤트 효과적' }
|
|
||||||
],
|
|
||||||
spring: [
|
|
||||||
{ emoji: '1️⃣', title: '야외 활동 증가', recommendation: '테이크아웃 이벤트', description: '봄 나들이 시즌, 테이크아웃 주문 35% 증가' },
|
|
||||||
{ emoji: '2️⃣', title: '가족 단위 방문', recommendation: '패밀리 세트 경품', description: '주말 가족 방문객 증가, 어린이 메뉴 할인 효과적' },
|
|
||||||
{ emoji: '3️⃣', title: '건강식 선호', recommendation: '건강 메뉴 홍보', description: '봄철 건강관리 트렌드, 저칼로리 메뉴 각광' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
cafe: {
|
|
||||||
winter: [
|
|
||||||
{ emoji: '1️⃣', title: '따뜻한 음료 선호', recommendation: '핫 음료 할인 이벤트', description: '겨울철 따뜻한 음료 판매량 60% 증가' },
|
|
||||||
{ emoji: '2️⃣', title: '실내 체류 시간 증가', recommendation: '재방문 쿠폰 제공', description: '추운 날씨로 카페 체류시간 2배 증가' },
|
|
||||||
{ emoji: '3️⃣', title: '디저트 수요 증가', recommendation: '음료+디저트 세트', description: '연말 분위기로 디저트 주문 45% 상승' }
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
// 기본 트렌드 (업종/시즌이 매칭되지 않을 경우)
|
// 목적별 가중치
|
||||||
const defaultTrends = [
|
const purposeBonus = {
|
||||||
{ emoji: '1️⃣', title: '할인 이벤트 선호', recommendation: '가격 할인 경품 추천', description: '소비자 가격 민감도 증가, 할인 이벤트 참여율 높음' },
|
new_customer: 3,
|
||||||
{ emoji: '2️⃣', title: '모바일 접근성 중요', recommendation: 'QR코드 참여방식', description: '모바일 결제 증가, 간편한 참여 방법 선호' },
|
repeat_visit: 5,
|
||||||
{ emoji: '3️⃣', title: '후기 공유 활발', recommendation: '리뷰 이벤트 연계', description: 'SNS 리뷰 작성 유도로 바이럴 효과 기대' }
|
sales_increase: 0,
|
||||||
];
|
brand_awareness: -2,
|
||||||
|
};
|
||||||
|
|
||||||
// 업종과 시즌에 맞는 트렌드 반환
|
if (purposeBonus[purpose] !== undefined) {
|
||||||
const seasonKey = season === '봄' ? 'spring' : season === '여름' ? 'summer' : season === '가을' ? 'fall' : 'winter';
|
baseRate += purposeBonus[purpose];
|
||||||
|
}
|
||||||
|
|
||||||
if (trendData[businessType] && trendData[businessType][seasonKey]) {
|
// 트렌드 개수에 따른 보너스
|
||||||
return trendData[businessType][seasonKey];
|
baseRate += trends.length;
|
||||||
} else if (trendData[businessType]) {
|
|
||||||
// 해당 시즌 데이터가 없으면 겨울 데이터 사용
|
|
||||||
return trendData[businessType].winter || defaultTrends;
|
|
||||||
} else {
|
|
||||||
return defaultTrends;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 성공률 계산
|
return Math.min(95, Math.max(65, baseRate));
|
||||||
function calculateSuccessRate(businessType, purpose, trends) {
|
|
||||||
let baseRate = 70;
|
|
||||||
|
|
||||||
// 업종별 기본 성공률
|
|
||||||
const businessRates = {
|
|
||||||
restaurant: 75,
|
|
||||||
cafe: 78,
|
|
||||||
retail: 72,
|
|
||||||
beauty: 80,
|
|
||||||
service: 70
|
|
||||||
};
|
|
||||||
|
|
||||||
if (businessRates[businessType]) {
|
|
||||||
baseRate = businessRates[businessType];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 목적별 가중치
|
// 트렌드 상세 정보 표시
|
||||||
const purposeBonus = {
|
window.showTrendDetail = function (index) {
|
||||||
new_customer: 3,
|
const trends = event.trendAnalysis.trends;
|
||||||
repeat_visit: 5,
|
if (!trends || !trends[index]) return;
|
||||||
sales_increase: 0,
|
|
||||||
brand_awareness: -2
|
|
||||||
};
|
|
||||||
|
|
||||||
if (purposeBonus[purpose] !== undefined) {
|
const trend = trends[index];
|
||||||
baseRate += purposeBonus[purpose];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 트렌드 개수에 따른 보너스
|
BottomSheet.show(`
|
||||||
baseRate += trends.length;
|
|
||||||
|
|
||||||
return Math.min(95, Math.max(65, baseRate));
|
|
||||||
}
|
|
||||||
|
|
||||||
// 트렌드 상세 정보 표시
|
|
||||||
window.showTrendDetail = function(index) {
|
|
||||||
const trends = event.trendAnalysis.trends;
|
|
||||||
if (!trends || !trends[index]) return;
|
|
||||||
|
|
||||||
const trend = trends[index];
|
|
||||||
|
|
||||||
BottomSheet.show(`
|
|
||||||
<div style="padding: 8px 0;">
|
<div style="padding: 8px 0;">
|
||||||
<div style="text-align: center; margin-bottom: 20px;">
|
<div style="text-align: center; margin-bottom: 20px;">
|
||||||
<div style="font-size: 48px; margin-bottom: 8px;">${trend.emoji}</div>
|
<div style="font-size: 48px; margin-bottom: 8px;">${trend.emoji}</div>
|
||||||
@ -352,65 +579,66 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 재시도
|
// 재시도
|
||||||
window.retryAnalysis = function() {
|
window.retryAnalysis = function () {
|
||||||
// 결과 숨기기
|
// 결과 숨기기
|
||||||
resultsSection.style.display = 'none';
|
resultsSection.style.display = "none";
|
||||||
resultsSection.style.opacity = '0';
|
resultsSection.style.opacity = "0";
|
||||||
retryBtn.style.display = 'none';
|
retryBtn.style.display = "none";
|
||||||
|
|
||||||
// 로딩 다시 표시
|
// 로딩 다시 표시
|
||||||
loadingSection.style.display = 'block';
|
loadingSection.style.display = "block";
|
||||||
currentStep = 0;
|
currentStep = 0;
|
||||||
progress = 0;
|
progress = 0;
|
||||||
progressFill.style.width = '0%';
|
progressFill.style.width = "0%";
|
||||||
progressText.textContent = '분석 시작 중...';
|
progressText.textContent = "분석 시작 중...";
|
||||||
|
|
||||||
// 분석 재시작
|
// 분석 재시작
|
||||||
setTimeout(updateProgress, 500);
|
setTimeout(updateProgress, 500);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 다음 버튼
|
// 다음 버튼
|
||||||
nextBtn.addEventListener('click', function() {
|
nextBtn.addEventListener("click", function () {
|
||||||
Loading.show('경품 추천 준비 중...');
|
Loading.show("경품 추천 준비 중...");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.location.href = '05-AI경품추천.html';
|
window.location.href = "05-AI경품추천.html";
|
||||||
}, 800);
|
}, 800);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 페이지 로드 시 분석 시작
|
// 페이지 로드 시 분석 시작
|
||||||
setTimeout(updateProgress, 1000);
|
setTimeout(updateProgress, 1000);
|
||||||
|
|
||||||
console.log('AI트렌드분석결과 페이지 로드 완료');
|
console.log("AI트렌드분석결과 페이지 로드 완료");
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.trend-card .card:hover {
|
.trend-card .card:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
border-color: var(--color-primary-main);
|
border-color: var(--color-primary-main);
|
||||||
}
|
|
||||||
|
|
||||||
.trend-number {
|
|
||||||
font-size: 24px;
|
|
||||||
min-width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
50% {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#progressText {
|
.trend-number {
|
||||||
animation: pulse 2s ease-in-out infinite;
|
font-size: 24px;
|
||||||
}
|
min-width: 32px;
|
||||||
</style>
|
}
|
||||||
</body>
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressText {
|
||||||
|
animation: pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,300 +1,394 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ko">
|
<html lang="ko">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>SNS 이미지 생성 - KT AI 이벤트 마케팅</title>
|
<title>SNS 이미지 생성 - KT AI 이벤트 마케팅</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css" />
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
<link
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
rel="stylesheet"
|
||||||
<style>
|
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
.image-preview {
|
/>
|
||||||
width: 100%;
|
<link
|
||||||
aspect-ratio: 1 / 1;
|
rel="stylesheet"
|
||||||
background: var(--color-gray-100);
|
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
|
||||||
border-radius: var(--radius-md);
|
/>
|
||||||
display: flex;
|
<style>
|
||||||
align-items: center;
|
.image-preview {
|
||||||
justify-content: center;
|
width: 100%;
|
||||||
overflow: hidden;
|
aspect-ratio: 1 / 1;
|
||||||
position: relative;
|
background: var(--color-gray-100);
|
||||||
}
|
border-radius: var(--radius-md);
|
||||||
.image-preview img {
|
display: flex;
|
||||||
width: 100%;
|
align-items: center;
|
||||||
height: 100%;
|
justify-content: center;
|
||||||
object-fit: cover;
|
overflow: hidden;
|
||||||
}
|
position: relative;
|
||||||
.image-preview-placeholder {
|
}
|
||||||
color: var(--color-gray-400);
|
.image-preview img {
|
||||||
text-align: center;
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
.fullscreen-modal {
|
object-fit: cover;
|
||||||
position: fixed;
|
}
|
||||||
top: 0;
|
.image-preview-placeholder {
|
||||||
left: 0;
|
color: var(--color-gray-400);
|
||||||
width: 100%;
|
text-align: center;
|
||||||
height: 100%;
|
}
|
||||||
background: rgba(0, 0, 0, 0.95);
|
.fullscreen-modal {
|
||||||
display: none;
|
position: fixed;
|
||||||
align-items: center;
|
top: 0;
|
||||||
justify-content: center;
|
left: 0;
|
||||||
z-index: 9999;
|
width: 100%;
|
||||||
padding: var(--spacing-lg);
|
height: 100%;
|
||||||
}
|
background: rgba(0, 0, 0, 0.95);
|
||||||
.fullscreen-modal.active {
|
display: none;
|
||||||
display: flex;
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
.fullscreen-image {
|
z-index: 9999;
|
||||||
max-width: 100%;
|
padding: var(--spacing-lg);
|
||||||
max-height: 100%;
|
}
|
||||||
object-fit: contain;
|
.fullscreen-modal.active {
|
||||||
}
|
display: flex;
|
||||||
.fullscreen-close {
|
}
|
||||||
position: absolute;
|
.fullscreen-image {
|
||||||
top: var(--spacing-lg);
|
max-width: 100%;
|
||||||
right: var(--spacing-lg);
|
max-height: 100%;
|
||||||
background: rgba(255, 255, 255, 0.9);
|
object-fit: contain;
|
||||||
color: var(--color-text-primary);
|
}
|
||||||
border: none;
|
.fullscreen-close {
|
||||||
border-radius: var(--radius-full);
|
position: absolute;
|
||||||
width: 48px;
|
top: var(--spacing-lg);
|
||||||
height: 48px;
|
right: var(--spacing-lg);
|
||||||
display: flex;
|
background: rgba(255, 255, 255, 0.9);
|
||||||
align-items: center;
|
color: var(--color-text-primary);
|
||||||
justify-content: center;
|
border: none;
|
||||||
cursor: pointer;
|
border-radius: var(--radius-full);
|
||||||
}
|
width: 48px;
|
||||||
@keyframes spin {
|
height: 48px;
|
||||||
0% { transform: rotate(0deg); }
|
display: flex;
|
||||||
100% { transform: rotate(360deg); }
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
</style>
|
cursor: pointer;
|
||||||
</head>
|
}
|
||||||
<body>
|
@keyframes spin {
|
||||||
<div class="page page-with-header">
|
0% {
|
||||||
<!-- Header -->
|
transform: rotate(0deg);
|
||||||
<div id="header"></div>
|
}
|
||||||
|
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;">
|
<div class="container" style="max-width: 800px">
|
||||||
<!-- Loading State -->
|
<!-- Loading State -->
|
||||||
<div id="loadingState" class="text-center mt-2xl mb-2xl">
|
<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>
|
<span
|
||||||
<h3 class="text-headline mt-md mb-sm">AI 이미지 생성 중</h3>
|
class="material-icons"
|
||||||
<p class="text-body text-secondary mb-lg">
|
style="
|
||||||
딥러닝 모델이 이벤트에 어울리는<br>
|
font-size: 64px;
|
||||||
이미지를 생성하고 있어요...
|
color: var(--color-ai-blue);
|
||||||
</p>
|
animation: spin 2s linear infinite;
|
||||||
<div class="spinner mx-auto"></div>
|
"
|
||||||
<p class="text-caption text-tertiary mt-md">예상 시간: 5초</p>
|
>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>
|
</div>
|
||||||
|
|
||||||
<!-- Generated Images (hidden initially) -->
|
<!-- Bottom Navigation -->
|
||||||
<div id="generatedImages" class="hidden">
|
<div id="bottomNav"></div>
|
||||||
<!-- 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>
|
</div>
|
||||||
|
|
||||||
<!-- Bottom Navigation -->
|
<!-- Fullscreen Image Modal -->
|
||||||
<div id="bottomNav"></div>
|
<div id="fullscreenModal" class="fullscreen-modal">
|
||||||
</div>
|
<button class="fullscreen-close" onclick="closeFullscreen()">
|
||||||
|
<span class="material-icons">close</span>
|
||||||
|
</button>
|
||||||
|
<img
|
||||||
|
id="fullscreenImage"
|
||||||
|
class="fullscreen-image"
|
||||||
|
alt="이벤트 이미지 미리보기"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Fullscreen Image Modal -->
|
<script src="common.js"></script>
|
||||||
<div id="fullscreenModal" class="fullscreen-modal">
|
<script>
|
||||||
<button class="fullscreen-close" onclick="closeFullscreen()">
|
// 로그인 확인
|
||||||
<span class="material-icons">close</span>
|
KTEventApp.Session.requireAuth();
|
||||||
</button>
|
|
||||||
<img id="fullscreenImage" class="fullscreen-image" alt="이벤트 이미지 미리보기">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="common.js"></script>
|
// Header 생성
|
||||||
<script>
|
const header = KTEventApp.Navigation.createHeader({
|
||||||
// 로그인 확인
|
title: "SNS 이미지 생성",
|
||||||
KTEventApp.Session.requireAuth();
|
showBack: true,
|
||||||
|
showMenu: false,
|
||||||
// Header 생성
|
showProfile: false,
|
||||||
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;
|
|
||||||
});
|
});
|
||||||
});
|
document.getElementById("header").appendChild(header);
|
||||||
|
|
||||||
// 크게보기 버튼
|
// Bottom Navigation 생성
|
||||||
document.querySelectorAll('.preview-btn').forEach(btn => {
|
const bottomNav = KTEventApp.Navigation.createBottomNav("events");
|
||||||
btn.addEventListener('click', function() {
|
document.getElementById("bottomNav").appendChild(bottomNav);
|
||||||
const style = this.dataset.style;
|
|
||||||
openFullscreen(style);
|
// 저장된 데이터 불러오기
|
||||||
|
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');
|
document.querySelectorAll(".preview-btn").forEach((btn) => {
|
||||||
const img = document.getElementById('fullscreenImage');
|
btn.addEventListener("click", function () {
|
||||||
|
const style = this.dataset.style;
|
||||||
|
openFullscreen(style);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// 실제로는 생성된 이미지 URL을 사용
|
function openFullscreen(style) {
|
||||||
// 여기서는 placeholder 사용
|
const modal = document.getElementById("fullscreenModal");
|
||||||
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>';
|
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() {
|
modal.classList.add("active");
|
||||||
document.getElementById('fullscreenModal').classList.remove('active');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 배경 클릭 시 닫기
|
|
||||||
document.getElementById('fullscreenModal').addEventListener('click', function(e) {
|
|
||||||
if (e.target === this) {
|
|
||||||
closeFullscreen();
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
// 건너뛰기 버튼
|
window.closeFullscreen = function () {
|
||||||
document.getElementById('skipBtn').addEventListener('click', function() {
|
document.getElementById("fullscreenModal").classList.remove("active");
|
||||||
KTEventApp.Feedback.showModal({
|
};
|
||||||
title: '건너뛰기',
|
|
||||||
content: '<p class="text-body">이미지 없이 다음 단계로 진행하시겠습니까?</p>',
|
// 배경 클릭 시 닫기
|
||||||
buttons: [
|
document
|
||||||
{
|
.getElementById("fullscreenModal")
|
||||||
text: '취소',
|
.addEventListener("click", function (e) {
|
||||||
variant: 'text',
|
if (e.target === this) {
|
||||||
onClick: function() {
|
closeFullscreen();
|
||||||
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() {
|
document.getElementById("skipBtn").addEventListener("click", function () {
|
||||||
if (selectedStyle) {
|
KTEventApp.Feedback.showModal({
|
||||||
KTEventApp.Utils.saveToStorage('selected_image_style', selectedStyle);
|
title: "건너뛰기",
|
||||||
window.location.href = '10-콘텐츠편집.html';
|
content:
|
||||||
}
|
'<p class="text-body">이미지 없이 다음 단계로 진행하시겠습니까?</p>',
|
||||||
});
|
buttons: [
|
||||||
</script>
|
{
|
||||||
</body>
|
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>
|
</html>
|
||||||
|
|||||||
@ -1,219 +1,287 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ko">
|
<html lang="ko">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>최종 승인 - KT AI 이벤트 마케팅</title>
|
<title>최종 승인 - KT AI 이벤트 마케팅</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css" />
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
<link
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
rel="stylesheet"
|
||||||
</head>
|
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
<body>
|
/>
|
||||||
<div class="page page-with-header">
|
<link
|
||||||
<!-- Header -->
|
rel="stylesheet"
|
||||||
<div id="header"></div>
|
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;">
|
<div class="container" style="max-width: 600px">
|
||||||
<!-- Title Section -->
|
<!-- Title Section -->
|
||||||
<section class="mt-lg mb-lg text-center">
|
<section class="mt-lg mb-lg text-center">
|
||||||
<div class="mb-md">
|
<div class="mb-md">
|
||||||
<span class="material-icons" style="font-size: 64px; color: var(--color-success);">check_circle</span>
|
<span
|
||||||
</div>
|
class="material-icons"
|
||||||
<h2 class="text-title-large mb-sm">이벤트를 확인해주세요</h2>
|
style="font-size: 64px; color: var(--color-success)"
|
||||||
<p class="text-body text-secondary">모든 정보를 검토한 후 배포하세요</p>
|
>check_circle</span
|
||||||
</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>
|
</div>
|
||||||
|
<h2 class="text-title-large mb-sm">이벤트를 확인해주세요</h2>
|
||||||
|
<p class="text-body text-secondary">
|
||||||
|
모든 정보를 검토한 후 배포하세요
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="border-t pt-md">
|
<!-- Event Summary Card -->
|
||||||
<div class="grid grid-cols-2 gap-md text-body-small">
|
<section class="mb-lg">
|
||||||
<div>
|
<div class="card">
|
||||||
<p class="text-tertiary mb-xs">이벤트 기간</p>
|
<h3 class="text-headline mb-md" id="eventTitle">
|
||||||
<p class="text-semibold" id="eventPeriod">2025.02.01 ~ 2025.02.28</p>
|
SNS 팔로우 이벤트
|
||||||
</div>
|
</h3>
|
||||||
<div>
|
|
||||||
<p class="text-tertiary mb-xs">목표 참여자</p>
|
<div class="flex items-center gap-sm mb-md">
|
||||||
<p class="text-semibold" id="targetParticipants">180명</p>
|
<span class="event-card-badge badge-scheduled">배포 대기</span>
|
||||||
</div>
|
<span
|
||||||
<div>
|
class="event-card-badge"
|
||||||
<p class="text-tertiary mb-xs">예상 비용</p>
|
style="
|
||||||
<p class="text-semibold" id="estimatedCost">250,000원</p>
|
background: rgba(0, 102, 255, 0.1);
|
||||||
</div>
|
color: var(--color-ai-blue);
|
||||||
<div>
|
"
|
||||||
<p class="text-tertiary mb-xs">예상 ROI</p>
|
>
|
||||||
<p class="text-semibold text-kt-red" id="estimatedROI">520%</p>
|
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Event Details -->
|
<!-- Event Details -->
|
||||||
<section class="mb-lg">
|
<section class="mb-lg">
|
||||||
<h3 class="text-headline mb-md">이벤트 상세</h3>
|
<h3 class="text-headline mb-md">이벤트 상세</h3>
|
||||||
|
|
||||||
<div class="card mb-sm">
|
<div class="card mb-sm">
|
||||||
<div class="flex items-start gap-md">
|
<div class="flex items-start gap-md">
|
||||||
<span class="material-icons text-kt-red">celebration</span>
|
<span class="material-icons text-kt-red">celebration</span>
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<p class="text-body-small text-tertiary mb-xs">이벤트 제목</p>
|
<p class="text-body-small text-tertiary mb-xs">이벤트 제목</p>
|
||||||
<p class="text-body" id="detailTitle">SNS 팔로우 이벤트</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>
|
</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>
|
<span class="material-icons">edit</span>
|
||||||
|
채널 수정하기
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<div class="card mb-sm">
|
<!-- Terms Agreement -->
|
||||||
<div class="flex items-start gap-md">
|
<section class="mb-xl">
|
||||||
<span class="material-icons text-kt-red">card_giftcard</span>
|
<div class="card" style="background: var(--color-gray-50)">
|
||||||
<div class="flex-1">
|
<div class="form-check">
|
||||||
<p class="text-body-small text-tertiary mb-xs">경품</p>
|
<input
|
||||||
<p class="text-body" id="detailPrize">커피 쿠폰</p>
|
type="checkbox"
|
||||||
|
id="agreeTerms"
|
||||||
|
class="form-check-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<label for="agreeTerms" class="form-check-label">
|
||||||
|
이벤트 약관 및 개인정보 처리방침에 동의합니다
|
||||||
|
<span class="text-kt-red">(필수)</span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button class="header-icon-btn" onclick="window.location.href='10-콘텐츠편집.html'">
|
<a
|
||||||
<span class="material-icons">edit</span>
|
href="#"
|
||||||
</button>
|
class="text-body-small text-kt-red mt-sm inline-block"
|
||||||
|
id="viewTerms"
|
||||||
|
>약관 보기</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<div class="card mb-sm">
|
<!-- Action Buttons -->
|
||||||
<div class="flex items-start gap-md">
|
<section class="mb-2xl">
|
||||||
<span class="material-icons text-kt-red">description</span>
|
<button
|
||||||
<div class="flex-1">
|
id="approveBtn"
|
||||||
<p class="text-body-small text-tertiary mb-xs">이벤트 설명</p>
|
class="btn btn-primary btn-large btn-full mb-sm"
|
||||||
<p class="text-body" id="detailDescription">
|
disabled
|
||||||
SNS를 팔로우하고 커피 쿠폰을 받으세요!<br>
|
>
|
||||||
많은 참여 부탁드립니다.
|
<span class="material-icons">rocket_launch</span>
|
||||||
</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>
|
</button>
|
||||||
</div>
|
<button
|
||||||
</section>
|
id="saveBtn"
|
||||||
|
class="btn btn-secondary btn-large btn-full mb-sm"
|
||||||
|
>
|
||||||
|
<span class="material-icons">save</span>
|
||||||
|
임시저장
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Terms Agreement -->
|
<!-- Bottom Navigation -->
|
||||||
<section class="mb-xl">
|
<div id="bottomNav"></div>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bottom Navigation -->
|
<script src="common.js"></script>
|
||||||
<div id="bottomNav"></div>
|
<script>
|
||||||
</div>
|
// 로그인 확인
|
||||||
|
KTEventApp.Session.requireAuth();
|
||||||
|
|
||||||
<script src="common.js"></script>
|
// Header 생성
|
||||||
<script>
|
const header = KTEventApp.Navigation.createHeader({
|
||||||
// 로그인 확인
|
title: "최종 승인",
|
||||||
KTEventApp.Session.requireAuth();
|
showBack: true,
|
||||||
|
showMenu: false,
|
||||||
|
showProfile: false,
|
||||||
|
});
|
||||||
|
document.getElementById("header").appendChild(header);
|
||||||
|
|
||||||
// Header 생성
|
// Bottom Navigation 생성
|
||||||
const header = KTEventApp.Navigation.createHeader({
|
const bottomNav = KTEventApp.Navigation.createBottomNav("events");
|
||||||
title: '최종 승인',
|
document.getElementById("bottomNav").appendChild(bottomNav);
|
||||||
showBack: true,
|
|
||||||
showMenu: false,
|
|
||||||
showProfile: false
|
|
||||||
});
|
|
||||||
document.getElementById('header').appendChild(header);
|
|
||||||
|
|
||||||
// Bottom Navigation 생성
|
// 저장된 데이터 불러오기
|
||||||
const bottomNav = KTEventApp.Navigation.createBottomNav('events');
|
const recommendation = KTEventApp.Utils.getFromStorage(
|
||||||
document.getElementById('bottomNav').appendChild(bottomNav);
|
"selected_recommendation"
|
||||||
|
) || {
|
||||||
|
title: "SNS 팔로우 이벤트",
|
||||||
|
prize: "커피 쿠폰",
|
||||||
|
};
|
||||||
|
|
||||||
// 저장된 데이터 불러오기
|
// 데이터 표시
|
||||||
const recommendation = KTEventApp.Utils.getFromStorage('selected_recommendation') || {
|
document.getElementById("eventTitle").textContent = recommendation.title;
|
||||||
title: 'SNS 팔로우 이벤트',
|
document.getElementById("detailTitle").textContent = recommendation.title;
|
||||||
prize: '커피 쿠폰'
|
document.getElementById("detailPrize").textContent = recommendation.prize;
|
||||||
};
|
|
||||||
|
|
||||||
// 데이터 표시
|
// 약관 동의 체크박스
|
||||||
document.getElementById('eventTitle').textContent = recommendation.title;
|
document
|
||||||
document.getElementById('detailTitle').textContent = recommendation.title;
|
.getElementById("agreeTerms")
|
||||||
document.getElementById('detailPrize').textContent = recommendation.prize;
|
.addEventListener("change", function (e) {
|
||||||
|
document.getElementById("approveBtn").disabled = !e.target.checked;
|
||||||
|
});
|
||||||
|
|
||||||
// 약관 동의 체크박스
|
// 약관 보기
|
||||||
document.getElementById('agreeTerms').addEventListener('change', function(e) {
|
document
|
||||||
document.getElementById('approveBtn').disabled = !e.target.checked;
|
.getElementById("viewTerms")
|
||||||
});
|
.addEventListener("click", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
// 약관 보기
|
KTEventApp.Feedback.showModal({
|
||||||
document.getElementById('viewTerms').addEventListener('click', function(e) {
|
title: "이벤트 약관",
|
||||||
e.preventDefault();
|
content: `
|
||||||
KTEventApp.Feedback.showModal({
|
|
||||||
title: '이벤트 약관',
|
|
||||||
content: `
|
|
||||||
<div class="p-md" style="max-height: 400px; overflow-y: auto;">
|
<div class="p-md" style="max-height: 400px; overflow-y: auto;">
|
||||||
<h4 class="text-headline mb-md">제1조 (목적)</h4>
|
<h4 class="text-headline mb-md">제1조 (목적)</h4>
|
||||||
<p class="text-body-small mb-lg">
|
<p class="text-body-small mb-lg">
|
||||||
@ -231,29 +299,32 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: '확인',
|
text: "확인",
|
||||||
variant: 'primary',
|
variant: "primary",
|
||||||
onClick: function() {
|
onClick: function () {
|
||||||
this.closest('.modal-backdrop').remove();
|
this.closest(".modal-backdrop").remove();
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 배포하기 버튼
|
// 배포하기 버튼
|
||||||
document.getElementById('approveBtn').addEventListener('click', function() {
|
document
|
||||||
const button = this;
|
.getElementById("approveBtn")
|
||||||
button.disabled = true;
|
.addEventListener("click", function () {
|
||||||
button.innerHTML = '<span class="material-icons">hourglass_empty</span> 배포 중...';
|
const button = this;
|
||||||
|
button.disabled = true;
|
||||||
|
button.innerHTML =
|
||||||
|
'<span class="material-icons">hourglass_empty</span> 배포 중...';
|
||||||
|
|
||||||
// 배포 시뮬레이션
|
// 배포 시뮬레이션
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// 성공 모달 표시
|
// 성공 모달 표시
|
||||||
const successModal = KTEventApp.Feedback.showModal({
|
const successModal = KTEventApp.Feedback.showModal({
|
||||||
content: `
|
content: `
|
||||||
<div class="p-xl text-center">
|
<div class="p-xl text-center">
|
||||||
<span class="material-icons" style="font-size: 80px; color: var(--color-success);">check_circle</span>
|
<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>
|
<h3 class="text-title-large mt-md mb-sm">배포 완료!</h3>
|
||||||
@ -270,27 +341,27 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`,
|
||||||
|
});
|
||||||
|
}, 2000);
|
||||||
});
|
});
|
||||||
}, 2000);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 임시저장 버튼
|
// 임시저장 버튼
|
||||||
document.getElementById('saveBtn').addEventListener('click', function() {
|
document.getElementById("saveBtn").addEventListener("click", function () {
|
||||||
// 현재 데이터 저장
|
// 현재 데이터 저장
|
||||||
const draftData = {
|
const draftData = {
|
||||||
...recommendation,
|
...recommendation,
|
||||||
savedAt: new Date().toISOString()
|
savedAt: new Date().toISOString(),
|
||||||
};
|
};
|
||||||
|
|
||||||
KTEventApp.Utils.saveToStorage('event_draft', draftData);
|
KTEventApp.Utils.saveToStorage("event_draft", draftData);
|
||||||
KTEventApp.Feedback.showToast('임시저장되었습니다');
|
KTEventApp.Feedback.showToast("임시저장되었습니다");
|
||||||
});
|
});
|
||||||
|
|
||||||
// 이전으로 버튼
|
// 이전으로 버튼
|
||||||
document.getElementById('backBtn').addEventListener('click', function() {
|
document.getElementById("backBtn").addEventListener("click", function () {
|
||||||
window.history.back();
|
window.history.back();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user