mirror of
https://github.com/ktds-dg0501/kt-event-marketing.git
synced 2025-12-06 06:46:25 +00:00
edit prototype
This commit is contained in:
cherry2250
parent
d4728c0078
commit
debf4be7c6
@ -1,214 +1,363 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - AI트렌드분석결과">
|
||||
<title>AI 트렌드 분석 - KT 이벤트 마케팅</title>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - AI트렌드분석결과"
|
||||
/>
|
||||
<title>AI 트렌드 분석 - KT 이벤트 마케팅</title>
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="css/common.css" />
|
||||
|
||||
<!-- Fonts -->
|
||||
<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>
|
||||
<!-- Skip Link -->
|
||||
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
||||
<!-- Fonts -->
|
||||
<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>
|
||||
<!-- Skip Link -->
|
||||
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
||||
|
||||
<!-- App Wrapper -->
|
||||
<div class="app-wrapper">
|
||||
<!-- Top App Bar -->
|
||||
<header class="app-bar">
|
||||
<button class="app-bar__back" aria-label="뒤로가기" onclick="window.history.back()">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
</button>
|
||||
<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>
|
||||
<!-- App Wrapper -->
|
||||
<div class="app-wrapper">
|
||||
<!-- Top App Bar -->
|
||||
<header class="app-bar">
|
||||
<button
|
||||
class="app-bar__back"
|
||||
aria-label="뒤로가기"
|
||||
onclick="window.history.back()"
|
||||
>
|
||||
<span class="material-icons">arrow_back</span>
|
||||
</button>
|
||||
<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 id="main-content" class="app-content">
|
||||
<div class="container" style="max-width: 500px; margin: 0 auto; padding-top: 24px;">
|
||||
<!-- Progress Section -->
|
||||
<div style="margin-bottom: 32px;">
|
||||
<div class="body-m" style="margin-bottom: 8px; font-weight: 600;">단계 2/6: 트렌드 분석</div>
|
||||
<div style="display: flex; gap: 4px;">
|
||||
<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>
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" class="app-content">
|
||||
<div
|
||||
class="container"
|
||||
style="max-width: 500px; margin: 0 auto; padding-top: 24px"
|
||||
>
|
||||
<!-- Progress Section -->
|
||||
<div style="margin-bottom: 32px">
|
||||
<div class="body-m" style="margin-bottom: 8px; font-weight: 600">
|
||||
단계 2/6: 트렌드 분석
|
||||
</div>
|
||||
<div style="display: flex; gap: 4px">
|
||||
<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>
|
||||
|
||||
<!-- AI Analysis Loading -->
|
||||
<div id="loadingSection" style="text-align: center; padding: 40px 0;">
|
||||
<div class="spinner" style="margin: 0 auto 24px;"></div>
|
||||
<h2 class="h3" style="margin-bottom: 8px;">🤖 AI가 분석중입니다...</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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- AI Analysis Loading -->
|
||||
<div id="loadingSection" style="text-align: center; padding: 40px 0">
|
||||
<div class="spinner" style="margin: 0 auto 24px"></div>
|
||||
<h2 class="h3" style="margin-bottom: 8px">
|
||||
🤖 AI가 분석중입니다...
|
||||
</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;">
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<div class="body-m text-muted">업종</div>
|
||||
<div class="body-m" style="font-weight: 600;" id="businessType">-</div>
|
||||
<div class="card" style="padding: 16px">
|
||||
<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" style="font-weight: 600;" id="location">-</div>
|
||||
<div class="body-m text-muted">업종</div>
|
||||
<div
|
||||
class="body-m"
|
||||
style="font-weight: 600"
|
||||
id="businessType"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
|
||||
<div class="body-m text-muted">시즌</div>
|
||||
<div class="body-m" style="font-weight: 600;" id="season">-</div>
|
||||
<div class="body-m text-muted">지역</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>
|
||||
|
||||
<!-- Trends -->
|
||||
<div style="margin-bottom: 32px;">
|
||||
<h3 class="body-l" style="font-weight: 700; margin-bottom: 16px;">주요 트렌드</h3>
|
||||
<!-- Trends -->
|
||||
<div style="margin-bottom: 32px">
|
||||
<h3 class="body-l" style="font-weight: 700; margin-bottom: 16px">
|
||||
주요 트렌드
|
||||
</h3>
|
||||
|
||||
<div id="trendsList">
|
||||
<!-- 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 id="trendsList">
|
||||
<!-- Trends will be dynamically added here -->
|
||||
</div>
|
||||
<div class="body-m text-muted">예상 성공률 (동일 업종 평균 대비)</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>
|
||||
|
||||
<!-- 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>
|
||||
</main>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
<!-- Scripts -->
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const loadingSection = document.getElementById('loadingSection');
|
||||
const resultsSection = document.getElementById('resultsSection');
|
||||
const progressFill = document.getElementById('progressFill');
|
||||
const progressText = document.getElementById('progressText');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const retryBtn = document.getElementById('retryBtn');
|
||||
const loadingSection = document.getElementById("loadingSection");
|
||||
const resultsSection = document.getElementById("resultsSection");
|
||||
const progressFill = document.getElementById("progressFill");
|
||||
const progressText = document.getElementById("progressText");
|
||||
const nextBtn = document.getElementById("nextBtn");
|
||||
const retryBtn = document.getElementById("retryBtn");
|
||||
|
||||
// 상태 로드
|
||||
window.AppState.load();
|
||||
const store = window.AppState.store;
|
||||
const event = window.AppState.currentEvent;
|
||||
// 상태 로드
|
||||
window.AppState.load();
|
||||
const store = window.AppState.store;
|
||||
const event = window.AppState.currentEvent;
|
||||
|
||||
// 매장 정보가 없으면 이전 화면으로
|
||||
if (!store) {
|
||||
Toast.error('매장 정보를 먼저 등록해주세요.');
|
||||
setTimeout(() => {
|
||||
window.location.href = '02-매장정보등록.html';
|
||||
}, 1000);
|
||||
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);
|
||||
// 매장 정보가 없으면 이전 화면으로
|
||||
if (!store) {
|
||||
Toast.error("매장 정보를 먼저 등록해주세요.");
|
||||
setTimeout(() => {
|
||||
window.location.href = "02-매장정보등록.html";
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 분석 결과 표시
|
||||
function showResults() {
|
||||
// 로딩 숨기기
|
||||
loadingSection.style.display = 'none';
|
||||
// AI 분석 시뮬레이션
|
||||
let progress = 0;
|
||||
const analysisSteps = [
|
||||
{ progress: 20, text: "업종 데이터 수집 중..." },
|
||||
{ progress: 40, text: "지역 트렌드 분석 중..." },
|
||||
{ progress: 60, text: "시즌 패턴 학습 중..." },
|
||||
{ progress: 80, text: "최적 전략 계산 중..." },
|
||||
{ progress: 100, text: "분석 완료!" },
|
||||
];
|
||||
|
||||
// 매장 정보 표시
|
||||
document.getElementById('storeName').textContent = store.name || '-';
|
||||
document.getElementById('businessType').textContent = store.businessTypeName || '-';
|
||||
let currentStep = 0;
|
||||
|
||||
const addressParts = store.address ? store.address.split(' ') : [];
|
||||
const locationText = addressParts.slice(0, 3).join(' ') || '-';
|
||||
document.getElementById('location').textContent = locationText;
|
||||
function updateProgress() {
|
||||
if (currentStep < analysisSteps.length) {
|
||||
const step = analysisSteps[currentStep];
|
||||
progressFill.style.width = step.progress + "%";
|
||||
progressText.textContent = step.text;
|
||||
currentStep++;
|
||||
|
||||
// 현재 시즌 계산
|
||||
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}월)`;
|
||||
// 랜덤한 시간 간격으로 진행 (0.5~1초)
|
||||
const delay = 500 + Math.random() * 500;
|
||||
setTimeout(updateProgress, delay);
|
||||
} else {
|
||||
// 분석 완료
|
||||
setTimeout(showResults, 500);
|
||||
}
|
||||
}
|
||||
|
||||
// 트렌드 데이터 생성 (업종별 트렌드 시뮬레이션)
|
||||
const trends = generateTrends(store.businessType, season, event.purpose);
|
||||
// 분석 결과 표시
|
||||
function showResults() {
|
||||
// 로딩 숨기기
|
||||
loadingSection.style.display = "none";
|
||||
|
||||
// 트렌드 렌더링
|
||||
const trendsList = document.getElementById('trendsList');
|
||||
trendsList.innerHTML = trends.map((trend, index) => `
|
||||
// 매장 정보 표시
|
||||
document.getElementById("storeName").textContent = store.name || "-";
|
||||
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="card" style="padding: 16px; transition: all 0.3s ease;">
|
||||
<div style="display: flex; gap: 12px;">
|
||||
@ -225,116 +374,194 @@
|
||||
</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);
|
||||
document.getElementById('successRate').textContent = `${successRate}% 🎯`;
|
||||
function calculateSuccessRate(businessType, purpose, trends) {
|
||||
let baseRate = 70;
|
||||
|
||||
// 분석 결과 저장
|
||||
event.trendAnalysis = {
|
||||
trends: trends,
|
||||
successRate: successRate,
|
||||
analyzedAt: new Date().toISOString()
|
||||
};
|
||||
window.AppState.save();
|
||||
// 업종별 기본 성공률
|
||||
const businessRates = {
|
||||
restaurant: 75,
|
||||
cafe: 78,
|
||||
retail: 72,
|
||||
beauty: 80,
|
||||
service: 70,
|
||||
};
|
||||
|
||||
// 결과 섹션 표시 (페이드인)
|
||||
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% 상승' }
|
||||
]
|
||||
if (businessRates[businessType]) {
|
||||
baseRate = businessRates[businessType];
|
||||
}
|
||||
};
|
||||
|
||||
// 기본 트렌드 (업종/시즌이 매칭되지 않을 경우)
|
||||
const defaultTrends = [
|
||||
{ emoji: '1️⃣', title: '할인 이벤트 선호', recommendation: '가격 할인 경품 추천', description: '소비자 가격 민감도 증가, 할인 이벤트 참여율 높음' },
|
||||
{ emoji: '2️⃣', title: '모바일 접근성 중요', recommendation: 'QR코드 참여방식', description: '모바일 결제 증가, 간편한 참여 방법 선호' },
|
||||
{ emoji: '3️⃣', title: '후기 공유 활발', recommendation: '리뷰 이벤트 연계', description: 'SNS 리뷰 작성 유도로 바이럴 효과 기대' }
|
||||
];
|
||||
// 목적별 가중치
|
||||
const purposeBonus = {
|
||||
new_customer: 3,
|
||||
repeat_visit: 5,
|
||||
sales_increase: 0,
|
||||
brand_awareness: -2,
|
||||
};
|
||||
|
||||
// 업종과 시즌에 맞는 트렌드 반환
|
||||
const seasonKey = season === '봄' ? 'spring' : season === '여름' ? 'summer' : season === '가을' ? 'fall' : 'winter';
|
||||
if (purposeBonus[purpose] !== undefined) {
|
||||
baseRate += purposeBonus[purpose];
|
||||
}
|
||||
|
||||
if (trendData[businessType] && trendData[businessType][seasonKey]) {
|
||||
return trendData[businessType][seasonKey];
|
||||
} else if (trendData[businessType]) {
|
||||
// 해당 시즌 데이터가 없으면 겨울 데이터 사용
|
||||
return trendData[businessType].winter || defaultTrends;
|
||||
} else {
|
||||
return defaultTrends;
|
||||
}
|
||||
}
|
||||
// 트렌드 개수에 따른 보너스
|
||||
baseRate += trends.length;
|
||||
|
||||
// 성공률 계산
|
||||
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];
|
||||
return Math.min(95, Math.max(65, baseRate));
|
||||
}
|
||||
|
||||
// 목적별 가중치
|
||||
const purposeBonus = {
|
||||
new_customer: 3,
|
||||
repeat_visit: 5,
|
||||
sales_increase: 0,
|
||||
brand_awareness: -2
|
||||
};
|
||||
// 트렌드 상세 정보 표시
|
||||
window.showTrendDetail = function (index) {
|
||||
const trends = event.trendAnalysis.trends;
|
||||
if (!trends || !trends[index]) return;
|
||||
|
||||
if (purposeBonus[purpose] !== undefined) {
|
||||
baseRate += purposeBonus[purpose];
|
||||
}
|
||||
const trend = trends[index];
|
||||
|
||||
// 트렌드 개수에 따른 보너스
|
||||
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(`
|
||||
BottomSheet.show(`
|
||||
<div style="padding: 8px 0;">
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<div style="font-size: 48px; margin-bottom: 8px;">${trend.emoji}</div>
|
||||
@ -352,65 +579,66 @@
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
};
|
||||
};
|
||||
|
||||
// 재시도
|
||||
window.retryAnalysis = function() {
|
||||
// 결과 숨기기
|
||||
resultsSection.style.display = 'none';
|
||||
resultsSection.style.opacity = '0';
|
||||
retryBtn.style.display = 'none';
|
||||
// 재시도
|
||||
window.retryAnalysis = function () {
|
||||
// 결과 숨기기
|
||||
resultsSection.style.display = "none";
|
||||
resultsSection.style.opacity = "0";
|
||||
retryBtn.style.display = "none";
|
||||
|
||||
// 로딩 다시 표시
|
||||
loadingSection.style.display = 'block';
|
||||
currentStep = 0;
|
||||
progress = 0;
|
||||
progressFill.style.width = '0%';
|
||||
progressText.textContent = '분석 시작 중...';
|
||||
// 로딩 다시 표시
|
||||
loadingSection.style.display = "block";
|
||||
currentStep = 0;
|
||||
progress = 0;
|
||||
progressFill.style.width = "0%";
|
||||
progressText.textContent = "분석 시작 중...";
|
||||
|
||||
// 분석 재시작
|
||||
setTimeout(updateProgress, 500);
|
||||
};
|
||||
// 분석 재시작
|
||||
setTimeout(updateProgress, 500);
|
||||
};
|
||||
|
||||
// 다음 버튼
|
||||
nextBtn.addEventListener('click', function() {
|
||||
Loading.show('경품 추천 준비 중...');
|
||||
setTimeout(() => {
|
||||
window.location.href = '05-AI경품추천.html';
|
||||
}, 800);
|
||||
});
|
||||
// 다음 버튼
|
||||
nextBtn.addEventListener("click", function () {
|
||||
Loading.show("경품 추천 준비 중...");
|
||||
setTimeout(() => {
|
||||
window.location.href = "05-AI경품추천.html";
|
||||
}, 800);
|
||||
});
|
||||
|
||||
// 페이지 로드 시 분석 시작
|
||||
setTimeout(updateProgress, 1000);
|
||||
// 페이지 로드 시 분석 시작
|
||||
setTimeout(updateProgress, 1000);
|
||||
|
||||
console.log('AI트렌드분석결과 페이지 로드 완료');
|
||||
})();
|
||||
</script>
|
||||
console.log("AI트렌드분석결과 페이지 로드 완료");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.trend-card .card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.trend-number {
|
||||
font-size: 24px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
<style>
|
||||
.trend-card .card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary-main);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#progressText {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
.trend-number {
|
||||
font-size: 24px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#progressText {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user