shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 06:46:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

템플릿 카드 배치 수정

Browse Source
This commit is contained in:
yabo0812 2025-10-24 15:58:15 +09:00
parent a1a33f89ff
commit 397689cc63
1 changed files with 54 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
design/uiux/prototype/04-템플릿선택.html
View File

@ -13,6 +13,32 @@
padding-bottom: 80px;
}
/* 템플릿 그리드 */
.template-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
/* 템플릿 카드 높이 균등 */
.template-list .card {
display: flex;
flex-direction: column;
height: 100%;
}
.template-list .card-body {
flex: 1;
}
/* 모바일: 작은 간격 */
@media (max-width: 767px) {
.template-list {
gap: var(--space-sm);
}
}
/* 데스크톱: 메인 콘텐츠 조정 */
@media (min-width: 768px) {
.main-content {
@ -41,18 +67,16 @@
<p class="text-muted">회의 유형에 맞는 템플릿을 선택하세요</p>
</div>
<!-- Template Cards -->
<div class="template-list" style="display: flex; flex-direction: column; gap: var(--space-md);">
<!-- Template Cards (2x2 grid) -->
<div class="template-list">
<!-- 일반 회의 템플릿 -->
<div class="card" style="cursor: pointer;" onclick="selectTemplate('general')">
<div class="card-header">
<div style="display: flex; align-items: center; gap: var(--space-md);">
<div style="font-size: 32px;">📋</div>
<div>
<h3 class="card-title">일반 회의</h3>
<p class="text-muted text-small">기본 회의록 형식</p>
</div>
<div class="card-header" style="display: block !important;">
<div style="margin-bottom: 4px;">
<span style="font-size: 20px;">📋</span>
<span style="font-size: 14px; font-weight: 600; margin-left: 4px;">일반 회의</span>
</div>
<div style="font-size: 11px; color: var(--text-muted);">기본 회의록 형식</div>
</div>
<div class="card-body">
<div class="text-small text-muted">
@ -63,21 +87,18 @@
</div>
</div>
<div class="card-footer">
<button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'general')">미리보기</button>
<button class="btn btn-primary btn-sm" onclick="selectTemplate('general')">선택</button>
<button class="btn btn-primary btn-sm" onclick="selectTemplate('general')" style="width: 100%;">선택</button>
</div>
</div>
<!-- 스크럼 회의 템플릿 -->
<div class="card" style="cursor: pointer;" onclick="selectTemplate('scrum')">
<div class="card-header">
<div style="display: flex; align-items: center; gap: var(--space-md);">
<div style="font-size: 32px;">🏃</div>
<div>
<h3 class="card-title">스크럼 회의</h3>
<p class="text-muted text-small">데일리 스탠드업 형식</p>
</div>
<div class="card-header" style="display: block !important;">
<div style="margin-bottom: 4px;">
<span style="font-size: 20px;">🏃</span>
<span style="font-size: 14px; font-weight: 600; margin-left: 4px;">스크럼 회의</span>
</div>
<div style="font-size: 11px; color: var(--text-muted);">데일리 스탠드업 형식</div>
</div>
<div class="card-body">
<div class="text-small text-muted">
@ -87,21 +108,18 @@
</div>
</div>
<div class="card-footer">
<button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'scrum')">미리보기</button>
<button class="btn btn-primary btn-sm" onclick="selectTemplate('scrum')">선택</button>
<button class="btn btn-primary btn-sm" onclick="selectTemplate('scrum')" style="width: 100%;">선택</button>
</div>
</div>
<!-- 킥오프 회의 템플릿 -->
<div class="card" style="cursor: pointer;" onclick="selectTemplate('kickoff')">
<div class="card-header">
<div style="display: flex; align-items: center; gap: var(--space-md);">
<div style="font-size: 32px;">🚀</div>
<div>
<h3 class="card-title">킥오프 회의</h3>
<p class="text-muted text-small">프로젝트 시작 회의</p>
</div>
<div class="card-header" style="display: block !important;">
<div style="margin-bottom: 4px;">
<span style="font-size: 20px;">🚀</span>
<span style="font-size: 14px; font-weight: 600; margin-left: 4px;">킥오프 회의</span>
</div>
<div style="font-size: 11px; color: var(--text-muted);">프로젝트 시작 회의</div>
</div>
<div class="card-body">
<div class="text-small text-muted">
@ -112,21 +130,18 @@
</div>
</div>
<div class="card-footer">
<button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'kickoff')">미리보기</button>
<button class="btn btn-primary btn-sm" onclick="selectTemplate('kickoff')">선택</button>
<button class="btn btn-primary btn-sm" onclick="selectTemplate('kickoff')" style="width: 100%;">선택</button>
</div>
</div>
<!-- 주간 회의 템플릿 -->
<div class="card" style="cursor: pointer;" onclick="selectTemplate('weekly')">
<div class="card-header">
<div style="display: flex; align-items: center; gap: var(--space-md);">
<div style="font-size: 32px;">📅</div>
<div>
<h3 class="card-title">주간 회의</h3>
<p class="text-muted text-small">주간 리뷰 및 계획</p>
</div>
<div class="card-header" style="display: block !important;">
<div style="margin-bottom: 4px;">
<span style="font-size: 20px;">📅</span>
<span style="font-size: 14px; font-weight: 600; margin-left: 4px;">주간 회의</span>
</div>
<div style="font-size: 11px; color: var(--text-muted);">주간 리뷰 및 계획</div>
</div>
<div class="card-body">
<div class="text-small text-muted">
@ -137,72 +152,12 @@
</div>
</div>
<div class="card-footer">
<button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'weekly')">미리보기</button>
<button class="btn btn-primary btn-sm" onclick="selectTemplate('weekly')">선택</button>
<button class="btn btn-primary btn-sm" onclick="selectTemplate('weekly')" style="width: 100%;">선택</button>
</div>
</div>
</div>
</main>
<!-- Template Preview Modal -->
<div id="previewModal" class="modal-overlay">
<div class="modal">
<div class="modal-header">
<h2 class="modal-title" id="previewTitle">템플릿 미리보기</h2>
<button class="modal-close" onclick="closeModal('previewModal')">✕</button>
</div>
<div class="modal-body">
<div id="previewContent" style="max-height: 400px; overflow-y: auto;">
<!-- 섹션 리스트가 여기에 표시됨 -->
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" onclick="closeModal('previewModal')">닫기</button>
<button class="btn btn-primary" onclick="customizeTemplate()">커스터마이징</button>
</div>
</div>
</div>
<!-- Template Customization Modal -->
<div id="customizeModal" class="modal-overlay">
<div class="modal">
<div class="modal-header">
<h2 class="modal-title">템플릿 커스터마이징</h2>
<button class="modal-close" onclick="closeModal('customizeModal')">✕</button>
</div>
<div class="modal-body">
<p class="text-small text-muted mb-md">섹션을 드래그하여 순서를 변경하거나 삭제할 수 있습니다</p>
<div id="sectionList" style="display: flex; flex-direction: column; gap: var(--space-sm);">
<!-- 섹션 목록이 여기에 표시됨 -->
</div>
<button class="btn btn-ghost mt-md" onclick="addSection()" style="width: 100%;">+ 섹션 추가</button>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" onclick="closeModal('customizeModal')">취소</button>
<button class="btn btn-primary" onclick="startMeeting()">이 템플릿으로 시작</button>
</div>
</div>
</div>
<!-- Add Section Modal -->
<div id="addSectionModal" class="modal-overlay">
<div class="modal">
<div class="modal-header">
<h2 class="modal-title">섹션 추가</h2>
<button class="modal-close" onclick="closeModal('addSectionModal')">✕</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="form-label">섹션 이름</label>
<input type="text" class="form-control" id="newSectionName" placeholder="예: 기술 검토">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" onclick="closeModal('addSectionModal')">취소</button>
<button class="btn btn-primary" onclick="confirmAddSection()">추가</button>
</div>
</div>
</div>
<script src="common.js"></script>
<script>
@ -230,35 +185,13 @@
}
};
let selectedTemplate = null;
let customSections = [];
// 템플릿 미리보기
function previewTemplate(event, templateId) {
event.stopPropagation();
const template = templates[templateId];
$('#previewTitle').textContent = template.name + ' 미리보기';
const content = template.sections.map((section, index) => `
<div class="list-item">
<span class="text-muted text-small">${index + 1}.</span>
<span class="list-item-title">${section}</span>
</div>
`).join('');
$('#previewContent').innerHTML = content;
openModal('previewModal');
}
// 템플릿 선택
function selectTemplate(templateId) {
selectedTemplate = templateId;
customSections = [...templates[templateId].sections];
const templateSections = [...templates[templateId].sections];
// 회의 진행 화면으로 이동
saveToStorage('selectedTemplate', templateId);
saveToStorage('templateSections', customSections);
saveToStorage('templateSections', templateSections);
navigateTo('05-회의진행.html');
}
@ -276,114 +209,6 @@
$('#skip-btn')?.addEventListener('click', () => {
skipTemplate();
});
// 커스터마이징 모달 열기
function customizeTemplate() {
closeModal('previewModal');
renderSectionList();
openModal('customizeModal');
}
// 섹션 리스트 렌더링
function renderSectionList() {
const sectionList = $('#sectionList');
sectionList.innerHTML = customSections.map((section, index) => `
<div class="list-item" draggable="true" data-index="${index}">
<span class="text-muted">☰</span>
<span class="list-item-title" style="flex: 1;">${section}</span>
<button class="btn btn-ghost btn-sm" onclick="removeSection(${index})">
<span style="color: var(--error);">✕</span>
</button>
</div>
`).join('');
// 드래그 이벤트 설정
setupDragAndDrop();
}
// 드래그 앤 드롭 설정
function setupDragAndDrop() {
const items = $$('#sectionList .list-item');
let draggedItem = null;
items.forEach(item => {
item.addEventListener('dragstart', function() {
draggedItem = this;
this.style.opacity = '0.5';
});
item.addEventListener('dragend', function() {
this.style.opacity = '1';
});
item.addEventListener('dragover', function(e) {
e.preventDefault();
});
item.addEventListener('drop', function(e) {
e.preventDefault();
if (draggedItem !== this) {
const draggedIndex = parseInt(draggedItem.dataset.index);
const targetIndex = parseInt(this.dataset.index);
const temp = customSections[draggedIndex];
customSections.splice(draggedIndex, 1);
customSections.splice(targetIndex, 0, temp);
renderSectionList();
}
});
});
}
// 섹션 삭제
function removeSection(index) {
if (customSections.length <= 1) {
showToast('최소 1개의 섹션이 필요합니다', 'error');
return;
}
customSections.splice(index, 1);
renderSectionList();
}
// 섹션 추가 모달 열기
function addSection() {
openModal('addSectionModal');
$('#newSectionName').value = '';
$('#newSectionName').focus();
}
// 섹션 추가 확인
function confirmAddSection() {
const name = $('#newSectionName').value.trim();
if (!name) {
showToast('섹션 이름을 입력해주세요', 'error');
return;
}
customSections.push(name);
renderSectionList();
closeModal('addSectionModal');
showToast('섹션이 추가되었습니다', 'success');
}
// 회의 시작
function startMeeting() {
if (customSections.length === 0) {
showToast('최소 1개의 섹션이 필요합니다', 'error');
return;
}
saveToStorage('selectedTemplate', selectedTemplate);
saveToStorage('templateSections', customSections);
navigateTo('05-회의진행.html');
}
// Enter 키로 섹션 추가
$('#addSectionModal')?.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
confirmAddSection();
}
});
</script>
</body>
</html>