shared-dg05-dodari/kt-event-marketing
7
0
Fork 0
mirror of https://github.com/ktds-dg0501/kt-event-marketing.git synced 2025-12-06 08:46:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

프로토~

Browse Source
This commit is contained in:
doyeon 2025-10-20 14:27:45 +09:00
parent 58ab3bac44
commit 729b776600
18 changed files with 8530 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

324
design/uiux/prototype/01-회원가입.html Normal file
View File

@ -0,0 +1,324 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 회원가입">
<title>회원가입 - KT 이벤트 마케팅</title>
<!-- Styles -->
<link rel="stylesheet" href="css/common.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
</head>
<body>
<!-- Skip Link -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- App Wrapper -->
<div class="app-wrapper">
<!-- Top App Bar -->
<header class="app-bar">
<button class="app-bar__back" aria-label="뒤로가기">
<span class="material-icons">arrow_back</span>
</button>
<h1 class="app-bar__title">회원가입</h1>
</header>
<!-- Main Content -->
<main id="main-content" class="app-content">
<div class="container" style="max-width: 500px; margin: 0 auto; padding-top: 32px;">
<!-- Welcome Section -->
<div style="text-align: center; margin-bottom: 48px;">
<h2 class="display" style="margin-bottom: 8px;">KT 이벤트 마케팅</h2>
<p class="body-l text-muted">환영합니다 🎉</p>
</div>
<!-- Registration Form -->
<form id="registrationForm" novalidate>
<!-- 이름 -->
<div class="form-group">
<label for="name" class="form-label required">이름</label>
<input
type="text"
id="name"
name="name"
class="form-input"
placeholder="홍길동"
required
minlength="2"
autocomplete="name"
>
</div>
<!-- 전화번호 -->
<div class="form-group">
<label for="phone" class="form-label required">전화번호</label>
<input
type="tel"
id="phone"
name="phone"
class="form-input"
placeholder="010-1234-5678"
required
maxlength="13"
autocomplete="tel"
>
</div>
<!-- 이메일 -->
<div class="form-group">
<label for="email" class="form-label required">이메일</label>
<input
type="email"
id="email"
name="email"
class="form-input"
placeholder="example@domain.com"
required
autocomplete="email"
>
</div>
<!-- KT 본인 인증 (선택) -->
<div class="card" style="margin-bottom: 24px; padding: 16px;">
<div class="form-check">
<input
type="checkbox"
id="ktAuth"
name="ktAuth"
>
<label for="ktAuth" style="flex: 1; cursor: pointer;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">
KT 본인 인증 (선택)
</div>
<div class="body-s text-muted">
인증 시 추가 혜택이 제공됩니다
</div>
</label>
</div>
</div>
<!-- 개인정보 수집 동의 (필수) -->
<div class="form-group">
<div class="form-check">
<input
type="checkbox"
id="privacyAgree"
name="privacyAgree"
required
>
<label for="privacyAgree" style="flex: 1; cursor: pointer;">
<span class="body-m">개인정보 수집 및 이용 동의 (필수)</span>
<button type="button" class="btn-text btn-sm" style="padding: 0; margin-left: 8px;" onclick="showPrivacyModal()">
자세히보기
</button>
</label>
</div>
</div>
<!-- Submit Button -->
<button
type="submit"
id="submitBtn"
class="btn btn-primary btn-lg btn-block"
style="margin-top: 32px;"
disabled
>
다음 단계
</button>
</form>
<!-- Additional Info -->
<div style="text-align: center; margin-top: 24px;">
<p class="body-s text-muted">
이미 계정이 있으신가요?
<a href="#" class="text-primary" style="text-decoration: none; font-weight: 600;">로그인</a>
</p>
</div>
</div>
</main>
</div>
<!-- Scripts -->
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const form = document.getElementById('registrationForm');
const submitBtn = document.getElementById('submitBtn');
const nameInput = document.getElementById('name');
const phoneInput = document.getElementById('phone');
const emailInput = document.getElementById('email');
const ktAuthCheckbox = document.getElementById('ktAuth');
const privacyCheckbox = document.getElementById('privacyAgree');
// 폼 검증 및 버튼 활성화 체크
function checkFormValidity() {
const isNameValid = nameInput.value.trim().length >= 2;
const isPhoneValid = FormValidator.isValidPhone(phoneInput.value);
const isEmailValid = FormValidator.isValidEmail(emailInput.value);
const isPrivacyAgreed = privacyCheckbox.checked;
const isFormValid = isNameValid && isPhoneValid && isEmailValid && isPrivacyAgreed;
submitBtn.disabled = !isFormValid;
}
// 입력 필드 이벤트 리스너
[nameInput, phoneInput, emailInput].forEach(input => {
input.addEventListener('input', checkFormValidity);
input.addEventListener('blur', function() {
if (this.value) {
validateField(this);
}
});
});
privacyCheckbox.addEventListener('change', checkFormValidity);
// 개별 필드 검증
function validateField(input) {
let isValid = true;
let errorMessage = '';
switch(input.id) {
case 'name':
if (input.value.trim().length < 2) {
isValid = false;
errorMessage = '이름은 2자 이상 입력해주세요.';
}
break;
case 'phone':
if (!FormValidator.isValidPhone(input.value)) {
isValid = false;
errorMessage = '올바른 전화번호 형식을 입력하세요. (010-XXXX-XXXX)';
}
break;
case 'email':
if (!FormValidator.isValidEmail(input.value)) {
isValid = false;
errorMessage = '올바른 이메일 형식을 입력하세요.';
}
break;
}
if (isValid) {
FormValidator.clearError(input);
} else {
FormValidator.showError(input, errorMessage);
}
return isValid;
}
// KT 본인 인증 체크박스 변경 시
ktAuthCheckbox.addEventListener('change', function() {
if (this.checked) {
// KT 인증 시뮬레이션
simulateKTAuth();
}
});
// KT 인증 시뮬레이션
function simulateKTAuth() {
// 실제로는 KT 인증 시스템 연동
Loading.show('KT 본인 인증 중...');
setTimeout(() => {
Loading.hide();
Toast.success('KT 본인 인증이 완료되었습니다. 추가 혜택이 적용됩니다!');
}, 2000);
}
// 폼 제출
form.addEventListener('submit', function(e) {
e.preventDefault();
// 모든 필드 검증
const isNameValid = validateField(nameInput);
const isPhoneValid = validateField(phoneInput);
const isEmailValid = validateField(emailInput);
if (!isNameValid || !isPhoneValid || !isEmailValid) {
Toast.error('입력 내용을 확인해주세요.');
return;
}
if (!privacyCheckbox.checked) {
Toast.error('개인정보 수집 및 이용에 동의해주세요.');
return;
}
// 중복 가입 체크 시뮬레이션
Loading.show('가입 정보 확인 중...');
setTimeout(() => {
Loading.hide();
// 사용자 정보 저장
const userData = {
id: Utils.generateId(),
name: nameInput.value.trim(),
phone: phoneInput.value,
email: emailInput.value,
ktAuth: ktAuthCheckbox.checked,
createdAt: new Date().toISOString()
};
window.AppState.user = userData;
window.AppState.save();
// 성공 메시지
Toast.success('회원가입이 완료되었습니다!');
// 다음 화면으로 이동 (매장정보등록)
setTimeout(() => {
window.location.href = '02-매장정보등록.html';
}, 1000);
}, 1500);
});
// 개인정보 처리방침 모달
window.showPrivacyModal = function() {
Modal.alert(
'개인정보 수집 및 이용 동의',
`
<div class="body-m" style="max-height: 300px; overflow-y: auto;">
<h3 class="h3" style="margin-bottom: 12px;">수집하는 개인정보 항목</h3>
<ul style="margin-left: 20px; margin-bottom: 16px;">
<li>이름</li>
<li>전화번호</li>
<li>이메일 주소</li>
</ul>
<h3 class="h3" style="margin-bottom: 12px;">개인정보의 수집 및 이용 목적</h3>
<ul style="margin-left: 20px; margin-bottom: 16px;">
<li>회원 가입 및 관리</li>
<li>서비스 제공 및 계약 이행</li>
<li>고객 문의 응대</li>
</ul>
<h3 class="h3" style="margin-bottom: 12px;">개인정보의 보유 및 이용 기간</h3>
<p style="margin-bottom: 16px;">
회원 탈퇴 시까지 보유하며, 관계 법령에 따라 일정 기간 보관할 수 있습니다.
</p>
<p class="body-s text-muted">
귀하는 개인정보 수집 및 이용에 동의하지 않을 권리가 있으나, 동의하지 않을 경우 서비스 이용이 제한될 수 있습니다.
</p>
</div>
`
);
};
console.log('회원가입 페이지 로드 완료');
})();
</script>
</body>
</html>

755
design/uiux/prototype/02-매장정보등록.html Normal file
View File

@ -0,0 +1,755 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 매장정보등록">
<title>매장정보등록 - KT 이벤트 마케팅</title>
<!-- Styles -->
<link rel="stylesheet" href="css/common.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
</head>
<body>
<!-- Skip Link -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- App Wrapper -->
<div class="app-wrapper">
<!-- Top App Bar -->
<header class="app-bar">
<button class="app-bar__back" aria-label="뒤로가기">
<span class="material-icons">arrow_back</span>
</button>
<h1 class="app-bar__title">매장정보등록</h1>
</header>
<!-- Main Content -->
<main id="main-content" class="app-content">
<div class="container" style="max-width: 600px; margin: 0 auto; padding-top: 24px;">
<!-- Progress Indicator -->
<div style="margin-bottom: 32px;">
<div class="body-s text-muted" style="margin-bottom: 8px;">진행상황</div>
<div style="display: flex; gap: 4px; align-items: center;">
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<span class="body-s" style="margin-left: 8px; font-weight: 600;">2/2</span>
</div>
</div>
<!-- Registration Form -->
<form id="storeForm" novalidate>
<!-- Required Information -->
<section style="margin-bottom: 32px;">
<h2 class="h3" style="margin-bottom: 20px;">필수 정보</h2>
<!-- Store Name -->
<div class="form-group">
<label for="storeName" class="form-label required">매장명</label>
<input
type="text"
id="storeName"
name="storeName"
class="form-input"
placeholder="왕갈비통닭 수원점"
required
minlength="2"
autocomplete="organization"
>
</div>
<!-- Business Type -->
<div class="form-group">
<label for="businessType" class="form-label required">업종</label>
<select
id="businessType"
name="businessType"
class="form-input"
required
>
<option value="">업종을 선택하세요</option>
<option value="restaurant">음식점</option>
<option value="cafe">카페/디저트</option>
<option value="retail">소매업</option>
<option value="beauty">미용/뷰티</option>
<option value="education">교육/학원</option>
<option value="service">서비스업</option>
<option value="healthcare">의료/건강</option>
<option value="other">기타</option>
</select>
</div>
<!-- Address Search -->
<div class="form-group">
<label for="address" class="form-label required">주소</label>
<div style="display: flex; gap: 8px;">
<input
type="text"
id="address"
name="address"
class="form-input"
placeholder="주소를 검색하세요"
required
readonly
style="flex: 1; cursor: pointer;"
>
<button
type="button"
class="btn btn-secondary"
onclick="searchAddress()"
aria-label="주소 검색"
>
<span class="material-icons" style="font-size: 20px;">search</span>
</button>
</div>
<input
type="text"
id="addressDetail"
name="addressDetail"
class="form-input"
placeholder="상세주소 (선택)"
style="margin-top: 8px;"
autocomplete="address-line2"
>
</div>
<!-- Business Hours -->
<div class="form-group">
<label class="form-label required">영업시간</label>
<div id="businessHours">
<!-- Business hours will be dynamically added here -->
</div>
<div class="form-check" style="margin-top: 12px;">
<input
type="checkbox"
id="sameHours"
name="sameHours"
checked
>
<label for="sameHours" style="flex: 1; cursor: pointer;">
<span class="body-m">모든 요일 동일하게 적용</span>
</label>
</div>
</div>
<!-- Business Number -->
<div class="form-group">
<label for="businessNumber" class="form-label required">사업자번호</label>
<div style="display: flex; gap: 8px; align-items: flex-start;">
<input
type="text"
id="businessNumber"
name="businessNumber"
class="form-input"
placeholder="123-45-67890"
required
maxlength="12"
style="flex: 1;"
autocomplete="off"
>
<button
type="button"
id="verifyBtn"
class="btn btn-secondary"
onclick="verifyBusinessNumber()"
disabled
>
검증하기
</button>
</div>
<div id="verifyResult" style="margin-top: 8px;"></div>
</div>
</section>
<!-- Optional Information -->
<section style="margin-bottom: 32px;">
<h2 class="h3" style="margin-bottom: 8px;">선택 정보</h2>
<p class="body-s text-muted" style="margin-bottom: 20px;">
이벤트 맞춤화를 위해 추가 정보를 입력해주세요
</p>
<!-- Menu Items -->
<div class="form-group">
<label class="form-label">메뉴/상품 (최대 10개)</label>
<div id="menuList" style="margin-bottom: 12px;">
<!-- Menu items will be dynamically added here -->
</div>
<button
type="button"
class="btn btn-text btn-sm"
onclick="addMenuItem()"
id="addMenuBtn"
>
<span class="material-icons" style="font-size: 18px; margin-right: 4px;">add</span>
메뉴 추가
</button>
</div>
<!-- Store Features -->
<div class="form-group">
<label for="storeFeatures" class="form-label">매장 특징</label>
<textarea
id="storeFeatures"
name="storeFeatures"
class="form-input"
placeholder="매장의 특별한 점이나 강점을 알려주세요&#10;예) 30년 전통, 직접 만든 소스, 주차 가능"
rows="4"
maxlength="200"
style="resize: vertical;"
></textarea>
<div class="body-s text-muted" style="margin-top: 4px; text-align: right;">
<span id="featureCount">0</span>/200
</div>
</div>
<!-- Store Images -->
<div class="form-group">
<label class="form-label">대표 이미지 (최대 3장)</label>
<div id="imagePreview" style="display: flex; gap: 12px; flex-wrap: wrap;">
<label class="image-upload-box" for="imageUpload1">
<input
type="file"
id="imageUpload1"
name="storeImages"
accept="image/*"
style="display: none;"
onchange="handleImageUpload(event, 1)"
>
<span class="material-icons" style="font-size: 32px; color: var(--color-gray-400);">add_photo_alternate</span>
</label>
<label class="image-upload-box" for="imageUpload2" style="display: none;">
<input
type="file"
id="imageUpload2"
name="storeImages"
accept="image/*"
style="display: none;"
onchange="handleImageUpload(event, 2)"
>
<span class="material-icons" style="font-size: 32px; color: var(--color-gray-400);">add_photo_alternate</span>
</label>
<label class="image-upload-box" for="imageUpload3" style="display: none;">
<input
type="file"
id="imageUpload3"
name="storeImages"
accept="image/*"
style="display: none;"
onchange="handleImageUpload(event, 3)"
>
<span class="material-icons" style="font-size: 32px; color: var(--color-gray-400);">add_photo_alternate</span>
</label>
</div>
</div>
</section>
<!-- Submit Button -->
<button
type="submit"
id="submitBtn"
class="btn btn-primary btn-lg btn-block"
style="margin-bottom: 32px;"
disabled
>
등록 완료하기
</button>
</form>
</div>
</main>
</div>
<!-- Scripts -->
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const form = document.getElementById('storeForm');
const submitBtn = document.getElementById('submitBtn');
const verifyBtn = document.getElementById('verifyBtn');
const businessNumberInput = document.getElementById('businessNumber');
const storeNameInput = document.getElementById('storeName');
const businessTypeSelect = document.getElementById('businessType');
const addressInput = document.getElementById('address');
const featureCountSpan = document.getElementById('featureCount');
const storeFeaturesTextarea = document.getElementById('storeFeatures');
let menuItems = [];
let uploadedImages = [];
let isBusinessNumberVerified = false;
// 영업시간 초기화
function initBusinessHours() {
const days = ['월', '화', '수', '목', '금', '토', '일'];
const hoursContainer = document.getElementById('businessHours');
days.forEach((day, index) => {
const hourRow = document.createElement('div');
hourRow.className = 'business-hour-row';
hourRow.style.cssText = 'display: flex; gap: 8px; align-items: center; margin-bottom: 8px;';
hourRow.innerHTML = `
<span class="body-m" style="min-width: 24px;">${day}:</span>
<input
type="time"
name="openTime_${index}"
value="09:00"
class="form-input"
style="flex: 1; min-width: 0;"
required
>
<span class="body-m">~</span>
<input
type="time"
name="closeTime_${index}"
value="21:00"
class="form-input"
style="flex: 1; min-width: 0;"
required
>
`;
hoursContainer.appendChild(hourRow);
});
}
// 영업시간 동일 적용
document.getElementById('sameHours').addEventListener('change', function() {
const rows = document.querySelectorAll('.business-hour-row');
if (this.checked && rows.length > 0) {
const firstOpen = rows[0].querySelector('input[type="time"]:first-of-type').value;
const firstClose = rows[0].querySelector('input[type="time"]:last-of-type').value;
rows.forEach((row, index) => {
if (index > 0) {
row.querySelector('input[type="time"]:first-of-type').value = firstOpen;
row.querySelector('input[type="time"]:last-of-type').value = firstClose;
}
});
}
});
// 주소 검색 (시뮬레이션)
window.searchAddress = function() {
Modal.show({
title: '주소 검색',
body: `
<div class="form-group" style="margin-bottom: 16px;">
<input
type="text"
id="addressSearchInput"
class="form-input"
placeholder="도로명 또는 지번 주소 입력"
onkeyup="if(event.key==='Enter') searchAddressQuery()"
>
</div>
<div id="addressResults" class="body-s" style="color: var(--color-gray-600);">
주소를 입력하고 Enter를 눌러주세요
</div>
`,
confirmText: '닫기',
showCancel: false
});
setTimeout(() => {
document.getElementById('addressSearchInput').focus();
}, 100);
};
window.searchAddressQuery = function() {
const query = document.getElementById('addressSearchInput').value;
if (!query) return;
const results = document.getElementById('addressResults');
results.innerHTML = '<div class="body-s text-muted">검색 중...</div>';
// 시뮬레이션: 실제로는 카카오 주소 API 사용
setTimeout(() => {
results.innerHTML = `
<div class="card" style="padding: 12px; margin-bottom: 8px; cursor: pointer;" onclick="selectAddress('경기도 수원시 팔달구 인계동 1055-1')">
<div class="body-m" style="margin-bottom: 4px;">경기도 수원시 팔달구 인계동 1055-1</div>
<div class="body-s text-muted">(우) 16495</div>
</div>
<div class="card" style="padding: 12px; margin-bottom: 8px; cursor: pointer;" onclick="selectAddress('경기도 수원시 팔달구 권광로 181')">
<div class="body-m" style="margin-bottom: 4px;">경기도 수원시 팔달구 권광로 181</div>
<div class="body-s text-muted">(우) 16495</div>
</div>
`;
}, 500);
};
window.selectAddress = function(address) {
addressInput.value = address;
document.querySelector('.modal__close').click();
checkFormValidity();
};
// 사업자번호 검증
businessNumberInput.addEventListener('input', function() {
isBusinessNumberVerified = false;
verifyBtn.disabled = !FormValidator.isValidBusinessNumber(this.value);
document.getElementById('verifyResult').innerHTML = '';
checkFormValidity();
});
window.verifyBusinessNumber = function() {
const businessNumber = businessNumberInput.value;
if (!FormValidator.isValidBusinessNumber(businessNumber)) {
Toast.error('올바른 사업자번호 형식을 입력하세요.');
return;
}
Loading.show('사업자번호 검증 중...');
verifyBtn.disabled = true;
// 시뮬레이션: 실제로는 국세청 API 연동
setTimeout(() => {
Loading.hide();
isBusinessNumberVerified = true;
document.getElementById('verifyResult').innerHTML = `
<div style="display: flex; align-items: center; gap: 8px; color: var(--color-success);">
<span class="material-icons" style="font-size: 20px;">check_circle</span>
<span class="body-s" style="font-weight: 600;">확인됨</span>
</div>
`;
Toast.success('사업자번호가 확인되었습니다.');
checkFormValidity();
}, 1500);
};
// 메뉴 추가
window.addMenuItem = function() {
if (menuItems.length >= 10) {
Toast.error('메뉴는 최대 10개까지 추가할 수 있습니다.');
return;
}
Modal.show({
title: '메뉴 추가',
body: `
<div class="form-group">
<label class="form-label required">메뉴명</label>
<input
type="text"
id="menuName"
class="form-input"
placeholder="예) 양념치킨"
required
>
</div>
<div class="form-group">
<label class="form-label required">가격</label>
<input
type="number"
id="menuPrice"
class="form-input"
placeholder="20000"
required
min="0"
>
</div>
<div class="form-group">
<label class="form-label">설명</label>
<textarea
id="menuDescription"
class="form-input"
placeholder="메뉴 설명 (선택)"
rows="2"
></textarea>
</div>
`,
confirmText: '추가',
onConfirm: function() {
const name = document.getElementById('menuName').value.trim();
const price = document.getElementById('menuPrice').value;
const description = document.getElementById('menuDescription').value.trim();
if (!name || !price) {
Toast.error('메뉴명과 가격은 필수입니다.');
return;
}
menuItems.push({
id: Utils.generateId(),
name,
price: parseInt(price),
description
});
renderMenuList();
Toast.success('메뉴가 추가되었습니다.');
}
});
setTimeout(() => {
document.getElementById('menuName').focus();
}, 100);
};
// 메뉴 목록 렌더링
function renderMenuList() {
const menuList = document.getElementById('menuList');
if (menuItems.length === 0) {
menuList.innerHTML = '';
document.getElementById('addMenuBtn').style.display = 'flex';
return;
}
menuList.innerHTML = menuItems.map((item, index) => `
<div class="card" style="padding: 12px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">${item.name}</div>
<div class="body-s text-muted">
${Utils.formatNumber(item.price)}원
${item.description ? ' · ' + item.description : ''}
</div>
</div>
<button
type="button"
class="btn btn-text btn-sm"
onclick="removeMenuItem('${item.id}')"
style="color: var(--color-error);"
>
<span class="material-icons" style="font-size: 18px;">delete</span>
</button>
</div>
`).join('');
document.getElementById('addMenuBtn').style.display = menuItems.length >= 10 ? 'none' : 'flex';
}
window.removeMenuItem = function(id) {
menuItems = menuItems.filter(item => item.id !== id);
renderMenuList();
Toast.info('메뉴가 삭제되었습니다.');
};
// 이미지 업로드
window.handleImageUpload = function(event, index) {
const file = event.target.files[0];
if (!file) return;
// 파일 크기 검증 (5MB)
if (file.size > 5 * 1024 * 1024) {
Toast.error('이미지 크기는 5MB 이하여야 합니다.');
event.target.value = '';
return;
}
Loading.show('이미지 업로드 중...');
// 이미지 미리보기
const reader = new FileReader();
reader.onload = function(e) {
setTimeout(() => {
Loading.hide();
const imageUrl = e.target.result;
uploadedImages.push({
id: Utils.generateId(),
url: imageUrl,
file: file
});
// 현재 업로드 박스를 이미지로 교체
const currentBox = document.querySelector(`label[for="imageUpload${index}"]`);
currentBox.style.backgroundImage = `url(${imageUrl})`;
currentBox.style.backgroundSize = 'cover';
currentBox.style.backgroundPosition = 'center';
currentBox.innerHTML = `
<button
type="button"
class="image-remove-btn"
onclick="removeImage(${index})"
style="position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer;"
>
<span class="material-icons" style="font-size: 16px;">close</span>
</button>
`;
// 다음 업로드 박스 표시
if (index < 3) {
const nextBox = document.querySelector(`label[for="imageUpload${index + 1}"]`);
if (nextBox) {
nextBox.style.display = 'flex';
}
}
Toast.success('이미지가 업로드되었습니다.');
}, 500);
};
reader.readAsDataURL(file);
};
window.removeImage = function(index) {
uploadedImages = uploadedImages.filter((_, i) => i !== index - 1);
// 이미지 박스 초기화
const imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = `
<label class="image-upload-box" for="imageUpload1">
<input type="file" id="imageUpload1" name="storeImages" accept="image/*" style="display: none;" onchange="handleImageUpload(event, 1)">
<span class="material-icons" style="font-size: 32px; color: var(--color-gray-400);">add_photo_alternate</span>
</label>
<label class="image-upload-box" for="imageUpload2" style="display: none;">
<input type="file" id="imageUpload2" name="storeImages" accept="image/*" style="display: none;" onchange="handleImageUpload(event, 2)">
<span class="material-icons" style="font-size: 32px; color: var(--color-gray-400);">add_photo_alternate</span>
</label>
<label class="image-upload-box" for="imageUpload3" style="display: none;">
<input type="file" id="imageUpload3" name="storeImages" accept="image/*" style="display: none;" onchange="handleImageUpload(event, 3)">
<span class="material-icons" style="font-size: 32px; color: var(--color-gray-400);">add_photo_alternate</span>
</label>
`;
// 업로드된 이미지 다시 렌더링
uploadedImages.forEach((img, i) => {
const box = document.querySelector(`label[for="imageUpload${i + 1}"]`);
box.style.backgroundImage = `url(${img.url})`;
box.style.backgroundSize = 'cover';
box.style.backgroundPosition = 'center';
box.innerHTML = `
<button type="button" class="image-remove-btn" onclick="removeImage(${i + 1})" style="position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="material-icons" style="font-size: 16px;">close</span>
</button>
`;
if (i < 2) {
const nextBox = document.querySelector(`label[for="imageUpload${i + 2}"]`);
if (nextBox) nextBox.style.display = 'flex';
}
});
Toast.info('이미지가 삭제되었습니다.');
};
// 매장 특징 글자수 카운트
storeFeaturesTextarea.addEventListener('input', function() {
featureCountSpan.textContent = this.value.length;
});
// 폼 검증 및 버튼 활성화
function checkFormValidity() {
const isStoreNameValid = storeNameInput.value.trim().length >= 2;
const isBusinessTypeValid = businessTypeSelect.value !== '';
const isAddressValid = addressInput.value.trim() !== '';
const isBusinessNumberValid = isBusinessNumberVerified;
const isFormValid = isStoreNameValid && isBusinessTypeValid && isAddressValid && isBusinessNumberValid;
submitBtn.disabled = !isFormValid;
}
// 입력 필드 이벤트 리스너
[storeNameInput, businessTypeSelect, addressInput].forEach(input => {
input.addEventListener('input', checkFormValidity);
input.addEventListener('change', checkFormValidity);
});
// 폼 제출
form.addEventListener('submit', function(e) {
e.preventDefault();
if (!isBusinessNumberVerified) {
Toast.error('사업자번호를 먼저 검증해주세요.');
return;
}
Loading.show('매장 정보 저장 중...');
setTimeout(() => {
Loading.hide();
// 영업시간 수집
const businessHours = [];
const days = ['월', '화', '수', '목', '금', '토', '일'];
days.forEach((day, index) => {
const openTime = document.querySelector(`input[name="openTime_${index}"]`).value;
const closeTime = document.querySelector(`input[name="closeTime_${index}"]`).value;
businessHours.push({ day, openTime, closeTime });
});
// 매장 정보 저장
const storeData = {
id: Utils.generateId(),
name: storeNameInput.value.trim(),
businessType: businessTypeSelect.value,
businessTypeName: businessTypeSelect.options[businessTypeSelect.selectedIndex].text,
address: addressInput.value.trim(),
addressDetail: document.getElementById('addressDetail').value.trim(),
businessNumber: businessNumberInput.value,
businessHours: businessHours,
menuItems: menuItems,
features: storeFeaturesTextarea.value.trim(),
images: uploadedImages,
createdAt: new Date().toISOString()
};
window.AppState.store = storeData;
window.AppState.save();
// 성공 메시지
Modal.show({
title: '🎉 매장 등록 완료!',
body: `
<div style="text-align: center;">
<p class="body-l" style="margin-bottom: 16px;">
<strong>${storeData.name}</strong> 매장이<br>
성공적으로 등록되었습니다.
</p>
<div class="card" style="padding: 16px; background: var(--color-primary-light); border: 1px solid var(--color-primary-main);">
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">
🎁 무료 체험 쿠폰 발급 완료
</div>
<div class="body-s text-muted">
첫 이벤트 생성 시 사용 가능
</div>
</div>
</div>
`,
confirmText: '대시보드로 이동',
showCancel: false,
onConfirm: function() {
// 실시간 대시보드로 이동 (아직 미구현이므로 임시 페이지로)
window.location.href = '21-실시간대시보드.html';
}
});
}, 1500);
});
// 초기화
initBusinessHours();
console.log('매장정보등록 페이지 로드 완료');
})();
</script>
<style>
.image-upload-box {
width: 100px;
height: 100px;
border: 2px dashed var(--color-gray-300);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
background-color: var(--color-gray-50);
}
.image-upload-box:hover {
border-color: var(--color-primary-main);
background-color: var(--color-primary-light);
}
.image-upload-box:active {
transform: scale(0.98);
}
</style>
</body>
</html>

494
design/uiux/prototype/03-이벤트목적선택.html Normal file
View File

@ -0,0 +1,494 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 이벤트목적선택">
<title>이벤트 목적 선택 - KT 이벤트 마케팅</title>
<!-- Styles -->
<link rel="stylesheet" href="css/common.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
</head>
<body>
<!-- Skip Link -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- App Wrapper -->
<div class="app-wrapper">
<!-- Top App Bar -->
<header class="app-bar">
<button class="app-bar__back" aria-label="닫기" onclick="confirmClose()">
<span class="material-icons">close</span>
</button>
<h1 class="app-bar__title">새 이벤트 기획</h1>
</header>
<!-- Main Content -->
<main id="main-content" class="app-content">
<div class="container" style="max-width: 500px; margin: 0 auto; padding-top: 24px;">
<!-- Progress Section -->
<div style="margin-bottom: 32px;">
<div class="body-m" style="margin-bottom: 8px; font-weight: 600;">단계 1/6: 목적 선택</div>
<div style="display: flex; gap: 4px;">
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
</div>
</div>
<!-- Instructions -->
<div style="text-align: center; margin-bottom: 32px;">
<h2 class="h2" style="margin-bottom: 8px;">이벤트 목적을 선택하세요</h2>
<p class="body-m text-muted">선택한 목적에 맞춰 AI가 최적의 이벤트를 기획합니다</p>
</div>
<!-- Purpose Options -->
<div id="purposeOptions" style="margin-bottom: 32px;">
<!-- New Customer Acquisition -->
<label class="purpose-card" for="purpose1" data-purpose="new_customer">
<input
type="radio"
name="purpose"
id="purpose1"
value="new_customer"
class="purpose-radio"
>
<div class="purpose-card__content">
<div class="purpose-card__icon">👤</div>
<div class="purpose-card__title">신규고객 유치</div>
<div class="purpose-card__description">새로운 고객 확보</div>
<div class="purpose-card__effect">예상효과: +30%</div>
<div class="purpose-card__check">
<span class="material-icons">check_circle</span>
</div>
</div>
</label>
<!-- Repeat Visit -->
<label class="purpose-card" for="purpose2" data-purpose="repeat_visit">
<input
type="radio"
name="purpose"
id="purpose2"
value="repeat_visit"
class="purpose-radio"
>
<div class="purpose-card__content">
<div class="purpose-card__icon">🔄</div>
<div class="purpose-card__title">재방문 유도</div>
<div class="purpose-card__description">기존 고객 재방문</div>
<div class="purpose-card__effect">예상효과: +25%</div>
<div class="purpose-card__check">
<span class="material-icons">check_circle</span>
</div>
</div>
</label>
<!-- Sales Increase -->
<label class="purpose-card" for="purpose3" data-purpose="sales_increase">
<input
type="radio"
name="purpose"
id="purpose3"
value="sales_increase"
class="purpose-radio"
>
<div class="purpose-card__content">
<div class="purpose-card__icon">💰</div>
<div class="purpose-card__title">매출 증대</div>
<div class="purpose-card__description">단기 매출 향상</div>
<div class="purpose-card__effect">예상효과: +40%</div>
<div class="purpose-card__check">
<span class="material-icons">check_circle</span>
</div>
</div>
</label>
<!-- Brand Awareness -->
<label class="purpose-card" for="purpose4" data-purpose="brand_awareness">
<input
type="radio"
name="purpose"
id="purpose4"
value="brand_awareness"
class="purpose-radio"
>
<div class="purpose-card__content">
<div class="purpose-card__icon">📢</div>
<div class="purpose-card__title">인지도 향상</div>
<div class="purpose-card__description">브랜드 인지도 제고</div>
<div class="purpose-card__effect">예상효과: +50%</div>
<div class="purpose-card__check">
<span class="material-icons">check_circle</span>
</div>
</div>
</label>
</div>
<!-- Next Button -->
<button
id="nextBtn"
class="btn btn-primary btn-lg btn-block"
style="margin-bottom: 32px;"
disabled
>
다음 (AI분석)
</button>
</div>
</main>
</div>
<!-- Scripts -->
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const nextBtn = document.getElementById('nextBtn');
const purposeCards = document.querySelectorAll('.purpose-card');
const purposeRadios = document.querySelectorAll('.purpose-radio');
let selectedPurpose = null;
// Purpose 상세 설명 데이터
const purposeDetails = {
new_customer: {
title: '신규고객 유치',
icon: '👤',
description: '새로운 고객을 끌어들이고 고객 기반을 확장합니다.',
benefits: [
'새로운 잠재고객 발굴',
'고객 기반 확대',
'시장 점유율 증가'
],
strategies: [
'할인 쿠폰 제공',
'SNS 바이럴 마케팅',
'신규 고객 전용 특전'
],
expectedEffect: '신규 고객 +30%',
successRate: '85%'
},
repeat_visit: {
title: '재방문 유도',
icon: '🔄',
description: '기존 고객의 재방문을 유도하여 충성도를 높입니다.',
benefits: [
'고객 충성도 향상',
'안정적 매출 확보',
'단골 고객 증가'
],
strategies: [
'재방문 쿠폰 발급',
'포인트 적립 이벤트',
'멤버십 혜택 강화'
],
expectedEffect: '재방문율 +25%',
successRate: '90%'
},
sales_increase: {
title: '매출 증대',
icon: '💰',
description: '단기간에 매출을 극대화하는 이벤트를 진행합니다.',
benefits: [
'즉각적인 매출 증가',
'재고 소진 가속화',
'현금 흐름 개선'
],
strategies: [
'시즌 특가 행사',
'묶음 할인 판매',
'한정 수량 프로모션'
],
expectedEffect: '매출 +40%',
successRate: '80%'
},
brand_awareness: {
title: '인지도 향상',
icon: '📢',
description: '브랜드 인지도를 높여 장기적인 성장 기반을 마련합니다.',
benefits: [
'브랜드 인지도 상승',
'입소문 효과',
'미디어 노출 증가'
],
strategies: [
'SNS 해시태그 챌린지',
'이벤트 사진 공유',
'인플루언서 협업'
],
expectedEffect: '인지도 +50%',
successRate: '75%'
}
};
// 카드 선택 이벤트
purposeCards.forEach(card => {
// 카드 클릭
card.addEventListener('click', function() {
const radio = this.querySelector('.purpose-radio');
if (radio) {
radio.checked = true;
handlePurposeSelection(radio.value);
}
});
// 롱프레스/호버 시 상세 툴팁
let pressTimer;
card.addEventListener('mouseenter', function() {
const purpose = this.dataset.purpose;
if (purpose) {
pressTimer = setTimeout(() => {
showTooltip(purpose, this);
}, 500);
}
});
card.addEventListener('mouseleave', function() {
clearTimeout(pressTimer);
});
// 터치 이벤트 (모바일)
card.addEventListener('touchstart', function(e) {
const purpose = this.dataset.purpose;
if (purpose) {
pressTimer = setTimeout(() => {
showTooltip(purpose, this);
}, 800);
}
});
card.addEventListener('touchend', function() {
clearTimeout(pressTimer);
});
});
// 라디오 버튼 변경 이벤트
purposeRadios.forEach(radio => {
radio.addEventListener('change', function() {
if (this.checked) {
handlePurposeSelection(this.value);
}
});
});
// 목적 선택 처리
function handlePurposeSelection(value) {
selectedPurpose = value;
// 모든 카드에서 selected 클래스 제거
purposeCards.forEach(card => {
card.classList.remove('selected');
});
// 선택된 카드에 selected 클래스 추가
const selectedCard = document.querySelector(`[data-purpose="${value}"]`);
if (selectedCard) {
selectedCard.classList.add('selected');
}
// 다음 버튼 활성화
nextBtn.disabled = false;
// 선택 완료 피드백
Toast.success(`${purposeDetails[value].title}이(가) 선택되었습니다.`);
// 다음 단계 프리페치 시뮬레이션
console.log('다음 단계 데이터 프리페치 중...', value);
}
// 상세 툴팁 표시
function showTooltip(purpose, element) {
const details = purposeDetails[purpose];
if (!details) return;
const rect = element.getBoundingClientRect();
BottomSheet.show(`
<div style="padding: 8px 0;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 48px; margin-bottom: 8px;">${details.icon}</div>
<h3 class="h3">${details.title}</h3>
<p class="body-m text-muted" style="margin-top: 8px;">${details.description}</p>
</div>
<div style="margin-bottom: 20px;">
<h4 class="body-m" style="font-weight: 600; margin-bottom: 12px;">주요 혜택</h4>
<ul style="margin-left: 20px;">
${details.benefits.map(b => `<li class="body-m" style="margin-bottom: 8px;">${b}</li>`).join('')}
</ul>
</div>
<div style="margin-bottom: 20px;">
<h4 class="body-m" style="font-weight: 600; margin-bottom: 12px;">추천 전략</h4>
<ul style="margin-left: 20px;">
${details.strategies.map(s => `<li class="body-m" style="margin-bottom: 8px;">${s}</li>`).join('')}
</ul>
</div>
<div class="card" style="padding: 16px; background: var(--color-secondary-light);">
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">
${details.expectedEffect}
</div>
<div class="body-s text-muted">
성공률: ${details.successRate}
</div>
</div>
</div>
`);
}
// 다음 버튼 클릭
nextBtn.addEventListener('click', function() {
if (!selectedPurpose) {
Toast.error('이벤트 목적을 선택해주세요.');
return;
}
// 이벤트 정보 저장
const eventData = {
id: Utils.generateId(),
purpose: selectedPurpose,
purposeDetails: purposeDetails[selectedPurpose],
createdAt: new Date().toISOString(),
status: 'planning'
};
window.AppState.currentEvent = eventData;
window.AppState.save();
// AI 분석 화면으로 이동
Loading.show('AI 트렌드 분석 준비 중...');
setTimeout(() => {
window.location.href = '04-AI트렌드분석결과.html';
}, 800);
});
// 닫기 확인
window.confirmClose = function() {
Modal.confirm(
'이벤트 기획 종료',
'현재까지 입력한 내용이 저장되지 않습니다. 정말 종료하시겠습니까?',
function() {
window.location.href = '21-실시간대시보드.html';
}
);
};
console.log('이벤트목적선택 페이지 로드 완료');
})();
</script>
<style>
/* Purpose Card Styles */
.purpose-card {
display: block;
margin-bottom: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.purpose-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.purpose-card__content {
padding: 20px;
border: 2px solid var(--color-gray-200);
border-radius: var(--radius-lg);
background: var(--color-white);
transition: all 0.3s ease;
position: relative;
}
.purpose-card:hover .purpose-card__content {
border-color: var(--color-primary-main);
background: var(--color-primary-light);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.purpose-card.selected .purpose-card__content {
border-color: var(--color-primary-main);
border-width: 3px;
background: var(--color-primary-light);
box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.1);
}
.purpose-card__icon {
font-size: 40px;
margin-bottom: 12px;
text-align: center;
}
.purpose-card__title {
font-size: 18px;
font-weight: 700;
color: var(--color-gray-900);
margin-bottom: 4px;
text-align: center;
}
.purpose-card__description {
font-size: 14px;
color: var(--color-gray-600);
margin-bottom: 8px;
text-align: center;
}
.purpose-card__effect {
font-size: 14px;
font-weight: 600;
color: var(--color-secondary-main);
text-align: center;
}
.purpose-card__check {
position: absolute;
top: 16px;
right: 16px;
opacity: 0;
transition: opacity 0.3s ease;
}
.purpose-card__check .material-icons {
color: var(--color-primary-main);
font-size: 28px;
}
.purpose-card.selected .purpose-card__check {
opacity: 1;
}
/* Active state for touch devices */
.purpose-card:active .purpose-card__content {
transform: scale(0.98);
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.purpose-card,
.purpose-card__content,
.purpose-card__check {
transition: none;
}
}
/* Focus state for keyboard navigation */
.purpose-radio:focus + .purpose-card__content {
outline: 2px solid var(--color-secondary-main);
outline-offset: 2px;
}
</style>
</body>
</html>

413
design/uiux/prototype/04-AI트렌드분석결과.html Normal file
View File

@ -0,0 +1,413 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - AI트렌드분석결과">
<title>AI 트렌드 분석 - KT 이벤트 마케팅</title>
<!-- Styles -->
<link rel="stylesheet" href="css/common.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
</head>
<body>
<!-- Skip Link -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- App Wrapper -->
<div class="app-wrapper">
<!-- Top App Bar -->
<header class="app-bar">
<button class="app-bar__back" aria-label="뒤로가기">
<span class="material-icons">arrow_back</span>
</button>
<h1 class="app-bar__title">AI 트렌드 분석</h1>
</header>
<!-- Main Content -->
<main id="main-content" class="app-content">
<div class="container" style="max-width: 500px; margin: 0 auto; padding-top: 24px;">
<!-- Progress Section -->
<div style="margin-bottom: 32px;">
<div class="body-m" style="margin-bottom: 8px; font-weight: 600;">단계 2/6: 트렌드 분석</div>
<div style="display: flex; gap: 4px;">
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
</div>
</div>
<!-- AI Analysis Loading -->
<div id="loadingSection" style="text-align: center; padding: 40px 0;">
<div class="spinner" style="margin: 0 auto 24px;"></div>
<h2 class="h3" style="margin-bottom: 8px;">🤖 AI가 분석중입니다...</h2>
<p class="body-m text-muted">업종, 지역, 시즌을 고려한 트렌드를 분석하고 있습니다</p>
<div id="progressBar" style="width: 100%; height: 8px; background: var(--color-gray-200); border-radius: 4px; margin: 24px 0; overflow: hidden;">
<div id="progressFill" style="height: 100%; background: var(--color-primary-main); width: 0%; transition: width 0.3s ease;"></div>
</div>
<div class="body-s text-muted" id="progressText">분석 시작 중...</div>
</div>
<!-- Analysis Results (Hidden initially) -->
<div id="resultsSection" style="display: none; opacity: 0; transition: opacity 0.5s ease;">
<!-- Store Info -->
<div style="margin-bottom: 32px;">
<h2 class="h3" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
<span>📊</span>
<span>분석 결과</span>
</h2>
<div class="card" style="padding: 16px;">
<div style="display: grid; grid-template-columns: auto 1fr; gap: 12px 16px;">
<div class="body-m text-muted">매장</div>
<div class="body-m" style="font-weight: 600;" id="storeName">-</div>
<div class="body-m text-muted">업종</div>
<div class="body-m" style="font-weight: 600;" id="businessType">-</div>
<div class="body-m text-muted">지역</div>
<div class="body-m" style="font-weight: 600;" id="location">-</div>
<div class="body-m text-muted">시즌</div>
<div class="body-m" style="font-weight: 600;" id="season">-</div>
</div>
</div>
</div>
<!-- Trends -->
<div style="margin-bottom: 32px;">
<h3 class="body-l" style="font-weight: 700; margin-bottom: 16px;">주요 트렌드</h3>
<div id="trendsList">
<!-- Trends will be dynamically added here -->
</div>
</div>
<!-- Success Rate -->
<div style="margin-bottom: 32px;">
<div class="card" style="padding: 20px; text-align: center; background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-white) 100%);">
<div class="h2" style="color: var(--color-secondary-main); margin-bottom: 8px;" id="successRate">
78% 🎯
</div>
<div class="body-m text-muted">예상 성공률 (동일 업종 평균 대비)</div>
</div>
</div>
<!-- Retry Button (Hidden unless error) -->
<button
id="retryBtn"
class="btn btn-secondary btn-md btn-block"
style="display: none; margin-bottom: 16px;"
onclick="retryAnalysis()"
>
<span class="material-icons" style="font-size: 20px; margin-right: 8px;">refresh</span>
다시 분석하기
</button>
<!-- Next Button -->
<button
id="nextBtn"
class="btn btn-primary btn-lg btn-block"
style="margin-bottom: 32px;"
>
다음 (경품추천)
</button>
</div>
</div>
</main>
</div>
<!-- Scripts -->
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const loadingSection = document.getElementById('loadingSection');
const resultsSection = document.getElementById('resultsSection');
const progressFill = document.getElementById('progressFill');
const progressText = document.getElementById('progressText');
const nextBtn = document.getElementById('nextBtn');
const retryBtn = document.getElementById('retryBtn');
// 상태 로드
window.AppState.load();
const store = window.AppState.store;
const event = window.AppState.currentEvent;
// 매장 정보가 없으면 이전 화면으로
if (!store) {
Toast.error('매장 정보를 먼저 등록해주세요.');
setTimeout(() => {
window.location.href = '02-매장정보등록.html';
}, 1000);
return;
}
// AI 분석 시뮬레이션
let progress = 0;
const analysisSteps = [
{ progress: 20, text: '업종 데이터 수집 중...' },
{ progress: 40, text: '지역 트렌드 분석 중...' },
{ progress: 60, text: '시즌 패턴 학습 중...' },
{ progress: 80, text: '최적 전략 계산 중...' },
{ progress: 100, text: '분석 완료!' }
];
let currentStep = 0;
function updateProgress() {
if (currentStep < analysisSteps.length) {
const step = analysisSteps[currentStep];
progressFill.style.width = step.progress + '%';
progressText.textContent = step.text;
currentStep++;
// 랜덤한 시간 간격으로 진행 (0.5~1초)
const delay = 500 + Math.random() * 500;
setTimeout(updateProgress, delay);
} else {
// 분석 완료
setTimeout(showResults, 500);
}
}
// 분석 결과 표시
function showResults() {
// 로딩 숨기기
loadingSection.style.display = 'none';
// 매장 정보 표시
document.getElementById('storeName').textContent = store.name || '-';
document.getElementById('businessType').textContent = store.businessTypeName || '-';
const addressParts = store.address ? store.address.split(' ') : [];
const locationText = addressParts.slice(0, 3).join(' ') || '-';
document.getElementById('location').textContent = locationText;
// 현재 시즌 계산
const currentMonth = new Date().getMonth() + 1;
let season = '';
if (currentMonth >= 3 && currentMonth <= 5) season = '봄';
else if (currentMonth >= 6 && currentMonth <= 8) season = '여름';
else if (currentMonth >= 9 && currentMonth <= 11) season = '가을';
else season = '겨울';
document.getElementById('season').textContent = `${season} (${currentMonth}월)`;
// 트렌드 데이터 생성 (업종별 트렌드 시뮬레이션)
const trends = generateTrends(store.businessType, season, event.purpose);
// 트렌드 렌더링
const trendsList = document.getElementById('trendsList');
trendsList.innerHTML = trends.map((trend, index) => `
<div class="trend-card" onclick="showTrendDetail(${index})" style="margin-bottom: 12px; cursor: pointer;">
<div class="card" style="padding: 16px; transition: all 0.3s ease;">
<div style="display: flex; gap: 12px;">
<div class="trend-number">${trend.emoji}</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 700; margin-bottom: 4px;">
${trend.title}
</div>
<div class="body-s" style="color: var(--color-secondary-main); margin-bottom: 8px;">
→ ${trend.recommendation}
</div>
<div class="body-s text-muted">${trend.description}</div>
</div>
</div>
</div>
</div>
`).join('');
// 성공률 계산
const successRate = calculateSuccessRate(store.businessType, event.purpose, trends);
document.getElementById('successRate').textContent = `${successRate}% 🎯`;
// 분석 결과 저장
event.trendAnalysis = {
trends: trends,
successRate: successRate,
analyzedAt: new Date().toISOString()
};
window.AppState.save();
// 결과 섹션 표시 (페이드인)
resultsSection.style.display = 'block';
setTimeout(() => {
resultsSection.style.opacity = '1';
}, 50);
Toast.success('AI 트렌드 분석이 완료되었습니다!');
}
// 업종/시즌/목적별 트렌드 생성
function generateTrends(businessType, season, purpose) {
const trendData = {
restaurant: {
winter: [
{ emoji: '1️⃣', title: '연말 모임 증가', recommendation: '단체 할인 이벤트 효과적', description: '회식, 송년회 수요 급증으로 단체 예약 고객 공략 필요' },
{ emoji: '2️⃣', title: '배달 주문 급증', recommendation: '배달 경품 추천', description: '추운 날씨로 배달 주문 40% 증가, 배달 전용 혜택 제공' },
{ emoji: '3️⃣', title: 'SNS 공유 활발', recommendation: '바이럴 참여방법 권장', description: '연말 분위기로 SNS 공유율 높음, 해시태그 이벤트 효과적' }
],
spring: [
{ emoji: '1️⃣', title: '야외 활동 증가', recommendation: '테이크아웃 이벤트', description: '봄 나들이 시즌, 테이크아웃 주문 35% 증가' },
{ emoji: '2️⃣', title: '가족 단위 방문', recommendation: '패밀리 세트 경품', description: '주말 가족 방문객 증가, 어린이 메뉴 할인 효과적' },
{ emoji: '3️⃣', title: '건강식 선호', recommendation: '건강 메뉴 홍보', description: '봄철 건강관리 트렌드, 저칼로리 메뉴 각광' }
]
},
cafe: {
winter: [
{ emoji: '1️⃣', title: '따뜻한 음료 선호', recommendation: '핫 음료 할인 이벤트', description: '겨울철 따뜻한 음료 판매량 60% 증가' },
{ emoji: '2️⃣', title: '실내 체류 시간 증가', recommendation: '재방문 쿠폰 제공', description: '추운 날씨로 카페 체류시간 2배 증가' },
{ emoji: '3️⃣', title: '디저트 수요 증가', recommendation: '음료+디저트 세트', description: '연말 분위기로 디저트 주문 45% 상승' }
]
}
};
// 기본 트렌드 (업종/시즌이 매칭되지 않을 경우)
const defaultTrends = [
{ emoji: '1️⃣', title: '할인 이벤트 선호', recommendation: '가격 할인 경품 추천', description: '소비자 가격 민감도 증가, 할인 이벤트 참여율 높음' },
{ emoji: '2️⃣', title: '모바일 접근성 중요', recommendation: 'QR코드 참여방식', description: '모바일 결제 증가, 간편한 참여 방법 선호' },
{ emoji: '3️⃣', title: '후기 공유 활발', recommendation: '리뷰 이벤트 연계', description: 'SNS 리뷰 작성 유도로 바이럴 효과 기대' }
];
// 업종과 시즌에 맞는 트렌드 반환
const seasonKey = season === '봄' ? 'spring' : season === '여름' ? 'summer' : season === '가을' ? 'fall' : 'winter';
if (trendData[businessType] && trendData[businessType][seasonKey]) {
return trendData[businessType][seasonKey];
} else if (trendData[businessType]) {
// 해당 시즌 데이터가 없으면 겨울 데이터 사용
return trendData[businessType].winter || defaultTrends;
} else {
return defaultTrends;
}
}
// 성공률 계산
function calculateSuccessRate(businessType, purpose, trends) {
let baseRate = 70;
// 업종별 기본 성공률
const businessRates = {
restaurant: 75,
cafe: 78,
retail: 72,
beauty: 80,
service: 70
};
if (businessRates[businessType]) {
baseRate = businessRates[businessType];
}
// 목적별 가중치
const purposeBonus = {
new_customer: 3,
repeat_visit: 5,
sales_increase: 0,
brand_awareness: -2
};
if (purposeBonus[purpose] !== undefined) {
baseRate += purposeBonus[purpose];
}
// 트렌드 개수에 따른 보너스
baseRate += trends.length;
return Math.min(95, Math.max(65, baseRate));
}
// 트렌드 상세 정보 표시
window.showTrendDetail = function(index) {
const trends = event.trendAnalysis.trends;
if (!trends || !trends[index]) return;
const trend = trends[index];
BottomSheet.show(`
<div style="padding: 8px 0;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 48px; margin-bottom: 8px;">${trend.emoji}</div>
<h3 class="h3">${trend.title}</h3>
</div>
<div style="margin-bottom: 20px;">
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">트렌드 설명</h4>
<p class="body-m">${trend.description}</p>
</div>
<div class="card" style="padding: 16px; background: var(--color-secondary-light);">
<h4 class="body-m" style="font-weight: 600; margin-bottom: 8px;">AI 추천</h4>
<p class="body-m" style="color: var(--color-secondary-main);">${trend.recommendation}</p>
</div>
</div>
`);
};
// 재시도
window.retryAnalysis = function() {
// 결과 숨기기
resultsSection.style.display = 'none';
resultsSection.style.opacity = '0';
retryBtn.style.display = 'none';
// 로딩 다시 표시
loadingSection.style.display = 'block';
currentStep = 0;
progress = 0;
progressFill.style.width = '0%';
progressText.textContent = '분석 시작 중...';
// 분석 재시작
setTimeout(updateProgress, 500);
};
// 다음 버튼
nextBtn.addEventListener('click', function() {
Loading.show('경품 추천 준비 중...');
setTimeout(() => {
window.location.href = '05-AI경품추천.html';
}, 800);
});
// 페이지 로드 시 분석 시작
setTimeout(updateProgress, 1000);
console.log('AI트렌드분석결과 페이지 로드 완료');
})();
</script>
<style>
.trend-card .card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary-main);
}
.trend-number {
font-size: 24px;
min-width: 32px;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
#progressText {
animation: pulse 2s ease-in-out infinite;
}
</style>
</body>
</html>

563
design/uiux/prototype/05-AI경품추천.html Normal file
View File

@ -0,0 +1,563 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - AI경품추천">
<title>AI 경품 추천 - KT 이벤트 마케팅</title>
<!-- Styles -->
<link rel="stylesheet" href="css/common.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
</head>
<body>
<!-- Skip Link -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- App Wrapper -->
<div class="app-wrapper">
<!-- Top App Bar -->
<header class="app-bar">
<button class="app-bar__back" aria-label="뒤로가기">
<span class="material-icons">arrow_back</span>
</button>
<h1 class="app-bar__title">AI 경품 추천</h1>
</header>
<!-- Main Content -->
<main id="main-content" class="app-content">
<div class="container" style="max-width: 500px; margin: 0 auto; padding-top: 24px;">
<!-- Progress Section -->
<div style="margin-bottom: 32px;">
<div class="body-m" style="margin-bottom: 8px; font-weight: 600;">단계 3/6: 경품 선택</div>
<div style="display: flex; gap: 4px;">
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
</div>
</div>
<!-- Budget Setting -->
<section style="margin-bottom: 32px;">
<h2 class="h3" style="margin-bottom: 16px;">예산 설정</h2>
<div class="card" style="padding: 20px;">
<div style="text-align: center; margin-bottom: 20px;">
<div class="h2" style="color: var(--color-primary-main);" id="budgetDisplay">
100,000원
</div>
</div>
<input
type="range"
id="budgetSlider"
min="10000"
max="5000000"
step="10000"
value="100000"
style="width: 100%; margin-bottom: 12px;"
>
<div style="display: flex; justify-content: space-between;">
<span class="body-s text-muted">1만원</span>
<span class="body-s text-muted">500만원</span>
</div>
</div>
</section>
<!-- AI Recommendations -->
<section style="margin-bottom: 24px;">
<h2 class="h3" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
<span>🤖</span>
<span>AI 추천 경품 (Top 5)</span>
</h2>
<div id="prizesList">
<!-- Prizes will be dynamically added here -->
</div>
</section>
<!-- Add Custom Prize -->
<button
class="btn btn-text btn-md"
style="width: 100%; margin-bottom: 24px;"
onclick="addCustomPrize()"
>
<span class="material-icons" style="margin-right: 8px;">add</span>
직접 입력하기
</button>
<!-- Budget Warning -->
<div id="budgetWarning" style="display: none; margin-bottom: 24px;">
<div class="card" style="padding: 16px; background: var(--color-error-light); border: 1px solid var(--color-error);">
<div style="display: flex; align-items: center; gap: 12px;">
<span class="material-icons" style="color: var(--color-error); font-size: 24px;">warning</span>
<div>
<div class="body-m" style="font-weight: 600; color: var(--color-error); margin-bottom: 4px;">
예산 초과
</div>
<div class="body-s text-muted">
선택한 경품의 총 비용이 예산을 초과합니다.
</div>
</div>
</div>
</div>
</div>
<!-- Next Button -->
<button
id="nextBtn"
class="btn btn-primary btn-lg btn-block"
style="margin-bottom: 32px;"
disabled
>
다음 (참여방법)
</button>
</div>
</main>
</div>
<!-- Scripts -->
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const budgetSlider = document.getElementById('budgetSlider');
const budgetDisplay = document.getElementById('budgetDisplay');
const prizesList = document.getElementById('prizesList');
const budgetWarning = document.getElementById('budgetWarning');
const nextBtn = document.getElementById('nextBtn');
let currentBudget = 100000;
let recommendedPrizes = [];
let selectedPrize = null;
// 상태 로드
window.AppState.load();
const store = window.AppState.store;
const event = window.AppState.currentEvent;
// 예산 슬라이더 변경
budgetSlider.addEventListener('input', function() {
currentBudget = parseInt(this.value);
budgetDisplay.textContent = Utils.formatNumber(currentBudget) + '원';
});
budgetSlider.addEventListener('change', function() {
// 예산 변경 시 경품 재추천
Loading.show('예산에 맞는 경품 재추천 중...');
setTimeout(() => {
generatePrizeRecommendations();
Loading.hide();
Toast.success('경품이 재추천되었습니다.');
}, 1000);
});
// AI 경품 추천 생성
function generatePrizeRecommendations() {
const businessType = store.businessType;
const purpose = event.purpose;
// 업종/목적별 경품 데이터
const prizesDatabase = {
restaurant: [
{ name: '치킨세트 무료교환', basePrice: 20000, attraction: 5, participationRate: 45, category: 'product' },
{ name: '5천원 할인쿠폰', basePrice: 5000, attraction: 4, participationRate: 38, category: 'discount' },
{ name: '사이드메뉴 무료 제공', basePrice: 8000, attraction: 4, participationRate: 40, category: 'product' },
{ name: '음료 무료 업그레이드', basePrice: 3000, attraction: 3, participationRate: 35, category: 'upgrade' },
{ name: '10% 할인 쿠폰', basePrice: 10000, attraction: 4, participationRate: 36, category: 'discount' }
],
cafe: [
{ name: '음료 1+1 쿠폰', basePrice: 5000, attraction: 5, participationRate: 42, category: 'product' },
{ name: '디저트 무료 제공', basePrice: 6000, attraction: 4, participationRate: 38, category: 'product' },
{ name: '3천원 할인쿠폰', basePrice: 3000, attraction: 4, participationRate: 40, category: 'discount' },
{ name: '사이즈 업그레이드', basePrice: 2000, attraction: 3, participationRate: 33, category: 'upgrade' },
{ name: '스탬프 2배 적립', basePrice: 0, attraction: 3, participationRate: 30, category: 'point' }
],
retail: [
{ name: '20% 할인쿠폰', basePrice: 10000, attraction: 5, participationRate: 44, category: 'discount' },
{ name: '무료 배송권', basePrice: 3000, attraction: 4, participationRate: 36, category: 'service' },
{ name: '사은품 증정', basePrice: 8000, attraction: 4, participationRate: 38, category: 'product' },
{ name: '5천원 상품권', basePrice: 5000, attraction: 4, participationRate: 40, category: 'voucher' },
{ name: 'VIP 멤버십 1개월', basePrice: 0, attraction: 3, participationRate: 28, category: 'membership' }
]
};
// 기본 경품 (업종이 매칭되지 않을 경우)
const defaultPrizes = [
{ name: 'KT 멤버십 포인트 5천점', basePrice: 5000, attraction: 3, participationRate: 32, category: 'point' },
{ name: '5천원 모바일 상품권', basePrice: 5000, attraction: 4, participationRate: 38, category: 'voucher' },
{ name: '3천원 할인쿠폰', basePrice: 3000, attraction: 4, participationRate: 36, category: 'discount' },
{ name: '경품 추첨권', basePrice: 0, attraction: 2, participationRate: 25, category: 'raffle' },
{ name: '다음 방문 시 10% 할인', basePrice: 0, attraction: 3, participationRate: 30, category: 'discount' }
];
let prizes = prizesDatabase[businessType] || defaultPrizes;
// 예산에 맞춰 가격 조정 및 추천
const budgetPerPrize = currentBudget * 0.2; // 경품 1개당 예산의 20%
recommendedPrizes = prizes.map((prize, index) => {
// 예산에 따라 수량 조정
const maxQuantity = Math.floor(currentBudget / prize.basePrice) || 100;
const recommendedQuantity = Math.min(maxQuantity, Math.ceil(50 + Math.random() * 50));
return {
id: Utils.generateId(),
rank: index + 1,
name: prize.name,
price: prize.basePrice,
quantity: recommendedQuantity,
attraction: prize.attraction,
participationRate: prize.participationRate,
category: prize.category,
totalCost: prize.basePrice * recommendedQuantity
};
}).slice(0, 5);
renderPrizesList();
}
// 경품 목록 렌더링
function renderPrizesList() {
prizesList.innerHTML = recommendedPrizes.map(prize => `
<div class="prize-card ${selectedPrize && selectedPrize.id === prize.id ? 'selected' : ''}" data-prize-id="${prize.id}">
<div class="card" style="padding: 16px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease; position: relative;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
<div style="flex: 1;">
<div class="body-m" style="font-weight: 700; margin-bottom: 4px;">
${prize.rank}. ${prize.name}
</div>
<div class="body-s text-muted">
${Utils.formatNumber(prize.price)}원 × ${prize.quantity}개
</div>
</div>
${selectedPrize && selectedPrize.id === prize.id ? `
<span class="material-icons" style="color: var(--color-primary-main); font-size: 28px;">
check_circle
</span>
` : ''}
</div>
<div style="margin-bottom: 12px;">
<div class="body-s" style="margin-bottom: 4px;">
매력도: ${'⭐'.repeat(prize.attraction)}${'☆'.repeat(5 - prize.attraction)}
</div>
<div class="body-s" style="color: var(--color-secondary-main);">
예상참여율: ${prize.participationRate}%
</div>
</div>
<div style="display: flex; gap: 8px;">
<button
class="btn btn-secondary btn-sm"
style="flex: 1;"
onclick="selectPrize('${prize.id}')"
>
선택
</button>
<button
class="btn btn-text btn-sm"
style="flex: 1;"
onclick="editPrize('${prize.id}')"
>
수정
</button>
</div>
</div>
</div>
`).join('');
}
// 경품 선택
window.selectPrize = function(prizeId) {
const prize = recommendedPrizes.find(p => p.id === prizeId);
if (!prize) return;
selectedPrize = prize;
renderPrizesList();
checkBudget();
nextBtn.disabled = false;
Toast.success(`${prize.name}이(가) 선택되었습니다.`);
// 예상 효과 재계산 애니메이션
const card = document.querySelector(`[data-prize-id="${prizeId}"]`);
if (card) {
card.style.transform = 'scale(1.02)';
setTimeout(() => {
card.style.transform = '';
}, 200);
}
};
// 경품 수정
window.editPrize = function(prizeId) {
const prize = recommendedPrizes.find(p => p.id === prizeId);
if (!prize) return;
Modal.show({
title: '경품 수정',
body: `
<div class="form-group">
<label class="form-label required">경품명</label>
<input
type="text"
id="editPrizeName"
class="form-input"
value="${prize.name}"
required
>
</div>
<div class="form-group">
<label class="form-label required">개당 가격 (원)</label>
<input
type="number"
id="editPrizePrice"
class="form-input"
value="${prize.price}"
required
min="0"
>
</div>
<div class="form-group">
<label class="form-label required">수량 (개)</label>
<input
type="number"
id="editPrizeQuantity"
class="form-input"
value="${prize.quantity}"
required
min="1"
>
</div>
<div class="body-s text-muted" style="margin-top: 8px;">
총 비용: <span id="editTotalCost">${Utils.formatNumber(prize.totalCost)}</span>원
</div>
`,
confirmText: '저장',
onConfirm: function() {
const newName = document.getElementById('editPrizeName').value.trim();
const newPrice = parseInt(document.getElementById('editPrizePrice').value);
const newQuantity = parseInt(document.getElementById('editPrizeQuantity').value);
if (!newName || !newPrice || !newQuantity) {
Toast.error('모든 항목을 입력해주세요.');
return;
}
prize.name = newName;
prize.price = newPrice;
prize.quantity = newQuantity;
prize.totalCost = newPrice * newQuantity;
// 예상참여율 재계산 (가격이 낮을수록 참여율 높음)
const priceRatio = newPrice / 10000;
prize.participationRate = Math.min(50, Math.max(20, Math.round(40 - priceRatio * 5)));
renderPrizesList();
checkBudget();
Toast.success('경품이 수정되었습니다.');
}
});
// 실시간 총 비용 계산
setTimeout(() => {
const priceInput = document.getElementById('editPrizePrice');
const quantityInput = document.getElementById('editPrizeQuantity');
const totalCostSpan = document.getElementById('editTotalCost');
function updateTotalCost() {
const price = parseInt(priceInput.value) || 0;
const quantity = parseInt(quantityInput.value) || 0;
totalCostSpan.textContent = Utils.formatNumber(price * quantity);
}
priceInput.addEventListener('input', updateTotalCost);
quantityInput.addEventListener('input', updateTotalCost);
}, 100);
};
// 직접 경품 추가
window.addCustomPrize = function() {
Modal.show({
title: '경품 직접 입력',
body: `
<div class="form-group">
<label class="form-label required">경품명</label>
<input
type="text"
id="customPrizeName"
class="form-input"
placeholder="예) 스타벅스 아메리카노"
required
>
</div>
<div class="form-group">
<label class="form-label required">개당 가격 (원)</label>
<input
type="number"
id="customPrizePrice"
class="form-input"
placeholder="5000"
required
min="0"
>
</div>
<div class="form-group">
<label class="form-label required">수량 (개)</label>
<input
type="number"
id="customPrizeQuantity"
class="form-input"
placeholder="50"
required
min="1"
>
</div>
<div class="body-s text-muted" style="margin-top: 8px;">
총 비용: <span id="customTotalCost">0</span>원
</div>
`,
confirmText: '추가',
onConfirm: function() {
const name = document.getElementById('customPrizeName').value.trim();
const price = parseInt(document.getElementById('customPrizePrice').value);
const quantity = parseInt(document.getElementById('customPrizeQuantity').value);
if (!name || !price || !quantity) {
Toast.error('모든 항목을 입력해주세요.');
return;
}
const newPrize = {
id: Utils.generateId(),
rank: recommendedPrizes.length + 1,
name: name,
price: price,
quantity: quantity,
attraction: 3,
participationRate: 30,
category: 'custom',
totalCost: price * quantity
};
recommendedPrizes.push(newPrize);
renderPrizesList();
Toast.success('경품이 추가되었습니다.');
}
});
// 실시간 총 비용 계산
setTimeout(() => {
const priceInput = document.getElementById('customPrizePrice');
const quantityInput = document.getElementById('customPrizeQuantity');
const totalCostSpan = document.getElementById('customTotalCost');
function updateTotalCost() {
const price = parseInt(priceInput.value) || 0;
const quantity = parseInt(quantityInput.value) || 0;
totalCostSpan.textContent = Utils.formatNumber(price * quantity);
}
priceInput.addEventListener('input', updateTotalCost);
quantityInput.addEventListener('input', updateTotalCost);
}, 100);
};
// 예산 초과 체크
function checkBudget() {
if (!selectedPrize) {
budgetWarning.style.display = 'none';
return;
}
if (selectedPrize.totalCost > currentBudget) {
budgetWarning.style.display = 'block';
nextBtn.disabled = true;
} else {
budgetWarning.style.display = 'none';
nextBtn.disabled = false;
}
}
// 다음 버튼
nextBtn.addEventListener('click', function() {
if (!selectedPrize) {
Toast.error('경품을 선택해주세요.');
return;
}
if (selectedPrize.totalCost > currentBudget) {
Toast.error('예산을 초과합니다. 경품을 수정하거나 예산을 늘려주세요.');
return;
}
// 경품 정보 저장
event.prize = selectedPrize;
event.budget = currentBudget;
window.AppState.save();
Loading.show('참여방법 준비 중...');
setTimeout(() => {
window.location.href = '06-AI참여방법설계.html';
}, 800);
});
// 초기화
generatePrizeRecommendations();
console.log('AI경품추천 페이지 로드 완료');
})();
</script>
<style>
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 6px;
background: var(--color-gray-200);
border-radius: 3px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--color-primary-main);
border-radius: 50%;
cursor: pointer;
box-shadow: var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--color-primary-main);
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: var(--shadow-sm);
}
.prize-card.selected .card {
border: 3px solid var(--color-primary-main);
background: var(--color-primary-light);
box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.1);
}
.prize-card .card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
</style>
</body>
</html>

507
design/uiux/prototype/06-AI참여방법설계.html Normal file
View File

@ -0,0 +1,507 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - AI참여방법설계">
<title>AI 참여방법 설계 - KT 이벤트 마케팅</title>
<!-- Styles -->
<link rel="stylesheet" href="css/common.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
</head>
<body>
<!-- Skip Link -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- App Wrapper -->
<div class="app-wrapper">
<!-- Top App Bar -->
<header class="app-bar">
<button class="app-bar__back" aria-label="뒤로가기">
<span class="material-icons">arrow_back</span>
</button>
<h1 class="app-bar__title">AI 참여방법 설계</h1>
</header>
<!-- Main Content -->
<main id="main-content" class="app-content">
<div class="container" style="max-width: 500px; margin: 0 auto; padding-top: 24px;">
<!-- Progress Section -->
<div style="margin-bottom: 32px;">
<div class="body-m" style="margin-bottom: 8px; font-weight: 600;">단계 4/6: 참여방법 선택</div>
<div style="display: flex; gap: 4px;">
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
</div>
</div>
<!-- Instructions -->
<div style="text-align: center; margin-bottom: 32px;">
<h2 class="h2" style="margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;">
<span>🤖</span>
<span>AI 추천 참여방법</span>
</h2>
<p class="body-m text-muted">이벤트 목적에 맞는 최적의 참여 방법을 선택하세요</p>
</div>
<!-- Participation Methods -->
<div id="methodOptions" style="margin-bottom: 24px;">
<!-- Option 1: Simple -->
<div class="method-card" data-method="simple">
<div class="card" style="padding: 20px; margin-bottom: 16px; cursor: pointer; transition: all 0.3s ease;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
<div>
<div class="body-l" style="font-weight: 700; margin-bottom: 4px;">옵션 1: 간편형</div>
<div class="h3" style="margin-bottom: 8px;">📱 QR 코드 스캔</div>
</div>
<div class="method-check" style="opacity: 0; transition: opacity 0.3s ease;">
<span class="material-icons" style="color: var(--color-primary-main); font-size: 32px;">
check_circle
</span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div class="body-m" style="margin-bottom: 8px;">
<span class="text-muted">난이도:</span> ⭐ (쉬움)
</div>
<div class="body-m" style="margin-bottom: 8px;">
<span class="text-muted">예상참여율:</span>
<span style="color: var(--color-secondary-main); font-weight: 600;">60%</span>
</div>
<div class="body-m">
<span class="text-muted">재방문율:</span>
<span style="color: var(--color-success); font-weight: 600;">20%</span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div class="body-s" style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
<span class="material-icons" style="font-size: 16px; color: var(--color-success);">check</span>
<span>빠른 참여</span>
</div>
<div class="body-s" style="display: flex; align-items: center; gap: 8px;">
<span class="material-icons" style="font-size: 16px; color: var(--color-success);">check</span>
<span>매장 방문 불필요</span>
</div>
</div>
<button
class="btn btn-secondary btn-md btn-block"
onclick="selectMethod('simple')"
>
선택하기
</button>
</div>
</div>
<!-- Option 2: Revisit -->
<div class="method-card" data-method="revisit">
<div class="card" style="padding: 20px; margin-bottom: 16px; cursor: pointer; transition: all 0.3s ease;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
<div>
<div class="body-l" style="font-weight: 700; margin-bottom: 4px;">옵션 2: 재방문 유도형</div>
<div class="h3" style="margin-bottom: 8px;">🏪 매장 방문 + 리뷰</div>
</div>
<div class="method-check" style="opacity: 0; transition: opacity 0.3s ease;">
<span class="material-icons" style="color: var(--color-primary-main); font-size: 32px;">
check_circle
</span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div class="body-m" style="margin-bottom: 8px;">
<span class="text-muted">난이도:</span> ⭐⭐ (보통)
</div>
<div class="body-m" style="margin-bottom: 8px;">
<span class="text-muted">예상참여율:</span>
<span style="color: var(--color-secondary-main); font-weight: 600;">35%</span>
</div>
<div class="body-m">
<span class="text-muted">재방문율:</span>
<span style="color: var(--color-success); font-weight: 600;">80%</span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div class="body-s" style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
<span class="material-icons" style="font-size: 16px; color: var(--color-success);">check</span>
<span>높은 재방문율</span>
</div>
<div class="body-s" style="display: flex; align-items: center; gap: 8px;">
<span class="material-icons" style="font-size: 16px; color: var(--color-success);">check</span>
<span>리뷰 축적</span>
</div>
</div>
<button
class="btn btn-secondary btn-md btn-block"
onclick="selectMethod('revisit')"
>
선택하기
</button>
</div>
</div>
<!-- Option 3: Viral -->
<div class="method-card" data-method="viral">
<div class="card" style="padding: 20px; margin-bottom: 16px; cursor: pointer; transition: all 0.3s ease;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
<div>
<div class="body-l" style="font-weight: 700; margin-bottom: 4px;">옵션 3: 바이럴형</div>
<div class="h3" style="margin-bottom: 8px;">📢 SNS 공유 + 태그</div>
</div>
<div class="method-check" style="opacity: 0; transition: opacity 0.3s ease;">
<span class="material-icons" style="color: var(--color-primary-main); font-size: 32px;">
check_circle
</span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div class="body-m" style="margin-bottom: 8px;">
<span class="text-muted">난이도:</span> ⭐⭐⭐ (어려움)
</div>
<div class="body-m" style="margin-bottom: 8px;">
<span class="text-muted">예상참여율:</span>
<span style="color: var(--color-secondary-main); font-weight: 600;">25%</span>
</div>
<div class="body-m">
<span class="text-muted">바이럴 확산:</span>
<span style="color: var(--color-success); font-weight: 600;">150%</span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div class="body-s" style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
<span class="material-icons" style="font-size: 16px; color: var(--color-success);">check</span>
<span>입소문 효과</span>
</div>
<div class="body-s" style="display: flex; align-items: center; gap: 8px;">
<span class="material-icons" style="font-size: 16px; color: var(--color-success);">check</span>
<span>신규고객 유입</span>
</div>
</div>
<button
class="btn btn-secondary btn-md btn-block"
onclick="selectMethod('viral')"
>
선택하기
</button>
</div>
</div>
</div>
<!-- Compare Button -->
<button
class="btn btn-text btn-md btn-block"
style="margin-bottom: 24px;"
onclick="showCompareView()"
>
<span class="material-icons" style="margin-right: 8px;">compare_arrows</span>
옵션 비교하기
</button>
<!-- Next Button -->
<button
id="nextBtn"
class="btn btn-primary btn-lg btn-block"
style="margin-bottom: 32px;"
disabled
>
다음 (홍보문구)
</button>
</div>
</main>
</div>
<!-- Scripts -->
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const methodCards = document.querySelectorAll('.method-card');
const nextBtn = document.getElementById('nextBtn');
let selectedMethod = null;
// 참여 방법 상세 데이터
const methodDetails = {
simple: {
id: 'simple',
name: '간편형',
icon: '📱',
title: 'QR 코드 스캔',
difficulty: 1,
participationRate: 60,
revisitRate: 20,
viralEffect: 0,
benefits: ['빠른 참여', '매장 방문 불필요', '즉시 경품 확인'],
process: [
'1. QR 코드 스캔',
'2. 이벤트 페이지 자동 이동',
'3. 간단한 정보 입력',
'4. 즉시 경품 당첨 확인'
],
bestFor: ['신규고객 유치', '빠른 확산'],
tips: '매장 입구, 포스터, 전단지에 QR 코드 부착'
},
revisit: {
id: 'revisit',
name: '재방문 유도형',
icon: '🏪',
title: '매장 방문 + 리뷰',
difficulty: 2,
participationRate: 35,
revisitRate: 80,
viralEffect: 30,
benefits: ['높은 재방문율', '리뷰 축적', '충성고객 확보'],
process: [
'1. 매장 방문 인증 (QR 스캔 또는 GPS)',
'2. 제품 구매 또는 서비스 이용',
'3. 리뷰 작성 (별점 + 후기)',
'4. 경품 즉시 지급 또는 추첨'
],
bestFor: ['재방문 유도', '매출 증대'],
tips: '리뷰 작성 시 추가 혜택 제공으로 참여율 향상'
},
viral: {
id: 'viral',
name: '바이럴형',
icon: '📢',
title: 'SNS 공유 + 태그',
difficulty: 3,
participationRate: 25,
revisitRate: 15,
viralEffect: 150,
benefits: ['입소문 효과', '신규고객 유입', '브랜드 인지도 향상'],
process: [
'1. 이벤트 페이지 방문',
'2. SNS(인스타그램, 페이스북) 공유',
'3. 해시태그 및 매장 태그 필수',
'4. 공유 인증 후 경품 추첨'
],
bestFor: ['인지도 향상', '바이럴 마케팅'],
tips: '매력적인 이미지와 해시태그가 성공의 핵심'
}
};
// 상태 로드
window.AppState.load();
const event = window.AppState.currentEvent;
// 카드 클릭 이벤트
methodCards.forEach(card => {
card.addEventListener('click', function(e) {
// 버튼 클릭이 아닐 때만 상세 정보 표시
if (!e.target.closest('button')) {
const method = this.dataset.method;
showMethodDetail(method);
}
});
});
// 참여 방법 선택
window.selectMethod = function(method) {
selectedMethod = method;
// 모든 카드에서 selected 클래스 제거
methodCards.forEach(card => {
card.classList.remove('selected');
const check = card.querySelector('.method-check');
if (check) check.style.opacity = '0';
});
// 선택된 카드에 selected 클래스 추가
const selectedCard = document.querySelector(`[data-method="${method}"]`);
if (selectedCard) {
selectedCard.classList.add('selected');
const check = selectedCard.querySelector('.method-check');
if (check) check.style.opacity = '1';
}
// 다음 버튼 활성화
nextBtn.disabled = false;
// 선택 피드백
const details = methodDetails[method];
Toast.success(`${details.name}이(가) 선택되었습니다.`);
// 카드 애니메이션
if (selectedCard) {
selectedCard.style.transform = 'scale(1.02)';
setTimeout(() => {
selectedCard.style.transform = '';
}, 200);
}
};
// 참여 방법 상세 정보
function showMethodDetail(method) {
const details = methodDetails[method];
if (!details) return;
BottomSheet.show(`
<div style="padding: 8px 0;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 48px; margin-bottom: 8px;">${details.icon}</div>
<h3 class="h3">${details.name}</h3>
<p class="body-l" style="margin-top: 8px; color: var(--color-gray-700);">${details.title}</p>
</div>
<div style="margin-bottom: 20px;">
<h4 class="body-m" style="font-weight: 600; margin-bottom: 12px;">참여 과정</h4>
<div style="margin-left: 8px;">
${details.process.map(p => `
<div class="body-m" style="margin-bottom: 8px; padding-left: 8px; border-left: 3px solid var(--color-secondary-main);">
${p}
</div>
`).join('')}
</div>
</div>
<div style="margin-bottom: 20px;">
<h4 class="body-m" style="font-weight: 600; margin-bottom: 12px;">주요 혜택</h4>
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
${details.benefits.map(b => `
<span class="body-s" style="padding: 6px 12px; background: var(--color-secondary-light); border-radius: 16px; color: var(--color-secondary-main);">
${b}
</span>
`).join('')}
</div>
</div>
<div style="margin-bottom: 20px;">
<h4 class="body-m" style="font-weight: 600; margin-bottom: 12px;">추천 상황</h4>
<div class="body-m text-muted">
${details.bestFor.join(', ')}
</div>
</div>
<div class="card" style="padding: 16px; background: var(--color-primary-light);">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px; color: var(--color-primary-main);">
💡 팁
</div>
<div class="body-s">${details.tips}</div>
</div>
</div>
`);
}
// 옵션 비교 뷰
window.showCompareView = function() {
const methods = Object.values(methodDetails);
Modal.show({
title: '참여방법 비교',
body: `
<div style="overflow-x: auto;">
<table style="width: 100%; border-collapse: collapse; font-size: 14px;">
<thead>
<tr style="background: var(--color-gray-100);">
<th style="padding: 12px; text-align: left; border-bottom: 2px solid var(--color-gray-300);">항목</th>
<th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--color-gray-300);">간편형</th>
<th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--color-gray-300);">재방문형</th>
<th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--color-gray-300);">바이럴형</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 12px; border-bottom: 1px solid var(--color-gray-200);">난이도</td>
<td style="padding: 12px; text-align: center; border-bottom: 1px solid var(--color-gray-200);">⭐</td>
<td style="padding: 12px; text-align: center; border-bottom: 1px solid var(--color-gray-200);">⭐⭐</td>
<td style="padding: 12px; text-align: center; border-bottom: 1px solid var(--color-gray-200);">⭐⭐⭐</td>
</tr>
<tr>
<td style="padding: 12px; border-bottom: 1px solid var(--color-gray-200);">참여율</td>
<td style="padding: 12px; text-align: center; border-bottom: 1px solid var(--color-gray-200); font-weight: 700; color: var(--color-success);">60%</td>
<td style="padding: 12px; text-align: center; border-bottom: 1px solid var(--color-gray-200);">35%</td>
<td style="padding: 12px; text-align: center; border-bottom: 1px solid var(--color-gray-200);">25%</td>
</tr>
<tr>
<td style="padding: 12px; border-bottom: 1px solid var(--color-gray-200);">재방문율</td>
<td style="padding: 12px; text-align: center; border-bottom: 1px solid var(--color-gray-200);">20%</td>
<td style="padding: 12px; text-align: center; border-bottom: 1px solid var(--color-gray-200); font-weight: 700; color: var(--color-success);">80%</td>
<td style="padding: 12px; text-align: center; border-bottom: 1px solid var(--color-gray-200);">15%</td>
</tr>
<tr>
<td style="padding: 12px;">바이럴 효과</td>
<td style="padding: 12px; text-align: center;">-</td>
<td style="padding: 12px; text-align: center;">30%</td>
<td style="padding: 12px; text-align: center; font-weight: 700; color: var(--color-success);">150%</td>
</tr>
</tbody>
</table>
</div>
`,
confirmText: '확인',
showCancel: false
});
};
// 다음 버튼
nextBtn.addEventListener('click', function() {
if (!selectedMethod) {
Toast.error('참여 방법을 선택해주세요.');
return;
}
// 참여 방법 정보 저장
event.participationMethod = methodDetails[selectedMethod];
window.AppState.save();
Loading.show('홍보 문구 생성 준비 중...');
setTimeout(() => {
window.location.href = '07-AI홍보문구생성.html';
}, 800);
});
console.log('AI참여방법설계 페이지 로드 완료');
})();
</script>
<style>
.method-card {
transition: all 0.3s ease;
}
.method-card .card {
border: 2px solid var(--color-gray-200);
}
.method-card.selected .card {
border: 3px solid var(--color-primary-main);
background: var(--color-primary-light);
box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.1);
}
.method-card .card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-secondary-main);
}
.method-card:active {
transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
.method-card,
.method-card .card,
.method-check {
transition: none;
}
}
</style>
</body>
</html>

501
design/uiux/prototype/07-AI홍보문구생성.html Normal file
View File

@ -0,0 +1,501 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="KT AI 기반 소상공인 이벤트 자동 생성 서비스 - AI홍보문구생성">
<title>AI 홍보문구 생성 - KT 이벤트 마케팅</title>
<!-- Styles -->
<link rel="stylesheet" href="css/common.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
</head>
<body>
<!-- Skip Link -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- App Wrapper -->
<div class="app-wrapper">
<!-- Top App Bar -->
<header class="app-bar">
<button class="app-bar__back" aria-label="뒤로가기">
<span class="material-icons">arrow_back</span>
</button>
<h1 class="app-bar__title">AI 홍보문구 생성</h1>
</header>
<!-- Main Content -->
<main id="main-content" class="app-content">
<div class="container" style="max-width: 500px; margin: 0 auto; padding-top: 24px;">
<!-- Progress Section -->
<div style="margin-bottom: 32px;">
<div class="body-m" style="margin-bottom: 8px; font-weight: 600;">단계 5/6: 홍보문구 선택</div>
<div style="display: flex; gap: 4px;">
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-primary-main); border-radius: 2px;"></div>
<div style="flex: 1; height: 4px; background: var(--color-gray-200); border-radius: 2px;"></div>
</div>
</div>
<!-- AI Generation Loading -->
<div id="loadingSection" style="text-align: center; padding: 40px 0;">
<div class="spinner" style="margin: 0 auto 24px;"></div>
<h2 class="h3" style="margin-bottom: 8px;">🤖 AI가 생성중입니다...</h2>
<p class="body-m text-muted">매장과 이벤트에 맞는 홍보 문구를 작성하고 있습니다</p>
<div id="progressBar" style="width: 100%; height: 8px; background: var(--color-gray-200); border-radius: 4px; margin: 24px 0; overflow: hidden;">
<div id="progressFill" style="height: 100%; background: var(--color-primary-main); width: 0%; transition: width 0.3s ease;"></div>
</div>
<div class="body-s text-muted" id="progressText">문구 생성 준비 중...</div>
</div>
<!-- Generated Messages (Hidden initially) -->
<div id="resultsSection" style="display: none; opacity: 0; transition: opacity 0.5s ease;">
<h2 class="h3" style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
<span>📝</span>
<span>생성된 홍보 문구</span>
</h2>
<div id="messagesList">
<!-- Messages will be dynamically added here -->
</div>
<!-- Regenerate Button -->
<button
class="btn btn-secondary btn-md btn-block"
style="margin-bottom: 24px;"
onclick="regenerateMessages()"
>
<span class="material-icons" style="margin-right: 8px;">refresh</span>
다시 생성하기
</button>
<!-- Next Button -->
<button
id="nextBtn"
class="btn btn-primary btn-lg btn-block"
style="margin-bottom: 32px;"
disabled
>
다음 (최종확인)
</button>
</div>
</div>
</main>
</div>
<!-- Scripts -->
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const loadingSection = document.getElementById('loadingSection');
const resultsSection = document.getElementById('resultsSection');
const progressFill = document.getElementById('progressFill');
const progressText = document.getElementById('progressText');
const messagesList = document.getElementById('messagesList');
const nextBtn = document.getElementById('nextBtn');
let generatedMessages = [];
let selectedMessage = null;
// 상태 로드
window.AppState.load();
const store = window.AppState.store;
const event = window.AppState.currentEvent;
// AI 생성 시뮬레이션
const generationSteps = [
{ progress: 20, text: '매장 정보 분석 중...' },
{ progress: 40, text: '이벤트 컨셉 도출 중...' },
{ progress: 60, text: '문구 패턴 학습 중...' },
{ progress: 80, text: '해시태그 생성 중...' },
{ progress: 100, text: '최종 문구 완성 중...' }
];
let currentStep = 0;
function updateProgress() {
if (currentStep < generationSteps.length) {
const step = generationSteps[currentStep];
progressFill.style.width = step.progress + '%';
progressText.textContent = step.text;
currentStep++;
const delay = 1000 + Math.random() * 1500; // 1~2.5초
setTimeout(updateProgress, delay);
} else {
setTimeout(showResults, 500);
}
}
// 홍보 문구 생성
function generateMessages() {
const storeName = store.name || '우리 가게';
const businessType = store.businessTypeName || '가게';
const prizeName = event.prize ? event.prize.name : '경품';
const purpose = event.purposeDetails ? event.purposeDetails.title : '이벤트';
// 5가지 톤앤매너 문구 생성
generatedMessages = [
{
id: Utils.generateId(),
version: 1,
tone: '친근한 톤',
message: `🎉 연말 대박 이벤트!\n${storeName}에서\n${prizeName}을(를) 공짜로!\n지금 바로 참여하세요 😊`,
hashtags: ['#' + store.address.split(' ')[1] + '맛집', '#이벤트', '#연말특가', '#' + businessType],
platform: 'Instagram',
style: 'friendly'
},
{
id: Utils.generateId(),
version: 2,
tone: '공식적인 톤',
message: `${storeName} 12월 프로모션을 시작합니다.\n선착순 한정으로\n${prizeName} 무료 증정 이벤트를 진행합니다.\n많은 관심과 참여 부탁드립니다.`,
hashtags: ['#' + storeName, '#프로모션', '#이벤트안내'],
platform: 'Blog',
style: 'formal'
},
{
id: Utils.generateId(),
version: 3,
tone: '긴급한 톤',
message: `⚡ 놓치면 후회!\n지금 ${storeName}에서\n${prizeName} 이벤트 진행 중!\n서두르세요! 선착순 마감 임박! 🔥`,
hashtags: ['#긴급', '#선착순', '#한정수량', '#' + businessType + '이벤트'],
platform: 'Instagram',
style: 'urgent'
},
{
id: Utils.generateId(),
version: 4,
tone: '감성적인 톤',
message: `올 한 해 수고 많으셨습니다 💙\n소중한 고객님께 감사의 마음을 담아\n${storeName}에서\n${prizeName} 이벤트를 준비했습니다.\n여러분의 행복한 연말을 응원합니다.`,
hashtags: ['#감사이벤트', '#연말감사', '#고객사랑', '#' + storeName],
platform: 'Kakao',
style: 'emotional'
},
{
id: Utils.generateId(),
version: 5,
tone: '유머러스한 톤',
message: `${businessType} 먹고 싶은데 돈은 아까운 당신!\n${storeName}이 해결해드립니다 😎\n${prizeName} 이벤트로\n지갑 걱정 끝! 배는 두둑!\n지금 바로 참여하GO! 🎁`,
hashtags: ['#' + businessType + '맛집', '#가성비', '#이벤트중', '#지금참여'],
platform: 'Instagram',
style: 'humorous'
}
];
return generatedMessages;
}
// 결과 표시
function showResults() {
loadingSection.style.display = 'none';
generateMessages();
renderMessages();
resultsSection.style.display = 'block';
setTimeout(() => {
resultsSection.style.opacity = '1';
}, 50);
Toast.success('홍보 문구가 생성되었습니다!');
}
// 메시지 렌더링
function renderMessages() {
messagesList.innerHTML = generatedMessages.map(msg => `
<div class="message-card ${selectedMessage && selectedMessage.id === msg.id ? 'selected' : ''}" data-message-id="${msg.id}">
<div class="card" style="padding: 16px; margin-bottom: 16px; cursor: pointer; transition: all 0.3s ease;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
<div>
<div class="body-m" style="font-weight: 700; margin-bottom: 4px;">
버전 ${msg.version}: ${msg.tone}
</div>
<div class="body-s text-muted">
추천 플랫폼: ${msg.platform}
</div>
</div>
${selectedMessage && selectedMessage.id === msg.id ? `
<span class="material-icons" style="color: var(--color-primary-main); font-size: 28px;">
check_circle
</span>
` : ''}
</div>
<div class="message-preview" style="padding: 12px; background: var(--color-gray-50); border-radius: var(--radius-md); margin-bottom: 12px;">
<div class="body-m" style="white-space: pre-line; line-height: 1.6;">
${msg.message}
</div>
</div>
<div style="margin-bottom: 12px;">
<div class="body-s text-muted" style="margin-bottom: 4px;">해시태그:</div>
<div style="display: flex; flex-wrap: wrap; gap: 6px;">
${msg.hashtags.map(tag => `
<span class="body-s" style="padding: 4px 10px; background: var(--color-secondary-light); border-radius: 12px; color: var(--color-secondary-main);">
${tag}
</span>
`).join('')}
</div>
</div>
<div style="display: flex; gap: 8px;">
<button
class="btn btn-secondary btn-sm"
style="flex: 1;"
onclick="selectMessage('${msg.id}')"
>
선택
</button>
<button
class="btn btn-text btn-sm"
style="flex: 1;"
onclick="editMessage('${msg.id}')"
>
편집
</button>
<button
class="btn btn-text btn-sm"
onclick="previewMessage('${msg.id}')"
>
<span class="material-icons" style="font-size: 18px;">visibility</span>
</button>
</div>
</div>
</div>
`).join('');
}
// 메시지 선택
window.selectMessage = function(messageId) {
const message = generatedMessages.find(m => m.id === messageId);
if (!message) return;
selectedMessage = message;
renderMessages();
nextBtn.disabled = false;
Toast.success(`버전 ${message.version}이(가) 선택되었습니다.`);
// 카드 애니메이션
const card = document.querySelector(`[data-message-id="${messageId}"]`);
if (card) {
card.style.transform = 'scale(1.02)';
setTimeout(() => {
card.style.transform = '';
}, 200);
}
};
// 메시지 편집
window.editMessage = function(messageId) {
const message = generatedMessages.find(m => m.id === messageId);
if (!message) return;
Modal.show({
title: '홍보문구 편집',
body: `
<div class="form-group">
<label class="form-label">문구</label>
<textarea
id="editMessageText"
class="form-input"
rows="6"
style="resize: vertical;"
>${message.message}</textarea>
</div>
<div class="form-group">
<label class="form-label">해시태그 (쉼표로 구분)</label>
<input
type="text"
id="editHashtags"
class="form-input"
value="${message.hashtags.join(', ')}"
>
</div>
<div class="body-s text-muted">
💡 팁: 해시태그는 3~5개가 적당하며, 지역명과 업종을 포함하세요.
</div>
`,
confirmText: '저장',
onConfirm: function() {
const newText = document.getElementById('editMessageText').value.trim();
const hashtagsText = document.getElementById('editHashtags').value.trim();
if (!newText) {
Toast.error('문구를 입력해주세요.');
return;
}
message.message = newText;
message.hashtags = hashtagsText.split(',').map(tag => tag.trim()).filter(tag => tag);
renderMessages();
Toast.success('문구가 수정되었습니다.');
}
});
};
// 메시지 미리보기
window.previewMessage = function(messageId) {
const message = generatedMessages.find(m => m.id === messageId);
if (!message) return;
const previewHTML = getPlatformPreview(message);
BottomSheet.show(`
<div style="padding: 8px 0;">
<h3 class="h3" style="margin-bottom: 16px; text-align: center;">
${message.platform} 미리보기
</h3>
${previewHTML}
<div class="body-s text-muted" style="margin-top: 16px; text-align: center;">
* 실제 플랫폼과 다소 차이가 있을 수 있습니다
</div>
</div>
`);
};
// 플랫폼별 미리보기 생성
function getPlatformPreview(message) {
const storeName = store.name || '우리 가게';
if (message.platform === 'Instagram') {
return `
<div style="max-width: 360px; margin: 0 auto; border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); overflow: hidden;">
<div style="padding: 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-gray-200);">
<div style="width: 32px; height: 32px; background: var(--color-primary-main); border-radius: 50%;"></div>
<div class="body-m" style="font-weight: 600;">${storeName}</div>
</div>
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
<div style="padding: 12px;">
<div class="body-m" style="white-space: pre-line; line-height: 1.6; margin-bottom: 8px;">
${message.message}
</div>
<div class="body-s" style="color: var(--color-secondary-main);">
${message.hashtags.join(' ')}
</div>
</div>
</div>
`;
} else if (message.platform === 'Blog') {
return `
<div style="max-width: 400px; margin: 0 auto; border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); padding: 20px; background: white;">
<h4 class="h3" style="margin-bottom: 16px;">이벤트 안내</h4>
<div class="body-m" style="white-space: pre-line; line-height: 1.8;">
${message.message}
</div>
</div>
`;
} else { // Kakao
return `
<div style="max-width: 360px; margin: 0 auto; background: #FEE500; border-radius: var(--radius-md); padding: 16px;">
<div class="body-m" style="font-weight: 700; margin-bottom: 12px;">${storeName}</div>
<div class="body-m" style="white-space: pre-line; line-height: 1.6; margin-bottom: 12px;">
${message.message}
</div>
<div class="body-s" style="color: var(--color-gray-700);">
${message.hashtags.join(' ')}
</div>
</div>
`;
}
}
// 다시 생성하기
window.regenerateMessages = function() {
Modal.confirm(
'문구 다시 생성',
'새로운 톤앤매너로 홍보 문구를 다시 생성하시겠습니까?',
function() {
resultsSection.style.display = 'none';
resultsSection.style.opacity = '0';
loadingSection.style.display = 'block';
currentStep = 0;
progressFill.style.width = '0%';
progressText.textContent = '문구 생성 준비 중...';
selectedMessage = null;
nextBtn.disabled = true;
setTimeout(updateProgress, 500);
}
);
};
// 다음 버튼
nextBtn.addEventListener('click', function() {
if (!selectedMessage) {
Toast.error('홍보 문구를 선택해주세요.');
return;
}
// 홍보 문구 저장
event.promotionMessage = selectedMessage;
window.AppState.save();
Loading.show('최종 기획안 준비 중...');
setTimeout(() => {
window.location.href = '08-이벤트기획안승인.html';
}, 800);
});
// 페이지 로드 시 생성 시작
setTimeout(updateProgress, 1000);
console.log('AI홍보문구생성 페이지 로드 완료');
})();
</script>
<style>
.message-card {
transition: all 0.3s ease;
}
.message-card .card {
border: 2px solid var(--color-gray-200);
}
.message-card.selected .card {
border: 3px solid var(--color-primary-main);
background: var(--color-primary-light);
box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.1);
}
.message-card .card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.message-preview {
transition: all 0.2s ease;
}
.message-card:hover .message-preview {
background: var(--color-gray-100);
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
#progressText {
animation: pulse 2s ease-in-out infinite;
}
</style>
</body>
</html>

614
design/uiux/prototype/08-이벤트기획안승인.html Normal file
View File

@ -0,0 +1,614 @@
<!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>
<!-- Skip Navigation -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- Header -->
<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>
<!-- Progress Bar -->
<div class="progress-container" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 100%;"></div>
<div class="progress-label">6/6 단계</div>
</div>
<!-- Main Content -->
<main id="main-content" class="container" role="main">
<!-- Time Elapsed -->
<div class="alert alert-success" role="status" style="margin-bottom: var(--spacing-l);">
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
<span class="material-icons" style="font-size: 20px;">schedule</span>
<span class="body-m" style="font-weight: 600;">
소요 시간: <span id="timeElapsed">0초</span>
</span>
</div>
<p class="body-s" style="margin: var(--spacing-xs) 0 0 28px; color: var(--color-success-dark);">
목표 시간(10초) 대비 <span id="timeComparison" style="font-weight: 600;"></span>
</p>
</div>
<!-- Plan Summary Section -->
<section class="section" aria-labelledby="summary-title">
<h2 id="summary-title" class="h3">기획안 요약</h2>
<!-- Store Info -->
<div class="card">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-s); margin-bottom: var(--spacing-m);">
<span class="material-icons" style="color: var(--color-primary-main);">store</span>
<h3 class="h4" id="storeName">매장명</h3>
</div>
<div class="info-grid">
<div class="info-item">
<span class="info-label">업종</span>
<span class="info-value" id="businessType">음식점</span>
</div>
<div class="info-item">
<span class="info-label">위치</span>
<span class="info-value" id="location">서울 강남구</span>
</div>
</div>
</div>
</div>
<!-- Event Purpose -->
<div class="card">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-s); margin-bottom: var(--spacing-m);">
<span class="material-icons" style="color: var(--color-secondary-main);">flag</span>
<h3 class="h4">이벤트 목적</h3>
</div>
<div class="tag tag-secondary" id="purposeTag">신규 고객 유치</div>
</div>
</div>
<!-- Prize Info -->
<div class="card">
<div class="card-body">
<div style="display: flex; align-items: center; justify-content: space-between; 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);">card_giftcard</span>
<h3 class="h4">경품 정보</h3>
</div>
<button type="button" class="btn-text" onclick="goToStep('05-AI경품추천.html')" aria-label="경품 정보 수정하기">
<span class="material-icons">edit</span>
</button>
</div>
<div id="prizeList"></div>
</div>
</div>
<!-- Participation Method -->
<div class="card">
<div class="card-body">
<div style="display: flex; align-items: center; justify-content: space-between; 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);">how_to_reg</span>
<h3 class="h4">참여 방법</h3>
</div>
<button type="button" class="btn-text" onclick="goToStep('06-AI참여방법설계.html')" aria-label="참여 방법 수정하기">
<span class="material-icons">edit</span>
</button>
</div>
<div style="padding: var(--spacing-m); background: var(--color-gray-50); border-radius: var(--radius-md);">
<div class="body-m" style="font-weight: 600; margin-bottom: var(--spacing-xs);" id="methodName">간편 QR 참여</div>
<div class="body-s" style="color: var(--color-gray-600);" id="methodDesc">매장 방문 시 QR 코드 스캔으로 즉시 참여</div>
<div style="display: flex; gap: var(--spacing-m); margin-top: var(--spacing-m);">
<div>
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">예상 참여율</div>
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main);" id="methodParticipation">60%</div>
</div>
<div>
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">재방문율</div>
<div class="body-m" style="font-weight: 600; color: var(--color-success);" id="methodRevisit">20%</div>
</div>
</div>
</div>
</div>
</div>
<!-- Promotion Message -->
<div class="card">
<div class="card-body">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-m);">
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
<span class="material-icons" style="color: var(--color-info);">campaign</span>
<h3 class="h4">홍보 문구</h3>
</div>
<button type="button" class="btn-text" onclick="goToStep('07-AI홍보문구생성.html')" aria-label="홍보 문구 수정하기">
<span class="material-icons">edit</span>
</button>
</div>
<div style="padding: var(--spacing-m); background: var(--color-gray-50); border-radius: var(--radius-md);">
<div class="body-s" style="white-space: pre-line;" id="promotionMessage">홍보 문구가 여기에 표시됩니다.</div>
<div style="margin-top: var(--spacing-s); display: flex; flex-wrap: wrap; gap: var(--spacing-xs);" id="hashtags"></div>
</div>
</div>
</div>
</section>
<!-- Cost Summary -->
<section class="section" aria-labelledby="cost-title">
<h2 id="cost-title" class="h3">예상 비용</h2>
<div class="card">
<div class="card-body">
<div class="info-grid">
<div class="info-item">
<span class="info-label">경품 총 비용</span>
<span class="info-value" style="color: var(--color-primary-main); font-weight: 600;" id="prizeCost">0원</span>
</div>
<div class="info-item">
<span class="info-label">플랫폼 이용료</span>
<span class="info-value" style="color: var(--color-gray-600);">무료</span>
</div>
</div>
<div style="border-top: 1px solid var(--color-gray-300); margin-top: var(--spacing-m); padding-top: var(--spacing-m);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="body-l" style="font-weight: 600;">총 예상 비용</span>
<span class="h3" style="color: var(--color-primary-main);" id="totalCost">0원</span>
</div>
</div>
</div>
</div>
</section>
<!-- Expected Effects -->
<section class="section" aria-labelledby="effects-title">
<h2 id="effects-title" class="h3">예상 효과</h2>
<div class="card">
<div class="card-body">
<div class="metric-grid">
<div class="metric-item">
<div class="metric-icon" style="background: var(--color-primary-lightest);">
<span class="material-icons" style="color: var(--color-primary-main);">people</span>
</div>
<div>
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">예상 참여자</div>
<div class="h4" id="expectedParticipants">0명</div>
</div>
</div>
<div class="metric-item">
<div class="metric-icon" style="background: var(--color-success-lightest);">
<span class="material-icons" style="color: var(--color-success);">trending_up</span>
</div>
<div>
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">예상 ROI</div>
<div class="h4" style="color: var(--color-success);" id="expectedROI">0%</div>
</div>
</div>
<div class="metric-item">
<div class="metric-icon" style="background: var(--color-warning-lightest);">
<span class="material-icons" style="color: var(--color-warning);">monetization_on</span>
</div>
<div>
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">예상 매출 증대</div>
<div class="h4" style="color: var(--color-warning);" id="expectedRevenue">0원</div>
</div>
</div>
<div class="metric-item">
<div class="metric-icon" style="background: var(--color-info-lightest);">
<span class="material-icons" style="color: var(--color-info);">repeat</span>
</div>
<div>
<div class="caption" style="color: var(--color-gray-600); margin-bottom: 4px;">재방문 고객</div>
<div class="h4" style="color: var(--color-info);" id="expectedRevisits">0명</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- AI Insights -->
<section class="section" aria-labelledby="insights-title">
<h2 id="insights-title" class="h3">AI 분석 및 조언</h2>
<div class="alert alert-info" role="status">
<div style="display: flex; gap: var(--spacing-s);">
<span class="material-icons" style="font-size: 20px;">lightbulb</span>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: var(--spacing-xs);">최적화 제안</div>
<ul class="body-s" style="margin: 0; padding-left: var(--spacing-l); color: var(--color-info-dark);" id="aiInsights">
<li>현재 기획안은 목적에 부합하는 최적의 조합입니다.</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<!-- Fixed Bottom Button -->
<div class="fixed-bottom-button">
<button type="button"
class="btn btn-outline btn-lg"
onclick="window.history.back()"
style="flex: 1;">
이전
</button>
<button type="button"
class="btn btn-primary btn-lg"
onclick="approvePlan()"
style="flex: 2;">
승인 및 콘텐츠 제작
</button>
</div>
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
// Load saved state
const eventData = AppState.currentEvent || {};
const storeData = AppState.store || {};
const userData = AppState.user || {};
// Calculate time elapsed (simulated)
const startTime = eventData.startTime || Date.now();
const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
// Initialize page
document.addEventListener('DOMContentLoaded', function() {
loadPlanSummary();
calculateEffects();
generateAIInsights();
});
/**
* Load plan summary from AppState
*/
function loadPlanSummary() {
// Store info
document.getElementById('storeName').textContent = storeData.name || '매장명';
document.getElementById('businessType').textContent = getBusinessTypeLabel(storeData.businessType) || '음식점';
document.getElementById('location').textContent = storeData.location || '서울';
// Event purpose
const purposeMap = {
new_customer: '신규 고객 유치',
revisit: '재방문 유도',
sales: '매출 증대',
brand: '브랜드 인지도 향상'
};
document.getElementById('purposeTag').textContent = purposeMap[eventData.purpose] || '신규 고객 유치';
// Prize list
loadPrizeList();
// Participation method
loadParticipationMethod();
// Promotion message
loadPromotionMessage();
// Time elapsed
updateTimeElapsed();
}
/**
* Load prize list
*/
function loadPrizeList() {
const prizes = eventData.prizes || [];
const prizeListEl = document.getElementById('prizeList');
if (prizes.length === 0) {
prizeListEl.innerHTML = '<p class="body-s" style="color: var(--color-gray-600);">등록된 경품이 없습니다.</p>';
return;
}
let totalCost = 0;
let html = '<div style="display: flex; flex-direction: column; gap: var(--spacing-s);">';
prizes.forEach(function(prize, index) {
const prizeCost = prize.price * prize.quantity;
totalCost += prizeCost;
html += `
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-s); background: var(--color-gray-50); border-radius: var(--radius-sm);">
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">${prize.name}</div>
<div class="caption" style="color: var(--color-gray-600);">
${prize.quantity}개 × ${formatCurrency(prize.price)}
</div>
</div>
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main);">
${formatCurrency(prizeCost)}
</div>
</div>
`;
});
html += '</div>';
prizeListEl.innerHTML = html;
// Update total cost
document.getElementById('prizeCost').textContent = formatCurrency(totalCost);
document.getElementById('totalCost').textContent = formatCurrency(totalCost);
}
/**
* Load participation method
*/
function loadParticipationMethod() {
const method = eventData.participationMethod || {};
const methodMap = {
simple: { name: '간편 QR 참여', desc: '매장 방문 시 QR 코드 스캔으로 즉시 참여' },
revisit: { name: '재방문+리뷰 참여', desc: '매장 재방문 후 리뷰 작성으로 참여' },
viral: { name: '바이럴 SNS 참여', desc: 'SNS 공유 및 친구 태그로 참여' }
};
const selectedMethod = methodMap[method.type] || methodMap.simple;
document.getElementById('methodName').textContent = selectedMethod.name;
document.getElementById('methodDesc').textContent = selectedMethod.desc;
document.getElementById('methodParticipation').textContent = (method.participationRate || 60) + '%';
document.getElementById('methodRevisit').textContent = (method.revisitRate || 20) + '%';
}
/**
* Load promotion message
*/
function loadPromotionMessage() {
const message = eventData.promotionMessage || {};
const messageEl = document.getElementById('promotionMessage');
const hashtagsEl = document.getElementById('hashtags');
if (message.text) {
messageEl.textContent = message.text;
} else {
messageEl.textContent = '홍보 문구가 아직 생성되지 않았습니다.';
}
if (message.hashtags && message.hashtags.length > 0) {
hashtagsEl.innerHTML = message.hashtags.map(function(tag) {
return `<span class="tag tag-sm" style="background: var(--color-secondary-lightest); color: var(--color-secondary-main);">${tag}</span>`;
}).join('');
} else {
hashtagsEl.innerHTML = '';
}
}
/**
* Update time elapsed
*/
function updateTimeElapsed() {
const elapsed = elapsedSeconds;
const target = 10;
document.getElementById('timeElapsed').textContent = elapsed + '초';
if (elapsed <= target) {
document.getElementById('timeComparison').textContent = '목표 달성! 🎉';
document.getElementById('timeComparison').style.color = 'var(--color-success)';
} else {
const diff = elapsed - target;
document.getElementById('timeComparison').textContent = `${diff}초 초과`;
document.getElementById('timeComparison').style.color = 'var(--color-warning)';
}
}
/**
* Calculate expected effects
*/
function calculateEffects() {
const prizes = eventData.prizes || [];
const method = eventData.participationMethod || {};
const budget = eventData.budget || 0;
// Calculate total prize quantity
let totalPrizes = 0;
prizes.forEach(function(prize) {
totalPrizes += prize.quantity;
});
// Expected participants based on participation rate
const participationRate = method.participationRate || 60;
const expectedParticipants = Math.round(totalPrizes * (100 / participationRate) * 1.2);
// Expected revenue (average customer value × participants × conversion rate)
const avgCustomerValue = getAvgCustomerValue(storeData.businessType);
const conversionRate = getConversionRate(eventData.purpose);
const expectedRevenue = Math.round(expectedParticipants * avgCustomerValue * conversionRate);
// Expected ROI
const totalCost = prizes.reduce(function(sum, prize) {
return sum + (prize.price * prize.quantity);
}, 0);
const roi = totalCost > 0 ? Math.round((expectedRevenue - totalCost) / totalCost * 100) : 0;
// Expected revisits
const revisitRate = method.revisitRate || 20;
const expectedRevisits = Math.round(expectedParticipants * revisitRate / 100);
// Update display
document.getElementById('expectedParticipants').textContent = formatNumber(expectedParticipants) + '명';
document.getElementById('expectedROI').textContent = roi + '%';
document.getElementById('expectedRevenue').textContent = formatCurrency(expectedRevenue);
document.getElementById('expectedRevisits').textContent = formatNumber(expectedRevisits) + '명';
}
/**
* Generate AI insights
*/
function generateAIInsights() {
const method = eventData.participationMethod || {};
const purpose = eventData.purpose || 'new_customer';
const budget = eventData.budget || 0;
const prizes = eventData.prizes || [];
const insights = [];
// Budget optimization
if (budget < 100000) {
insights.push('예산 규모가 작습니다. SNS 바이럴 참여 방식으로 변경하면 비용 대비 효과를 높일 수 있습니다.');
} else if (budget > 1000000) {
insights.push('예산이 충분합니다. 경품 종류를 다양화하면 더 많은 고객층을 유치할 수 있습니다.');
}
// Method optimization
if (purpose === 'revisit' && method.type !== 'revisit') {
insights.push('재방문 유도가 목적이라면 "재방문+리뷰" 참여 방식이 더 효과적입니다.');
}
if (purpose === 'brand' && method.type !== 'viral') {
insights.push('브랜드 인지도 향상이 목적이라면 "바이럴 SNS" 참여 방식이 더 효과적입니다.');
}
// Prize optimization
if (prizes.length === 1) {
insights.push('경품을 1등급, 2등급으로 나누면 참여율을 높일 수 있습니다.');
}
// Seasonal insights
const month = new Date().getMonth() + 1;
if (month === 12 || month === 1) {
insights.push('연말연시 시즌입니다. "따뜻한 겨울" 테마를 추가하면 공감도가 높아집니다.');
} else if (month >= 6 && month <= 8) {
insights.push('여름 시즌입니다. "시원한 여름" 테마를 추가하면 관심도가 높아집니다.');
}
// Default message
if (insights.length === 0) {
insights.push('현재 기획안은 목적과 예산에 부합하는 최적의 조합입니다.');
insights.push('콘텐츠 제작 단계로 진행하시면 이벤트 홍보물을 생성할 수 있습니다.');
}
// Update display
const insightsEl = document.getElementById('aiInsights');
insightsEl.innerHTML = insights.map(function(insight) {
return '<li>' + insight + '</li>';
}).join('');
}
/**
* Get average customer value by business type
*/
function getAvgCustomerValue(businessType) {
const values = {
restaurant: 25000,
cafe: 8000,
retail: 50000,
beauty: 80000,
fitness: 150000,
education: 200000
};
return values[businessType] || 30000;
}
/**
* Get conversion rate by purpose
*/
function getConversionRate(purpose) {
const rates = {
new_customer: 0.15,
revisit: 0.3,
sales: 0.25,
brand: 0.1
};
return rates[purpose] || 0.2;
}
/**
* Get business type label
*/
function getBusinessTypeLabel(type) {
const labels = {
restaurant: '음식점',
cafe: '카페',
retail: '소매점',
beauty: '미용/뷰티',
fitness: '피트니스',
education: '교육'
};
return labels[type] || '기타';
}
/**
* Navigate to specific step for editing
*/
window.goToStep = function(filename) {
if (confirm('해당 단계로 이동하시겠습니까? 현재 내용은 저장됩니다.')) {
AppState.save();
window.location.href = filename;
}
};
/**
* Approve plan and proceed to content creation
*/
window.approvePlan = function() {
// Validate plan completeness
if (!eventData.purpose) {
Toast.error('이벤트 목적이 설정되지 않았습니다.');
return;
}
if (!eventData.prizes || eventData.prizes.length === 0) {
Toast.error('경품이 설정되지 않았습니다.');
return;
}
if (!eventData.participationMethod) {
Toast.error('참여 방법이 설정되지 않았습니다.');
return;
}
if (!eventData.promotionMessage) {
Toast.error('홍보 문구가 생성되지 않았습니다.');
return;
}
// Show confirmation
if (confirm('이벤트 기획안을 승인하고 콘텐츠 제작을 시작하시겠습니까?')) {
// Update event status
eventData.status = 'approved';
eventData.approvedAt = new Date().toISOString();
AppState.currentEvent = eventData;
AppState.save();
// Show success message
Toast.success('기획안이 승인되었습니다!');
// Navigate to content creation (AI image generation)
setTimeout(function() {
window.location.href = '10-AI영상제작.html';
}, 1000);
}
};
/**
* Format number with commas
*/
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
/**
* Format currency
*/
function formatCurrency(amount) {
return formatNumber(amount) + '원';
}
})();
</script>
</body>
</html>

648
design/uiux/prototype/10-AI영상제작.html Normal file
View File

@ -0,0 +1,648 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 영상 제작 - 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>
<!-- Skip Navigation -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- Header -->
<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">AI 영상 제작</h1>
<div style="width: 40px;"></div>
</div>
</header>
<!-- Progress Bar -->
<div class="progress-container" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 40%;"></div>
<div class="progress-label">콘텐츠 2/5: 영상</div>
</div>
<!-- Main Content -->
<main id="main-content" class="container" role="main">
<!-- Settings Section -->
<section class="section" aria-labelledby="settings-title" id="settingsSection">
<h2 id="settings-title" class="h3">영상 설정</h2>
<!-- Background Music -->
<div class="card">
<div class="card-body">
<label class="form-label" for="musicSelect">배경 음악</label>
<div style="display: flex; flex-direction: column; gap: var(--spacing-s);">
<button type="button"
class="music-option"
data-music="upbeat1"
onclick="selectMusic('upbeat1')"
aria-pressed="true">
<span class="material-icons" style="color: var(--color-primary-main);">music_note</span>
<span style="flex: 1; text-align: left;">경쾌한 음악 1</span>
<span class="material-icons play-icon" onclick="playMusicPreview('upbeat1', event)">play_circle</span>
</button>
<button type="button"
class="music-option"
data-music="upbeat2"
onclick="selectMusic('upbeat2')"
aria-pressed="false">
<span class="material-icons" style="color: var(--color-primary-main);">music_note</span>
<span style="flex: 1; text-align: left;">신나는 음악 2</span>
<span class="material-icons play-icon" onclick="playMusicPreview('upbeat2', event)">play_circle</span>
</button>
<button type="button"
class="music-option"
data-music="calm1"
onclick="selectMusic('calm1')"
aria-pressed="false">
<span class="material-icons" style="color: var(--color-primary-main);">music_note</span>
<span style="flex: 1; text-align: left;">차분한 음악 3</span>
<span class="material-icons play-icon" onclick="playMusicPreview('calm1', event)">play_circle</span>
</button>
</div>
</div>
</div>
<!-- Text Overlay -->
<div class="card">
<div class="card-body">
<label class="form-label">텍스트 오버레이</label>
<div style="padding: var(--spacing-m); background: var(--color-gray-50); border-radius: var(--radius-md); margin-bottom: var(--spacing-s);">
<p class="body-m" id="overlayText" style="white-space: pre-line; min-height: 60px;">
🎉 연말 대박 이벤트!
</p>
</div>
<button type="button"
class="btn btn-outline btn-sm"
onclick="editOverlayText()">
<span class="material-icons" style="font-size: 18px;">edit</span>
<span>편집하기</span>
</button>
</div>
</div>
<!-- Resolution Selection -->
<div class="card">
<div class="card-body">
<label class="form-label">해상도 선택</label>
<p class="body-s" style="color: var(--color-gray-600); margin-bottom: var(--spacing-m);">
선택한 채널별로 영상이 생성됩니다.
</p>
<div style="display: flex; flex-direction: column; gap: var(--spacing-s);">
<label class="checkbox-card">
<input type="checkbox"
id="snsResolution"
checked
onchange="toggleResolution(this)">
<div class="checkbox-card-content">
<div>
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">SNS용 (정사각형)</div>
<div class="caption" style="color: var(--color-gray-600);">1080x1080 • Instagram, Facebook</div>
</div>
</div>
</label>
<label class="checkbox-card">
<input type="checkbox"
id="tvResolution"
checked
onchange="toggleResolution(this)">
<div class="checkbox-card-content">
<div>
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">우리동네TV용 (16:9)</div>
<div class="caption" style="color: var(--color-gray-600);">1920x1080 • Full HD</div>
</div>
</div>
</label>
</div>
</div>
</div>
<!-- Start Button -->
<button type="button"
class="btn btn-primary btn-lg"
onclick="startVideoCreation()"
style="width: 100%;">
<span class="material-icons">smart_display</span>
<span>AI 영상 제작 시작</span>
</button>
</section>
<!-- Progress Section (Hidden initially) -->
<section class="section" id="progressSection" style="display: none;" aria-live="polite">
<div class="card">
<div class="card-body" style="text-align: center; padding: var(--spacing-xl);">
<div class="loading-animation" style="margin-bottom: var(--spacing-l);">
<span class="material-icons" style="font-size: 64px; color: var(--color-primary-main); animation: pulse 1.5s ease-in-out infinite;">
movie_creation
</span>
</div>
<h3 class="h4" style="margin-bottom: var(--spacing-s);">🎬 AI가 영상 제작중...</h3>
<p class="body-s" style="color: var(--color-gray-600); margin-bottom: var(--spacing-l);" id="progressMessage">
이미지를 분석하고 있습니다...
</p>
<div class="progress-bar-container" style="margin-bottom: var(--spacing-m);">
<div class="progress-bar-fill" id="videoProgressBar" style="width: 0%;"></div>
</div>
<div class="body-m" style="font-weight: 600; color: var(--color-primary-main); margin-bottom: var(--spacing-xs);">
<span id="progressPercent">0</span>%
</div>
<p class="caption" style="color: var(--color-gray-600);">
예상 소요: <span id="remainingTime">3분</span>
</p>
</div>
</div>
</section>
<!-- Result Section (Hidden initially) -->
<section class="section" id="resultSection" style="display: none;" aria-labelledby="result-title">
<h2 id="result-title" class="h3">생성 완료</h2>
<!-- Video Preview -->
<div class="card">
<div class="card-body">
<div style="aspect-ratio: 16/9; background: var(--color-gray-900); border-radius: var(--radius-md); margin-bottom: var(--spacing-m); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;">
<button type="button"
class="video-play-button"
onclick="playVideoPreview()"
aria-label="영상 미리보기 재생">
<span class="material-icons" style="font-size: 48px; color: white;">play_circle</span>
</button>
<div class="video-thumbnail" id="videoThumbnail" style="position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="font-size: 64px; color: white; opacity: 0.5;">movie</span>
</div>
</div>
<div class="body-s" style="color: var(--color-gray-600); text-align: center; margin-bottom: var(--spacing-m);">
15초 홍보 영상
</div>
<div style="padding: var(--spacing-m); background: var(--color-gray-50); border-radius: var(--radius-md);">
<div class="body-s" style="color: var(--color-gray-700);">
<div style="display: flex; align-items: center; gap: var(--spacing-xs); margin-bottom: var(--spacing-xs);">
<span class="material-icons" style="font-size: 16px; color: var(--color-success);">check_circle</span>
<span id="videoResolutions">SNS용, 우리동네TV용 영상 생성완료</span>
</div>
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<span class="material-icons" style="font-size: 16px; color: var(--color-success);">check_circle</span>
<span>배경 음악 및 텍스트 오버레이 적용</span>
</div>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div style="display: flex; gap: var(--spacing-s);">
<button type="button"
class="btn btn-outline btn-lg"
onclick="downloadVideo()"
style="flex: 1;">
<span class="material-icons">download</span>
<span>다운로드</span>
</button>
<button type="button"
class="btn btn-outline btn-lg"
onclick="recreateVideo()"
style="flex: 1;">
<span class="material-icons">refresh</span>
<span>다시제작</span>
</button>
</div>
</section>
</main>
<!-- Fixed Bottom Button (for next step) -->
<div class="fixed-bottom-button" id="nextButton" style="display: none;">
<button type="button"
class="btn btn-primary btn-lg"
onclick="goToNext()">
다음 (SNS콘텐츠)
</button>
</div>
<!-- Text Edit Modal -->
<div id="textEditModal" class="modal" role="dialog" aria-labelledby="modal-title" aria-modal="true" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h3 id="modal-title" class="h4">텍스트 편집</h3>
<button type="button"
class="btn-icon"
onclick="closeTextEditModal()"
aria-label="닫기">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body">
<label class="form-label" for="textInput">영상에 표시될 텍스트</label>
<textarea id="textInput"
class="form-input"
rows="4"
maxlength="100"
placeholder="영상에 표시될 텍스트를 입력하세요 (최대 100자)"
style="resize: vertical; min-height: 100px;"></textarea>
<div class="caption" style="color: var(--color-gray-600); margin-top: var(--spacing-xs); text-align: right;">
<span id="textCount">0</span>/100자
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-outline"
onclick="closeTextEditModal()">
취소
</button>
<button type="button"
class="btn btn-primary"
onclick="saveOverlayText()">
저장
</button>
</div>
</div>
</div>
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
let selectedMusic = 'upbeat1';
let overlayTextContent = '🎉 연말 대박 이벤트!';
let snsResolutionEnabled = true;
let tvResolutionEnabled = true;
// Load saved state
const eventData = AppState.currentEvent || {};
const storeData = AppState.store || {};
// Initialize overlay text from promotion message
if (eventData.promotionMessage && eventData.promotionMessage.text) {
overlayTextContent = eventData.promotionMessage.text.split('\n').slice(0, 2).join('\n');
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('overlayText').textContent = overlayTextContent;
});
/**
* Select background music
*/
window.selectMusic = function(musicId) {
selectedMusic = musicId;
// Update UI
document.querySelectorAll('.music-option').forEach(function(btn) {
if (btn.dataset.music === musicId) {
btn.setAttribute('aria-pressed', 'true');
btn.style.background = 'var(--color-primary-lightest)';
btn.style.borderColor = 'var(--color-primary-main)';
} else {
btn.setAttribute('aria-pressed', 'false');
btn.style.background = 'white';
btn.style.borderColor = 'var(--color-gray-300)';
}
});
};
/**
* Play music preview
*/
window.playMusicPreview = function(musicId, event) {
event.stopPropagation();
const icon = event.target;
// Simulate playing
icon.textContent = 'pause_circle';
Toast.show('🎵 ' + getMusicName(musicId) + ' 미리듣기');
setTimeout(function() {
icon.textContent = 'play_circle';
}, 3000);
};
/**
* Get music name
*/
function getMusicName(musicId) {
const names = {
upbeat1: '경쾌한 음악 1',
upbeat2: '신나는 음악 2',
calm1: '차분한 음악 3'
};
return names[musicId] || '음악';
}
/**
* Edit overlay text
*/
window.editOverlayText = function() {
const modal = document.getElementById('textEditModal');
const input = document.getElementById('textInput');
const counter = document.getElementById('textCount');
input.value = overlayTextContent;
counter.textContent = overlayTextContent.length;
// Add input listener for character count
input.addEventListener('input', function() {
counter.textContent = this.value.length;
});
Modal.open(modal);
};
/**
* Close text edit modal
*/
window.closeTextEditModal = function() {
const modal = document.getElementById('textEditModal');
Modal.close(modal);
};
/**
* Save overlay text
*/
window.saveOverlayText = function() {
const input = document.getElementById('textInput');
overlayTextContent = input.value.trim();
if (!overlayTextContent) {
Toast.error('텍스트를 입력해주세요.');
return;
}
document.getElementById('overlayText').textContent = overlayTextContent;
closeTextEditModal();
Toast.success('텍스트가 저장되었습니다.');
};
/**
* Toggle resolution
*/
window.toggleResolution = function(checkbox) {
if (checkbox.id === 'snsResolution') {
snsResolutionEnabled = checkbox.checked;
} else if (checkbox.id === 'tvResolution') {
tvResolutionEnabled = checkbox.checked;
}
// At least one must be selected
if (!snsResolutionEnabled && !tvResolutionEnabled) {
checkbox.checked = true;
if (checkbox.id === 'snsResolution') {
snsResolutionEnabled = true;
} else {
tvResolutionEnabled = true;
}
Toast.show('최소 1개 이상 선택해야 합니다.');
}
};
/**
* Start video creation
*/
window.startVideoCreation = function() {
// Hide settings
document.getElementById('settingsSection').style.display = 'none';
// Show progress
document.getElementById('progressSection').style.display = 'block';
// Simulate video creation process
simulateVideoCreation();
};
/**
* Simulate video creation with progress
*/
function simulateVideoCreation() {
const progressBar = document.getElementById('videoProgressBar');
const progressPercent = document.getElementById('progressPercent');
const progressMessage = document.getElementById('progressMessage');
const remainingTime = document.getElementById('remainingTime');
const steps = [
{ percent: 0, message: '이미지를 분석하고 있습니다...', time: '3분' },
{ percent: 15, message: '배경 음악을 처리하고 있습니다...', time: '2분 30초' },
{ percent: 30, message: '텍스트 오버레이를 추가하고 있습니다...', time: '2분' },
{ percent: 45, message: 'SNS용 영상을 렌더링하고 있습니다...', time: '1분 30초' },
{ percent: 60, message: '우리동네TV용 영상을 렌더링하고 있습니다...', time: '1분' },
{ percent: 75, message: '영상 품질을 최적화하고 있습니다...', time: '40초' },
{ percent: 90, message: '최종 검토 중...', time: '20초' },
{ percent: 100, message: '완료!', time: '0초' }
];
let currentStep = 0;
function updateProgress() {
if (currentStep >= steps.length) {
// Show result
setTimeout(function() {
showResult();
}, 500);
return;
}
const step = steps[currentStep];
progressBar.style.width = step.percent + '%';
progressPercent.textContent = step.percent;
progressMessage.textContent = step.message;
remainingTime.textContent = step.time;
currentStep++;
setTimeout(updateProgress, 1500);
}
updateProgress();
}
/**
* Show result section
*/
function showResult() {
document.getElementById('progressSection').style.display = 'none';
document.getElementById('resultSection').style.display = 'block';
document.getElementById('nextButton').style.display = 'block';
// Update resolution text
const resolutions = [];
if (snsResolutionEnabled) resolutions.push('SNS용');
if (tvResolutionEnabled) resolutions.push('우리동네TV용');
document.getElementById('videoResolutions').textContent = resolutions.join(', ') + ' 영상 생성완료';
// Save to AppState
eventData.video = {
music: selectedMusic,
overlayText: overlayTextContent,
snsResolution: snsResolutionEnabled,
tvResolution: tvResolutionEnabled,
createdAt: new Date().toISOString()
};
AppState.currentEvent = eventData;
AppState.save();
Toast.success('영상이 성공적으로 생성되었습니다!');
}
/**
* Play video preview
*/
window.playVideoPreview = function() {
Toast.show('🎬 영상 미리보기 재생 (시뮬레이션)');
// In real implementation, would play actual video
};
/**
* Download video
*/
window.downloadVideo = function() {
Loading.show('영상 다운로드 준비 중...');
setTimeout(function() {
Loading.hide();
Toast.success('영상이 다운로드되었습니다!');
// In real implementation, would trigger actual download
}, 1500);
};
/**
* Recreate video
*/
window.recreateVideo = function() {
if (confirm('영상을 다시 제작하시겠습니까? 현재 설정으로 새로 생성됩니다.')) {
// Reset to settings
document.getElementById('resultSection').style.display = 'none';
document.getElementById('nextButton').style.display = 'none';
document.getElementById('settingsSection').style.display = 'block';
Toast.show('설정을 확인하고 다시 제작해주세요.');
}
};
/**
* Go to next step
*/
window.goToNext = function() {
window.location.href = '11-SNS콘텐츠생성.html';
};
})();
</script>
<style>
.music-option {
width: 100%;
padding: var(--spacing-m);
background: white;
border: 2px solid var(--color-gray-300);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: var(--spacing-s);
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
font-weight: 500;
}
.music-option:hover {
border-color: var(--color-primary-main);
}
.music-option[aria-pressed="true"] {
background: var(--color-primary-lightest);
border-color: var(--color-primary-main);
}
.play-icon {
cursor: pointer;
color: var(--color-primary-main);
transition: transform 0.2s ease;
}
.play-icon:hover {
transform: scale(1.1);
}
.checkbox-card {
display: block;
padding: var(--spacing-m);
background: white;
border: 2px solid var(--color-gray-300);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
}
.checkbox-card:hover {
border-color: var(--color-primary-main);
}
.checkbox-card input[type="checkbox"] {
margin-right: var(--spacing-s);
}
.checkbox-card input[type="checkbox"]:checked ~ .checkbox-card-content {
color: var(--color-primary-main);
}
.checkbox-card-content {
display: flex;
align-items: center;
gap: var(--spacing-s);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--color-gray-200);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary-main), var(--color-secondary-main));
border-radius: var(--radius-full);
transition: width 0.5s ease;
}
.video-play-button {
position: absolute;
z-index: 2;
background: rgba(0, 0, 0, 0.3);
border: none;
border-radius: 50%;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.video-play-button:hover {
background: rgba(0, 0, 0, 0.5);
transform: scale(1.1);
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.05);
}
}
</style>
</body>
</html>

483
design/uiux/prototype/11-SNS콘텐츠생성.html Normal file
View File

@ -0,0 +1,483 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SNS 콘텐츠 생성 - 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>
<!-- Skip Navigation -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<!-- Header -->
<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">SNS 콘텐츠 생성</h1>
<div style="width: 40px;"></div>
</div>
</header>
<!-- Progress Bar -->
<div class="progress-container" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 60%;"></div>
<div class="progress-label">콘텐츠 3/5: SNS</div>
</div>
<!-- Main Content -->
<main id="main-content" class="container" role="main">
<!-- Platform Selection Section -->
<section class="section" aria-labelledby="platform-title" id="selectionSection">
<h2 id="platform-title" class="h3">플랫폼 선택</h2>
<p class="body-s" style="color: var(--color-gray-600); margin-bottom: var(--spacing-l);">
각 플랫폼에 최적화된 콘텐츠가 생성됩니다.
</p>
<!-- Instagram (Required) -->
<div class="card">
<div class="card-body">
<label class="platform-card">
<input type="checkbox"
id="platformInstagram"
checked
disabled
onchange="togglePlatform(this)">
<div class="platform-card-content">
<div style="display: flex; align-items: center; gap: var(--spacing-s); flex: 1;">
<div class="platform-icon" style="background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);">
<span class="material-icons" style="color: white;">photo_camera</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">
Instagram
<span class="tag tag-sm" style="background: var(--color-primary-main); color: white; margin-left: var(--spacing-xs);">필수</span>
</div>
<div class="caption" style="color: var(--color-gray-600);">1080x1080 (정사각형)</div>
</div>
</div>
<button type="button"
class="btn-text btn-sm"
onclick="previewPlatform('instagram', event)"
aria-label="Instagram 미리보기">
미리보기
</button>
</div>
</label>
</div>
</div>
<!-- Naver Blog (Optional) -->
<div class="card">
<div class="card-body">
<label class="platform-card">
<input type="checkbox"
id="platformBlog"
onchange="togglePlatform(this)">
<div class="platform-card-content">
<div style="display: flex; align-items: center; gap: var(--spacing-s); flex: 1;">
<div class="platform-icon" style="background: #03C75A;">
<span class="material-icons" style="color: white;">article</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">Naver Blog</div>
<div class="caption" style="color: var(--color-gray-600);">800x600 (가로형)</div>
</div>
</div>
<button type="button"
class="btn-text btn-sm"
onclick="previewPlatform('blog', event)"
aria-label="Naver Blog 미리보기">
미리보기
</button>
</div>
</label>
</div>
</div>
<!-- Kakao Channel (Optional) -->
<div class="card">
<div class="card-body">
<label class="platform-card">
<input type="checkbox"
id="platformKakao"
onchange="togglePlatform(this)">
<div class="platform-card-content">
<div style="display: flex; align-items: center; gap: var(--spacing-s); flex: 1;">
<div class="platform-icon" style="background: #FEE500;">
<span class="material-icons" style="color: #3C1E1E;">chat</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">Kakao Channel</div>
<div class="caption" style="color: var(--color-gray-600);">800x800 (정사각형)</div>
</div>
</div>
<button type="button"
class="btn-text btn-sm"
onclick="previewPlatform('kakao', event)"
aria-label="Kakao Channel 미리보기">
미리보기
</button>
</div>
</label>
</div>
</div>
<!-- Generate Button -->
<button type="button"
class="btn btn-primary btn-lg"
onclick="generateContent()"
style="width: 100%; margin-top: var(--spacing-m);">
<span class="material-icons">auto_awesome</span>
<span>콘텐츠 생성하기</span>
</button>
</section>
<!-- Result Section (Hidden initially) -->
<section class="section" id="resultSection" style="display: none;" aria-labelledby="result-title">
<h2 id="result-title" class="h3">생성된 콘텐츠</h2>
<!-- Content Preview -->
<div id="contentPreview"></div>
<!-- Post Text -->
<div class="card">
<div class="card-body">
<label class="form-label">게시 텍스트</label>
<div style="padding: var(--spacing-m); background: var(--color-gray-50); border-radius: var(--radius-md); margin-bottom: var(--spacing-s);">
<p class="body-s" id="postText" style="white-space: pre-line;"></p>
</div>
<div id="hashtagsContainer"></div>
</div>
</div>
<!-- Action Buttons -->
<div style="display: flex; gap: var(--spacing-s); margin-top: var(--spacing-l);">
<button type="button"
class="btn btn-outline btn-lg"
onclick="downloadAll()"
style="flex: 1;">
<span class="material-icons">download</span>
<span>일괄 다운로드</span>
</button>
<button type="button"
class="btn btn-outline btn-lg"
onclick="regenerate()"
style="flex: 1;">
<span class="material-icons">refresh</span>
<span>다시생성</span>
</button>
</div>
</section>
</main>
<!-- Fixed Bottom Button (for next step) -->
<div class="fixed-bottom-button" id="nextButton" style="display: none;">
<button type="button"
class="btn btn-primary btn-lg"
onclick="goToNext()">
다음 (QR포스터)
</button>
</div>
<!-- Preview Modal -->
<div id="previewModal" class="modal" role="dialog" aria-labelledby="preview-title" aria-modal="true" style="display: none;">
<div class="modal-content" style="max-width: 400px;">
<div class="modal-header">
<h3 id="preview-title" class="h4">플랫폼 미리보기</h3>
<button type="button"
class="btn-icon"
onclick="closePreview()"
aria-label="닫기">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body" id="previewContent" style="padding: 0;">
<!-- Platform-specific preview will be inserted here -->
</div>
</div>
</div>
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const platforms = {
instagram: true, // Required
blog: false,
kakao: false
};
// Load saved state
const eventData = AppState.currentEvent || {};
const storeData = AppState.store || {};
/**
* Toggle platform selection
*/
window.togglePlatform = function(checkbox) {
const platformId = checkbox.id.replace('platform', '').toLowerCase();
platforms[platformId] = checkbox.checked;
};
/**
* Preview platform
*/
window.previewPlatform = function(platform, event) {
event.stopPropagation();
event.preventDefault();
const modal = document.getElementById('previewModal');
const content = document.getElementById('previewContent');
const title = document.getElementById('preview-title');
const storeName = storeData.name || '우리가게';
const promotionText = eventData.promotionMessage?.text || '🎉 연말 대박 이벤트!';
let previewHTML = '';
if (platform === 'instagram') {
title.textContent = 'Instagram 미리보기';
previewHTML = `
<div style="background: white; border: 1px solid var(--color-gray-300);">
<div style="padding: 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--color-gray-300);">
<div style="width: 32px; height: 32px; background: var(--color-primary-main); border-radius: 50%;"></div>
<div class="body-m" style="font-weight: 600;">${storeName}</div>
</div>
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; padding: var(--spacing-l); text-align: center;">
<div>
<div class="h3" style="color: white; margin-bottom: var(--spacing-s);">🎁</div>
<div class="body-l" style="color: white; font-weight: 600;">${promotionText.split('\n')[0]}</div>
</div>
</div>
<div style="padding: 12px;">
<div class="body-s" style="margin-bottom: 8px;">${promotionText}</div>
<div class="caption" style="color: var(--color-secondary-main);">#이벤트 #경품 #당첨</div>
</div>
</div>
`;
} else if (platform === 'blog') {
title.textContent = 'Naver Blog 미리보기';
previewHTML = `
<div style="background: white; padding: var(--spacing-l);">
<div class="h4" style="margin-bottom: var(--spacing-m); padding-bottom: var(--spacing-m); border-bottom: 2px solid var(--color-primary-main);">
${storeName} 이벤트 소식
</div>
<div style="aspect-ratio: 4/3; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-m);">
<div style="text-align: center; color: white; padding: var(--spacing-l);">
<div class="h2" style="color: white;">🎉</div>
<div class="h4" style="color: white; margin-top: var(--spacing-s);">${promotionText.split('\n')[0]}</div>
</div>
</div>
<div class="body-m" style="line-height: 1.6; white-space: pre-line;">${promotionText}</div>
</div>
`;
} else if (platform === 'kakao') {
title.textContent = 'Kakao Channel 미리보기';
previewHTML = `
<div style="background: #F7F7F7;">
<div style="background: white; border-radius: 12px; overflow: hidden; margin: 16px;">
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #FFE17D 0%, #FFBB54 100%); display: flex; align-items: center; justify-content: center;">
<div style="text-align: center; padding: var(--spacing-l);">
<div class="h2">🎁</div>
<div class="h4" style="margin-top: var(--spacing-s);">${promotionText.split('\n')[0]}</div>
</div>
</div>
<div style="padding: 16px; background: white;">
<div class="body-m" style="font-weight: 600; margin-bottom: 8px;">${storeName}</div>
<div class="body-s" style="color: var(--color-gray-600);">${promotionText}</div>
</div>
</div>
</div>
`;
}
content.innerHTML = previewHTML;
Modal.open(modal);
};
/**
* Close preview modal
*/
window.closePreview = function() {
const modal = document.getElementById('previewModal');
Modal.close(modal);
};
/**
* Generate content
*/
window.generateContent = function() {
const selectedPlatforms = Object.keys(platforms).filter(p => platforms[p]);
if (selectedPlatforms.length === 0) {
Toast.error('최소 1개 플랫폼을 선택해주세요.');
return;
}
Loading.show('SNS 콘텐츠 생성 중...');
setTimeout(function() {
Loading.hide();
showResult(selectedPlatforms);
}, 2000);
};
/**
* Show result
*/
function showResult(selectedPlatforms) {
document.getElementById('selectionSection').style.display = 'none';
document.getElementById('resultSection').style.display = 'block';
document.getElementById('nextButton').style.display = 'block';
const storeName = storeData.name || '우리가게';
const promotionMessage = eventData.promotionMessage || {};
const promotionText = promotionMessage.text || '🎉 연말 대박 이벤트!';
const hashtags = promotionMessage.hashtags || ['#이벤트', '#경품', '#당첨'];
// Generate content previews
let previewHTML = '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-m); margin-bottom: var(--spacing-l);">';
selectedPlatforms.forEach(function(platform) {
const platformInfo = getPlatformInfo(platform);
previewHTML += `
<div class="card">
<div class="card-body" style="padding: var(--spacing-s);">
<div style="aspect-ratio: 1; background: ${platformInfo.gradient}; border-radius: var(--radius-sm); margin-bottom: var(--spacing-s); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="font-size: 32px; color: white;">${platformInfo.icon}</span>
</div>
<div class="caption" style="text-align: center; font-weight: 600;">${platformInfo.name}</div>
<div class="caption" style="text-align: center; color: var(--color-gray-600); font-size: 11px;">${platformInfo.size}</div>
</div>
</div>
`;
});
previewHTML += '</div>';
document.getElementById('contentPreview').innerHTML = previewHTML;
// Set post text
document.getElementById('postText').textContent = promotionText;
// Set hashtags
const hashtagHTML = '<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-top: var(--spacing-s);">' +
hashtags.map(tag => `<span class="tag tag-sm" style="background: var(--color-secondary-lightest); color: var(--color-secondary-main);">${tag}</span>`).join('') +
'</div>';
document.getElementById('hashtagsContainer').innerHTML = hashtagHTML;
// Save to AppState
eventData.snsContent = {
platforms: selectedPlatforms,
text: promotionText,
hashtags: hashtags,
createdAt: new Date().toISOString()
};
AppState.currentEvent = eventData;
AppState.save();
Toast.success('SNS 콘텐츠가 생성되었습니다!');
}
/**
* Get platform info
*/
function getPlatformInfo(platform) {
const info = {
instagram: {
name: 'Instagram',
size: '1080x1080',
gradient: 'linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)',
icon: 'photo_camera'
},
blog: {
name: 'Naver Blog',
size: '800x600',
gradient: 'linear-gradient(135deg, #03C75A 0%, #02A648 100%)',
icon: 'article'
},
kakao: {
name: 'Kakao Channel',
size: '800x800',
gradient: 'linear-gradient(135deg, #FFE17D 0%, #FFBB54 100%)',
icon: 'chat'
}
};
return info[platform] || info.instagram;
}
/**
* Download all content
*/
window.downloadAll = function() {
Loading.show('콘텐츠 다운로드 준비 중...');
setTimeout(function() {
Loading.hide();
Toast.success('📦 모든 콘텐츠가 다운로드되었습니다!');
// In real implementation, would create and download ZIP file
}, 1500);
};
/**
* Regenerate content
*/
window.regenerate = function() {
if (confirm('콘텐츠를 다시 생성하시겠습니까?')) {
document.getElementById('resultSection').style.display = 'none';
document.getElementById('nextButton').style.display = 'none';
document.getElementById('selectionSection').style.display = 'block';
Toast.show('플랫폼을 선택하고 다시 생성해주세요.');
}
};
/**
* Go to next step
*/
window.goToNext = function() {
window.location.href = '12-QR포스터생성.html';
};
})();
</script>
<style>
.platform-card {
display: block;
cursor: pointer;
}
.platform-card input[type="checkbox"] {
margin-right: var(--spacing-s);
}
.platform-card-content {
display: flex;
align-items: center;
gap: var(--spacing-m);
}
.platform-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.platform-card input[type="checkbox"]:disabled {
cursor: not-allowed;
}
</style>
</body>
</html>

240
design/uiux/prototype/12-QR포스터생성.html Normal file
View File

@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR 포스터 생성 - 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">QR 포스터 생성</h1>
<div style="width: 40px;"></div>
</div>
</header>
<div class="progress-container" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 80%;"></div>
<div class="progress-label">콘텐츠 4/5: QR 포스터</div>
</div>
<main id="main-content" class="container" role="main">
<section class="section" aria-labelledby="qr-title" id="settingsSection">
<h2 id="qr-title" class="h3">QR 코드 설정</h2>
<div class="card">
<div class="card-body">
<label class="form-label">연결 URL (자동생성)</label>
<div style="display: flex; gap: var(--spacing-s); align-items: center;">
<div class="form-input" id="eventUrl" style="flex: 1; font-family: monospace; background: var(--color-gray-50);">
ktevnt.co/abc123
</div>
<button type="button" class="btn btn-outline btn-sm" onclick="copyUrl()" aria-label="URL 복사">
<span class="material-icons" style="font-size: 18px;">content_copy</span>
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<label class="form-label">QR 코드 미리보기</label>
<div style="padding: var(--spacing-xl); background: var(--color-gray-50); border-radius: var(--radius-md); display: flex; justify-content: center;">
<div id="qrCode" style="width: 200px; height: 200px; background: white; border: 2px solid var(--color-gray-300); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;">
<div style="width: 180px; height: 180px; background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); background-size: 20px 20px; background-position: 0 0, 10px 10px;"></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<label class="form-label">포스터 크기</label>
<div style="display: flex; flex-direction: column; gap: var(--spacing-s);">
<label class="radio-card">
<input type="radio" name="posterSize" value="A4" checked onchange="selectSize(this)">
<div class="radio-card-content">
<div>
<div class="body-m" style="font-weight: 600;">A4</div>
<div class="caption" style="color: var(--color-gray-600);">210 × 297mm (일반 인쇄용)</div>
</div>
</div>
</label>
<label class="radio-card">
<input type="radio" name="posterSize" value="A3" onchange="selectSize(this)">
<div class="radio-card-content">
<div>
<div class="body-m" style="font-weight: 600;">A3</div>
<div class="caption" style="color: var(--color-gray-600);">297 × 420mm (대형 포스터용)</div>
</div>
</div>
</label>
</div>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg" onclick="generatePoster()" style="width: 100%;">
<span class="material-icons">description</span>
<span>포스터 생성하기</span>
</button>
</section>
<section class="section" id="resultSection" style="display: none;" aria-labelledby="result-title">
<h2 id="result-title" class="h3">생성 완료</h2>
<div class="card">
<div class="card-body">
<div style="aspect-ratio: 210/297; background: white; border: 2px solid var(--color-gray-300); border-radius: var(--radius-md); margin-bottom: var(--spacing-m); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;">
<div style="padding: var(--spacing-l); text-align: center; width: 100%;">
<div class="h3" style="color: var(--color-primary-main); margin-bottom: var(--spacing-m);">🎉</div>
<div class="h4" style="margin-bottom: var(--spacing-l);" id="posterTitle">이벤트 참여하세요!</div>
<div style="width: 120px; height: 120px; margin: 0 auto var(--spacing-m); background: white; border: 2px solid var(--color-gray-300);">
<div style="width: 100%; height: 100%; background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); background-size: 15px 15px; background-position: 0 0, 7.5px 7.5px;"></div>
</div>
<div class="body-s" style="color: var(--color-gray-600);">QR 코드를 스캔하세요</div>
</div>
</div>
<div class="info-grid">
<div class="info-item">
<span class="info-label">PDF 파일</span>
<span class="info-value" id="pdfSize">2.1 MB</span>
</div>
<div class="info-item">
<span class="info-label">QR 이미지</span>
<span class="info-value">150 KB</span>
</div>
</div>
</div>
</div>
<div style="display: flex; gap: var(--spacing-s);">
<button type="button" class="btn btn-outline btn-lg" onclick="downloadPoster()" style="flex: 1;">
<span class="material-icons">download</span>
<span>다운로드</span>
</button>
<button type="button" class="btn btn-outline btn-lg" onclick="printPoster()" style="flex: 1;">
<span class="material-icons">print</span>
<span>인쇄하기</span>
</button>
</div>
</section>
</main>
<div class="fixed-bottom-button" id="nextButton" style="display: none;">
<button type="button" class="btn btn-primary btn-lg" onclick="goToNext()">
다음 (콘텐츠편집)
</button>
</div>
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
let selectedSize = 'A4';
const eventData = AppState.currentEvent || {};
const storeData = AppState.store || {};
// Generate random event URL
const eventUrl = 'ktevnt.co/' + Math.random().toString(36).substring(2, 9);
document.getElementById('eventUrl').textContent = eventUrl;
window.copyUrl = function() {
navigator.clipboard.writeText(eventUrl).then(function() {
Toast.success('URL이 복사되었습니다!');
}).catch(function() {
Toast.error('복사에 실패했습니다.');
});
};
window.selectSize = function(radio) {
selectedSize = radio.value;
};
window.generatePoster = function() {
Loading.show('포스터 생성 중...');
setTimeout(function() {
Loading.hide();
showResult();
}, 2000);
};
function showResult() {
document.getElementById('settingsSection').style.display = 'none';
document.getElementById('resultSection').style.display = 'block';
document.getElementById('nextButton').style.display = 'block';
const storeName = storeData.name || '우리가게';
document.getElementById('posterTitle').textContent = storeName + ' 이벤트 참여하세요!';
document.getElementById('pdfSize').textContent = selectedSize === 'A4' ? '2.1 MB' : '4.8 MB';
eventData.qrPoster = {
url: eventUrl,
size: selectedSize,
createdAt: new Date().toISOString()
};
AppState.currentEvent = eventData;
AppState.save();
Toast.success('QR 포스터가 생성되었습니다!');
}
window.downloadPoster = function() {
Loading.show('다운로드 준비 중...');
setTimeout(function() {
Loading.hide();
Toast.success('포스터가 다운로드되었습니다!');
}, 1000);
};
window.printPoster = function() {
Toast.show('인쇄 다이얼로그를 엽니다...');
// window.print();
};
window.goToNext = function() {
window.location.href = '13-콘텐츠편집.html';
};
})();
</script>
<style>
.radio-card {
display: block;
padding: var(--spacing-m);
background: white;
border: 2px solid var(--color-gray-300);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
}
.radio-card:hover {
border-color: var(--color-primary-main);
}
.radio-card input[type="radio"] {
margin-right: var(--spacing-s);
}
.radio-card input[type="radio"]:checked ~ .radio-card-content {
color: var(--color-primary-main);
}
.radio-card-content {
display: flex;
align-items: center;
}
</style>
</body>
</html>

325
design/uiux/prototype/13-콘텐츠편집.html Normal file
View File

@ -0,0 +1,325 @@
<!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: 100px;">
<section class="section" aria-labelledby="select-title">
<h2 id="select-title" class="h3">편집할 콘텐츠 선택</h2>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-m);">
<button type="button" class="content-card" onclick="editContent('image')" data-type="image">
<div class="content-card-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<span class="material-icons" style="color: white; font-size: 32px;">image</span>
</div>
<div class="body-s" style="font-weight: 600; text-align: center;">이미지</div>
</button>
<button type="button" class="content-card" onclick="editContent('video')" data-type="video">
<div class="content-card-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<span class="material-icons" style="color: white; font-size: 32px;">videocam</span>
</div>
<div class="body-s" style="font-weight: 600; text-align: center;">영상</div>
</button>
<button type="button" class="content-card" onclick="editContent('sns')" data-type="sns">
<div class="content-card-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<span class="material-icons" style="color: white; font-size: 32px;">share</span>
</div>
<div class="body-s" style="font-weight: 600; text-align: center;">SNS</div>
</button>
</div>
</section>
<section class="section" id="editorSection" style="display: none;" aria-labelledby="editor-title">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
<h2 id="editor-title" class="h3">편집 중</h2>
<button type="button" class="btn-text" onclick="closeEditor()">
<span class="material-icons">close</span>
</button>
</div>
<div class="card">
<div class="card-body">
<div id="previewArea" style="aspect-ratio: 1; background: var(--color-gray-100); border-radius: var(--radius-md); margin-bottom: var(--spacing-m); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;">
<div id="previewContent" style="padding: var(--spacing-l); text-align: center; width: 100%;">
<div class="h4" id="previewText">🎉 연말 대박 이벤트!</div>
</div>
</div>
<div style="display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-m);">
<button type="button" class="btn btn-outline btn-sm" onclick="editText()" style="flex: 1;">
<span class="material-icons" style="font-size: 18px;">text_fields</span>
<span>텍스트</span>
</button>
<button type="button" class="btn btn-outline btn-sm" onclick="editColor()" style="flex: 1;">
<span class="material-icons" style="font-size: 18px;">palette</span>
<span>색상</span>
</button>
<button type="button" class="btn btn-outline btn-sm" onclick="editSize()" style="flex: 1;">
<span class="material-icons" style="font-size: 18px;">photo_size_select_small</span>
<span>크기</span>
</button>
</div>
<div>
<label class="form-label">편집 이력</label>
<div style="padding: var(--spacing-m); background: var(--color-gray-50); border-radius: var(--radius-md);">
<div style="display: flex; flex-direction: column; gap: var(--spacing-xs);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="body-s">• 원본</span>
<button type="button" class="btn-text btn-sm" onclick="revertToOriginal()">되돌리기</button>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="body-s" style="font-weight: 600;">• 버전 1 (현재)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="skipSection">
<button type="button" class="btn btn-outline btn-lg" onclick="skipEdit()" style="width: 100%;">
편집 건너뛰기
</button>
</section>
</main>
<div class="fixed-bottom-button" id="saveButton" style="display: none;">
<button type="button" class="btn btn-outline btn-lg" onclick="cancelEdit()" style="flex: 1;">
취소
</button>
<button type="button" class="btn btn-primary btn-lg" onclick="saveEdit()" style="flex: 2;">
저장하기
</button>
</div>
<div id="textEditModal" 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="closeTextModal()">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body">
<label class="form-label" for="editTextInput">텍스트 내용</label>
<textarea id="editTextInput" class="form-input" rows="4" placeholder="텍스트를 입력하세요" style="resize: vertical;"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" onclick="closeTextModal()">취소</button>
<button type="button" class="btn btn-primary" onclick="applyText()">적용</button>
</div>
</div>
</div>
<div id="colorEditModal" 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="closeColorModal()">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body">
<label class="form-label">배경 색상</label>
<div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-s);">
<button type="button" class="color-option" data-color="#667eea" onclick="selectColor(this)" style="background: #667eea;"></button>
<button type="button" class="color-option" data-color="#f093fb" onclick="selectColor(this)" style="background: #f093fb;"></button>
<button type="button" class="color-option" data-color="#4facfe" onclick="selectColor(this)" style="background: #4facfe;"></button>
<button type="button" class="color-option" data-color="#43e97b" onclick="selectColor(this)" style="background: #43e97b;"></button>
<button type="button" class="color-option" data-color="#fa709a" onclick="selectColor(this)" style="background: #fa709a;"></button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" onclick="closeColorModal()">취소</button>
<button type="button" class="btn btn-primary" onclick="applyColor()">적용</button>
</div>
</div>
</div>
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
let currentContent = null;
let selectedColor = '#667eea';
const eventData = AppState.currentEvent || {};
window.editContent = function(type) {
currentContent = type;
document.getElementById('editorSection').style.display = 'block';
document.getElementById('skipSection').style.display = 'none';
document.getElementById('saveButton').style.display = 'flex';
const typeNames = {
image: '이미지',
video: '영상',
sns: 'SNS'
};
document.getElementById('editor-title').textContent = typeNames[type] + ' 편집';
// Load content preview
if (type === 'video' && eventData.video) {
document.getElementById('previewText').textContent = eventData.video.overlayText || '🎉 연말 대박 이벤트!';
} else if (eventData.promotionMessage) {
document.getElementById('previewText').textContent = eventData.promotionMessage.text || '🎉 연말 대박 이벤트!';
}
};
window.closeEditor = function() {
document.getElementById('editorSection').style.display = 'none';
document.getElementById('skipSection').style.display = 'block';
document.getElementById('saveButton').style.display = 'none';
currentContent = null;
};
window.editText = function() {
const modal = document.getElementById('textEditModal');
const input = document.getElementById('editTextInput');
input.value = document.getElementById('previewText').textContent;
Modal.open(modal);
};
window.closeTextModal = function() {
Modal.close(document.getElementById('textEditModal'));
};
window.applyText = function() {
const text = document.getElementById('editTextInput').value.trim();
if (text) {
document.getElementById('previewText').textContent = text;
Toast.success('텍스트가 변경되었습니다.');
}
closeTextModal();
};
window.editColor = function() {
Modal.open(document.getElementById('colorEditModal'));
};
window.closeColorModal = function() {
Modal.close(document.getElementById('colorEditModal'));
};
window.selectColor = function(btn) {
selectedColor = btn.dataset.color;
document.querySelectorAll('.color-option').forEach(el => {
el.style.border = '2px solid transparent';
});
btn.style.border = '2px solid var(--color-gray-900)';
};
window.applyColor = function() {
document.getElementById('previewArea').style.background = 'linear-gradient(135deg, ' + selectedColor + ' 0%, ' + adjustColor(selectedColor) + ' 100%)';
Toast.success('색상이 변경되었습니다.');
closeColorModal();
};
function adjustColor(hex) {
const r = parseInt(hex.slice(1,3), 16);
const g = parseInt(hex.slice(3,5), 16);
const b = parseInt(hex.slice(5,7), 16);
return '#' + ((r-40).toString(16).padStart(2,'0')) + ((g-40).toString(16).padStart(2,'0')) + ((b-40).toString(16).padStart(2,'0'));
}
window.editSize = function() {
const current = document.getElementById('previewText');
const currentSize = parseInt(window.getComputedStyle(current).fontSize);
const newSize = currentSize === 24 ? 32 : 24;
current.style.fontSize = newSize + 'px';
Toast.success('크기가 변경되었습니다.');
};
window.revertToOriginal = function() {
if (confirm('원본으로 되돌리시겠습니까?')) {
document.getElementById('previewText').textContent = '🎉 연말 대박 이벤트!';
document.getElementById('previewArea').style.background = 'var(--color-gray-100)';
Toast.success('원본으로 되돌렸습니다.');
}
};
window.cancelEdit = function() {
if (confirm('편집을 취소하시겠습니까?')) {
closeEditor();
}
};
window.saveEdit = function() {
Loading.show('저장 중...');
setTimeout(function() {
Loading.hide();
Toast.success('편집 내용이 저장되었습니다!');
closeEditor();
}, 1000);
};
window.skipEdit = function() {
window.location.href = '14-콘텐츠최종승인.html';
};
})();
</script>
<style>
.content-card {
background: white;
border: 2px solid var(--color-gray-300);
border-radius: var(--radius-md);
padding: var(--spacing-m);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-s);
cursor: pointer;
transition: all 0.2s ease;
}
.content-card:hover {
border-color: var(--color-primary-main);
transform: translateY(-2px);
}
.content-card-icon {
width: 64px;
height: 64px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
}
.color-option {
aspect-ratio: 1;
border-radius: var(--radius-sm);
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.2s ease;
}
.color-option:hover {
transform: scale(1.1);
}
</style>
</body>
</html>

279
design/uiux/prototype/14-콘텐츠최종승인.html Normal file
View File

@ -0,0 +1,279 @@
<!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>
<div class="progress-container" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 100%;"></div>
<div class="progress-label">콘텐츠 5/5: 최종 승인</div>
</div>
<main id="main-content" class="container" role="main" style="padding-bottom: 100px;">
<section class="section">
<div class="alert alert-success" role="status">
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
<span class="material-icons" style="font-size: 24px;">check_circle</span>
<span class="body-l" style="font-weight: 600;">콘텐츠 생성 완료!</span>
</div>
</div>
</section>
<section class="section" aria-labelledby="contents-title">
<h2 id="contents-title" class="h3">생성된 콘텐츠 (갤러리)</h2>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-s); margin-bottom: var(--spacing-l);">
<button type="button" class="gallery-item" onclick="viewContent('image', 1)">
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: white; font-size: 32px;">image</span>
</div>
<div class="caption" style="margin-top: 4px; text-align: center;">이미지1</div>
</button>
<button type="button" class="gallery-item" onclick="viewContent('image', 2)">
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: white; font-size: 32px;">image</span>
</div>
<div class="caption" style="margin-top: 4px; text-align: center;">이미지2</div>
</button>
<button type="button" class="gallery-item" onclick="viewContent('image', 3)">
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: white; font-size: 32px;">image</span>
</div>
<div class="caption" style="margin-top: 4px; text-align: center;">이미지3</div>
</button>
<button type="button" class="gallery-item" onclick="viewContent('video', 1)">
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: white; font-size: 32px;">play_circle</span>
</div>
<div class="caption" style="margin-top: 4px; text-align: center;">15초영상</div>
</button>
<button type="button" class="gallery-item" onclick="viewContent('sns', 1)">
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: white; font-size: 32px;">share</span>
</div>
<div class="caption" style="margin-top: 4px; text-align: center;">SNS세트</div>
</button>
<button type="button" class="gallery-item" onclick="viewContent('qr', 1)">
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: #333; font-size: 32px;">qr_code</span>
</div>
<div class="caption" style="margin-top: 4px; text-align: center;">QR포스터</div>
</button>
</div>
<button type="button" class="btn btn-outline btn-lg" onclick="downloadAll()" style="width: 100%;">
<span class="material-icons">download</span>
<span>전체 다운로드</span>
</button>
</section>
<section class="section">
<div class="card">
<div class="card-body">
<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 style="text-align: center; padding: var(--spacing-l);">
<div class="h2" style="color: var(--color-primary-main); margin-bottom: var(--spacing-xs);" id="elapsedTime">7분</div>
<div class="body-s" style="color: var(--color-gray-600);">목표: 5-8분 이내</div>
<div class="body-s" style="color: var(--color-success); font-weight: 600; margin-top: var(--spacing-xs);" id="timeStatus">✓ 목표 달성!</div>
</div>
</div>
</div>
</section>
</main>
<div class="fixed-bottom-button">
<button type="button" class="btn btn-outline btn-lg" onclick="goBack()" style="flex: 1;">
<span class="material-icons">arrow_back</span>
<span>수정</span>
</button>
<button type="button" class="btn btn-primary btn-lg" onclick="approve()" style="flex: 2;">
<span class="material-icons">check</span>
<span>승인하기</span>
</button>
</div>
<div id="viewModal" class="modal" role="dialog" aria-modal="true" style="display: none;">
<div class="modal-content" style="max-width: 90vw; max-height: 90vh;">
<div class="modal-header">
<h3 class="h4" id="viewTitle">콘텐츠 미리보기</h3>
<button type="button" class="btn-icon" onclick="closeView()">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body" id="viewContent" style="padding: 0; max-height: 70vh; overflow: auto;">
<!-- Content preview will be inserted here -->
</div>
</div>
</div>
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const eventData = AppState.currentEvent || {};
const storeData = AppState.store || {};
// Calculate elapsed time
const startTime = eventData.startTime || Date.now();
const elapsedMinutes = Math.floor((Date.now() - startTime) / 60000);
const displayTime = elapsedMinutes > 0 ? elapsedMinutes + '분' : '30초';
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('elapsedTime').textContent = displayTime;
const targetMin = 5;
const targetMax = 8;
const statusEl = document.getElementById('timeStatus');
if (elapsedMinutes <= targetMax) {
statusEl.textContent = '✓ 목표 달성!';
statusEl.style.color = 'var(--color-success)';
} else {
statusEl.textContent = '⚠ 목표 초과';
statusEl.style.color = 'var(--color-warning)';
}
});
window.viewContent = function(type, index) {
const modal = document.getElementById('viewModal');
const title = document.getElementById('viewTitle');
const content = document.getElementById('viewContent');
const typeNames = {
image: '이미지',
video: '영상',
sns: 'SNS',
qr: 'QR 포스터'
};
title.textContent = typeNames[type] + ' ' + (index || '') + ' 미리보기';
let html = '';
if (type === 'image') {
const gradients = [
'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
];
html = `
<div style="aspect-ratio: 1; background: ${gradients[index-1]}; display: flex; align-items: center; justify-content: center; color: white; padding: var(--spacing-xl); text-align: center;">
<div>
<div class="h2" style="color: white; margin-bottom: var(--spacing-m);">🎁</div>
<div class="h3" style="color: white;">${eventData.promotionMessage?.text?.split('\n')[0] || '이벤트 참여하세요!'}</div>
</div>
</div>
`;
} else if (type === 'video') {
html = `
<div style="aspect-ratio: 16/9; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); display: flex; align-items: center; justify-content: center; position: relative;">
<div style="text-align: center; color: white;">
<span class="material-icons" style="font-size: 64px; color: white; margin-bottom: var(--spacing-m);">play_circle</span>
<div class="h4" style="color: white;">15초 홍보 영상</div>
</div>
</div>
`;
} else if (type === 'sns') {
html = `
<div style="padding: var(--spacing-l);">
<div style="margin-bottom: var(--spacing-m);">
<div class="body-m" style="font-weight: 600; margin-bottom: var(--spacing-s);">Instagram</div>
<div style="aspect-ratio: 1; background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); border-radius: var(--radius-md);"></div>
</div>
<div>
<div class="body-m" style="font-weight: 600; margin-bottom: var(--spacing-s);">Naver Blog</div>
<div style="aspect-ratio: 4/3; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-radius: var(--radius-md);"></div>
</div>
</div>
`;
} else if (type === 'qr') {
html = `
<div style="padding: var(--spacing-xl); background: white; text-align: center;">
<div class="h4" style="margin-bottom: var(--spacing-l);">${storeData.name || '우리가게'} 이벤트</div>
<div style="width: 200px; height: 200px; margin: 0 auto var(--spacing-l); background: white; border: 2px solid var(--color-gray-300);">
<div style="width: 100%; height: 100%; background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); background-size: 20px 20px; background-position: 0 0, 10px 10px;"></div>
</div>
<div class="body-m" style="color: var(--color-gray-600);">QR 코드를 스캔하세요</div>
</div>
`;
}
content.innerHTML = html;
Modal.open(modal);
};
window.closeView = function() {
Modal.close(document.getElementById('viewModal'));
};
window.downloadAll = function() {
Loading.show('전체 콘텐츠 다운로드 중...');
setTimeout(function() {
Loading.hide();
Toast.success('📦 모든 콘텐츠가 다운로드되었습니다!');
}, 2000);
};
window.goBack = function() {
if (confirm('수정 화면으로 돌아가시겠습니까?')) {
window.location.href = '13-콘텐츠편집.html';
}
};
window.approve = function() {
if (confirm('콘텐츠를 승인하고 배포 단계로 진행하시겠습니까?')) {
eventData.contentApproved = true;
eventData.contentApprovedAt = new Date().toISOString();
AppState.currentEvent = eventData;
AppState.save();
Toast.success('콘텐츠가 승인되었습니다!');
setTimeout(function() {
window.location.href = '16-배포진행상태.html';
}, 1000);
}
};
})();
</script>
<style>
.gallery-item {
background: transparent;
border: none;
cursor: pointer;
transition: transform 0.2s ease;
}
.gallery-item:hover {
transform: scale(1.05);
}
</style>
</body>
</html>

364
design/uiux/prototype/16-배포진행상태.html Normal file
View File

@ -0,0 +1,364 @@
<!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>
<div class="progress-container" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 66%;"></div>
<div class="progress-label">배포 2/3: 진행 상태</div>
</div>
<main id="main-content" class="container" role="main" style="padding-bottom: 100px;">
<section class="section">
<div style="text-align: center; margin-bottom: var(--spacing-xl);">
<div style="font-size: 48px; margin-bottom: var(--spacing-m);">🚀</div>
<h2 class="h3">배포 진행 중...</h2>
</div>
</section>
<section class="section" aria-live="polite">
<!-- Instagram -->
<div class="card" id="statusInstagram">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-m);">
<div class="status-icon" style="background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);">
<span class="material-icons" style="color: white;">check</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">Instagram</div>
<div class="caption" style="color: var(--color-success);">✅ 배포 완료 (3초)</div>
</div>
<button type="button" class="btn-text btn-sm" onclick="viewPost('instagram')">
게시물 보기
</button>
</div>
</div>
</div>
<!-- 우리동네TV -->
<div class="card" id="statusTV">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-m);">
<div class="status-icon status-loading" style="background: var(--color-secondary-main);">
<span class="material-icons rotating" style="color: white;">sync</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">우리동네TV</div>
<div class="caption" style="color: var(--color-info);">🔄 배포 중... (<span id="tvTime">15</span>초)</div>
<div class="progress-bar-container" style="margin-top: var(--spacing-xs);">
<div class="progress-bar-fill" id="tvProgress" style="width: 40%;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 지니TV -->
<div class="card" id="statusGenie">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-m);">
<div class="status-icon" style="background: var(--color-gray-400);">
<span class="material-icons" style="color: white;">schedule</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">지니TV</div>
<div class="caption" style="color: var(--color-gray-600);">⏳ 대기 중...</div>
</div>
</div>
</div>
</div>
<!-- Naver Blog -->
<div class="card" id="statusBlog">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-m);">
<div class="status-icon" style="background: var(--color-error);">
<span class="material-icons" style="color: white;">error</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">Naver Blog</div>
<div class="caption" style="color: var(--color-error);">❌ 배포 실패 (재시도 중)</div>
<div class="caption" style="color: var(--color-gray-600); margin-top: 4px;">1/3 재시도</div>
</div>
<button type="button" class="btn-text btn-sm" onclick="retryDeploy('blog')">
수동 재시도
</button>
</div>
</div>
</div>
</section>
<section class="section">
<div class="card">
<div class="card-body">
<div class="info-grid">
<div class="info-item" style="text-align: center;">
<span class="info-label">전체 진행률</span>
<span class="h3" style="color: var(--color-primary-main);" id="overallProgress">50%</span>
</div>
<div class="info-item" style="text-align: center;">
<span class="info-label">예상 소요</span>
<span class="h3" style="color: var(--color-info);" id="remainingTime">45초</span>
</div>
</div>
</div>
</div>
</section>
<div style="display: flex; gap: var(--spacing-s);">
<button type="button" class="btn btn-outline btn-lg" onclick="cancelDeploy()" style="flex: 1;">
취소
</button>
<button type="button" class="btn btn-outline btn-lg" onclick="refreshStatus()" style="flex: 1;">
<span class="material-icons">refresh</span>
<span>새로고침</span>
</button>
</div>
</main>
<div class="fixed-bottom-button" id="nextButton" style="display: none;">
<button type="button" class="btn btn-primary btn-lg" onclick="goToNext()">
<span class="material-icons">check_circle</span>
<span>완료 확인</span>
</button>
</div>
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
let deploymentProgress = {
instagram: 100,
tv: 40,
genie: 0,
blog: -1
};
let elapsedTime = 0;
const totalChannels = 4;
// Start deployment simulation
document.addEventListener('DOMContentLoaded', function() {
simulateDeployment();
});
function simulateDeployment() {
const interval = setInterval(function() {
elapsedTime += 5;
// Update TV progress
if (deploymentProgress.tv < 100 && deploymentProgress.tv >= 0) {
deploymentProgress.tv += 15;
if (deploymentProgress.tv >= 100) {
deploymentProgress.tv = 100;
updateChannelStatus('tv', 'complete');
} else {
updateChannelProgress('tv', deploymentProgress.tv);
}
}
// Start Genie after TV
if (deploymentProgress.tv === 100 && deploymentProgress.genie === 0) {
deploymentProgress.genie = 10;
updateChannelStatus('genie', 'progress');
}
// Update Genie progress
if (deploymentProgress.genie > 0 && deploymentProgress.genie < 100) {
deploymentProgress.genie += 20;
if (deploymentProgress.genie >= 100) {
deploymentProgress.genie = 100;
updateChannelStatus('genie', 'complete');
} else {
updateChannelProgress('genie', deploymentProgress.genie);
}
}
// Retry blog after some time
if (elapsedTime === 20 && deploymentProgress.blog === -1) {
deploymentProgress.blog = 0;
updateChannelStatus('blog', 'retry');
}
if (deploymentProgress.blog >= 0 && deploymentProgress.blog < 100) {
deploymentProgress.blog += 25;
if (deploymentProgress.blog >= 100) {
deploymentProgress.blog = 100;
updateChannelStatus('blog', 'complete');
} else {
updateChannelProgress('blog', deploymentProgress.blog);
}
}
// Calculate overall progress
const completed = Object.values(deploymentProgress).filter(v => v === 100).length;
const overall = Math.round((completed / totalChannels) * 100);
document.getElementById('overallProgress').textContent = overall + '%';
const remaining = Math.max(0, 60 - elapsedTime);
document.getElementById('remainingTime').textContent = remaining + '초';
// Check if all complete
if (completed === totalChannels) {
clearInterval(interval);
showCompletion();
}
}, 5000);
}
function updateChannelProgress(channel, progress) {
const progressBar = document.getElementById(channel + 'Progress');
const timeEl = document.getElementById(channel + 'Time');
if (progressBar) {
progressBar.style.width = progress + '%';
}
if (timeEl) {
const remaining = Math.round((100 - progress) / 100 * 30);
timeEl.textContent = remaining;
}
}
function updateChannelStatus(channel, status) {
const card = document.getElementById('status' + capitalize(channel));
if (!card) return;
const icon = card.querySelector('.status-icon .material-icons');
const statusText = card.querySelector('.caption');
const statusIcon = card.querySelector('.status-icon');
if (status === 'complete') {
icon.textContent = 'check';
icon.classList.remove('rotating');
statusIcon.style.background = 'var(--color-success)';
statusText.textContent = '✅ 배포 완료';
statusText.style.color = 'var(--color-success)';
// Remove progress bar if exists
const progressBar = card.querySelector('.progress-bar-container');
if (progressBar) progressBar.remove();
} else if (status === 'progress') {
icon.textContent = 'sync';
icon.classList.add('rotating');
statusIcon.style.background = 'var(--color-secondary-main)';
statusText.innerHTML = '🔄 배포 중... (<span id="' + channel + 'Time">30</span>초)';
statusText.style.color = 'var(--color-info)';
// Add progress bar
const progressHTML = `<div class="progress-bar-container" style="margin-top: var(--spacing-xs);">
<div class="progress-bar-fill" id="${channel}Progress" style="width: 10%;"></div>
</div>`;
statusText.insertAdjacentHTML('afterend', progressHTML);
} else if (status === 'retry') {
icon.textContent = 'sync';
icon.classList.add('rotating');
statusIcon.style.background = 'var(--color-warning)';
statusText.textContent = '🔄 재시도 중...';
statusText.style.color = 'var(--color-warning)';
}
}
function capitalize(str) {
if (str === 'tv') return 'TV';
if (str === 'genie') return 'Genie';
if (str === 'blog') return 'Blog';
return str.charAt(0).toUpperCase() + str.slice(1);
}
function showCompletion() {
document.getElementById('nextButton').style.display = 'block';
Toast.success('🎉 모든 채널 배포가 완료되었습니다!');
}
window.viewPost = function(channel) {
Toast.show('📱 ' + capitalize(channel) + ' 게시물을 엽니다...');
// In real implementation, would open actual post URL
};
window.retryDeploy = function(channel) {
Loading.show('재시도 중...');
setTimeout(function() {
Loading.hide();
deploymentProgress[channel] = 0;
updateChannelStatus(channel, 'retry');
Toast.success('재시도가 시작되었습니다.');
}, 1000);
};
window.refreshStatus = function() {
Toast.show('🔄 상태를 업데이트합니다...');
// In real implementation, would fetch actual status
};
window.cancelDeploy = function() {
if (confirm('배포를 취소하시겠습니까? 진행 중인 작업이 중단됩니다.')) {
Toast.show('배포가 취소되었습니다.');
setTimeout(function() {
window.history.back();
}, 1000);
}
};
window.goToNext = function() {
window.location.href = '17-오프라인자료다운로드.html';
};
})();
</script>
<style>
.status-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.progress-bar-container {
width: 100%;
height: 4px;
background: var(--color-gray-200);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary-main), var(--color-secondary-main));
border-radius: var(--radius-full);
transition: width 0.5s ease;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotating {
animation: rotate 2s linear infinite;
}
</style>
</body>
</html>

166
design/uiux/prototype/17-오프라인자료다운로드.html Normal file
View File

@ -0,0 +1,166 @@
<!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>
<div class="progress-container" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 100%;"></div>
<div class="progress-label">배포 3/3: 자료 다운로드</div>
</div>
<main id="main-content" class="container" role="main" style="padding-bottom: 100px;">
<section class="section">
<div class="alert alert-success" role="status">
<div style="display: flex; align-items: center; gap: var(--spacing-s);">
<span class="material-icons" style="font-size: 24px;">check_circle</span>
<span class="body-l" style="font-weight: 600;">배포 완료!</span>
</div>
</div>
</section>
<section class="section" aria-labelledby="materials-title">
<h2 id="materials-title" class="h3">오프라인 홍보 자료</h2>
<div class="card" onclick="downloadFile('qr-a4')">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-m);">
<div style="width: 48px; height: 48px; background: var(--color-primary-lightest); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: var(--color-primary-main);">description</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">QR 포스터 (A4)</div>
<div class="caption" style="color: var(--color-gray-600);">2.1MB PDF</div>
</div>
<button type="button" class="btn btn-primary btn-sm" onclick="downloadFile('qr-a4', event)">
다운로드
</button>
</div>
</div>
</div>
<div class="card" onclick="downloadFile('qr-a3')">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-m);">
<div style="width: 48px; height: 48px; background: var(--color-secondary-lightest); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: var(--color-secondary-main);">description</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">QR 포스터 (A3)</div>
<div class="caption" style="color: var(--color-gray-600);">4.5MB PDF</div>
</div>
<button type="button" class="btn btn-primary btn-sm" onclick="downloadFile('qr-a3', event)">
다운로드
</button>
</div>
</div>
</div>
<div class="card" onclick="downloadFile('qr-image')">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-m);">
<div style="width: 48px; height: 48px; background: var(--color-success-lightest); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: var(--color-success);">qr_code</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">QR 코드 이미지</div>
<div class="caption" style="color: var(--color-gray-600);">150KB PNG</div>
</div>
<button type="button" class="btn btn-primary btn-sm" onclick="downloadFile('qr-image', event)">
다운로드
</button>
</div>
</div>
</div>
<div class="card" onclick="downloadFile('images')">
<div class="card-body">
<div style="display: flex; align-items: center; gap: var(--spacing-m);">
<div style="width: 48px; height: 48px; background: var(--color-warning-lightest); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;">
<span class="material-icons" style="color: var(--color-warning);">collections</span>
</div>
<div style="flex: 1;">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">고해상도 이미지 (3종)</div>
<div class="caption" style="color: var(--color-gray-600);">8.3MB ZIP</div>
</div>
<button type="button" class="btn btn-primary btn-sm" onclick="downloadFile('images', event)">
다운로드
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg" onclick="downloadAll()" style="width: 100%; margin-top: var(--spacing-m);">
<span class="material-icons">download</span>
<span>전체 일괄 다운로드 (ZIP)</span>
</button>
</section>
</main>
<div class="fixed-bottom-button">
<button type="button" class="btn btn-primary btn-lg" onclick="complete()">
<span class="material-icons">check_circle</span>
<span>완료</span>
</button>
</div>
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
window.downloadFile = function(type, event) {
if (event) {
event.stopPropagation();
event.preventDefault();
}
const fileNames = {
'qr-a4': 'QR포스터_A4.pdf',
'qr-a3': 'QR포스터_A3.pdf',
'qr-image': 'QR코드.png',
'images': '홍보이미지_3종.zip'
};
Loading.show('다운로드 중...');
setTimeout(function() {
Loading.hide();
Toast.success(fileNames[type] + ' 다운로드 완료!');
}, 1000);
};
window.downloadAll = function() {
Loading.show('전체 파일 압축 중...');
setTimeout(function() {
Loading.hide();
Toast.success('📦 전체 파일이 다운로드되었습니다!');
}, 2000);
};
window.complete = function() {
Toast.success('이벤트 배포가 완료되었습니다!');
setTimeout(function() {
window.location.href = '20-당첨자명단관리.html';
}, 1000);
};
})();
</script>
</body>
</html>

432
design/uiux/prototype/20-당첨자명단관리.html Normal file
View File

@ -0,0 +1,432 @@
<!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>
<!-- Tab Navigation -->
<nav class="tabs" role="tablist">
<button type="button" class="tab active" role="tab" aria-selected="true" onclick="showTab('dashboard')">
<span class="material-icons">dashboard</span>
<span>대시보드</span>
</button>
<button type="button" class="tab" role="tab" aria-selected="false" onclick="showTab('winners')">
<span class="material-icons">emoji_events</span>
<span>당첨자</span>
</button>
<button type="button" class="tab" role="tab" aria-selected="false" onclick="showTab('analytics')">
<span class="material-icons">analytics</span>
<span>분석</span>
</button>
</nav>
<main id="main-content" class="container" role="main" style="padding-bottom: 80px;">
<!-- Dashboard Tab -->
<div id="dashboardTab" class="tab-content">
<section class="section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m);">
<div>
<div class="caption" style="color: var(--color-gray-600);">마지막 업데이트: <span id="lastUpdate">15:35</span></div>
</div>
<button type="button" class="btn-text btn-sm" onclick="refresh()">
<span class="material-icons">refresh</span>
<span>새로고침</span>
</button>
</div>
<div class="card">
<div class="card-body">
<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">
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-m);">
<div class="card">
<div class="card-body">
<div class="caption" style="color: var(--color-gray-600); margin-bottom: var(--spacing-xs);">총 참여자</div>
<div class="h3" style="color: var(--color-primary-main); margin-bottom: var(--spacing-xs);">1,234명</div>
<div class="caption" style="color: var(--color-success);">+45 (오늘)</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="caption" style="color: var(--color-gray-600); margin-bottom: var(--spacing-xs);">총 노출 수</div>
<div class="h3" style="color: var(--color-secondary-main); margin-bottom: var(--spacing-xs);">15,678회</div>
<div class="caption" style="color: var(--color-success);">+230 (1시간)</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="caption" style="color: var(--color-gray-600); margin-bottom: var(--spacing-xs);">매출 증가율</div>
<div class="h3" style="color: var(--color-warning); margin-bottom: var(--spacing-xs);">+42%</div>
<div class="caption" style="color: var(--color-gray-600);">(이벤트 전 대비)</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="caption" style="color: var(--color-gray-600); margin-bottom: var(--spacing-xs);">예상 ROI</div>
<div class="h3" style="color: var(--color-success); margin-bottom: var(--spacing-xs);">245%</div>
<div class="caption" style="color: var(--color-gray-600);">(투자 대비)</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="h4" style="margin-bottom: var(--spacing-m);">채널별 참여 현황</h2>
<div class="card">
<div class="card-body">
<div style="display: flex; flex-direction: column; gap: var(--spacing-m);">
<div>
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs);">
<span class="body-s">QR코드</span>
<span class="body-s" style="font-weight: 600;">45%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar-fill" style="width: 45%; background: var(--color-primary-main);"></div>
</div>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs);">
<span class="body-s">Instagram</span>
<span class="body-s" style="font-weight: 600;">30%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar-fill" style="width: 30%; background: var(--color-secondary-main);"></div>
</div>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs);">
<span class="body-s">우리동네TV</span>
<span class="body-s" style="font-weight: 600;">15%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar-fill" style="width: 15%; background: var(--color-success);"></div>
</div>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs);">
<span class="body-s">Naver Blog</span>
<span class="body-s" style="font-weight: 600;">10%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar-fill" style="width: 10%; background: var(--color-warning);"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Winners Tab -->
<div id="winnersTab" class="tab-content" style="display: none;">
<section class="section">
<div class="card">
<div class="card-body">
<div class="h4" style="margin-bottom: var(--spacing-xs);">연말 대박 이벤트</div>
<div class="body-s" style="color: var(--color-gray-600);">당첨인원: <span style="font-weight: 600; color: var(--color-primary-main);">100명</span></div>
</div>
</div>
</section>
<section class="section">
<input type="text" class="form-input" placeholder="🔍 이름 또는 전화번호 검색" id="searchInput" onkeyup="searchWinners()">
</section>
<section class="section">
<div style="display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-m);">
<button type="button" class="btn btn-sm" onclick="filterWinners('all')" id="filterAll" style="background: var(--color-primary-main); color: white;">전체</button>
<button type="button" class="btn btn-outline btn-sm" onclick="filterWinners('pending')" id="filterPending">미지급</button>
<button type="button" class="btn btn-outline btn-sm" onclick="filterWinners('complete')" id="filterComplete">완료</button>
</div>
<div id="winnersList">
<!-- Winners will be rendered here -->
</div>
</section>
<section class="section">
<div style="display: flex; gap: var(--spacing-s);">
<button type="button" class="btn btn-outline btn-lg" onclick="viewAllParticipants()" style="flex: 1;">
<span class="material-icons">people</span>
<span>참여자 전체</span>
</button>
<button type="button" class="btn btn-primary btn-lg" onclick="downloadExcel()" style="flex: 1;">
<span class="material-icons">download</span>
<span>엑셀 다운로드</span>
</button>
</div>
</section>
</div>
<!-- Analytics Tab -->
<div id="analyticsTab" class="tab-content" style="display: none;">
<section class="section">
<h2 class="h4">채널별 성과 분석</h2>
<div class="card">
<div class="card-body">
<div style="aspect-ratio: 16/9; background: var(--color-gray-50); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;">
<div style="text-align: center;">
<span class="material-icons" style="font-size: 48px; color: var(--color-gray-400);">bar_chart</span>
<div class="body-s" style="color: var(--color-gray-600); margin-top: var(--spacing-s);">채널별 성과 차트</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="h4">ROI 분석</h2>
<div class="card">
<div class="card-body">
<div class="info-grid">
<div class="info-item">
<span class="info-label">총 투자 비용</span>
<span class="info-value" style="color: var(--color-primary-main);">500,000원</span>
</div>
<div class="info-item">
<span class="info-label">예상 수익</span>
<span class="info-value" style="color: var(--color-success);">1,225,000원</span>
</div>
<div class="info-item">
<span class="info-label">ROI</span>
<span class="info-value" style="color: var(--color-warning); font-weight: 700;">245%</span>
</div>
<div class="info-item">
<span class="info-label">순이익</span>
<span class="info-value" style="color: var(--color-success);">725,000원</span>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<button type="button" class="btn btn-primary btn-lg" onclick="downloadReport()" style="width: 100%;">
<span class="material-icons">description</span>
<span>분석 리포트 다운로드</span>
</button>
</section>
</div>
</main>
<script src="js/common.js"></script>
<script>
(function() {
'use strict';
const winnersData = [
{ name: '김철수', phone: '010-1234-5678', code: 'A-12345678', date: '2025-12-15', channel: 'QR코드', complete: false },
{ name: '이영희', phone: '010-2345-6789', code: 'A-23456789', date: '2025-12-16', channel: 'Instagram', complete: true, completeDate: '2025-12-20' },
{ name: '박민수', phone: '010-3456-7890', code: 'A-34567890', date: '2025-12-17', channel: '우리동네TV', complete: false },
{ name: '정수진', phone: '010-4567-8901', code: 'A-45678901', date: '2025-12-18', channel: 'Instagram', complete: true, completeDate: '2025-12-21' }
];
let currentFilter = 'all';
document.addEventListener('DOMContentLoaded', function() {
renderWinners();
});
window.showTab = function(tabName) {
// Hide all tabs
document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
document.querySelectorAll('.tab').forEach(el => {
el.classList.remove('active');
el.setAttribute('aria-selected', 'false');
});
// Show selected tab
document.getElementById(tabName + 'Tab').style.display = 'block';
event.target.closest('.tab').classList.add('active');
event.target.closest('.tab').setAttribute('aria-selected', 'true');
};
function renderWinners(filter = 'all', searchTerm = '') {
let filtered = winnersData;
if (filter === 'pending') {
filtered = filtered.filter(w => !w.complete);
} else if (filter === 'complete') {
filtered = filtered.filter(w => w.complete);
}
if (searchTerm) {
filtered = filtered.filter(w =>
w.name.includes(searchTerm) || w.phone.includes(searchTerm)
);
}
const html = filtered.map((winner, index) => `
<div class="card">
<div class="card-body">
<div style="margin-bottom: var(--spacing-m);">
<div class="body-m" style="font-weight: 600; margin-bottom: 4px;">${winner.name}</div>
<div class="body-s" style="color: var(--color-gray-600);">${winner.phone}</div>
<div class="caption" style="color: var(--color-gray-600); margin-top: var(--spacing-xs);">
응모: ${winner.code} | 참여일: ${winner.date}<br>
경로: ${winner.channel}
</div>
</div>
<label style="display: flex; align-items: center; gap: var(--spacing-xs); cursor: pointer;">
<input type="checkbox" ${winner.complete ? 'checked' : ''} onchange="toggleComplete(${index}, this)">
<span class="body-s" style="color: ${winner.complete ? 'var(--color-success)' : 'var(--color-gray-600)'};">
${winner.complete ? '✅ 경품 지급 완료' : '☐ 경품 지급 완료'}
</span>
</label>
${winner.complete ? `<div class="caption" style="color: var(--color-success); margin-top: 4px;">지급일: ${winner.completeDate}</div>` : ''}
</div>
</div>
`).join('');
document.getElementById('winnersList').innerHTML = html;
}
window.filterWinners = function(filter) {
currentFilter = filter;
['filterAll', 'filterPending', 'filterComplete'].forEach(id => {
const btn = document.getElementById(id);
if (id === 'filter' + filter.charAt(0).toUpperCase() + filter.slice(1)) {
btn.style.background = 'var(--color-primary-main)';
btn.style.color = 'white';
btn.classList.remove('btn-outline');
} else {
btn.style.background = '';
btn.style.color = '';
btn.classList.add('btn-outline');
}
});
renderWinners(filter);
};
window.searchWinners = function() {
const searchTerm = document.getElementById('searchInput').value;
renderWinners(currentFilter, searchTerm);
};
window.toggleComplete = function(index, checkbox) {
winnersData[index].complete = checkbox.checked;
if (checkbox.checked) {
winnersData[index].completeDate = new Date().toISOString().split('T')[0];
Toast.success('지급 완료로 처리되었습니다.');
} else {
winnersData[index].completeDate = null;
Toast.show('미지급으로 변경되었습니다.');
}
renderWinners(currentFilter);
};
window.viewAllParticipants = function() {
Toast.show('📊 참여자 전체 명단을 표시합니다...');
};
window.downloadExcel = function() {
Loading.show('엑셀 파일 생성 중...');
setTimeout(function() {
Loading.hide();
Toast.success('📥 당첨자_명단.xlsx 다운로드 완료!');
}, 1500);
};
window.downloadReport = function() {
Loading.show('리포트 생성 중...');
setTimeout(function() {
Loading.hide();
Toast.success('📄 이벤트_분석_리포트.pdf 다운로드 완료!');
}, 2000);
};
window.refresh = function() {
const now = new Date();
const timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
document.getElementById('lastUpdate').textContent = timeStr;
Toast.success('데이터가 업데이트되었습니다.');
};
window.toggleMenu = function() {
Toast.show('메뉴 표시');
};
})();
</script>
<style>
.tabs {
display: flex;
background: white;
border-bottom: 1px solid var(--color-gray-300);
position: sticky;
top: 56px;
z-index: 10;
}
.tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: var(--spacing-s);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
color: var(--color-gray-600);
}
.tab.active {
color: var(--color-primary-main);
border-bottom-color: var(--color-primary-main);
}
.tab .material-icons {
font-size: 20px;
}
.tab span:last-child {
font-size: 12px;
font-weight: 500;
}
.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;
}
</style>
</body>
</html>

870
design/uiux/prototype/css/common.css Normal file
View File

@ -0,0 +1,870 @@
/**
* KT AI 기반 소상공인 이벤트 자동 생성 서비스
* 공통 스타일시트
*
* 작성일: 2025-01-20
* 버전: 1.0
* 디자인 원칙: Mobile First, 접근성 우선, 일관성
*/
/* ============================================
1. CSS Variables (Design Tokens)
============================================ */
:root {
/* Primary Colors */
--color-primary-main: #E31E24;
--color-primary-light: #FF4D52;
--color-primary-dark: #C71820;
/* Secondary Colors */
--color-secondary-main: #0066FF;
--color-secondary-light: #4D94FF;
--color-secondary-dark: #004DBF;
/* Grayscale */
--color-black: #1A1A1A;
--color-gray-700: #4A4A4A;
--color-gray-500: #9E9E9E;
--color-gray-300: #D9D9D9;
--color-gray-100: #F5F5F5;
--color-white: #FFFFFF;
/* Semantic Colors */
--color-success: #00C853;
--color-warning: #FFA000;
--color-error: #D32F2F;
--color-info: #0288D1;
/* Typography */
--font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', system-ui, sans-serif;
/* Font Sizes (Mobile First) */
--font-size-display: 28px;
--font-size-h1: 24px;
--font-size-h2: 20px;
--font-size-h3: 18px;
--font-size-body-l: 16px;
--font-size-body-m: 14px;
--font-size-body-s: 12px;
--font-size-button: 16px;
/* Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Line Heights */
--line-height-tight: 1.3;
--line-height-normal: 1.4;
--line-height-relaxed: 1.5;
/* Spacing (4px Grid System) */
--spacing-xs: 4px;
--spacing-s: 8px;
--spacing-m: 16px;
--spacing-l: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
/* Border Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 50%;
/* Shadows */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.2);
/* Transitions */
--transition-fast: 100ms ease-out;
--transition-normal: 200ms ease-out;
--transition-slow: 300ms ease-out;
/* Z-index */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-toast: 1060;
}
/* Tablet */
@media (min-width: 768px) {
:root {
--font-size-display: 32px;
--font-size-h1: 28px;
--font-size-h2: 22px;
--font-size-h3: 20px;
--font-size-body-l: 18px;
--font-size-body-m: 16px;
--font-size-body-s: 14px;
}
}
/* Desktop */
@media (min-width: 1024px) {
:root {
--font-size-display: 36px;
--font-size-h1: 32px;
--font-size-h2: 24px;
}
}
/* ============================================
2. Reset & Base Styles
============================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: var(--font-family-base);
font-size: var(--font-size-body-m);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
color: var(--color-black);
background-color: var(--color-gray-100);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================
3. Typography System
============================================ */
.display {
font-size: var(--font-size-display);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: -0.5px;
}
h1, .h1 {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: -0.3px;
}
h2, .h2 {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-normal);
letter-spacing: -0.2px;
}
h3, .h3 {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
}
.body-l {
font-size: var(--font-size-body-l);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
}
.body-m {
font-size: var(--font-size-body-m);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
}
.body-s {
font-size: var(--font-size-body-s);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
}
/* ============================================
4. Layout
============================================ */
.container {
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) {
.container {
padding: 0 40px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1200px;
padding: 0 80px;
}
}
/* App Layout */
.app-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: var(--color-gray-100);
}
.app-content {
flex: 1;
padding-bottom: 80px; /* Bottom Navigation 공간 */
}
/* ============================================
5. Top App Bar
============================================ */
.app-bar {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-white);
border-bottom: 1px solid var(--color-gray-300);
height: 56px;
display: flex;
align-items: center;
padding: 0 var(--spacing-s);
}
.app-bar__back {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
cursor: pointer;
color: var(--color-gray-700);
border-radius: var(--radius-full);
transition: background-color var(--transition-fast);
}
.app-bar__back:hover {
background-color: var(--color-gray-100);
}
.app-bar__title {
flex: 1;
font-size: var(--font-size-h3);
font-weight: var(--font-weight-semibold);
text-align: center;
margin-right: 48px; /* 뒤로가기 버튼과 균형 */
}
/* ============================================
6. Bottom Navigation
============================================ */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-fixed);
background-color: var(--color-white);
border-top: 1px solid var(--color-gray-300);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
height: 60px;
display: flex;
}
.bottom-nav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
border: none;
background: none;
color: var(--color-gray-500);
cursor: pointer;
text-decoration: none;
transition: color var(--transition-fast);
min-width: 44px;
min-height: 44px;
}
.bottom-nav__item:hover {
color: var(--color-primary-main);
}
.bottom-nav__item.active {
color: var(--color-primary-main);
}
.bottom-nav__icon {
font-size: 24px;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
}
.bottom-nav__label {
font-size: var(--font-size-body-s);
font-weight: var(--font-weight-regular);
}
/* ============================================
7. Buttons
============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-s);
font-family: var(--font-family-base);
font-size: var(--font-size-button);
font-weight: var(--font-weight-semibold);
line-height: 1.5;
text-align: center;
text-decoration: none;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-normal);
min-width: 44px;
min-height: 44px;
}
.btn:disabled {
cursor: not-allowed;
opacity: 0.6;
}
/* Primary Button */
.btn-primary {
background-color: var(--color-primary-main);
color: var(--color-white);
box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-light);
}
.btn-primary:active:not(:disabled) {
background-color: var(--color-primary-dark);
transform: scale(0.95);
}
.btn-primary:disabled {
background-color: var(--color-gray-300);
color: var(--color-gray-500);
}
/* Secondary Button */
.btn-secondary {
background-color: var(--color-white);
color: var(--color-primary-main);
border: 2px solid var(--color-primary-main);
}
.btn-secondary:hover:not(:disabled) {
background-color: rgba(227, 30, 36, 0.05);
}
.btn-secondary:active:not(:disabled) {
background-color: rgba(227, 30, 36, 0.1);
transform: scale(0.95);
}
/* Text Button */
.btn-text {
background-color: transparent;
color: var(--color-primary-main);
}
.btn-text:hover:not(:disabled) {
background-color: rgba(227, 30, 36, 0.05);
}
/* Button Sizes */
.btn-lg {
padding: 16px 24px;
height: 48px;
}
.btn-md {
padding: 12px 20px;
height: 44px;
font-size: var(--font-size-body-m);
}
.btn-sm {
padding: 8px 16px;
height: 36px;
font-size: var(--font-size-body-s);
}
/* Full Width Button */
.btn-block {
width: 100%;
}
/* ============================================
8. Cards
============================================ */
.card {
background-color: var(--color-white);
border: 1px solid rgba(224, 224, 224, 1);
border-radius: var(--radius-md);
padding: var(--spacing-l);
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
}
.card:hover {
border-color: var(--color-primary-main);
box-shadow: var(--shadow-lg);
}
.card.selected {
border: 2px solid var(--color-primary-main);
background-color: rgba(227, 30, 36, 0.02);
}
.card__header {
margin-bottom: var(--spacing-m);
}
.card__title {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-s);
}
.card__body {
color: var(--color-gray-700);
font-size: var(--font-size-body-m);
}
.card__footer {
margin-top: var(--spacing-m);
padding-top: var(--spacing-m);
border-top: 1px solid var(--color-gray-300);
}
/* ============================================
9. Form Elements
============================================ */
.form-group {
margin-bottom: var(--spacing-m);
}
.form-label {
display: block;
font-size: var(--font-size-body-m);
font-weight: var(--font-weight-medium);
color: var(--color-black);
margin-bottom: var(--spacing-s);
}
.form-label.required::after {
content: '*';
color: var(--color-error);
margin-left: var(--spacing-xs);
}
.form-input {
width: 100%;
height: 48px;
padding: var(--spacing-m);
font-family: var(--font-family-base);
font-size: var(--font-size-body-l);
font-weight: var(--font-weight-regular);
color: var(--color-black);
background-color: var(--color-white);
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-sm);
transition: all var(--transition-normal);
}
.form-input::placeholder {
color: var(--color-gray-500);
}
.form-input:focus {
outline: none;
border: 2px solid var(--color-secondary-main);
box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
}
.form-input:disabled {
background-color: var(--color-gray-100);
color: var(--color-gray-500);
cursor: not-allowed;
}
.form-input.error {
border: 2px solid var(--color-error);
box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.1);
}
.form-error {
display: block;
margin-top: var(--spacing-s);
font-size: var(--font-size-body-s);
color: var(--color-error);
}
/* Textarea */
.form-textarea {
min-height: 120px;
resize: vertical;
padding: var(--spacing-m);
font-size: var(--font-size-body-m);
line-height: var(--line-height-relaxed);
}
/* Checkbox & Radio */
.form-check {
display: flex;
align-items: center;
gap: var(--spacing-s);
cursor: pointer;
min-height: 44px;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
width: 24px;
height: 24px;
cursor: pointer;
accent-color: var(--color-primary-main);
}
/* ============================================
10. Progress & Loading
============================================ */
.progress-bar {
width: 100%;
height: 8px;
background-color: var(--color-gray-100);
border-radius: 4px;
overflow: hidden;
}
.progress-bar__fill {
height: 100%;
background-color: var(--color-primary-main);
transition: width var(--transition-slow);
}
.spinner {
width: 32px;
height: 32px;
border: 3px solid var(--color-gray-100);
border-top-color: var(--color-primary-main);
border-radius: var(--radius-full);
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
}
/* ============================================
11. Toast Notification
============================================ */
.toast {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
z-index: var(--z-toast);
background-color: rgba(26, 26, 26, 0.9);
color: var(--color-white);
padding: var(--spacing-m) var(--spacing-l);
border-radius: var(--radius-sm);
font-size: var(--font-size-body-m);
box-shadow: var(--shadow-xl);
animation: toast-show 200ms ease-out;
max-width: calc(100% - 40px);
}
@keyframes toast-show {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.toast.hide {
animation: toast-hide 200ms ease-in forwards;
}
@keyframes toast-hide {
to {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
}
/* ============================================
12. Modal
============================================ */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: var(--z-modal-backdrop);
animation: fade-in 250ms ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: var(--z-modal);
background-color: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--spacing-l);
max-width: 400px;
width: calc(100% - 40px);
box-shadow: var(--shadow-xl);
animation: modal-show 250ms ease-out;
}
@keyframes modal-show {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.95);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-m);
}
.modal__title {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
}
.modal__close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
cursor: pointer;
color: var(--color-gray-700);
border-radius: var(--radius-full);
transition: background-color var(--transition-fast);
}
.modal__close:hover {
background-color: var(--color-gray-100);
}
.modal__body {
margin-bottom: var(--spacing-l);
color: var(--color-gray-700);
}
.modal__footer {
display: flex;
gap: var(--spacing-s);
justify-content: flex-end;
}
/* ============================================
13. Bottom Sheet
============================================ */
.bottom-sheet-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: var(--z-modal-backdrop);
animation: fade-in 300ms ease-out;
}
.bottom-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-modal);
background-color: var(--color-white);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
animation: slide-up 300ms ease-out;
}
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.bottom-sheet__handle {
width: 40px;
height: 4px;
background-color: var(--color-gray-300);
border-radius: 2px;
margin: var(--spacing-m) auto;
}
.bottom-sheet__content {
padding: 0 var(--spacing-l) var(--spacing-l);
}
/* ============================================
14. Utility Classes
============================================ */
/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
/* Flex */
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.align-center { align-items: center !important; }
.gap-xs { gap: var(--spacing-xs) !important; }
.gap-s { gap: var(--spacing-s) !important; }
.gap-m { gap: var(--spacing-m) !important; }
.gap-l { gap: var(--spacing-l) !important; }
/* Spacing */
.mt-s { margin-top: var(--spacing-s) !important; }
.mt-m { margin-top: var(--spacing-m) !important; }
.mt-l { margin-top: var(--spacing-l) !important; }
.mb-s { margin-bottom: var(--spacing-s) !important; }
.mb-m { margin-bottom: var(--spacing-m) !important; }
.mb-l { margin-bottom: var(--spacing-l) !important; }
.p-m { padding: var(--spacing-m) !important; }
.p-l { padding: var(--spacing-l) !important; }
/* Text */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-primary { color: var(--color-primary-main) !important; }
.text-secondary { color: var(--color-secondary-main) !important; }
.text-success { color: var(--color-success) !important; }
.text-error { color: var(--color-error) !important; }
.text-muted { color: var(--color-gray-500) !important; }
/* Background */
.bg-white { background-color: var(--color-white) !important; }
.bg-gray { background-color: var(--color-gray-100) !important; }
.bg-primary { background-color: var(--color-primary-main) !important; }
/* Border */
.border { border: 1px solid var(--color-gray-300) !important; }
.border-top { border-top: 1px solid var(--color-gray-300) !important; }
.border-bottom { border-bottom: 1px solid var(--color-gray-300) !important; }
/* Visibility */
.hidden { visibility: hidden !important; }
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ============================================
15. Accessibility
============================================ */
/* Focus Visible */
*:focus-visible {
outline: 2px solid var(--color-secondary-main);
outline-offset: 2px;
}
/* Skip Link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background-color: var(--color-primary-main);
color: var(--color-white);
padding: var(--spacing-s) var(--spacing-m);
text-decoration: none;
z-index: 9999;
}
.skip-link:focus {
top: 0;
}
/* ============================================
16. Animations
============================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

552
design/uiux/prototype/js/common.js vendored Normal file
View File

@ -0,0 +1,552 @@
/**
* KT AI 기반 소상공인 이벤트 자동 생성 서비스
* 공통 JavaScript 유틸리티
*
* 작성일: 2025-01-20
* 버전: 1.0
*/
(function() {
'use strict';
// ============================================
// 1. 상태 관리
// ============================================
window.AppState = {
// 사용자 정보
user: null,
// 매장 정보
store: null,
// 현재 이벤트 정보
currentEvent: null,
// localStorage에서 데이터 로드
load() {
try {
this.user = JSON.parse(localStorage.getItem('kt_user') || 'null');
this.store = JSON.parse(localStorage.getItem('kt_store') || 'null');
this.currentEvent = JSON.parse(localStorage.getItem('kt_current_event') || 'null');
} catch (e) {
console.error('Failed to load app state:', e);
}
},
// localStorage에 데이터 저장
save() {
try {
localStorage.setItem('kt_user', JSON.stringify(this.user));
localStorage.setItem('kt_store', JSON.stringify(this.store));
localStorage.setItem('kt_current_event', JSON.stringify(this.currentEvent));
} catch (e) {
console.error('Failed to save app state:', e);
}
},
// 상태 초기화
clear() {
this.user = null;
this.store = null;
this.currentEvent = null;
localStorage.removeItem('kt_user');
localStorage.removeItem('kt_store');
localStorage.removeItem('kt_current_event');
}
};
// 페이지 로드 시 상태 복원
document.addEventListener('DOMContentLoaded', function() {
window.AppState.load();
});
// ============================================
// 2. Toast 알림
// ============================================
window.Toast = {
show(message, duration = 3000) {
// 기존 토스트 제거
const existingToast = document.querySelector('.toast');
if (existingToast) {
existingToast.remove();
}
// 새 토스트 생성
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = message;
toast.setAttribute('role', 'status');
toast.setAttribute('aria-live', 'polite');
document.body.appendChild(toast);
// 자동 제거
setTimeout(() => {
toast.classList.add('hide');
setTimeout(() => {
toast.remove();
}, 200);
}, duration);
},
success(message) {
this.show('✓ ' + message);
},
error(message) {
this.show('✕ ' + message);
},
info(message) {
this.show('ℹ ' + message);
}
};
// ============================================
// 3. Modal 다이얼로그
// ============================================
window.Modal = {
show(options) {
const {
title = '',
body = '',
confirmText = '확인',
cancelText = '취소',
onConfirm = () => {},
onCancel = () => {},
showCancel = true
} = options;
// 백드롭 생성
const backdrop = document.createElement('div');
backdrop.className = 'modal-backdrop';
// 모달 생성
const modal = document.createElement('div');
modal.className = 'modal';
modal.setAttribute('role', 'dialog');
modal.setAttribute('aria-labelledby', 'modal-title');
modal.setAttribute('aria-modal', 'true');
modal.innerHTML = `
<div class="modal__header">
<h2 class="modal__title" id="modal-title">${title}</h2>
<button class="modal__close" aria-label="닫기">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal__body">
${body}
</div>
<div class="modal__footer">
${showCancel ? `<button class="btn btn-secondary btn-md modal__cancel">${cancelText}</button>` : ''}
<button class="btn btn-primary btn-md modal__confirm">${confirmText}</button>
</div>
`;
// 닫기 함수
const close = () => {
backdrop.remove();
modal.remove();
document.body.style.overflow = '';
};
// 이벤트 리스너
modal.querySelector('.modal__close').addEventListener('click', () => {
close();
onCancel();
});
if (showCancel) {
modal.querySelector('.modal__cancel').addEventListener('click', () => {
close();
onCancel();
});
}
modal.querySelector('.modal__confirm').addEventListener('click', () => {
close();
onConfirm();
});
backdrop.addEventListener('click', (e) => {
if (e.target === backdrop) {
close();
onCancel();
}
});
// 추가
document.body.appendChild(backdrop);
document.body.appendChild(modal);
document.body.style.overflow = 'hidden';
// 첫 번째 버튼에 포커스
modal.querySelector('button').focus();
},
confirm(title, body, onConfirm) {
this.show({
title,
body,
confirmText: '확인',
cancelText: '취소',
onConfirm,
showCancel: true
});
},
alert(title, body, onConfirm = () => {}) {
this.show({
title,
body,
confirmText: '확인',
onConfirm,
showCancel: false
});
}
};
// ============================================
// 4. Bottom Sheet
// ============================================
window.BottomSheet = {
show(content, options = {}) {
const {
onClose = () => {}
} = options;
// 백드롭 생성
const backdrop = document.createElement('div');
backdrop.className = 'bottom-sheet-backdrop';
// Bottom Sheet 생성
const sheet = document.createElement('div');
sheet.className = 'bottom-sheet';
sheet.setAttribute('role', 'dialog');
sheet.setAttribute('aria-modal', 'true');
sheet.innerHTML = `
<div class="bottom-sheet__handle"></div>
<div class="bottom-sheet__content">
${content}
</div>
`;
// 닫기 함수
const close = () => {
backdrop.remove();
sheet.remove();
document.body.style.overflow = '';
onClose();
};
// 이벤트 리스너
backdrop.addEventListener('click', close);
// Handle 드래그로 닫기 (간단한 구현)
let startY = 0;
const handle = sheet.querySelector('.bottom-sheet__handle');
handle.addEventListener('touchstart', (e) => {
startY = e.touches[0].clientY;
});
handle.addEventListener('touchend', (e) => {
const endY = e.changedTouches[0].clientY;
if (endY - startY > 50) { // 50px 이상 드래그하면 닫기
close();
}
});
// 추가
document.body.appendChild(backdrop);
document.body.appendChild(sheet);
document.body.style.overflow = 'hidden';
return { close };
}
};
// ============================================
// 5. 로딩 인디케이터
// ============================================
window.Loading = {
show(message = '처리중...') {
// 기존 로딩 제거
this.hide();
const overlay = document.createElement('div');
overlay.className = 'loading-overlay';
overlay.id = 'app-loading';
overlay.innerHTML = `
<div style="text-align: center; color: white;">
<div class="spinner" style="margin: 0 auto 16px;"></div>
<div class="body-m">${message}</div>
</div>
`;
document.body.appendChild(overlay);
document.body.style.overflow = 'hidden';
},
hide() {
const overlay = document.getElementById('app-loading');
if (overlay) {
overlay.remove();
document.body.style.overflow = '';
}
}
};
// ============================================
// 6. 폼 검증 유틸리티
// ============================================
window.FormValidator = {
// 이메일 검증
isValidEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
},
// 전화번호 검증 (010-XXXX-XXXX)
isValidPhone(phone) {
const re = /^010-\d{4}-\d{4}$/;
return re.test(phone);
},
// 사업자번호 검증 (XXX-XX-XXXXX)
isValidBusinessNumber(number) {
const re = /^\d{3}-\d{2}-\d{5}$/;
return re.test(number);
},
// 이름 검증 (2자 이상)
isValidName(name) {
return name && name.length >= 2;
},
// 필드에 에러 표시
showError(inputElement, message) {
inputElement.classList.add('error');
// 기존 에러 메시지 제거
const existingError = inputElement.parentElement.querySelector('.form-error');
if (existingError) {
existingError.remove();
}
// 새 에러 메시지 추가
if (message) {
const errorDiv = document.createElement('div');
errorDiv.className = 'form-error';
errorDiv.textContent = message;
errorDiv.setAttribute('role', 'alert');
inputElement.parentElement.appendChild(errorDiv);
}
},
// 필드에서 에러 제거
clearError(inputElement) {
inputElement.classList.remove('error');
const errorDiv = inputElement.parentElement.querySelector('.form-error');
if (errorDiv) {
errorDiv.remove();
}
},
// 전체 폼 검증
validateForm(formElement) {
let isValid = true;
const inputs = formElement.querySelectorAll('[required]');
inputs.forEach(input => {
if (!input.value.trim()) {
this.showError(input, '필수 입력 항목입니다.');
isValid = false;
} else {
this.clearError(input);
}
});
return isValid;
}
};
// ============================================
// 7. 네비게이션 유틸리티
// ============================================
window.Navigation = {
// 페이지 이동
goto(page) {
window.location.href = page;
},
// 뒤로가기
back() {
window.history.back();
},
// Bottom Navigation 활성화 상태 설정
updateBottomNav(activePage) {
const navItems = document.querySelectorAll('.bottom-nav__item');
navItems.forEach(item => {
if (item.getAttribute('data-page') === activePage) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
}
};
// ============================================
// 8. 유틸리티 함수
// ============================================
window.Utils = {
// 숫자 포맷 (1000 -> 1,000)
formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
},
// 날짜 포맷 (YYYY-MM-DD)
formatDate(date) {
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
},
// 날짜 포맷 (YYYY.MM.DD)
formatDateDot(date) {
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${year}.${month}.${day}`;
},
// 랜덤 ID 생성
generateId() {
return 'id-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
},
// Debounce 함수
debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
},
// AI 처리 시뮬레이션
simulateAI(duration = 3000) {
return new Promise(resolve => {
setTimeout(resolve, duration);
});
},
// 이미지 로드 체크
preloadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
});
}
};
// ============================================
// 9. 공통 이벤트 핸들러
// ============================================
// 뒤로가기 버튼
document.addEventListener('click', function(e) {
if (e.target.closest('.app-bar__back')) {
e.preventDefault();
window.Navigation.back();
}
});
// 입력 필드 실시간 검증
document.addEventListener('input', function(e) {
const input = e.target;
// 이메일 필드
if (input.type === 'email' && input.value) {
if (!window.FormValidator.isValidEmail(input.value)) {
window.FormValidator.showError(input, '올바른 이메일 형식을 입력하세요.');
} else {
window.FormValidator.clearError(input);
}
}
// 전화번호 필드
if (input.name === 'phone' && input.value) {
// 자동 하이픈 추가
let value = input.value.replace(/[^0-9]/g, '');
if (value.length > 3 && value.length <= 7) {
value = value.slice(0, 3) + '-' + value.slice(3);
} else if (value.length > 7) {
value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7, 11);
}
input.value = value;
// 검증
if (value.length === 13) {
if (!window.FormValidator.isValidPhone(value)) {
window.FormValidator.showError(input, '올바른 전화번호 형식을 입력하세요.');
} else {
window.FormValidator.clearError(input);
}
}
}
// 사업자번호 필드
if (input.name === 'business_number' && input.value) {
// 자동 하이픈 추가
let value = input.value.replace(/[^0-9]/g, '');
if (value.length > 3 && value.length <= 5) {
value = value.slice(0, 3) + '-' + value.slice(3);
} else if (value.length > 5) {
value = value.slice(0, 3) + '-' + value.slice(3, 5) + '-' + value.slice(5, 10);
}
input.value = value;
// 검증
if (value.length === 12) {
if (!window.FormValidator.isValidBusinessNumber(value)) {
window.FormValidator.showError(input, '올바른 사업자번호 형식을 입력하세요.');
} else {
window.FormValidator.clearError(input);
}
}
}
});
// Material Icons 로드 확인
if (!document.querySelector('link[href*="material-icons"]')) {
const link = document.createElement('link');
link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
link.rel = 'stylesheet';
document.head.appendChild(link);
}
// Pretendard 폰트 로드 확인
if (!document.querySelector('link[href*="pretendard"]')) {
const link = document.createElement('link');
link.href = 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css';
link.rel = 'stylesheet';
document.head.appendChild(link);
}
console.log('KT Event Marketing App - Common JS loaded');
})();