mirror of
https://github.com/ktds-dg0501/kt-event-marketing.git
synced 2026-01-21 13:26:23 +00:00
프로토~ 6
This commit is contained in:
doyeon
parent
2668acd226
commit
af5672847f
@ -256,11 +256,11 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
window.goToEvents = function() {
|
window.goToEvents = function() {
|
||||||
Toast.show('이벤트 목록으로 이동');
|
window.location.href = '26-이벤트목록.html';
|
||||||
};
|
};
|
||||||
|
|
||||||
window.goToMy = function() {
|
window.goToMy = function() {
|
||||||
Toast.show('마이페이지로 이동');
|
window.location.href = '25-마이페이지.html';
|
||||||
};
|
};
|
||||||
|
|
||||||
// Cleanup on page unload
|
// Cleanup on page unload
|
||||||
|
|||||||
@ -455,11 +455,11 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
window.goToEvents = function() {
|
window.goToEvents = function() {
|
||||||
Toast.show('이벤트 목록으로 이동');
|
window.location.href = '26-이벤트목록.html';
|
||||||
};
|
};
|
||||||
|
|
||||||
window.goToMy = function() {
|
window.goToMy = function() {
|
||||||
Toast.show('마이페이지로 이동');
|
window.location.href = '25-마이페이지.html';
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -335,11 +335,11 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
window.goToEvents = function() {
|
window.goToEvents = function() {
|
||||||
Toast.show('이벤트 목록으로 이동');
|
window.location.href = '26-이벤트목록.html';
|
||||||
};
|
};
|
||||||
|
|
||||||
window.goToMy = function() {
|
window.goToMy = function() {
|
||||||
Toast.show('마이페이지로 이동');
|
window.location.href = '25-마이페이지.html';
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -320,11 +320,11 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
window.goToEvents = function() {
|
window.goToEvents = function() {
|
||||||
Toast.show('이벤트 목록으로 이동');
|
window.location.href = '26-이벤트목록.html';
|
||||||
};
|
};
|
||||||
|
|
||||||
window.goToMy = function() {
|
window.goToMy = function() {
|
||||||
Toast.show('마이페이지로 이동');
|
window.location.href = '25-마이페이지.html';
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
480
design/uiux/prototype/25-마이페이지.html
Normal file
480
design/uiux/prototype/25-마이페이지.html
Normal file
@ -0,0 +1,480 @@
|
|||||||
|
<!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">
|
||||||
|
<h1 class="app-bar__title">마이페이지</h1>
|
||||||
|
<button class="app-bar__action" aria-label="설정">
|
||||||
|
<span class="material-icons">settings</span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main id="main-content" class="app-content" style="padding-bottom: 80px;">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Profile Section -->
|
||||||
|
<section style="margin-bottom: 24px;">
|
||||||
|
<div class="card" style="padding: 24px;">
|
||||||
|
<div style="display: flex; align-items: center; gap: 16px;">
|
||||||
|
<!-- Profile Image -->
|
||||||
|
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, var(--color-primary-main), #C71F24); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||||
|
<span class="material-icons" style="font-size: 36px; color: white;">person</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Profile Info -->
|
||||||
|
<div style="flex: 1;">
|
||||||
|
<div class="h3" style="margin-bottom: 4px;" id="userName">홍길동</div>
|
||||||
|
<div class="body-s text-muted" id="userEmail">hong@example.com</div>
|
||||||
|
<div class="body-s text-muted" id="userPhone">010-1234-5678</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit Button -->
|
||||||
|
<button class="btn btn-secondary btn-sm" onclick="editProfile()">
|
||||||
|
수정
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Store Info Section -->
|
||||||
|
<section style="margin-bottom: 24px;">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
||||||
|
<h2 class="h3">매장 정보</h2>
|
||||||
|
<button class="btn btn-text btn-sm" style="color: var(--color-primary-main);" onclick="editStore()">
|
||||||
|
수정
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" style="padding: 20px;" id="storeInfo">
|
||||||
|
<div style="text-align: center; padding: 20px 0; color: var(--color-gray-400);">
|
||||||
|
<span class="material-icons" style="font-size: 48px; margin-bottom: 12px;">store</span>
|
||||||
|
<p class="body-m text-muted">등록된 매장이 없습니다</p>
|
||||||
|
<button class="btn btn-primary btn-sm" style="margin-top: 12px;" onclick="window.location.href='02-매장정보등록.html'">
|
||||||
|
매장 등록하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Menu List -->
|
||||||
|
<section style="margin-bottom: 24px;">
|
||||||
|
<h2 class="h3" style="margin-bottom: 12px;">서비스 관리</h2>
|
||||||
|
|
||||||
|
<div class="card" style="padding: 0; overflow: hidden;">
|
||||||
|
<!-- Subscription -->
|
||||||
|
<button class="menu-item" onclick="manageSubscription()">
|
||||||
|
<span class="material-icons" style="color: var(--color-primary-main);">card_membership</span>
|
||||||
|
<span style="flex: 1;">구독 관리</span>
|
||||||
|
<span class="badge badge-primary">무료 체험</span>
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Payment History -->
|
||||||
|
<button class="menu-item">
|
||||||
|
<span class="material-icons" style="color: var(--color-secondary-main);">receipt_long</span>
|
||||||
|
<span style="flex: 1;">결제 내역</span>
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Coupon -->
|
||||||
|
<button class="menu-item">
|
||||||
|
<span class="material-icons" style="color: var(--color-warning);">local_offer</span>
|
||||||
|
<span style="flex: 1;">쿠폰함</span>
|
||||||
|
<span class="badge badge-error">1</span>
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Settings -->
|
||||||
|
<section style="margin-bottom: 24px;">
|
||||||
|
<h2 class="h3" style="margin-bottom: 12px;">설정</h2>
|
||||||
|
|
||||||
|
<div class="card" style="padding: 0; overflow: hidden;">
|
||||||
|
<!-- Notifications -->
|
||||||
|
<button class="menu-item">
|
||||||
|
<span class="material-icons" style="color: var(--color-info);">notifications</span>
|
||||||
|
<span style="flex: 1;">알림 설정</span>
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Language -->
|
||||||
|
<button class="menu-item">
|
||||||
|
<span class="material-icons" style="color: var(--color-success);">language</span>
|
||||||
|
<span style="flex: 1;">언어 설정</span>
|
||||||
|
<span class="body-s text-muted">한국어</span>
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Privacy -->
|
||||||
|
<button class="menu-item">
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-600);">privacy_tip</span>
|
||||||
|
<span style="flex: 1;">개인정보 처리방침</span>
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Terms -->
|
||||||
|
<button class="menu-item">
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-600);">description</span>
|
||||||
|
<span style="flex: 1;">서비스 이용약관</span>
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Support -->
|
||||||
|
<section style="margin-bottom: 24px;">
|
||||||
|
<h2 class="h3" style="margin-bottom: 12px;">고객 지원</h2>
|
||||||
|
|
||||||
|
<div class="card" style="padding: 0; overflow: hidden;">
|
||||||
|
<!-- FAQ -->
|
||||||
|
<button class="menu-item">
|
||||||
|
<span class="material-icons" style="color: var(--color-secondary-main);">help</span>
|
||||||
|
<span style="flex: 1;">자주 묻는 질문</span>
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Customer Service -->
|
||||||
|
<button class="menu-item">
|
||||||
|
<span class="material-icons" style="color: var(--color-primary-main);">headset_mic</span>
|
||||||
|
<span style="flex: 1;">1:1 문의</span>
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- App Version -->
|
||||||
|
<div class="menu-item" style="cursor: default;">
|
||||||
|
<span class="material-icons" style="color: var(--color-gray-400);">info</span>
|
||||||
|
<span style="flex: 1;">앱 버전</span>
|
||||||
|
<span class="body-s text-muted">v1.0.0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Logout -->
|
||||||
|
<section style="margin-bottom: 32px;">
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary btn-lg btn-block"
|
||||||
|
onclick="logout()"
|
||||||
|
style="margin-bottom: 12px;"
|
||||||
|
>
|
||||||
|
로그아웃
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-text btn-sm btn-block"
|
||||||
|
style="color: var(--color-error);"
|
||||||
|
onclick="confirmWithdraw()"
|
||||||
|
>
|
||||||
|
회원 탈퇴
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Bottom Navigation -->
|
||||||
|
<nav class="bottom-nav">
|
||||||
|
<button class="bottom-nav__item" data-page="home" onclick="window.location.href='21.5-홈.html'">
|
||||||
|
<span class="material-icons">home</span>
|
||||||
|
<span>홈</span>
|
||||||
|
</button>
|
||||||
|
<button class="bottom-nav__item" data-page="event" onclick="window.location.href='03-이벤트목적선택.html'">
|
||||||
|
<span class="material-icons">campaign</span>
|
||||||
|
<span>이벤트</span>
|
||||||
|
</button>
|
||||||
|
<button class="bottom-nav__item" data-page="analytics" onclick="window.location.href='21-실시간대시보드.html'">
|
||||||
|
<span class="material-icons">analytics</span>
|
||||||
|
<span>분석</span>
|
||||||
|
</button>
|
||||||
|
<button class="bottom-nav__item active" data-page="my">
|
||||||
|
<span class="material-icons">person</span>
|
||||||
|
<span>MY</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="js/common.js"></script>
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// 사용자 정보 로드
|
||||||
|
const user = window.AppState.user;
|
||||||
|
const store = window.AppState.store;
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
document.getElementById('userName').textContent = user.name || '사용자';
|
||||||
|
if (user.email) {
|
||||||
|
document.getElementById('userEmail').textContent = user.email;
|
||||||
|
}
|
||||||
|
if (user.phone) {
|
||||||
|
document.getElementById('userPhone').textContent = user.phone;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 매장 정보 표시
|
||||||
|
if (store) {
|
||||||
|
const storeInfo = document.getElementById('storeInfo');
|
||||||
|
storeInfo.innerHTML = `
|
||||||
|
<div style="margin-bottom: 16px;">
|
||||||
|
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">${store.name}</div>
|
||||||
|
<div class="body-s text-muted" style="margin-bottom: 4px;">
|
||||||
|
<span class="material-icons" style="font-size: 14px; vertical-align: middle;">business</span>
|
||||||
|
${store.businessTypeName || store.businessType}
|
||||||
|
</div>
|
||||||
|
<div class="body-s text-muted" style="margin-bottom: 4px;">
|
||||||
|
<span class="material-icons" style="font-size: 14px; vertical-align: middle;">location_on</span>
|
||||||
|
${store.address}
|
||||||
|
</div>
|
||||||
|
<div class="body-s text-muted">
|
||||||
|
<span class="material-icons" style="font-size: 14px; vertical-align: middle;">credit_card</span>
|
||||||
|
${store.businessNumber}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
${store.menuItems && store.menuItems.length > 0 ? `
|
||||||
|
<div style="padding-top: 16px; border-top: 1px solid var(--color-gray-200);">
|
||||||
|
<div class="body-s text-muted" style="margin-bottom: 8px;">대표 메뉴</div>
|
||||||
|
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||||
|
${store.menuItems.slice(0, 3).map(item => `
|
||||||
|
<span class="badge" style="background: var(--color-gray-100); color: var(--color-gray-700);">
|
||||||
|
${item.name}
|
||||||
|
</span>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 프로필 수정
|
||||||
|
window.editProfile = function() {
|
||||||
|
Modal.show({
|
||||||
|
title: '프로필 수정',
|
||||||
|
body: `
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">이름</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="editName"
|
||||||
|
class="form-input"
|
||||||
|
value="${user?.name || ''}"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">이메일</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="editEmail"
|
||||||
|
class="form-input"
|
||||||
|
value="${user?.email || ''}"
|
||||||
|
${user?.authType === 'kt' ? 'disabled' : ''}
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">전화번호</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="editPhone"
|
||||||
|
class="form-input"
|
||||||
|
value="${user?.phone || ''}"
|
||||||
|
${user?.authType === 'kt' ? 'disabled' : ''}
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
confirmText: '저장',
|
||||||
|
onConfirm: function() {
|
||||||
|
const name = document.getElementById('editName').value;
|
||||||
|
const email = document.getElementById('editEmail').value;
|
||||||
|
const phone = document.getElementById('editPhone').value;
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
user.name = name;
|
||||||
|
if (user.authType !== 'kt') {
|
||||||
|
user.email = email;
|
||||||
|
user.phone = phone;
|
||||||
|
}
|
||||||
|
window.AppState.save();
|
||||||
|
|
||||||
|
document.getElementById('userName').textContent = name;
|
||||||
|
if (email) document.getElementById('userEmail').textContent = email;
|
||||||
|
if (phone) document.getElementById('userPhone').textContent = phone;
|
||||||
|
|
||||||
|
Toast.success('프로필이 수정되었습니다.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 매장 정보 수정
|
||||||
|
window.editStore = function() {
|
||||||
|
if (!store) {
|
||||||
|
Toast.info('먼저 매장을 등록해주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.location.href = '02-매장정보등록.html';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 구독 관리
|
||||||
|
window.manageSubscription = function() {
|
||||||
|
Modal.show({
|
||||||
|
title: '구독 관리',
|
||||||
|
body: `
|
||||||
|
<div style="text-align: center; padding: 20px;">
|
||||||
|
<div class="h2" style="color: var(--color-primary-main); margin-bottom: 16px;">무료 체험 중</div>
|
||||||
|
<p class="body-m text-muted" style="margin-bottom: 24px;">
|
||||||
|
첫 이벤트 생성 시 무료 체험 쿠폰을 사용할 수 있습니다.
|
||||||
|
</p>
|
||||||
|
<div class="card" style="padding: 16px; background: var(--color-gray-50);">
|
||||||
|
<div class="body-m" style="font-weight: 600; margin-bottom: 12px;">프리미엄 플랜</div>
|
||||||
|
<div class="h2" style="color: var(--color-primary-main); margin-bottom: 8px;">₩29,000 <span class="body-m text-muted">/ 월</span></div>
|
||||||
|
<ul style="text-align: left; margin-top: 16px; padding-left: 20px;">
|
||||||
|
<li class="body-s" style="margin-bottom: 8px;">무제한 이벤트 생성</li>
|
||||||
|
<li class="body-s" style="margin-bottom: 8px;">AI 고급 기능 사용</li>
|
||||||
|
<li class="body-s" style="margin-bottom: 8px;">우선 고객 지원</li>
|
||||||
|
<li class="body-s">상세 분석 리포트</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
confirmText: '업그레이드',
|
||||||
|
onConfirm: function() {
|
||||||
|
Toast.info('결제 기능은 준비 중입니다.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 로그아웃
|
||||||
|
window.logout = function() {
|
||||||
|
Modal.confirm(
|
||||||
|
'로그아웃',
|
||||||
|
'정말 로그아웃 하시겠습니까?',
|
||||||
|
function() {
|
||||||
|
Loading.show('로그아웃 중...');
|
||||||
|
setTimeout(() => {
|
||||||
|
window.AppState.clear();
|
||||||
|
Loading.hide();
|
||||||
|
Toast.success('로그아웃되었습니다.');
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = '00-로그인.html';
|
||||||
|
}, 500);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 회원 탈퇴
|
||||||
|
window.confirmWithdraw = function() {
|
||||||
|
Modal.show({
|
||||||
|
title: '⚠️ 회원 탈퇴',
|
||||||
|
body: `
|
||||||
|
<div style="padding: 16px 0;">
|
||||||
|
<p class="body-m" style="margin-bottom: 16px;">
|
||||||
|
회원 탈퇴 시 모든 데이터가 삭제되며 복구할 수 없습니다.
|
||||||
|
</p>
|
||||||
|
<div class="card" style="padding: 16px; background: #FFF5F5; border: 1px solid var(--color-error);">
|
||||||
|
<div class="body-s" style="color: var(--color-error); line-height: 1.6;">
|
||||||
|
• 진행 중인 이벤트 정보<br>
|
||||||
|
• 매장 정보 및 통계<br>
|
||||||
|
• 결제 내역 및 쿠폰<br>
|
||||||
|
• 모든 분석 데이터
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="body-s text-muted" style="margin-top: 16px;">
|
||||||
|
정말 탈퇴하시겠습니까?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
confirmText: '탈퇴하기',
|
||||||
|
cancelText: '취소',
|
||||||
|
onConfirm: function() {
|
||||||
|
Loading.show('회원 탈퇴 처리 중...');
|
||||||
|
setTimeout(() => {
|
||||||
|
window.AppState.clear();
|
||||||
|
Loading.hide();
|
||||||
|
Toast.success('회원 탈퇴가 완료되었습니다.');
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = '00-로그인.html';
|
||||||
|
}, 500);
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Bottom Navigation 활성화
|
||||||
|
Navigation.updateBottomNav('my');
|
||||||
|
|
||||||
|
console.log('마이페이지 로드 완료');
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.menu-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid var(--color-gray-200);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:hover {
|
||||||
|
background-color: var(--color-gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:active {
|
||||||
|
background-color: var(--color-gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-primary {
|
||||||
|
background: var(--color-primary-light);
|
||||||
|
color: var(--color-primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-error {
|
||||||
|
background: var(--color-error);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-success {
|
||||||
|
background: var(--color-success);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
365
design/uiux/prototype/26-이벤트목록.html
Normal file
365
design/uiux/prototype/26-이벤트목록.html
Normal file
@ -0,0 +1,365 @@
|
|||||||
|
<!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">
|
||||||
|
<h1 class="app-bar__title">이벤트 목록</h1>
|
||||||
|
<button class="app-bar__action" aria-label="검색">
|
||||||
|
<span class="material-icons">search</span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main id="main-content" class="app-content" style="padding-bottom: 100px;">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Filter Tabs -->
|
||||||
|
<section style="margin-bottom: 24px;">
|
||||||
|
<div style="display: flex; gap: 8px; overflow-x: auto; padding: 4px 0;">
|
||||||
|
<button class="filter-chip active" onclick="filterEvents('all')">
|
||||||
|
전체 <span class="badge" style="background: var(--color-primary-main); color: white; margin-left: 4px;">0</span>
|
||||||
|
</button>
|
||||||
|
<button class="filter-chip" onclick="filterEvents('active')">
|
||||||
|
진행중 <span class="badge" style="background: var(--color-success); color: white; margin-left: 4px;">0</span>
|
||||||
|
</button>
|
||||||
|
<button class="filter-chip" onclick="filterEvents('scheduled')">
|
||||||
|
예정 <span class="badge" style="background: var(--color-info); color: white; margin-left: 4px;">0</span>
|
||||||
|
</button>
|
||||||
|
<button class="filter-chip" onclick="filterEvents('completed')">
|
||||||
|
종료 <span class="badge" style="background: var(--color-gray-400); color: white; margin-left: 4px;">0</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Event List -->
|
||||||
|
<section id="eventList">
|
||||||
|
<!-- Empty State -->
|
||||||
|
<div class="card" style="padding: 60px 24px; text-align: center;">
|
||||||
|
<div style="width: 80px; height: 80px; background: var(--color-gray-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;">
|
||||||
|
<span class="material-icons" style="font-size: 48px; color: var(--color-gray-400);">event_busy</span>
|
||||||
|
</div>
|
||||||
|
<div class="h3" style="margin-bottom: 12px;">진행 중인 이벤트가 없습니다</div>
|
||||||
|
<p class="body-m text-muted" style="margin-bottom: 24px;">
|
||||||
|
AI가 자동으로 이벤트를 기획해드립니다.<br>
|
||||||
|
첫 이벤트를 만들어보세요!
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary btn-md"
|
||||||
|
onclick="window.location.href='03-이벤트목적선택.html'"
|
||||||
|
>
|
||||||
|
<span class="material-icons" style="font-size: 20px; margin-right: 4px;">add_circle</span>
|
||||||
|
새 이벤트 만들기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Example Event Cards (주석 처리됨 - 실제 이벤트가 있을 때 표시) -->
|
||||||
|
<!--
|
||||||
|
<div class="card" style="padding: 20px; margin-bottom: 16px; cursor: pointer;" onclick="viewEvent(1)">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
|
||||||
|
<div style="flex: 1;">
|
||||||
|
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">설날 특별 할인 이벤트</div>
|
||||||
|
<div class="body-s text-muted">2025.01.20 ~ 2025.02.10</div>
|
||||||
|
</div>
|
||||||
|
<span class="badge badge-success">진행중</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 16px; padding: 16px; background: var(--color-gray-50); border-radius: 8px; margin-bottom: 16px;">
|
||||||
|
<div style="flex: 1; text-align: center;">
|
||||||
|
<div class="body-s text-muted" style="margin-bottom: 4px;">참여자</div>
|
||||||
|
<div class="body-l" style="font-weight: 600;">1,234</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex: 1; text-align: center; border-left: 1px solid var(--color-gray-200);">
|
||||||
|
<div class="body-s text-muted" style="margin-bottom: 4px;">조회수</div>
|
||||||
|
<div class="body-l" style="font-weight: 600;">5,678</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex: 1; text-align: center; border-left: 1px solid var(--color-gray-200);">
|
||||||
|
<div class="body-s text-muted" style="margin-bottom: 4px;">ROI</div>
|
||||||
|
<div class="body-l" style="font-weight: 600; color: var(--color-success);">+245%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 8px;">
|
||||||
|
<button class="btn btn-secondary btn-sm" style="flex: 1;" onclick="event.stopPropagation(); editEvent(1)">
|
||||||
|
수정
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-text btn-sm" onclick="event.stopPropagation(); viewAnalytics(1)">
|
||||||
|
분석 보기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Floating Action Button -->
|
||||||
|
<button
|
||||||
|
class="fab"
|
||||||
|
onclick="window.location.href='03-이벤트목적선택.html'"
|
||||||
|
aria-label="새 이벤트 만들기"
|
||||||
|
>
|
||||||
|
<span class="material-icons">add</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Bottom Navigation -->
|
||||||
|
<nav class="bottom-nav">
|
||||||
|
<button class="bottom-nav__item" data-page="home" onclick="window.location.href='21.5-홈.html'">
|
||||||
|
<span class="material-icons">home</span>
|
||||||
|
<span>홈</span>
|
||||||
|
</button>
|
||||||
|
<button class="bottom-nav__item active" data-page="event">
|
||||||
|
<span class="material-icons">campaign</span>
|
||||||
|
<span>이벤트</span>
|
||||||
|
</button>
|
||||||
|
<button class="bottom-nav__item" data-page="analytics" onclick="window.location.href='21-실시간대시보드.html'">
|
||||||
|
<span class="material-icons">analytics</span>
|
||||||
|
<span>분석</span>
|
||||||
|
</button>
|
||||||
|
<button class="bottom-nav__item" data-page="my" onclick="window.location.href='25-마이페이지.html'">
|
||||||
|
<span class="material-icons">person</span>
|
||||||
|
<span>MY</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="js/common.js"></script>
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
let currentFilter = 'all';
|
||||||
|
let events = []; // 실제로는 서버에서 가져옴
|
||||||
|
|
||||||
|
// 이벤트 필터링
|
||||||
|
window.filterEvents = function(filter) {
|
||||||
|
currentFilter = filter;
|
||||||
|
|
||||||
|
// 필터 칩 활성화
|
||||||
|
document.querySelectorAll('.filter-chip').forEach(chip => {
|
||||||
|
chip.classList.remove('active');
|
||||||
|
});
|
||||||
|
event.target.closest('.filter-chip').classList.add('active');
|
||||||
|
|
||||||
|
// 이벤트 목록 다시 렌더링
|
||||||
|
renderEventList();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 이벤트 목록 렌더링
|
||||||
|
function renderEventList() {
|
||||||
|
const eventList = document.getElementById('eventList');
|
||||||
|
|
||||||
|
// 필터링된 이벤트 가져오기
|
||||||
|
let filteredEvents = events;
|
||||||
|
if (currentFilter !== 'all') {
|
||||||
|
filteredEvents = events.filter(e => e.status === currentFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 이벤트가 없을 경우
|
||||||
|
if (filteredEvents.length === 0) {
|
||||||
|
eventList.innerHTML = `
|
||||||
|
<div class="card" style="padding: 60px 24px; text-align: center;">
|
||||||
|
<div style="width: 80px; height: 80px; background: var(--color-gray-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;">
|
||||||
|
<span class="material-icons" style="font-size: 48px; color: var(--color-gray-400);">event_busy</span>
|
||||||
|
</div>
|
||||||
|
<div class="h3" style="margin-bottom: 12px;">
|
||||||
|
${currentFilter === 'all' ? '진행 중인 이벤트가 없습니다' : `${getFilterName(currentFilter)} 이벤트가 없습니다`}
|
||||||
|
</div>
|
||||||
|
<p class="body-m text-muted" style="margin-bottom: 24px;">
|
||||||
|
AI가 자동으로 이벤트를 기획해드립니다.<br>
|
||||||
|
첫 이벤트를 만들어보세요!
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary btn-md"
|
||||||
|
onclick="window.location.href='03-이벤트목적선택.html'"
|
||||||
|
>
|
||||||
|
<span class="material-icons" style="font-size: 20px; margin-right: 4px;">add_circle</span>
|
||||||
|
새 이벤트 만들기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 이벤트 카드 렌더링
|
||||||
|
eventList.innerHTML = filteredEvents.map(event => `
|
||||||
|
<div class="card" style="padding: 20px; margin-bottom: 16px; cursor: pointer;" onclick="viewEvent('${event.id}')">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
|
||||||
|
<div style="flex: 1;">
|
||||||
|
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">${event.title}</div>
|
||||||
|
<div class="body-s text-muted">${event.startDate} ~ ${event.endDate}</div>
|
||||||
|
</div>
|
||||||
|
<span class="badge ${getStatusBadgeClass(event.status)}">${getStatusText(event.status)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 16px; padding: 16px; background: var(--color-gray-50); border-radius: 8px; margin-bottom: 16px;">
|
||||||
|
<div style="flex: 1; text-align: center;">
|
||||||
|
<div class="body-s text-muted" style="margin-bottom: 4px;">참여자</div>
|
||||||
|
<div class="body-l" style="font-weight: 600;">${Utils.formatNumber(event.participants)}</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex: 1; text-align: center; border-left: 1px solid var(--color-gray-200);">
|
||||||
|
<div class="body-s text-muted" style="margin-bottom: 4px;">조회수</div>
|
||||||
|
<div class="body-l" style="font-weight: 600;">${Utils.formatNumber(event.views)}</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex: 1; text-align: center; border-left: 1px solid var(--color-gray-200);">
|
||||||
|
<div class="body-s text-muted" style="margin-bottom: 4px;">ROI</div>
|
||||||
|
<div class="body-l" style="font-weight: 600; color: var(--color-success);">+${event.roi}%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 8px;">
|
||||||
|
<button class="btn btn-secondary btn-sm" style="flex: 1;" onclick="event.stopPropagation(); editEvent('${event.id}')">
|
||||||
|
수정
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-text btn-sm" onclick="event.stopPropagation(); viewAnalytics('${event.id}')">
|
||||||
|
분석 보기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 필터 이름 반환
|
||||||
|
function getFilterName(filter) {
|
||||||
|
const names = {
|
||||||
|
active: '진행중',
|
||||||
|
scheduled: '예정',
|
||||||
|
completed: '종료'
|
||||||
|
};
|
||||||
|
return names[filter] || '전체';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 상태 텍스트 반환
|
||||||
|
function getStatusText(status) {
|
||||||
|
const texts = {
|
||||||
|
active: '진행중',
|
||||||
|
scheduled: '예정',
|
||||||
|
completed: '종료'
|
||||||
|
};
|
||||||
|
return texts[status] || status;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 상태 배지 클래스 반환
|
||||||
|
function getStatusBadgeClass(status) {
|
||||||
|
const classes = {
|
||||||
|
active: 'badge-success',
|
||||||
|
scheduled: 'badge-info',
|
||||||
|
completed: 'badge-gray'
|
||||||
|
};
|
||||||
|
return classes[status] || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 이벤트 상세 보기
|
||||||
|
window.viewEvent = function(eventId) {
|
||||||
|
Toast.info(`이벤트 상세 페이지로 이동 (ID: ${eventId})`);
|
||||||
|
// 실제로는 이벤트 상세 페이지로 이동
|
||||||
|
// window.location.href = `이벤트상세.html?id=${eventId}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 이벤트 수정
|
||||||
|
window.editEvent = function(eventId) {
|
||||||
|
Toast.info(`이벤트 수정 (ID: ${eventId})`);
|
||||||
|
// 실제로는 이벤트 수정 페이지로 이동
|
||||||
|
};
|
||||||
|
|
||||||
|
// 분석 보기
|
||||||
|
window.viewAnalytics = function(eventId) {
|
||||||
|
window.location.href = '21-실시간대시보드.html';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Bottom Navigation 활성화
|
||||||
|
Navigation.updateBottomNav('event');
|
||||||
|
|
||||||
|
// 초기화
|
||||||
|
renderEventList();
|
||||||
|
console.log('이벤트 목록 페이지 로드 완료');
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.filter-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid var(--color-gray-300);
|
||||||
|
background: white;
|
||||||
|
color: var(--color-gray-700);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip:hover {
|
||||||
|
background: var(--color-gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip.active {
|
||||||
|
background: var(--color-primary-main);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--color-primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 90px;
|
||||||
|
right: 20px;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, var(--color-primary-main), #C71F24);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 4px 12px rgba(227, 30, 36, 0.4);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 6px 16px rgba(227, 30, 36, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab .material-icons {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-info {
|
||||||
|
background: var(--color-info);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-gray {
|
||||||
|
background: var(--color-gray-400);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user