mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 10:16:24 +00:00
프로토타입 수정
This commit is contained in:
hjmoons
parent
a68340735b
commit
613b730287
@ -1148,7 +1148,7 @@
|
|||||||
'<span class="role-indicator"><span class="crown-icon">👑</span> 생성자</span>' : '';
|
'<span class="role-indicator"><span class="crown-icon">👑</span> 생성자</span>' : '';
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="meeting-card ${isOngoing ? 'ongoing' : ''}" onclick="event.stopPropagation(); navigateTo('10-회의록대시보드.html')">
|
<div class="meeting-card ${isOngoing ? 'ongoing' : ''}" onclick="event.stopPropagation(); navigateTo('11-회의록대시보드.html')">
|
||||||
<div class="meeting-header">
|
<div class="meeting-header">
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
<div class="meeting-badges">
|
<div class="meeting-badges">
|
||||||
|
|||||||
831
design/uiux/prototype/12-회의록목록조회.html
Normal file
831
design/uiux/prototype/12-회의록목록조회.html
Normal file
@ -0,0 +1,831 @@
|
|||||||
|
<!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>
|
||||||
Loading…
x
Reference in New Issue
Block a user