mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 14:56:23 +00:00
bb921e10eb
- 가파팀 프로토타입 파일 삭제 - 가파팀 유저스토리 삭제 - 실시간 회의록 작성 플로우 설계서 추가 (Mermaid, Markdown) - 백업 및 데이터 디렉토리 추가 - AI 데이터 샘플 생성 도구 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
317 lines
11 KiB
HTML
317 lines
11 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: 800px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-8) var(--spacing-4);
|
|
}
|
|
.success-icon {
|
|
text-align: center;
|
|
font-size: 80px;
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
.page-title {
|
|
font-size: var(--font-size-h1);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-3);
|
|
text-align: center;
|
|
}
|
|
.page-subtitle {
|
|
font-size: var(--font-size-body);
|
|
color: var(--color-gray-500);
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
.share-card {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-6);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
.share-title {
|
|
font-size: var(--font-size-h4);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
.share-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-4);
|
|
margin-bottom: var(--spacing-3);
|
|
background: var(--color-gray-50);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: background-color var(--transition-fast);
|
|
}
|
|
.share-option:hover {
|
|
background: var(--color-gray-100);
|
|
}
|
|
.share-icon {
|
|
font-size: 32px;
|
|
}
|
|
.share-info {
|
|
flex: 1;
|
|
}
|
|
.share-label {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
.share-desc {
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
.link-box {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
align-items: center;
|
|
}
|
|
.link-input {
|
|
flex: 1;
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
border: 1px solid var(--color-gray-300);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-body-small);
|
|
background-color: var(--color-gray-50);
|
|
font-family: monospace;
|
|
}
|
|
.attendee-list {
|
|
margin-top: var(--spacing-4);
|
|
}
|
|
.attendee-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3);
|
|
margin-bottom: var(--spacing-2);
|
|
background: var(--color-gray-50);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.attendee-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-full);
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
.attendee-info {
|
|
flex: 1;
|
|
}
|
|
.attendee-name {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-gray-900);
|
|
}
|
|
.attendee-email {
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
.sent-badge {
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
background-color: var(--color-success-light);
|
|
color: var(--color-success-dark);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-3);
|
|
justify-content: center;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.success-icon { font-size: 60px; }
|
|
.page-title { font-size: var(--font-size-h2); }
|
|
.action-buttons { flex-direction: column; }
|
|
.action-buttons .btn { width: 100%; }
|
|
.link-box { flex-direction: column; }
|
|
.link-input { width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-container">
|
|
<div class="success-icon">🎉</div>
|
|
<h1 class="page-title">회의록이 확정되었습니다</h1>
|
|
<p class="page-subtitle">이제 참석자들과 회의록을 공유하세요</p>
|
|
|
|
<!-- 공유 링크 -->
|
|
<div class="share-card">
|
|
<h2 class="share-title">공유 링크</h2>
|
|
<div class="link-box">
|
|
<input type="text" class="link-input" id="shareLink" value="https://meeting.example.com/share/m-001-abc123" readonly>
|
|
<button class="btn btn-primary" onclick="copyLink()">복사</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 공유 방식 -->
|
|
<div class="share-card">
|
|
<h2 class="share-title">공유 방식 선택</h2>
|
|
|
|
<div class="share-option" onclick="shareViaEmail()">
|
|
<div class="share-icon">📧</div>
|
|
<div class="share-info">
|
|
<div class="share-label">이메일로 공유</div>
|
|
<div class="share-desc">참석자들에게 이메일을 발송합니다</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="share-option" onclick="shareViaSlack()">
|
|
<div class="share-icon">💬</div>
|
|
<div class="share-info">
|
|
<div class="share-label">슬랙으로 공유</div>
|
|
<div class="share-desc">슬랙 채널에 회의록을 공유합니다</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="share-option" onclick="downloadPDF()">
|
|
<div class="share-icon">📄</div>
|
|
<div class="share-info">
|
|
<div class="share-label">PDF로 다운로드</div>
|
|
<div class="share-desc">회의록을 PDF 파일로 저장합니다</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 생성된 Todo -->
|
|
<div class="share-card">
|
|
<h2 class="share-title">생성된 Todo (3개)</h2>
|
|
<div class="attendee-list">
|
|
<div class="attendee-item">
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-3); flex: 1;">
|
|
<div class="attendee-avatar" style="background-color: var(--color-primary-main);">이</div>
|
|
<div class="attendee-info">
|
|
<div class="attendee-name">API 명세서 작성</div>
|
|
<div class="attendee-email" style="display: flex; align-items: center; gap: var(--spacing-2);">
|
|
<span>담당: 이준호</span> | <span>📅 3월 25일</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);">
|
|
<span class="sent-badge" style="background-color: var(--color-warning-light); color: var(--color-warning-dark);">진행중 60%</span>
|
|
<a href="09-Todo관리.html" style="font-size: var(--font-size-caption); color: var(--color-primary-main); text-decoration: none;">Todo 보기 →</a>
|
|
</div>
|
|
</div>
|
|
<div class="attendee-item">
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-3); flex: 1;">
|
|
<div class="attendee-avatar" style="background-color: var(--color-info-main);">최</div>
|
|
<div class="attendee-info">
|
|
<div class="attendee-name">UI 프로토타입 완성</div>
|
|
<div class="attendee-email" style="display: flex; align-items: center; gap: var(--spacing-2);">
|
|
<span>담당: 최유진</span> | <span>📅 3월 15일</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);">
|
|
<span class="sent-badge">완료 100%</span>
|
|
<a href="09-Todo관리.html" style="font-size: var(--font-size-caption); color: var(--color-primary-main); text-decoration: none;">Todo 보기 →</a>
|
|
</div>
|
|
</div>
|
|
<div class="attendee-item">
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-3); flex: 1;">
|
|
<div class="attendee-avatar" style="background-color: var(--color-secondary-main);">박</div>
|
|
<div class="attendee-info">
|
|
<div class="attendee-name">예산 편성안 검토</div>
|
|
<div class="attendee-email" style="display: flex; align-items: center; gap: var(--spacing-2);">
|
|
<span>담당: 박서연</span> | <span>📅 3월 20일</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);">
|
|
<span class="sent-badge" style="background-color: var(--color-error-light); color: var(--color-error-dark);">지연 30%</span>
|
|
<a href="09-Todo관리.html" style="font-size: var(--font-size-caption); color: var(--color-primary-main); text-decoration: none;">Todo 보기 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 참석자 목록 -->
|
|
<div class="share-card">
|
|
<h2 class="share-title">참석자 (3명)</h2>
|
|
<div class="attendee-list">
|
|
<div class="attendee-item">
|
|
<div class="attendee-avatar">김</div>
|
|
<div class="attendee-info">
|
|
<div class="attendee-name">김민준</div>
|
|
<div class="attendee-email">minjun.kim@example.com</div>
|
|
</div>
|
|
<span class="sent-badge">발송 완료</span>
|
|
</div>
|
|
<div class="attendee-item">
|
|
<div class="attendee-avatar" style="background-color: var(--color-secondary-main);">박</div>
|
|
<div class="attendee-info">
|
|
<div class="attendee-name">박서연</div>
|
|
<div class="attendee-email">seoyeon.park@example.com</div>
|
|
</div>
|
|
<span class="sent-badge">발송 완료</span>
|
|
</div>
|
|
<div class="attendee-item">
|
|
<div class="attendee-avatar" style="background-color: var(--color-info-main);">이</div>
|
|
<div class="attendee-info">
|
|
<div class="attendee-name">이준호</div>
|
|
<div class="attendee-email">junho.lee@example.com</div>
|
|
</div>
|
|
<span class="sent-badge">발송 완료</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 액션 버튼 -->
|
|
<div class="action-buttons">
|
|
<button class="btn btn-secondary" onclick="window.location.href='02-대시보드.html'">
|
|
대시보드로 이동
|
|
</button>
|
|
<button class="btn btn-primary" onclick="window.location.href='09-Todo관리.html'">
|
|
Todo 관리하기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="common.js"></script>
|
|
<script>
|
|
function copyLink() {
|
|
const linkInput = document.getElementById('shareLink');
|
|
linkInput.select();
|
|
document.execCommand('copy');
|
|
MeetingApp.Toast.success('링크가 복사되었습니다');
|
|
}
|
|
|
|
function shareViaEmail() {
|
|
MeetingApp.Loading.show();
|
|
setTimeout(() => {
|
|
MeetingApp.Loading.hide();
|
|
MeetingApp.Toast.success('이메일이 발송되었습니다');
|
|
}, 1500);
|
|
}
|
|
|
|
function shareViaSlack() {
|
|
MeetingApp.Loading.show();
|
|
setTimeout(() => {
|
|
MeetingApp.Loading.hide();
|
|
MeetingApp.Toast.success('슬랙에 공유되었습니다');
|
|
}, 1500);
|
|
}
|
|
|
|
function downloadPDF() {
|
|
MeetingApp.Toast.info('PDF 파일을 준비 중입니다...');
|
|
setTimeout(() => {
|
|
MeetingApp.Toast.success('PDF 다운로드가 시작되었습니다');
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|