P82282866/kt-event-marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AI 경품 추천 구현방안 및 유저스토리 테이블 추가

Browse Source 
- AI 경품 추천 상세 구현방안 문서 작성 (design/구현방안-AI경품추천.md)
  - RAG 기반 하이브리드 추천 시스템 설계
  - 매장/경품 데이터 수집 및 벡터화 전략
  - Claude API 프롬프트 설계 및 캐싱 전략
  - Redis Vector Search 활용 방안
  - Fallback 메커니즘 및 성능 최적화
  - 월 운영 비용 추정: $581 (일 1,000 요청 기준)

- 유저스토리 마크다운 테이블 생성 (design/userstory-table.md)
  - 전체 41개 유저스토리 요약 테이블
  - 서비스별/우선순위별/복잡도별 통계
  - 기술 스택 및 외부 API 매핑
  - 개발 우선순위 로드맵 (Phase 1~3)
  - 비기능 요구사항 요약

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
hiondal
2025-10-20 17:01:19 +09:00
parent f3bd327eea
commit 2aa09d9475
8 changed files with 3710 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/uiux/prototype/02-매장정보등록.html
+84
View File
@@ -725,8 +725,92 @@
}, 1500);
});
// 한식음식점 예제 데이터 로드
function loadKoreanRestaurantExample() {
// 매장명
storeNameInput.value = '수원왕갈비';
// 업종
businessTypeSelect.value = 'restaurant';
// 주소
addressInput.value = '경기도 수원시 팔달구 인계동 1055-1';
document.getElementById('addressDetail').value = '1층';
// 영업시간 (월~일 10:00-22:00)
const timeInputs = document.querySelectorAll('.business-hour-row');
timeInputs.forEach(row => {
row.querySelector('input[type="time"]:first-of-type').value = '10:00';
row.querySelector('input[type="time"]:last-of-type').value = '22:00';
});
// 사업자번호
businessNumberInput.value = '123-45-67890';
// 메뉴 예제 추가
menuItems = [
{
id: Utils.generateId(),
name: '왕갈비',
price: 18000,
description: '대표 메뉴, 1인분'
},
{
id: Utils.generateId(),
name: 'LA갈비',
price: 35000,
description: '미국산 최상급 LA갈비'
},
{
id: Utils.generateId(),
name: '된장찌개',
price: 7000,
description: '직접 담근 된장 사용'
},
{
id: Utils.generateId(),
name: '냉면',
price: 9000,
description: '여름 시즌 인기 메뉴'
},
{
id: Utils.generateId(),
name: '갈비탕',
price: 12000,
description: '푸짐한 갈비가 들어간 보양식'
}
];
renderMenuList();
// 매장 특징
storeFeaturesTextarea.value = '30년 전통의 한식 갈비 전문점입니다.\n직접 제작한 비법 양념으로 재운 갈비가 특징이며,\n주차 가능하고 단체석도 마련되어 있습니다.\n런치 시간 특가 메뉴 제공 중입니다.';
featureCountSpan.textContent = storeFeaturesTextarea.value.length;
// 사업자번호 검증 시뮬레이션
isBusinessNumberVerified = true;
verifyBtn.disabled = false;
document.getElementById('verifyResult').innerHTML = `
<div style="display: flex; align-items: center; gap: 8px; color: var(--color-success);">
<span class="material-icons" style="font-size: 20px;">check_circle</span>
<span class="body-s" style="font-weight: 600;">확인됨 (예제 데이터)</span>
</div>
`;
// 폼 유효성 체크
checkFormValidity();
// 안내 메시지
Toast.info('한식음식점 예제 데이터가 로드되었습니다.');
}
// 초기화
initBusinessHours();
// 예제 데이터 자동 로드
setTimeout(() => {
loadKoreanRestaurantExample();
}, 500);
console.log('매장정보등록 페이지 로드 완료');
})();
</script>
design/uiux/prototype/03-이벤트목적선택.html
+3 -3
View File
@@ -368,10 +368,10 @@
window.AppState.currentEvent = eventData;
window.AppState.save();
// AI 분석 화면으로 이동
Loading.show('AI 트렌드 분석 준비 중...');
// AI 이벤트 유형 추천 화면으로 이동
Loading.show('AI 이벤트 유형 분석 중...');
setTimeout(() => {
window.location.href = '04-AI트렌드분석결과.html';
window.location.href = '04-1-AI이벤트유형추천.html';
}, 800);
});
design/uiux/prototype/04-1-AI이벤트유형추천.html
+550
View File
@@ -0,0 +1,550 @@
<!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;">
<!-- 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="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;
// 가성비 등급 계산
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 = eventTypes) {
const listContainer = document.getElementById('eventList');
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 style="text-align: center; background: ${ceGrade.color}; color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; white-space: nowrap; margin-left: 8px;">
<div style="font-size: 18px; line-height: 1;">${ceGrade.grade}</div>
<div style="font-size: 10px; opacity: 0.9;">${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 => `
<span class="badge" style="background: var(--color-gray-100); color: 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(getCurrentSortedEvents());
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 = '이벤트를 선택해주세요';
}
}
// 정렬
function getCurrentSortedEvents() {
const sortBy = document.getElementById('sortSelect').value;
let sorted = [...eventTypes];
switch(sortBy) {
case 'recommendation':
sorted.sort((a, b) => b.recommendationScore - a.recommendationScore);
break;
case 'costEfficiency':
sorted.sort((a, b) => b.costEfficiency - a.costEfficiency);
break;
case 'difficulty':
sorted.sort((a, b) => a.difficulty - b.difficulty);
break;
case 'budget':
sorted.sort((a, b) => a.budget.min - b.budget.min);
break;
}
return sorted;
}
document.getElementById('sortSelect').addEventListener('change', function() {
renderEventCards(getCurrentSortedEvents());
});
// 필터 모달
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 = '04-2-이벤트상세정보.html';
}
});
};
// 초기화
renderEventCards(getCurrentSortedEvents());
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);
}
}
</style>
</body>
</html>
design/uiux/prototype/04-2-이벤트상세정보.html
+624
View 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>
design/uiux/prototype/05-AI경품추천.html
+107 -12
View File
@@ -46,6 +46,23 @@
</div>
</div>
<!-- Selected Event Type Context -->
<div id="selectedEventContext" style="display: none; margin-bottom: 24px;">
<div class="card" style="padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
<span class="material-icons" style="font-size: 24px;">campaign</span>
<div class="body-l" style="font-weight: 700;" id="eventTypeName">SNS 해시태그 이벤트</div>
</div>
<div class="body-s" style="opacity: 0.95; margin-bottom: 12px;" id="eventTypeDesc">
인스타그램 해시태그 참여로 바이럴 효과 극대화
</div>
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<span class="chip" style="background: rgba(255,255,255,0.2); color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px;" id="eventCategory">디지털</span>
<span class="chip" style="background: rgba(255,255,255,0.2); color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px;" id="eventBudget">예산: 5~10만원</span>
</div>
</div>
</div>
<!-- Budget Setting -->
<section style="margin-bottom: 32px;">
<h2 class="h3" style="margin-bottom: 16px;">예산 설정</h2>
@@ -146,6 +163,31 @@
window.AppState.load();
const store = window.AppState.store;
const event = window.AppState.currentEvent;
const selectedEventType = window.AppState.selectedEventType;
// 선택된 이벤트 유형 정보 표시
if (selectedEventType) {
document.getElementById('selectedEventContext').style.display = 'block';
document.getElementById('eventTypeName').textContent = selectedEventType.name;
document.getElementById('eventTypeDesc').textContent = selectedEventType.description;
const categoryMap = {
'digital': '디지털',
'offline': '오프라인',
'prize': '경품형'
};
document.getElementById('eventCategory').textContent = categoryMap[selectedEventType.category] || selectedEventType.category;
const budgetMin = Math.floor(selectedEventType.budget.min / 10000);
const budgetMax = Math.floor(selectedEventType.budget.max / 10000);
document.getElementById('eventBudget').textContent = `예산: ${budgetMin}~${budgetMax}만원`;
// 이벤트 유형 예산 범위로 슬라이더 초기값 설정
const avgBudget = (selectedEventType.budget.min + selectedEventType.budget.max) / 2;
currentBudget = Math.round(avgBudget / 10000) * 10000;
budgetSlider.value = currentBudget;
budgetDisplay.textContent = Utils.formatNumber(currentBudget) + '원';
}
// 예산 슬라이더 변경
budgetSlider.addEventListener('input', function() {
@@ -167,13 +209,39 @@
function generatePrizeRecommendations() {
const businessType = store.businessType;
const purpose = event.purpose;
const eventCategory = selectedEventType ? selectedEventType.category : null;
// 업종/목적별 경품 데이터
const prizesDatabase = {
// 이벤트 유형별 경품 데이터 (디지털/오프라인/경품형)
const eventTypePrizes = {
digital: [
{ name: '모바일 기프티콘', basePrice: 5000, attraction: 5, participationRate: 48, category: 'voucher', digital: true },
{ name: 'SNS 공유 쿠폰', basePrice: 3000, attraction: 4, participationRate: 52, category: 'discount', digital: true },
{ name: '온라인 포인트 적립', basePrice: 2000, attraction: 3, participationRate: 45, category: 'point', digital: true },
{ name: '디지털 할인쿠폰', basePrice: 5000, attraction: 4, participationRate: 50, category: 'discount', digital: true },
{ name: '모바일 상품권', basePrice: 10000, attraction: 5, participationRate: 46, category: 'voucher', digital: true }
],
offline: [
{ name: '매장 방문 쿠폰', basePrice: 8000, attraction: 5, participationRate: 42, category: 'discount', digital: false },
{ name: '현장 사은품', basePrice: 5000, attraction: 4, participationRate: 38, category: 'product', digital: false },
{ name: '체험 상품권', basePrice: 15000, attraction: 5, participationRate: 35, category: 'service', digital: false },
{ name: '무료 시음/시식권', basePrice: 3000, attraction: 3, participationRate: 40, category: 'product', digital: false },
{ name: 'VIP 라운지 이용권', basePrice: 20000, attraction: 4, participationRate: 28, category: 'service', digital: false }
],
prize: [
{ name: '추첨 경품권', basePrice: 50000, attraction: 5, participationRate: 55, category: 'raffle', digital: false },
{ name: '럭키드로우 티켓', basePrice: 0, attraction: 4, participationRate: 50, category: 'raffle', digital: true },
{ name: '즉석 당첨 쿠폰', basePrice: 10000, attraction: 5, participationRate: 48, category: 'instant', digital: false },
{ name: '응모권 (자동추첨)', basePrice: 0, attraction: 3, participationRate: 45, category: 'raffle', digital: true },
{ name: '럭키박스 교환권', basePrice: 30000, attraction: 4, participationRate: 40, category: 'product', digital: false }
]
};
// 업종별 경품 데이터
const businessPrizes = {
restaurant: [
{ name: '치킨세트 무료교환', basePrice: 20000, attraction: 5, participationRate: 45, category: 'product' },
{ name: '메인메뉴 무료교환', basePrice: 20000, attraction: 5, participationRate: 45, category: 'product' },
{ name: '5천원 할인쿠폰', basePrice: 5000, attraction: 4, participationRate: 38, category: 'discount' },
{ name: '사이드메뉴 무료 제공', basePrice: 8000, attraction: 4, participationRate: 40, category: 'product' },
{ name: '사이드메뉴 무료', basePrice: 8000, attraction: 4, participationRate: 40, category: 'product' },
{ name: '음료 무료 업그레이드', basePrice: 3000, attraction: 3, participationRate: 35, category: 'upgrade' },
{ name: '10% 할인 쿠폰', basePrice: 10000, attraction: 4, participationRate: 36, category: 'discount' }
],
@@ -193,16 +261,36 @@
]
};
// 기본 경품 (업종이 매칭되지 않을 경우)
// 기본 경품
const defaultPrizes = [
{ name: 'KT 멤버십 포인트 5천점', basePrice: 5000, attraction: 3, participationRate: 32, category: 'point' },
{ name: '5천원 모바일 상품권', basePrice: 5000, attraction: 4, participationRate: 38, category: 'voucher' },
{ name: '3천원 할인쿠폰', basePrice: 3000, attraction: 4, participationRate: 36, category: 'discount' },
{ name: 'KT 멤버십 포인트', basePrice: 5000, attraction: 3, participationRate: 32, category: 'point' },
{ name: '모바일 상품권', basePrice: 5000, attraction: 4, participationRate: 38, category: 'voucher' },
{ name: '할인쿠폰', basePrice: 3000, attraction: 4, participationRate: 36, category: 'discount' },
{ name: '경품 추첨권', basePrice: 0, attraction: 2, participationRate: 25, category: 'raffle' },
{ name: '다음 방문 시 10% 할인', basePrice: 0, attraction: 3, participationRate: 30, category: 'discount' }
{ name: '재방문 할인권', basePrice: 0, attraction: 3, participationRate: 30, category: 'discount' }
];
let prizes = prizesDatabase[businessType] || defaultPrizes;
// 이벤트 유형과 업종을 조합하여 최적의 경품 선택
let prizes = [];
if (eventCategory && eventTypePrizes[eventCategory]) {
// 이벤트 유형별 경품 우선
prizes = [...eventTypePrizes[eventCategory]];
// 디지털 이벤트인 경우 업종별 경품 중 디지털 가능한 것 추가
if (eventCategory === 'digital' && businessPrizes[businessType]) {
const digitalCompatible = businessPrizes[businessType]
.filter(p => p.category === 'discount' || p.category === 'voucher' || p.category === 'point')
.slice(0, 2);
prizes = [...prizes, ...digitalCompatible];
}
} else {
// 이벤트 유형이 없으면 업종별 경품 사용
prizes = businessPrizes[businessType] || defaultPrizes;
}
// 중복 제거 및 최대 8개로 제한
prizes = prizes.slice(0, 8);
// 예산에 맞춰 가격 조정 및 추천
const budgetPerPrize = currentBudget * 0.2; // 경품 1개당 예산의 20%
@@ -234,8 +322,15 @@
<div class="card" style="padding: 16px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease; position: relative;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
<div style="flex: 1;">
<div class="body-m" style="font-weight: 700; margin-bottom: 4px;">
${prize.rank}. ${prize.name}
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
<span class="body-m" style="font-weight: 700;">
${prize.rank}. ${prize.name}
</span>
${prize.digital !== undefined ? `
<span style="background: ${prize.digital ? '#667eea' : '#10b981'}; color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600;">
${prize.digital ? '디지털' : '오프라인'}
</span>
` : ''}
</div>
<div class="body-s text-muted">
${Utils.formatNumber(prize.price)}원 × ${prize.quantity}개