mirror of
https://github.com/hwanny1128/HGZero.git
synced 2026-06-13 03:39:10 +00:00
대시보드 프로토타입 개선 및 프로젝트 정리
- 회의 자료 섹션 삭제 - Todo undefined 문제 해결 (네임스페이스 충돌 수정) - JavaScript 디버깅 로그 추가 - 기존 prototype 디렉토리 삭제 - prototype-gappa 디렉토리 추가 - 유저스토리 gappa 버전 추가 - 엑셀 변환 스크립트 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
hiondal
@@ -0,0 +1,691 @@
|
||||
<!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;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.dashboard-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
background-color: var(--color-white);
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
padding: 0 var(--spacing-6);
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--color-primary-main);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-white);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-2);
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-md);
|
||||
transition: background-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.user-button:hover {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-primary-main);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-white);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 0;
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
min-width: 200px;
|
||||
z-index: var(--z-dropdown);
|
||||
}
|
||||
|
||||
.user-dropdown.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
color: var(--color-gray-700);
|
||||
text-decoration: none;
|
||||
transition: background-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: var(--color-gray-200);
|
||||
margin: var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.dashboard-layout {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
background-color: var(--color-gray-50);
|
||||
border-right: 1px solid var(--color-gray-200);
|
||||
padding: var(--spacing-6) 0;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-3) var(--spacing-6);
|
||||
color: var(--color-gray-700);
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: var(--color-gray-200);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: rgba(0, 217, 177, 0.1);
|
||||
color: var(--color-primary-main);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-right: 3px solid var(--color-primary-main);
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: var(--spacing-8);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
margin-bottom: var(--spacing-8);
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: var(--font-size-h1);
|
||||
color: var(--color-gray-900);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-6);
|
||||
margin-bottom: var(--spacing-8);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: var(--spacing-6);
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.stat-icon.primary { background-color: rgba(0, 217, 177, 0.1); color: var(--color-primary-main); }
|
||||
.stat-icon.warning { background-color: rgba(245, 158, 11, 0.1); color: var(--color-warning-main); }
|
||||
.stat-icon.success { background-color: rgba(16, 185, 129, 0.1); color: var(--color-success-main); }
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-500);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--font-size-h2);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.section {
|
||||
margin-bottom: var(--spacing-8);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--font-size-h3);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
.view-all-link {
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-primary-main);
|
||||
text-decoration: none;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.view-all-link:hover {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
/* Meeting Card */
|
||||
.meeting-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.meeting-card {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-5);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.meeting-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.meeting-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.meeting-title {
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-gray-900);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.meeting-meta {
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-500);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
/* Todo Card */
|
||||
.todo-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-4);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.todo-item:hover {
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.todo-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.todo-title {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-gray-900);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.todo-meta {
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
.todo-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.dday {
|
||||
font-size: var(--font-size-body-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.dday.urgent { color: var(--color-error-main); }
|
||||
.dday.warning { color: var(--color-warning-main); }
|
||||
.dday.normal { color: var(--color-gray-500); }
|
||||
|
||||
/* Bottom Navigation (Mobile) */
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--color-white);
|
||||
border-top: 1px solid var(--color-gray-200);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: var(--spacing-2) 0;
|
||||
z-index: var(--z-sticky);
|
||||
}
|
||||
|
||||
.bottom-nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-1);
|
||||
padding: var(--spacing-2);
|
||||
color: var(--color-gray-500);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size-caption);
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.bottom-nav-item.active {
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.bottom-nav-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1023px) {
|
||||
.sidebar { display: none; }
|
||||
.main-content { padding-bottom: 80px; }
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.bottom-nav { display: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.dashboard-header { padding: 0 var(--spacing-4); }
|
||||
.service-name { display: none; }
|
||||
.main-content { padding: var(--spacing-4); }
|
||||
.welcome-title { font-size: var(--font-size-h2); }
|
||||
.stats-grid { grid-template-columns: 1fr; }
|
||||
.meeting-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="dashboard-header">
|
||||
<div class="header-left">
|
||||
<div class="logo">M</div>
|
||||
<span class="service-name">회의록 서비스</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="user-menu">
|
||||
<button class="user-button" id="userMenuButton">
|
||||
<div class="user-avatar" id="userAvatar">U</div>
|
||||
<span class="hide-mobile" id="userName">사용자</span>
|
||||
</button>
|
||||
<div class="user-dropdown" id="userDropdown">
|
||||
<a href="#" class="dropdown-item">내 프로필</a>
|
||||
<a href="#" class="dropdown-item">설정</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item" id="logoutButton">로그아웃</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Layout -->
|
||||
<div class="dashboard-layout">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<nav>
|
||||
<ul class="sidebar-nav">
|
||||
<li class="nav-item">
|
||||
<a href="02-대시보드.html" class="nav-link active">
|
||||
<span>📊</span> 대시보드
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="12-회의록목록.html" class="nav-link">
|
||||
<span>📅</span> 회의 목록
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="09-Todo관리.html" class="nav-link">
|
||||
<span>✅</span> Todo 관리
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="02-대시보드.html" class="nav-link">
|
||||
<span>⚙️</span> 설정
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<!-- Welcome Section -->
|
||||
<section class="welcome-section">
|
||||
<h1 class="welcome-title" id="welcomeTitle">안녕하세요!</h1>
|
||||
<p class="welcome-subtitle" id="welcomeSubtitle">오늘의 일정을 확인하세요</p>
|
||||
</section>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<section class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon primary">📅</div>
|
||||
<div class="stat-label">예정된 회의</div>
|
||||
<div class="stat-value" id="upcomingMeetingsCount">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon warning">✅</div>
|
||||
<div class="stat-label">진행 중 Todo</div>
|
||||
<div class="stat-value" id="inProgressTodosCount">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon success">📈</div>
|
||||
<div class="stat-label">Todo 완료율</div>
|
||||
<div class="stat-value" id="todoCompletionRate">0%</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent Meetings -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">최근 회의</h2>
|
||||
<a href="12-회의록목록.html" class="view-all-link">전체 보기 →</a>
|
||||
</div>
|
||||
<div class="meeting-grid" id="meetingGrid">
|
||||
<!-- Meetings will be rendered here -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- My Todos -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">할당된 Todo</h2>
|
||||
<a href="09-Todo관리.html" class="view-all-link">전체 보기 →</a>
|
||||
</div>
|
||||
<div class="todo-list" id="todoList">
|
||||
<!-- Todos will be rendered here -->
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation (Mobile) -->
|
||||
<nav class="bottom-nav hide-desktop">
|
||||
<a href="02-대시보드.html" class="bottom-nav-item active">
|
||||
<div class="bottom-nav-icon">📊</div>
|
||||
<div>대시보드</div>
|
||||
</a>
|
||||
<a href="12-회의록목록.html" class="bottom-nav-item">
|
||||
<div class="bottom-nav-icon">📅</div>
|
||||
<div>회의</div>
|
||||
</a>
|
||||
<a href="09-Todo관리.html" class="bottom-nav-item">
|
||||
<div class="bottom-nav-icon">✅</div>
|
||||
<div>Todo</div>
|
||||
</a>
|
||||
<a href="02-대시보드.html" class="bottom-nav-item">
|
||||
<div class="bottom-nav-icon">⚙️</div>
|
||||
<div>더보기</div>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- FAB -->
|
||||
<button class="fab" id="fabButton" title="새 회의 예약">+</button>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
// 인증 체크 및 초기화
|
||||
window.MeetingApp.ready(() => {
|
||||
const authToken = window.MeetingApp.Storage.get('authToken');
|
||||
if (!authToken) {
|
||||
// 개발 환경에서는 자동 로그인
|
||||
window.MeetingApp.Storage.set('authToken', 'demo-token');
|
||||
window.MeetingApp.Storage.set('currentUser', window.MeetingApp.AppState.currentUser);
|
||||
}
|
||||
|
||||
const currentUser = window.MeetingApp.Storage.get('currentUser');
|
||||
if (currentUser) {
|
||||
// 사용자 정보 표시
|
||||
document.getElementById('userName').textContent = currentUser.name;
|
||||
document.getElementById('userAvatar').textContent = currentUser.name.charAt(0);
|
||||
document.getElementById('welcomeTitle').textContent = `안녕하세요, ${currentUser.name}님!`;
|
||||
|
||||
// AppState 업데이트
|
||||
window.MeetingApp.AppState.currentUser = currentUser;
|
||||
}
|
||||
|
||||
// 데이터 로드 및 렌더링
|
||||
loadDashboardData();
|
||||
renderMeetings();
|
||||
renderTodos();
|
||||
});
|
||||
|
||||
// 대시보드 통계 로드
|
||||
function loadDashboardData() {
|
||||
const meetings = window.MeetingApp.Storage.get('meetings', []);
|
||||
const todos = window.MeetingApp.Storage.get('todos', []);
|
||||
|
||||
// 예정된 회의 수
|
||||
const upcomingMeetings = meetings.filter(m => m.status === 'scheduled' || m.status === 'confirmed').length;
|
||||
document.getElementById('upcomingMeetingsCount').textContent = upcomingMeetings;
|
||||
|
||||
// 진행 중 Todo 수
|
||||
const inProgressTodos = todos.filter(t => t.status === 'in_progress').length;
|
||||
document.getElementById('inProgressTodosCount').textContent = inProgressTodos;
|
||||
|
||||
// Todo 완료율
|
||||
const completedTodos = todos.filter(t => t.status === 'done').length;
|
||||
const completionRate = todos.length > 0 ? Math.round((completedTodos / todos.length) * 100) : 0;
|
||||
document.getElementById('todoCompletionRate').textContent = `${completionRate}%`;
|
||||
}
|
||||
|
||||
// 회의 목록 렌더링
|
||||
function renderMeetings() {
|
||||
const meetings = window.MeetingApp.Storage.get('meetings', []).slice(0, 3);
|
||||
const meetingGrid = document.getElementById('meetingGrid');
|
||||
|
||||
if (meetings.length === 0) {
|
||||
meetingGrid.innerHTML = '<p style="color: var(--color-gray-500);">아직 등록된 회의가 없습니다.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
meetingGrid.innerHTML = meetings.map(meeting => `
|
||||
<div class="meeting-card" onclick="window.MeetingApp.navigateTo('12-회의록목록.html')">
|
||||
<div class="meeting-header">
|
||||
<div>
|
||||
<div class="meeting-title">${meeting.title}</div>
|
||||
<div class="meeting-meta">📅 ${window.MeetingApp.formatDateTime(meeting.date)}</div>
|
||||
<div class="meeting-meta">📍 ${meeting.location}</div>
|
||||
</div>
|
||||
<span class="badge ${window.MeetingApp.MeetingUtils.getStatusClass(meeting.status)}">
|
||||
${window.MeetingApp.MeetingUtils.getStatusLabel(meeting.status)}
|
||||
</span>
|
||||
</div>
|
||||
<div style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">
|
||||
${meeting.description || '설명 없음'}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Todo 목록 렌더링
|
||||
function renderTodos() {
|
||||
const todos = window.MeetingApp.Storage.get('todos', []).filter(t => t.status !== 'done').slice(0, 5);
|
||||
const todoList = document.getElementById('todoList');
|
||||
|
||||
console.log('Rendering todos:', todos);
|
||||
|
||||
if (todos.length === 0) {
|
||||
todoList.innerHTML = '<p style="color: var(--color-gray-500);">할당된 Todo가 없습니다.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
todoList.innerHTML = todos.map(todo => {
|
||||
const dday = window.MeetingApp.getDday(todo.dueDate);
|
||||
const ddayClass = dday.includes('지남') ? 'urgent' : (dday === '오늘' ? 'warning' : 'normal');
|
||||
const priorityLabel = window.MeetingApp.MeetingUtils.getPriorityLabel(todo.priority);
|
||||
|
||||
console.log(`Todo: ${todo.title}, Priority: ${todo.priority}, Label: ${priorityLabel}`);
|
||||
|
||||
return `
|
||||
<div class="todo-item" onclick="window.MeetingApp.navigateTo('09-Todo관리.html')">
|
||||
<div class="todo-left">
|
||||
<div class="todo-title">${todo.title}</div>
|
||||
<div class="todo-meta">담당: ${todo.assignee}</div>
|
||||
</div>
|
||||
<div class="todo-right">
|
||||
<div class="dday ${ddayClass}">${dday}</div>
|
||||
<span class="badge badge-${todo.priority === 'high' ? 'error' : 'neutral'}">
|
||||
${priorityLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 사용자 메뉴 토글
|
||||
const userMenuButton = document.getElementById('userMenuButton');
|
||||
const userDropdown = document.getElementById('userDropdown');
|
||||
|
||||
userMenuButton.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
userDropdown.classList.toggle('show');
|
||||
});
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
userDropdown.classList.remove('show');
|
||||
});
|
||||
|
||||
// 로그아웃
|
||||
document.getElementById('logoutButton').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
window.MeetingApp.Storage.remove('authToken');
|
||||
window.MeetingApp.Storage.remove('currentUser');
|
||||
window.MeetingApp.Toast.success('로그아웃 되었습니다.');
|
||||
setTimeout(() => {
|
||||
window.location.href = '01-로그인.html';
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// FAB 버튼
|
||||
document.getElementById('fabButton').addEventListener('click', () => {
|
||||
window.location.href = '03-회의예약.html';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -243,7 +243,7 @@
|
||||
<div class="todo-progress-bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div class="todo-source">
|
||||
<a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
||||
</a>
|
||||
</div>
|
||||
@@ -264,7 +264,7 @@
|
||||
<div class="todo-progress-bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div class="todo-source">
|
||||
<a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
📄 고객 만족도 개선 회의 (2025-10-18)
|
||||
</a>
|
||||
</div>
|
||||
@@ -293,7 +293,7 @@
|
||||
<div class="todo-progress-bar" style="width: 60%;"></div>
|
||||
</div>
|
||||
<div class="todo-source">
|
||||
<a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
||||
</a>
|
||||
</div>
|
||||
@@ -314,7 +314,7 @@
|
||||
<div class="todo-progress-bar" style="width: 30%;"></div>
|
||||
</div>
|
||||
<div class="todo-source">
|
||||
<a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
||||
</a>
|
||||
</div>
|
||||
@@ -343,7 +343,7 @@
|
||||
<div class="todo-progress-bar" style="width: 100%; background-color: var(--color-success-main);"></div>
|
||||
</div>
|
||||
<div class="todo-source">
|
||||
<a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
||||
</a>
|
||||
</div>
|
||||
@@ -366,7 +366,7 @@
|
||||
<span class="badge badge-warning">진행 중</span>
|
||||
</div>
|
||||
<div class="todo-source" style="margin-top: var(--spacing-2);">
|
||||
<a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
||||
</a>
|
||||
</div>
|
||||
@@ -386,7 +386,7 @@
|
||||
<span class="badge badge-warning">진행 중</span>
|
||||
</div>
|
||||
<div class="todo-source" style="margin-top: var(--spacing-2);">
|
||||
<a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
||||
</a>
|
||||
</div>
|
||||
@@ -405,7 +405,7 @@
|
||||
<span class="badge badge-success">완료</span>
|
||||
</div>
|
||||
<div class="todo-source" style="margin-top: var(--spacing-2);">
|
||||
<a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
||||
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
||||
</a>
|
||||
</div>
|
||||
@@ -780,7 +780,7 @@
|
||||
UIComponents.showToast('회의록이 저장되었습니다', 'success');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = '12-회의록목록조회.html';
|
||||
window.location.href = '12-회의록상세조회.html';
|
||||
}, 1000);
|
||||
}, 800);
|
||||
}
|
||||
@@ -0,0 +1,765 @@
|
||||
<!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;
|
||||
padding: 0;
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.page-header {
|
||||
background-color: var(--color-white);
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
padding: var(--spacing-6);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
color: var(--color-gray-600);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size-body-small);
|
||||
margin-bottom: var(--spacing-4);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: var(--font-size-h1);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
/* Filters */
|
||||
.filters-section {
|
||||
display: flex;
|
||||
gap: var(--spacing-6);
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--spacing-4) 0;
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--color-gray-700);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-right: var(--spacing-2);
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--color-gray-600);
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.filter-button:hover {
|
||||
background-color: var(--color-gray-100);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
.filter-button.active {
|
||||
background-color: var(--color-primary-main);
|
||||
color: var(--color-white);
|
||||
box-shadow: 0 2px 4px rgba(0, 217, 177, 0.2);
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border: 1px solid var(--color-gray-300);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--color-white);
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
border: none;
|
||||
outline: none;
|
||||
flex: 1;
|
||||
font-size: var(--font-size-body);
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-6);
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
gap: var(--spacing-4);
|
||||
margin-bottom: var(--spacing-6);
|
||||
padding: var(--spacing-4);
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stat-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
/* Meeting List */
|
||||
.meeting-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.meeting-item {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-5);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.meeting-item:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary-main);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.meeting-item-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-3);
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.meeting-item-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.meeting-item-title {
|
||||
font-size: var(--font-size-h3);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-gray-900);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.meeting-item-meta {
|
||||
display: flex;
|
||||
gap: var(--spacing-4);
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-1);
|
||||
}
|
||||
|
||||
.meeting-item-status {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: var(--spacing-1) var(--spacing-3);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-body-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.status-badge.confirmed {
|
||||
background-color: rgba(0, 217, 177, 0.1);
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.status-badge.scheduled {
|
||||
background-color: rgba(99, 102, 241, 0.1);
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.status-badge.in-progress {
|
||||
background-color: rgba(245, 158, 11, 0.1);
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.meeting-item-description {
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--color-gray-700);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.meeting-item-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: var(--spacing-3);
|
||||
border-top: 1px solid var(--color-gray-100);
|
||||
}
|
||||
|
||||
.attendees-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.attendee-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-primary-main);
|
||||
color: var(--color-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-body-small);
|
||||
font-weight: var(--font-weight-bold);
|
||||
border: 2px solid var(--color-white);
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.attendee-avatar:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.attendee-count {
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-600);
|
||||
margin-left: var(--spacing-2);
|
||||
}
|
||||
|
||||
.meeting-stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-1);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-10) var(--spacing-4);
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
font-size: var(--font-size-h4);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.empty-description {
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 767px) {
|
||||
.page-header {
|
||||
padding: var(--spacing-3);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: var(--spacing-3);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: var(--font-size-h3);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.header-top {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* 필터 섹션 개선 */
|
||||
.filters-section {
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-3) 0;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
}
|
||||
|
||||
.filter-group::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari */
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: var(--font-size-body-small);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
padding: var(--spacing-1) var(--spacing-3);
|
||||
font-size: var(--font-size-body-small);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 요약카드 개선 - 가로 스크롤 */
|
||||
.stats-bar {
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-3);
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.stats-bar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex-shrink: 0;
|
||||
min-width: 140px;
|
||||
padding: var(--spacing-2);
|
||||
background-color: var(--color-gray-50);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
/* 회의록 카드 */
|
||||
.meeting-item {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.meeting-item-title {
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
.meeting-item-header {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.meeting-item-status {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.meeting-item-meta {
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.meeting-item-footer {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.search-box {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<a href="02-대시보드.html" class="back-button">
|
||||
← 대시보드
|
||||
</a>
|
||||
|
||||
<div class="header-top">
|
||||
<h1 class="page-title">회의록 목록</h1>
|
||||
<div class="search-box">
|
||||
<span>🔍</span>
|
||||
<input type="text" placeholder="회의록 검색..." id="searchInput">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filters-section">
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">상태:</span>
|
||||
<button class="filter-button active" data-filter="all">전체</button>
|
||||
<button class="filter-button" data-filter="confirmed">확정</button>
|
||||
<button class="filter-button" data-filter="scheduled">예정</button>
|
||||
<button class="filter-button" data-filter="in-progress">진행중</button>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">기간:</span>
|
||||
<button class="filter-button active" data-period="all">전체</button>
|
||||
<button class="filter-button" data-period="week">1주</button>
|
||||
<button class="filter-button" data-period="month">1개월</button>
|
||||
<button class="filter-button" data-period="quarter">3개월</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<!-- Stats Bar -->
|
||||
<div class="stats-bar">
|
||||
<div class="stat-item">
|
||||
<span class="stat-icon">📋</span>
|
||||
<div class="stat-text">
|
||||
<span class="stat-label">전체 회의록</span>
|
||||
<span class="stat-value" id="totalCount">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-icon">✅</span>
|
||||
<div class="stat-text">
|
||||
<span class="stat-label">확정 완료</span>
|
||||
<span class="stat-value" id="confirmedCount">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-icon">📌</span>
|
||||
<div class="stat-text">
|
||||
<span class="stat-label">진행 중 Todo</span>
|
||||
<span class="stat-value" id="todoCount">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Meeting List -->
|
||||
<div class="meeting-list" id="meetingList">
|
||||
<!-- Meetings will be rendered here -->
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="empty-state" id="emptyState" style="display: none;">
|
||||
<div class="empty-icon">📭</div>
|
||||
<div class="empty-message">회의록이 없습니다</div>
|
||||
<div class="empty-description">새로운 회의를 예약하고 회의록을 작성해보세요</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
// Use MeetingApp utilities directly without destructuring
|
||||
|
||||
// Sample meeting data
|
||||
const meetings = [
|
||||
{
|
||||
id: 'm-001',
|
||||
title: '2025년 1분기 제품 기획 회의',
|
||||
date: '2025-10-25 14:00',
|
||||
location: '본사 2층 대회의실',
|
||||
status: 'confirmed',
|
||||
attendees: ['김민준', '박서연', '이준호', '최유진'],
|
||||
description: '신규 회의록 서비스 기획 논의 및 개발 일정 수립',
|
||||
duration: 90,
|
||||
decisions: 3,
|
||||
todos: 5
|
||||
},
|
||||
{
|
||||
id: 'm-002',
|
||||
title: '주간 스크럼 회의',
|
||||
date: '2025-10-21 10:00',
|
||||
location: 'Zoom',
|
||||
status: 'confirmed',
|
||||
attendees: ['김민준', '이준호', '최유진'],
|
||||
description: '지난 주 진행 상황 공유 및 이번 주 계획 수립',
|
||||
duration: 30,
|
||||
decisions: 2,
|
||||
todos: 8
|
||||
},
|
||||
{
|
||||
id: 'm-003',
|
||||
title: 'AI 기능 개선 회의',
|
||||
date: '2025-10-23 15:00',
|
||||
location: '본사 3층 소회의실',
|
||||
status: 'in-progress',
|
||||
attendees: ['박서연', '이준호'],
|
||||
description: 'LLM 기반 회의록 자동 작성 개선 방안 논의',
|
||||
duration: 60,
|
||||
decisions: 4,
|
||||
todos: 3
|
||||
},
|
||||
{
|
||||
id: 'm-004',
|
||||
title: '2024 Q4 마케팅 전략 회의',
|
||||
date: '2024-01-15 14:00',
|
||||
location: '본사 대회의실',
|
||||
status: 'confirmed',
|
||||
attendees: ['김민준', '박서연', '이준호', '최유진', '정도현'],
|
||||
description: 'Q4 마케팅 예산 증액 및 인플루언서 마케팅 캠페인 론칭 결정',
|
||||
duration: 90,
|
||||
decisions: 3,
|
||||
todos: 12
|
||||
},
|
||||
{
|
||||
id: 'm-005',
|
||||
title: 'UI/UX 개선 워크샵',
|
||||
date: '2025-10-18 13:00',
|
||||
location: '본사 4층 세미나실',
|
||||
status: 'confirmed',
|
||||
attendees: ['최유진', '김민준', '박서연'],
|
||||
description: '사용자 피드백 기반 UI/UX 개선 방안 도출',
|
||||
duration: 120,
|
||||
decisions: 5,
|
||||
todos: 7
|
||||
},
|
||||
{
|
||||
id: 'm-006',
|
||||
title: '월간 전체 회의',
|
||||
date: '2025-11-01 16:00',
|
||||
location: '본사 대강당',
|
||||
status: 'scheduled',
|
||||
attendees: ['김민준', '박서연', '이준호', '최유진', '정도현', '송주영'],
|
||||
description: '월간 실적 공유 및 다음 달 목표 설정',
|
||||
duration: 60,
|
||||
decisions: 0,
|
||||
todos: 0
|
||||
}
|
||||
];
|
||||
|
||||
// Render meetings
|
||||
function renderMeetings(filteredMeetings = meetings) {
|
||||
const meetingList = document.getElementById('meetingList');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
|
||||
if (filteredMeetings.length === 0) {
|
||||
meetingList.style.display = 'none';
|
||||
emptyState.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
meetingList.style.display = 'flex';
|
||||
emptyState.style.display = 'none';
|
||||
|
||||
meetingList.innerHTML = filteredMeetings.map(meeting => {
|
||||
const attendeeAvatars = meeting.attendees.slice(0, 4).map((name, index) => {
|
||||
const initial = name.charAt(0);
|
||||
const colors = ['#00d9b1', '#6366f1', '#f59e0b', '#ec4899'];
|
||||
return `<div class="attendee-avatar" style="background-color: ${colors[index % 4]}">${initial}</div>`;
|
||||
}).join('');
|
||||
|
||||
const extraCount = meeting.attendees.length > 4 ? `+${meeting.attendees.length - 4}` : '';
|
||||
|
||||
const statusClass = {
|
||||
'confirmed': 'confirmed',
|
||||
'scheduled': 'scheduled',
|
||||
'in-progress': 'in-progress'
|
||||
}[meeting.status] || 'scheduled';
|
||||
|
||||
const statusLabel = {
|
||||
'confirmed': '✓ 확정 완료',
|
||||
'scheduled': '📅 예정',
|
||||
'in-progress': '🔄 진행중'
|
||||
}[meeting.status] || '예정';
|
||||
|
||||
return `
|
||||
<div class="meeting-item" onclick="window.MeetingApp.navigateTo('13-회의록상세조회.html')">
|
||||
<div class="meeting-item-header">
|
||||
<div class="meeting-item-left">
|
||||
<h3 class="meeting-item-title">${meeting.title}</h3>
|
||||
<div class="meeting-item-meta">
|
||||
<span class="meta-item">📅 ${formatDateTime(meeting.date)}</span>
|
||||
<span class="meta-item">📍 ${meeting.location}</span>
|
||||
<span class="meta-item">⏱️ ${meeting.duration}분</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meeting-item-status">
|
||||
<span class="status-badge ${statusClass}">${statusLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meeting-item-description">
|
||||
${meeting.description}
|
||||
</div>
|
||||
<div class="meeting-item-footer">
|
||||
<div class="attendees-list">
|
||||
${attendeeAvatars}
|
||||
${extraCount ? `<span class="attendee-count">${extraCount}</span>` : ''}
|
||||
</div>
|
||||
<div class="meeting-stats">
|
||||
<span class="stat">✅ 결정사항 ${meeting.decisions}개</span>
|
||||
<span class="stat">📌 Todo ${meeting.todos}개</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Update stats
|
||||
updateStats(filteredMeetings);
|
||||
}
|
||||
|
||||
// Format date time
|
||||
function formatDateTime(dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// Update stats
|
||||
function updateStats(filteredMeetings) {
|
||||
const totalCount = filteredMeetings.length;
|
||||
const confirmedCount = filteredMeetings.filter(m => m.status === 'confirmed').length;
|
||||
const todoCount = filteredMeetings.reduce((sum, m) => sum + m.todos, 0);
|
||||
|
||||
document.getElementById('totalCount').textContent = totalCount;
|
||||
document.getElementById('confirmedCount').textContent = confirmedCount;
|
||||
document.getElementById('todoCount').textContent = todoCount;
|
||||
}
|
||||
|
||||
// Filter by status
|
||||
const filterButtons = document.querySelectorAll('.filter-button[data-filter]');
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
|
||||
const filterValue = button.dataset.filter;
|
||||
const filtered = filterValue === 'all'
|
||||
? meetings
|
||||
: meetings.filter(m => m.status === filterValue);
|
||||
|
||||
renderMeetings(filtered);
|
||||
});
|
||||
});
|
||||
|
||||
// Filter by period
|
||||
const periodButtons = document.querySelectorAll('.filter-button[data-period]');
|
||||
periodButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
periodButtons.forEach(btn => btn.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
|
||||
const periodValue = button.dataset.period;
|
||||
let filtered = meetings;
|
||||
|
||||
if (periodValue !== 'all') {
|
||||
const now = new Date();
|
||||
const daysMap = { week: 7, month: 30, quarter: 90 };
|
||||
const days = daysMap[periodValue];
|
||||
|
||||
filtered = meetings.filter(m => {
|
||||
const meetingDate = new Date(m.date);
|
||||
const diffTime = now - meetingDate;
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
return diffDays <= days;
|
||||
});
|
||||
}
|
||||
|
||||
renderMeetings(filtered);
|
||||
});
|
||||
});
|
||||
|
||||
// Search
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
const filtered = meetings.filter(m =>
|
||||
m.title.toLowerCase().includes(searchTerm) ||
|
||||
m.description.toLowerCase().includes(searchTerm) ||
|
||||
m.location.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
renderMeetings(filtered);
|
||||
});
|
||||
|
||||
// Initial render
|
||||
renderMeetings();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -546,8 +546,8 @@
|
||||
<!-- Header -->
|
||||
<header class="meeting-header">
|
||||
<div class="header-content">
|
||||
<a href="02-대시보드.html" class="back-button">
|
||||
← 대시보드
|
||||
<a href="12-회의록목록.html" class="back-button">
|
||||
← 회의록 목록
|
||||
</a>
|
||||
<h1 class="meeting-title">2024 Q4 마케팅 전략 회의</h1>
|
||||
<div class="meeting-meta-row">
|
||||
@@ -564,11 +564,6 @@
|
||||
<span>참석자 5명</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<a href="09-회의록공유.html" class="tab">회의록</a>
|
||||
<a href="#" class="tab active">대시보드</a>
|
||||
<a href="#" class="tab">타임라인</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,831 +0,0 @@
|
||||
<!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;
|
||||
padding: 0;
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
background-color: var(--color-white);
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
padding: var(--spacing-4) var(--spacing-6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.back-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
transition: background-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
border-radius: var(--radius-md);
|
||||
transition: background-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
padding: var(--spacing-4);
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
/* Filter Section */
|
||||
.filter-section {
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-4);
|
||||
margin-bottom: var(--spacing-4);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-3);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
display: block;
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-700);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-3);
|
||||
border: 1px solid var(--color-gray-300);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-body);
|
||||
background-color: var(--color-white);
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
/* Tab Filters */
|
||||
.tab-filters {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
overflow-x: auto;
|
||||
margin-bottom: var(--spacing-4);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tab-filter {
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
background-color: var(--color-gray-100);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-700);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.tab-filter.active {
|
||||
background-color: var(--color-primary-main);
|
||||
color: var(--color-white);
|
||||
border-color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
/* Search Input */
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: var(--spacing-3) var(--spacing-10) var(--spacing-3) var(--spacing-4);
|
||||
border: 1px solid var(--color-gray-300);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-body);
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
position: absolute;
|
||||
right: var(--spacing-3);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: var(--color-gray-400);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clear-search.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Stats Cards */
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-3);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-4);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-600);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--font-size-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
/* Meeting List */
|
||||
.meeting-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.meeting-item {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-4);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.meeting-item:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.meeting-item-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.meeting-item-title {
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-gray-900);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.meeting-item-meta {
|
||||
font-size: var(--font-size-body-small);
|
||||
color: var(--color-gray-500);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.meeting-item-updated {
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
|
||||
.meeting-item-badges {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.read-only-label {
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-16) var(--spacing-4);
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.empty-state-title {
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-gray-700);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.empty-state-desc {
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* Bottom Navigation */
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--color-white);
|
||||
border-top: 1px solid var(--color-gray-200);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: var(--spacing-2) 0;
|
||||
z-index: var(--z-sticky);
|
||||
}
|
||||
|
||||
.bottom-nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-1);
|
||||
padding: var(--spacing-2);
|
||||
color: var(--color-gray-500);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size-caption);
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.bottom-nav-item.active {
|
||||
color: var(--color-primary-main);
|
||||
}
|
||||
|
||||
.bottom-nav-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 767px) {
|
||||
.page-header {
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: var(--spacing-3);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bottom-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.meeting-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="page-header">
|
||||
<div class="header-left">
|
||||
<button class="back-button" onclick="navigateTo('02-대시보드.html')">
|
||||
←
|
||||
</button>
|
||||
<h1 class="page-title">회의록 목록</h1>
|
||||
</div>
|
||||
<button class="search-button" onclick="focusSearch()">
|
||||
🔍
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<!-- Filter Section -->
|
||||
<section class="filter-section">
|
||||
<!-- Filter Row -->
|
||||
<div class="filter-row">
|
||||
<div>
|
||||
<label class="filter-label" for="statusFilter">상태</label>
|
||||
<select class="filter-select" id="statusFilter" onchange="applyFilters()">
|
||||
<option value="all">전체</option>
|
||||
<option value="draft">작성중</option>
|
||||
<option value="confirmed">확정완료</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="filter-label" for="sortFilter">정렬</label>
|
||||
<select class="filter-select" id="sortFilter" onchange="applyFilters()">
|
||||
<option value="recent">최신 업데이트순</option>
|
||||
<option value="date">회의 일시순</option>
|
||||
<option value="title">제목순</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Filters -->
|
||||
<div class="tab-filters">
|
||||
<button class="tab-filter active" data-type="all" onclick="selectTypeFilter('all')">전체</button>
|
||||
<button class="tab-filter" data-type="shared" onclick="selectTypeFilter('shared')">공유받은 회의</button>
|
||||
<button class="tab-filter" data-type="attended" onclick="selectTypeFilter('attended')">참석한 회의</button>
|
||||
<button class="tab-filter" data-type="created" onclick="selectTypeFilter('created')">생성한 회의</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="search-input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
id="searchInput"
|
||||
placeholder="회의 제목, 참석자, 키워드 검색"
|
||||
oninput="handleSearch()"
|
||||
>
|
||||
<button class="clear-search" id="clearSearch" onclick="clearSearch()">×</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">전체</div>
|
||||
<div class="stat-value" id="totalCount">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">작성중</div>
|
||||
<div class="stat-value" id="draftCount">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">확정완료</div>
|
||||
<div class="stat-value" id="confirmedCount">0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Meeting List -->
|
||||
<div class="meeting-list" id="meetingList">
|
||||
<!-- Meeting items will be rendered here -->
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="empty-state" id="emptyState" style="display: none;">
|
||||
<div class="empty-state-icon">📋</div>
|
||||
<div class="empty-state-title">회의록이 없습니다</div>
|
||||
<div class="empty-state-desc">새로운 회의를 시작해보세요!</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Bottom Navigation (Mobile) -->
|
||||
<nav class="bottom-nav hide-desktop">
|
||||
<a href="02-대시보드.html" class="bottom-nav-item">
|
||||
<div class="bottom-nav-icon">📊</div>
|
||||
<div>대시보드</div>
|
||||
</a>
|
||||
<a href="12-회의록목록조회.html" class="bottom-nav-item active">
|
||||
<div class="bottom-nav-icon">📅</div>
|
||||
<div>회의</div>
|
||||
</a>
|
||||
<a href="09-Todo관리.html" class="bottom-nav-item">
|
||||
<div class="bottom-nav-icon">✅</div>
|
||||
<div>Todo</div>
|
||||
</a>
|
||||
<a href="02-대시보드.html" class="bottom-nav-item">
|
||||
<div class="bottom-nav-icon">⚙️</div>
|
||||
<div>더보기</div>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- FAB -->
|
||||
<button class="fab" onclick="navigateTo('04-템플릿선택.html')" title="새 회의 시작">+</button>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
const { AppState, Storage, Toast, formatDateTime, timeAgo, navigateTo } = window.MeetingApp;
|
||||
|
||||
// 필터 상태
|
||||
let currentFilters = {
|
||||
type: 'all', // all | shared | attended | created
|
||||
status: 'all', // all | draft | confirmed
|
||||
sort: 'recent', // recent | date | title
|
||||
search: ''
|
||||
};
|
||||
|
||||
// 샘플 데이터 초기화
|
||||
function initSampleData() {
|
||||
const currentUserId = 'user-001';
|
||||
|
||||
if (!Storage.get('meetings') || Storage.get('meetings').length === 0) {
|
||||
const sampleMeetings = [
|
||||
{
|
||||
id: 'meeting-001',
|
||||
title: '긴급 버그 픽스 회의',
|
||||
date: new Date(Date.now() - 1800000).toISOString(),
|
||||
startTime: new Date(Date.now() - 1800000).toISOString(),
|
||||
location: '온라인 (Zoom)',
|
||||
status: 'ongoing',
|
||||
description: '프로덕션 환경 긴급 버그 대응',
|
||||
creatorId: 'user-002',
|
||||
attendees: ['user-001', 'user-002', 'user-003'],
|
||||
updatedAt: new Date(Date.now() - 900000).toISOString()
|
||||
},
|
||||
{
|
||||
id: 'meeting-002',
|
||||
title: '주간 스프린트 회의',
|
||||
date: new Date(Date.now() + 86400000).toISOString(),
|
||||
startTime: new Date(Date.now() + 86400000).toISOString(),
|
||||
location: '온라인 (Zoom)',
|
||||
status: 'scheduled',
|
||||
description: '이번 주 스프린트 진행사항 및 다음 주 계획 논의',
|
||||
creatorId: 'user-001',
|
||||
attendees: ['user-001', 'user-002', 'user-003', 'user-004'],
|
||||
updatedAt: new Date(Date.now() - 3600000).toISOString()
|
||||
},
|
||||
{
|
||||
id: 'meeting-003',
|
||||
title: 'Q4 마케팅 전략 회의',
|
||||
date: new Date(Date.now() - 172800000).toISOString(),
|
||||
startTime: new Date(Date.now() - 172800000).toISOString(),
|
||||
location: '본사 3층 회의실',
|
||||
status: 'completed',
|
||||
description: '4분기 마케팅 캠페인 기획 및 예산 검토',
|
||||
creatorId: 'user-005',
|
||||
attendees: ['user-001', 'user-005'],
|
||||
updatedAt: new Date(Date.now() - 86400000).toISOString()
|
||||
},
|
||||
{
|
||||
id: 'meeting-004',
|
||||
title: '디자인 리뷰',
|
||||
date: new Date(Date.now() + 3600000).toISOString(),
|
||||
startTime: new Date(Date.now() + 3600000).toISOString(),
|
||||
location: '온라인 (Google Meet)',
|
||||
status: 'scheduled',
|
||||
description: 'UI/UX 디자인 최종 검토 및 피드백',
|
||||
creatorId: 'user-003',
|
||||
attendees: ['user-001', 'user-003', 'user-006'],
|
||||
updatedAt: new Date(Date.now() - 7200000).toISOString()
|
||||
},
|
||||
{
|
||||
id: 'meeting-005',
|
||||
title: '월간 전체 회의',
|
||||
date: new Date(Date.now() + 259200000).toISOString(),
|
||||
startTime: new Date(Date.now() + 259200000).toISOString(),
|
||||
location: '대강당',
|
||||
status: 'scheduled',
|
||||
description: '월간 성과 공유 및 다음 달 목표 설정',
|
||||
creatorId: 'user-001',
|
||||
attendees: ['user-001', 'user-002', 'user-003', 'user-004', 'user-005'],
|
||||
updatedAt: new Date(Date.now() - 10800000).toISOString()
|
||||
},
|
||||
{
|
||||
id: 'meeting-006',
|
||||
title: '고객 피드백 리뷰',
|
||||
date: new Date(Date.now() - 345600000).toISOString(),
|
||||
startTime: new Date(Date.now() - 345600000).toISOString(),
|
||||
location: '온라인 (Teams)',
|
||||
status: 'completed',
|
||||
description: '최근 수집된 고객 VOC 분석 및 개선 방안 도출',
|
||||
creatorId: 'user-007',
|
||||
attendees: ['user-001', 'user-007'],
|
||||
updatedAt: new Date(Date.now() - 259200000).toISOString()
|
||||
},
|
||||
{
|
||||
id: 'meeting-007',
|
||||
title: '신입사원 온보딩',
|
||||
date: new Date(Date.now() - 518400000).toISOString(),
|
||||
startTime: new Date(Date.now() - 518400000).toISOString(),
|
||||
location: '본사 1층 교육장',
|
||||
status: 'completed',
|
||||
description: '2025년 1분기 신입사원 온보딩 프로그램',
|
||||
creatorId: 'user-001',
|
||||
attendees: ['user-001', 'user-008', 'user-009'],
|
||||
updatedAt: new Date(Date.now() - 432000000).toISOString()
|
||||
},
|
||||
{
|
||||
id: 'meeting-008',
|
||||
title: '보안 정책 업데이트',
|
||||
date: new Date(Date.now() - 604800000).toISOString(),
|
||||
startTime: new Date(Date.now() - 604800000).toISOString(),
|
||||
location: '온라인 (Zoom)',
|
||||
status: 'completed',
|
||||
description: '최신 보안 가이드라인 공유 및 적용 계획',
|
||||
creatorId: 'user-010',
|
||||
attendees: ['user-001', 'user-010'],
|
||||
updatedAt: new Date(Date.now() - 518400000).toISOString()
|
||||
}
|
||||
];
|
||||
Storage.set('meetings', sampleMeetings);
|
||||
Storage.set('currentUserId', currentUserId);
|
||||
}
|
||||
|
||||
if (!Storage.get('sharedMeetings') || Storage.get('sharedMeetings').length === 0) {
|
||||
const sharedMeetings = [
|
||||
{
|
||||
id: 'meeting-s001',
|
||||
title: 'AI 기술 도입 검토 회의',
|
||||
date: new Date(Date.now() - 259200000).toISOString(),
|
||||
location: '본사 2층 회의실',
|
||||
status: 'completed',
|
||||
description: 'LLM 기반 서비스 개선 방안 논의',
|
||||
sharedBy: '홍길동',
|
||||
isShared: true,
|
||||
attendees: ['user-011'],
|
||||
updatedAt: new Date(Date.now() - 172800000).toISOString()
|
||||
},
|
||||
{
|
||||
id: 'meeting-s002',
|
||||
title: '팀 빌딩 워크샵',
|
||||
date: new Date(Date.now() - 691200000).toISOString(),
|
||||
location: '제주 연수원',
|
||||
status: 'completed',
|
||||
description: '팀 협업 강화 및 커뮤니케이션 개선 활동',
|
||||
sharedBy: '백현정',
|
||||
isShared: true,
|
||||
attendees: ['user-011'],
|
||||
updatedAt: new Date(Date.now() - 604800000).toISOString()
|
||||
}
|
||||
];
|
||||
Storage.set('sharedMeetings', sharedMeetings);
|
||||
}
|
||||
}
|
||||
|
||||
// 인증 체크 및 초기화
|
||||
MeetingApp.ready(() => {
|
||||
const authToken = Storage.get('authToken');
|
||||
if (!authToken) {
|
||||
window.location.href = '01-로그인.html';
|
||||
return;
|
||||
}
|
||||
|
||||
initSampleData();
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
// 검색 입력 처리
|
||||
let searchTimeout;
|
||||
function handleSearch() {
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const clearSearch = document.getElementById('clearSearch');
|
||||
|
||||
// Clear 버튼 표시/숨김
|
||||
if (searchInput.value.trim()) {
|
||||
clearSearch.classList.add('show');
|
||||
} else {
|
||||
clearSearch.classList.remove('show');
|
||||
}
|
||||
|
||||
// Debounce 처리 (300ms)
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
currentFilters.search = searchInput.value.trim().toLowerCase();
|
||||
applyFilters();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 검색어 지우기
|
||||
function clearSearch() {
|
||||
document.getElementById('searchInput').value = '';
|
||||
document.getElementById('clearSearch').classList.remove('show');
|
||||
currentFilters.search = '';
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
// 검색 입력에 포커스
|
||||
function focusSearch() {
|
||||
document.getElementById('searchInput').focus();
|
||||
}
|
||||
|
||||
// 참여 유형 필터 선택
|
||||
function selectTypeFilter(type) {
|
||||
// 탭 활성화 상태 변경
|
||||
document.querySelectorAll('.tab-filter').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
document.querySelector(`.tab-filter[data-type="${type}"]`).classList.add('active');
|
||||
|
||||
currentFilters.type = type;
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
// 필터 적용
|
||||
function applyFilters() {
|
||||
const statusFilter = document.getElementById('statusFilter').value;
|
||||
const sortFilter = document.getElementById('sortFilter').value;
|
||||
|
||||
currentFilters.status = statusFilter;
|
||||
currentFilters.sort = sortFilter;
|
||||
|
||||
renderMeetingList();
|
||||
}
|
||||
|
||||
// 회의록 목록 렌더링
|
||||
function renderMeetingList() {
|
||||
const currentUserId = Storage.get('currentUserId', 'user-001');
|
||||
const meetings = Storage.get('meetings', []);
|
||||
const sharedMeetings = Storage.get('sharedMeetings', []);
|
||||
|
||||
// 모든 회의록 결합
|
||||
let allMeetings = [...meetings];
|
||||
|
||||
// 공유받은 회의록 추가
|
||||
if (currentFilters.type === 'all' || currentFilters.type === 'shared') {
|
||||
allMeetings = [...allMeetings, ...sharedMeetings];
|
||||
}
|
||||
|
||||
// 참여 유형 필터링
|
||||
let filteredMeetings = allMeetings.filter(meeting => {
|
||||
if (currentFilters.type === 'shared') {
|
||||
return meeting.isShared === true;
|
||||
} else if (currentFilters.type === 'attended') {
|
||||
return meeting.attendees && meeting.attendees.includes(currentUserId) && !meeting.isShared;
|
||||
} else if (currentFilters.type === 'created') {
|
||||
return meeting.creatorId === currentUserId;
|
||||
}
|
||||
return true; // 'all'
|
||||
});
|
||||
|
||||
// 상태 필터링
|
||||
if (currentFilters.status !== 'all') {
|
||||
filteredMeetings = filteredMeetings.filter(meeting => {
|
||||
if (currentFilters.status === 'draft') {
|
||||
return meeting.status === 'scheduled' || meeting.status === 'ongoing';
|
||||
} else if (currentFilters.status === 'confirmed') {
|
||||
return meeting.status === 'completed';
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
// 검색 필터링
|
||||
if (currentFilters.search) {
|
||||
filteredMeetings = filteredMeetings.filter(meeting => {
|
||||
const searchLower = currentFilters.search.toLowerCase();
|
||||
const titleMatch = meeting.title.toLowerCase().includes(searchLower);
|
||||
const descMatch = meeting.description && meeting.description.toLowerCase().includes(searchLower);
|
||||
const locationMatch = meeting.location && meeting.location.toLowerCase().includes(searchLower);
|
||||
return titleMatch || descMatch || locationMatch;
|
||||
});
|
||||
}
|
||||
|
||||
// 정렬
|
||||
if (currentFilters.sort === 'recent') {
|
||||
filteredMeetings.sort((a, b) => new Date(b.updatedAt || b.date) - new Date(a.updatedAt || a.date));
|
||||
} else if (currentFilters.sort === 'date') {
|
||||
filteredMeetings.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
} else if (currentFilters.sort === 'title') {
|
||||
filteredMeetings.sort((a, b) => a.title.localeCompare(b.title, 'ko-KR'));
|
||||
}
|
||||
|
||||
// 통계 업데이트
|
||||
updateStats(filteredMeetings);
|
||||
|
||||
// 목록 렌더링
|
||||
const meetingList = document.getElementById('meetingList');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
|
||||
if (filteredMeetings.length === 0) {
|
||||
meetingList.style.display = 'none';
|
||||
emptyState.style.display = 'block';
|
||||
|
||||
if (currentFilters.search) {
|
||||
emptyState.querySelector('.empty-state-title').textContent = '검색 결과가 없습니다';
|
||||
emptyState.querySelector('.empty-state-desc').textContent = '다른 키워드로 검색해보세요';
|
||||
} else {
|
||||
emptyState.querySelector('.empty-state-title').textContent = '회의록이 없습니다';
|
||||
emptyState.querySelector('.empty-state-desc').textContent = '새로운 회의를 시작해보세요!';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
meetingList.style.display = 'flex';
|
||||
emptyState.style.display = 'none';
|
||||
|
||||
meetingList.innerHTML = filteredMeetings.map(meeting => {
|
||||
const isCreator = meeting.creatorId === currentUserId;
|
||||
const isShared = meeting.isShared === true;
|
||||
const isReadOnly = isShared || (!isCreator && meeting.status === 'completed');
|
||||
|
||||
let statusBadge = '';
|
||||
if (meeting.status === 'completed') {
|
||||
statusBadge = '<span class="badge badge-success">확정완료</span>';
|
||||
} else if (meeting.status === 'ongoing') {
|
||||
statusBadge = '<span class="badge badge-error">진행중</span>';
|
||||
} else {
|
||||
statusBadge = '<span class="badge badge-warning">작성중</span>';
|
||||
}
|
||||
|
||||
const readOnlyLabel = isReadOnly ? '<div class="read-only-label">조회 전용</div>' : '';
|
||||
const updatedTime = timeAgo(meeting.updatedAt || meeting.date);
|
||||
|
||||
return `
|
||||
<div class="meeting-item" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-item-header">
|
||||
<div style="flex: 1;">
|
||||
<div class="meeting-item-title">${meeting.title}</div>
|
||||
<div class="meeting-item-meta">📅 ${formatDateTime(meeting.date)}</div>
|
||||
<div class="meeting-item-meta">📍 ${meeting.location}</div>
|
||||
<div class="meeting-item-meta">👥 ${meeting.attendees ? meeting.attendees.length : 0}명</div>
|
||||
${isShared ? `<div class="meeting-item-meta">👤 공유자: ${meeting.sharedBy}</div>` : ''}
|
||||
<div class="meeting-item-updated">최종 수정: ${updatedTime}</div>
|
||||
</div>
|
||||
<div class="meeting-item-badges">
|
||||
${statusBadge}
|
||||
${readOnlyLabel}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 통계 업데이트
|
||||
function updateStats(meetings) {
|
||||
const total = meetings.length;
|
||||
const draft = meetings.filter(m => m.status === 'scheduled' || m.status === 'ongoing').length;
|
||||
const confirmed = meetings.filter(m => m.status === 'completed').length;
|
||||
|
||||
document.getElementById('totalCount').textContent = total;
|
||||
document.getElementById('draftCount').textContent = draft;
|
||||
document.getElementById('confirmedCount').textContent = confirmed;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user