mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 18:26:23 +00:00
bb921e10eb
- 가파팀 프로토타입 파일 삭제 - 가파팀 유저스토리 삭제 - 실시간 회의록 작성 플로우 설계서 추가 (Mermaid, Markdown) - 백업 및 데이터 디렉토리 추가 - AI 데이터 샘플 생성 도구 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
304 lines
9.5 KiB
HTML
304 lines
9.5 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: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-8) var(--spacing-4);
|
|
}
|
|
.page-header {
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
.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);
|
|
}
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: var(--spacing-6);
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
.preview-panel {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-6);
|
|
}
|
|
.preview-title {
|
|
font-size: var(--font-size-h3);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
.meeting-content {
|
|
font-size: var(--font-size-body);
|
|
line-height: var(--line-height-relaxed);
|
|
color: var(--color-gray-700);
|
|
}
|
|
.meeting-content h2 {
|
|
font-size: var(--font-size-h4);
|
|
margin-top: var(--spacing-6);
|
|
margin-bottom: var(--spacing-3);
|
|
color: var(--color-gray-900);
|
|
}
|
|
.meeting-content ul {
|
|
margin-left: var(--spacing-5);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
.checklist-panel {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-6);
|
|
height: fit-content;
|
|
}
|
|
.checklist-title {
|
|
font-size: var(--font-size-h4);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
.checklist-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3);
|
|
margin-bottom: var(--spacing-2);
|
|
background: var(--color-gray-50);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: background-color var(--transition-fast);
|
|
}
|
|
.checklist-item:hover {
|
|
background: var(--color-gray-100);
|
|
}
|
|
.checklist-item.checked {
|
|
background: rgba(0, 217, 177, 0.1);
|
|
}
|
|
.checklist-checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--color-gray-300);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.checklist-item.checked .checklist-checkbox {
|
|
background-color: var(--color-success-main);
|
|
border-color: var(--color-success-main);
|
|
color: var(--color-white);
|
|
}
|
|
.checklist-text {
|
|
flex: 1;
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-700);
|
|
}
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-3);
|
|
justify-content: center;
|
|
}
|
|
.warning-message {
|
|
background-color: var(--color-warning-light);
|
|
border-left: 4px solid var(--color-warning-main);
|
|
padding: var(--spacing-4);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: var(--spacing-4);
|
|
display: none;
|
|
}
|
|
.warning-message.show {
|
|
display: block;
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.content-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.page-title { font-size: var(--font-size-h2); }
|
|
.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 id="warningMessage" class="warning-message">
|
|
⚠️ 아래 필수 항목을 모두 확인해주세요.
|
|
</div>
|
|
|
|
<div class="content-grid">
|
|
<!-- 회의록 미리보기 -->
|
|
<div class="preview-panel">
|
|
<h2 class="preview-title">2025년 1분기 제품 기획 회의</h2>
|
|
<div class="meeting-content">
|
|
<p><strong>날짜:</strong> 2025-10-25 14:00<br>
|
|
<strong>장소:</strong> 본사 2층 대회의실<br>
|
|
<strong>참석자:</strong> 김민준, 박서연, 이준호</p>
|
|
|
|
<h2>안건</h2>
|
|
<ul>
|
|
<li>신규 기능 개발 일정 논의</li>
|
|
<li>예산 편성 검토</li>
|
|
</ul>
|
|
|
|
<h2>논의 내용</h2>
|
|
<p>신규 회의록 서비스의 핵심 기능에 대해 논의했습니다. AI 기반 자동 작성 기능과 실시간 협업 기능을 우선적으로 개발하기로 결정했습니다.</p>
|
|
|
|
<p>개발 일정은 3월 말 완료를 목표로 하며, 주요 마일스톤은 다음과 같습니다:</p>
|
|
<ul>
|
|
<li>3월 10일: 기본 UI 완성</li>
|
|
<li>3월 20일: AI 기능 통합</li>
|
|
<li>3월 30일: 베타 테스트 시작</li>
|
|
</ul>
|
|
|
|
<h2>결정 사항</h2>
|
|
<ul>
|
|
<li>신규 기능 개발은 3월 말 완료 목표</li>
|
|
<li>이준호님이 API 설계 담당</li>
|
|
<li>예산은 5천만원으로 확정</li>
|
|
</ul>
|
|
|
|
<h2>Todo</h2>
|
|
<ul>
|
|
<li>API 명세서 작성 (담당: 이준호, 마감: 3월 25일)</li>
|
|
<li>UI 프로토타입 완성 (담당: 최유진, 마감: 3월 15일)</li>
|
|
<li>예산 편성안 검토 (담당: 박서연, 마감: 3월 20일)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 확인 체크리스트 -->
|
|
<div class="checklist-panel">
|
|
<h3 class="checklist-title">필수 항목 확인</h3>
|
|
|
|
<div class="checklist-item" data-required="true">
|
|
<div class="checklist-checkbox"></div>
|
|
<div class="checklist-text">
|
|
<strong>회의 제목</strong><br>
|
|
회의 제목이 명확하게 작성되었습니다
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checklist-item" data-required="true">
|
|
<div class="checklist-checkbox"></div>
|
|
<div class="checklist-text">
|
|
<strong>참석자 목록</strong><br>
|
|
모든 참석자가 기록되었습니다
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checklist-item" data-required="true">
|
|
<div class="checklist-checkbox"></div>
|
|
<div class="checklist-text">
|
|
<strong>주요 논의 내용</strong><br>
|
|
핵심 논의 내용이 포함되었습니다
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checklist-item" data-required="true">
|
|
<div class="checklist-checkbox"></div>
|
|
<div class="checklist-text">
|
|
<strong>결정 사항</strong><br>
|
|
회의 중 결정된 사항이 명시되었습니다
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checklist-item">
|
|
<div class="checklist-checkbox"></div>
|
|
<div class="checklist-text">
|
|
<strong>Todo 생성</strong><br>
|
|
실행 항목이 Todo로 생성되었습니다
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checklist-item">
|
|
<div class="checklist-checkbox"></div>
|
|
<div class="checklist-text">
|
|
<strong>전문용어 설명</strong><br>
|
|
필요한 용어에 설명이 추가되었습니다
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 액션 버튼 -->
|
|
<div class="action-buttons">
|
|
<button class="btn btn-secondary" onclick="history.back()">이전으로</button>
|
|
<button class="btn btn-primary" id="confirmBtn" disabled>회의록 확정하기</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="common.js"></script>
|
|
<script>
|
|
const checklistItems = document.querySelectorAll('.checklist-item');
|
|
const confirmBtn = document.getElementById('confirmBtn');
|
|
const warningMessage = document.getElementById('warningMessage');
|
|
|
|
// 체크리스트 항목 클릭
|
|
checklistItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
item.classList.toggle('checked');
|
|
const checkbox = item.querySelector('.checklist-checkbox');
|
|
if (item.classList.contains('checked')) {
|
|
checkbox.textContent = '✓';
|
|
} else {
|
|
checkbox.textContent = '';
|
|
}
|
|
checkCompletion();
|
|
});
|
|
});
|
|
|
|
// 완료 여부 확인
|
|
function checkCompletion() {
|
|
const requiredItems = document.querySelectorAll('.checklist-item[data-required="true"]');
|
|
const checkedRequired = document.querySelectorAll('.checklist-item[data-required="true"].checked');
|
|
|
|
if (requiredItems.length === checkedRequired.length) {
|
|
confirmBtn.disabled = false;
|
|
warningMessage.classList.remove('show');
|
|
} else {
|
|
confirmBtn.disabled = true;
|
|
warningMessage.classList.add('show');
|
|
}
|
|
}
|
|
|
|
// 확정 버튼 클릭
|
|
confirmBtn.addEventListener('click', () => {
|
|
MeetingApp.Loading.show();
|
|
|
|
setTimeout(() => {
|
|
MeetingApp.Loading.hide();
|
|
MeetingApp.Toast.success('회의록이 확정되었습니다!');
|
|
|
|
setTimeout(() => {
|
|
window.location.href = '09-회의록공유.html';
|
|
}, 1000);
|
|
}, 1500);
|
|
});
|
|
|
|
// 초기 확인
|
|
checkCompletion();
|
|
</script>
|
|
</body>
|
|
</html>
|