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

prototype 05060910 edit

Browse Source
This commit is contained in:
cherry2250 2025-10-21 16:21:19 +09:00
parent 29387e1cfb
commit 4846ebdbdf
4 changed files with 74 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
design/uiux/prototype/05-대시보드.html
View File

@ -34,7 +34,7 @@
<div class="flex items-center justify-between mb-md">
<h3 class="text-headline">빠른 시작</h3>
</div>
<div class="grid grid-cols-2 gap-sm tablet:grid-cols-4">
<div class="grid grid-cols-2 gap-sm">
<button class="card card-clickable p-md" id="createEvent">
<span class="material-icons text-kt-red" style="font-size: 32px;">add_circle</span>
<p class="text-body-small mt-sm">새 이벤트</p>

2
design/uiux/prototype/09-콘텐츠미리보기.html
View File

@ -85,7 +85,7 @@
<!-- Header -->
<div id="header"></div>
<div class="container" style="max-width: 800px">
<div class="container" style="max-width: 600px">
<!-- Loading State -->
<div id="loadingState" class="text-center mt-2xl mb-2xl">
<span

70
design/uiux/prototype/10-콘텐츠편집.html
View File

@ -50,7 +50,7 @@
<!-- Header -->
<div id="header"></div>
<div class="container" style="max-width: 1000px;">
<div class="container" style="max-width: 800px;">
<!-- Desktop Layout: Side-by-side -->
<div class="grid desktop:grid-cols-2 gap-lg mt-lg mb-2xl">
<!-- Preview Section -->
@ -96,74 +96,6 @@
</div>
</div>
<!-- Color Adjustment -->
<div class="card mb-md">
<h4 class="text-headline mb-md">
<span class="material-icons" style="vertical-align: middle;">palette</span>
색상 조정
</h4>
<div class="form-group">
<label class="form-label">배경색</label>
<div class="color-picker-wrapper">
<div class="color-swatch" id="bgColorSwatch" onclick="document.getElementById('bgColorInput').click()" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
<input type="color" id="bgColorInput" value="#667eea">
<span class="text-body-small text-secondary">클릭하여 선택</span>
</div>
</div>
<div class="form-group">
<label class="form-label">텍스트색</label>
<div class="color-picker-wrapper">
<div class="color-swatch" id="textColorSwatch" onclick="document.getElementById('textColorInput').click()" style="background: #ffffff;"></div>
<input type="color" id="textColorInput" value="#ffffff">
<span class="text-body-small text-secondary">클릭하여 선택</span>
</div>
</div>
<div class="form-group">
<label class="form-label">강조색</label>
<div class="color-picker-wrapper">
<div class="color-swatch" id="accentColorSwatch" onclick="document.getElementById('accentColorInput').click()" style="background: #E31E24;"></div>
<input type="color" id="accentColorInput" value="#E31E24">
<span class="text-body-small text-secondary">클릭하여 선택</span>
</div>
</div>
</div>
<!-- Logo Position -->
<div class="card mb-md">
<h4 class="text-headline mb-md">
<span class="material-icons" style="vertical-align: middle;">business</span>
로고 위치
</h4>
<div class="form-group">
<label class="form-label">위치 이동</label>
<div class="logo-controls">
<button class="btn btn-secondary btn-small" onclick="moveLogo('left')">
<span class="material-icons">chevron_left</span>
</button>
<span class="text-body-small text-secondary flex-1 text-center">좌/우 이동</span>
<button class="btn btn-secondary btn-small" onclick="moveLogo('right')">
<span class="material-icons">chevron_right</span>
</button>
</div>
</div>
<div class="form-group">
<label class="form-label">크기 조절</label>
<div class="logo-controls">
<button class="btn btn-secondary btn-small" onclick="resizeLogo(-1)">
<span class="material-icons">remove</span>
</button>
<span class="text-body-small text-secondary flex-1 text-center" id="logoSize">중간</span>
<button class="btn btn-secondary btn-small" onclick="resizeLogo(1)">
<span class="material-icons">add</span>
</button>
</div>
</div>
</div>
</section>
</div>

72
design/uiux/prototype/11-배포채널선택.html
View File

@ -273,6 +273,75 @@
updateSummary();
});
// SNS 예약 게시 선택 시 모달 표시
let scheduledDateTime = null;
document.getElementById('snsSchedule').addEventListener('change', function() {
if (this.value === 'schedule') {
showScheduleModal();
}
});
function showScheduleModal() {
// 현재 날짜/시간 기본값 설정
const now = new Date();
const tomorrow = new Date(now);
tomorrow.setDate(tomorrow.getDate() + 1);
const dateStr = tomorrow.toISOString().split('T')[0];
const timeStr = '09:00';
KTEventApp.Feedback.showModal({
title: '예약 배포 설정',
content: `
<div class="form-group">
<label class="form-label">배포 날짜</label>
<input type="date" id="scheduleDate" class="form-input" value="${dateStr}" min="${dateStr}">
</div>
<div class="form-group">
<label class="form-label">배포 시간</label>
<input type="time" id="scheduleTime" class="form-input" value="${timeStr}">
</div>
<p class="text-body-small text-secondary mt-md">
* 설정한 시간에 자동으로 SNS에 게시됩니다
</p>
`,
buttons: [
{
text: '취소',
variant: 'text',
onClick: function() {
// 즉시로 되돌리기
document.getElementById('snsSchedule').value = 'now';
scheduledDateTime = null;
this.closest('.modal-backdrop').remove();
}
},
{
text: '확인',
variant: 'primary',
onClick: function() {
const date = document.getElementById('scheduleDate').value;
const time = document.getElementById('scheduleTime').value;
if (!date || !time) {
KTEventApp.Feedback.showToast('날짜와 시간을 모두 입력해주세요');
return;
}
scheduledDateTime = {
date: date,
time: time,
datetime: `${date} ${time}`
};
KTEventApp.Feedback.showToast(`${date} ${time}에 배포 예약되었습니다`);
this.closest('.modal-backdrop').remove();
}
}
]
});
}
// 요약 업데이트
function updateSummary() {
let totalCost = 0;
@ -337,7 +406,8 @@
instagram: document.getElementById('snsInstagram').checked,
naver: document.getElementById('snsNaver').checked,
kakao: document.getElementById('snsKakao').checked,
schedule: document.getElementById('snsSchedule').value
schedule: document.getElementById('snsSchedule').value,
scheduledDateTime: scheduledDateTime
} : null
};