프로토~2
This commit is contained in:
doyeon
parent
729b776600
commit
1ea80e1b42
330
design/uiux/prototype/21-실시간대시보드.html
Normal file
330
design/uiux/prototype/21-실시간대시보드.html
Normal file
@ -0,0 +1,330 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>실시간 대시보드 - KT AI 이벤트</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="header" role="banner">
|
||||
<div class="header-content">
|
||||
<button type="button" class="btn-icon" onclick="toggleMenu()" aria-label="메뉴">
|
||||
<span class="material-icons">menu</span>
|
||||
</button>
|
||||
<h1 class="header-title">실시간 대시보드</h1>
|
||||
<button type="button" class="btn-icon" aria-label="알림">
|
||||
<span class="material-icons">notifications</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content" class="container" role="main" style="padding-bottom: 80px;">
|
||||
<section class="section">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
|
||||
<div class="caption" style="color: var(--color-gray-600);">
|
||||
마지막 업데이트: <span id="lastUpdate">15:35</span>
|
||||
</div>
|
||||
<button type="button" class="btn-text btn-sm" onclick="refresh()">
|
||||
<span class="material-icons">refresh</span>
|
||||
<span>새로고침</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: var(--spacing-xs);">진행 중인 이벤트</div>
|
||||
<div class="h4" style="margin-bottom: var(--spacing-xs);">연말 대박 이벤트</div>
|
||||
<div class="body-s" style="color: var(--color-primary-main); font-weight: 600;">
|
||||
D-5 (2025-12-31까지)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="metrics-title">
|
||||
<h2 id="metrics-title" class="h3">주요 지표</h2>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-m); margin-bottom: var(--spacing-l);">
|
||||
<div style="width: 56px; height: 56px; background: var(--color-primary-lightest); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-icons" style="font-size: 32px; color: var(--color-primary-main);">people</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">총 참여자</div>
|
||||
<div class="h3" style="color: var(--color-primary-main); margin-bottom: 4px;" id="totalParticipants">1,234명</div>
|
||||
<div class="caption" style="color: var(--color-success); font-weight: 600;">
|
||||
<span class="material-icons" style="font-size: 14px; vertical-align: middle;">trending_up</span>
|
||||
+45 (오늘)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-m); margin-bottom: var(--spacing-l);">
|
||||
<div style="width: 56px; height: 56px; background: var(--color-secondary-lightest); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-icons" style="font-size: 32px; color: var(--color-secondary-main);">visibility</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">총 노출 수</div>
|
||||
<div class="h3" style="color: var(--color-secondary-main); margin-bottom: 4px;" id="totalViews">15,678회</div>
|
||||
<div class="caption" style="color: var(--color-success); font-weight: 600;">
|
||||
<span class="material-icons" style="font-size: 14px; vertical-align: middle;">trending_up</span>
|
||||
+230 (최근 1시간)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-m); margin-bottom: var(--spacing-l);">
|
||||
<div style="width: 56px; height: 56px; background: var(--color-warning-lightest); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-icons" style="font-size: 32px; color: var(--color-warning);">monetization_on</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">매출 증가율</div>
|
||||
<div class="h3" style="color: var(--color-warning); margin-bottom: 4px;" id="salesIncrease">+42%</div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">(이벤트 전 대비)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-m);">
|
||||
<div style="width: 56px; height: 56px; background: var(--color-success-lightest); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-icons" style="font-size: 32px; color: var(--color-success);">trending_up</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">예상 ROI</div>
|
||||
<div class="h3" style="color: var(--color-success); margin-bottom: 4px;" id="expectedROI">245%</div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">(투자 대비 수익)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="channels-title">
|
||||
<h2 id="channels-title" class="h3">채널별 참여 현황</h2>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; flex-direction: column; gap: var(--spacing-l);">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-primary-main); font-size: 20px;">qr_code_2</span>
|
||||
<span class="body-m" style="font-weight: 600;">QR코드</span>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-primary-main);">45%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-fill" style="width: 45%; background: var(--color-primary-main);"></div>
|
||||
</div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-top: var(--spacing-xs);">556명 참여</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-secondary-main); font-size: 20px;">photo_camera</span>
|
||||
<span class="body-m" style="font-weight: 600;">Instagram</span>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-secondary-main);">30%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-fill" style="width: 30%; background: var(--color-secondary-main);"></div>
|
||||
</div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-top: var(--spacing-xs);">370명 참여</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">tv</span>
|
||||
<span class="body-m" style="font-weight: 600;">우리동네TV</span>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-success);">15%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-fill" style="width: 15%; background: var(--color-success);"></div>
|
||||
</div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-top: var(--spacing-xs);">185명 참여</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-warning); font-size: 20px;">article</span>
|
||||
<span class="body-m" style="font-weight: 600;">Naver Blog</span>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-warning);">10%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-fill" style="width: 10%; background: var(--color-warning);"></div>
|
||||
</div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-top: var(--spacing-xs);">123명 참여</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<button type="button" class="btn btn-primary btn-lg" onclick="viewDetailedAnalysis()" style="width: 100%;">
|
||||
<span class="material-icons">analytics</span>
|
||||
<span>상세 분석 보기</span>
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<nav class="bottom-nav" role="navigation">
|
||||
<button type="button" class="nav-item" onclick="goToHome()">
|
||||
<span class="material-icons">home</span>
|
||||
<span>홈</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" onclick="goToEvents()">
|
||||
<span class="material-icons">event</span>
|
||||
<span>이벤트</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item active">
|
||||
<span class="material-icons">analytics</span>
|
||||
<span>분석</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" onclick="goToMy()">
|
||||
<span class="material-icons">person</span>
|
||||
<span>MY</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
let autoRefreshInterval;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateTime();
|
||||
startAutoRefresh();
|
||||
});
|
||||
|
||||
function startAutoRefresh() {
|
||||
autoRefreshInterval = setInterval(function() {
|
||||
refresh(true);
|
||||
}, 300000); // 5분 간격
|
||||
}
|
||||
|
||||
window.refresh = function(isAuto = false) {
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
|
||||
document.getElementById('lastUpdate').textContent = timeStr;
|
||||
|
||||
// Simulate data update
|
||||
const participants = parseInt(document.getElementById('totalParticipants').textContent);
|
||||
const newParticipants = participants + Math.floor(Math.random() * 10);
|
||||
document.getElementById('totalParticipants').textContent = newParticipants.toLocaleString() + '명';
|
||||
|
||||
const views = parseInt(document.getElementById('totalViews').textContent.replace(',', ''));
|
||||
const newViews = views + Math.floor(Math.random() * 100);
|
||||
document.getElementById('totalViews').textContent = newViews.toLocaleString() + '회';
|
||||
|
||||
if (!isAuto) {
|
||||
Toast.success('데이터가 업데이트되었습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
|
||||
document.getElementById('lastUpdate').textContent = timeStr;
|
||||
}
|
||||
|
||||
window.viewDetailedAnalysis = function() {
|
||||
window.location.href = '22-채널별성과분석.html';
|
||||
};
|
||||
|
||||
window.toggleMenu = function() {
|
||||
Toast.show('메뉴');
|
||||
};
|
||||
|
||||
window.goToHome = function() {
|
||||
Toast.show('홈으로 이동');
|
||||
};
|
||||
|
||||
window.goToEvents = function() {
|
||||
Toast.show('이벤트 목록으로 이동');
|
||||
};
|
||||
|
||||
window.goToMy = function() {
|
||||
Toast.show('마이페이지로 이동');
|
||||
};
|
||||
|
||||
// Cleanup on page unload
|
||||
window.addEventListener('beforeunload', function() {
|
||||
if (autoRefreshInterval) {
|
||||
clearInterval(autoRefreshInterval);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--color-gray-200);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: 1px solid var(--color-gray-300);
|
||||
display: flex;
|
||||
padding: var(--spacing-xs) 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: var(--spacing-xs);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-gray-600);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.nav-item .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.nav-item span:last-child {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
522
design/uiux/prototype/22-채널별성과분석.html
Normal file
522
design/uiux/prototype/22-채널별성과분석.html
Normal file
@ -0,0 +1,522 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>채널별 성과 분석 - KT AI 이벤트</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="header" role="banner">
|
||||
<div class="header-content">
|
||||
<button type="button" class="btn-icon" onclick="window.history.back()" aria-label="이전 페이지로 돌아가기">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="header-title">채널별 성과 분석</h1>
|
||||
<div style="width: 40px;"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content" class="container" role="main" style="padding-bottom: 80px;">
|
||||
<section class="section">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
|
||||
<h2 class="h3">📊 채널별 성과 비교</h2>
|
||||
<button type="button" class="btn-text btn-sm" onclick="exportReport()">
|
||||
<span class="material-icons">download</span>
|
||||
<span>리포트</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="body-s" style="color: var(--color-gray-600); margin-bottom: var(--spacing-xs);">분석 기간</div>
|
||||
<select class="select-field" id="periodSelect" onchange="changePeriod()" aria-label="분석 기간 선택">
|
||||
<option value="7">최근 7일</option>
|
||||
<option value="30" selected>최근 30일</option>
|
||||
<option value="90">최근 90일</option>
|
||||
<option value="all">전체 기간</option>
|
||||
</select>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-top: var(--spacing-xs);" id="periodDisplay">2025-12-01 ~ 현재</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="ranking-title">
|
||||
<h3 id="ranking-title" class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);">종합 순위</h3>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: var(--spacing-s);">
|
||||
<div class="card" style="border: 2px solid var(--color-primary-main);">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span style="font-size: 24px;">🥇</span>
|
||||
<div style="flex: 1;">
|
||||
<div class="body-m" style="font-weight: 600;">QR코드</div>
|
||||
<div class="caption" style="color: var(--color-success); font-weight: 600;">가장 효과적</div>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-primary-main);">9.8%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span style="font-size: 24px;">🥈</span>
|
||||
<div style="flex: 1;">
|
||||
<div class="body-m" style="font-weight: 600;">Instagram</div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">2위</div>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-secondary-main);">8.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span style="font-size: 24px;">🥉</span>
|
||||
<div style="flex: 1;">
|
||||
<div class="body-m" style="font-weight: 600;">우리동네TV</div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">3위</div>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-success);">7.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="channels-title">
|
||||
<h3 id="channels-title" class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);">채널별 상세 성과</h3>
|
||||
|
||||
<!-- QR코드 -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-primary-main); font-size: 24px;">qr_code_2</span>
|
||||
<span class="body-l" style="font-weight: 600;">QR코드</span>
|
||||
</div>
|
||||
<span style="font-size: 20px;">🥇</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-m); margin-bottom: var(--spacing-m);">
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">노출 수</div>
|
||||
<div class="h4" style="color: var(--color-primary-main);">5,678회</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">참여자</div>
|
||||
<div class="h4" style="color: var(--color-primary-main);">556명</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">참여율</div>
|
||||
<div class="h4" style="color: var(--color-success);">9.8%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">전환자</div>
|
||||
<div class="h4" style="color: var(--color-primary-main);">223명</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: var(--spacing-m);">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">전환율</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<div class="progress-bar-container" style="flex: 1;">
|
||||
<div class="progress-bar-fill" style="width: 40%; background: var(--color-primary-main);"></div>
|
||||
</div>
|
||||
<span class="body-m" style="font-weight: 600; color: var(--color-primary-main);">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--color-gray-100); padding: var(--spacing-s); border-radius: var(--radius-md); margin-bottom: var(--spacing-m);">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">CPA (고객 획득 비용)</div>
|
||||
<div class="body-l" style="font-weight: 600;">180원</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-outline btn-lg" onclick="viewChannelDetail('qr')" style="width: 100%;">
|
||||
<span>상세 보기</span>
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instagram -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-secondary-main); font-size: 24px;">photo_camera</span>
|
||||
<span class="body-l" style="font-weight: 600;">Instagram</span>
|
||||
</div>
|
||||
<span style="font-size: 20px;">🥈</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-m); margin-bottom: var(--spacing-m);">
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">노출 수</div>
|
||||
<div class="h4" style="color: var(--color-secondary-main);">4,523회</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">참여자</div>
|
||||
<div class="h4" style="color: var(--color-secondary-main);">370명</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">참여율</div>
|
||||
<div class="h4" style="color: var(--color-success);">8.2%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">전환자</div>
|
||||
<div class="h4" style="color: var(--color-secondary-main);">148명</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: var(--spacing-m);">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">전환율</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<div class="progress-bar-container" style="flex: 1;">
|
||||
<div class="progress-bar-fill" style="width: 40%; background: var(--color-secondary-main);"></div>
|
||||
</div>
|
||||
<span class="body-m" style="font-weight: 600; color: var(--color-secondary-main);">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--color-gray-100); padding: var(--spacing-s); border-radius: var(--radius-md); margin-bottom: var(--spacing-m);">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">CPA (고객 획득 비용)</div>
|
||||
<div class="body-l" style="font-weight: 600;">270원</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-outline btn-lg" onclick="viewChannelDetail('instagram')" style="width: 100%;">
|
||||
<span>상세 보기</span>
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 우리동네TV -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 24px;">tv</span>
|
||||
<span class="body-l" style="font-weight: 600;">우리동네TV</span>
|
||||
</div>
|
||||
<span style="font-size: 20px;">🥉</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-m); margin-bottom: var(--spacing-m);">
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">노출 수</div>
|
||||
<div class="h4" style="color: var(--color-success);">3,890회</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">참여자</div>
|
||||
<div class="h4" style="color: var(--color-success);">185명</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">참여율</div>
|
||||
<div class="h4" style="color: var(--color-success);">7.5%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">전환자</div>
|
||||
<div class="h4" style="color: var(--color-success);">74명</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: var(--spacing-m);">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">전환율</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<div class="progress-bar-container" style="flex: 1;">
|
||||
<div class="progress-bar-fill" style="width: 40%; background: var(--color-success);"></div>
|
||||
</div>
|
||||
<span class="body-m" style="font-weight: 600; color: var(--color-success);">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--color-gray-100); padding: var(--spacing-s); border-radius: var(--radius-md); margin-bottom: var(--spacing-m);">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">CPA (고객 획득 비용)</div>
|
||||
<div class="body-l" style="font-weight: 600;">405원</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-outline btn-lg" onclick="viewChannelDetail('tv')" style="width: 100%;">
|
||||
<span>상세 보기</span>
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Naver Blog -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-warning); font-size: 24px;">article</span>
|
||||
<span class="body-l" style="font-weight: 600;">Naver Blog</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-m); margin-bottom: var(--spacing-m);">
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">노출 수</div>
|
||||
<div class="h4" style="color: var(--color-warning);">1,587회</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">참여자</div>
|
||||
<div class="h4" style="color: var(--color-warning);">123명</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">참여율</div>
|
||||
<div class="h4" style="color: var(--color-warning);">7.8%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">전환자</div>
|
||||
<div class="h4" style="color: var(--color-warning);">49명</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: var(--spacing-m);">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">전환율</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<div class="progress-bar-container" style="flex: 1;">
|
||||
<div class="progress-bar-fill" style="width: 40%; background: var(--color-warning);"></div>
|
||||
</div>
|
||||
<span class="body-m" style="font-weight: 600; color: var(--color-warning);">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--color-gray-100); padding: var(--spacing-s); border-radius: var(--radius-md); margin-bottom: var(--spacing-m);">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">CPA (고객 획득 비용)</div>
|
||||
<div class="body-l" style="font-weight: 600;">815원</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-outline btn-lg" onclick="viewChannelDetail('blog')" style="width: 100%;">
|
||||
<span>상세 보기</span>
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="comparison-title">
|
||||
<h3 id="comparison-title" class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);">비교 차트</h3>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: var(--spacing-l);">참여율 비교</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: var(--spacing-m);">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
||||
<span class="body-s">QR코드</span>
|
||||
<span class="body-s" style="font-weight: 600; color: var(--color-primary-main);">9.8%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-fill" style="width: 100%; background: var(--color-primary-main);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
||||
<span class="body-s">Instagram</span>
|
||||
<span class="body-s" style="font-weight: 600; color: var(--color-secondary-main);">8.2%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-fill" style="width: 84%; background: var(--color-secondary-main);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
||||
<span class="body-s">우리동네TV</span>
|
||||
<span class="body-s" style="font-weight: 600; color: var(--color-success);">7.8%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-fill" style="width: 80%; background: var(--color-success);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
||||
<span class="body-s">Naver Blog</span>
|
||||
<span class="body-s" style="font-weight: 600; color: var(--color-warning);">7.5%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-fill" style="width: 77%; background: var(--color-warning);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; align-items: flex-start; gap: var(--spacing-m);">
|
||||
<span class="material-icons" style="font-size: 32px;">lightbulb</span>
|
||||
<div>
|
||||
<div class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-s); color: white;">💡 AI 인사이트</div>
|
||||
<div class="body-s" style="color: white; line-height: 1.6;">
|
||||
QR코드가 가장 높은 참여율(9.8%)과 전환율(40%)을 보입니다. 오프라인 홍보를 강화하면 효과가 더 좋을 것 같아요. 또한 Instagram의 노출 대비 참여율이 좋으므로 SNS 콘텐츠 제작을 늘리는 것을 추천합니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<nav class="bottom-nav" role="navigation">
|
||||
<button type="button" class="nav-item" onclick="goToHome()">
|
||||
<span class="material-icons">home</span>
|
||||
<span>홈</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" onclick="goToEvents()">
|
||||
<span class="material-icons">event</span>
|
||||
<span>이벤트</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item active">
|
||||
<span class="material-icons">analytics</span>
|
||||
<span>분석</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" onclick="goToMy()">
|
||||
<span class="material-icons">person</span>
|
||||
<span>MY</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updatePeriodDisplay();
|
||||
});
|
||||
|
||||
function updatePeriodDisplay() {
|
||||
const select = document.getElementById('periodSelect');
|
||||
const display = document.getElementById('periodDisplay');
|
||||
const value = select.value;
|
||||
const today = new Date();
|
||||
let startDate;
|
||||
|
||||
if (value === 'all') {
|
||||
display.textContent = '2025-12-01 ~ 현재';
|
||||
} else {
|
||||
const days = parseInt(value);
|
||||
startDate = new Date(today);
|
||||
startDate.setDate(today.getDate() - days);
|
||||
|
||||
const formatDate = function(date) {
|
||||
return date.getFullYear() + '-' +
|
||||
String(date.getMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(date.getDate()).padStart(2, '0');
|
||||
};
|
||||
|
||||
display.textContent = formatDate(startDate) + ' ~ ' + formatDate(today);
|
||||
}
|
||||
}
|
||||
|
||||
window.changePeriod = function() {
|
||||
Loading.show('데이터 분석 중...');
|
||||
setTimeout(function() {
|
||||
Loading.hide();
|
||||
updatePeriodDisplay();
|
||||
Toast.success('기간이 변경되었습니다.');
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
window.viewChannelDetail = function(channel) {
|
||||
const channelNames = {
|
||||
qr: 'QR코드',
|
||||
instagram: 'Instagram',
|
||||
tv: '우리동네TV',
|
||||
blog: 'Naver Blog'
|
||||
};
|
||||
Toast.show('📊 ' + channelNames[channel] + ' 상세 분석');
|
||||
};
|
||||
|
||||
window.exportReport = function() {
|
||||
Loading.show('리포트 생성 중...');
|
||||
setTimeout(function() {
|
||||
Loading.hide();
|
||||
Toast.success('📄 채널 성과 리포트가 다운로드되었습니다!');
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
window.goToHome = function() {
|
||||
Toast.show('홈으로 이동');
|
||||
};
|
||||
|
||||
window.goToEvents = function() {
|
||||
Toast.show('이벤트 목록으로 이동');
|
||||
};
|
||||
|
||||
window.goToMy = function() {
|
||||
Toast.show('마이페이지로 이동');
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--color-gray-200);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: 1px solid var(--color-gray-300);
|
||||
display: flex;
|
||||
padding: var(--spacing-xs) 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: var(--spacing-xs);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-gray-600);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.nav-item .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.nav-item span:last-child {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
393
design/uiux/prototype/23-ROI분석.html
Normal file
393
design/uiux/prototype/23-ROI분석.html
Normal file
@ -0,0 +1,393 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ROI 분석 - KT AI 이벤트</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="header" role="banner">
|
||||
<div class="header-content">
|
||||
<button type="button" class="btn-icon" onclick="window.history.back()" aria-label="이전 페이지로 돌아가기">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="header-title">ROI 분석</h1>
|
||||
<div style="width: 40px;"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content" class="container" role="main" style="padding-bottom: 80px;">
|
||||
<section class="section">
|
||||
<h2 class="h3">💰 투자 대비 효과</h2>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
|
||||
<div class="card-body" style="text-align: center; padding: var(--spacing-xl);">
|
||||
<div class="caption" style="color: rgba(255,255,255,0.9); margin-bottom: var(--spacing-s);">ROI (투자 대비 수익률)</div>
|
||||
<div style="font-size: 56px; font-weight: 700; margin-bottom: var(--spacing-m); color: white;" id="roiValue">245%</div>
|
||||
<div class="body-m" style="color: rgba(255,255,255,0.95);">
|
||||
투자한 금액 대비 <span style="font-weight: 700;">2.45배</span> 수익!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="cost-title">
|
||||
<h3 id="cost-title" class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);">비용 내역</h3>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="margin-bottom: var(--spacing-l);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-s);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-warning);">card_giftcard</span>
|
||||
<span class="body-m" style="font-weight: 600;">경품 비용</span>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-error);">100,000원</span>
|
||||
</div>
|
||||
<div class="caption" style="color: var(--color-gray-600); padding-left: 32px;">
|
||||
상품권 10장 × 10,000원
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: var(--spacing-l);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s); margin-bottom: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-info);">settings</span>
|
||||
<span class="body-m" style="font-weight: 600;">플랫폼 이용료</span>
|
||||
</div>
|
||||
<div style="padding-left: 32px; display: flex; flex-direction: column; gap: var(--spacing-xs);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span class="body-s" style="color: var(--color-gray-600);">• 우리동네TV</span>
|
||||
<span class="body-s" style="color: var(--color-success); font-weight: 600;">무료</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span class="body-s" style="color: var(--color-gray-600);">• 지니TV</span>
|
||||
<span class="body-s" style="color: var(--color-success); font-weight: 600;">무료</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span class="body-s" style="color: var(--color-gray-600);">• SNS (Instagram, Blog)</span>
|
||||
<span class="body-s" style="color: var(--color-success); font-weight: 600;">무료</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top: 2px solid var(--color-gray-300); padding-top: var(--spacing-m);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span class="body-l" style="font-weight: 700;">총 투자</span>
|
||||
<span class="h3" style="color: var(--color-error);">100,000원</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="revenue-title">
|
||||
<h3 id="revenue-title" class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);">수익 내역</h3>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="margin-bottom: var(--spacing-l);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-s);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success);">trending_up</span>
|
||||
<span class="body-m" style="font-weight: 600;">매출 증가액</span>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-success);">180,000원</span>
|
||||
</div>
|
||||
<div class="caption" style="color: var(--color-gray-600); padding-left: 32px;">
|
||||
이벤트 기간 vs 평균 매출 비교
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: var(--spacing-l);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-s);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-primary-main);">people</span>
|
||||
<span class="body-m" style="font-weight: 600;">신규 고객 가치</span>
|
||||
</div>
|
||||
<span class="h4" style="color: var(--color-success);">65,000원</span>
|
||||
</div>
|
||||
<div class="caption" style="color: var(--color-gray-600); padding-left: 32px;">
|
||||
78명 × 예상 LTV (고객 생애 가치)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top: 2px solid var(--color-gray-300); padding-top: var(--spacing-m);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span class="body-l" style="font-weight: 700;">총 수익</span>
|
||||
<span class="h3" style="color: var(--color-success);">245,000원</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-l);">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s); margin-bottom: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success);">check_circle</span>
|
||||
<span class="body-m" style="font-weight: 600;">손익 분기점</span>
|
||||
</div>
|
||||
<div class="h4" style="color: var(--color-success); margin-bottom: 4px;">달성</div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">이벤트 3일차</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s); margin-bottom: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-info);">schedule</span>
|
||||
<span class="body-m" style="font-weight: 600;">회수 기간 예상</span>
|
||||
</div>
|
||||
<div class="h4" style="color: var(--color-info); margin-bottom: 4px;">약 1.5개월</div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">신규 고객 기준</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="trend-title">
|
||||
<h3 id="trend-title" class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);">ROI 추이</h3>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="margin-bottom: var(--spacing-m);">
|
||||
<canvas id="roiChart" width="100%" height="200" aria-label="ROI 추이 그래프"></canvas>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-s); text-align: center;">
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">12/1</div>
|
||||
<div class="body-s" style="font-weight: 600; color: var(--color-error);">-20%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">12/10</div>
|
||||
<div class="body-s" style="font-weight: 600; color: var(--color-warning);">150%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">12/20</div>
|
||||
<div class="body-s" style="font-weight: 600; color: var(--color-success);">245%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="alert alert-info" role="status">
|
||||
<div style="display: flex; align-items: flex-start; gap: var(--spacing-s);">
|
||||
<span class="material-icons">info</span>
|
||||
<div class="body-s">
|
||||
ROI는 5분마다 자동으로 업데이트됩니다. POS 시스템과 연동하여 실시간 매출 데이터를 반영합니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<nav class="bottom-nav" role="navigation">
|
||||
<button type="button" class="nav-item" onclick="goToHome()">
|
||||
<span class="material-icons">home</span>
|
||||
<span>홈</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" onclick="goToEvents()">
|
||||
<span class="material-icons">event</span>
|
||||
<span>이벤트</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item active">
|
||||
<span class="material-icons">analytics</span>
|
||||
<span>분석</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" onclick="goToMy()">
|
||||
<span class="material-icons">person</span>
|
||||
<span>MY</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
let roiChart;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
drawROIChart();
|
||||
startAutoUpdate();
|
||||
});
|
||||
|
||||
function drawROIChart() {
|
||||
const canvas = document.getElementById('roiChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Chart data points
|
||||
const dataPoints = [
|
||||
{ x: 0, y: -20 },
|
||||
{ x: 30, y: 50 },
|
||||
{ x: 50, y: 100 },
|
||||
{ x: 70, y: 150 },
|
||||
{ x: 100, y: 245 }
|
||||
];
|
||||
|
||||
// Scale and translate points
|
||||
const maxY = 300;
|
||||
const minY = -50;
|
||||
const padding = 20;
|
||||
|
||||
const scaleX = (width - 2 * padding) / 100;
|
||||
const scaleY = (height - 2 * padding) / (maxY - minY);
|
||||
|
||||
// Draw axes
|
||||
ctx.strokeStyle = '#E0E0E0';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
// X axis
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Y axis (zero line)
|
||||
const zeroY = height - padding - (0 - minY) * scaleY;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, zeroY);
|
||||
ctx.lineTo(width - padding, zeroY);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw line
|
||||
ctx.strokeStyle = '#667eea';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.lineCap = 'round';
|
||||
|
||||
ctx.beginPath();
|
||||
dataPoints.forEach(function(point, index) {
|
||||
const x = padding + point.x * scaleX;
|
||||
const y = height - padding - (point.y - minY) * scaleY;
|
||||
|
||||
if (index === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
});
|
||||
ctx.stroke();
|
||||
|
||||
// Draw points
|
||||
dataPoints.forEach(function(point) {
|
||||
const x = padding + point.x * scaleX;
|
||||
const y = height - padding - (point.y - minY) * scaleY;
|
||||
|
||||
ctx.fillStyle = point.y < 0 ? '#E31E24' : '#667eea';
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 4, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
// Fill area under curve
|
||||
ctx.fillStyle = 'rgba(102, 126, 234, 0.1)';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding + dataPoints[0].x * scaleX, zeroY);
|
||||
dataPoints.forEach(function(point) {
|
||||
const x = padding + point.x * scaleX;
|
||||
const y = height - padding - (point.y - minY) * scaleY;
|
||||
ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.lineTo(padding + dataPoints[dataPoints.length - 1].x * scaleX, zeroY);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function startAutoUpdate() {
|
||||
// Auto-update every 5 minutes
|
||||
setInterval(function() {
|
||||
updateROI();
|
||||
}, 300000);
|
||||
}
|
||||
|
||||
function updateROI() {
|
||||
// Simulate ROI update
|
||||
const currentROI = parseInt(document.getElementById('roiValue').textContent);
|
||||
const newROI = currentROI + Math.floor(Math.random() * 10);
|
||||
|
||||
document.getElementById('roiValue').textContent = newROI + '%';
|
||||
|
||||
// Redraw chart
|
||||
drawROIChart();
|
||||
}
|
||||
|
||||
window.goToHome = function() {
|
||||
Toast.show('홈으로 이동');
|
||||
};
|
||||
|
||||
window.goToEvents = function() {
|
||||
Toast.show('이벤트 목록으로 이동');
|
||||
};
|
||||
|
||||
window.goToMy = function() {
|
||||
Toast.show('마이페이지로 이동');
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: 1px solid var(--color-gray-300);
|
||||
display: flex;
|
||||
padding: var(--spacing-xs) 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: var(--spacing-xs);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-gray-600);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.nav-item .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.nav-item span:last-child {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#roiChart {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
385
design/uiux/prototype/24-분석리포트.html
Normal file
385
design/uiux/prototype/24-분석리포트.html
Normal file
@ -0,0 +1,385 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>분석 리포트 - KT AI 이벤트</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="header" role="banner">
|
||||
<div class="header-content">
|
||||
<button type="button" class="btn-icon" onclick="window.history.back()" aria-label="이전 페이지로 돌아가기">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="header-title">분석 리포트</h1>
|
||||
<div style="width: 40px;"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content" class="container" role="main" style="padding-bottom: 80px;">
|
||||
<section class="section">
|
||||
<h2 class="h3">📊 종합 분석 리포트</h2>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="body-s" style="color: var(--color-gray-600); margin-bottom: 4px;">이벤트</div>
|
||||
<div class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);" id="eventName">연말 대박 이벤트</div>
|
||||
|
||||
<div class="body-s" style="color: var(--color-gray-600); margin-bottom: 4px;">기간</div>
|
||||
<div class="body-m" id="eventPeriod">2025-12-01 ~ 2025-12-31</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="preview-title">
|
||||
<h3 id="preview-title" class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);">리포트 미리보기</h3>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<button type="button" class="report-preview" onclick="previewReport()" aria-label="리포트 미리보기">
|
||||
<div style="aspect-ratio: 1/1.414; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: var(--spacing-m);">
|
||||
<span class="material-icons" style="font-size: 64px; color: var(--color-gray-500); margin-bottom: var(--spacing-s);">description</span>
|
||||
<div class="body-s" style="color: var(--color-gray-600);">PDF 썸네일</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div style="display: flex; justify-content: center; gap: var(--spacing-l); padding: var(--spacing-m); background: var(--color-gray-100); border-radius: var(--radius-md);">
|
||||
<div style="text-align: center;">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">페이지</div>
|
||||
<div class="body-l" style="font-weight: 600;">10페이지</div>
|
||||
</div>
|
||||
<div style="width: 1px; background: var(--color-gray-300);"></div>
|
||||
<div style="text-align: center;">
|
||||
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">파일 크기</div>
|
||||
<div class="body-l" style="font-weight: 600;">5.2MB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="content-title">
|
||||
<h3 id="content-title" class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);">포함 내용</h3>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; flex-direction: column; gap: var(--spacing-s);">
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<span class="body-m">이벤트 개요</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<span class="body-m">참여 통계</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<span class="body-m">노출 통계</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<span class="body-m">매출 분석</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<span class="body-m">ROI 분석</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<span class="body-m">채널별 성과 비교</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<span class="body-m">업종 평균 벤치마킹</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
|
||||
<span class="material-icons" style="color: var(--color-success); font-size: 20px;">check_circle</span>
|
||||
<span class="body-m">그래프 시각화</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<button type="button" class="btn btn-primary btn-lg" onclick="downloadPDF()" style="width: 100%; margin-bottom: var(--spacing-s);">
|
||||
<span class="material-icons">download</span>
|
||||
<span>PDF 다운로드</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-outline btn-lg" onclick="sendEmail()" style="width: 100%;">
|
||||
<span class="material-icons">email</span>
|
||||
<span>이메일로 받기</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="history-title">
|
||||
<h3 id="history-title" class="body-l" style="font-weight: 600; margin-bottom: var(--spacing-m);">생성 이력</h3>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">최종 리포트</div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">2025-12-31 16:00</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-text btn-sm" onclick="downloadHistory(0)">
|
||||
<span class="material-icons">download</span>
|
||||
<span>다운로드</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">중간 리포트</div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">2025-12-15 14:30</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-text btn-sm" onclick="downloadHistory(1)">
|
||||
<span class="material-icons">download</span>
|
||||
<span>다운로드</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div>
|
||||
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">초기 리포트</div>
|
||||
<div class="caption" style="color: var(--color-gray-600);">2025-12-01 10:00</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-text btn-sm" onclick="downloadHistory(2)">
|
||||
<span class="material-icons">download</span>
|
||||
<span>다운로드</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="alert alert-info" role="status">
|
||||
<div style="display: flex; align-items: flex-start; gap: var(--spacing-s);">
|
||||
<span class="material-icons">info</span>
|
||||
<div class="body-s">
|
||||
리포트 생성은 최대 30초가 소요됩니다. PDF 파일은 최대 10MB까지 최적화됩니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Email Modal -->
|
||||
<div id="emailModal" class="modal" role="dialog" aria-modal="true" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="h4">이메일 발송</h3>
|
||||
<button type="button" class="btn-icon" onclick="closeEmailModal()">
|
||||
<span class="material-icons">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="emailInput" class="form-label">받는 사람</label>
|
||||
<input type="email" id="emailInput" class="input-field" placeholder="example@email.com" value="" aria-label="이메일 주소">
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info" role="status">
|
||||
<div style="display: flex; align-items: flex-start; gap: var(--spacing-s);">
|
||||
<span class="material-icons">info</span>
|
||||
<div class="body-s">
|
||||
등록된 이메일 주소로 리포트가 발송됩니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline btn-lg" onclick="closeEmailModal()" style="flex: 1;">
|
||||
취소
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-lg" onclick="confirmSendEmail()" style="flex: 1;">
|
||||
발송
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<nav class="bottom-nav" role="navigation">
|
||||
<button type="button" class="nav-item" onclick="goToHome()">
|
||||
<span class="material-icons">home</span>
|
||||
<span>홈</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" onclick="goToEvents()">
|
||||
<span class="material-icons">event</span>
|
||||
<span>이벤트</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item active">
|
||||
<span class="material-icons">analytics</span>
|
||||
<span>분석</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" onclick="goToMy()">
|
||||
<span class="material-icons">person</span>
|
||||
<span>MY</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<script src="js/common.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const eventData = AppState.currentEvent || {};
|
||||
const storeData = AppState.store || {};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadEventInfo();
|
||||
loadUserEmail();
|
||||
});
|
||||
|
||||
function loadEventInfo() {
|
||||
if (eventData.name) {
|
||||
document.getElementById('eventName').textContent = eventData.name;
|
||||
}
|
||||
|
||||
if (eventData.startDate && eventData.endDate) {
|
||||
document.getElementById('eventPeriod').textContent =
|
||||
eventData.startDate + ' ~ ' + eventData.endDate;
|
||||
}
|
||||
}
|
||||
|
||||
function loadUserEmail() {
|
||||
const user = AppState.user || {};
|
||||
if (user.email) {
|
||||
document.getElementById('emailInput').value = user.email;
|
||||
}
|
||||
}
|
||||
|
||||
window.previewReport = function() {
|
||||
Toast.show('📄 리포트 미리보기');
|
||||
};
|
||||
|
||||
window.downloadPDF = function() {
|
||||
Loading.show('리포트 생성 중...');
|
||||
|
||||
// Simulate PDF generation (30 seconds max)
|
||||
setTimeout(function() {
|
||||
Loading.hide();
|
||||
Toast.success('📥 분석 리포트가 다운로드되었습니다!');
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
window.sendEmail = function() {
|
||||
Modal.open(document.getElementById('emailModal'));
|
||||
};
|
||||
|
||||
window.closeEmailModal = function() {
|
||||
Modal.close(document.getElementById('emailModal'));
|
||||
};
|
||||
|
||||
window.confirmSendEmail = function() {
|
||||
const email = document.getElementById('emailInput').value;
|
||||
|
||||
if (!email) {
|
||||
Toast.error('이메일 주소를 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
Toast.error('올바른 이메일 주소를 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
Modal.close(document.getElementById('emailModal'));
|
||||
Loading.show('이메일 발송 중...');
|
||||
|
||||
setTimeout(function() {
|
||||
Loading.hide();
|
||||
Toast.success('✉️ ' + email + '로 리포트가 발송되었습니다!');
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
window.downloadHistory = function(index) {
|
||||
const dates = ['2025-12-31 16:00', '2025-12-15 14:30', '2025-12-01 10:00'];
|
||||
Loading.show('리포트 다운로드 중...');
|
||||
|
||||
setTimeout(function() {
|
||||
Loading.hide();
|
||||
Toast.success('📥 ' + dates[index] + ' 리포트가 다운로드되었습니다!');
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
window.goToHome = function() {
|
||||
Toast.show('홈으로 이동');
|
||||
};
|
||||
|
||||
window.goToEvents = function() {
|
||||
Toast.show('이벤트 목록으로 이동');
|
||||
};
|
||||
|
||||
window.goToMy = function() {
|
||||
Toast.show('마이페이지로 이동');
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.report-preview {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.report-preview:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: 1px solid var(--color-gray-300);
|
||||
display: flex;
|
||||
padding: var(--spacing-xs) 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: var(--spacing-xs);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-gray-600);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.nav-item .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.nav-item span:last-child {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user