mirror of
https://github.com/ktds-dg0501/kt-event-marketing.git
synced 2025-12-06 05:26:23 +00:00
edit prototype
This commit is contained in:
cherry2250
parent
50786d2b85
commit
c855bddc0a
BIN
.playwright-mcp/05-bottomsheet-opened.png
Normal file
BIN
.playwright-mcp/05-bottomsheet-opened.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
.playwright-mcp/05-card-selected.png
Normal file
BIN
.playwright-mcp/05-card-selected.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
.playwright-mcp/05-initial-view.png
Normal file
BIN
.playwright-mcp/05-initial-view.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
.playwright-mcp/06-1-redirect-issue.png
Normal file
BIN
.playwright-mcp/06-1-redirect-issue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
.playwright-mcp/06-initial-view.png
Normal file
BIN
.playwright-mcp/06-initial-view.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
.playwright-mcp/06-selected-state.png
Normal file
BIN
.playwright-mcp/06-selected-state.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
540
design/uiux/prototype/05-이벤트목적선택.html
Normal file
540
design/uiux/prototype/05-이벤트목적선택.html
Normal file
@ -0,0 +1,540 @@
|
||||
<!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 기반 소상공인 이벤트 자동 생성 서비스 - 이벤트목적선택">
|
||||
<title>이벤트 목적 선택 - KT 이벤트 마케팅</title>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- App Wrapper -->
|
||||
<div class="app-wrapper">
|
||||
<!-- Top App Bar -->
|
||||
<header class="app-bar">
|
||||
<button class="app-bar__back" aria-label="닫기" onclick="confirmClose()">
|
||||
<span class="material-icons">close</span>
|
||||
</button>
|
||||
<h1 class="app-bar__title">새 이벤트 기획</h1>
|
||||
</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;">단계 1/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-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 style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instructions -->
|
||||
<div style="text-align: center; margin-bottom: 32px;">
|
||||
<h2 class="h2" style="margin-bottom: 8px;">이벤트 목적을 선택하세요</h2>
|
||||
<p class="body-m text-muted">선택한 목적에 맞춰 AI가 최적의 이벤트를 기획합니다</p>
|
||||
</div>
|
||||
|
||||
<!-- Purpose Options -->
|
||||
<div id="purposeOptions" style="margin-bottom: 32px;">
|
||||
<!-- New Customer Acquisition -->
|
||||
<label class="purpose-card" for="purpose1" data-purpose="new_customer">
|
||||
<input
|
||||
type="radio"
|
||||
name="purpose"
|
||||
id="purpose1"
|
||||
value="new_customer"
|
||||
class="purpose-radio"
|
||||
>
|
||||
<div class="purpose-card__content">
|
||||
<button class="purpose-card__info-btn" data-purpose="new_customer" aria-label="신규고객 유치 상세정보">
|
||||
<span class="material-icons">info</span>
|
||||
</button>
|
||||
<div class="purpose-card__icon">👤</div>
|
||||
<div class="purpose-card__title">신규고객 유치</div>
|
||||
<div class="purpose-card__description">새로운 고객 확보</div>
|
||||
<div class="purpose-card__effect">예상효과: +30%</div>
|
||||
<div class="purpose-card__check">
|
||||
<span class="material-icons">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<!-- Repeat Visit -->
|
||||
<label class="purpose-card" for="purpose2" data-purpose="repeat_visit">
|
||||
<input
|
||||
type="radio"
|
||||
name="purpose"
|
||||
id="purpose2"
|
||||
value="repeat_visit"
|
||||
class="purpose-radio"
|
||||
>
|
||||
<div class="purpose-card__content">
|
||||
<button class="purpose-card__info-btn" data-purpose="repeat_visit" aria-label="재방문 유도 상세정보">
|
||||
<span class="material-icons">info</span>
|
||||
</button>
|
||||
<div class="purpose-card__icon">🔄</div>
|
||||
<div class="purpose-card__title">재방문 유도</div>
|
||||
<div class="purpose-card__description">기존 고객 재방문</div>
|
||||
<div class="purpose-card__effect">예상효과: +25%</div>
|
||||
<div class="purpose-card__check">
|
||||
<span class="material-icons">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<!-- Sales Increase -->
|
||||
<label class="purpose-card" for="purpose3" data-purpose="sales_increase">
|
||||
<input
|
||||
type="radio"
|
||||
name="purpose"
|
||||
id="purpose3"
|
||||
value="sales_increase"
|
||||
class="purpose-radio"
|
||||
>
|
||||
<div class="purpose-card__content">
|
||||
<button class="purpose-card__info-btn" data-purpose="sales_increase" aria-label="매출 증대 상세정보">
|
||||
<span class="material-icons">info</span>
|
||||
</button>
|
||||
<div class="purpose-card__icon">💰</div>
|
||||
<div class="purpose-card__title">매출 증대</div>
|
||||
<div class="purpose-card__description">단기 매출 향상</div>
|
||||
<div class="purpose-card__effect">예상효과: +40%</div>
|
||||
<div class="purpose-card__check">
|
||||
<span class="material-icons">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<!-- Brand Awareness -->
|
||||
<label class="purpose-card" for="purpose4" data-purpose="brand_awareness">
|
||||
<input
|
||||
type="radio"
|
||||
name="purpose"
|
||||
id="purpose4"
|
||||
value="brand_awareness"
|
||||
class="purpose-radio"
|
||||
>
|
||||
<div class="purpose-card__content">
|
||||
<button class="purpose-card__info-btn" data-purpose="brand_awareness" aria-label="인지도 향상 상세정보">
|
||||
<span class="material-icons">info</span>
|
||||
</button>
|
||||
<div class="purpose-card__icon">📢</div>
|
||||
<div class="purpose-card__title">인지도 향상</div>
|
||||
<div class="purpose-card__description">브랜드 인지도 제고</div>
|
||||
<div class="purpose-card__effect">예상효과: +50%</div>
|
||||
<div class="purpose-card__check">
|
||||
<span class="material-icons">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Next Button -->
|
||||
<button
|
||||
id="nextBtn"
|
||||
class="btn btn-primary btn-lg btn-block"
|
||||
style="margin-bottom: 32px;"
|
||||
disabled
|
||||
>
|
||||
다음 (AI분석)
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const purposeCards = document.querySelectorAll('.purpose-card');
|
||||
const purposeRadios = document.querySelectorAll('.purpose-radio');
|
||||
const infoButtons = document.querySelectorAll('.purpose-card__info-btn');
|
||||
let selectedPurpose = null;
|
||||
|
||||
// Purpose 상세 설명 데이터
|
||||
const purposeDetails = {
|
||||
new_customer: {
|
||||
title: '신규고객 유치',
|
||||
icon: '👤',
|
||||
description: '새로운 고객을 끌어들이고 고객 기반을 확장합니다.',
|
||||
benefits: [
|
||||
'새로운 잠재고객 발굴',
|
||||
'고객 기반 확대',
|
||||
'시장 점유율 증가'
|
||||
],
|
||||
strategies: [
|
||||
'할인 쿠폰 제공',
|
||||
'SNS 바이럴 마케팅',
|
||||
'신규 고객 전용 특전'
|
||||
],
|
||||
expectedEffect: '신규 고객 +30%',
|
||||
successRate: '85%'
|
||||
},
|
||||
repeat_visit: {
|
||||
title: '재방문 유도',
|
||||
icon: '🔄',
|
||||
description: '기존 고객의 재방문을 유도하여 충성도를 높입니다.',
|
||||
benefits: [
|
||||
'고객 충성도 향상',
|
||||
'안정적 매출 확보',
|
||||
'단골 고객 증가'
|
||||
],
|
||||
strategies: [
|
||||
'재방문 쿠폰 발급',
|
||||
'포인트 적립 이벤트',
|
||||
'멤버십 혜택 강화'
|
||||
],
|
||||
expectedEffect: '재방문율 +25%',
|
||||
successRate: '90%'
|
||||
},
|
||||
sales_increase: {
|
||||
title: '매출 증대',
|
||||
icon: '💰',
|
||||
description: '단기간에 매출을 극대화하는 이벤트를 진행합니다.',
|
||||
benefits: [
|
||||
'즉각적인 매출 증가',
|
||||
'재고 소진 가속화',
|
||||
'현금 흐름 개선'
|
||||
],
|
||||
strategies: [
|
||||
'시즌 특가 행사',
|
||||
'묶음 할인 판매',
|
||||
'한정 수량 프로모션'
|
||||
],
|
||||
expectedEffect: '매출 +40%',
|
||||
successRate: '80%'
|
||||
},
|
||||
brand_awareness: {
|
||||
title: '인지도 향상',
|
||||
icon: '📢',
|
||||
description: '브랜드 인지도를 높여 장기적인 성장 기반을 마련합니다.',
|
||||
benefits: [
|
||||
'브랜드 인지도 상승',
|
||||
'입소문 효과',
|
||||
'미디어 노출 증가'
|
||||
],
|
||||
strategies: [
|
||||
'SNS 해시태그 챌린지',
|
||||
'이벤트 사진 공유',
|
||||
'인플루언서 협업'
|
||||
],
|
||||
expectedEffect: '인지도 +50%',
|
||||
successRate: '75%'
|
||||
}
|
||||
};
|
||||
|
||||
// Info 버튼 클릭 이벤트
|
||||
infoButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const purpose = this.dataset.purpose;
|
||||
if (purpose) {
|
||||
showPurposeDetails(purpose);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 카드 선택 이벤트
|
||||
purposeCards.forEach(card => {
|
||||
// 카드 클릭
|
||||
card.addEventListener('click', function(e) {
|
||||
// info 버튼 클릭 시에는 카드 선택하지 않음
|
||||
if (e.target.closest('.purpose-card__info-btn')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const radio = this.querySelector('.purpose-radio');
|
||||
if (radio) {
|
||||
radio.checked = true;
|
||||
handlePurposeSelection(radio.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 라디오 버튼 변경 이벤트
|
||||
purposeRadios.forEach(radio => {
|
||||
radio.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
handlePurposeSelection(this.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 목적 선택 처리
|
||||
function handlePurposeSelection(value) {
|
||||
selectedPurpose = value;
|
||||
console.log('선택된 목적:', value);
|
||||
|
||||
// 모든 카드에서 selected 클래스 제거
|
||||
purposeCards.forEach(card => {
|
||||
card.classList.remove('selected');
|
||||
});
|
||||
|
||||
// 선택된 카드에 selected 클래스 추가
|
||||
const selectedCard = document.querySelector(`[data-purpose="${value}"]`);
|
||||
if (selectedCard) {
|
||||
selectedCard.classList.add('selected');
|
||||
}
|
||||
|
||||
// 다음 버튼 활성화
|
||||
nextBtn.disabled = false;
|
||||
nextBtn.style.opacity = '1';
|
||||
nextBtn.style.cursor = 'pointer';
|
||||
console.log('다음 버튼 활성화됨');
|
||||
|
||||
// 선택 완료 피드백
|
||||
Toast.success(`${purposeDetails[value].title}이(가) 선택되었습니다.`);
|
||||
|
||||
// 다음 단계 프리페치 시뮬레이션
|
||||
console.log('다음 단계 데이터 프리페치 중...', value);
|
||||
}
|
||||
|
||||
// 상세 정보 표시 (바텀시트)
|
||||
function showPurposeDetails(purpose) {
|
||||
const details = purposeDetails[purpose];
|
||||
if (!details) return;
|
||||
|
||||
BottomSheet.show(`
|
||||
<div style="padding: 8px 0;">
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<div style="font-size: 48px; margin-bottom: 8px;">${details.icon}</div>
|
||||
<h3 class="h3">${details.title}</h3>
|
||||
<p class="body-m text-muted" style="margin-top: 8px;">${details.description}</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 12px;">주요 혜택</h4>
|
||||
<ul style="margin-left: 20px;">
|
||||
${details.benefits.map(b => `<li class="body-m" style="margin-bottom: 8px;">${b}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 12px;">추천 전략</h4>
|
||||
<ul style="margin-left: 20px;">
|
||||
${details.strategies.map(s => `<li class="body-m" style="margin-bottom: 8px;">${s}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding: 16px; background: var(--color-secondary-light);">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">
|
||||
${details.expectedEffect}
|
||||
</div>
|
||||
<div class="body-s text-muted">
|
||||
성공률: ${details.successRate}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// 다음 버튼 클릭
|
||||
nextBtn.addEventListener('click', function() {
|
||||
if (!selectedPurpose) {
|
||||
Toast.error('이벤트 목적을 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 이벤트 정보 저장
|
||||
const eventData = {
|
||||
id: Utils.generateId(),
|
||||
purpose: selectedPurpose,
|
||||
purposeDetails: purposeDetails[selectedPurpose],
|
||||
createdAt: new Date().toISOString(),
|
||||
status: 'planning'
|
||||
};
|
||||
|
||||
window.AppState.currentEvent = eventData;
|
||||
window.AppState.save();
|
||||
|
||||
// AI 이벤트 유형 추천 화면으로 이동
|
||||
Loading.show('AI 이벤트 유형 분석 중...');
|
||||
setTimeout(() => {
|
||||
window.location.href = '06-AI이벤트유형추천.html';
|
||||
}, 800);
|
||||
});
|
||||
|
||||
// 닫기 확인
|
||||
window.confirmClose = function() {
|
||||
Modal.confirm(
|
||||
'이벤트 기획 종료',
|
||||
'현재까지 입력한 내용이 저장되지 않습니다. 정말 종료하시겠습니까?',
|
||||
function() {
|
||||
window.location.href = '21.5-홈.html';
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
console.log('이벤트목적선택 페이지 로드 완료');
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Purpose Card Styles */
|
||||
.purpose-card {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.purpose-radio {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.purpose-card__content {
|
||||
padding: 20px;
|
||||
border: 2px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-white);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.purpose-card:hover .purpose-card__content {
|
||||
border-color: var(--color-primary-main);
|
||||
background: var(--color-primary-light);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.purpose-card.selected .purpose-card__content {
|
||||
border-color: var(--color-primary-main);
|
||||
border-width: 3px;
|
||||
background: var(--color-primary-light);
|
||||
box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.1);
|
||||
}
|
||||
|
||||
.purpose-card__icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.purpose-card__title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--color-gray-900);
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.purpose-card__description {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.purpose-card__effect {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-secondary-main);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.purpose-card__check {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.purpose-card__check .material-icons {
|
||||
color: var(--color-primary-main);
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.purpose-card.selected .purpose-card__check {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Info Button Styles */
|
||||
.purpose-card__info-btn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: var(--color-white);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.purpose-card__info-btn:hover {
|
||||
background: var(--color-secondary-main);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.purpose-card__info-btn:hover .material-icons {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.purpose-card__info-btn .material-icons {
|
||||
font-size: 20px;
|
||||
color: var(--color-secondary-main);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.purpose-card__info-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Active state for touch devices */
|
||||
.purpose-card:active .purpose-card__content {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.purpose-card,
|
||||
.purpose-card__content,
|
||||
.purpose-card__check,
|
||||
.purpose-card__info-btn {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus state for keyboard navigation */
|
||||
.purpose-radio:focus + .purpose-card__content {
|
||||
outline: 2px solid var(--color-secondary-main);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.purpose-card__info-btn:focus {
|
||||
outline: 2px solid var(--color-secondary-main);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
538
design/uiux/prototype/06-1-AI트렌드분석결과.html
Normal file
538
design/uiux/prototype/06-1-AI트렌드분석결과.html
Normal file
@ -0,0 +1,538 @@
|
||||
<!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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</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>
|
||||
|
||||
<!-- 5단계 프로세스 시각화 -->
|
||||
<div id="processSteps" style="margin: 32px 0;">
|
||||
<!-- 단계들이 동적으로 추가됩니다 -->
|
||||
</div>
|
||||
|
||||
<div id="progressBar" style="width: 100%; height: 8px; background: var(--color-gray-200); border-radius: 4px; margin: 24px 0; overflow: hidden;">
|
||||
<div id="progressFill" style="height: 100%; background: var(--color-primary-main); width: 0%; transition: width 0.3s ease;"></div>
|
||||
</div>
|
||||
<div class="body-s text-muted" id="progressText">분석 시작 중...</div>
|
||||
</div>
|
||||
|
||||
<!-- Analysis Results (Hidden initially) -->
|
||||
<div id="resultsSection" style="display: none; opacity: 0; transition: opacity 0.5s ease;">
|
||||
<!-- Store Info -->
|
||||
<div style="margin-bottom: 32px;">
|
||||
<h2 class="h3" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span>📊</span>
|
||||
<span>분석 결과</span>
|
||||
</h2>
|
||||
|
||||
<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="businessType">-</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>
|
||||
|
||||
<!-- 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>
|
||||
<div class="body-m text-muted">예상 성공률 (동일 업종 평균 대비)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Retry Button (Hidden unless error) -->
|
||||
<button
|
||||
id="retryBtn"
|
||||
class="btn btn-secondary btn-md btn-block"
|
||||
style="display: none; margin-bottom: 16px;"
|
||||
onclick="retryAnalysis()"
|
||||
>
|
||||
<span class="material-icons" style="font-size: 20px; margin-right: 8px;">refresh</span>
|
||||
다시 분석하기
|
||||
</button>
|
||||
|
||||
<!-- Next Button -->
|
||||
<button
|
||||
id="nextBtn"
|
||||
class="btn btn-primary btn-lg btn-block"
|
||||
style="margin-bottom: 32px;"
|
||||
>
|
||||
다음 (경품추천)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 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 processSteps = document.getElementById('processSteps');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const retryBtn = document.getElementById('retryBtn');
|
||||
|
||||
// 상태 로드
|
||||
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 분석 단계
|
||||
const analysisSteps = [
|
||||
{ id: 1, progress: 20, text: '업종 데이터 수집 중...', icon: '📊' },
|
||||
{ id: 2, progress: 40, text: '지역 트렌드 분석 중...', icon: '🗺️' },
|
||||
{ id: 3, progress: 60, text: '시즌 패턴 학습 중...', icon: '📅' },
|
||||
{ id: 4, progress: 80, text: '최적 전략 계산 중...', icon: '🧮' },
|
||||
{ id: 5, progress: 100, text: '분석 완료!', icon: '✅' }
|
||||
];
|
||||
|
||||
let currentStep = 0;
|
||||
|
||||
// 프로세스 단계 렌더링
|
||||
function renderProcessSteps() {
|
||||
processSteps.innerHTML = analysisSteps.map((step, index) => {
|
||||
let statusIcon = '⏳';
|
||||
let statusClass = 'step-waiting';
|
||||
let statusText = '대기';
|
||||
|
||||
if (index < currentStep) {
|
||||
statusIcon = '✅';
|
||||
statusClass = 'step-completed';
|
||||
statusText = '완료';
|
||||
} else if (index === currentStep) {
|
||||
statusIcon = '🔄';
|
||||
statusClass = 'step-progress';
|
||||
statusText = '진행중';
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="process-step ${statusClass}" data-step="${step.id}">
|
||||
<div class="process-step__icon">${statusIcon}</div>
|
||||
<div class="process-step__content">
|
||||
<div class="process-step__title">${step.icon} ${step.text.replace(' 중...', '').replace('!', '')}</div>
|
||||
<div class="process-step__status">${statusText}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 프로그레스 업데이트
|
||||
function updateProgress() {
|
||||
if (currentStep < analysisSteps.length) {
|
||||
const step = analysisSteps[currentStep];
|
||||
|
||||
// 프로그레스 바 업데이트
|
||||
progressFill.style.width = step.progress + '%';
|
||||
progressText.textContent = step.text;
|
||||
|
||||
// 프로세스 단계 시각화 업데이트
|
||||
renderProcessSteps();
|
||||
|
||||
currentStep++;
|
||||
|
||||
// 랜덤한 시간 간격으로 진행 (0.5~1초)
|
||||
const delay = 500 + Math.random() * 500;
|
||||
setTimeout(updateProgress, delay);
|
||||
} else {
|
||||
// 분석 완료
|
||||
setTimeout(showResults, 500);
|
||||
}
|
||||
}
|
||||
|
||||
// 분석 결과 표시
|
||||
function showResults() {
|
||||
// 로딩 숨기기
|
||||
loadingSection.style.display = 'none';
|
||||
|
||||
// 매장 정보 표시
|
||||
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;">
|
||||
<div class="trend-number">${trend.emoji}</div>
|
||||
<div style="flex: 1;">
|
||||
<div class="body-m" style="font-weight: 700; margin-bottom: 4px;">
|
||||
${trend.title}
|
||||
</div>
|
||||
<div class="body-s" style="color: var(--color-secondary-main); margin-bottom: 8px;">
|
||||
→ ${trend.recommendation}
|
||||
</div>
|
||||
<div class="body-s text-muted">${trend.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).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;
|
||||
}
|
||||
}
|
||||
|
||||
// 성공률 계산
|
||||
function calculateSuccessRate(businessType, purpose, trends) {
|
||||
let baseRate = 70;
|
||||
|
||||
// 업종별 기본 성공률
|
||||
const businessRates = {
|
||||
restaurant: 75,
|
||||
cafe: 78,
|
||||
retail: 72,
|
||||
beauty: 80,
|
||||
service: 70
|
||||
};
|
||||
|
||||
if (businessRates[businessType]) {
|
||||
baseRate = businessRates[businessType];
|
||||
}
|
||||
|
||||
// 목적별 가중치
|
||||
const purposeBonus = {
|
||||
new_customer: 3,
|
||||
repeat_visit: 5,
|
||||
sales_increase: 0,
|
||||
brand_awareness: -2
|
||||
};
|
||||
|
||||
if (purposeBonus[purpose] !== undefined) {
|
||||
baseRate += purposeBonus[purpose];
|
||||
}
|
||||
|
||||
// 트렌드 개수에 따른 보너스
|
||||
baseRate += trends.length;
|
||||
|
||||
return Math.min(95, Math.max(65, baseRate));
|
||||
}
|
||||
|
||||
// 트렌드 상세 정보 표시
|
||||
window.showTrendDetail = function(index) {
|
||||
const trends = event.trendAnalysis.trends;
|
||||
if (!trends || !trends[index]) return;
|
||||
|
||||
const trend = trends[index];
|
||||
|
||||
BottomSheet.show(`
|
||||
<div style="padding: 8px 0;">
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<div style="font-size: 48px; margin-bottom: 8px;">${trend.emoji}</div>
|
||||
<h3 class="h3">${trend.title}</h3>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">트렌드 설명</h4>
|
||||
<p class="body-m">${trend.description}</p>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding: 16px; background: var(--color-secondary-light);">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">AI 추천</h4>
|
||||
<p class="body-m" style="color: var(--color-secondary-main);">${trend.recommendation}</p>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
};
|
||||
|
||||
// 재시도
|
||||
window.retryAnalysis = function() {
|
||||
// 결과 숨기기
|
||||
resultsSection.style.display = 'none';
|
||||
resultsSection.style.opacity = '0';
|
||||
retryBtn.style.display = 'none';
|
||||
|
||||
// 로딩 다시 표시
|
||||
loadingSection.style.display = 'block';
|
||||
currentStep = 0;
|
||||
progressFill.style.width = '0%';
|
||||
progressText.textContent = '분석 시작 중...';
|
||||
|
||||
// 단계 초기화
|
||||
renderProcessSteps();
|
||||
|
||||
// 분석 재시작
|
||||
setTimeout(updateProgress, 500);
|
||||
};
|
||||
|
||||
// 다음 버튼
|
||||
nextBtn.addEventListener('click', function() {
|
||||
Loading.show('경품 추천 준비 중...');
|
||||
setTimeout(() => {
|
||||
window.location.href = '07-AI경품추천.html';
|
||||
}, 800);
|
||||
});
|
||||
|
||||
// 초기 렌더링
|
||||
renderProcessSteps();
|
||||
|
||||
// 페이지 로드 시 분석 시작
|
||||
setTimeout(updateProgress, 1000);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* Process Steps */
|
||||
.process-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 12px;
|
||||
background: var(--color-gray-50);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.process-step__icon {
|
||||
font-size: 24px;
|
||||
min-width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.process-step__content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.process-step__title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-700);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.process-step__status {
|
||||
font-size: 12px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* Step States */
|
||||
.step-waiting {
|
||||
background: var(--color-gray-50);
|
||||
}
|
||||
|
||||
.step-waiting .process-step__title {
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
|
||||
.step-progress {
|
||||
background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-white) 100%);
|
||||
border: 2px solid var(--color-secondary-main);
|
||||
animation: pulse-border 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.step-progress .process-step__title {
|
||||
color: var(--color-secondary-main);
|
||||
}
|
||||
|
||||
.step-progress .process-step__status {
|
||||
color: var(--color-secondary-main);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step-completed {
|
||||
background: var(--color-gray-100);
|
||||
}
|
||||
|
||||
.step-completed .process-step__title {
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-border {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
#progressText {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
624
design/uiux/prototype/06-2-이벤트상세정보.html
Normal file
624
design/uiux/prototype/06-2-이벤트상세정보.html
Normal file
@ -0,0 +1,624 @@
|
||||
<!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 기반 소상공인 이벤트 자동 생성 서비스 - 이벤트 상세 정보">
|
||||
<title>이벤트 상세 정보 - KT 이벤트 마케팅</title>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- App Wrapper -->
|
||||
<div class="app-wrapper">
|
||||
<!-- Top App Bar -->
|
||||
<header class="app-bar">
|
||||
<button class="app-bar__back" aria-label="뒤로가기" onclick="history.back()">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="app-bar__title">이벤트 상세 정보</h1>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" class="app-content" style="padding-bottom: 80px;">
|
||||
<div class="container" style="padding-top: 16px;">
|
||||
|
||||
<!-- 헤더 카드 -->
|
||||
<div class="card" style="padding: 24px; margin-bottom: 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
|
||||
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
|
||||
<div style="width: 72px; height: 72px; background: rgba(255, 255, 255, 0.2); border-radius: 18px; display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-icons" style="font-size: 42px; color: white;">tag</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<h2 class="h3" style="color: white; margin-bottom: 8px;">SNS 해시태그 이벤트</h2>
|
||||
<div class="body-s" style="opacity: 0.9;">
|
||||
인스타그램 해시태그 참여로 바이럴 효과 극대화
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; background: rgba(255, 255, 255, 0.25); padding: 8px 16px; border-radius: 16px;">
|
||||
<div style="font-size: 24px; font-weight: 700; line-height: 1;">A</div>
|
||||
<div style="font-size: 11px; opacity: 0.9;">매우높음</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 주요 지표 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2);">
|
||||
<div style="text-align: center;">
|
||||
<div class="body-xs" style="opacity: 0.8; margin-bottom: 4px;">예상 예산</div>
|
||||
<div class="h4" style="color: white; margin: 0;">5만원</div>
|
||||
</div>
|
||||
<div style="text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2);">
|
||||
<div class="body-xs" style="opacity: 0.8; margin-bottom: 4px;">예상 순수익</div>
|
||||
<div class="h4" style="color: white; margin: 0;">+85만원</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<div class="body-xs" style="opacity: 0.8; margin-bottom: 4px;">ROI</div>
|
||||
<div class="h4" style="color: white; margin: 0;">1700%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 탭 메뉴 -->
|
||||
<div class="tab-menu" style="display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--color-gray-200); overflow-x: auto;">
|
||||
<button class="tab-item active" data-tab="overview" onclick="switchTab('overview')">
|
||||
<span class="material-icons" style="font-size: 18px; margin-right: 4px;">info</span>
|
||||
개요
|
||||
</button>
|
||||
<button class="tab-item" data-tab="guide" onclick="switchTab('guide')">
|
||||
<span class="material-icons" style="font-size: 18px; margin-right: 4px;">menu_book</span>
|
||||
실행 가이드
|
||||
</button>
|
||||
<button class="tab-item" data-tab="cost" onclick="switchTab('cost')">
|
||||
<span class="material-icons" style="font-size: 18px; margin-right: 4px;">payments</span>
|
||||
비용 구조
|
||||
</button>
|
||||
<button class="tab-item" data-tab="success" onclick="switchTab('success')">
|
||||
<span class="material-icons" style="font-size: 18px; margin-right: 4px;">stars</span>
|
||||
성공 사례
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 개요 탭 -->
|
||||
<div class="tab-content active" id="tab-overview">
|
||||
|
||||
<!-- 기대 효과 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-primary-main);">trending_up</span>
|
||||
기대 효과
|
||||
</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--color-success-light); border-radius: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">SNS 노출 +400~600%</div>
|
||||
<div class="body-s text-muted">해시태그를 통한 유기적 확산으로 브랜드 노출 극대화</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--color-primary-light); border-radius: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-primary-main); font-size: 20px;">group_add</span>
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">신규 고객 +60~80%</div>
|
||||
<div class="body-s text-muted">SNS를 통한 새로운 고객 유입 및 방문 증가</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--color-warning-light); border-radius: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-warning); font-size: 20px;">campaign</span>
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">브랜드 인지도 +120%</div>
|
||||
<div class="body-s text-muted">바이럴 효과로 지역 내 인지도 상승</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 적합한 매장 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-primary-main);">store</span>
|
||||
적합한 매장
|
||||
</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 18px;">check</span>
|
||||
<span class="body-m">비주얼이 좋은 메뉴를 보유한 매장</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 18px;">check</span>
|
||||
<span class="body-m">20~40대 젊은 층을 타겟으로 하는 매장</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 18px;">check</span>
|
||||
<span class="body-m">카페, 일식당, 양식당 (인스타 특화)</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 18px;">check</span>
|
||||
<span class="body-m">매장 내 포토존 또는 감성적인 공간 보유</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 추천 계절 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-primary-main);">calendar_today</span>
|
||||
추천 계절/시기
|
||||
</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
|
||||
<div style="padding: 16px; border: 2px solid var(--color-primary-main); border-radius: 12px; text-align: center;">
|
||||
<div class="h3" style="margin-bottom: 8px;">🌸 봄</div>
|
||||
<div class="body-s text-muted">벚꽃 시즌 특히 효과적</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main); margin-top: 8px;">추천도 ⭐⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 2px solid var(--color-primary-main); border-radius: 12px; text-align: center;">
|
||||
<div class="h3" style="margin-bottom: 8px;">❄️ 겨울</div>
|
||||
<div class="body-s text-muted">크리스마스 시즌 효과</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main); margin-top: 8px;">추천도 ⭐⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 1px solid var(--color-gray-300); border-radius: 12px; text-align: center;">
|
||||
<div class="h3" style="margin-bottom: 8px;">🧊 여름</div>
|
||||
<div class="body-s text-muted">시원한 메뉴와 연계</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-gray-600); margin-top: 8px;">추천도 ⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 1px solid var(--color-gray-300); border-radius: 12px; text-align: center;">
|
||||
<div class="h3" style="margin-bottom: 8px;">🍁 가을</div>
|
||||
<div class="body-s text-muted">단풍 콘셉트 활용</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-gray-600); margin-top: 8px;">추천도 ⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 실행 가이드 탭 -->
|
||||
<div class="tab-content" id="tab-guide" style="display: none;">
|
||||
|
||||
<!-- 단계별 실행 가이드 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 20px;">5단계 실행 가이드</h3>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">1</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">준비 단계 (1-2일)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 이벤트 이미지 제작 (Canva 무료 활용)</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 해시태그 선정 (매장명 + 이벤트명 + 지역명)</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 참여 조건 명확화</li>
|
||||
<li class="body-s text-muted">✓ 경품 준비</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">2</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">게시 단계 (1일)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 피드 게시: 이벤트 메인 이미지 + 상세 설명</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 스토리 게시: 24시간 노출용 간단 안내</li>
|
||||
<li class="body-s text-muted">✓ 하이라이트 등록: 이벤트 기간 동안 계속 노출</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">3</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">운영 단계 (이벤트 기간)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 매일 오전 9시: 스토리 재업로드</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 댓글 답변: 2시간 이내 응답</li>
|
||||
<li class="body-s text-muted">✓ 참여자 리그램: 하루 3-5건</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">4</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">추첨 단계 (이벤트 종료 후)</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 참여자 목록 엑셀 정리</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 무작위 추첨 (random.org 활용)</li>
|
||||
<li class="body-s text-muted">✓ 당첨자 DM 발송 + 피드 공지</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-badge">5</div>
|
||||
<div class="timeline-content">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">사후 관리</h4>
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 참여 감사 스토리</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 6px;">✓ 이벤트 결과 공유</li>
|
||||
<li class="body-s text-muted">✓ 다음 이벤트 예고</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 체크리스트 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px; background: var(--color-warning-light);">
|
||||
<h3 class="h4" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="color: var(--color-warning);">checklist</span>
|
||||
필수 체크리스트
|
||||
</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">이벤트 이미지 제작 완료</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">해시태그 3개 이상 선정</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">참여 조건 명확 작성</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">경품 준비 완료</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">추첨 방법 결정</span>
|
||||
</label>
|
||||
<label class="form-check" style="background: white; padding: 12px; border-radius: 8px;">
|
||||
<input type="checkbox">
|
||||
<span class="body-m">개인정보 동의 문구 포함</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 비용 구조 탭 -->
|
||||
<div class="tab-content" id="tab-cost" style="display: none;">
|
||||
|
||||
<!-- 비용 상세 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 20px;">비용 구조 상세</h3>
|
||||
|
||||
<div style="margin-bottom: 24px;">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 12px;">총 비용: 50,000원</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--color-gray-50); border-radius: 8px;">
|
||||
<div>
|
||||
<div class="body-m">제작비</div>
|
||||
<div class="body-s text-muted">Canva 무료 템플릿 사용</div>
|
||||
</div>
|
||||
<div class="body-m" style="font-weight: 600;">0원</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--color-gray-50); border-radius: 8px;">
|
||||
<div>
|
||||
<div class="body-m">광고비</div>
|
||||
<div class="body-s text-muted">자체 계정 활용 (무료)</div>
|
||||
</div>
|
||||
<div class="body-m" style="font-weight: 600;">0원</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--color-primary-light); border-radius: 8px;">
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600;">경품비</div>
|
||||
<div class="body-s text-muted">음료 쿠폰 50장 × 1,000원</div>
|
||||
</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main);">50,000원</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 20px; background: var(--color-success-light); border-radius: 12px;">
|
||||
<h4 class="body-m" style="font-weight: 600; margin-bottom: 12px; color: var(--color-success);">예상 수익 분석</h4>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">신규 팔로워</span>
|
||||
<strong class="body-s">100-300명</strong>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">예상 매출 증가</span>
|
||||
<strong class="body-s">500,000-1,500,000원</strong>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">순수익 (원가 30% 제외)</span>
|
||||
<strong class="body-s">300,000-1,300,000원</strong>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; padding-top: 8px; border-top: 2px solid var(--color-success);">
|
||||
<span class="body-m" style="font-weight: 600;">ROI</span>
|
||||
<strong class="body-m" style="font-weight: 700; color: var(--color-success);">600-650%</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 예산별 시뮬레이션 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<h3 class="h4" style="margin-bottom: 16px;">예산별 시뮬레이션</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="padding: 16px; border: 2px solid var(--color-primary-main); border-radius: 12px; background: var(--color-primary-light);">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">추천 예산: 50,000원</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 8px;">경품 50개 제공</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">예상 순수익</span>
|
||||
<strong style="color: var(--color-success);">+850,000원</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 1px solid var(--color-gray-300); border-radius: 12px;">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">최소 예산: 30,000원</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 8px;">경품 30개 제공</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">예상 순수익</span>
|
||||
<strong style="color: var(--color-success);">+510,000원</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 16px; border: 1px solid var(--color-gray-300); border-radius: 12px;">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">최대 예산: 100,000원</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 8px;">경품 100개 제공</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span class="body-s">예상 순수익</span>
|
||||
<strong style="color: var(--color-success);">+1,650,000원</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 성공 사례 탭 -->
|
||||
<div class="tab-content" id="tab-success" style="display: none;">
|
||||
|
||||
<!-- 성공 사례 1 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
|
||||
<span class="material-icons" style="color: var(--color-warning);">star</span>
|
||||
<h3 class="h4" style="margin: 0;">수원 소재 카페 A</h3>
|
||||
</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 16px;">
|
||||
업종: 카페 | 지역: 수원 | 계절: 봄 (벚꽃 시즌)
|
||||
</div>
|
||||
<div style="padding: 16px; background: var(--color-gray-50); border-radius: 8px; margin-bottom: 16px;">
|
||||
<div class="body-m" style="margin-bottom: 12px; font-weight: 600;">이벤트 내용</div>
|
||||
<div class="body-s text-muted" style="line-height: 1.6;">
|
||||
"벚꽃 라떼 인증샷 이벤트" 진행<br>
|
||||
해시태그 #OO카페벚꽃 #수원카페 #벚꽃라떼<br>
|
||||
팔로우 + 게시물 공유 + 해시태그 3개
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-m" style="margin-bottom: 12px; font-weight: 600;">결과</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
|
||||
<div style="padding: 12px; background: var(--color-success-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">투입 예산</div>
|
||||
<div class="h4" style="color: var(--color-success); margin: 4px 0;">5만원</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-primary-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">참여율</div>
|
||||
<div class="h4" style="color: var(--color-primary-main); margin: 4px 0;">82%</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-warning-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">SNS 확산</div>
|
||||
<div class="h4" style="color: var(--color-warning); margin: 4px 0;">+350%</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-error-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">신규고객</div>
|
||||
<div class="h4" style="color: var(--color-error); margin: 4px 0;">+55%</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 성공 사례 2 -->
|
||||
<section class="card" style="padding: 20px; margin-bottom: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
|
||||
<span class="material-icons" style="color: var(--color-warning);">star</span>
|
||||
<h3 class="h4" style="margin: 0;">강남 소재 일식당 B</h3>
|
||||
</div>
|
||||
<div class="body-s text-muted" style="margin-bottom: 16px;">
|
||||
업종: 일식당 | 지역: 강남 | 계절: 여름
|
||||
</div>
|
||||
<div style="padding: 16px; background: var(--color-gray-50); border-radius: 8px; margin-bottom: 16px;">
|
||||
<div class="body-m" style="margin-bottom: 12px; font-weight: 600;">이벤트 내용</div>
|
||||
<div class="body-s text-muted" style="line-height: 1.6;">
|
||||
"여름 초밥 플레이팅 인증샷 이벤트"<br>
|
||||
해시태그 #OO초밥 #강남맛집 #여름초밥<br>
|
||||
스토리 공유 시 음료 무료 제공
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-m" style="margin-bottom: 12px; font-weight: 600;">결과</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
|
||||
<div style="padding: 12px; background: var(--color-success-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">투입 예산</div>
|
||||
<div class="h4" style="color: var(--color-success); margin: 4px 0;">7만원</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-primary-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">참여율</div>
|
||||
<div class="h4" style="color: var(--color-primary-main); margin: 4px 0;">75%</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-warning-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">SNS 도달</div>
|
||||
<div class="h4" style="color: var(--color-warning); margin: 4px 0;">18,000명</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-error-light); border-radius: 8px; text-align: center;">
|
||||
<div class="body-s text-muted">ROI</div>
|
||||
<div class="h4" style="color: var(--color-error); margin: 4px 0;">1850%</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="bottom-nav" style="padding: 16px; background: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;">
|
||||
<button class="btn btn-primary btn-lg btn-block" onclick="proceedToNext()">
|
||||
<span class="material-icons" style="margin-right: 8px;">arrow_forward</span>
|
||||
이 이벤트로 기획안 만들기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 탭 전환
|
||||
window.switchTab = function(tabName) {
|
||||
// 탭 버튼 활성화
|
||||
document.querySelectorAll('.tab-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
document.querySelector(`.tab-item[data-tab="${tabName}"]`).classList.add('active');
|
||||
|
||||
// 탭 컨텐츠 표시
|
||||
document.querySelectorAll('.tab-content').forEach(content => {
|
||||
content.style.display = 'none';
|
||||
});
|
||||
document.getElementById(`tab-${tabName}`).style.display = 'block';
|
||||
};
|
||||
|
||||
// 다음 단계로 진행
|
||||
window.proceedToNext = function() {
|
||||
Modal.show({
|
||||
title: '🎉 이벤트 유형 확정',
|
||||
body: `
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
|
||||
<span class="material-icons" style="font-size: 48px; color: white;">check_circle</span>
|
||||
</div>
|
||||
<h3 class="h3" style="margin-bottom: 12px;">SNS 해시태그 이벤트</h3>
|
||||
<p class="body-m text-muted" style="margin-bottom: 20px;">
|
||||
이 이벤트 유형으로 AI가<br>
|
||||
경품, 참여방법, 홍보문구를 자동 생성합니다
|
||||
</p>
|
||||
<div class="card" style="padding: 16px; background: var(--color-gray-50); text-align: left;">
|
||||
<div class="body-s" style="margin-bottom: 8px;">
|
||||
<span class="material-icons" style="font-size: 14px; vertical-align: middle; margin-right: 4px; color: var(--color-primary-main);">auto_awesome</span>
|
||||
다음 단계에서 AI가 자동으로:
|
||||
</div>
|
||||
<ul style="list-style: none; padding-left: 20px; margin: 0;">
|
||||
<li class="body-s text-muted" style="margin-bottom: 4px;">✓ 예산에 맞는 경품 추천</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 4px;">✓ 참여 방법 상세 설계</li>
|
||||
<li class="body-s text-muted" style="margin-bottom: 4px;">✓ SNS 홍보 문구 생성</li>
|
||||
<li class="body-s text-muted">✓ 해시태그 추천</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
confirmText: '경품 추천 받기',
|
||||
cancelText: '이벤트 다시 선택',
|
||||
onConfirm: function() {
|
||||
Loading.show('AI가 경품을 추천하고 있습니다...');
|
||||
setTimeout(() => {
|
||||
Loading.hide();
|
||||
window.location.href = '05-AI경품추천.html';
|
||||
}, 2000);
|
||||
},
|
||||
onCancel: function() {
|
||||
window.location.href = '04-1-AI이벤트유형추천.html';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
console.log('이벤트 상세 정보 페이지 로드 완료');
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tab-item {
|
||||
padding: 12px 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-gray-600);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: var(--color-primary-main);
|
||||
border-bottom-color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 2px;
|
||||
background: var(--color-gray-300);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--color-primary-main);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
padding: 12px;
|
||||
background: var(--color-gray-50);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
696
design/uiux/prototype/06-AI이벤트유형추천.html
Normal file
696
design/uiux/prototype/06-AI이벤트유형추천.html
Normal file
@ -0,0 +1,696 @@
|
||||
<!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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- App Wrapper -->
|
||||
<div class="app-wrapper">
|
||||
<!-- Top App Bar -->
|
||||
<header class="app-bar">
|
||||
<button class="app-bar__back" aria-label="뒤로가기" onclick="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="showFilterModal()">
|
||||
<span class="material-icons">tune</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" class="app-content">
|
||||
<div class="container" style="padding-top: 16px;">
|
||||
<!-- Progress Section -->
|
||||
<div style="margin-bottom: 24px;">
|
||||
<div class="body-m" style="margin-bottom: 8px; font-weight: 600;">단계 2/6: AI 이벤트 유형 추천</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>
|
||||
|
||||
<!-- AI 분석 결과 헤더 -->
|
||||
<div class="card" style="padding: 20px; margin-bottom: 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
|
||||
<div style="display: flex; align-items: flex-start; gap: 16px;">
|
||||
<span class="material-icons" style="font-size: 48px;">auto_awesome</span>
|
||||
<div style="flex: 1;">
|
||||
<h2 class="h3" style="color: white; margin-bottom: 8px;">수원왕갈비님을 위한 맞춤 추천</h2>
|
||||
<div class="body-m" style="opacity: 0.95; margin-bottom: 12px;">
|
||||
한식당 · 봄 시즌 · 예산 30만원
|
||||
</div>
|
||||
<div class="body-s" style="opacity: 0.85;">
|
||||
<span class="material-icons" style="font-size: 16px; vertical-align: middle;">lightbulb</span>
|
||||
13가지 이벤트 유형 중 <strong>7가지</strong>가 추천되었습니다
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 태그 필터 칩 -->
|
||||
<div style="margin-bottom: 16px;">
|
||||
<div class="body-s text-muted" style="margin-bottom: 8px;">태그로 필터링</div>
|
||||
<div id="tagFilter" style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<!-- 태그 칩들이 동적으로 추가됩니다 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 정렬 및 보기 옵션 -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
||||
<div class="body-m text-muted">
|
||||
총 <strong id="totalCount" style="color: var(--color-primary-main);">7개</strong> 이벤트
|
||||
</div>
|
||||
<select id="sortSelect" class="form-input" style="width: auto; padding: 8px 32px 8px 12px;">
|
||||
<option value="recommendation">추천순</option>
|
||||
<option value="costEfficiency">가성비 높은 순</option>
|
||||
<option value="difficulty">난이도 낮은 순</option>
|
||||
<option value="budget">예산 낮은 순</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 이벤트 카드 리스트 -->
|
||||
<div id="eventList" style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 80px;">
|
||||
<!-- 이벤트 카드들이 동적으로 추가됩니다 -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="bottom-nav" style="padding: 16px; background: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;">
|
||||
<button class="btn btn-primary btn-lg btn-block" onclick="proceedToNext()" id="proceedBtn" disabled>
|
||||
<span class="material-icons" style="margin-right: 8px;">check_circle</span>
|
||||
선택한 이벤트로 계속하기
|
||||
</button>
|
||||
<div class="body-s text-muted" style="text-align: center; margin-top: 8px;" id="selectionInfo">
|
||||
이벤트를 선택해주세요
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 이벤트 유형 데이터 (design/이벤트설계.md 기반)
|
||||
const eventTypes = [
|
||||
{
|
||||
id: 'sns-hashtag',
|
||||
name: 'SNS 해시태그 이벤트',
|
||||
category: 'digital',
|
||||
icon: 'tag',
|
||||
budget: { min: 50000, max: 100000 },
|
||||
costEfficiency: 17.0,
|
||||
difficulty: 1,
|
||||
recommendationScore: 8.3,
|
||||
estimatedProfit: 850000,
|
||||
estimatedROI: 1700,
|
||||
description: '인스타그램 해시태그 참여로 바이럴 효과 극대화',
|
||||
effects: ['SNS 노출 +400%', '신규 고객 +70%', '브랜드 인지도 +120%'],
|
||||
tags: ['디지털', 'SNS', '바이럴', '저예산'],
|
||||
duration: 14
|
||||
},
|
||||
{
|
||||
id: 'delivery-review',
|
||||
name: '배달앱 리뷰 이벤트',
|
||||
category: 'digital',
|
||||
icon: 'rate_review',
|
||||
budget: { min: 200000, max: 300000 },
|
||||
costEfficiency: 7.4,
|
||||
difficulty: 2,
|
||||
recommendationScore: 8.7,
|
||||
estimatedProfit: 1850000,
|
||||
estimatedROI: 740,
|
||||
description: '배달앱 리뷰 작성 시 혜택 제공으로 온라인 평판 향상',
|
||||
effects: ['평점 상승 +0.8점', '리뷰 수 +100건', '재방문율 +55%'],
|
||||
tags: ['디지털', '배달', '리뷰', '신뢰도'],
|
||||
duration: 30
|
||||
},
|
||||
{
|
||||
id: 'business-card-coupon',
|
||||
name: '명함형 쿠폰 배포',
|
||||
category: 'offline',
|
||||
icon: 'contact_mail',
|
||||
budget: { min: 60000, max: 100000 },
|
||||
costEfficiency: 25.9,
|
||||
difficulty: 1,
|
||||
recommendationScore: 8.9,
|
||||
estimatedProfit: 1685000,
|
||||
estimatedROI: 2592,
|
||||
description: '주변 상가/오피스 대상 명함 쿠폰 배포',
|
||||
effects: ['쿠폰 사용률 15%', '신규 고객 +150명', '재방문율 +60%'],
|
||||
tags: ['오프라인', '쿠폰', '지역마케팅', '최고가성비'],
|
||||
duration: 30
|
||||
},
|
||||
{
|
||||
id: 'table-tent',
|
||||
name: '테이블 텐트 카드',
|
||||
category: 'offline',
|
||||
icon: 'view_in_ar',
|
||||
budget: { min: 20000, max: 30000 },
|
||||
costEfficiency: 25.25,
|
||||
difficulty: 1,
|
||||
recommendationScore: 8.1,
|
||||
estimatedProfit: 505000,
|
||||
estimatedROI: 2525,
|
||||
description: '테이블 위 안내카드로 추가 주문 유도',
|
||||
effects: ['추가 주문률 +30%', '세트 메뉴 판매 +50%', '객단가 +5,000원'],
|
||||
tags: ['오프라인', '저예산', '추가주문', '최고가성비'],
|
||||
duration: 180
|
||||
},
|
||||
{
|
||||
id: 'pop-ad',
|
||||
name: '매장 내 POP 광고',
|
||||
category: 'offline',
|
||||
icon: 'storefront',
|
||||
budget: { min: 20000, max: 50000 },
|
||||
costEfficiency: 15.5,
|
||||
difficulty: 1,
|
||||
recommendationScore: 7.8,
|
||||
estimatedProfit: 475000,
|
||||
estimatedROI: 1900,
|
||||
description: '즉석 할인/1+1 등 매장 내 프로모션',
|
||||
effects: ['매장 방문 인지 80%', '이벤트 참여율 40%', '추가 매출 +40만원'],
|
||||
tags: ['오프라인', '즉석할인', '1+1', '저예산'],
|
||||
duration: 14
|
||||
},
|
||||
{
|
||||
id: 'spring-menu',
|
||||
name: '봄 시즌 특선 메뉴',
|
||||
category: 'prize',
|
||||
icon: 'local_florist',
|
||||
budget: { min: 100000, max: 300000 },
|
||||
costEfficiency: 6.8,
|
||||
difficulty: 3,
|
||||
recommendationScore: 8.5,
|
||||
estimatedProfit: 950000,
|
||||
estimatedROI: 475,
|
||||
description: '봄나물/제철 식재료 활용 한정 메뉴 출시',
|
||||
effects: ['신메뉴 매출 +35%', 'SNS 화제성 +150%', '재방문 유도 +50%'],
|
||||
tags: ['시즌메뉴', '봄', '한정판', '차별화'],
|
||||
duration: 60
|
||||
},
|
||||
{
|
||||
id: 'stamp',
|
||||
name: '스탬프 적립 이벤트',
|
||||
category: 'prize',
|
||||
icon: 'card_giftcard',
|
||||
budget: { min: 50000, max: 200000 },
|
||||
costEfficiency: 8.9,
|
||||
difficulty: 2,
|
||||
recommendationScore: 7.5,
|
||||
estimatedProfit: 780000,
|
||||
estimatedROI: 520,
|
||||
description: '방문 횟수별 스탬프 적립 후 보상 제공',
|
||||
effects: ['재방문율 +90%', '고객 충성도 +95%', '장기 매출 안정화'],
|
||||
tags: ['재방문', '충성도', '장기전략'],
|
||||
duration: 90
|
||||
}
|
||||
];
|
||||
|
||||
let selectedEvent = null;
|
||||
let selectedTags = new Set();
|
||||
|
||||
// 모든 고유 태그 추출
|
||||
function getAllTags() {
|
||||
const tagsSet = new Set();
|
||||
eventTypes.forEach(event => {
|
||||
event.tags.forEach(tag => tagsSet.add(tag));
|
||||
});
|
||||
return Array.from(tagsSet).sort();
|
||||
}
|
||||
|
||||
// 태그 필터 칩 렌더링
|
||||
function renderTagFilter() {
|
||||
const tagFilterContainer = document.getElementById('tagFilter');
|
||||
const allTags = getAllTags();
|
||||
|
||||
tagFilterContainer.innerHTML = allTags.map(tag => {
|
||||
const isSelected = selectedTags.has(tag);
|
||||
return `
|
||||
<button class="tag-chip ${isSelected ? 'tag-chip--selected' : ''}"
|
||||
onclick="toggleTag('${tag}')"
|
||||
aria-pressed="${isSelected}">
|
||||
${tag}
|
||||
${isSelected ? '<span class="material-icons" style="font-size: 14px; margin-left: 4px;">close</span>' : ''}
|
||||
</button>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 태그 토글
|
||||
window.toggleTag = function(tag) {
|
||||
if (selectedTags.has(tag)) {
|
||||
selectedTags.delete(tag);
|
||||
} else {
|
||||
selectedTags.add(tag);
|
||||
}
|
||||
renderTagFilter();
|
||||
renderEventCards(getFilteredAndSortedEvents());
|
||||
updateTotalCount();
|
||||
};
|
||||
|
||||
// 필터링 및 정렬된 이벤트 가져오기
|
||||
function getFilteredAndSortedEvents() {
|
||||
let filtered = [...eventTypes];
|
||||
|
||||
// 태그 필터 적용
|
||||
if (selectedTags.size > 0) {
|
||||
filtered = filtered.filter(event =>
|
||||
event.tags.some(tag => selectedTags.has(tag))
|
||||
);
|
||||
}
|
||||
|
||||
// 정렬 적용
|
||||
const sortBy = document.getElementById('sortSelect').value;
|
||||
switch(sortBy) {
|
||||
case 'recommendation':
|
||||
filtered.sort((a, b) => b.recommendationScore - a.recommendationScore);
|
||||
break;
|
||||
case 'costEfficiency':
|
||||
filtered.sort((a, b) => b.costEfficiency - a.costEfficiency);
|
||||
break;
|
||||
case 'difficulty':
|
||||
filtered.sort((a, b) => a.difficulty - b.difficulty);
|
||||
break;
|
||||
case 'budget':
|
||||
filtered.sort((a, b) => a.budget.min - b.budget.min);
|
||||
break;
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}
|
||||
|
||||
// 총 개수 업데이트
|
||||
function updateTotalCount() {
|
||||
const totalCount = document.getElementById('totalCount');
|
||||
const filtered = getFilteredAndSortedEvents();
|
||||
totalCount.textContent = `${filtered.length}개`;
|
||||
}
|
||||
|
||||
// 가성비 등급 계산
|
||||
function getCostEfficiencyGrade(score) {
|
||||
if (score >= 20) return { grade: 'S', color: '#9333ea', label: '최고' };
|
||||
if (score >= 15) return { grade: 'A', color: '#3b82f6', label: '매우높음' };
|
||||
if (score >= 10) return { grade: 'B', color: '#10b981', label: '높음' };
|
||||
if (score >= 5) return { grade: 'C', color: '#f59e0b', label: '보통' };
|
||||
return { grade: 'D', color: '#ef4444', label: '낮음' };
|
||||
}
|
||||
|
||||
// 난이도 표시
|
||||
function getDifficultyStars(difficulty) {
|
||||
const stars = '⭐'.repeat(difficulty);
|
||||
const labels = ['쉬움', '보통', '어려움'];
|
||||
return `${stars} ${labels[difficulty - 1]}`;
|
||||
}
|
||||
|
||||
// 이벤트 카드 렌더링
|
||||
function renderEventCards(events) {
|
||||
const listContainer = document.getElementById('eventList');
|
||||
|
||||
if (events.length === 0) {
|
||||
listContainer.innerHTML = `
|
||||
<div style="text-align: center; padding: 60px 20px;">
|
||||
<span class="material-icons" style="font-size: 64px; color: var(--color-gray-400); margin-bottom: 16px;">filter_list_off</span>
|
||||
<div class="h4" style="margin-bottom: 8px;">해당하는 이벤트가 없습니다</div>
|
||||
<div class="body-m text-muted">다른 필터를 선택해주세요</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
listContainer.innerHTML = events.map(event => {
|
||||
const ceGrade = getCostEfficiencyGrade(event.costEfficiency);
|
||||
const isSelected = selectedEvent && selectedEvent.id === event.id;
|
||||
|
||||
return `
|
||||
<div class="card event-card ${isSelected ? 'selected' : ''}"
|
||||
style="padding: 20px; cursor: pointer; transition: all 0.3s ease; ${isSelected ? 'border: 2px solid var(--color-primary-main); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);' : 'border: 1px solid var(--color-gray-200);'}"
|
||||
onclick="selectEvent('${event.id}')">
|
||||
|
||||
<!-- 상단: 아이콘 + 제목 + 가성비 등급 -->
|
||||
<div style="display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px;">
|
||||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, ${ceGrade.color}15 0%, ${ceGrade.color}30 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<span class="material-icons" style="font-size: 36px; color: ${ceGrade.color};">${event.icon}</span>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
|
||||
<h3 class="h4" style="margin: 0;">${event.name}</h3>
|
||||
<div class="cost-efficiency-badge" style="background: ${ceGrade.color};">
|
||||
<div class="cost-efficiency-badge__grade">${ceGrade.grade}</div>
|
||||
<div class="cost-efficiency-badge__label">${ceGrade.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-s text-muted" style="margin-bottom: 12px;">
|
||||
${event.description}
|
||||
</div>
|
||||
|
||||
<!-- 태그 -->
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
|
||||
${event.tags.map(tag => {
|
||||
const isTagSelected = selectedTags.has(tag);
|
||||
return `
|
||||
<span class="badge" style="background: ${isTagSelected ? 'var(--color-secondary-main)' : 'var(--color-gray-100)'}; color: ${isTagSelected ? 'white' : 'var(--color-gray-700)'}; font-size: 11px; padding: 3px 8px;">
|
||||
${tag}
|
||||
</span>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 중단: 주요 지표 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; background: var(--color-gray-50); border-radius: 12px; margin-bottom: 16px;">
|
||||
<div style="text-align: center;">
|
||||
<div class="body-xs text-muted" style="margin-bottom: 4px;">예산</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main);">
|
||||
${Utils.formatNumber(event.budget.min)}원
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; border-left: 1px solid var(--color-gray-200); border-right: 1px solid var(--color-gray-200);">
|
||||
<div class="body-xs text-muted" style="margin-bottom: 4px;">예상 순수익</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-success);">
|
||||
+${Utils.formatNumber(event.estimatedProfit)}원
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<div class="body-xs text-muted" style="margin-bottom: 4px;">ROI</div>
|
||||
<div class="body-m" style="font-weight: 600; color: var(--color-error);">
|
||||
${event.estimatedROI}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기대 효과 -->
|
||||
<div style="margin-bottom: 16px;">
|
||||
<div class="body-s" style="font-weight: 600; margin-bottom: 8px; color: var(--color-gray-800);">
|
||||
<span class="material-icons" style="font-size: 16px; vertical-align: middle; margin-right: 4px;">trending_up</span>
|
||||
기대 효과
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px;">
|
||||
${event.effects.map(effect => `
|
||||
<div class="body-s" style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="material-icons" style="font-size: 14px; color: var(--color-success);">check_circle</span>
|
||||
<span>${effect}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 하단: 난이도 + 추천점수 + 액션 -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div class="body-xs text-muted">난이도</div>
|
||||
<div class="body-s">${getDifficultyStars(event.difficulty)}</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1; margin: 0 16px;">
|
||||
<div class="body-xs text-muted" style="margin-bottom: 4px;">추천 점수</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<div style="flex: 1; height: 8px; background: var(--color-gray-200); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: ${event.recommendationScore * 10}%; height: 100%; background: linear-gradient(90deg, var(--color-primary-main) 0%, var(--color-primary-dark) 100%); transition: width 0.3s ease;"></div>
|
||||
</div>
|
||||
<span class="body-s" style="font-weight: 600; color: var(--color-primary-main); min-width: 32px;">${event.recommendationScore.toFixed(1)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn ${isSelected ? 'btn-primary' : 'btn-secondary'}"
|
||||
style="min-width: 80px;"
|
||||
onclick="event.stopPropagation(); toggleEventSelection('${event.id}')">
|
||||
${isSelected ? '선택됨' : '선택하기'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 이벤트 선택
|
||||
window.selectEvent = function(eventId) {
|
||||
const event = eventTypes.find(e => e.id === eventId);
|
||||
if (!event) return;
|
||||
|
||||
selectedEvent = event;
|
||||
renderEventCards(getFilteredAndSortedEvents());
|
||||
updateProceedButton();
|
||||
};
|
||||
|
||||
// 이벤트 선택 토글
|
||||
window.toggleEventSelection = function(eventId) {
|
||||
if (selectedEvent && selectedEvent.id === eventId) {
|
||||
selectedEvent = null;
|
||||
} else {
|
||||
selectEvent(eventId);
|
||||
}
|
||||
};
|
||||
|
||||
// 진행 버튼 업데이트
|
||||
function updateProceedButton() {
|
||||
const proceedBtn = document.getElementById('proceedBtn');
|
||||
const selectionInfo = document.getElementById('selectionInfo');
|
||||
|
||||
if (selectedEvent) {
|
||||
proceedBtn.disabled = false;
|
||||
selectionInfo.innerHTML = `
|
||||
<strong>${selectedEvent.name}</strong> 선택됨 ·
|
||||
예산 ${Utils.formatNumber(selectedEvent.budget.min)}원 ·
|
||||
예상 순수익 +${Utils.formatNumber(selectedEvent.estimatedProfit)}원
|
||||
`;
|
||||
} else {
|
||||
proceedBtn.disabled = true;
|
||||
selectionInfo.textContent = '이벤트를 선택해주세요';
|
||||
}
|
||||
}
|
||||
|
||||
// 정렬 변경
|
||||
document.getElementById('sortSelect').addEventListener('change', function() {
|
||||
renderEventCards(getFilteredAndSortedEvents());
|
||||
});
|
||||
|
||||
// 필터 모달
|
||||
window.showFilterModal = function() {
|
||||
Modal.show({
|
||||
title: '필터 설정',
|
||||
body: `
|
||||
<div class="form-group">
|
||||
<label class="form-label">예산 범위</label>
|
||||
<div style="display: flex; gap: 8px; align-items: center;">
|
||||
<input type="number" id="minBudget" class="form-input" placeholder="최소" value="0" style="flex: 1;">
|
||||
<span>~</span>
|
||||
<input type="number" id="maxBudget" class="form-input" placeholder="최대" value="1000000" style="flex: 1;">
|
||||
<span>원</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">카테고리</label>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="category" value="digital" checked>
|
||||
<span>디지털 이벤트</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="category" value="offline" checked>
|
||||
<span>오프라인 이벤트</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="category" value="prize" checked>
|
||||
<span>경품 중심 이벤트</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">난이도</label>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="difficulty" value="1" checked>
|
||||
<span>⭐ 쉬움</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="difficulty" value="2" checked>
|
||||
<span>⭐⭐ 보통</span>
|
||||
</label>
|
||||
<label class="form-check">
|
||||
<input type="checkbox" name="difficulty" value="3" checked>
|
||||
<span>⭐⭐⭐ 어려움</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
confirmText: '적용',
|
||||
onConfirm: function() {
|
||||
const minBudget = parseInt(document.getElementById('minBudget').value) || 0;
|
||||
const maxBudget = parseInt(document.getElementById('maxBudget').value) || 999999999;
|
||||
const categories = Array.from(document.querySelectorAll('input[name="category"]:checked')).map(cb => cb.value);
|
||||
const difficulties = Array.from(document.querySelectorAll('input[name="difficulty"]:checked')).map(cb => parseInt(cb.value));
|
||||
|
||||
// 필터링 로직 (실제로는 서버에서 처리)
|
||||
Toast.success('필터가 적용되었습니다.');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 다음 단계로 진행
|
||||
window.proceedToNext = function() {
|
||||
if (!selectedEvent) {
|
||||
Toast.error('이벤트를 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 선택한 이벤트 정보 저장
|
||||
window.AppState.selectedEventType = selectedEvent;
|
||||
window.AppState.save();
|
||||
|
||||
// 상세 정보 화면으로 이동
|
||||
Modal.show({
|
||||
title: '✅ 이벤트 선택 완료',
|
||||
body: `
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-primary-main) 0%, var(--color-primary-dark) 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
|
||||
<span class="material-icons" style="font-size: 48px; color: white;">${selectedEvent.icon}</span>
|
||||
</div>
|
||||
<h3 class="h3" style="margin-bottom: 12px;">${selectedEvent.name}</h3>
|
||||
<p class="body-m text-muted" style="margin-bottom: 20px;">
|
||||
이 이벤트의 상세 정보를 확인하고<br>
|
||||
경품 추천을 받으시겠습니까?
|
||||
</p>
|
||||
<div class="card" style="padding: 16px; background: var(--color-gray-50); text-align: left;">
|
||||
<div class="body-s" style="display: flex; justify-content: space-between; margin-bottom: 8px;">
|
||||
<span class="text-muted">예상 예산</span>
|
||||
<strong>${Utils.formatNumber(selectedEvent.budget.min)}원</strong>
|
||||
</div>
|
||||
<div class="body-s" style="display: flex; justify-content: space-between; margin-bottom: 8px;">
|
||||
<span class="text-muted">예상 순수익</span>
|
||||
<strong style="color: var(--color-success);">+${Utils.formatNumber(selectedEvent.estimatedProfit)}원</strong>
|
||||
</div>
|
||||
<div class="body-s" style="display: flex; justify-content: space-between;">
|
||||
<span class="text-muted">ROI</span>
|
||||
<strong style="color: var(--color-error);">${selectedEvent.estimatedROI}%</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
confirmText: '상세 정보 보기',
|
||||
cancelText: '다시 선택',
|
||||
onConfirm: function() {
|
||||
window.location.href = '06-2-이벤트상세정보.html';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 초기화
|
||||
renderTagFilter();
|
||||
renderEventCards(getFilteredAndSortedEvents());
|
||||
updateTotalCount();
|
||||
console.log('AI 이벤트 유형 추천 페이지 로드 완료');
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.event-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.event-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
.event-card.selected {
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag Chip Styles */
|
||||
.tag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-gray-300);
|
||||
border-radius: 16px;
|
||||
background: var(--color-white);
|
||||
color: var(--color-gray-700);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tag-chip:hover {
|
||||
border-color: var(--color-secondary-main);
|
||||
background: var(--color-secondary-light);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tag-chip--selected {
|
||||
border-color: var(--color-secondary-main);
|
||||
background: var(--color-secondary-main);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tag-chip--selected:hover {
|
||||
background: var(--color-secondary-dark);
|
||||
}
|
||||
|
||||
/* Cost Efficiency Badge */
|
||||
.cost-efficiency-badge {
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
margin-left: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cost-efficiency-badge__grade {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cost-efficiency-badge__label {
|
||||
font-size: 10px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user