edit prototype
This commit is contained in:
cherry2250
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user