프로토~ 5

This commit is contained in:
doyeon 2025-10-20 14:57:32 +09:00
parent c6621ff151
commit 2668acd226
6 changed files with 512 additions and 4 deletions

View File

@ -0,0 +1,246 @@
<!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">
<!-- Main Content -->
<main id="main-content" class="app-content">
<div class="container" style="max-width: 480px; margin: 0 auto; padding: 60px 20px 40px;">
<!-- Logo & Title -->
<div style="text-align: center; margin-bottom: 48px;">
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-primary-main), #C71F24); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;">
<span class="material-icons" style="font-size: 48px; color: white;">campaign</span>
</div>
<h1 class="h1" style="margin-bottom: 8px;">KT 이벤트 마케팅</h1>
<p class="body-m text-muted">AI로 쉽고 빠르게, 효과적인 이벤트</p>
</div>
<!-- Login Form -->
<form id="loginForm" novalidate>
<!-- Email -->
<div class="form-group">
<label for="email" class="form-label required">이메일</label>
<input
type="email"
id="email"
name="email"
class="form-input"
placeholder="example@email.com"
required
autocomplete="email"
>
</div>
<!-- Password -->
<div class="form-group">
<label for="password" class="form-label required">비밀번호</label>
<input
type="password"
id="password"
name="password"
class="form-input"
placeholder="비밀번호를 입력하세요"
required
minlength="8"
autocomplete="current-password"
>
</div>
<!-- Remember Me & Find Password -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
<div class="form-check">
<input
type="checkbox"
id="remember"
name="remember"
>
<label for="remember" style="flex: 1; cursor: pointer;">
<span class="body-m">로그인 상태 유지</span>
</label>
</div>
<button type="button" class="btn btn-text btn-sm" style="color: var(--color-gray-600);">
비밀번호 찾기
</button>
</div>
<!-- Submit Button -->
<button
type="submit"
id="loginBtn"
class="btn btn-primary btn-lg btn-block"
style="margin-bottom: 16px;"
>
로그인
</button>
<!-- KT Auth Button -->
<button
type="button"
id="ktAuthBtn"
class="btn btn-secondary btn-lg btn-block"
style="margin-bottom: 32px; display: flex; align-items: center; justify-content: center; gap: 8px;"
>
<span class="material-icons" style="font-size: 20px;">smartphone</span>
KT 통합 인증으로 로그인
</button>
</form>
<!-- Sign Up Link -->
<div style="text-align: center; padding: 24px 0; border-top: 1px solid var(--color-gray-200);">
<p class="body-m text-muted" style="margin-bottom: 12px;">아직 계정이 없으신가요?</p>
<button
type="button"
class="btn btn-text"
style="color: var(--color-primary-main); font-weight: 600;"
onclick="window.location.href='01-회원가입.html'"
>
회원가입하기
</button>
</div>
<!-- Footer Info -->
<div style="text-align: center; margin-top: 40px;">
<p class="body-s text-muted">
로그인 시
<a href="#" style="text-decoration: underline; color: var(--color-gray-600);">서비스 이용약관</a>
<a href="#" style="text-decoration: underline; color: var(--color-gray-600);">개인정보처리방침</a>에 동의하게 됩니다
</p>
</div>
</div>
</main>
</div>
<!-- Scripts -->
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const form = document.getElementById('loginForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const loginBtn = document.getElementById('loginBtn');
const ktAuthBtn = document.getElementById('ktAuthBtn');
// 폼 검증 및 버튼 활성화
function checkFormValidity() {
const isEmailValid = FormValidator.isValidEmail(emailInput.value);
const isPasswordValid = passwordInput.value.length >= 8;
loginBtn.disabled = !(isEmailValid && isPasswordValid);
}
// 입력 필드 이벤트 리스너
[emailInput, passwordInput].forEach(input => {
input.addEventListener('input', checkFormValidity);
input.addEventListener('change', checkFormValidity);
});
// 이메일 로그인
form.addEventListener('submit', function(e) {
e.preventDefault();
const email = emailInput.value.trim();
const password = passwordInput.value;
if (!FormValidator.isValidEmail(email)) {
Toast.error('올바른 이메일 형식을 입력하세요.');
return;
}
if (password.length < 8) {
Toast.error('비밀번호는 8자 이상이어야 합니다.');
return;
}
Loading.show('로그인 중...');
// 시뮬레이션: 실제로는 서버 API 호출
setTimeout(() => {
Loading.hide();
// 사용자 정보 저장
window.AppState.user = {
id: Utils.generateId(),
email: email,
name: email.split('@')[0],
authType: 'email',
loginAt: new Date().toISOString()
};
window.AppState.save();
Toast.success('로그인되었습니다.');
// 홈 화면으로 이동
setTimeout(() => {
window.location.href = '21.5-홈.html';
}, 500);
}, 1500);
});
// KT 통합 인증 로그인
ktAuthBtn.addEventListener('click', function() {
Loading.show('KT 통합 인증 연결 중...');
// 시뮬레이션: 실제로는 KT 인증 API 호출
setTimeout(() => {
Loading.hide();
// 사용자 정보 저장
window.AppState.user = {
id: Utils.generateId(),
phone: '010-1234-5678',
name: '홍길동',
authType: 'kt',
loginAt: new Date().toISOString()
};
window.AppState.save();
Toast.success('KT 통합 인증으로 로그인되었습니다.');
// 홈 화면으로 이동
setTimeout(() => {
window.location.href = '21.5-홈.html';
}, 500);
}, 2000);
});
// 초기 상태 확인
checkFormValidity();
console.log('로그인 페이지 로드 완료');
})();
</script>
<style>
/* 로그인 페이지 특화 스타일 */
body {
background: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 50%);
min-height: 100vh;
}
.app-wrapper {
background: transparent;
}
.btn-block {
width: 100%;
}
</style>
</body>
</html>

View File

@ -252,7 +252,7 @@
};
window.goToHome = function() {
Toast.show('홈으로 이동');
window.location.href = '21.5-홈.html';
};
window.goToEvents = function() {

View File

@ -0,0 +1,262 @@
<!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">KT 이벤트 마케팅</h1>
<button class="app-bar__action" aria-label="알림">
<span class="material-icons">notifications</span>
<span class="badge" style="position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: var(--color-error); border-radius: 50%;"></span>
</button>
</header>
<!-- Main Content -->
<main id="main-content" class="app-content" style="padding-bottom: 80px;">
<div class="container">
<!-- Welcome Section -->
<section style="margin-bottom: 24px; padding: 24px 0;">
<h2 class="h2" style="margin-bottom: 8px;" id="userName">홍길동님, 안녕하세요! 👋</h2>
<p class="body-m text-muted">오늘도 성공적인 이벤트를 만들어보세요</p>
</section>
<!-- Quick Actions -->
<section style="margin-bottom: 32px;">
<h3 class="h3" style="margin-bottom: 16px;">빠른 시작</h3>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
<!-- New Event -->
<button
class="card"
style="padding: 20px; text-align: center; cursor: pointer; border: 2px solid var(--color-primary-main); background: linear-gradient(135deg, #FFF5F5, #FFFFFF);"
onclick="window.location.href='03-이벤트목적선택.html'"
>
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, var(--color-primary-main), #C71F24); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<span class="material-icons" style="font-size: 28px; color: white;">add_circle</span>
</div>
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">새 이벤트 만들기</div>
<div class="body-s text-muted">AI가 자동으로 기획</div>
</button>
<!-- Dashboard -->
<button
class="card"
style="padding: 20px; text-align: center; cursor: pointer;"
onclick="window.location.href='21-실시간대시보드.html'"
>
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, var(--color-secondary-main), #0052CC); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<span class="material-icons" style="font-size: 28px; color: white;">dashboard</span>
</div>
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">실시간 대시보드</div>
<div class="body-s text-muted">성과 한눈에 보기</div>
</button>
<!-- Analytics -->
<button
class="card"
style="padding: 20px; text-align: center; cursor: pointer;"
onclick="window.location.href='22-채널별성과분석.html'"
>
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #00C853, #00A344); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<span class="material-icons" style="font-size: 28px; color: white;">analytics</span>
</div>
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">성과 분석</div>
<div class="body-s text-muted">채널별 성과 확인</div>
</button>
<!-- Winner Management -->
<button
class="card"
style="padding: 20px; text-align: center; cursor: pointer;"
onclick="window.location.href='20-당첨자명단관리.html'"
>
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #FFA000, #FF8F00); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<span class="material-icons" style="font-size: 28px; color: white;">emoji_events</span>
</div>
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">당첨자 관리</div>
<div class="body-s text-muted">당첨자 명단 확인</div>
</button>
</div>
</section>
<!-- Current Event Status -->
<section style="margin-bottom: 32px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
<h3 class="h3">진행 중인 이벤트</h3>
<button class="btn btn-text btn-sm" style="color: var(--color-primary-main);">
전체보기
</button>
</div>
<div id="eventList">
<!-- 이벤트가 없을 때 -->
<div class="card" style="padding: 40px 24px; text-align: center;">
<span class="material-icons" style="font-size: 48px; color: var(--color-gray-300); margin-bottom: 16px;">event_busy</span>
<p class="body-m text-muted" style="margin-bottom: 16px;">진행 중인 이벤트가 없습니다</p>
<button
class="btn btn-primary btn-md"
onclick="window.location.href='03-이벤트목적선택.html'"
>
첫 이벤트 만들기
</button>
</div>
</div>
</section>
<!-- Stats Summary -->
<section style="margin-bottom: 32px;">
<h3 class="h3" style="margin-bottom: 16px;">이번 달 성과</h3>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
<!-- Total Events -->
<div class="card" style="padding: 16px; text-align: center;">
<div class="body-s text-muted" style="margin-bottom: 4px;">총 이벤트</div>
<div class="h2" style="color: var(--color-primary-main);">0</div>
</div>
<!-- Total Participants -->
<div class="card" style="padding: 16px; text-align: center;">
<div class="body-s text-muted" style="margin-bottom: 4px;">총 참여자</div>
<div class="h2" style="color: var(--color-secondary-main);">0</div>
</div>
<!-- Total ROI -->
<div class="card" style="padding: 16px; text-align: center;">
<div class="body-s text-muted" style="margin-bottom: 4px;">평균 ROI</div>
<div class="h2" style="color: var(--color-success);">0%</div>
</div>
</div>
</section>
<!-- AI Tips -->
<section style="margin-bottom: 32px;">
<h3 class="h3" style="margin-bottom: 16px;">AI 추천 팁 💡</h3>
<div class="card" style="padding: 20px; background: linear-gradient(135deg, #F3F4F6, #FFFFFF);">
<div style="display: flex; gap: 16px;">
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, var(--color-secondary-main), #0052CC); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span class="material-icons" style="font-size: 28px; color: white;">lightbulb</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">이번 주 트렌드</div>
<div class="body-s text-muted" style="line-height: 1.6;">
"설날 특별 할인" 키워드가 급상승 중입니다. 지금 이벤트를 시작하면 평균 대비 2.3배 높은 참여율이 예상됩니다.
</div>
<button class="btn btn-text btn-sm" style="color: var(--color-primary-main); margin-top: 8px;">
자세히 보기
<span class="material-icons" style="font-size: 16px; margin-left: 4px;">arrow_forward</span>
</button>
</div>
</div>
</div>
</section>
<!-- Recent Activity -->
<section style="margin-bottom: 32px;">
<h3 class="h3" style="margin-bottom: 16px;">최근 활동</h3>
<div class="card" style="padding: 20px;">
<div style="text-align: center; padding: 20px 0;">
<span class="material-icons" style="font-size: 40px; color: var(--color-gray-300); margin-bottom: 12px;">history</span>
<p class="body-s text-muted">최근 활동이 없습니다</p>
</div>
</div>
</section>
</div>
</main>
<!-- Bottom Navigation -->
<nav class="bottom-nav">
<button class="bottom-nav__item active" 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" 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) {
const userName = user.name || user.email?.split('@')[0] || '사용자';
document.getElementById('userName').textContent = `${userName}님, 안녕하세요! 👋`;
}
// 이벤트 목록 로드 (시뮬레이션)
function loadEventList() {
// 실제로는 서버에서 이벤트 목록을 가져옴
// 현재는 빈 상태로 표시
const eventList = document.getElementById('eventList');
// 예시: 이벤트가 있을 경우
/*
eventList.innerHTML = `
<div class="card" style="padding: 20px; margin-bottom: 12px;">
<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: 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-gray-200);">
<div>
<div class="body-s text-muted" style="margin-bottom: 4px;">참여자</div>
<div class="body-m" style="font-weight: 600;">1,234명</div>
</div>
<div>
<div class="body-s text-muted" style="margin-bottom: 4px;">조회수</div>
<div class="body-m" style="font-weight: 600;">5,678회</div>
</div>
<div>
<div class="body-s text-muted" style="margin-bottom: 4px;">ROI</div>
<div class="body-m" style="font-weight: 600; color: var(--color-success);">+245%</div>
</div>
</div>
</div>
`;
*/
}
// Bottom Navigation 활성화
Navigation.updateBottomNav('home');
// 초기화
loadEventList();
console.log('홈 페이지 로드 완료');
})();
</script>
</body>
</html>

View File

@ -451,7 +451,7 @@
};
window.goToHome = function() {
Toast.show('홈으로 이동');
window.location.href = '21.5-홈.html';
};
window.goToEvents = function() {

View File

@ -331,7 +331,7 @@
}
window.goToHome = function() {
Toast.show('홈으로 이동');
window.location.href = '21.5-홈.html';
};
window.goToEvents = function() {

View File

@ -316,7 +316,7 @@
};
window.goToHome = function() {
Toast.show('홈으로 이동');
window.location.href = '21.5-홈.html';
};
window.goToEvents = function() {