mirror of
https://github.com/hwanny1128/HGZero.git
synced 2026-06-13 02:29:12 +00:00
작업 파일 정리 및 실시간 회의록 플로우 추가
- 가파팀 프로토타입 파일 삭제 - 가파팀 유저스토리 삭제 - 실시간 회의록 작성 플로우 설계서 추가 (Mermaid, Markdown) - 백업 및 데이터 디렉토리 추가 - AI 데이터 샘플 생성 도구 추가 🤖 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,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>
|
||||
Reference in New Issue
Block a user