mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 10:16:24 +00:00
솔루션 후보 문서 추가 및 Claude 설정 업데이트
- 회의록 작성 개선을 위한 솔루션 후보 5개 작성 - 각 솔루션별 구현 방법 및 검증 방안 포함 - Claude Code 로컬 설정 파일 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
djeon
parent
8265eb5f8e
commit
c72c4dc0e1
307
design/uiux/prototype/01-로그인.html
Normal file
307
design/uiux/prototype/01-로그인.html
Normal file
@ -0,0 +1,307 @@
|
|||||||
|
<!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 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #4DFFDB 0%, #00D9B1 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: var(--spacing-12);
|
||||||
|
max-width: 400px;
|
||||||
|
width: 90%;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-large {
|
||||||
|
font-size: 3rem;
|
||||||
|
color: var(--primary-main);
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
font: var(--font-h2);
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-subtitle {
|
||||||
|
font: var(--font-body);
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-toggle {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-toggle-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: var(--spacing-3);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--gray-500);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password {
|
||||||
|
color: var(--primary-main);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
text-align: center;
|
||||||
|
margin: var(--spacing-6) 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider::before,
|
||||||
|
.divider::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 45%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider::before { left: 0; }
|
||||||
|
.divider::after { right: 0; }
|
||||||
|
|
||||||
|
.divider-text {
|
||||||
|
background-color: white;
|
||||||
|
padding: 0 var(--spacing-3);
|
||||||
|
color: var(--gray-500);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-login {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn {
|
||||||
|
flex: 1;
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
border: 1px solid var(--gray-300);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background-color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn:hover {
|
||||||
|
background-color: var(--gray-50);
|
||||||
|
border-color: var(--gray-400);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="login-container">
|
||||||
|
<div class="login-header">
|
||||||
|
<div class="logo-large">📝</div>
|
||||||
|
<h1 class="login-title">회의록 작성 서비스</h1>
|
||||||
|
<p class="login-subtitle">AI와 함께하는 스마트한 회의록 관리</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="login-form" id="loginForm">
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="email" class="input-label">이메일</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
class="input"
|
||||||
|
placeholder="example@company.com"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<span class="input-error hidden" id="emailError"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="password" class="input-label">비밀번호</label>
|
||||||
|
<div class="password-toggle">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
class="input"
|
||||||
|
placeholder="비밀번호를 입력하세요"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="password-toggle-btn"
|
||||||
|
id="togglePassword"
|
||||||
|
aria-label="비밀번호 표시/숨김"
|
||||||
|
>
|
||||||
|
👁️
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span class="input-error hidden" id="passwordError"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login-options">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<input type="checkbox" id="rememberMe">
|
||||||
|
<span>로그인 상태 유지</span>
|
||||||
|
</label>
|
||||||
|
<a href="#" class="forgot-password">비밀번호 찾기</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg">
|
||||||
|
로그인
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="divider">
|
||||||
|
<span class="divider-text">또는</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="social-login">
|
||||||
|
<button class="social-btn" id="googleLogin">
|
||||||
|
<span>🔵</span>
|
||||||
|
<span>Google</span>
|
||||||
|
</button>
|
||||||
|
<button class="social-btn" id="microsoftLogin">
|
||||||
|
<span>🟦</span>
|
||||||
|
<span>Microsoft</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="common.js"></script>
|
||||||
|
<script>
|
||||||
|
// 비밀번호 표시/숨김 토글
|
||||||
|
document.getElementById('togglePassword').addEventListener('click', function() {
|
||||||
|
const passwordInput = document.getElementById('password');
|
||||||
|
const type = passwordInput.type === 'password' ? 'text' : 'password';
|
||||||
|
passwordInput.type = type;
|
||||||
|
this.textContent = type === 'password' ? '👁️' : '👁️🗨️';
|
||||||
|
});
|
||||||
|
|
||||||
|
// 로그인 폼 제출
|
||||||
|
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const email = document.getElementById('email').value;
|
||||||
|
const password = document.getElementById('password').value;
|
||||||
|
const rememberMe = document.getElementById('rememberMe').checked;
|
||||||
|
|
||||||
|
// 간단한 검증
|
||||||
|
const emailError = document.getElementById('emailError');
|
||||||
|
const passwordError = document.getElementById('passwordError');
|
||||||
|
|
||||||
|
emailError.classList.add('hidden');
|
||||||
|
passwordError.classList.add('hidden');
|
||||||
|
document.getElementById('email').classList.remove('error');
|
||||||
|
document.getElementById('password').classList.remove('error');
|
||||||
|
|
||||||
|
let hasError = false;
|
||||||
|
|
||||||
|
// 이메일 검증
|
||||||
|
if (!email.includes('@')) {
|
||||||
|
emailError.textContent = '올바른 이메일 주소를 입력하세요.';
|
||||||
|
emailError.classList.remove('hidden');
|
||||||
|
document.getElementById('email').classList.add('error');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 비밀번호 검증
|
||||||
|
if (password.length < 8) {
|
||||||
|
passwordError.textContent = '비밀번호는 최소 8자 이상이어야 합니다.';
|
||||||
|
passwordError.classList.remove('hidden');
|
||||||
|
document.getElementById('password').classList.add('error');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasError) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 로그인 처리 (시뮬레이션)
|
||||||
|
const users = getFromStorage('users') || [];
|
||||||
|
const user = users.find(u => u.email === email);
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
showToast('이메일 또는 비밀번호가 일치하지 않습니다.', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 로그인 성공
|
||||||
|
saveToStorage('currentUser', user);
|
||||||
|
|
||||||
|
if (rememberMe) {
|
||||||
|
localStorage.setItem('rememberMe', 'true');
|
||||||
|
}
|
||||||
|
|
||||||
|
showToast('로그인 성공!', 'success');
|
||||||
|
|
||||||
|
// 0.5초 후 대시보드로 이동
|
||||||
|
setTimeout(() => {
|
||||||
|
navigateTo('02-대시보드.html');
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 소셜 로그인 (시뮬레이션)
|
||||||
|
document.getElementById('googleLogin').addEventListener('click', function() {
|
||||||
|
showToast('Google 로그인은 프로토타입에서 지원하지 않습니다.', 'info');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('microsoftLogin').addEventListener('click', function() {
|
||||||
|
showToast('Microsoft 로그인은 프로토타입에서 지원하지 않습니다.', 'info');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 비밀번호 찾기
|
||||||
|
document.querySelector('.forgot-password').addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
showToast('비밀번호 재설정 이메일이 발송되었습니다.', 'success');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
539
design/uiux/prototype/02-대시보드.html
Normal file
539
design/uiux/prototype/02-대시보드.html
Normal file
@ -0,0 +1,539 @@
|
|||||||
|
<!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>
|
||||||
|
.dashboard-layout {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 250px;
|
||||||
|
background-color: white;
|
||||||
|
border-right: 1px solid var(--gray-200);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
position: fixed;
|
||||||
|
height: 100vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary-main);
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu-item {
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--gray-700);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu-link:hover {
|
||||||
|
background-color: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu-link.active {
|
||||||
|
background-color: var(--primary-light);
|
||||||
|
color: var(--primary-dark);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-layout {
|
||||||
|
margin-left: 250px;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header {
|
||||||
|
background-color: white;
|
||||||
|
border-bottom: 1px solid var(--gray-200);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 600px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-10);
|
||||||
|
border: 1px solid var(--gray-300);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: var(--spacing-3);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-btn {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: -4px;
|
||||||
|
right: -4px;
|
||||||
|
background-color: var(--error-main);
|
||||||
|
color: white;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
padding: var(--spacing-2);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-btn:hover {
|
||||||
|
background-color: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background-color: var(--primary-main);
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-content {
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
background-color: var(--gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-header {
|
||||||
|
margin-bottom: var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-title {
|
||||||
|
font: var(--font-h1);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-subtitle {
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-title {
|
||||||
|
font: var(--font-h4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-link {
|
||||||
|
color: var(--primary-main);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-item {
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
border-bottom: 1px solid var(--gray-100);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-item:hover {
|
||||||
|
background-color: var(--gray-50);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-title {
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-meta {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
border-bottom: 1px solid var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-checkbox {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-text {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-due {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-due.overdue {
|
||||||
|
color: var(--error-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
background-color: var(--gray-50);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="dashboard-layout">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
<a href="02-대시보드.html" class="sidebar-logo">📝 회의록</a>
|
||||||
|
<nav>
|
||||||
|
<ul class="sidebar-menu">
|
||||||
|
<li class="sidebar-menu-item">
|
||||||
|
<a href="02-대시보드.html" class="sidebar-menu-link active">
|
||||||
|
<span>🏠</span>
|
||||||
|
<span>대시보드</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="sidebar-menu-item">
|
||||||
|
<a href="#" class="sidebar-menu-link">
|
||||||
|
<span>📄</span>
|
||||||
|
<span>내 회의록</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="sidebar-menu-item">
|
||||||
|
<a href="03-회의예약.html" class="sidebar-menu-link">
|
||||||
|
<span>📅</span>
|
||||||
|
<span>예정된 회의</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="sidebar-menu-item">
|
||||||
|
<a href="09-Todo관리.html" class="sidebar-menu-link">
|
||||||
|
<span>✅</span>
|
||||||
|
<span>Todo 목록</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="sidebar-menu-item">
|
||||||
|
<a href="04-템플릿선택.html" class="sidebar-menu-link">
|
||||||
|
<span>📋</span>
|
||||||
|
<span>템플릿</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="sidebar-menu-item">
|
||||||
|
<a href="#" class="sidebar-menu-link">
|
||||||
|
<span>⚙️</span>
|
||||||
|
<span>설정</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="main-layout">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="top-header">
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="search-bar">
|
||||||
|
<span class="search-icon">🔍</span>
|
||||||
|
<input type="text" class="search-input" placeholder="회의록 검색...">
|
||||||
|
</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<button class="btn-icon notification-btn">
|
||||||
|
<span>🔔</span>
|
||||||
|
<span class="notification-badge">3</span>
|
||||||
|
</button>
|
||||||
|
<div class="profile-btn" id="profileBtn">
|
||||||
|
<div class="profile-avatar" id="profileAvatar">👤</div>
|
||||||
|
<span id="profileName">사용자</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Dashboard Content -->
|
||||||
|
<main class="dashboard-content">
|
||||||
|
<div class="dashboard-header">
|
||||||
|
<h1 class="dashboard-title" id="welcomeMessage">안녕하세요!</h1>
|
||||||
|
<p class="dashboard-subtitle">오늘도 생산적인 하루 되세요</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="widget-grid">
|
||||||
|
<!-- 예정된 회의 -->
|
||||||
|
<div class="widget">
|
||||||
|
<div class="widget-header">
|
||||||
|
<h3 class="widget-title">예정된 회의</h3>
|
||||||
|
<a href="03-회의예약.html" class="widget-link">모두 보기</a>
|
||||||
|
</div>
|
||||||
|
<div id="scheduledMeetings"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 최근 회의록 -->
|
||||||
|
<div class="widget">
|
||||||
|
<div class="widget-header">
|
||||||
|
<h3 class="widget-title">최근 회의록</h3>
|
||||||
|
<a href="#" class="widget-link">모두 보기</a>
|
||||||
|
</div>
|
||||||
|
<div id="recentMeetings"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 대기 중인 Todo -->
|
||||||
|
<div class="widget">
|
||||||
|
<div class="widget-header">
|
||||||
|
<h3 class="widget-title">내가 할 일</h3>
|
||||||
|
<a href="09-Todo관리.html" class="widget-link">모두 보기</a>
|
||||||
|
</div>
|
||||||
|
<div id="pendingTodos"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 통계 -->
|
||||||
|
<div class="widget">
|
||||||
|
<div class="widget-header">
|
||||||
|
<h3 class="widget-title">이번 주 통계</h3>
|
||||||
|
</div>
|
||||||
|
<div class="stat-grid">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-number" id="weeklyMeetings">0</div>
|
||||||
|
<div class="stat-label">회의</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-number" id="completedTodos">0</div>
|
||||||
|
<div class="stat-label">완료 Todo</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FAB -->
|
||||||
|
<button class="fab" id="fabBtn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="common.js"></script>
|
||||||
|
<script>
|
||||||
|
// 사용자 정보 표시
|
||||||
|
const currentUser = getCurrentUser();
|
||||||
|
if (currentUser) {
|
||||||
|
document.getElementById('welcomeMessage').textContent = `안녕하세요, ${currentUser.name}님!`;
|
||||||
|
document.getElementById('profileName').textContent = currentUser.name;
|
||||||
|
document.getElementById('profileAvatar').textContent = currentUser.avatar;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 예정된 회의 표시
|
||||||
|
const scheduledMeetings = getScheduledMeetings();
|
||||||
|
const scheduledContainer = document.getElementById('scheduledMeetings');
|
||||||
|
if (scheduledMeetings.length > 0) {
|
||||||
|
scheduledContainer.innerHTML = scheduledMeetings.slice(0, 3).map(meeting => `
|
||||||
|
<div class="meeting-item" onclick="navigateTo('05-회의진행.html?id=${meeting.id}')">
|
||||||
|
<div class="meeting-title">${meeting.title}</div>
|
||||||
|
<div class="meeting-meta">
|
||||||
|
<span>📅 ${meeting.date}</span>
|
||||||
|
<span>🕐 ${meeting.time}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
} else {
|
||||||
|
scheduledContainer.innerHTML = '<p style="color: var(--gray-500); font-size: 0.875rem;">예정된 회의가 없습니다.</p>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 최근 회의록 표시
|
||||||
|
const recentMeetings = getRecentMeetings(3);
|
||||||
|
const recentContainer = document.getElementById('recentMeetings');
|
||||||
|
if (recentMeetings.length > 0) {
|
||||||
|
recentContainer.innerHTML = recentMeetings.map(meeting => {
|
||||||
|
const statusClass = meeting.status === 'completed' ? 'success' : meeting.status === 'in_progress' ? 'warning' : 'neutral';
|
||||||
|
const statusText = meeting.status === 'completed' ? '확정됨' : meeting.status === 'in_progress' ? '작성 중' : '예정됨';
|
||||||
|
return `
|
||||||
|
<div class="meeting-item" onclick="navigateTo('05-회의진행.html?id=${meeting.id}')">
|
||||||
|
<div class="meeting-title">${meeting.title}</div>
|
||||||
|
<div class="meeting-meta">
|
||||||
|
<span>📅 ${meeting.date}</span>
|
||||||
|
<span class="badge badge-${statusClass}">${statusText}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
} else {
|
||||||
|
recentContainer.innerHTML = '<p style="color: var(--gray-500); font-size: 0.875rem;">회의록이 없습니다.</p>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 대기 중인 Todo 표시
|
||||||
|
if (currentUser) {
|
||||||
|
const pendingTodos = getPendingTodos(currentUser.id).slice(0, 3);
|
||||||
|
const todosContainer = document.getElementById('pendingTodos');
|
||||||
|
if (pendingTodos.length > 0) {
|
||||||
|
todosContainer.innerHTML = pendingTodos.map(todo => {
|
||||||
|
const dueClass = getDdayText(todo.dueDate).includes('지남') ? 'overdue' : '';
|
||||||
|
return `
|
||||||
|
<div class="todo-item">
|
||||||
|
<input type="checkbox" class="todo-checkbox" data-id="${todo.id}">
|
||||||
|
<div class="todo-content">
|
||||||
|
<div class="todo-text">${todo.content}</div>
|
||||||
|
<div class="todo-due ${dueClass}">${getDdayText(todo.dueDate)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
// Todo 체크박스 이벤트
|
||||||
|
document.querySelectorAll('.todo-checkbox').forEach(checkbox => {
|
||||||
|
checkbox.addEventListener('change', function() {
|
||||||
|
const todoId = this.getAttribute('data-id');
|
||||||
|
const todo = getTodoById(todoId);
|
||||||
|
if (todo && this.checked) {
|
||||||
|
todo.status = 'completed';
|
||||||
|
todo.progress = 100;
|
||||||
|
saveTodo(todo);
|
||||||
|
showToast('Todo가 완료되었습니다.', 'success');
|
||||||
|
setTimeout(() => location.reload(), 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
todosContainer.innerHTML = '<p style="color: var(--gray-500); font-size: 0.875rem;">할 일이 없습니다.</p>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 통계 표시
|
||||||
|
const allMeetings = getAllMeetings();
|
||||||
|
document.getElementById('weeklyMeetings').textContent = allMeetings.length;
|
||||||
|
const completedTodos = getTodosByStatus('completed');
|
||||||
|
document.getElementById('completedTodos').textContent = completedTodos.length;
|
||||||
|
|
||||||
|
// FAB 클릭
|
||||||
|
document.getElementById('fabBtn').addEventListener('click', function() {
|
||||||
|
const menu = [
|
||||||
|
{ text: '새 회의 예약', url: '03-회의예약.html' },
|
||||||
|
{ text: '즉시 회의 시작', url: '04-템플릿선택.html' },
|
||||||
|
{ text: '새 Todo 추가', url: '09-Todo관리.html' }
|
||||||
|
];
|
||||||
|
// 간단한 메뉴 표시
|
||||||
|
const choice = confirm('새 회의를 예약하시겠습니까?\n확인: 예약\n취소: 즉시 시작');
|
||||||
|
if (choice) {
|
||||||
|
navigateTo('03-회의예약.html');
|
||||||
|
} else {
|
||||||
|
navigateTo('04-템플릿선택.html');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 프로필 버튼 클릭
|
||||||
|
document.getElementById('profileBtn').addEventListener('click', function() {
|
||||||
|
const choice = confirm('로그아웃하시겠습니까?');
|
||||||
|
if (choice) {
|
||||||
|
localStorage.removeItem('currentUser');
|
||||||
|
showToast('로그아웃되었습니다.', 'success');
|
||||||
|
setTimeout(() => navigateTo('01-로그인.html'), 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
699
design/uiux/prototype/03-회의예약.html
Normal file
699
design/uiux/prototype/03-회의예약.html
Normal file
@ -0,0 +1,699 @@
|
|||||||
|
<!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>
|
||||||
|
.reservation-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-step {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-circle {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--gray-300);
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-circle.active {
|
||||||
|
background-color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-circle.completed {
|
||||||
|
background-color: var(--success-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-label.active {
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-arrow {
|
||||||
|
color: var(--gray-300);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reservation-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 400px;
|
||||||
|
gap: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-section {
|
||||||
|
position: sticky;
|
||||||
|
top: var(--spacing-8);
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
border: 2px solid var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-item {
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
padding-bottom: var(--spacing-4);
|
||||||
|
border-bottom: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
margin-bottom: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-value {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--gray-900);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetime-group {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
margin-top: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
padding: var(--spacing-2) var(--spacing-3);
|
||||||
|
background-color: var(--gray-100);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-tag .remove {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--gray-500);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-tag .remove:hover {
|
||||||
|
color: var(--error-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-item input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: var(--spacing-8);
|
||||||
|
padding-top: var(--spacing-6);
|
||||||
|
border-top: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
.reservation-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-section {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="reservation-container">
|
||||||
|
<!-- 진행 단계 표시 -->
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-step">
|
||||||
|
<div class="progress-circle completed">✓</div>
|
||||||
|
<span class="progress-label">회의 예약</span>
|
||||||
|
</div>
|
||||||
|
<span class="progress-arrow">→</span>
|
||||||
|
<div class="progress-step">
|
||||||
|
<div class="progress-circle active">2</div>
|
||||||
|
<span class="progress-label active">템플릿 선택</span>
|
||||||
|
</div>
|
||||||
|
<span class="progress-arrow">→</span>
|
||||||
|
<div class="progress-step">
|
||||||
|
<div class="progress-circle">3</div>
|
||||||
|
<span class="progress-label">회의 진행</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="reservation-layout">
|
||||||
|
<!-- 입력 폼 -->
|
||||||
|
<div class="form-section">
|
||||||
|
<h1>회의 예약</h1>
|
||||||
|
<p style="color: var(--gray-500); margin-bottom: var(--spacing-8);">
|
||||||
|
회의 정보를 입력하고 참석자를 초대하세요
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form id="reservationForm">
|
||||||
|
<!-- 회의 제목 -->
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label" for="meetingTitle">
|
||||||
|
회의 제목 <span style="color: var(--error-main);">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="meetingTitle"
|
||||||
|
class="input"
|
||||||
|
placeholder="예: 2025년 1분기 전략 회의"
|
||||||
|
maxlength="100"
|
||||||
|
required>
|
||||||
|
<span class="input-error hidden" id="titleError"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 날짜 및 시간 -->
|
||||||
|
<div class="datetime-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label" for="meetingDate">
|
||||||
|
날짜 <span style="color: var(--error-main);">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
id="meetingDate"
|
||||||
|
class="input"
|
||||||
|
required>
|
||||||
|
<span class="input-error hidden" id="dateError"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label" for="startTime">
|
||||||
|
시작 시간 <span style="color: var(--error-main);">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="time"
|
||||||
|
id="startTime"
|
||||||
|
class="input"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datetime-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label" for="endTime">
|
||||||
|
종료 시간 <span style="color: var(--error-main);">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="time"
|
||||||
|
id="endTime"
|
||||||
|
class="input"
|
||||||
|
required>
|
||||||
|
<span class="input-error hidden" id="timeError"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label"> </label>
|
||||||
|
<div style="padding: var(--spacing-3) 0; color: var(--gray-500); font-size: 0.875rem;">
|
||||||
|
예상 소요: <span id="duration">-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 장소 -->
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label" for="location">장소</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="location"
|
||||||
|
class="input"
|
||||||
|
placeholder="예: 3층 회의실"
|
||||||
|
maxlength="200"
|
||||||
|
:disabled="isOnline">
|
||||||
|
|
||||||
|
<div class="checkbox-item mt-2">
|
||||||
|
<input type="checkbox" id="isOnline">
|
||||||
|
<label for="isOnline">온라인 회의</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
id="onlineLink"
|
||||||
|
class="input mt-2 hidden"
|
||||||
|
placeholder="Zoom, Teams 링크를 입력하세요">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 참석자 -->
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label" for="participantEmail">
|
||||||
|
참석자 <span style="color: var(--error-main);">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="participantEmail"
|
||||||
|
class="input"
|
||||||
|
placeholder="참석자 이메일을 입력하세요">
|
||||||
|
<button type="button" class="btn btn-secondary btn-sm mt-2" id="addParticipant">
|
||||||
|
+ 참석자 추가
|
||||||
|
</button>
|
||||||
|
<div class="participant-tags" id="participantTags"></div>
|
||||||
|
<span class="input-error hidden" id="participantError"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 회의 설명 -->
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label" for="description">회의 설명</label>
|
||||||
|
<textarea
|
||||||
|
id="description"
|
||||||
|
class="textarea"
|
||||||
|
placeholder="회의 목적 및 안건을 입력하세요"
|
||||||
|
maxlength="1000"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 알림 설정 -->
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">알림 설정</label>
|
||||||
|
<div class="checkbox-group">
|
||||||
|
<div class="checkbox-item">
|
||||||
|
<input type="checkbox" id="notify30" checked>
|
||||||
|
<label for="notify30">회의 30분 전 알림</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox-item">
|
||||||
|
<input type="checkbox" id="notify60">
|
||||||
|
<label for="notify60">회의 1시간 전 알림</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 반복 설정 -->
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label" for="repeat">반복 설정</label>
|
||||||
|
<select id="repeat" class="select">
|
||||||
|
<option value="none">반복 안 함</option>
|
||||||
|
<option value="daily">매일</option>
|
||||||
|
<option value="weekly">매주</option>
|
||||||
|
<option value="monthly">매월</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div class="input-group mt-4 hidden" id="repeatEndGroup">
|
||||||
|
<label class="input-label" for="repeatEnd">반복 종료일</label>
|
||||||
|
<input type="date" id="repeatEnd" class="input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 캘린더 연동 -->
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">캘린더 연동</label>
|
||||||
|
<div class="checkbox-group">
|
||||||
|
<div class="checkbox-item">
|
||||||
|
<input type="checkbox" id="googleCalendar">
|
||||||
|
<label for="googleCalendar">Google Calendar에 추가</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox-item">
|
||||||
|
<input type="checkbox" id="outlook">
|
||||||
|
<label for="outlook">Outlook에 추가</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 액션 버튼 -->
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button type="button" class="btn btn-text" onclick="navigateTo('02-대시보드.html')">
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
<div style="display: flex; gap: var(--spacing-3);">
|
||||||
|
<button type="button" class="btn btn-secondary" id="saveDraft">
|
||||||
|
저장 후 나중에 계속
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary">
|
||||||
|
다음: 템플릿 선택 →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 미리보기 -->
|
||||||
|
<div class="preview-section">
|
||||||
|
<div class="preview-card">
|
||||||
|
<div class="preview-title">회의 미리보기</div>
|
||||||
|
|
||||||
|
<div class="preview-item">
|
||||||
|
<div class="preview-label">회의 제목</div>
|
||||||
|
<div class="preview-value" id="previewTitle">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview-item">
|
||||||
|
<div class="preview-label">날짜 및 시간</div>
|
||||||
|
<div class="preview-value" id="previewDateTime">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview-item">
|
||||||
|
<div class="preview-label">장소</div>
|
||||||
|
<div class="preview-value" id="previewLocation">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview-item">
|
||||||
|
<div class="preview-label">참석자</div>
|
||||||
|
<div class="preview-value" id="previewParticipants">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview-item">
|
||||||
|
<div class="preview-label">회의 설명</div>
|
||||||
|
<div class="preview-value" id="previewDescription" style="white-space: pre-wrap;">-</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="common.js"></script>
|
||||||
|
<script>
|
||||||
|
// 참석자 목록
|
||||||
|
let participants = [];
|
||||||
|
|
||||||
|
// 오늘 날짜를 최소값으로 설정
|
||||||
|
const today = new Date().toISOString().split('T')[0];
|
||||||
|
document.getElementById('meetingDate').min = today;
|
||||||
|
document.getElementById('meetingDate').value = today;
|
||||||
|
document.getElementById('repeatEnd').min = today;
|
||||||
|
|
||||||
|
// 시작 시간 기본값 설정
|
||||||
|
const now = new Date();
|
||||||
|
const currentHour = now.getHours();
|
||||||
|
const nextHour = currentHour + 1;
|
||||||
|
document.getElementById('startTime').value = `${String(nextHour).padStart(2, '0')}:00`;
|
||||||
|
document.getElementById('endTime').value = `${String(nextHour + 1).padStart(2, '0')}:00`;
|
||||||
|
|
||||||
|
// 실시간 미리보기 업데이트
|
||||||
|
function updatePreview() {
|
||||||
|
const title = document.getElementById('meetingTitle').value || '-';
|
||||||
|
const date = document.getElementById('meetingDate').value;
|
||||||
|
const startTime = document.getElementById('startTime').value;
|
||||||
|
const endTime = document.getElementById('endTime').value;
|
||||||
|
const isOnline = document.getElementById('isOnline').checked;
|
||||||
|
const location = isOnline ?
|
||||||
|
(document.getElementById('onlineLink').value || '온라인 회의') :
|
||||||
|
(document.getElementById('location').value || '-');
|
||||||
|
const description = document.getElementById('description').value || '-';
|
||||||
|
|
||||||
|
document.getElementById('previewTitle').textContent = title;
|
||||||
|
|
||||||
|
if (date && startTime && endTime) {
|
||||||
|
const dateObj = new Date(date);
|
||||||
|
const dateStr = `${dateObj.getFullYear()}년 ${dateObj.getMonth() + 1}월 ${dateObj.getDate()}일`;
|
||||||
|
document.getElementById('previewDateTime').textContent = `${dateStr} ${startTime} ~ ${endTime}`;
|
||||||
|
} else {
|
||||||
|
document.getElementById('previewDateTime').textContent = '-';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('previewLocation').textContent = location;
|
||||||
|
document.getElementById('previewParticipants').textContent =
|
||||||
|
participants.length > 0 ? participants.join(', ') : '-';
|
||||||
|
document.getElementById('previewDescription').textContent = description;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 소요 시간 계산
|
||||||
|
function calculateDuration() {
|
||||||
|
const startTime = document.getElementById('startTime').value;
|
||||||
|
const endTime = document.getElementById('endTime').value;
|
||||||
|
|
||||||
|
if (startTime && endTime) {
|
||||||
|
const [startHour, startMin] = startTime.split(':').map(Number);
|
||||||
|
const [endHour, endMin] = endTime.split(':').map(Number);
|
||||||
|
|
||||||
|
const startMinutes = startHour * 60 + startMin;
|
||||||
|
const endMinutes = endHour * 60 + endMin;
|
||||||
|
const diff = endMinutes - startMinutes;
|
||||||
|
|
||||||
|
if (diff > 0) {
|
||||||
|
document.getElementById('duration').textContent = formatDuration(diff);
|
||||||
|
document.getElementById('timeError').classList.add('hidden');
|
||||||
|
document.getElementById('endTime').classList.remove('error');
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
document.getElementById('timeError').textContent = '종료 시간은 시작 시간보다 늦어야 합니다.';
|
||||||
|
document.getElementById('timeError').classList.remove('hidden');
|
||||||
|
document.getElementById('endTime').classList.add('error');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 온라인 회의 체크박스
|
||||||
|
document.getElementById('isOnline').addEventListener('change', (e) => {
|
||||||
|
const isOnline = e.target.checked;
|
||||||
|
const locationInput = document.getElementById('location');
|
||||||
|
const onlineLinkInput = document.getElementById('onlineLink');
|
||||||
|
|
||||||
|
if (isOnline) {
|
||||||
|
locationInput.disabled = true;
|
||||||
|
locationInput.value = '';
|
||||||
|
onlineLinkInput.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
locationInput.disabled = false;
|
||||||
|
onlineLinkInput.classList.add('hidden');
|
||||||
|
onlineLinkInput.value = '';
|
||||||
|
}
|
||||||
|
updatePreview();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 참석자 추가
|
||||||
|
document.getElementById('addParticipant').addEventListener('click', () => {
|
||||||
|
const emailInput = document.getElementById('participantEmail');
|
||||||
|
const email = emailInput.value.trim();
|
||||||
|
const errorSpan = document.getElementById('participantError');
|
||||||
|
|
||||||
|
if (!email) {
|
||||||
|
errorSpan.textContent = '이메일을 입력하세요.';
|
||||||
|
errorSpan.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 간단한 이메일 검증
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailRegex.test(email)) {
|
||||||
|
errorSpan.textContent = '올바른 이메일 주소를 입력하세요.';
|
||||||
|
errorSpan.classList.remove('hidden');
|
||||||
|
emailInput.classList.add('error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (participants.includes(email)) {
|
||||||
|
errorSpan.textContent = '이미 추가된 참석자입니다.';
|
||||||
|
errorSpan.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
participants.push(email);
|
||||||
|
emailInput.value = '';
|
||||||
|
emailInput.classList.remove('error');
|
||||||
|
errorSpan.classList.add('hidden');
|
||||||
|
renderParticipants();
|
||||||
|
updatePreview();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 참석자 렌더링
|
||||||
|
function renderParticipants() {
|
||||||
|
const container = document.getElementById('participantTags');
|
||||||
|
container.innerHTML = participants.map((email, index) => `
|
||||||
|
<div class="participant-tag">
|
||||||
|
<span>👤 ${email}</span>
|
||||||
|
<span class="remove" onclick="removeParticipant(${index})">×</span>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 참석자 제거
|
||||||
|
function removeParticipant(index) {
|
||||||
|
participants.splice(index, 1);
|
||||||
|
renderParticipants();
|
||||||
|
updatePreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 반복 설정
|
||||||
|
document.getElementById('repeat').addEventListener('change', (e) => {
|
||||||
|
const repeatEndGroup = document.getElementById('repeatEndGroup');
|
||||||
|
if (e.target.value !== 'none') {
|
||||||
|
repeatEndGroup.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
repeatEndGroup.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 입력 필드 이벤트 리스너
|
||||||
|
document.querySelectorAll('input, textarea, select').forEach(el => {
|
||||||
|
el.addEventListener('input', updatePreview);
|
||||||
|
el.addEventListener('change', updatePreview);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('startTime').addEventListener('change', calculateDuration);
|
||||||
|
document.getElementById('endTime').addEventListener('change', calculateDuration);
|
||||||
|
|
||||||
|
// 폼 제출
|
||||||
|
document.getElementById('reservationForm').addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// 유효성 검사
|
||||||
|
const title = document.getElementById('meetingTitle').value.trim();
|
||||||
|
const date = document.getElementById('meetingDate').value;
|
||||||
|
|
||||||
|
if (!title) {
|
||||||
|
document.getElementById('titleError').textContent = '회의 제목을 입력하세요.';
|
||||||
|
document.getElementById('titleError').classList.remove('hidden');
|
||||||
|
document.getElementById('meetingTitle').classList.add('error');
|
||||||
|
document.getElementById('meetingTitle').focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!date) {
|
||||||
|
document.getElementById('dateError').textContent = '날짜를 선택하세요.';
|
||||||
|
document.getElementById('dateError').classList.remove('hidden');
|
||||||
|
document.getElementById('meetingDate').classList.add('error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 과거 날짜 검사
|
||||||
|
const selectedDate = new Date(date);
|
||||||
|
const todayDate = new Date(today);
|
||||||
|
if (selectedDate < todayDate) {
|
||||||
|
document.getElementById('dateError').textContent = '과거 날짜는 선택할 수 없습니다.';
|
||||||
|
document.getElementById('dateError').classList.remove('hidden');
|
||||||
|
document.getElementById('meetingDate').classList.add('error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!calculateDuration()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (participants.length === 0) {
|
||||||
|
document.getElementById('participantError').textContent = '최소 1명의 참석자를 추가하세요.';
|
||||||
|
document.getElementById('participantError').classList.remove('hidden');
|
||||||
|
document.getElementById('participantEmail').focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 회의 데이터 저장
|
||||||
|
const meetingData = {
|
||||||
|
id: generateId('meeting'),
|
||||||
|
title: title,
|
||||||
|
date: date,
|
||||||
|
time: document.getElementById('startTime').value,
|
||||||
|
endTime: document.getElementById('endTime').value,
|
||||||
|
location: document.getElementById('isOnline').checked ?
|
||||||
|
document.getElementById('onlineLink').value || '온라인 회의' :
|
||||||
|
document.getElementById('location').value,
|
||||||
|
participants: participants,
|
||||||
|
description: document.getElementById('description').value,
|
||||||
|
notifications: {
|
||||||
|
notify30: document.getElementById('notify30').checked,
|
||||||
|
notify60: document.getElementById('notify60').checked
|
||||||
|
},
|
||||||
|
repeat: document.getElementById('repeat').value,
|
||||||
|
repeatEnd: document.getElementById('repeatEnd').value,
|
||||||
|
calendar: {
|
||||||
|
google: document.getElementById('googleCalendar').checked,
|
||||||
|
outlook: document.getElementById('outlook').checked
|
||||||
|
},
|
||||||
|
status: 'scheduled',
|
||||||
|
createdAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
|
||||||
|
// LocalStorage에 임시 저장
|
||||||
|
sessionStorage.setItem('newMeeting', JSON.stringify(meetingData));
|
||||||
|
|
||||||
|
showToast('회의 정보가 저장되었습니다.', 'success');
|
||||||
|
|
||||||
|
// 템플릿 선택 화면으로 이동
|
||||||
|
setTimeout(() => {
|
||||||
|
navigateTo('04-템플릿선택.html');
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 임시 저장
|
||||||
|
document.getElementById('saveDraft').addEventListener('click', () => {
|
||||||
|
const meetingData = {
|
||||||
|
title: document.getElementById('meetingTitle').value,
|
||||||
|
date: document.getElementById('meetingDate').value,
|
||||||
|
time: document.getElementById('startTime').value,
|
||||||
|
endTime: document.getElementById('endTime').value,
|
||||||
|
location: document.getElementById('location').value,
|
||||||
|
participants: participants,
|
||||||
|
description: document.getElementById('description').value
|
||||||
|
};
|
||||||
|
|
||||||
|
sessionStorage.setItem('draftMeeting', JSON.stringify(meetingData));
|
||||||
|
showToast('회의 정보가 임시 저장되었습니다.', 'success');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
navigateTo('02-대시보드.html');
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 초기 업데이트
|
||||||
|
calculateDuration();
|
||||||
|
updatePreview();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
537
design/uiux/prototype/04-템플릿선택.html
Normal file
537
design/uiux/prototype/04-템플릿선택.html
Normal file
@ -0,0 +1,537 @@
|
|||||||
|
<!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>
|
||||||
|
.template-container {
|
||||||
|
max-width: 1536px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-step {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-circle {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--gray-300);
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-circle.active {
|
||||||
|
background-color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-circle.completed {
|
||||||
|
background-color: var(--success-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-label.active {
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-arrow {
|
||||||
|
color: var(--gray-300);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 400px;
|
||||||
|
gap: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-card:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-card.selected {
|
||||||
|
border-color: var(--primary-main);
|
||||||
|
background-color: rgba(0, 217, 177, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-description {
|
||||||
|
color: var(--gray-600);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-usage {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
color: var(--gray-500);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-sections {
|
||||||
|
margin-top: var(--spacing-4);
|
||||||
|
padding-top: var(--spacing-4);
|
||||||
|
border-top: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
padding: var(--spacing-2) 0;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-required {
|
||||||
|
color: var(--error-main);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-panel {
|
||||||
|
position: sticky;
|
||||||
|
top: var(--spacing-8);
|
||||||
|
height: fit-content;
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-empty {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
color: var(--gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-list {
|
||||||
|
margin-top: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-drag-item {
|
||||||
|
background: var(--gray-50);
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle {
|
||||||
|
color: var(--gray-400);
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-drag-item:active .drag-handle {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-name {
|
||||||
|
flex: 1;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--gray-500);
|
||||||
|
padding: var(--spacing-1);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn:hover {
|
||||||
|
color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: var(--spacing-8);
|
||||||
|
padding-top: var(--spacing-6);
|
||||||
|
border-top: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
.template-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-panel {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="template-container">
|
||||||
|
<!-- 진행 단계 표시 -->
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-step">
|
||||||
|
<div class="progress-circle completed">✓</div>
|
||||||
|
<span class="progress-label">회의 예약</span>
|
||||||
|
</div>
|
||||||
|
<span class="progress-arrow">→</span>
|
||||||
|
<div class="progress-step">
|
||||||
|
<div class="progress-circle active">2</div>
|
||||||
|
<span class="progress-label active">템플릿 선택</span>
|
||||||
|
</div>
|
||||||
|
<span class="progress-arrow">→</span>
|
||||||
|
<div class="progress-step">
|
||||||
|
<div class="progress-circle">3</div>
|
||||||
|
<span class="progress-label">회의 진행</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>회의 템플릿 선택</h1>
|
||||||
|
<p style="color: var(--gray-500); margin-bottom: var(--spacing-8);">
|
||||||
|
회의 유형에 맞는 템플릿을 선택하거나 커스터마이징하세요
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="template-layout">
|
||||||
|
<!-- 템플릿 그리드 -->
|
||||||
|
<div>
|
||||||
|
<div class="template-grid" id="templateGrid"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 미리보기 및 커스터마이징 -->
|
||||||
|
<div class="preview-panel">
|
||||||
|
<div class="preview-title">템플릿 미리보기</div>
|
||||||
|
|
||||||
|
<div id="previewContent" class="preview-empty">
|
||||||
|
템플릿을 선택하면<br>여기에 미리보기가 표시됩니다
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="customizePanel" class="hidden">
|
||||||
|
<div style="margin-top: var(--spacing-6); margin-bottom: var(--spacing-4);">
|
||||||
|
<strong>섹션 구성</strong>
|
||||||
|
<p style="font-size: 0.875rem; color: var(--gray-500); margin-top: var(--spacing-1);">
|
||||||
|
드래그하여 순서를 변경하거나 섹션을 추가/삭제할 수 있습니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-list" id="sectionList"></div>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-secondary btn-sm" style="width: 100%; margin-top: var(--spacing-4);" id="addSection">
|
||||||
|
+ 섹션 추가
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-text btn-sm" style="width: 100%; margin-top: var(--spacing-2);" id="saveTemplate">
|
||||||
|
✓ 나만의 템플릿으로 저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 액션 버튼 -->
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button type="button" class="btn btn-text" onclick="navigateTo('03-회의예약.html')">
|
||||||
|
← 뒤로
|
||||||
|
</button>
|
||||||
|
<div style="display: flex; gap: var(--spacing-3);">
|
||||||
|
<button type="button" class="btn btn-secondary" id="startBlank">
|
||||||
|
템플릿 없이 시작
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="selectTemplate" disabled>
|
||||||
|
선택 완료 →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="common.js"></script>
|
||||||
|
<script>
|
||||||
|
let selectedTemplate = null;
|
||||||
|
let customSections = [];
|
||||||
|
let draggedItem = null;
|
||||||
|
|
||||||
|
// 템플릿 아이콘 매핑
|
||||||
|
const templateIcons = {
|
||||||
|
general: '📋',
|
||||||
|
scrum: '🔄',
|
||||||
|
kickoff: '🚀',
|
||||||
|
weekly: '📅'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 템플릿 렌더링
|
||||||
|
function renderTemplates() {
|
||||||
|
const templates = getAllTemplates();
|
||||||
|
const grid = document.getElementById('templateGrid');
|
||||||
|
|
||||||
|
grid.innerHTML = templates.map(template => `
|
||||||
|
<div class="template-card" data-id="${template.id}" onclick="selectTemplate('${template.id}')">
|
||||||
|
<div class="template-header">
|
||||||
|
<span class="template-icon">${templateIcons[template.id] || '📄'}</span>
|
||||||
|
<div class="template-title">${template.name}</div>
|
||||||
|
</div>
|
||||||
|
<div class="template-description">${template.description}</div>
|
||||||
|
<div class="template-usage">
|
||||||
|
<span>👥</span>
|
||||||
|
<span>자주 사용됨</span>
|
||||||
|
</div>
|
||||||
|
<div class="template-sections">
|
||||||
|
${template.sections.map(section => `
|
||||||
|
<div class="section-item">
|
||||||
|
<span>•</span>
|
||||||
|
<span>${section.name}</span>
|
||||||
|
${section.required ? '<span class="section-required">*</span>' : ''}
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 템플릿 선택
|
||||||
|
function selectTemplate(templateId) {
|
||||||
|
selectedTemplate = templateId;
|
||||||
|
const template = getTemplate(templateId);
|
||||||
|
customSections = JSON.parse(JSON.stringify(template.sections));
|
||||||
|
|
||||||
|
// 선택 표시
|
||||||
|
document.querySelectorAll('.template-card').forEach(card => {
|
||||||
|
card.classList.remove('selected');
|
||||||
|
});
|
||||||
|
document.querySelector(`[data-id="${templateId}"]`).classList.add('selected');
|
||||||
|
|
||||||
|
// 미리보기 업데이트
|
||||||
|
updatePreview();
|
||||||
|
|
||||||
|
// 선택 완료 버튼 활성화
|
||||||
|
document.getElementById('selectTemplate').disabled = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 미리보기 업데이트
|
||||||
|
function updatePreview() {
|
||||||
|
const previewContent = document.getElementById('previewContent');
|
||||||
|
const customizePanel = document.getElementById('customizePanel');
|
||||||
|
|
||||||
|
if (selectedTemplate) {
|
||||||
|
previewContent.innerHTML = '';
|
||||||
|
customizePanel.classList.remove('hidden');
|
||||||
|
renderSections();
|
||||||
|
} else {
|
||||||
|
previewContent.className = 'preview-empty';
|
||||||
|
previewContent.innerHTML = '템플릿을 선택하면<br>여기에 미리보기가 표시됩니다';
|
||||||
|
customizePanel.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 섹션 렌더링
|
||||||
|
function renderSections() {
|
||||||
|
const sectionList = document.getElementById('sectionList');
|
||||||
|
|
||||||
|
sectionList.innerHTML = customSections.map((section, index) => `
|
||||||
|
<div class="section-drag-item" draggable="true" data-index="${index}">
|
||||||
|
<span class="drag-handle">⋮⋮</span>
|
||||||
|
<span class="section-name">
|
||||||
|
${section.name}
|
||||||
|
${section.required ? '<span class="section-required">*</span>' : ''}
|
||||||
|
</span>
|
||||||
|
<div class="section-actions">
|
||||||
|
<button class="icon-btn" onclick="editSection(${index})" title="수정">✏️</button>
|
||||||
|
${!section.required ? `<button class="icon-btn" onclick="deleteSection(${index})" title="삭제">🗑️</button>` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
// 드래그 이벤트 추가
|
||||||
|
document.querySelectorAll('.section-drag-item').forEach(item => {
|
||||||
|
item.addEventListener('dragstart', handleDragStart);
|
||||||
|
item.addEventListener('dragover', handleDragOver);
|
||||||
|
item.addEventListener('drop', handleDrop);
|
||||||
|
item.addEventListener('dragend', handleDragEnd);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 드래그 앤 드롭 핸들러
|
||||||
|
function handleDragStart(e) {
|
||||||
|
draggedItem = parseInt(e.target.dataset.index);
|
||||||
|
e.target.style.opacity = '0.5';
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragOver(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.dataTransfer.dropEffect = 'move';
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDrop(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const targetIndex = parseInt(e.target.closest('.section-drag-item').dataset.index);
|
||||||
|
|
||||||
|
if (draggedItem !== targetIndex) {
|
||||||
|
const draggedSection = customSections[draggedItem];
|
||||||
|
customSections.splice(draggedItem, 1);
|
||||||
|
customSections.splice(targetIndex, 0, draggedSection);
|
||||||
|
renderSections();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragEnd(e) {
|
||||||
|
e.target.style.opacity = '1';
|
||||||
|
draggedItem = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 섹션 추가
|
||||||
|
document.getElementById('addSection').addEventListener('click', () => {
|
||||||
|
const sectionName = prompt('섹션 이름을 입력하세요:');
|
||||||
|
if (sectionName && sectionName.trim()) {
|
||||||
|
customSections.push({
|
||||||
|
id: generateId('section'),
|
||||||
|
name: sectionName.trim(),
|
||||||
|
required: false
|
||||||
|
});
|
||||||
|
renderSections();
|
||||||
|
showToast('섹션이 추가되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 섹션 수정
|
||||||
|
function editSection(index) {
|
||||||
|
const section = customSections[index];
|
||||||
|
const newName = prompt('섹션 이름 수정:', section.name);
|
||||||
|
if (newName && newName.trim()) {
|
||||||
|
customSections[index].name = newName.trim();
|
||||||
|
renderSections();
|
||||||
|
showToast('섹션이 수정되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 섹션 삭제
|
||||||
|
function deleteSection(index) {
|
||||||
|
if (confirm('이 섹션을 삭제하시겠습니까?')) {
|
||||||
|
customSections.splice(index, 1);
|
||||||
|
renderSections();
|
||||||
|
showToast('섹션이 삭제되었습니다.', 'info');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 나만의 템플릿 저장
|
||||||
|
document.getElementById('saveTemplate').addEventListener('click', () => {
|
||||||
|
const templateName = prompt('템플릿 이름을 입력하세요:');
|
||||||
|
if (templateName && templateName.trim()) {
|
||||||
|
const customTemplate = {
|
||||||
|
id: generateId('template'),
|
||||||
|
name: templateName.trim(),
|
||||||
|
description: '나만의 템플릿',
|
||||||
|
sections: customSections,
|
||||||
|
createdBy: getCurrentUser().id,
|
||||||
|
createdAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
|
||||||
|
// 여기서는 시뮬레이션만 (실제로는 서버에 저장)
|
||||||
|
showToast('템플릿이 저장되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 템플릿 없이 시작
|
||||||
|
document.getElementById('startBlank').addEventListener('click', () => {
|
||||||
|
if (confirm('빈 회의록으로 시작하시겠습니까?')) {
|
||||||
|
sessionStorage.setItem('selectedTemplate', JSON.stringify({
|
||||||
|
id: 'blank',
|
||||||
|
name: '빈 회의록',
|
||||||
|
sections: []
|
||||||
|
}));
|
||||||
|
navigateTo('05-회의진행.html');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 선택 완료
|
||||||
|
document.getElementById('selectTemplate').addEventListener('click', () => {
|
||||||
|
if (!selectedTemplate) {
|
||||||
|
showToast('템플릿을 선택하세요.', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const template = getTemplate(selectedTemplate);
|
||||||
|
const finalTemplate = {
|
||||||
|
...template,
|
||||||
|
sections: customSections
|
||||||
|
};
|
||||||
|
|
||||||
|
sessionStorage.setItem('selectedTemplate', JSON.stringify(finalTemplate));
|
||||||
|
showToast('템플릿이 선택되었습니다.', 'success');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
navigateTo('05-회의진행.html');
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 초기화
|
||||||
|
renderTemplates();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
858
design/uiux/prototype/05-회의진행.html
Normal file
858
design/uiux/prototype/05-회의진행.html
Normal file
@ -0,0 +1,858 @@
|
|||||||
|
<!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 {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-editor {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 250px 1fr 350px;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 좌측 패널 */
|
||||||
|
.left-panel {
|
||||||
|
background: white;
|
||||||
|
border-right: 1px solid var(--gray-200);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-info {
|
||||||
|
margin-bottom: var(--spacing-6);
|
||||||
|
padding-bottom: var(--spacing-6);
|
||||||
|
border-bottom: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-title-small {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-time {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
background: var(--gray-50);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
margin-top: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer-text {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recording-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
margin-top: var(--spacing-2);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recording-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--error-main);
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.participants-list {
|
||||||
|
margin-bottom: var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-700);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
padding: var(--spacing-2) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--gray-200);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-avatar.online {
|
||||||
|
border: 2px solid var(--success-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-name {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-status {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--success-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 중앙 에디터 */
|
||||||
|
.editor-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-1);
|
||||||
|
padding: var(--spacing-3) var(--spacing-4);
|
||||||
|
border-bottom: 1px solid var(--gray-200);
|
||||||
|
background: var(--gray-50);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-group {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-1);
|
||||||
|
padding-right: var(--spacing-3);
|
||||||
|
border-right: 1px solid var(--gray-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-group:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-btn {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--gray-600);
|
||||||
|
font-size: 16px;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-btn:hover {
|
||||||
|
background: white;
|
||||||
|
color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-btn.active {
|
||||||
|
background: var(--primary-main);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: var(--spacing-8) var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-block {
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
padding-bottom: var(--spacing-3);
|
||||||
|
border-bottom: 2px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-verified {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-verified input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-verified input[type="checkbox"]:checked {
|
||||||
|
accent-color: var(--success-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-body {
|
||||||
|
min-height: 150px;
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
outline: none;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-body:focus {
|
||||||
|
border-color: var(--primary-main);
|
||||||
|
box-shadow: 0 0 0 3px rgba(0, 217, 177, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-body.verified {
|
||||||
|
background-color: rgba(16, 185, 129, 0.05);
|
||||||
|
border-color: var(--success-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-suggestion {
|
||||||
|
background: var(--gray-50);
|
||||||
|
border: 1px dashed var(--primary-main);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
margin-top: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-suggestion-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-suggestion-content {
|
||||||
|
color: var(--gray-700);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-suggestion-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.term-highlight {
|
||||||
|
color: var(--primary-main);
|
||||||
|
border-bottom: 2px dotted var(--primary-main);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.term-highlight:hover {
|
||||||
|
background-color: rgba(0, 217, 177, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 우측 패널 */
|
||||||
|
.right-panel {
|
||||||
|
background: white;
|
||||||
|
border-left: 1px solid var(--gray-200);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-tabs {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-tab {
|
||||||
|
flex: 1;
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gray-600);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-tab:hover {
|
||||||
|
background: var(--gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-tab.active {
|
||||||
|
color: var(--primary-main);
|
||||||
|
border-bottom-color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-suggestion-card {
|
||||||
|
background: var(--gray-50);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-suggestion-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-suggestion-text {
|
||||||
|
color: var(--gray-700);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.term-card {
|
||||||
|
background: var(--gray-50);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.term-card:hover {
|
||||||
|
background: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.term-name {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary-main);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.term-definition {
|
||||||
|
color: var(--gray-700);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.term-source {
|
||||||
|
color: var(--gray-500);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-top: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 하단 바 */
|
||||||
|
.bottom-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 250px;
|
||||||
|
right: 350px;
|
||||||
|
background: white;
|
||||||
|
border-top: 1px solid var(--gray-200);
|
||||||
|
padding: var(--spacing-4) var(--spacing-6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
color: var(--gray-600);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--success-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-wave {
|
||||||
|
display: flex;
|
||||||
|
gap: 2px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-bar {
|
||||||
|
width: 3px;
|
||||||
|
height: 16px;
|
||||||
|
background: var(--primary-main);
|
||||||
|
border-radius: 2px;
|
||||||
|
animation: voiceWave 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-bar:nth-child(2) { animation-delay: 0.1s; }
|
||||||
|
.voice-bar:nth-child(3) { animation-delay: 0.2s; }
|
||||||
|
.voice-bar:nth-child(4) { animation-delay: 0.3s; }
|
||||||
|
|
||||||
|
@keyframes voiceWave {
|
||||||
|
0%, 100% { height: 8px; }
|
||||||
|
50% { height: 16px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
.meeting-editor {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-panel,
|
||||||
|
.right-panel {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-bar {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="meeting-editor">
|
||||||
|
<!-- 좌측 패널: 회의 정보 & 참석자 -->
|
||||||
|
<div class="left-panel">
|
||||||
|
<div class="meeting-info">
|
||||||
|
<div class="meeting-title-small" id="meetingTitle">2025년 1분기 전략 회의</div>
|
||||||
|
<div class="meeting-time" id="meetingTime">2025년 10월 20일 14:00</div>
|
||||||
|
|
||||||
|
<div class="timer">
|
||||||
|
<span class="timer-icon">⏱️</span>
|
||||||
|
<span class="timer-text" id="timer">00:00:00</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recording-status">
|
||||||
|
<span class="recording-dot"></span>
|
||||||
|
<span>녹음 중</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="participants-list">
|
||||||
|
<div class="section-title">참석자 (3명)</div>
|
||||||
|
<div id="participantsList"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="section-title">타임라인</div>
|
||||||
|
<div id="timeline" style="font-size: 0.75rem; color: var(--gray-500);"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 중앙 패널: 에디터 -->
|
||||||
|
<div class="editor-panel">
|
||||||
|
<!-- 툴바 -->
|
||||||
|
<div class="editor-toolbar">
|
||||||
|
<div class="toolbar-group">
|
||||||
|
<button class="toolbar-btn" title="굵게" onclick="execCommand('bold')"><strong>B</strong></button>
|
||||||
|
<button class="toolbar-btn" title="기울임" onclick="execCommand('italic')"><em>I</em></button>
|
||||||
|
<button class="toolbar-btn" title="밑줄" onclick="execCommand('underline')"><u>U</u></button>
|
||||||
|
<button class="toolbar-btn" title="취소선" onclick="execCommand('strikeThrough')"><s>S</s></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbar-group">
|
||||||
|
<button class="toolbar-btn" title="번호 목록" onclick="execCommand('insertOrderedList')">1.</button>
|
||||||
|
<button class="toolbar-btn" title="글머리 기호" onclick="execCommand('insertUnorderedList')">•</button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbar-group">
|
||||||
|
<button class="toolbar-btn" title="링크" onclick="insertLink()">🔗</button>
|
||||||
|
<button class="toolbar-btn" title="실행 취소" onclick="document.execCommand('undo')">↶</button>
|
||||||
|
<button class="toolbar-btn" title="다시 실행" onclick="document.execCommand('redo')">↷</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 에디터 콘텐츠 -->
|
||||||
|
<div class="editor-content" id="editorContent"></div>
|
||||||
|
|
||||||
|
<!-- 하단 바 -->
|
||||||
|
<div class="bottom-bar">
|
||||||
|
<div class="status-indicator">
|
||||||
|
<span class="status-dot"></span>
|
||||||
|
<span id="saveStatus">저장됨</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="voice-status">
|
||||||
|
<div class="voice-wave">
|
||||||
|
<div class="voice-bar"></div>
|
||||||
|
<div class="voice-bar"></div>
|
||||||
|
<div class="voice-bar"></div>
|
||||||
|
<div class="voice-bar"></div>
|
||||||
|
</div>
|
||||||
|
<span>음성 인식 중...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bottom-actions">
|
||||||
|
<button class="btn btn-secondary btn-sm" id="pauseRecording">
|
||||||
|
⏸️ 일시정지
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary" id="endMeeting">
|
||||||
|
회의 종료
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 우측 패널: AI 제안 & 용어 설명 -->
|
||||||
|
<div class="right-panel">
|
||||||
|
<div class="panel-tabs">
|
||||||
|
<button class="panel-tab active" data-tab="ai" onclick="switchTab('ai')">AI 제안</button>
|
||||||
|
<button class="panel-tab" data-tab="terms" onclick="switchTab('terms')">용어 설명</button>
|
||||||
|
<button class="panel-tab" data-tab="comments" onclick="switchTab('comments')">댓글</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content">
|
||||||
|
<!-- AI 제안 탭 -->
|
||||||
|
<div id="aiTab" class="tab-pane">
|
||||||
|
<p style="color: var(--gray-500); font-size: 0.875rem; margin-bottom: var(--spacing-4);">
|
||||||
|
AI가 자동으로 회의록을 작성하고 제안합니다
|
||||||
|
</p>
|
||||||
|
<div id="aiSuggestions"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 용어 설명 탭 -->
|
||||||
|
<div id="termsTab" class="tab-pane hidden">
|
||||||
|
<p style="color: var(--gray-500); font-size: 0.875rem; margin-bottom: var(--spacing-4);">
|
||||||
|
감지된 전문용어와 설명입니다
|
||||||
|
</p>
|
||||||
|
<div id="termsList"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 댓글 탭 -->
|
||||||
|
<div id="commentsTab" class="tab-pane hidden">
|
||||||
|
<p style="color: var(--gray-500); font-size: 0.875rem; margin-bottom: var(--spacing-4);">
|
||||||
|
참석자의 댓글과 제안사항입니다
|
||||||
|
</p>
|
||||||
|
<div style="text-align: center; padding: var(--spacing-8); color: var(--gray-400);">
|
||||||
|
아직 댓글이 없습니다
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="common.js"></script>
|
||||||
|
<script>
|
||||||
|
let elapsedSeconds = 0;
|
||||||
|
let timerInterval;
|
||||||
|
let saveTimeout;
|
||||||
|
let currentSuggestionIndex = 0;
|
||||||
|
|
||||||
|
// 회의 정보 로드
|
||||||
|
function loadMeetingInfo() {
|
||||||
|
const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
|
||||||
|
const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
|
||||||
|
|
||||||
|
if (meetingData.title) {
|
||||||
|
document.getElementById('meetingTitle').textContent = meetingData.title;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (meetingData.date && meetingData.time) {
|
||||||
|
const dateObj = new Date(meetingData.date);
|
||||||
|
const dateStr = `${dateObj.getFullYear()}년 ${dateObj.getMonth() + 1}월 ${dateObj.getDate()}일`;
|
||||||
|
document.getElementById('meetingTime').textContent = `${dateStr} ${meetingData.time}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 참석자 렌더링
|
||||||
|
if (meetingData.participants) {
|
||||||
|
const users = getFromStorage(STORAGE_KEYS.USERS) || [];
|
||||||
|
const participantsList = document.getElementById('participantsList');
|
||||||
|
participantsList.innerHTML = meetingData.participants.map(email => {
|
||||||
|
const user = users.find(u => u.email === email) || { name: email, avatar: '👤' };
|
||||||
|
return `
|
||||||
|
<div class="participant-item">
|
||||||
|
<div class="participant-avatar online">${user.avatar}</div>
|
||||||
|
<div class="participant-name">${user.name}</div>
|
||||||
|
<div class="participant-status"></div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 템플릿 섹션 렌더링
|
||||||
|
if (template.sections) {
|
||||||
|
const editorContent = document.getElementById('editorContent');
|
||||||
|
editorContent.innerHTML = template.sections.map(section => `
|
||||||
|
<div class="section-block" data-section="${section.id}">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>${section.name}${section.required ? '<span style="color: var(--error-main);">*</span>' : ''}</h2>
|
||||||
|
<div class="section-verified">
|
||||||
|
<input type="checkbox" id="verify-${section.id}">
|
||||||
|
<label for="verify-${section.id}">검증 완료</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-body" contenteditable="true" data-section-id="${section.id}">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
// 섹션 검증 이벤트
|
||||||
|
document.querySelectorAll('[id^="verify-"]').forEach(checkbox => {
|
||||||
|
checkbox.addEventListener('change', (e) => {
|
||||||
|
const sectionId = e.target.id.replace('verify-', '');
|
||||||
|
const sectionBody = document.querySelector(`[data-section-id="${sectionId}"]`);
|
||||||
|
if (e.target.checked) {
|
||||||
|
sectionBody.classList.add('verified');
|
||||||
|
showToast('섹션이 검증되었습니다.', 'success');
|
||||||
|
} else {
|
||||||
|
sectionBody.classList.remove('verified');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 자동 저장
|
||||||
|
document.querySelectorAll('.section-body').forEach(section => {
|
||||||
|
section.addEventListener('input', () => {
|
||||||
|
clearTimeout(saveTimeout);
|
||||||
|
document.getElementById('saveStatus').textContent = '저장 중...';
|
||||||
|
|
||||||
|
saveTimeout = setTimeout(() => {
|
||||||
|
document.getElementById('saveStatus').textContent = '저장됨';
|
||||||
|
// 실제로는 서버에 저장
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 타이머 시작
|
||||||
|
function startTimer() {
|
||||||
|
timerInterval = setInterval(() => {
|
||||||
|
elapsedSeconds++;
|
||||||
|
const hours = Math.floor(elapsedSeconds / 3600);
|
||||||
|
const minutes = Math.floor((elapsedSeconds % 3600) / 60);
|
||||||
|
const seconds = elapsedSeconds % 60;
|
||||||
|
|
||||||
|
document.getElementById('timer').textContent =
|
||||||
|
`${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
||||||
|
|
||||||
|
// 5분마다 타임라인 추가
|
||||||
|
if (elapsedSeconds % 300 === 0) {
|
||||||
|
addTimelineEvent(`${hours}시간 ${minutes}분 경과`);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 타임라인 이벤트 추가
|
||||||
|
function addTimelineEvent(text) {
|
||||||
|
const timeline = document.getElementById('timeline');
|
||||||
|
const time = new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' });
|
||||||
|
const event = document.createElement('div');
|
||||||
|
event.style.marginBottom = 'var(--spacing-2)';
|
||||||
|
event.innerHTML = `<strong>${time}</strong> ${text}`;
|
||||||
|
timeline.appendChild(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
// AI 제안 시뮬레이션
|
||||||
|
function generateAISuggestions() {
|
||||||
|
const suggestions = [
|
||||||
|
{
|
||||||
|
title: '논의 내용 요약',
|
||||||
|
text: '1분기 매출 목표를 20% 상향 조정하고, 마케팅 예산을 15% 증액하기로 논의했습니다.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '결정 사항',
|
||||||
|
text: '신규 프로젝트 팀을 구성하고, 김민준님이 PM을 맡기로 결정했습니다.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Todo 추출',
|
||||||
|
text: '• 마케팅 예산안 작성 (박서연, 10/25)\n• 경쟁사 분석 보고서 (이준호, 10/22)'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const container = document.getElementById('aiSuggestions');
|
||||||
|
|
||||||
|
function showNextSuggestion() {
|
||||||
|
if (currentSuggestionIndex < suggestions.length) {
|
||||||
|
const suggestion = suggestions[currentSuggestionIndex];
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'ai-suggestion-card';
|
||||||
|
card.innerHTML = `
|
||||||
|
<div class="ai-suggestion-title">✨ ${suggestion.title}</div>
|
||||||
|
<div class="ai-suggestion-text">${suggestion.text}</div>
|
||||||
|
<div class="ai-actions">
|
||||||
|
<button class="btn btn-primary btn-sm" onclick="applySuggestion(this, '${suggestion.title}')">적용</button>
|
||||||
|
<button class="btn btn-text btn-sm" onclick="dismissSuggestion(this)">무시</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
container.appendChild(card);
|
||||||
|
currentSuggestionIndex++;
|
||||||
|
|
||||||
|
// 5초 후 다음 제안
|
||||||
|
setTimeout(showNextSuggestion, 5000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3초 후 첫 제안 시작
|
||||||
|
setTimeout(showNextSuggestion, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 제안 적용
|
||||||
|
function applySuggestion(button, title) {
|
||||||
|
const card = button.closest('.ai-suggestion-card');
|
||||||
|
const text = card.querySelector('.ai-suggestion-text').textContent;
|
||||||
|
|
||||||
|
// 첫 번째 섹션에 텍스트 추가 (시뮬레이션)
|
||||||
|
const sections = document.querySelectorAll('.section-body');
|
||||||
|
if (sections.length > 0) {
|
||||||
|
const firstSection = sections[0];
|
||||||
|
if (!firstSection.textContent.trim()) {
|
||||||
|
firstSection.textContent = text;
|
||||||
|
} else {
|
||||||
|
firstSection.innerHTML += `<br><br>${text}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
card.remove();
|
||||||
|
showToast('AI 제안이 적용되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 제안 무시
|
||||||
|
function dismissSuggestion(button) {
|
||||||
|
button.closest('.ai-suggestion-card').remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 용어 설명 렌더링
|
||||||
|
function renderTerms() {
|
||||||
|
const terms = [
|
||||||
|
{ name: 'ROI', definition: '투자 대비 수익률 (Return On Investment)', source: '과거 회의록: 2024년 4분기 전략 회의' },
|
||||||
|
{ name: 'KPI', definition: '핵심 성과 지표 (Key Performance Indicator)', source: '사내 용어집' },
|
||||||
|
{ name: 'MQL', definition: '마케팅 적격 리드 (Marketing Qualified Lead)', source: '마케팅 팀 문서' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const termsList = document.getElementById('termsList');
|
||||||
|
termsList.innerHTML = terms.map(term => `
|
||||||
|
<div class="term-card">
|
||||||
|
<div class="term-name">${term.name}</div>
|
||||||
|
<div class="term-definition">${term.definition}</div>
|
||||||
|
<div class="term-source">출처: ${term.source}</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 탭 전환
|
||||||
|
function switchTab(tabName) {
|
||||||
|
document.querySelectorAll('.panel-tab').forEach(tab => {
|
||||||
|
tab.classList.remove('active');
|
||||||
|
});
|
||||||
|
document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
|
||||||
|
|
||||||
|
document.querySelectorAll('.tab-pane').forEach(pane => {
|
||||||
|
pane.classList.add('hidden');
|
||||||
|
});
|
||||||
|
document.getElementById(`${tabName}Tab`).classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 툴바 명령
|
||||||
|
function execCommand(command) {
|
||||||
|
document.execCommand(command, false, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function insertLink() {
|
||||||
|
const url = prompt('링크 URL을 입력하세요:');
|
||||||
|
if (url) {
|
||||||
|
document.execCommand('createLink', false, url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 녹음 일시정지
|
||||||
|
document.getElementById('pauseRecording').addEventListener('click', function() {
|
||||||
|
if (this.textContent.includes('일시정지')) {
|
||||||
|
clearInterval(timerInterval);
|
||||||
|
this.innerHTML = '▶️ 계속';
|
||||||
|
document.querySelector('.recording-dot').style.display = 'none';
|
||||||
|
document.querySelector('.voice-status').style.display = 'none';
|
||||||
|
showToast('녹음이 일시정지되었습니다.', 'info');
|
||||||
|
} else {
|
||||||
|
startTimer();
|
||||||
|
this.innerHTML = '⏸️ 일시정지';
|
||||||
|
document.querySelector('.recording-dot').style.display = 'block';
|
||||||
|
document.querySelector('.voice-status').style.display = 'flex';
|
||||||
|
showToast('녹음이 재개되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 회의 종료
|
||||||
|
document.getElementById('endMeeting').addEventListener('click', () => {
|
||||||
|
if (confirm('회의를 종료하시겠습니까?')) {
|
||||||
|
clearInterval(timerInterval);
|
||||||
|
|
||||||
|
// 회의록 데이터 저장
|
||||||
|
const sections = {};
|
||||||
|
document.querySelectorAll('.section-body').forEach(section => {
|
||||||
|
const id = section.dataset.sectionId;
|
||||||
|
sections[id] = section.innerHTML;
|
||||||
|
});
|
||||||
|
|
||||||
|
sessionStorage.setItem('meetingContent', JSON.stringify(sections));
|
||||||
|
sessionStorage.setItem('meetingDuration', elapsedSeconds);
|
||||||
|
|
||||||
|
navigateTo('06-검증완료.html');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 초기화
|
||||||
|
loadMeetingInfo();
|
||||||
|
startTimer();
|
||||||
|
generateAISuggestions();
|
||||||
|
renderTerms();
|
||||||
|
addTimelineEvent('회의 시작');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
499
design/uiux/prototype/06-검증완료.html
Normal file
499
design/uiux/prototype/06-검증완료.html
Normal file
@ -0,0 +1,499 @@
|
|||||||
|
<!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>
|
||||||
|
.verification-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-circle-large {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
margin: 0 auto var(--spacing-4);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-ring {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-ring-circle {
|
||||||
|
transition: stroke-dashoffset 0.5s;
|
||||||
|
stroke: var(--primary-main);
|
||||||
|
stroke-width: 8;
|
||||||
|
fill: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-ring-bg {
|
||||||
|
stroke: var(--gray-200);
|
||||||
|
stroke-width: 8;
|
||||||
|
fill: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 400px;
|
||||||
|
gap: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-list-panel {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-item {
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-item:hover {
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-item.verified {
|
||||||
|
background-color: rgba(16, 185, 129, 0.05);
|
||||||
|
border-color: var(--success-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-item.pending {
|
||||||
|
background-color: rgba(245, 158, 11, 0.05);
|
||||||
|
border-color: var(--warning-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-header-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-name-verify {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-status {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
padding: var(--spacing-1) var(--spacing-3);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-status.verified {
|
||||||
|
background-color: var(--success-light);
|
||||||
|
color: var(--success-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verification-status.pending {
|
||||||
|
background-color: var(--warning-light);
|
||||||
|
color: var(--warning-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifier-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
margin-top: var(--spacing-2);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifier-avatar {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--gray-200);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-btn {
|
||||||
|
margin-top: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
margin-top: var(--spacing-2);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-panel {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
position: sticky;
|
||||||
|
top: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-item {
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
background: var(--gray-50);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
margin-bottom: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-value {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-progress {
|
||||||
|
margin-top: var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-progress-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-avatar-small {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--gray-200);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-name {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-small {
|
||||||
|
height: 6px;
|
||||||
|
background: var(--gray-200);
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--primary-main);
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-percentage {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: var(--spacing-8);
|
||||||
|
padding-top: var(--spacing-6);
|
||||||
|
border-top: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
.verification-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-panel {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="verification-container">
|
||||||
|
<div class="verification-header">
|
||||||
|
<div class="progress-circle-large">
|
||||||
|
<svg class="progress-ring" width="120" height="120">
|
||||||
|
<circle class="progress-ring-bg" cx="60" cy="60" r="52"></circle>
|
||||||
|
<circle class="progress-ring-circle" cx="60" cy="60" r="52"
|
||||||
|
stroke-dasharray="326.73" stroke-dashoffset="0" id="progressCircle"></circle>
|
||||||
|
</svg>
|
||||||
|
<div class="progress-text" id="progressText">0%</div>
|
||||||
|
</div>
|
||||||
|
<h1>섹션 검증</h1>
|
||||||
|
<p style="color: var(--gray-500);">
|
||||||
|
각 섹션을 확인하고 검증을 완료하세요
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="verification-layout">
|
||||||
|
<!-- 섹션 리스트 -->
|
||||||
|
<div class="section-list-panel">
|
||||||
|
<h3 style="margin-bottom: var(--spacing-4);">검증 항목</h3>
|
||||||
|
<div id="verificationList"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 통계 패널 -->
|
||||||
|
<div class="stats-panel">
|
||||||
|
<h3 style="margin-bottom: var(--spacing-4);">검증 현황</h3>
|
||||||
|
|
||||||
|
<div class="stats-item">
|
||||||
|
<div class="stats-label">전체 진행률</div>
|
||||||
|
<div class="stats-value" id="totalProgress">0%</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats-item">
|
||||||
|
<div class="stats-label">검증 완료</div>
|
||||||
|
<div class="stats-value">
|
||||||
|
<span id="verifiedCount">0</span> / <span id="totalCount">0</span> 섹션
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats-item">
|
||||||
|
<div class="stats-label">잠금 섹션</div>
|
||||||
|
<div class="stats-value" id="lockedCount">0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="participant-progress">
|
||||||
|
<div class="stats-label" style="margin-bottom: var(--spacing-3);">참석자별 진행률</div>
|
||||||
|
<div id="participantProgress"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 액션 버튼 -->
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button type="button" class="btn btn-text" onclick="navigateTo('05-회의진행.html')">
|
||||||
|
← 회의록으로 돌아가기
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="completeVerification" disabled>
|
||||||
|
검증 완료 및 회의 종료 →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="common.js"></script>
|
||||||
|
<script>
|
||||||
|
let sections = [];
|
||||||
|
let verifiedSections = new Set();
|
||||||
|
|
||||||
|
// 섹션 데이터 로드
|
||||||
|
function loadSections() {
|
||||||
|
const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
|
||||||
|
|
||||||
|
if (template.sections) {
|
||||||
|
sections = template.sections.map(section => ({
|
||||||
|
...section,
|
||||||
|
verified: false,
|
||||||
|
locked: false,
|
||||||
|
verifier: null,
|
||||||
|
verifiedAt: null
|
||||||
|
}));
|
||||||
|
|
||||||
|
renderVerificationList();
|
||||||
|
renderParticipantProgress();
|
||||||
|
updateStats();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 검증 리스트 렌더링
|
||||||
|
function renderVerificationList() {
|
||||||
|
const list = document.getElementById('verificationList');
|
||||||
|
const currentUser = getCurrentUser();
|
||||||
|
|
||||||
|
list.innerHTML = sections.map((section, index) => `
|
||||||
|
<div class="verification-item ${section.verified ? 'verified' : 'pending'}" id="section-${index}">
|
||||||
|
<div class="verification-header-item">
|
||||||
|
<div class="section-name-verify">
|
||||||
|
${section.name}
|
||||||
|
${section.required ? '<span style="color: var(--error-main);">*</span>' : ''}
|
||||||
|
</div>
|
||||||
|
<div class="verification-status ${section.verified ? 'verified' : 'pending'}">
|
||||||
|
${section.verified ? '✓ 검증 완료' : '⏳ 검증 대기'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${section.verified && section.verifier ? `
|
||||||
|
<div class="verifier-info">
|
||||||
|
<div class="verifier-avatar">${getUserById(section.verifier)?.avatar || '👤'}</div>
|
||||||
|
<span>검증자: ${getUserName(section.verifier)}</span>
|
||||||
|
<span style="color: var(--gray-400);">•</span>
|
||||||
|
<span>${new Date(section.verifiedAt).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}</span>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
|
||||||
|
${!section.verified ? `
|
||||||
|
<button class="btn btn-primary btn-sm verify-btn" onclick="verifySectionItem(${index})">
|
||||||
|
검증 완료 표시
|
||||||
|
</button>
|
||||||
|
` : `
|
||||||
|
<div class="lock-toggle">
|
||||||
|
<input type="checkbox" id="lock-${index}" ${section.locked ? 'checked' : ''} onchange="toggleLock(${index})">
|
||||||
|
<label for="lock-${index}">섹션 잠금 (편집 불가)</label>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 섹션 검증
|
||||||
|
function verifySectionItem(index) {
|
||||||
|
const currentUser = getCurrentUser();
|
||||||
|
sections[index].verified = true;
|
||||||
|
sections[index].verifier = currentUser.id;
|
||||||
|
sections[index].verifiedAt = new Date().toISOString();
|
||||||
|
|
||||||
|
verifiedSections.add(index);
|
||||||
|
|
||||||
|
renderVerificationList();
|
||||||
|
updateStats();
|
||||||
|
|
||||||
|
showToast(`"${sections[index].name}" 섹션이 검증되었습니다.`, 'success');
|
||||||
|
|
||||||
|
// 모두 검증되면 버튼 활성화
|
||||||
|
checkAllVerified();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 섹션 잠금 토글
|
||||||
|
function toggleLock(index) {
|
||||||
|
const checkbox = document.getElementById(`lock-${index}`);
|
||||||
|
sections[index].locked = checkbox.checked;
|
||||||
|
|
||||||
|
updateStats();
|
||||||
|
|
||||||
|
if (checkbox.checked) {
|
||||||
|
showToast('섹션이 잠겼습니다. 더 이상 편집할 수 없습니다.', 'info');
|
||||||
|
} else {
|
||||||
|
showToast('섹션 잠금이 해제되었습니다.', 'info');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 통계 업데이트
|
||||||
|
function updateStats() {
|
||||||
|
const verifiedCount = sections.filter(s => s.verified).length;
|
||||||
|
const totalCount = sections.length;
|
||||||
|
const lockedCount = sections.filter(s => s.locked).length;
|
||||||
|
const progress = totalCount > 0 ? Math.round((verifiedCount / totalCount) * 100) : 0;
|
||||||
|
|
||||||
|
document.getElementById('verifiedCount').textContent = verifiedCount;
|
||||||
|
document.getElementById('totalCount').textContent = totalCount;
|
||||||
|
document.getElementById('lockedCount').textContent = lockedCount;
|
||||||
|
document.getElementById('totalProgress').textContent = `${progress}%`;
|
||||||
|
document.getElementById('progressText').textContent = `${progress}%`;
|
||||||
|
|
||||||
|
// 진행률 원 업데이트
|
||||||
|
const circle = document.getElementById('progressCircle');
|
||||||
|
const circumference = 2 * Math.PI * 52;
|
||||||
|
const offset = circumference - (progress / 100) * circumference;
|
||||||
|
circle.style.strokeDashoffset = offset;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 참석자별 진행률
|
||||||
|
function renderParticipantProgress() {
|
||||||
|
const users = getFromStorage(STORAGE_KEYS.USERS) || [];
|
||||||
|
const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
|
||||||
|
|
||||||
|
if (meetingData.participants) {
|
||||||
|
const progressContainer = document.getElementById('participantProgress');
|
||||||
|
|
||||||
|
progressContainer.innerHTML = meetingData.participants.map(email => {
|
||||||
|
const user = users.find(u => u.email === email) || { name: email, avatar: '👤', id: 'unknown' };
|
||||||
|
const userVerifications = sections.filter(s => s.verifier === user.id).length;
|
||||||
|
const userProgress = sections.length > 0 ? Math.round((userVerifications / sections.length) * 100) : 0;
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="participant-progress-item">
|
||||||
|
<div class="participant-avatar-small">${user.avatar}</div>
|
||||||
|
<div class="progress-info">
|
||||||
|
<div class="progress-name">${user.name}</div>
|
||||||
|
<div class="progress-bar-small">
|
||||||
|
<div class="progress-fill" style="width: ${userProgress}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-percentage">${userProgress}%</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 모든 섹션 검증 확인
|
||||||
|
function checkAllVerified() {
|
||||||
|
const requiredSections = sections.filter(s => s.required);
|
||||||
|
const allRequiredVerified = requiredSections.every(s => s.verified);
|
||||||
|
|
||||||
|
const completeBtn = document.getElementById('completeVerification');
|
||||||
|
completeBtn.disabled = !allRequiredVerified;
|
||||||
|
|
||||||
|
if (allRequiredVerified) {
|
||||||
|
showToast('모든 필수 섹션이 검증되었습니다!', 'success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 검증 완료 및 회의 종료
|
||||||
|
document.getElementById('completeVerification').addEventListener('click', () => {
|
||||||
|
const allVerified = sections.every(s => !s.required || s.verified);
|
||||||
|
|
||||||
|
if (!allVerified) {
|
||||||
|
showToast('모든 필수 섹션을 검증해주세요.', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (confirm('검증을 완료하고 회의를 종료하시겠습니까?')) {
|
||||||
|
// 검증 데이터 저장
|
||||||
|
sessionStorage.setItem('verificationData', JSON.stringify(sections));
|
||||||
|
|
||||||
|
showToast('검증이 완료되었습니다.', 'success');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
navigateTo('07-회의종료.html');
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 초기화
|
||||||
|
loadSections();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
573
design/uiux/prototype/07-회의종료.html
Normal file
573
design/uiux/prototype/07-회의종료.html
Normal file
@ -0,0 +1,573 @@
|
|||||||
|
<!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>
|
||||||
|
.completion-container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.completion-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-icon {
|
||||||
|
font-size: 80px;
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: var(--spacing-6);
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--spacing-6);
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-panel {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-action {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--primary-main);
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-item {
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
background: var(--gray-50);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
border-left: 4px solid var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-content {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-meta-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-stats {
|
||||||
|
margin-top: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--gray-200);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-name {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-bar {
|
||||||
|
height: 6px;
|
||||||
|
background: var(--gray-200);
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--primary-main);
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-count {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.keyword-cloud {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
margin-top: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.keyword-tag {
|
||||||
|
padding: var(--spacing-2) var(--spacing-4);
|
||||||
|
background: var(--primary-light);
|
||||||
|
color: var(--primary-dark);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-meeting {
|
||||||
|
background: linear-gradient(135deg, var(--primary-main), var(--secondary-main));
|
||||||
|
color: white;
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
margin-top: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-meeting-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-meeting-date {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: var(--spacing-8);
|
||||||
|
padding-top: var(--spacing-6);
|
||||||
|
border-top: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="completion-container">
|
||||||
|
<div class="completion-header">
|
||||||
|
<div class="success-icon">🎉</div>
|
||||||
|
<h1>회의가 종료되었습니다</h1>
|
||||||
|
<p style="color: var(--gray-500); font-size: 1.125rem;">
|
||||||
|
회의 통계와 Todo를 확인하고 최종 확정하세요
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 통계 카드 -->
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-icon">⏱️</div>
|
||||||
|
<div class="stat-value" id="meetingDuration">-</div>
|
||||||
|
<div class="stat-label">회의 총 시간</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-icon">👥</div>
|
||||||
|
<div class="stat-value" id="participantCount">-</div>
|
||||||
|
<div class="stat-label">참석자 수</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-icon">💬</div>
|
||||||
|
<div class="stat-value" id="speechCount">-</div>
|
||||||
|
<div class="stat-label">총 발언 횟수</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-icon">✅</div>
|
||||||
|
<div class="stat-value" id="todoCount">-</div>
|
||||||
|
<div class="stat-label">생성된 Todo</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 콘텐츠 그리드 -->
|
||||||
|
<div class="content-grid">
|
||||||
|
<!-- 필수 항목 검사 -->
|
||||||
|
<div class="content-panel">
|
||||||
|
<div class="panel-title">
|
||||||
|
<span>📋</span>
|
||||||
|
<span>필수 항목 검사</span>
|
||||||
|
</div>
|
||||||
|
<div id="checklistItems"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AI Todo 추출 -->
|
||||||
|
<div class="content-panel">
|
||||||
|
<div class="panel-title">
|
||||||
|
<span>✨</span>
|
||||||
|
<span>AI Todo 추출 결과</span>
|
||||||
|
</div>
|
||||||
|
<div id="todoList"></div>
|
||||||
|
<button class="btn btn-secondary btn-sm" style="width: 100%; margin-top: var(--spacing-3);" onclick="openModal('editTodoModal')">
|
||||||
|
Todo 수정
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 발언 통계 -->
|
||||||
|
<div class="content-panel">
|
||||||
|
<div class="panel-title">
|
||||||
|
<span>📊</span>
|
||||||
|
<span>화자별 발언 통계</span>
|
||||||
|
</div>
|
||||||
|
<div class="speaker-stats" id="speakerStats"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 주요 키워드 -->
|
||||||
|
<div class="content-panel">
|
||||||
|
<div class="panel-title">
|
||||||
|
<span>🔑</span>
|
||||||
|
<span>주요 키워드</span>
|
||||||
|
</div>
|
||||||
|
<div class="keyword-cloud" id="keywordCloud"></div>
|
||||||
|
|
||||||
|
<!-- 다음 회의 일정 감지 -->
|
||||||
|
<div class="next-meeting">
|
||||||
|
<div class="next-meeting-title">🗓️ AI가 감지한 다음 회의</div>
|
||||||
|
<div class="next-meeting-date">2025년 10월 27일 14:00</div>
|
||||||
|
<button class="btn" style="background: white; color: var(--primary-main);" onclick="addToCalendar()">
|
||||||
|
📅 캘린더에 추가
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 액션 버튼 -->
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button type="button" class="btn btn-text" onclick="navigateTo('05-회의진행.html')">
|
||||||
|
← 회의록으로 돌아가기
|
||||||
|
</button>
|
||||||
|
<div style="display: flex; gap: var(--spacing-3);">
|
||||||
|
<button type="button" class="btn btn-secondary" id="saveDraft">
|
||||||
|
나중에 확정
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="finalizeMinutes">
|
||||||
|
최종 확정 →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Todo 수정 모달 -->
|
||||||
|
<div class="modal-backdrop" id="editTodoModal">
|
||||||
|
<div class="modal">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3 class="modal-title">Todo 수정</h3>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p style="color: var(--gray-600); margin-bottom: var(--spacing-4);">
|
||||||
|
AI가 추출한 Todo를 수정하거나 새로운 Todo를 추가할 수 있습니다.
|
||||||
|
</p>
|
||||||
|
<div id="editableTodoList"></div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-text" onclick="closeModal('editTodoModal')">취소</button>
|
||||||
|
<button class="btn btn-primary" onclick="saveTodos()">저장</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="common.js"></script>
|
||||||
|
<script>
|
||||||
|
let extractedTodos = [];
|
||||||
|
|
||||||
|
// 회의 통계 로드
|
||||||
|
function loadMeetingStats() {
|
||||||
|
const duration = parseInt(sessionStorage.getItem('meetingDuration') || '0');
|
||||||
|
const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
|
||||||
|
const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
|
||||||
|
|
||||||
|
// 회의 시간
|
||||||
|
document.getElementById('meetingDuration').textContent = formatDuration(duration / 60);
|
||||||
|
|
||||||
|
// 참석자 수
|
||||||
|
const participantCount = meetingData.participants?.length || 0;
|
||||||
|
document.getElementById('participantCount').textContent = `${participantCount}명`;
|
||||||
|
|
||||||
|
// 발언 횟수 (시뮬레이션)
|
||||||
|
const totalSpeech = 45 + Math.floor(Math.random() * 20);
|
||||||
|
document.getElementById('speechCount').textContent = `${totalSpeech}회`;
|
||||||
|
|
||||||
|
// Todo 개수
|
||||||
|
extractedTodos = generateTodos();
|
||||||
|
document.getElementById('todoCount').textContent = `${extractedTodos.length}개`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 필수 항목 체크리스트
|
||||||
|
function renderChecklist() {
|
||||||
|
const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
|
||||||
|
const content = JSON.parse(sessionStorage.getItem('meetingContent') || '{}');
|
||||||
|
|
||||||
|
const requiredSections = template.sections?.filter(s => s.required) || [];
|
||||||
|
const checklist = requiredSections.map(section => {
|
||||||
|
const hasContent = content[section.id] && content[section.id].trim().length > 0;
|
||||||
|
return {
|
||||||
|
name: section.name,
|
||||||
|
completed: hasContent,
|
||||||
|
sectionId: section.id
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const container = document.getElementById('checklistItems');
|
||||||
|
container.innerHTML = checklist.map(item => `
|
||||||
|
<div class="checklist-item">
|
||||||
|
<div class="checklist-icon">${item.completed ? '✅' : '❌'}</div>
|
||||||
|
<div class="checklist-text">${item.name}</div>
|
||||||
|
${!item.completed ? `<span class="checklist-action" onclick="goToSection('${item.sectionId}')">작성하기</span>` : ''}
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
// 모두 완료되었는지 확인
|
||||||
|
const allCompleted = checklist.every(item => item.completed);
|
||||||
|
document.getElementById('finalizeMinutes').disabled = !allCompleted;
|
||||||
|
|
||||||
|
return allCompleted;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Todo 생성 (AI 시뮬레이션)
|
||||||
|
function generateTodos() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
id: generateId('todo'),
|
||||||
|
content: '1분기 마케팅 예산안 작성',
|
||||||
|
assignee: 'user2',
|
||||||
|
dueDate: '2025-10-25',
|
||||||
|
priority: 'high',
|
||||||
|
source: '결정 사항 섹션'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: generateId('todo'),
|
||||||
|
content: '경쟁사 분석 보고서 작성',
|
||||||
|
assignee: 'user3',
|
||||||
|
dueDate: '2025-10-22',
|
||||||
|
priority: 'high',
|
||||||
|
source: '논의 내용 섹션'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: generateId('todo'),
|
||||||
|
content: '신규 프로젝트 팀 구성안 제출',
|
||||||
|
assignee: 'user1',
|
||||||
|
dueDate: '2025-10-23',
|
||||||
|
priority: 'normal',
|
||||||
|
source: '결정 사항 섹션'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Todo 렌더링
|
||||||
|
function renderTodos() {
|
||||||
|
const container = document.getElementById('todoList');
|
||||||
|
container.innerHTML = extractedTodos.map(todo => `
|
||||||
|
<div class="todo-item">
|
||||||
|
<div class="todo-content">${todo.content}</div>
|
||||||
|
<div class="todo-meta">
|
||||||
|
<div class="todo-meta-item">
|
||||||
|
<span>👤</span>
|
||||||
|
<span>${getUserName(todo.assignee)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="todo-meta-item">
|
||||||
|
<span>📅</span>
|
||||||
|
<span>${getDdayText(todo.dueDate)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="todo-meta-item">
|
||||||
|
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${todo.priority === 'high' ? 'var(--error-main)' : 'var(--gray-400)'};"></span>
|
||||||
|
<span>${todo.priority === 'high' ? '높음' : '보통'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 화자별 통계
|
||||||
|
function renderSpeakerStats() {
|
||||||
|
const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
|
||||||
|
const speakers = (meetingData.participants || []).map(email => {
|
||||||
|
const user = getUserById(email) || { name: email, avatar: '👤' };
|
||||||
|
const count = 10 + Math.floor(Math.random() * 20);
|
||||||
|
return { ...user, count };
|
||||||
|
});
|
||||||
|
|
||||||
|
const maxCount = Math.max(...speakers.map(s => s.count));
|
||||||
|
const container = document.getElementById('speakerStats');
|
||||||
|
|
||||||
|
container.innerHTML = speakers.map(speaker => `
|
||||||
|
<div class="speaker-item">
|
||||||
|
<div class="speaker-avatar">${speaker.avatar}</div>
|
||||||
|
<div class="speaker-info">
|
||||||
|
<div class="speaker-name">${speaker.name}</div>
|
||||||
|
<div class="speaker-bar">
|
||||||
|
<div class="speaker-fill" style="width: ${(speaker.count / maxCount) * 100}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="speaker-count">${speaker.count}회</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 키워드 렌더링
|
||||||
|
function renderKeywords() {
|
||||||
|
const keywords = ['1분기 목표', '마케팅', '예산', 'ROI', '경쟁사 분석', '프로젝트', '전략', '실적'];
|
||||||
|
const container = document.getElementById('keywordCloud');
|
||||||
|
|
||||||
|
container.innerHTML = keywords.map(keyword => `
|
||||||
|
<div class="keyword-tag">${keyword}</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 섹션으로 이동
|
||||||
|
function goToSection(sectionId) {
|
||||||
|
sessionStorage.setItem('focusSection', sectionId);
|
||||||
|
navigateTo('05-회의진행.html');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Todo 저장
|
||||||
|
function saveTodos() {
|
||||||
|
showToast('Todo가 저장되었습니다.', 'success');
|
||||||
|
closeModal('editTodoModal');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 캘린더에 추가
|
||||||
|
function addToCalendar() {
|
||||||
|
showToast('다음 회의 일정이 캘린더에 추가되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 나중에 확정
|
||||||
|
document.getElementById('saveDraft').addEventListener('click', () => {
|
||||||
|
if (confirm('나중에 확정하시겠습니까?')) {
|
||||||
|
showToast('임시 저장되었습니다.', 'info');
|
||||||
|
setTimeout(() => {
|
||||||
|
navigateTo('02-대시보드.html');
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 최종 확정
|
||||||
|
document.getElementById('finalizeMinutes').addEventListener('click', () => {
|
||||||
|
const allCompleted = renderChecklist();
|
||||||
|
|
||||||
|
if (!allCompleted) {
|
||||||
|
showToast('모든 필수 항목을 작성해주세요.', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (confirm('회의록을 최종 확정하시겠습니까?\n확정 후에는 수정이 제한됩니다.')) {
|
||||||
|
// Todo 저장
|
||||||
|
extractedTodos.forEach(todo => {
|
||||||
|
todo.meetingId = 'meeting_final';
|
||||||
|
todo.status = 'pending';
|
||||||
|
todo.progress = 0;
|
||||||
|
saveTodo(todo);
|
||||||
|
});
|
||||||
|
|
||||||
|
showToast('회의록이 최종 확정되었습니다.', 'success');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
navigateTo('08-회의록공유.html');
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 초기화
|
||||||
|
loadMeetingStats();
|
||||||
|
renderChecklist();
|
||||||
|
renderTodos();
|
||||||
|
renderSpeakerStats();
|
||||||
|
renderKeywords();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
610
design/uiux/prototype/08-회의록공유.html
Normal file
610
design/uiux/prototype/08-회의록공유.html
Normal file
@ -0,0 +1,610 @@
|
|||||||
|
<!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>
|
||||||
|
.share-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-icon {
|
||||||
|
font-size: 64px;
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-form {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
margin-bottom: var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
margin-bottom: var(--spacing-6);
|
||||||
|
padding-bottom: var(--spacing-6);
|
||||||
|
border-bottom: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-item:hover {
|
||||||
|
background: var(--gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-item input[type="radio"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-item.selected {
|
||||||
|
border-color: var(--primary-main);
|
||||||
|
background: rgba(0, 217, 177, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipient-selector {
|
||||||
|
margin-top: var(--spacing-3);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipient-selector.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipient-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
margin-top: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipient-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
padding: var(--spacing-2) var(--spacing-3);
|
||||||
|
background: var(--primary-light);
|
||||||
|
color: var(--primary-dark);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-display {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
margin-top: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-input {
|
||||||
|
flex: 1;
|
||||||
|
background: var(--gray-50);
|
||||||
|
border: 1px solid var(--gray-300);
|
||||||
|
padding: var(--spacing-3) var(--spacing-4);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-settings {
|
||||||
|
margin-top: var(--spacing-4);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
background: var(--gray-50);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-settings-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-settings-content {
|
||||||
|
margin-top: var(--spacing-4);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-settings-content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-history {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-time {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-method {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-1);
|
||||||
|
padding: var(--spacing-1) var(--spacing-2);
|
||||||
|
background: var(--primary-light);
|
||||||
|
color: var(--primary-dark);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-recipients {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-status {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: var(--spacing-1) var(--spacing-2);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-status.sent {
|
||||||
|
background: var(--success-light);
|
||||||
|
color: var(--success-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-status.read {
|
||||||
|
background: var(--info-light);
|
||||||
|
color: var(--info-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: var(--spacing-8);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="share-container">
|
||||||
|
<div class="share-header">
|
||||||
|
<div class="share-icon">📤</div>
|
||||||
|
<h1>회의록 공유</h1>
|
||||||
|
<p style="color: var(--gray-500); font-size: 1.125rem;">
|
||||||
|
참석자에게 회의록을 공유하고 배포하세요
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="shareForm" class="share-form">
|
||||||
|
<!-- 공유 대상 선택 -->
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="section-header">공유 대상</div>
|
||||||
|
<div class="radio-group">
|
||||||
|
<label class="radio-item selected">
|
||||||
|
<input type="radio" name="shareTarget" value="all" checked onchange="updateRecipientSelector()">
|
||||||
|
<div>
|
||||||
|
<div style="font-weight: 500;">참석자 전체</div>
|
||||||
|
<div style="font-size: 0.875rem; color: var(--gray-500);">회의에 참석한 모든 사람에게 공유합니다</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="radio-item">
|
||||||
|
<input type="radio" name="shareTarget" value="specific" onchange="updateRecipientSelector()">
|
||||||
|
<div>
|
||||||
|
<div style="font-weight: 500;">특정 참석자 선택</div>
|
||||||
|
<div style="font-size: 0.875rem; color: var(--gray-500);">선택한 참석자에게만 공유합니다</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipient-selector" id="recipientSelector">
|
||||||
|
<div style="margin-top: var(--spacing-4); margin-bottom: var(--spacing-2); font-weight: 500;">참석자 선택</div>
|
||||||
|
<div id="participantCheckboxes"></div>
|
||||||
|
<div class="recipient-list" id="selectedRecipients"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group" style="margin-top: var(--spacing-4);">
|
||||||
|
<label class="input-label">외부 공유 (선택)</label>
|
||||||
|
<input type="email" id="externalEmail" class="input" placeholder="외부 이메일 주소">
|
||||||
|
<button type="button" class="btn btn-secondary btn-sm mt-2" onclick="addExternalEmail()">
|
||||||
|
+ 외부 이메일 추가
|
||||||
|
</button>
|
||||||
|
<div class="recipient-list" id="externalRecipients"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 공유 권한 설정 -->
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="section-header">공유 권한</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<select id="permission" class="select">
|
||||||
|
<option value="read_only" selected>읽기 전용 (기본)</option>
|
||||||
|
<option value="comment">댓글 가능</option>
|
||||||
|
<option value="edit">편집 가능</option>
|
||||||
|
</select>
|
||||||
|
<small style="display: block; margin-top: var(--spacing-2); color: var(--gray-500);">
|
||||||
|
권한에 따라 수신자가 회의록을 보거나 수정할 수 있는 범위가 결정됩니다
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 공유 방식 선택 -->
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="section-header">공유 방식</div>
|
||||||
|
<div class="checkbox-group">
|
||||||
|
<div class="checkbox-item">
|
||||||
|
<input type="checkbox" id="shareEmail" checked>
|
||||||
|
<label for="shareEmail">
|
||||||
|
<strong>이메일로 전송</strong>
|
||||||
|
<div style="font-size: 0.875rem; color: var(--gray-500); margin-top: 2px;">수신자 이메일로 회의록 링크를 발송합니다</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="checkbox-item">
|
||||||
|
<input type="checkbox" id="shareSlack">
|
||||||
|
<label for="shareSlack">
|
||||||
|
<strong>슬랙으로 전송</strong>
|
||||||
|
<div style="font-size: 0.875rem; color: var(--gray-500); margin-top: 2px;">연동된 슬랙 채널에 알림을 발송합니다</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 공유 링크 설정 -->
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="section-header">공유 링크</div>
|
||||||
|
<div class="link-display">
|
||||||
|
<input type="text" class="link-input" id="shareLink" value="https://meeting.example.com/share/abc123xyz" readonly>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="copyLink()">
|
||||||
|
📋 복사
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 고급 설정 -->
|
||||||
|
<div class="advanced-settings">
|
||||||
|
<div class="advanced-settings-header" onclick="toggleAdvancedSettings()">
|
||||||
|
<span style="font-weight: 500;">고급 설정</span>
|
||||||
|
<span id="advancedToggle">▼</span>
|
||||||
|
</div>
|
||||||
|
<div class="advanced-settings-content" id="advancedContent">
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">링크 유효 기간</label>
|
||||||
|
<select id="linkExpiration" class="select">
|
||||||
|
<option value="none">무제한</option>
|
||||||
|
<option value="7">7일</option>
|
||||||
|
<option value="30" selected>30일</option>
|
||||||
|
<option value="custom">직접 입력</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mt-4">
|
||||||
|
<label class="input-label">비밀번호 설정 (선택)</label>
|
||||||
|
<input type="password" id="linkPassword" class="input" placeholder="링크 접근 시 필요한 비밀번호">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- 공유 이력 -->
|
||||||
|
<div class="share-history">
|
||||||
|
<div class="section-header">공유 이력</div>
|
||||||
|
<div id="shareHistoryList"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 액션 버튼 -->
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button type="button" class="btn btn-text" onclick="navigateTo('07-회의종료.html')">
|
||||||
|
← 뒤로
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-primary" onclick="shareMinutes()">
|
||||||
|
공유하기 →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="common.js"></script>
|
||||||
|
<script>
|
||||||
|
let selectedParticipants = [];
|
||||||
|
let externalEmails = [];
|
||||||
|
|
||||||
|
// 참석자 체크박스 렌더링
|
||||||
|
function renderParticipantCheckboxes() {
|
||||||
|
const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
|
||||||
|
const users = getFromStorage(STORAGE_KEYS.USERS) || [];
|
||||||
|
|
||||||
|
if (meetingData.participants) {
|
||||||
|
const container = document.getElementById('participantCheckboxes');
|
||||||
|
container.innerHTML = meetingData.participants.map(email => {
|
||||||
|
const user = users.find(u => u.email === email) || { name: email, avatar: '👤', id: email };
|
||||||
|
return `
|
||||||
|
<div class="checkbox-item">
|
||||||
|
<input type="checkbox" id="participant-${user.id}" value="${email}" onchange="updateSelectedParticipants()">
|
||||||
|
<label for="participant-${user.id}" style="display: flex; align-items: center; gap: var(--spacing-2);">
|
||||||
|
<span>${user.avatar}</span>
|
||||||
|
<span>${user.name}</span>
|
||||||
|
<span style="color: var(--gray-400);">(${email})</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 라디오 버튼 스타일 업데이트
|
||||||
|
document.querySelectorAll('input[name="shareTarget"]').forEach(radio => {
|
||||||
|
radio.addEventListener('change', () => {
|
||||||
|
document.querySelectorAll('.radio-item').forEach(item => {
|
||||||
|
item.classList.remove('selected');
|
||||||
|
});
|
||||||
|
radio.closest('.radio-item').classList.add('selected');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 수신자 선택기 표시/숨김
|
||||||
|
function updateRecipientSelector() {
|
||||||
|
const target = document.querySelector('input[name="shareTarget"]:checked').value;
|
||||||
|
const selector = document.getElementById('recipientSelector');
|
||||||
|
|
||||||
|
if (target === 'specific') {
|
||||||
|
selector.classList.add('active');
|
||||||
|
} else {
|
||||||
|
selector.classList.remove('active');
|
||||||
|
// 모든 체크박스 해제
|
||||||
|
document.querySelectorAll('#participantCheckboxes input[type="checkbox"]').forEach(cb => {
|
||||||
|
cb.checked = false;
|
||||||
|
});
|
||||||
|
selectedParticipants = [];
|
||||||
|
updateSelectedDisplay();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 선택된 참석자 업데이트
|
||||||
|
function updateSelectedParticipants() {
|
||||||
|
selectedParticipants = Array.from(
|
||||||
|
document.querySelectorAll('#participantCheckboxes input[type="checkbox"]:checked')
|
||||||
|
).map(cb => cb.value);
|
||||||
|
|
||||||
|
updateSelectedDisplay();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 선택된 수신자 표시
|
||||||
|
function updateSelectedDisplay() {
|
||||||
|
const container = document.getElementById('selectedRecipients');
|
||||||
|
|
||||||
|
if (selectedParticipants.length === 0) {
|
||||||
|
container.innerHTML = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = selectedParticipants.map(email => `
|
||||||
|
<div class="recipient-chip">
|
||||||
|
<span>${email}</span>
|
||||||
|
<span style="cursor: pointer;" onclick="removeParticipant('${email}')">×</span>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 참석자 제거
|
||||||
|
function removeParticipant(email) {
|
||||||
|
const checkbox = document.querySelector(`#participantCheckboxes input[value="${email}"]`);
|
||||||
|
if (checkbox) {
|
||||||
|
checkbox.checked = false;
|
||||||
|
}
|
||||||
|
updateSelectedParticipants();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 외부 이메일 추가
|
||||||
|
function addExternalEmail() {
|
||||||
|
const input = document.getElementById('externalEmail');
|
||||||
|
const email = input.value.trim();
|
||||||
|
|
||||||
|
if (!email) {
|
||||||
|
showToast('이메일을 입력하세요.', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailRegex.test(email)) {
|
||||||
|
showToast('올바른 이메일 주소를 입력하세요.', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (externalEmails.includes(email)) {
|
||||||
|
showToast('이미 추가된 이메일입니다.', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
externalEmails.push(email);
|
||||||
|
input.value = '';
|
||||||
|
renderExternalEmails();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 외부 이메일 렌더링
|
||||||
|
function renderExternalEmails() {
|
||||||
|
const container = document.getElementById('externalRecipients');
|
||||||
|
|
||||||
|
container.innerHTML = externalEmails.map(email => `
|
||||||
|
<div class="recipient-chip">
|
||||||
|
<span>🌐 ${email}</span>
|
||||||
|
<span style="cursor: pointer;" onclick="removeExternalEmail('${email}')">×</span>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 외부 이메일 제거
|
||||||
|
function removeExternalEmail(email) {
|
||||||
|
externalEmails = externalEmails.filter(e => e !== email);
|
||||||
|
renderExternalEmails();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 링크 복사
|
||||||
|
function copyLink() {
|
||||||
|
const linkInput = document.getElementById('shareLink');
|
||||||
|
linkInput.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
showToast('링크가 클립보드에 복사되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 고급 설정 토글
|
||||||
|
function toggleAdvancedSettings() {
|
||||||
|
const content = document.getElementById('advancedContent');
|
||||||
|
const toggle = document.getElementById('advancedToggle');
|
||||||
|
|
||||||
|
if (content.classList.contains('active')) {
|
||||||
|
content.classList.remove('active');
|
||||||
|
toggle.textContent = '▼';
|
||||||
|
} else {
|
||||||
|
content.classList.add('active');
|
||||||
|
toggle.textContent = '▲';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 공유 이력 렌더링
|
||||||
|
function renderShareHistory() {
|
||||||
|
const history = [
|
||||||
|
{
|
||||||
|
time: '2025-10-18 15:30',
|
||||||
|
method: '이메일',
|
||||||
|
recipients: '김민준, 박서연, 이준호',
|
||||||
|
status: 'read'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '2025-10-18 15:30',
|
||||||
|
method: '슬랙',
|
||||||
|
recipients: '#전략팀',
|
||||||
|
status: 'sent'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const container = document.getElementById('shareHistoryList');
|
||||||
|
|
||||||
|
if (history.length === 0) {
|
||||||
|
container.innerHTML = '<div style="text-align: center; padding: var(--spacing-8); color: var(--gray-400);">아직 공유 이력이 없습니다</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = history.map(item => `
|
||||||
|
<div class="history-item">
|
||||||
|
<div class="history-time">${item.time}</div>
|
||||||
|
<div class="history-method">${item.method}</div>
|
||||||
|
<div class="history-recipients">${item.recipients}</div>
|
||||||
|
<div class="history-status ${item.status}">
|
||||||
|
${item.status === 'read' ? '읽음' : '발송 완료'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 회의록 공유
|
||||||
|
function shareMinutes() {
|
||||||
|
const shareTarget = document.querySelector('input[name="shareTarget"]:checked').value;
|
||||||
|
const shareEmail = document.getElementById('shareEmail').checked;
|
||||||
|
const shareSlack = document.getElementById('shareSlack').checked;
|
||||||
|
|
||||||
|
// 공유 대상 검증
|
||||||
|
if (shareTarget === 'specific' && selectedParticipants.length === 0 && externalEmails.length === 0) {
|
||||||
|
showToast('공유할 대상을 선택하세요.', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 공유 방식 검증
|
||||||
|
if (!shareEmail && !shareSlack) {
|
||||||
|
showToast('최소 하나의 공유 방식을 선택하세요.', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 공유 데이터 구성
|
||||||
|
const shareData = {
|
||||||
|
target: shareTarget,
|
||||||
|
recipients: shareTarget === 'all' ? 'all' : selectedParticipants,
|
||||||
|
externalRecipients: externalEmails,
|
||||||
|
permission: document.getElementById('permission').value,
|
||||||
|
methods: {
|
||||||
|
email: shareEmail,
|
||||||
|
slack: shareSlack
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
url: document.getElementById('shareLink').value,
|
||||||
|
expiration: document.getElementById('linkExpiration').value,
|
||||||
|
password: document.getElementById('linkPassword').value
|
||||||
|
},
|
||||||
|
sharedAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
|
||||||
|
// 공유 실행 (시뮬레이션)
|
||||||
|
showToast('회의록을 공유하고 있습니다...', 'info');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const recipientCount = shareTarget === 'all' ?
|
||||||
|
(JSON.parse(sessionStorage.getItem('newMeeting') || '{}').participants?.length || 0) :
|
||||||
|
(selectedParticipants.length + externalEmails.length);
|
||||||
|
|
||||||
|
if (shareEmail) {
|
||||||
|
showToast(`${recipientCount}명에게 이메일이 발송되었습니다.`, 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shareSlack) {
|
||||||
|
showToast('슬랙으로 알림이 발송되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Todo 관리 화면으로 이동
|
||||||
|
setTimeout(() => {
|
||||||
|
navigateTo('09-Todo관리.html');
|
||||||
|
}, 1500);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 초기화
|
||||||
|
renderParticipantCheckboxes();
|
||||||
|
renderShareHistory();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
749
design/uiux/prototype/09-Todo관리.html
Normal file
749
design/uiux/prototype/09-Todo관리.html
Normal file
@ -0,0 +1,749 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Todo 관리 - 회의록 작성 및 공유 서비스</title>
|
||||||
|
<link rel="stylesheet" href="common.css">
|
||||||
|
<style>
|
||||||
|
.todo-container {
|
||||||
|
max-width: 1800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-toggle {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-btn {
|
||||||
|
padding: var(--spacing-2) var(--spacing-4);
|
||||||
|
border: 1px solid var(--gray-300);
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-btn.active {
|
||||||
|
background: var(--primary-main);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
margin-bottom: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-select {
|
||||||
|
padding: var(--spacing-2) var(--spacing-3);
|
||||||
|
border: 1px solid var(--gray-300);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
background: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 칸반 보드 뷰 */
|
||||||
|
.kanban-board {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kanban-column {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
padding-bottom: var(--spacing-3);
|
||||||
|
border-bottom: 2px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-count {
|
||||||
|
background: var(--gray-200);
|
||||||
|
color: var(--gray-700);
|
||||||
|
padding: var(--spacing-1) var(--spacing-2);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-card {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
cursor: move;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-card:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-card.dragging {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-card.high-priority {
|
||||||
|
border-left: 4px solid var(--error-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-content-card {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gray-900);
|
||||||
|
margin-bottom: var(--spacing-3);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-meta-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-assignee {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.assignee-avatar {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--gray-200);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-due-date {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.due-date.overdue {
|
||||||
|
color: var(--error-main);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.due-date.today {
|
||||||
|
color: var(--warning-main);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container {
|
||||||
|
margin-top: var(--spacing-3);
|
||||||
|
padding-top: var(--spacing-3);
|
||||||
|
border-top: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-label-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-todo {
|
||||||
|
height: 6px;
|
||||||
|
background: var(--gray-200);
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill-todo {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--primary-main);
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
margin-top: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn-small {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid var(--gray-300);
|
||||||
|
background: white;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn-small:hover {
|
||||||
|
background: var(--gray-50);
|
||||||
|
border-color: var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-link {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--primary-main);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 리스트 뷰 */
|
||||||
|
.list-view {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-view.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-table th {
|
||||||
|
text-align: left;
|
||||||
|
padding: var(--spacing-3) var(--spacing-4);
|
||||||
|
background: var(--gray-50);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-700);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
border-bottom: 2px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-table td {
|
||||||
|
padding: var(--spacing-3) var(--spacing-4);
|
||||||
|
border-bottom: 1px solid var(--gray-200);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-table tr:hover {
|
||||||
|
background: var(--gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: var(--spacing-1) var(--spacing-2);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.pending {
|
||||||
|
background: var(--gray-200);
|
||||||
|
color: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.in_progress {
|
||||||
|
background: var(--info-light);
|
||||||
|
color: var(--info-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.completed {
|
||||||
|
background: var(--success-light);
|
||||||
|
color: var(--success-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.priority-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.priority-dot.high {
|
||||||
|
background: var(--error-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.priority-dot.normal {
|
||||||
|
background: var(--gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.kanban-board {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="todo-container">
|
||||||
|
<!-- 헤더 -->
|
||||||
|
<div class="todo-header">
|
||||||
|
<div>
|
||||||
|
<h1>Todo 관리</h1>
|
||||||
|
<p style="color: var(--gray-500);">회의에서 생성된 Todo를 추적하고 관리하세요</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="view-toggle">
|
||||||
|
<button class="view-btn active" id="kanbanViewBtn" onclick="switchView('kanban')">
|
||||||
|
📋 칸반 보드
|
||||||
|
</button>
|
||||||
|
<button class="view-btn" id="listViewBtn" onclick="switchView('list')">
|
||||||
|
📄 리스트 뷰
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 필터 바 -->
|
||||||
|
<div class="filter-bar">
|
||||||
|
<div class="filter-group">
|
||||||
|
<span class="filter-label">담당자:</span>
|
||||||
|
<select class="filter-select" id="filterAssignee" onchange="applyFilters()">
|
||||||
|
<option value="all">전체</option>
|
||||||
|
<option value="me">나</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-group">
|
||||||
|
<span class="filter-label">상태:</span>
|
||||||
|
<select class="filter-select" id="filterStatus" onchange="applyFilters()">
|
||||||
|
<option value="all">전체</option>
|
||||||
|
<option value="pending">시작 전</option>
|
||||||
|
<option value="in_progress">진행 중</option>
|
||||||
|
<option value="completed">완료</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-group">
|
||||||
|
<span class="filter-label">우선순위:</span>
|
||||||
|
<select class="filter-select" id="filterPriority" onchange="applyFilters()">
|
||||||
|
<option value="all">전체</option>
|
||||||
|
<option value="high">높음</option>
|
||||||
|
<option value="normal">보통</option>
|
||||||
|
<option value="low">낮음</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-group">
|
||||||
|
<span class="filter-label">정렬:</span>
|
||||||
|
<select class="filter-select" id="sortBy" onchange="applyFilters()">
|
||||||
|
<option value="dueDate">마감일순</option>
|
||||||
|
<option value="priority">우선순위순</option>
|
||||||
|
<option value="created">생성일순</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 칸반 보드 뷰 -->
|
||||||
|
<div class="kanban-board" id="kanbanView">
|
||||||
|
<div class="kanban-column" data-status="pending">
|
||||||
|
<div class="column-header">
|
||||||
|
<div class="column-title">시작 전</div>
|
||||||
|
<div class="column-count" id="pendingCount">0</div>
|
||||||
|
</div>
|
||||||
|
<div id="pendingColumn" class="column-content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="kanban-column" data-status="in_progress">
|
||||||
|
<div class="column-header">
|
||||||
|
<div class="column-title">진행 중</div>
|
||||||
|
<div class="column-count" id="inProgressCount">0</div>
|
||||||
|
</div>
|
||||||
|
<div id="inProgressColumn" class="column-content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="kanban-column" data-status="completed">
|
||||||
|
<div class="column-header">
|
||||||
|
<div class="column-title">완료</div>
|
||||||
|
<div class="column-count" id="completedCount">0</div>
|
||||||
|
</div>
|
||||||
|
<div id="completedColumn" class="column-content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 리스트 뷰 -->
|
||||||
|
<div class="list-view" id="listView">
|
||||||
|
<table class="todo-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 40px;">
|
||||||
|
<input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
|
||||||
|
</th>
|
||||||
|
<th style="width: 100px;">상태</th>
|
||||||
|
<th>내용</th>
|
||||||
|
<th style="width: 120px;">담당자</th>
|
||||||
|
<th style="width: 100px;">마감일</th>
|
||||||
|
<th style="width: 80px;">우선순위</th>
|
||||||
|
<th style="width: 100px;">진행률</th>
|
||||||
|
<th style="width: 80px;">액션</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="todoTableBody"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="fab" onclick="navigateTo('02-대시보드.html')" title="대시보드로 이동">
|
||||||
|
🏠
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<script src="common.js"></script>
|
||||||
|
<script>
|
||||||
|
let todos = [];
|
||||||
|
let filteredTodos = [];
|
||||||
|
let draggedTodo = null;
|
||||||
|
|
||||||
|
// Todo 데이터 로드
|
||||||
|
function loadTodos() {
|
||||||
|
todos = getAllTodos();
|
||||||
|
filteredTodos = todos;
|
||||||
|
renderKanban();
|
||||||
|
renderList();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 칸반 보드 렌더링
|
||||||
|
function renderKanban() {
|
||||||
|
const columns = {
|
||||||
|
pending: document.getElementById('pendingColumn'),
|
||||||
|
in_progress: document.getElementById('inProgressColumn'),
|
||||||
|
completed: document.getElementById('completedColumn')
|
||||||
|
};
|
||||||
|
|
||||||
|
// 초기화
|
||||||
|
Object.values(columns).forEach(col => col.innerHTML = '');
|
||||||
|
|
||||||
|
// Todo 분류 및 렌더링
|
||||||
|
const grouped = {
|
||||||
|
pending: filteredTodos.filter(t => t.status === 'pending'),
|
||||||
|
in_progress: filteredTodos.filter(t => t.status === 'in_progress'),
|
||||||
|
completed: filteredTodos.filter(t => t.status === 'completed')
|
||||||
|
};
|
||||||
|
|
||||||
|
Object.entries(grouped).forEach(([status, todoList]) => {
|
||||||
|
columns[status].innerHTML = todoList.map(todo => renderTodoCard(todo)).join('');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 카운트 업데이트
|
||||||
|
document.getElementById('pendingCount').textContent = grouped.pending.length;
|
||||||
|
document.getElementById('inProgressCount').textContent = grouped.in_progress.length;
|
||||||
|
document.getElementById('completedCount').textContent = grouped.completed.length;
|
||||||
|
|
||||||
|
// 드래그 이벤트 추가
|
||||||
|
addDragEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Todo 카드 렌더링
|
||||||
|
function renderTodoCard(todo) {
|
||||||
|
const user = getUserById(todo.assignee);
|
||||||
|
const ddayText = getDdayText(todo.dueDate);
|
||||||
|
const isOverdue = ddayText.includes('지남');
|
||||||
|
const isToday = ddayText === '오늘';
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="todo-card ${todo.priority === 'high' ? 'high-priority' : ''}"
|
||||||
|
draggable="true"
|
||||||
|
data-id="${todo.id}">
|
||||||
|
<div class="todo-content-card">${todo.content}</div>
|
||||||
|
|
||||||
|
<div class="todo-meta-row">
|
||||||
|
<div class="todo-assignee">
|
||||||
|
<div class="assignee-avatar">${user?.avatar || '👤'}</div>
|
||||||
|
<span>${user?.name || '알 수 없음'}</span>
|
||||||
|
</div>
|
||||||
|
<div class="todo-due-date">
|
||||||
|
<span>📅</span>
|
||||||
|
<span class="due-date ${isOverdue ? 'overdue' : ''} ${isToday ? 'today' : ''}">
|
||||||
|
${ddayText}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${todo.status !== 'completed' ? `
|
||||||
|
<div class="progress-container">
|
||||||
|
<div class="progress-label-row">
|
||||||
|
<span>진행률</span>
|
||||||
|
<span>${todo.progress}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-todo">
|
||||||
|
<div class="progress-fill-todo" style="width: ${todo.progress}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
|
||||||
|
<div class="todo-actions">
|
||||||
|
<button class="icon-btn-small" title="상세" onclick="viewTodoDetail('${todo.id}')">👁️</button>
|
||||||
|
<button class="icon-btn-small" title="수정" onclick="editTodo('${todo.id}')">✏️</button>
|
||||||
|
${todo.meetingId ? `<span class="meeting-link" onclick="goToMeeting('${todo.meetingId}')">📋 회의록</span>` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 드래그 이벤트 추가
|
||||||
|
function addDragEvents() {
|
||||||
|
const cards = document.querySelectorAll('.todo-card');
|
||||||
|
const columns = document.querySelectorAll('.column-content');
|
||||||
|
|
||||||
|
cards.forEach(card => {
|
||||||
|
card.addEventListener('dragstart', handleDragStart);
|
||||||
|
card.addEventListener('dragend', handleDragEnd);
|
||||||
|
});
|
||||||
|
|
||||||
|
columns.forEach(column => {
|
||||||
|
column.addEventListener('dragover', handleDragOver);
|
||||||
|
column.addEventListener('drop', handleDrop);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragStart(e) {
|
||||||
|
draggedTodo = e.target.dataset.id;
|
||||||
|
e.target.classList.add('dragging');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragEnd(e) {
|
||||||
|
e.target.classList.remove('dragging');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragOver(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDrop(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const newStatus = e.target.closest('.kanban-column').dataset.status;
|
||||||
|
const todo = todos.find(t => t.id === draggedTodo);
|
||||||
|
|
||||||
|
if (todo && todo.status !== newStatus) {
|
||||||
|
todo.status = newStatus;
|
||||||
|
|
||||||
|
if (newStatus === 'completed') {
|
||||||
|
todo.progress = 100;
|
||||||
|
} else if (newStatus === 'in_progress' && todo.progress === 0) {
|
||||||
|
todo.progress = 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
saveTodo(todo);
|
||||||
|
renderKanban();
|
||||||
|
|
||||||
|
showToast(`Todo 상태가 "${newStatus === 'pending' ? '시작 전' : newStatus === 'in_progress' ? '진행 중' : '완료'}"로 변경되었습니다.`, 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
draggedTodo = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 리스트 뷰 렌더링
|
||||||
|
function renderList() {
|
||||||
|
const tbody = document.getElementById('todoTableBody');
|
||||||
|
|
||||||
|
if (filteredTodos.length === 0) {
|
||||||
|
tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; padding: var(--spacing-8); color: var(--gray-400);">Todo가 없습니다</td></tr>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody.innerHTML = filteredTodos.map(todo => {
|
||||||
|
const user = getUserById(todo.assignee);
|
||||||
|
const ddayText = getDdayText(todo.dueDate);
|
||||||
|
|
||||||
|
return `
|
||||||
|
<tr>
|
||||||
|
<td><input type="checkbox" class="todo-checkbox" data-id="${todo.id}"></td>
|
||||||
|
<td>
|
||||||
|
<select class="status-badge ${todo.status}" onchange="changeStatus('${todo.id}', this.value)">
|
||||||
|
<option value="pending" ${todo.status === 'pending' ? 'selected' : ''}>시작 전</option>
|
||||||
|
<option value="in_progress" ${todo.status === 'in_progress' ? 'selected' : ''}>진행 중</option>
|
||||||
|
<option value="completed" ${todo.status === 'completed' ? 'selected' : ''}>완료</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
<td>${todo.content}</td>
|
||||||
|
<td>
|
||||||
|
<div style="display: flex; align-items: center; gap: var(--spacing-2);">
|
||||||
|
<span>${user?.avatar || '👤'}</span>
|
||||||
|
<span>${user?.name || '알 수 없음'}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>${ddayText}</td>
|
||||||
|
<td>
|
||||||
|
<span class="priority-dot ${todo.priority}"></span>
|
||||||
|
${todo.priority === 'high' ? '높음' : todo.priority === 'low' ? '낮음' : '보통'}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div style="display: flex; align-items: center; gap: var(--spacing-2);">
|
||||||
|
<div style="flex: 1; height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden;">
|
||||||
|
<div style="height: 100%; background: var(--primary-main); width: ${todo.progress}%;"></div>
|
||||||
|
</div>
|
||||||
|
<span style="font-size: 0.75rem;">${todo.progress}%</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button class="icon-btn-small" title="수정" onclick="editTodo('${todo.id}')">✏️</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 뷰 전환
|
||||||
|
function switchView(view) {
|
||||||
|
if (view === 'kanban') {
|
||||||
|
document.getElementById('kanbanView').style.display = 'grid';
|
||||||
|
document.getElementById('listView').classList.remove('active');
|
||||||
|
document.getElementById('kanbanViewBtn').classList.add('active');
|
||||||
|
document.getElementById('listViewBtn').classList.remove('active');
|
||||||
|
} else {
|
||||||
|
document.getElementById('kanbanView').style.display = 'none';
|
||||||
|
document.getElementById('listView').classList.add('active');
|
||||||
|
document.getElementById('kanbanViewBtn').classList.remove('active');
|
||||||
|
document.getElementById('listViewBtn').classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 필터 적용
|
||||||
|
function applyFilters() {
|
||||||
|
const assigneeFilter = document.getElementById('filterAssignee').value;
|
||||||
|
const statusFilter = document.getElementById('filterStatus').value;
|
||||||
|
const priorityFilter = document.getElementById('filterPriority').value;
|
||||||
|
const sortBy = document.getElementById('sortBy').value;
|
||||||
|
|
||||||
|
const currentUser = getCurrentUser();
|
||||||
|
|
||||||
|
filteredTodos = todos.filter(todo => {
|
||||||
|
if (assigneeFilter === 'me' && todo.assignee !== currentUser.id) return false;
|
||||||
|
if (statusFilter !== 'all' && todo.status !== statusFilter) return false;
|
||||||
|
if (priorityFilter !== 'all' && todo.priority !== priorityFilter) return false;
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 정렬
|
||||||
|
filteredTodos.sort((a, b) => {
|
||||||
|
if (sortBy === 'dueDate') {
|
||||||
|
return new Date(a.dueDate) - new Date(b.dueDate);
|
||||||
|
} else if (sortBy === 'priority') {
|
||||||
|
const priorityOrder = { high: 0, normal: 1, low: 2 };
|
||||||
|
return priorityOrder[a.priority] - priorityOrder[b.priority];
|
||||||
|
} else {
|
||||||
|
return new Date(b.createdAt || 0) - new Date(a.createdAt || 0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
renderKanban();
|
||||||
|
renderList();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 상태 변경
|
||||||
|
function changeStatus(todoId, newStatus) {
|
||||||
|
const todo = todos.find(t => t.id === todoId);
|
||||||
|
if (todo) {
|
||||||
|
todo.status = newStatus;
|
||||||
|
|
||||||
|
if (newStatus === 'completed') {
|
||||||
|
todo.progress = 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
saveTodo(todo);
|
||||||
|
applyFilters();
|
||||||
|
showToast('상태가 변경되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Todo 수정
|
||||||
|
function editTodo(todoId) {
|
||||||
|
const todo = todos.find(t => t.id === todoId);
|
||||||
|
if (todo) {
|
||||||
|
const newProgress = prompt(`진행률을 입력하세요 (0-100):`, todo.progress);
|
||||||
|
if (newProgress !== null) {
|
||||||
|
const progress = parseInt(newProgress);
|
||||||
|
if (!isNaN(progress) && progress >= 0 && progress <= 100) {
|
||||||
|
todo.progress = progress;
|
||||||
|
|
||||||
|
if (progress === 100) {
|
||||||
|
todo.status = 'completed';
|
||||||
|
} else if (progress > 0 && todo.status === 'pending') {
|
||||||
|
todo.status = 'in_progress';
|
||||||
|
}
|
||||||
|
|
||||||
|
saveTodo(todo);
|
||||||
|
applyFilters();
|
||||||
|
showToast('진행률이 업데이트되었습니다.', 'success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Todo 상세 보기
|
||||||
|
function viewTodoDetail(todoId) {
|
||||||
|
const todo = todos.find(t => t.id === todoId);
|
||||||
|
if (todo) {
|
||||||
|
alert(`Todo 상세\n\n내용: ${todo.content}\n담당자: ${getUserName(todo.assignee)}\n마감일: ${todo.dueDate}\n우선순위: ${todo.priority}\n진행률: ${todo.progress}%\n상태: ${todo.status}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 회의록으로 이동
|
||||||
|
function goToMeeting(meetingId) {
|
||||||
|
alert('회의록 화면으로 이동합니다.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 전체 선택
|
||||||
|
function toggleSelectAll() {
|
||||||
|
const selectAll = document.getElementById('selectAll').checked;
|
||||||
|
document.querySelectorAll('.todo-checkbox').forEach(cb => {
|
||||||
|
cb.checked = selectAll;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 초기화
|
||||||
|
loadTodos();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
596
design/uiux/prototype/common.css
Normal file
596
design/uiux/prototype/common.css
Normal file
@ -0,0 +1,596 @@
|
|||||||
|
/* ============================================
|
||||||
|
회의록 작성 및 공유 개선 서비스 - 공통 스타일
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
/* === CSS Reset === */
|
||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #4B5563;
|
||||||
|
background-color: #F9FAFB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === CSS Variables === */
|
||||||
|
:root {
|
||||||
|
/* Primary Colors */
|
||||||
|
--primary-light: #4DFFDB;
|
||||||
|
--primary-main: #00D9B1;
|
||||||
|
--primary-dark: #00A88A;
|
||||||
|
|
||||||
|
/* Secondary Colors */
|
||||||
|
--secondary-light: #A5B4FC;
|
||||||
|
--secondary-main: #6366F1;
|
||||||
|
--secondary-dark: #4F46E5;
|
||||||
|
|
||||||
|
/* Semantic Colors */
|
||||||
|
--success-light: #6EE7B7;
|
||||||
|
--success-main: #10B981;
|
||||||
|
--success-dark: #059669;
|
||||||
|
|
||||||
|
--warning-light: #FCD34D;
|
||||||
|
--warning-main: #F59E0B;
|
||||||
|
--warning-dark: #D97706;
|
||||||
|
|
||||||
|
--error-light: #FCA5A5;
|
||||||
|
--error-main: #EF4444;
|
||||||
|
--error-dark: #DC2626;
|
||||||
|
|
||||||
|
--info-light: #93C5FD;
|
||||||
|
--info-main: #3B82F6;
|
||||||
|
--info-dark: #2563EB;
|
||||||
|
|
||||||
|
/* Neutral Colors */
|
||||||
|
--gray-50: #F9FAFB;
|
||||||
|
--gray-100: #F3F4F6;
|
||||||
|
--gray-200: #E5E7EB;
|
||||||
|
--gray-300: #D1D5DB;
|
||||||
|
--gray-400: #9CA3AF;
|
||||||
|
--gray-500: #6B7280;
|
||||||
|
--gray-600: #4B5563;
|
||||||
|
--gray-700: #374151;
|
||||||
|
--gray-800: #1F2937;
|
||||||
|
--gray-900: #111827;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-display: 700 3rem/1.25 'Pretendard';
|
||||||
|
--font-h1: 700 2.25rem/1.25 'Pretendard';
|
||||||
|
--font-h2: 600 1.875rem/1.25 'Pretendard';
|
||||||
|
--font-h3: 600 1.5rem/1.5 'Pretendard';
|
||||||
|
--font-h4: 600 1.25rem/1.5 'Pretendard';
|
||||||
|
--font-body-large: 400 1.125rem/1.5 'Pretendard';
|
||||||
|
--font-body: 400 1rem/1.5 'Pretendard';
|
||||||
|
--font-body-small: 400 0.875rem/1.5 'Pretendard';
|
||||||
|
--font-caption: 400 0.75rem/1.5 'Pretendard';
|
||||||
|
|
||||||
|
/* Spacing (8px 기반) */
|
||||||
|
--spacing-1: 4px;
|
||||||
|
--spacing-2: 8px;
|
||||||
|
--spacing-3: 12px;
|
||||||
|
--spacing-4: 16px;
|
||||||
|
--spacing-5: 20px;
|
||||||
|
--spacing-6: 24px;
|
||||||
|
--spacing-8: 32px;
|
||||||
|
--spacing-10: 40px;
|
||||||
|
--spacing-12: 48px;
|
||||||
|
--spacing-16: 64px;
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
--radius-sm: 4px;
|
||||||
|
--radius-md: 8px;
|
||||||
|
--radius-lg: 12px;
|
||||||
|
--radius-xl: 16px;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* Shadows */
|
||||||
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
--shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
/* Transitions */
|
||||||
|
--transition-fast: 150ms ease-out;
|
||||||
|
--transition-base: 200ms ease-out;
|
||||||
|
--transition-slow: 300ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Typography === */
|
||||||
|
h1 { font: var(--font-h1); color: var(--gray-900); }
|
||||||
|
h2 { font: var(--font-h2); color: var(--gray-900); }
|
||||||
|
h3 { font: var(--font-h3); color: var(--gray-900); }
|
||||||
|
h4 { font: var(--font-h4); color: var(--gray-900); }
|
||||||
|
p { font: var(--font-body); margin-bottom: var(--spacing-4); }
|
||||||
|
small { font: var(--font-caption); color: var(--gray-500); }
|
||||||
|
|
||||||
|
/* === Buttons === */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--spacing-3) var(--spacing-6);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
text-decoration: none;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--primary-main);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: var(--primary-light);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:active {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
background-color: var(--gray-300);
|
||||||
|
color: var(--gray-500);
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--primary-main);
|
||||||
|
border: 1px solid var(--primary-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background-color: rgba(0, 217, 177, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:active {
|
||||||
|
background-color: rgba(0, 217, 177, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text:hover {
|
||||||
|
background-color: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text:active {
|
||||||
|
background-color: var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon:hover {
|
||||||
|
background-color: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
padding: var(--spacing-2) var(--spacing-4);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-lg {
|
||||||
|
padding: var(--spacing-4) var(--spacing-8);
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FAB (Floating Action Button) */
|
||||||
|
.fab {
|
||||||
|
position: fixed;
|
||||||
|
bottom: var(--spacing-4);
|
||||||
|
right: var(--spacing-4);
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
background-color: var(--primary-main);
|
||||||
|
color: white;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
border: none;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab:hover {
|
||||||
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Input Fields === */
|
||||||
|
.input,
|
||||||
|
.textarea,
|
||||||
|
.select {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--spacing-3) var(--spacing-4);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
|
border: 1px solid var(--gray-300);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background-color: white;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:focus,
|
||||||
|
.textarea:focus,
|
||||||
|
.select:focus {
|
||||||
|
outline: 4px solid rgba(0, 217, 177, 0.2);
|
||||||
|
border-color: var(--primary-main);
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input.error,
|
||||||
|
.textarea.error {
|
||||||
|
border-color: var(--error-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:disabled,
|
||||||
|
.textarea:disabled,
|
||||||
|
.select:disabled {
|
||||||
|
background-color: var(--gray-100);
|
||||||
|
color: var(--gray-400);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
min-height: 120px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin-bottom: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--spacing-2);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-error {
|
||||||
|
display: block;
|
||||||
|
margin-top: var(--spacing-1);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--error-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Cards === */
|
||||||
|
.card {
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.interactive {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.interactive:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.interactive:active {
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
transform: scale(0.99);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Badges === */
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--spacing-1) var(--spacing-3);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-primary {
|
||||||
|
background-color: var(--primary-light);
|
||||||
|
color: var(--primary-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-success {
|
||||||
|
background-color: var(--success-light);
|
||||||
|
color: var(--success-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-warning {
|
||||||
|
background-color: var(--warning-light);
|
||||||
|
color: var(--warning-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-error {
|
||||||
|
background-color: var(--error-light);
|
||||||
|
color: var(--error-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-neutral {
|
||||||
|
background-color: var(--gray-200);
|
||||||
|
color: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Modal === */
|
||||||
|
.modal-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-backdrop.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
max-width: 600px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
margin-bottom: var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font: var(--font-h3);
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
margin-bottom: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Toast === */
|
||||||
|
.toast-container {
|
||||||
|
position: fixed;
|
||||||
|
top: var(--spacing-4);
|
||||||
|
right: var(--spacing-4);
|
||||||
|
z-index: 10000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: var(--spacing-4) var(--spacing-5);
|
||||||
|
max-width: 400px;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
border-left: 4px solid;
|
||||||
|
animation: slideIn 200ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
transform: translateX(400px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-success {
|
||||||
|
border-left-color: var(--success-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-error {
|
||||||
|
border-left-color: var(--error-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-warning {
|
||||||
|
border-left-color: var(--warning-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-info {
|
||||||
|
border-left-color: var(--info-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Layout === */
|
||||||
|
.container {
|
||||||
|
max-width: 1536px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--spacing-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background-color: white;
|
||||||
|
border-bottom: 1px solid var(--gray-200);
|
||||||
|
padding: var(--spacing-4) 0;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary-main);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 250px;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: white;
|
||||||
|
border-right: 1px solid var(--gray-200);
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
margin-left: 250px;
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Grid System === */
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-3 {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Utility Classes === */
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-2 { margin-top: var(--spacing-2); }
|
||||||
|
.mt-4 { margin-top: var(--spacing-4); }
|
||||||
|
.mt-6 { margin-top: var(--spacing-6); }
|
||||||
|
.mt-8 { margin-top: var(--spacing-8); }
|
||||||
|
|
||||||
|
.mb-2 { margin-bottom: var(--spacing-2); }
|
||||||
|
.mb-4 { margin-bottom: var(--spacing-4); }
|
||||||
|
.mb-6 { margin-bottom: var(--spacing-6); }
|
||||||
|
.mb-8 { margin-bottom: var(--spacing-8); }
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-col {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-2 { gap: var(--spacing-2); }
|
||||||
|
.gap-4 { gap: var(--spacing-4); }
|
||||||
|
.gap-6 { gap: var(--spacing-6); }
|
||||||
|
|
||||||
|
/* === Responsive === */
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
.sidebar {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
transition: transform 300ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.active {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-3 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.container {
|
||||||
|
padding: 0 var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2,
|
||||||
|
.grid-3,
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
width: 95%;
|
||||||
|
padding: var(--spacing-6);
|
||||||
|
}
|
||||||
|
}
|
||||||
408
design/uiux/prototype/common.js
vendored
Normal file
408
design/uiux/prototype/common.js
vendored
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
/* ============================================
|
||||||
|
회의록 작성 및 공유 개선 서비스 - 공통 Javascript
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
// === LocalStorage 키 상수 ===
|
||||||
|
const STORAGE_KEYS = {
|
||||||
|
CURRENT_USER: 'currentUser',
|
||||||
|
USERS: 'users',
|
||||||
|
MEETINGS: 'meetings',
|
||||||
|
TODOS: 'todos',
|
||||||
|
INITIALIZED: 'initialized'
|
||||||
|
};
|
||||||
|
|
||||||
|
// === 예제 데이터 초기화 ===
|
||||||
|
function initializeData() {
|
||||||
|
if (localStorage.getItem(STORAGE_KEYS.INITIALIZED)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 사용자 데이터
|
||||||
|
const users = [
|
||||||
|
{ id: 'user1', name: '김민준', email: 'minjun@example.com', avatar: '👤' },
|
||||||
|
{ id: 'user2', name: '박서연', email: 'seoyeon@example.com', avatar: '👩' },
|
||||||
|
{ id: 'user3', name: '이준호', email: 'junho@example.com', avatar: '👨' },
|
||||||
|
{ id: 'user4', name: '최유진', email: 'yujin@example.com', avatar: '👧' },
|
||||||
|
{ id: 'user5', name: '정도현', email: 'dohyun@example.com', avatar: '🧑' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 회의 데이터
|
||||||
|
const meetings = [
|
||||||
|
{
|
||||||
|
id: 'meeting1',
|
||||||
|
title: '2025년 1분기 전략 회의',
|
||||||
|
date: '2025-10-20',
|
||||||
|
time: '14:00',
|
||||||
|
endTime: '15:30',
|
||||||
|
location: '3층 회의실',
|
||||||
|
participants: ['user1', 'user2', 'user3'],
|
||||||
|
template: 'general',
|
||||||
|
status: 'scheduled', // scheduled, in_progress, completed
|
||||||
|
content: {
|
||||||
|
sections: {
|
||||||
|
participants: '김민준, 박서연, 이준호',
|
||||||
|
agenda: '1분기 목표 설정 및 전략 수립',
|
||||||
|
discussion: '',
|
||||||
|
decisions: '',
|
||||||
|
todos: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
createdAt: new Date().toISOString()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'meeting2',
|
||||||
|
title: '주간 스크럼 회의',
|
||||||
|
date: '2025-10-18',
|
||||||
|
time: '10:00',
|
||||||
|
endTime: '10:30',
|
||||||
|
location: '온라인',
|
||||||
|
participants: ['user1', 'user2', 'user3', 'user4'],
|
||||||
|
template: 'scrum',
|
||||||
|
status: 'completed',
|
||||||
|
content: {
|
||||||
|
sections: {
|
||||||
|
participants: '김민준, 박서연, 이준호, 최유진',
|
||||||
|
yesterday: '- API 개발 완료\n- 테스트 코드 작성',
|
||||||
|
today: '- 프론트엔드 개발 시작\n- 디자인 리뷰',
|
||||||
|
blockers: '없음'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString()
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Todo 데이터
|
||||||
|
const todos = [
|
||||||
|
{
|
||||||
|
id: 'todo1',
|
||||||
|
meetingId: 'meeting1',
|
||||||
|
content: '1분기 마케팅 예산안 작성',
|
||||||
|
assignee: 'user2',
|
||||||
|
dueDate: '2025-10-25',
|
||||||
|
priority: 'high', // high, normal, low
|
||||||
|
status: 'pending', // pending, in_progress, completed
|
||||||
|
progress: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'todo2',
|
||||||
|
meetingId: 'meeting1',
|
||||||
|
content: '경쟁사 분석 보고서 작성',
|
||||||
|
assignee: 'user3',
|
||||||
|
dueDate: '2025-10-22',
|
||||||
|
priority: 'high',
|
||||||
|
status: 'in_progress',
|
||||||
|
progress: 60
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'todo3',
|
||||||
|
meetingId: 'meeting2',
|
||||||
|
content: '테스트 커버리지 80% 달성',
|
||||||
|
assignee: 'user3',
|
||||||
|
dueDate: '2025-10-20',
|
||||||
|
priority: 'normal',
|
||||||
|
status: 'completed',
|
||||||
|
progress: 100
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 현재 로그인 사용자
|
||||||
|
const currentUser = users[0];
|
||||||
|
|
||||||
|
// LocalStorage에 저장
|
||||||
|
localStorage.setItem(STORAGE_KEYS.USERS, JSON.stringify(users));
|
||||||
|
localStorage.setItem(STORAGE_KEYS.MEETINGS, JSON.stringify(meetings));
|
||||||
|
localStorage.setItem(STORAGE_KEYS.TODOS, JSON.stringify(todos));
|
||||||
|
localStorage.setItem(STORAGE_KEYS.CURRENT_USER, JSON.stringify(currentUser));
|
||||||
|
localStorage.setItem(STORAGE_KEYS.INITIALIZED, 'true');
|
||||||
|
}
|
||||||
|
|
||||||
|
// === LocalStorage 헬퍼 함수 ===
|
||||||
|
function getFromStorage(key) {
|
||||||
|
const data = localStorage.getItem(key);
|
||||||
|
return data ? JSON.parse(data) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveToStorage(key, data) {
|
||||||
|
localStorage.setItem(key, JSON.stringify(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 날짜/시간 유틸리티 ===
|
||||||
|
function formatDate(dateString) {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(timeString) {
|
||||||
|
return timeString; // HH:MM 형식 그대로 반환
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDateTime(dateString, timeString) {
|
||||||
|
return `${formatDate(dateString)} ${formatTime(timeString)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDdayText(dueDateString) {
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const dueDate = new Date(dueDateString);
|
||||||
|
dueDate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const diff = Math.ceil((dueDate - today) / (1000 * 60 * 60 * 24));
|
||||||
|
|
||||||
|
if (diff < 0) return `D${diff} (지남)`;
|
||||||
|
if (diff === 0) return '오늘';
|
||||||
|
return `D-${diff}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDuration(minutes) {
|
||||||
|
const hours = Math.floor(minutes / 60);
|
||||||
|
const mins = minutes % 60;
|
||||||
|
if (hours > 0 && mins > 0) return `${hours}시간 ${mins}분`;
|
||||||
|
if (hours > 0) return `${hours}시간`;
|
||||||
|
return `${mins}분`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 사용자 관련 함수 ===
|
||||||
|
function getCurrentUser() {
|
||||||
|
return getFromStorage(STORAGE_KEYS.CURRENT_USER);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUserById(userId) {
|
||||||
|
const users = getFromStorage(STORAGE_KEYS.USERS) || [];
|
||||||
|
return users.find(u => u.id === userId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUserName(userId) {
|
||||||
|
const user = getUserById(userId);
|
||||||
|
return user ? user.name : '알 수 없음';
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 회의 관련 함수 ===
|
||||||
|
function getAllMeetings() {
|
||||||
|
return getFromStorage(STORAGE_KEYS.MEETINGS) || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMeetingById(meetingId) {
|
||||||
|
const meetings = getAllMeetings();
|
||||||
|
return meetings.find(m => m.id === meetingId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveMeeting(meeting) {
|
||||||
|
const meetings = getAllMeetings();
|
||||||
|
const index = meetings.findIndex(m => m.id === meeting.id);
|
||||||
|
if (index >= 0) {
|
||||||
|
meetings[index] = meeting;
|
||||||
|
} else {
|
||||||
|
meetings.push(meeting);
|
||||||
|
}
|
||||||
|
saveToStorage(STORAGE_KEYS.MEETINGS, meetings);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getScheduledMeetings() {
|
||||||
|
const meetings = getAllMeetings();
|
||||||
|
return meetings.filter(m => m.status === 'scheduled');
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRecentMeetings(limit = 6) {
|
||||||
|
const meetings = getAllMeetings();
|
||||||
|
return meetings
|
||||||
|
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
|
||||||
|
.slice(0, limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
// === Todo 관련 함수 ===
|
||||||
|
function getAllTodos() {
|
||||||
|
return getFromStorage(STORAGE_KEYS.TODOS) || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTodoById(todoId) {
|
||||||
|
const todos = getAllTodos();
|
||||||
|
return todos.find(t => t.id === todoId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveTodo(todo) {
|
||||||
|
const todos = getAllTodos();
|
||||||
|
const index = todos.findIndex(t => t.id === todo.id);
|
||||||
|
if (index >= 0) {
|
||||||
|
todos[index] = todo;
|
||||||
|
} else {
|
||||||
|
todos.push(todo);
|
||||||
|
}
|
||||||
|
saveToStorage(STORAGE_KEYS.TODOS, todos);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPendingTodos(userId) {
|
||||||
|
const todos = getAllTodos();
|
||||||
|
return todos.filter(t => t.assignee === userId && t.status !== 'completed');
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTodosByStatus(status) {
|
||||||
|
const todos = getAllTodos();
|
||||||
|
return todos.filter(t => t.status === status);
|
||||||
|
}
|
||||||
|
|
||||||
|
// === Toast 알림 ===
|
||||||
|
function showToast(message, type = 'info') {
|
||||||
|
// Toast 컨테이너 생성 (없으면)
|
||||||
|
let container = document.querySelector('.toast-container');
|
||||||
|
if (!container) {
|
||||||
|
container = document.createElement('div');
|
||||||
|
container.className = 'toast-container';
|
||||||
|
document.body.appendChild(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toast 생성
|
||||||
|
const toast = document.createElement('div');
|
||||||
|
toast.className = `toast toast-${type}`;
|
||||||
|
|
||||||
|
const icons = {
|
||||||
|
success: '✓',
|
||||||
|
error: '✗',
|
||||||
|
warning: '⚠',
|
||||||
|
info: 'ℹ'
|
||||||
|
};
|
||||||
|
|
||||||
|
toast.innerHTML = `
|
||||||
|
<span style="font-size: 20px;">${icons[type]}</span>
|
||||||
|
<span>${message}</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
container.appendChild(toast);
|
||||||
|
|
||||||
|
// 4초 후 자동 제거
|
||||||
|
setTimeout(() => {
|
||||||
|
toast.style.animation = 'slideOut 150ms ease-in';
|
||||||
|
setTimeout(() => toast.remove(), 150);
|
||||||
|
}, 4000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// slideOut 애니메이션 추가
|
||||||
|
if (!document.querySelector('style[data-toast-style]')) {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.setAttribute('data-toast-style', 'true');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes slideOut {
|
||||||
|
to {
|
||||||
|
transform: translateX(400px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 모달 제어 ===
|
||||||
|
function openModal(modalId) {
|
||||||
|
const modal = document.getElementById(modalId);
|
||||||
|
if (modal) {
|
||||||
|
modal.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal(modalId) {
|
||||||
|
const modal = document.getElementById(modalId);
|
||||||
|
if (modal) {
|
||||||
|
modal.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 모달 백드롭 클릭 시 닫기
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (e.target.classList.contains('modal-backdrop')) {
|
||||||
|
closeModal(e.target.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// === 화면 전환 ===
|
||||||
|
function navigateTo(page) {
|
||||||
|
window.location.href = page;
|
||||||
|
}
|
||||||
|
|
||||||
|
function goBack() {
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 유틸리티 함수 ===
|
||||||
|
function generateId(prefix = 'id') {
|
||||||
|
return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function debounce(func, wait) {
|
||||||
|
let timeout;
|
||||||
|
return function executedFunction(...args) {
|
||||||
|
const later = () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
func(...args);
|
||||||
|
};
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(later, wait);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 템플릿 데이터 ===
|
||||||
|
const TEMPLATES = {
|
||||||
|
general: {
|
||||||
|
id: 'general',
|
||||||
|
name: '일반 회의',
|
||||||
|
description: '기본 회의 구조',
|
||||||
|
sections: [
|
||||||
|
{ id: 'participants', name: '참석자', required: true },
|
||||||
|
{ id: 'agenda', name: '회의 목적', required: false },
|
||||||
|
{ id: 'discussion', name: '논의 내용', required: true },
|
||||||
|
{ id: 'decisions', name: '결정 사항', required: true },
|
||||||
|
{ id: 'todos', name: 'Todo', required: false }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
scrum: {
|
||||||
|
id: 'scrum',
|
||||||
|
name: '스크럼 회의',
|
||||||
|
description: '데일리 스탠드업',
|
||||||
|
sections: [
|
||||||
|
{ id: 'participants', name: '참석자', required: true },
|
||||||
|
{ id: 'yesterday', name: '어제 한 일', required: true },
|
||||||
|
{ id: 'today', name: '오늘 할 일', required: true },
|
||||||
|
{ id: 'blockers', name: '이슈/블로커', required: false }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
kickoff: {
|
||||||
|
id: 'kickoff',
|
||||||
|
name: '프로젝트 킥오프',
|
||||||
|
description: '프로젝트 시작 회의',
|
||||||
|
sections: [
|
||||||
|
{ id: 'participants', name: '참석자', required: true },
|
||||||
|
{ id: 'overview', name: '프로젝트 개요', required: true },
|
||||||
|
{ id: 'goals', name: '목표', required: true },
|
||||||
|
{ id: 'schedule', name: '일정', required: true },
|
||||||
|
{ id: 'roles', name: '역할 분담', required: true },
|
||||||
|
{ id: 'risks', name: '리스크', required: false }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
weekly: {
|
||||||
|
id: 'weekly',
|
||||||
|
name: '주간 회의',
|
||||||
|
description: '주간 진행 상황 리뷰',
|
||||||
|
sections: [
|
||||||
|
{ id: 'participants', name: '참석자', required: true },
|
||||||
|
{ id: 'achievements', name: '주간 실적', required: true },
|
||||||
|
{ id: 'issues', name: '주요 이슈', required: false },
|
||||||
|
{ id: 'nextWeek', name: '다음 주 계획', required: true },
|
||||||
|
{ id: 'support', name: '지원 필요 사항', required: false }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function getTemplate(templateId) {
|
||||||
|
return TEMPLATES[templateId];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAllTemplates() {
|
||||||
|
return Object.values(TEMPLATES);
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 페이지 로드 시 데이터 초기화 ===
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initializeData();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user