mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 10:16:24 +00:00
bb921e10eb
- 가파팀 프로토타입 파일 삭제 - 가파팀 유저스토리 삭제 - 실시간 회의록 작성 플로우 설계서 추가 (Mermaid, Markdown) - 백업 및 데이터 디렉토리 추가 - AI 데이터 샘플 생성 도구 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
236 lines
7.7 KiB
HTML
236 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>템플릿 선택 - 회의록 서비스</title>
|
|
<link rel="stylesheet" href="common.css">
|
|
<style>
|
|
body { background-color: var(--color-gray-50); }
|
|
.page-container {
|
|
max-width: 1024px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-8) var(--spacing-4);
|
|
}
|
|
.page-header {
|
|
margin-bottom: var(--spacing-8);
|
|
text-align: center;
|
|
}
|
|
.page-title {
|
|
font-size: var(--font-size-h1);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
.page-subtitle {
|
|
font-size: var(--font-size-body);
|
|
color: var(--color-gray-500);
|
|
}
|
|
.template-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: var(--spacing-6);
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
.template-card {
|
|
background: var(--color-white);
|
|
border: 2px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-6);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
position: relative;
|
|
}
|
|
.template-card:hover {
|
|
border-color: var(--color-primary-main);
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-4px);
|
|
}
|
|
.template-card.selected {
|
|
border-color: var(--color-primary-main);
|
|
border-width: 3px;
|
|
background-color: rgba(0, 217, 177, 0.05);
|
|
}
|
|
.template-card.selected::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: var(--spacing-3);
|
|
right: var(--spacing-3);
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-full);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
.template-icon {
|
|
font-size: 48px;
|
|
margin-bottom: var(--spacing-4);
|
|
text-align: center;
|
|
}
|
|
.template-title {
|
|
font-size: var(--font-size-h4);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
.template-description {
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
line-height: var(--line-height-relaxed);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
.template-sections {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-1);
|
|
}
|
|
.section-tag {
|
|
font-size: var(--font-size-caption);
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
background-color: var(--color-gray-100);
|
|
color: var(--color-gray-600);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-3);
|
|
justify-content: center;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.page-title { font-size: var(--font-size-h2); }
|
|
.template-grid { grid-template-columns: 1fr; }
|
|
.action-buttons { flex-direction: column; }
|
|
.action-buttons .btn { width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-container">
|
|
<div class="page-header">
|
|
<h1 class="page-title">회의록 템플릿 선택</h1>
|
|
<p class="page-subtitle">회의 유형에 맞는 템플릿을 선택하여 효율적으로 회의록을 작성하세요</p>
|
|
</div>
|
|
|
|
<div class="template-grid">
|
|
<!-- 일반 회의 템플릿 -->
|
|
<div class="template-card" data-template="general">
|
|
<div class="template-icon">📋</div>
|
|
<h3 class="template-title">일반 회의</h3>
|
|
<p class="template-description">
|
|
가장 기본적인 회의록 형식입니다. 모든 유형의 회의에 적합합니다.
|
|
</p>
|
|
<div class="template-sections">
|
|
<span class="section-tag">참석자</span>
|
|
<span class="section-tag">안건</span>
|
|
<span class="section-tag">논의 내용</span>
|
|
<span class="section-tag">결정 사항</span>
|
|
<span class="section-tag">Todo</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 스크럼 회의 템플릿 -->
|
|
<div class="template-card" data-template="scrum">
|
|
<div class="template-icon">🏃</div>
|
|
<h3 class="template-title">스크럼 회의</h3>
|
|
<p class="template-description">
|
|
데일리 스탠드업이나 스프린트 회의에 최적화된 템플릿입니다.
|
|
</p>
|
|
<div class="template-sections">
|
|
<span class="section-tag">어제 한 일</span>
|
|
<span class="section-tag">오늘 할 일</span>
|
|
<span class="section-tag">이슈/블로커</span>
|
|
<span class="section-tag">다음 스프린트</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 프로젝트 킥오프 템플릿 -->
|
|
<div class="template-card" data-template="kickoff">
|
|
<div class="template-icon">🚀</div>
|
|
<h3 class="template-title">프로젝트 킥오프</h3>
|
|
<p class="template-description">
|
|
새 프로젝트 시작 시 필요한 모든 정보를 담는 템플릿입니다.
|
|
</p>
|
|
<div class="template-sections">
|
|
<span class="section-tag">프로젝트 개요</span>
|
|
<span class="section-tag">목표</span>
|
|
<span class="section-tag">일정</span>
|
|
<span class="section-tag">역할 분담</span>
|
|
<span class="section-tag">리스크</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 주간 회의 템플릿 -->
|
|
<div class="template-card" data-template="weekly">
|
|
<div class="template-icon">📅</div>
|
|
<h3 class="template-title">주간 회의</h3>
|
|
<p class="template-description">
|
|
매주 반복되는 정기 회의에 적합한 템플릿입니다.
|
|
</p>
|
|
<div class="template-sections">
|
|
<span class="section-tag">주간 실적</span>
|
|
<span class="section-tag">주요 이슈</span>
|
|
<span class="section-tag">다음 주 계획</span>
|
|
<span class="section-tag">공지사항</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button type="button" class="btn btn-secondary" onclick="history.back()">이전으로</button>
|
|
<button type="button" class="btn btn-primary" id="startMeetingBtn" disabled>
|
|
회의 시작하기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="common.js"></script>
|
|
<script>
|
|
let selectedTemplate = null;
|
|
const startBtn = document.getElementById('startMeetingBtn');
|
|
const templateCards = document.querySelectorAll('.template-card');
|
|
|
|
templateCards.forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
// 기존 선택 해제
|
|
templateCards.forEach(c => c.classList.remove('selected'));
|
|
|
|
// 새로운 선택
|
|
card.classList.add('selected');
|
|
selectedTemplate = card.getAttribute('data-template');
|
|
startBtn.disabled = false;
|
|
});
|
|
});
|
|
|
|
startBtn.addEventListener('click', () => {
|
|
if (!selectedTemplate) {
|
|
MeetingApp.Toast.warning('템플릿을 선택해주세요');
|
|
return;
|
|
}
|
|
|
|
// URL에서 meetingId 가져오기
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const meetingId = urlParams.get('meetingId');
|
|
|
|
// 선택한 템플릿 저장
|
|
MeetingApp.Storage.set('selectedTemplate', {
|
|
meetingId: meetingId,
|
|
template: selectedTemplate,
|
|
timestamp: new Date().toISOString()
|
|
});
|
|
|
|
MeetingApp.Toast.success('템플릿이 선택되었습니다');
|
|
|
|
setTimeout(() => {
|
|
window.location.href = '05-회의진행.html?meetingId=' + meetingId;
|
|
}, 500);
|
|
});
|
|
|
|
// 페이지 로드 시 일반 회의 템플릿 기본 선택 (선택적)
|
|
// templateCards[0].click();
|
|
</script>
|
|
</body>
|
|
</html>
|