mirror of
https://github.com/hwanny1128/HGZero.git
synced 2026-01-21 14:56:24 +00:00
대시보드 및 Todo 카드 디자인 통일 (v1.5.0)
## 주요 변경사항 ### 1. 대시보드 카드 레이아웃 일관성 개선 - **나의 Todo 카드**: 담당자 정보 제거 → 회의록 링크로 변경 - 메타 정보: 🔗 회의 제목 + 마감일 - 09-Todo관리.html과 동일한 구조 적용 - **나의 회의록 카드**: 배지 + 제목 + 👑 레이아웃 통일 - 1줄: [상태배지] 제목 👑 - 2줄: 📅 날짜/시간 👥 인원수 완료율% - **최근 회의 카드**: 배지 + 제목👑 + 메타정보 3줄 구조 - 1줄: [상태배지] 제목👑 - 2줄: 📅 날짜/시간 👥 인원수 - 3줄: 📍 장소 ### 2. Todo 카드 스타일 공통화 - common.css에 Todo 카드 공통 스타일 추가 (1767-1890줄) - 02-대시보드.html, 09-Todo관리.html에서 중복 스타일 제거 (~240줄) - 페이지별 전용 스타일만 개별 파일에 유지 ### 3. 샘플 데이터 정책 명확화 - SAMPLE_TODOS: status는 not_started/completed만 사용, progress 항목 제거 - SAMPLE_MINUTES: lastUpdated 날짜 형식 변경, participantCount 주석 추가 - draft 상태 회의록 최소 1개 보장 (상위 3개 중) ### 4. 유지보수성 향상 - 모든 화면에서 동일한 Todo 카드 디자인 보장 - 중앙 관리로 일관성 유지 ## 수정 파일 - design/uiux/prototype/02-대시보드.html - design/uiux/prototype/09-Todo관리.html - design/uiux/prototype/common.css (Todo 카드 공통 스타일 추가) - design/uiux/prototype/common.js (샘플 데이터 개선) - design/uiux/uiux.md (v1.5.0 변경 이력 추가) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
parent
000a54cd20
commit
a2deb108ac
@ -194,16 +194,18 @@
|
||||
|
||||
.meeting-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
margin-bottom: var(--space-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meeting-card-title {
|
||||
font-size: var(--font-body);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--space-xs);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.meeting-card-meta {
|
||||
@ -229,62 +231,135 @@
|
||||
padding: var(--space-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
padding: var(--space-md);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.todo-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-item:hover {
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.todo-item.overdue {
|
||||
border-left: 4px solid var(--error);
|
||||
padding-left: calc(var(--space-md) - 4px);
|
||||
}
|
||||
|
||||
.todo-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--space-sm);
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.todo-title {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
/* Todo 카드 스타일은 common.css에서 공통 관리 */
|
||||
|
||||
.todo-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 통계 영역 - 정보 표시용 (클릭 불가) */
|
||||
.stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
/* 통계 카드 - 정보 표시용 (인터랙션 없음) */
|
||||
.stat-box {
|
||||
min-height: 100px;
|
||||
padding: var(--space-md);
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
/* 상태별 컬러 코딩 - 단색 배경 + 상단 액센트 라인 */
|
||||
.stat-box.stat-meeting {
|
||||
background: #F8FBFF;
|
||||
border-top: 4px solid #2196F3;
|
||||
border-color: #E3F2FD;
|
||||
}
|
||||
|
||||
.stat-box.stat-todo {
|
||||
background: #F0FFF4;
|
||||
border-top: 4px solid #4DD5A7;
|
||||
border-color: #C6F6D5;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-h1);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-box.stat-meeting .stat-number {
|
||||
color: #1976D2;
|
||||
}
|
||||
|
||||
.stat-box.stat-todo .stat-number {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.stat-text {
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-500);
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--gray-600);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.todo-progress {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
/* 회의록 리스트 */
|
||||
/* 회의록 리스트 - Todo 카드와 동일한 스타일 */
|
||||
.minutes-list {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: var(--space-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
/* 회의록 카드 스타일 */
|
||||
.minutes-card {
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--white);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: pointer;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.minutes-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.minutes-card-header {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
margin-bottom: var(--space-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.minutes-card-title {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--gray-900);
|
||||
font-size: var(--font-base);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.minutes-card-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-600);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.minutes-card-badges {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 하위 호환성을 위한 기존 클래스 유지 */
|
||||
.minutes-item {
|
||||
padding: var(--space-md);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
@ -474,40 +549,34 @@
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<main class="main-content">
|
||||
|
||||
<!-- 통계 -->
|
||||
<section class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<!-- 통계 개요 -->
|
||||
<div class="stats-overview">
|
||||
<div class="stat-box stat-meeting">
|
||||
<div class="stat-icon">📅</div>
|
||||
<div class="stat-label">예정된 회의</div>
|
||||
<div class="stat-value" id="stat-scheduled">3</div>
|
||||
<div class="stat-number" id="stat-scheduled">0</div>
|
||||
<div class="stat-text">예정된 회의</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-box stat-todo">
|
||||
<div class="stat-icon">✅</div>
|
||||
<div class="stat-label">진행 중 Todo</div>
|
||||
<div class="stat-value" id="stat-todos">1</div>
|
||||
<div class="stat-number" id="stat-todos">0</div>
|
||||
<div class="stat-text">나의 Todo</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📈</div>
|
||||
<div class="stat-label">Todo 완료율</div>
|
||||
<div class="stat-value" id="stat-completion">33%</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 최근 회의 -->
|
||||
<section>
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">최근 회의</h2>
|
||||
<a href="12-회의록목록조회.html" class="section-link">전체 보기 →</a>
|
||||
</div>
|
||||
<div class="meeting-grid" id="recent-meetings">
|
||||
<!-- 동적 생성 -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 할당된 Todo -->
|
||||
<!-- 나의 Todo -->
|
||||
<section>
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">할당된 Todo</h2>
|
||||
<h2 class="section-title">나의 Todo</h2>
|
||||
<a href="09-Todo관리.html" class="section-link">전체 보기 →</a>
|
||||
</div>
|
||||
<div class="todo-list" id="my-todos">
|
||||
@ -515,10 +584,10 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 내 회의록 -->
|
||||
<!-- 나의 회의록 -->
|
||||
<section>
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">내 회의록</h2>
|
||||
<h2 class="section-title">나의 회의록</h2>
|
||||
<a href="12-회의록목록조회.html" class="section-link">전체 보기 →</a>
|
||||
</div>
|
||||
<div class="minutes-list" id="my-minutes">
|
||||
@ -570,19 +639,25 @@
|
||||
const currentUser = getFromStorage('currentUser') || CURRENT_USER;
|
||||
|
||||
/**
|
||||
* 최근 회의 렌더링
|
||||
* 최근 회의 렌더링 (회의록 미생성 먼저, 빠른 일시 순으로 3개)
|
||||
*/
|
||||
function renderRecentMeetings() {
|
||||
const container = $('#recent-meetings');
|
||||
|
||||
// 진행중 우선, 날짜순 정렬
|
||||
// 회의록 미생성(scheduled, ongoing) 먼저, 빠른 일시 순 정렬
|
||||
const meetings = [...SAMPLE_MEETINGS]
|
||||
.sort((a, b) => {
|
||||
if (a.status === 'ongoing' && b.status !== 'ongoing') return -1;
|
||||
if (a.status !== 'ongoing' && b.status === 'ongoing') return 1;
|
||||
return new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time);
|
||||
// 회의록 미생성 회의 우선
|
||||
const aNoMinutes = a.status === 'scheduled' || a.status === 'ongoing';
|
||||
const bNoMinutes = b.status === 'scheduled' || b.status === 'ongoing';
|
||||
|
||||
if (aNoMinutes && !bNoMinutes) return -1;
|
||||
if (!aNoMinutes && bNoMinutes) return 1;
|
||||
|
||||
// 동일 그룹 내에서는 빠른 일시 순 (오름차순)
|
||||
return new Date(a.date + ' ' + a.time) - new Date(b.date + ' ' + b.time);
|
||||
})
|
||||
.slice(0, 3);
|
||||
.slice(0, 3); // 상위 3개만 표시
|
||||
|
||||
container.innerHTML = meetings.map(meeting => {
|
||||
const statusInfo = getMeetingStatusInfo(meeting);
|
||||
@ -591,16 +666,12 @@
|
||||
return `
|
||||
<div class="meeting-card ${meeting.status === 'ongoing' ? 'ongoing' : ''}" data-id="${meeting.id}">
|
||||
<div class="meeting-card-header">
|
||||
<div>
|
||||
${createBadge(statusInfo.badgeText, statusInfo.badgeType)}
|
||||
${isCreator ? ' <span>👑</span>' : ''}
|
||||
<h3 class="meeting-card-title">${meeting.title}${isCreator ? ' <span style="font-size: 16px;" title="생성자">👑</span>' : ''}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="meeting-card-title">${meeting.title}</h3>
|
||||
<div class="meeting-card-meta">
|
||||
<div class="meeting-card-meta-item">📅 ${formatDate(meeting.date)} ${formatTime(meeting.time)}</div>
|
||||
<div class="meeting-card-meta-item">📅 ${formatDate(meeting.date)} ${formatTime(meeting.time)} 👥 ${meeting.participants.length}명</div>
|
||||
<div class="meeting-card-meta-item">📍 ${meeting.location}</div>
|
||||
<div class="meeting-card-meta-item">👥 ${meeting.participants.length}명</div>
|
||||
</div>
|
||||
<div class="meeting-card-actions">
|
||||
${meeting.status === 'ongoing'
|
||||
@ -633,7 +704,7 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* 내 Todo 렌더링
|
||||
* 내 Todo 렌더링 (09-Todo관리.html과 동일한 정렬 기준)
|
||||
*/
|
||||
function renderMyTodos() {
|
||||
const container = $('#my-todos');
|
||||
@ -641,10 +712,12 @@
|
||||
const myTodos = SAMPLE_TODOS
|
||||
.filter(todo => todo.assignee.id === currentUser.id)
|
||||
.sort((a, b) => {
|
||||
const priorityOrder = { overdue: 0, in_progress: 1, not_started: 2, completed: 3 };
|
||||
return priorityOrder[a.status] - priorityOrder[b.status];
|
||||
// 09-Todo관리.html과 동일한 정렬: 완료되지 않은 것 우선, 마감일 순
|
||||
if (a.status === 'completed' && b.status !== 'completed') return 1;
|
||||
if (a.status !== 'completed' && b.status === 'completed') return -1;
|
||||
return new Date(a.dueDate) - new Date(b.dueDate);
|
||||
})
|
||||
.slice(0, 5);
|
||||
.slice(0, 3); // 상위 3개만 표시
|
||||
|
||||
if (myTodos.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state"><div class="empty-icon">✅</div><p>할당된 Todo가 없습니다</p></div>';
|
||||
@ -652,61 +725,122 @@
|
||||
}
|
||||
|
||||
container.innerHTML = myTodos.map(todo => {
|
||||
const statusInfo = getTodoStatusInfo(todo);
|
||||
const isOverdue = calculateDday(todo.dueDate) < 0 && todo.status !== 'completed';
|
||||
const dday = calculateDday(todo.dueDate);
|
||||
const isCompleted = todo.status === 'completed';
|
||||
const isOverdue = dday < 0 && !isCompleted;
|
||||
|
||||
// D-day 배지
|
||||
let ddayBadge = '';
|
||||
let ddayClass = '';
|
||||
if (isCompleted) {
|
||||
ddayBadge = '완료';
|
||||
ddayClass = 'badge-complete';
|
||||
} else if (isOverdue) {
|
||||
ddayBadge = `D+${Math.abs(dday)} (지연)`;
|
||||
ddayClass = 'badge-overdue';
|
||||
} else if (dday === 0) {
|
||||
ddayBadge = 'D-DAY';
|
||||
ddayClass = 'badge-warning';
|
||||
} else if (dday <= 3) {
|
||||
ddayBadge = `D-${dday}`;
|
||||
ddayClass = 'badge-warning';
|
||||
} else if (dday <= 7) {
|
||||
ddayBadge = `D-${dday}`;
|
||||
ddayClass = 'badge-primary';
|
||||
} else {
|
||||
ddayBadge = `D-${dday}`;
|
||||
ddayClass = '';
|
||||
}
|
||||
|
||||
// 우선순위 배지
|
||||
const priorityText = todo.priority === 'high' ? '높음' : todo.priority === 'medium' ? '보통' : '낮음';
|
||||
const priorityClass = `badge-${todo.priority}`;
|
||||
|
||||
return `
|
||||
<div class="todo-item ${isOverdue ? 'overdue' : ''}" data-todo-id="${todo.id}" data-meeting-id="${todo.meetingId}">
|
||||
<div class="todo-header">
|
||||
<h4 class="todo-title">${todo.title}</h4>
|
||||
${createBadge(statusInfo.badgeText, statusInfo.badgeType)}
|
||||
<div class="todo-card ${isCompleted ? 'completed' : ''}" data-todo-id="${todo.id}" data-meeting-id="${todo.meetingId}">
|
||||
<div class="todo-top">
|
||||
<div class="todo-checkbox-wrapper">
|
||||
<input type="checkbox" class="todo-checkbox" id="check-${todo.id}"
|
||||
${isCompleted ? 'checked' : ''}
|
||||
onchange="toggleTodoComplete('${todo.id}', this.checked)">
|
||||
</div>
|
||||
<div class="todo-meta">
|
||||
<span>마감: ${formatDate(todo.dueDate)}</span>
|
||||
${createBadge(todo.priority === 'high' ? '높음' : todo.priority === 'medium' ? '보통' : '낮음', todo.priority)}
|
||||
<div class="todo-content-wrapper">
|
||||
<div class="todo-badges">
|
||||
<span class="badge ${ddayClass}">${ddayBadge}</span>
|
||||
<span class="badge ${priorityClass}">${priorityText}</span>
|
||||
</div>
|
||||
<div class="todo-progress">
|
||||
${createProgressBar(todo.progress)}
|
||||
<div class="todo-title">${todo.title}</div>
|
||||
<div class="todo-meta-row">
|
||||
<a class="todo-meeting-link" onclick="navigateTo('10-회의록상세조회.html'); event.stopPropagation();">
|
||||
🔗 ${todo.meetingTitle}
|
||||
</a>
|
||||
<span>${formatDate(todo.dueDate)}</span>
|
||||
</div>
|
||||
</div>
|
||||
${!isCompleted ? `
|
||||
<div class="todo-actions">
|
||||
<button class="icon-btn" onclick="editTodo('${todo.id}')" title="편집">✏️</button>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Todo 항목 클릭 시 해당 회의록 상세로 이동
|
||||
$$('.todo-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
const meetingId = item.dataset.meetingId;
|
||||
const todoId = item.dataset.todoId;
|
||||
// 회의록 상세 페이지로 이동 (Todo ID를 파라미터로 전달)
|
||||
// Todo 카드 클릭 시 해당 회의록 상세로 이동 (체크박스와 버튼 제외)
|
||||
$$('.todo-card').forEach(card => {
|
||||
card.addEventListener('click', (e) => {
|
||||
// 체크박스나 버튼 클릭은 무시
|
||||
if (e.target.classList.contains('todo-checkbox') ||
|
||||
e.target.classList.contains('icon-btn') ||
|
||||
e.target.closest('.icon-btn')) {
|
||||
return;
|
||||
}
|
||||
const meetingId = card.dataset.meetingId;
|
||||
const todoId = card.dataset.todoId;
|
||||
navigateTo(`10-회의록상세조회.html?meetingId=${meetingId}&todoId=${todoId}`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 내 회의록 렌더링
|
||||
* 나의 회의록 렌더링 (참여자 또는 생성자로 등록된 회의록, 최신순 정렬)
|
||||
*/
|
||||
function renderMyMinutes() {
|
||||
const container = $('#my-minutes');
|
||||
|
||||
const myMeetings = SAMPLE_MEETINGS
|
||||
.filter(m => m.participants.some(p => p.id === currentUser.id && p.role === 'creator'))
|
||||
.slice(0, 3);
|
||||
const myMinutes = SAMPLE_MINUTES
|
||||
.filter(m => m.participants.some(p => p.id === currentUser.id)) // 참여자 또는 생성자 모두 포함
|
||||
.sort((a, b) => new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time)) // 최신순 정렬
|
||||
.slice(0, 3); // 상위 3개만 표시
|
||||
|
||||
if (myMeetings.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state"><div class="empty-icon">📝</div><p>작성한 회의록이 없습니다</p></div>';
|
||||
if (myMinutes.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state"><div class="empty-icon">📝</div><p>참여한 회의록이 없습니다</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = myMeetings.map(meeting => {
|
||||
const statusInfo = getMeetingStatusInfo(meeting);
|
||||
container.innerHTML = myMinutes.map(minutes => {
|
||||
// 상태 배지 정보
|
||||
const statusBadge = minutes.status === 'complete'
|
||||
? { text: '확정완료', type: 'complete' }
|
||||
: { text: '작성중', type: 'draft' };
|
||||
|
||||
// 생성자 여부 확인
|
||||
const isCreator = minutes.participants.some(p => p.id === currentUser.id && p.role === 'creator');
|
||||
|
||||
return `
|
||||
<div class="minutes-item" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<h4 class="minutes-item-title">${meeting.title}</h4>
|
||||
<div class="minutes-item-meta">
|
||||
<span>📅 ${formatDate(meeting.date)}</span>
|
||||
<span>👥 ${meeting.participants.length}명</span>
|
||||
${createBadge(statusInfo.badgeText, statusInfo.badgeType)}
|
||||
<div class="minutes-card" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="minutes-card-header">
|
||||
<div class="minutes-card-badges">
|
||||
${createBadge(statusBadge.text, statusBadge.type)}
|
||||
</div>
|
||||
<h4 class="minutes-card-title">${minutes.title}</h4>
|
||||
${isCreator ? '<span style="font-size: 16px;" title="생성자">👑</span>' : ''}
|
||||
</div>
|
||||
<div class="minutes-card-meta">
|
||||
<span>📅 ${formatDate(minutes.date)} ${formatTime(minutes.time)}</span>
|
||||
<span>👥 ${minutes.participantCount}명</span>
|
||||
${minutes.status === 'draft' ? `<span>${minutes.completionRate}% 완료</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -717,15 +851,14 @@
|
||||
* 통계 업데이트
|
||||
*/
|
||||
function updateStats() {
|
||||
// 예정된 회의 개수 (예정 + 진행중)
|
||||
const scheduled = SAMPLE_MEETINGS.filter(m => m.status === 'scheduled' || m.status === 'ongoing').length;
|
||||
const todos = SAMPLE_TODOS.filter(t => t.assignee.id === currentUser.id && t.status !== 'completed').length;
|
||||
const totalTodos = SAMPLE_TODOS.filter(t => t.assignee.id === currentUser.id).length;
|
||||
const completedTodos = SAMPLE_TODOS.filter(t => t.assignee.id === currentUser.id && t.status === 'completed').length;
|
||||
const completion = totalTodos > 0 ? Math.round((completedTodos / totalTodos) * 100) : 0;
|
||||
|
||||
// 나의 Todo 개수 (전체)
|
||||
const myTodos = SAMPLE_TODOS.filter(t => t.assignee.id === currentUser.id).length;
|
||||
|
||||
$('#stat-scheduled').textContent = scheduled;
|
||||
$('#stat-todos').textContent = todos;
|
||||
$('#stat-completion').textContent = completion + '%';
|
||||
$('#stat-todos').textContent = myTodos;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -827,6 +960,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Todo 완료 토글
|
||||
* @param {string} todoId - Todo ID
|
||||
* @param {boolean} isChecked - 체크박스 상태
|
||||
*/
|
||||
function toggleTodoComplete(todoId, isChecked) {
|
||||
if (isChecked) {
|
||||
// 완료 처리
|
||||
if (confirm('완료 처리하시겠습니까?')) {
|
||||
const todo = SAMPLE_TODOS.find(t => t.id === todoId);
|
||||
if (todo) {
|
||||
todo.status = 'completed';
|
||||
showToast('Todo가 완료되었습니다', 'success');
|
||||
updateStats();
|
||||
renderMyTodos();
|
||||
}
|
||||
} else {
|
||||
event.target.checked = false;
|
||||
}
|
||||
} else {
|
||||
// 미완료로 되돌리기
|
||||
if (confirm('미완료로 변경하시겠습니까?')) {
|
||||
const todo = SAMPLE_TODOS.find(t => t.id === todoId);
|
||||
if (todo) {
|
||||
todo.status = 'incomplete';
|
||||
showToast('미완료로 변경되었습니다', 'info');
|
||||
updateStats();
|
||||
renderMyTodos();
|
||||
}
|
||||
} else {
|
||||
event.target.checked = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Todo 편집 (간이 버전 - 09-Todo관리.html로 이동)
|
||||
* @param {string} todoId - Todo ID
|
||||
*/
|
||||
function editTodo(todoId) {
|
||||
// Todo 관리 화면으로 이동하여 편집
|
||||
navigateTo(`09-Todo관리.html?todoId=${todoId}`);
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -268,114 +268,14 @@
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Todo 카드 - 컴팩트 디자인 */
|
||||
.todo-card {
|
||||
position: relative;
|
||||
background: var(--white);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: var(--space-sm);
|
||||
transition: all var(--transition-normal);
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.todo-card:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.todo-card.completed {
|
||||
opacity: 0.5;
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.todo-card.completed .todo-title {
|
||||
text-decoration: line-through;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
/* 레이아웃: 체크박스 + 콘텐츠 */
|
||||
.todo-top {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.todo-checkbox-wrapper {
|
||||
flex-shrink: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.todo-checkbox {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--gray-400);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.todo-checkbox:checked {
|
||||
background: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.todo-content-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0; /* 텍스트 오버플로우 방지 */
|
||||
}
|
||||
|
||||
/* 배지 영역 */
|
||||
.todo-badges {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Todo 제목 */
|
||||
.todo-title {
|
||||
font-size: var(--font-body);
|
||||
font-weight: var(--font-weight-regular);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--space-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 하단 메타 정보 */
|
||||
.todo-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-500);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.todo-meeting-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #4CAF50; /* 연한 초록색 */
|
||||
text-decoration: none;
|
||||
font-size: var(--font-small);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.todo-meeting-link:hover {
|
||||
color: #388E3C;
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* Todo 카드 스타일은 common.css에서 공통 관리 */
|
||||
|
||||
/* 담당자 정보 숨김 (간결한 디자인) */
|
||||
.todo-assignee {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 액션 버튼 영역 - 우측 상단에 배치 */
|
||||
/* 액션 버튼 영역 - 09-Todo관리 페이지 전용: 우측 상단에 배치 */
|
||||
.todo-actions {
|
||||
position: absolute;
|
||||
top: var(--space-md);
|
||||
|
||||
@ -540,6 +540,217 @@
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
/* 원형 진행 바 - 모바일에서 축소 */
|
||||
.circular-progress {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.circular-progress svg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.circular-progress circle {
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.circular-progress .bg-circle {
|
||||
stroke: var(--gray-300);
|
||||
}
|
||||
|
||||
.circular-progress .progress-circle {
|
||||
stroke: var(--primary);
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 1s ease;
|
||||
}
|
||||
|
||||
.circular-progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: var(--font-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* 데스크톱에서 원형 진행 바 크기 복원 */
|
||||
@media (min-width: 768px) {
|
||||
.circular-progress {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.circular-progress svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.circular-progress circle {
|
||||
stroke-width: 8;
|
||||
}
|
||||
}
|
||||
|
||||
/* Todo 진행상황 - 09-Todo관리 스타일 적용 */
|
||||
.todo-filters {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--gray-300);
|
||||
background: var(--white);
|
||||
border-radius: 20px;
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-700);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.todo-card {
|
||||
position: relative;
|
||||
background: var(--white);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: var(--space-sm);
|
||||
transition: all var(--transition-normal);
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.todo-card:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.todo-card.completed {
|
||||
opacity: 0.5;
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.todo-card.completed .todo-title {
|
||||
text-decoration: line-through;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
.todo-top {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.todo-checkbox-wrapper {
|
||||
flex-shrink: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.todo-checkbox {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--gray-400);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.todo-checkbox:checked {
|
||||
background: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.todo-content-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.todo-badges {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.todo-title {
|
||||
font-size: var(--font-body);
|
||||
font-weight: var(--font-weight-regular);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--space-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.todo-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-500);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.todo-meeting-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
font-size: var(--font-small);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.todo-meeting-link:hover {
|
||||
color: #388E3C;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.todo-actions {
|
||||
position: absolute;
|
||||
top: var(--space-md);
|
||||
right: var(--space-md);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: var(--gray-100);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.icon-btn:active {
|
||||
background: var(--gray-200);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* 하단 액션 바 - common.css에서 기본 스타일 적용됨 */
|
||||
|
||||
/* 탭 콘텐츠 토글 */
|
||||
@ -915,6 +1126,21 @@
|
||||
<h3 class="section-title">📋 Todo 진행상황</h3>
|
||||
</div>
|
||||
|
||||
<!-- 전체 진행률 -->
|
||||
<div style="text-align: center; margin-bottom: var(--space-lg);">
|
||||
<div class="circular-progress">
|
||||
<svg>
|
||||
<circle class="bg-circle" cx="40" cy="40" r="36"></circle>
|
||||
<circle class="progress-circle" cx="40" cy="40" r="36"
|
||||
stroke-dasharray="226" stroke-dashoffset="90"></circle>
|
||||
</svg>
|
||||
<div class="circular-progress-text">40%</div>
|
||||
</div>
|
||||
<div style="font-size: var(--font-caption); color: var(--gray-600); margin-top: var(--space-xs);">
|
||||
2 / 5 완료
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="todo-filters">
|
||||
<button class="filter-btn active">전체 (5)</button>
|
||||
<button class="filter-btn">시작 전 (1)</button>
|
||||
@ -923,126 +1149,115 @@
|
||||
<button class="filter-btn">완료 (2)</button>
|
||||
</div>
|
||||
|
||||
<!-- 이준호 그룹 -->
|
||||
<div class="todo-group">
|
||||
<div class="todo-group-header">
|
||||
<div class="avatar avatar-yellow avatar-sm">이</div>
|
||||
<span class="todo-group-name">이준호 (2)</span>
|
||||
<!-- Todo 카드 리스트 -->
|
||||
<div class="todo-card">
|
||||
<div class="todo-top">
|
||||
<div class="todo-checkbox-wrapper">
|
||||
<input type="checkbox" class="todo-checkbox" id="check-todo-002"
|
||||
onchange="toggleTodoComplete('todo-002', this.checked)">
|
||||
</div>
|
||||
|
||||
<div class="todo-item" onclick="navigateTo('09-Todo관리.html')">
|
||||
<div class="todo-header">
|
||||
<span class="todo-title">API 명세서 작성</span>
|
||||
<span class="badge badge-high">높음</span>
|
||||
</div>
|
||||
<div class="todo-meta">
|
||||
<span>D-2</span>
|
||||
<span>2025-10-23 마감</span>
|
||||
</div>
|
||||
<div class="progress-wrapper">
|
||||
<div class="progress-label">
|
||||
<span>진행률</span>
|
||||
<span>60%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="todo-item" onclick="navigateTo('09-Todo관리.html')">
|
||||
<div class="todo-header">
|
||||
<span class="todo-title">데이터베이스 스키마 설계</span>
|
||||
<span class="badge badge-high">높음</span>
|
||||
</div>
|
||||
<div class="todo-meta">
|
||||
<div class="todo-content-wrapper">
|
||||
<div class="todo-badges">
|
||||
<span class="badge badge-overdue">D+1 (지연)</span>
|
||||
<span class="badge badge-high">높음</span>
|
||||
</div>
|
||||
<div class="todo-title">데이터베이스 스키마 설계</div>
|
||||
<div class="todo-meta-row">
|
||||
<span>담당자: 이준호</span>
|
||||
<span>2025-10-20 마감</span>
|
||||
</div>
|
||||
<div class="progress-wrapper">
|
||||
<div class="progress-label">
|
||||
<span>진행률</span>
|
||||
<span>80%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-error" style="width: 80%"></div>
|
||||
</div>
|
||||
<div class="todo-actions">
|
||||
<button class="icon-btn" onclick="editTodo('todo-002')" title="편집">✏️</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 최유진 그룹 -->
|
||||
<div class="todo-group">
|
||||
<div class="todo-group-header">
|
||||
<div class="avatar avatar-pink avatar-sm">최</div>
|
||||
<span class="todo-group-name">최유진 (1)</span>
|
||||
<div class="todo-card">
|
||||
<div class="todo-top">
|
||||
<div class="todo-checkbox-wrapper">
|
||||
<input type="checkbox" class="todo-checkbox" id="check-todo-001"
|
||||
onchange="toggleTodoComplete('todo-001', this.checked)">
|
||||
</div>
|
||||
|
||||
<div class="todo-item" onclick="navigateTo('09-Todo관리.html')">
|
||||
<div class="todo-header">
|
||||
<span class="todo-title">UI 프로토타입 디자인</span>
|
||||
<span class="badge badge-medium">보통</span>
|
||||
</div>
|
||||
<div class="todo-meta">
|
||||
<span>D-7</span>
|
||||
<span>2025-10-28 마감</span>
|
||||
</div>
|
||||
<div class="progress-wrapper">
|
||||
<div class="progress-label">
|
||||
<span>진행률</span>
|
||||
<span>0%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 김민준 그룹 -->
|
||||
<div class="todo-group">
|
||||
<div class="todo-group-header">
|
||||
<div class="avatar avatar-green avatar-sm">김</div>
|
||||
<span class="todo-group-name">김민준 (2)</span>
|
||||
</div>
|
||||
|
||||
<div class="todo-item" onclick="navigateTo('09-Todo관리.html')">
|
||||
<div class="todo-header">
|
||||
<span class="todo-title">예산 편성안 검토</span>
|
||||
<div class="todo-content-wrapper">
|
||||
<div class="todo-badges">
|
||||
<span class="badge badge-warning">D-2</span>
|
||||
<span class="badge badge-high">높음</span>
|
||||
</div>
|
||||
<div class="todo-meta">
|
||||
<span>D-1</span>
|
||||
<span>2025-10-22 마감</span>
|
||||
<div class="todo-title">API 명세서 작성</div>
|
||||
<div class="todo-meta-row">
|
||||
<span>담당자: 이준호</span>
|
||||
<span>2025-10-23 마감</span>
|
||||
</div>
|
||||
<div class="progress-wrapper">
|
||||
<div class="progress-label">
|
||||
<span>진행률</span>
|
||||
<span>40%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 40%"></div>
|
||||
<div class="todo-actions">
|
||||
<button class="icon-btn" onclick="editTodo('todo-001')" title="편집">✏️</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="todo-item" onclick="navigateTo('09-Todo관리.html')">
|
||||
<div class="todo-header">
|
||||
<span class="todo-title">사용자 피드백 분석</span>
|
||||
<div class="todo-card">
|
||||
<div class="todo-top">
|
||||
<div class="todo-checkbox-wrapper">
|
||||
<input type="checkbox" class="todo-checkbox" id="check-todo-005"
|
||||
onchange="toggleTodoComplete('todo-005', this.checked)">
|
||||
</div>
|
||||
<div class="todo-content-wrapper">
|
||||
<div class="todo-badges">
|
||||
<span class="badge badge-primary">D-1</span>
|
||||
<span class="badge badge-high">높음</span>
|
||||
</div>
|
||||
<div class="todo-title">예산 편성안 검토</div>
|
||||
<div class="todo-meta-row">
|
||||
<span>담당자: 김민준</span>
|
||||
<span>2025-10-22 마감</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="todo-actions">
|
||||
<button class="icon-btn" onclick="editTodo('todo-005')" title="편집">✏️</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="todo-card">
|
||||
<div class="todo-top">
|
||||
<div class="todo-checkbox-wrapper">
|
||||
<input type="checkbox" class="todo-checkbox" id="check-todo-003"
|
||||
onchange="toggleTodoComplete('todo-003', this.checked)">
|
||||
</div>
|
||||
<div class="todo-content-wrapper">
|
||||
<div class="todo-badges">
|
||||
<span class="badge">D-7</span>
|
||||
<span class="badge badge-medium">보통</span>
|
||||
</div>
|
||||
<div class="todo-meta">
|
||||
<div class="todo-title">UI 프로토타입 디자인</div>
|
||||
<div class="todo-meta-row">
|
||||
<span>담당자: 최유진</span>
|
||||
<span>2025-10-28 마감</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="todo-actions">
|
||||
<button class="icon-btn" onclick="editTodo('todo-003')" title="편집">✏️</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="todo-card completed">
|
||||
<div class="todo-top">
|
||||
<div class="todo-checkbox-wrapper">
|
||||
<input type="checkbox" class="todo-checkbox" id="check-todo-004" checked
|
||||
onchange="toggleTodoComplete('todo-004', this.checked)">
|
||||
</div>
|
||||
<div class="todo-content-wrapper">
|
||||
<div class="todo-badges">
|
||||
<span class="badge badge-complete">완료</span>
|
||||
<span class="badge badge-medium">보통</span>
|
||||
</div>
|
||||
<div class="todo-title">사용자 피드백 분석</div>
|
||||
<div class="todo-meta-row">
|
||||
<span>담당자: 김민준</span>
|
||||
<span>2025-10-19 마감</span>
|
||||
</div>
|
||||
<div class="progress-wrapper">
|
||||
<div class="progress-label">
|
||||
<span>진행률</span>
|
||||
<span>100%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1098,8 +1313,194 @@
|
||||
<button class="btn btn-secondary" onclick="navigateTo('11-회의록수정.html')">수정</button>
|
||||
</div>
|
||||
|
||||
<!-- Todo 편집 모달 -->
|
||||
<div class="modal-overlay" id="editTodoModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Todo 편집</h3>
|
||||
<button class="modal-close" onclick="closeModal('editTodoModal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Todo 제목 <span class="text-error">*</span></label>
|
||||
<input type="text" id="editTodoTitle" class="form-control" placeholder="할 일을 입력하세요">
|
||||
</div>
|
||||
<!-- 담당자 필드 (회의 생성자만 표시) -->
|
||||
<div class="form-group" id="editTodoAssigneeGroup" style="display: none;">
|
||||
<label class="form-label">담당자 <span class="text-error">*</span></label>
|
||||
<select id="editTodoAssignee" class="form-control">
|
||||
<option value="김민준">김민준</option>
|
||||
<option value="이준호">이준호</option>
|
||||
<option value="박서연">박서연</option>
|
||||
<option value="최유진">최유진</option>
|
||||
</select>
|
||||
<p class="form-hint">👤 담당자 변경 시 이전/새 담당자에게 알림이 전송됩니다</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">마감일 <span class="text-error">*</span></label>
|
||||
<div class="date-input-wrapper">
|
||||
<input type="date" id="editTodoDueDate" class="form-control">
|
||||
</div>
|
||||
<p class="form-hint">📅 마감일 변경 시 캘린더가 자동 업데이트됩니다</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">우선순위 <span class="text-error">*</span></label>
|
||||
<select id="editTodoPriority" class="form-control">
|
||||
<option value="high">높음</option>
|
||||
<option value="medium">보통</option>
|
||||
<option value="low">낮음</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 권한 안내 (동적 메시지) -->
|
||||
<div class="alert alert-info" id="editTodoPermissionInfo">
|
||||
<span class="material-icons" style="font-size: 20px;">info</span>
|
||||
<div>
|
||||
<strong>권한 안내</strong>
|
||||
<p style="margin: 4px 0 0 0; font-size: 14px;" id="editTodoPermissionText">회의 생성자로서 모든 항목을 수정할 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-ghost" onclick="closeModal('editTodoModal')">취소</button>
|
||||
<button class="btn btn-primary" onclick="saveTodoEdit()">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 날짜 입력 필드 스타일 -->
|
||||
<style>
|
||||
.date-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.date-input-wrapper input[type="date"] {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.date-input-wrapper::after {
|
||||
content: '📅';
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
font-size: 18px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Todo 편집 모달 - 모바일 전체화면 */
|
||||
#editTodoModal .modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#editTodoModal .modal-header {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#editTodoModal .modal-title {
|
||||
font-size: var(--font-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#editTodoModal .modal-close {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--gray-600);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
#editTodoModal .modal-close:hover {
|
||||
background: var(--gray-100);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
#editTodoModal .modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#editTodoModal .modal-footer {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-md);
|
||||
border-top: 1px solid var(--gray-200);
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
#editTodoModal .modal-footer .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 데스크톱에서는 중앙 모달로 복원 */
|
||||
@media (min-width: 768px) {
|
||||
#editTodoModal .modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
margin: 0 auto;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
// 현재 회의록 ID
|
||||
const CURRENT_MEETING_ID = 'meeting-001';
|
||||
|
||||
// 회의록의 Todo 목록 (실제로는 서버에서 가져옴)
|
||||
let meetingTodos = SAMPLE_TODOS.filter(t => t.meetingId === CURRENT_MEETING_ID);
|
||||
|
||||
// Todo 편집 ID
|
||||
let editingTodoId = null;
|
||||
|
||||
// 탭 전환
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
@ -1127,6 +1528,230 @@
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Todo 편집 모달 열기
|
||||
* @param {string} todoId - 편집할 Todo ID
|
||||
*/
|
||||
function editTodo(todoId) {
|
||||
const todo = meetingTodos.find(t => t.id === todoId);
|
||||
if (!todo) return;
|
||||
|
||||
editingTodoId = todoId;
|
||||
|
||||
// 편집 모달에 현재 값 채우기
|
||||
$('#editTodoTitle').value = todo.title;
|
||||
$('#editTodoDueDate').value = todo.dueDate;
|
||||
$('#editTodoPriority').value = todo.priority;
|
||||
|
||||
// 회의 생성자 여부 확인 (실제로는 서버에서 확인)
|
||||
const currentUser = '김민준'; // 현재 로그인 사용자
|
||||
const isCreator = checkIfUserIsCreator(CURRENT_MEETING_ID, currentUser);
|
||||
|
||||
// 담당자 필드 표시 여부 결정
|
||||
const assigneeGroup = $('#editTodoAssigneeGroup');
|
||||
const permissionText = $('#editTodoPermissionText');
|
||||
|
||||
if (isCreator) {
|
||||
// 회의 생성자: 담당자 변경 가능
|
||||
assigneeGroup.style.display = 'block';
|
||||
$('#editTodoAssignee').value = todo.assignee.name;
|
||||
permissionText.textContent = '회의 생성자로서 모든 항목을 수정할 수 있습니다. 담당자 변경 시 알림이 전송됩니다.';
|
||||
} else {
|
||||
// 일반 담당자: 담당자 변경 불가
|
||||
assigneeGroup.style.display = 'none';
|
||||
permissionText.textContent = '본인에게 할당된 Todo만 수정할 수 있습니다. 담당자는 변경할 수 없습니다.';
|
||||
}
|
||||
|
||||
openModal('editTodoModal');
|
||||
}
|
||||
|
||||
/**
|
||||
* 회의 생성자 여부 확인
|
||||
* @param {string} meetingId - 회의 ID
|
||||
* @param {string} userName - 사용자 이름
|
||||
* @returns {boolean} 회의 생성자 여부
|
||||
*/
|
||||
function checkIfUserIsCreator(meetingId, userName) {
|
||||
// 실제로는 서버 API를 호출하여 확인
|
||||
// 프로토타입에서는 샘플 데이터로 시뮬레이션
|
||||
const meetingCreators = {
|
||||
'meeting-001': '김민준',
|
||||
'meeting-002': '이서연',
|
||||
'meeting-003': '박준호'
|
||||
};
|
||||
|
||||
return meetingCreators[meetingId] === userName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Todo 편집 저장
|
||||
*/
|
||||
function saveTodoEdit() {
|
||||
if (!editingTodoId) return;
|
||||
|
||||
const todo = meetingTodos.find(t => t.id === editingTodoId);
|
||||
if (!todo) return;
|
||||
|
||||
// 수정된 값 가져오기
|
||||
const newTitle = $('#editTodoTitle').value.trim();
|
||||
const newDueDate = $('#editTodoDueDate').value;
|
||||
const newPriority = $('#editTodoPriority').value;
|
||||
|
||||
// 유효성 검사
|
||||
if (!newTitle) {
|
||||
showToast('Todo 제목을 입력해주세요', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!newDueDate) {
|
||||
showToast('마감일을 선택해주세요', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// 회의 생성자 여부 확인
|
||||
const currentUser = '김민준';
|
||||
const isCreator = checkIfUserIsCreator(CURRENT_MEETING_ID, currentUser);
|
||||
|
||||
// 담당자 변경 여부 확인 (회의 생성자만 가능)
|
||||
let assigneeChanged = false;
|
||||
let oldAssignee = '';
|
||||
let newAssignee = '';
|
||||
|
||||
if (isCreator) {
|
||||
const assigneeGroup = $('#editTodoAssigneeGroup');
|
||||
if (assigneeGroup.style.display !== 'none') {
|
||||
newAssignee = $('#editTodoAssignee').value;
|
||||
oldAssignee = todo.assignee.name;
|
||||
assigneeChanged = (oldAssignee !== newAssignee);
|
||||
}
|
||||
}
|
||||
|
||||
// Todo 업데이트
|
||||
const oldDueDate = todo.dueDate;
|
||||
todo.title = newTitle;
|
||||
todo.dueDate = newDueDate;
|
||||
todo.priority = newPriority;
|
||||
|
||||
if (assigneeChanged) {
|
||||
todo.assignee.name = newAssignee;
|
||||
}
|
||||
|
||||
showToast('Todo가 수정되었습니다', 'success');
|
||||
closeModal('editTodoModal');
|
||||
|
||||
// 담당자 변경 시 알림 발송
|
||||
if (assigneeChanged) {
|
||||
setTimeout(() => {
|
||||
showToast(`${oldAssignee}와 ${newAssignee}에게 알림이 전송되었습니다`, 'info');
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 마감일 변경 시 캘린더 업데이트 메시지
|
||||
if (oldDueDate !== newDueDate) {
|
||||
setTimeout(() => {
|
||||
showToast('캘린더가 업데이트되었습니다', 'info');
|
||||
}, assigneeChanged ? 2000 : 1000);
|
||||
}
|
||||
|
||||
// UI 갱신
|
||||
updateTodoProgress();
|
||||
renderTodoList();
|
||||
editingTodoId = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Todo 완료 토글
|
||||
* @param {string} todoId - Todo ID
|
||||
* @param {boolean} isChecked - 체크박스 상태
|
||||
*/
|
||||
function toggleTodoComplete(todoId, isChecked) {
|
||||
if (isChecked) {
|
||||
// 완료 처리
|
||||
if (confirm('완료 처리하시겠습니까?')) {
|
||||
const todo = meetingTodos.find(t => t.id === todoId);
|
||||
if (todo) {
|
||||
todo.status = 'completed';
|
||||
showToast('Todo가 완료되었습니다', 'success');
|
||||
updateTodoProgress();
|
||||
renderTodoList();
|
||||
}
|
||||
} else {
|
||||
event.target.checked = false;
|
||||
}
|
||||
} else {
|
||||
// 미완료로 되돌리기
|
||||
if (confirm('미완료로 변경하시겠습니까?')) {
|
||||
const todo = meetingTodos.find(t => t.id === todoId);
|
||||
if (todo) {
|
||||
todo.status = 'incomplete';
|
||||
showToast('미완료로 변경되었습니다', 'info');
|
||||
updateTodoProgress();
|
||||
renderTodoList();
|
||||
}
|
||||
} else {
|
||||
event.target.checked = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Todo 진행률 업데이트
|
||||
*/
|
||||
function updateTodoProgress() {
|
||||
const total = meetingTodos.length;
|
||||
const completed = meetingTodos.filter(t => t.status === 'completed').length;
|
||||
const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
|
||||
|
||||
// 원형 진행 바 업데이트
|
||||
const progressCircle = document.querySelector('.progress-circle');
|
||||
const progressText = document.querySelector('.circular-progress-text');
|
||||
const completionText = document.querySelector('.circular-progress').nextElementSibling;
|
||||
|
||||
if (progressCircle && progressText) {
|
||||
const circumference = 2 * Math.PI * 36; // r=36
|
||||
const offset = circumference - (percent / 100) * circumference;
|
||||
progressCircle.style.strokeDashoffset = offset;
|
||||
progressText.textContent = `${percent}%`;
|
||||
}
|
||||
|
||||
if (completionText) {
|
||||
completionText.querySelector('div').textContent = `${completed} / ${total} 완료`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Todo 리스트 렌더링 (필터 적용)
|
||||
*/
|
||||
function renderTodoList() {
|
||||
// 현재 활성 필터 확인
|
||||
const activeFilterBtn = document.querySelector('.filter-group .filter-btn.active');
|
||||
const currentFilter = activeFilterBtn ? activeFilterBtn.textContent.trim().split(' ')[0] : '전체';
|
||||
|
||||
// 필터 적용된 Todo 목록 가져오기
|
||||
let filteredTodos = meetingTodos;
|
||||
|
||||
if (currentFilter === '완료') {
|
||||
filteredTodos = meetingTodos.filter(t => t.status === 'completed');
|
||||
} else if (currentFilter === '진행') {
|
||||
filteredTodos = meetingTodos.filter(t => t.status === 'in_progress');
|
||||
} else if (currentFilter === '시작') {
|
||||
filteredTodos = meetingTodos.filter(t => t.status === 'not_started');
|
||||
}
|
||||
|
||||
// 실제 DOM 업데이트는 필요시 구현
|
||||
// 프로토타입에서는 페이지 새로고침이나 동적 렌더링 로직 추가 필요
|
||||
}
|
||||
|
||||
/**
|
||||
* 페이지 초기화
|
||||
*/
|
||||
function initPage() {
|
||||
updateTodoProgress();
|
||||
}
|
||||
|
||||
// 페이지 로드 시 초기화
|
||||
window.addEventListener('DOMContentLoaded', initPage);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1759,3 +1759,132 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
.layout-none {
|
||||
/* 특별한 스타일 불필요, body만 있음 */
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Todo Card - 공통 컴포넌트
|
||||
======================================== */
|
||||
/* Todo 카드 - 09-Todo관리, 02-대시보드 등에서 공통 사용 */
|
||||
.todo-card {
|
||||
position: relative;
|
||||
background: var(--white);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: var(--space-sm);
|
||||
transition: all var(--transition-normal);
|
||||
border: 1px solid var(--gray-200);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.todo-card:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.todo-card.completed {
|
||||
opacity: 0.5;
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
/* 레이아웃: 체크박스 + 콘텐츠 */
|
||||
.todo-top {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.todo-checkbox-wrapper {
|
||||
flex-shrink: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.todo-checkbox {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--gray-400);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.todo-checkbox:checked {
|
||||
background: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.todo-content-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0; /* 텍스트 오버플로우 방지 */
|
||||
}
|
||||
|
||||
/* 배지 영역 */
|
||||
.todo-badges {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Todo 제목 */
|
||||
.todo-title {
|
||||
font-size: var(--font-body);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--space-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.todo-card.completed .todo-title {
|
||||
text-decoration: line-through;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
/* 하단 메타 정보 */
|
||||
.todo-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-500);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* 회의 링크 */
|
||||
.todo-meeting-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
font-size: var(--font-small);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.todo-meeting-link:hover {
|
||||
color: #388E3C;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 액션 버튼 */
|
||||
.todo-actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: var(--gray-600);
|
||||
cursor: pointer;
|
||||
padding: var(--space-xs);
|
||||
transition: color var(--transition-fast);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
237
design/uiux/prototype/common.js
vendored
237
design/uiux/prototype/common.js
vendored
@ -65,10 +65,205 @@ const SAMPLE_MEETINGS = [
|
||||
],
|
||||
sections: 4,
|
||||
todos: 3
|
||||
},
|
||||
// 김민준이 생성한 다양한 상태의 회의 추가
|
||||
{
|
||||
id: 'meeting-004',
|
||||
title: '경영진 보고 회의',
|
||||
date: '2025-10-26',
|
||||
time: '16:00',
|
||||
duration: 120,
|
||||
location: '본사 1층 경영진 회의실',
|
||||
status: 'scheduled',
|
||||
participants: [
|
||||
{ id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' },
|
||||
{ id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple' }
|
||||
],
|
||||
sections: 0,
|
||||
todos: 0
|
||||
},
|
||||
{
|
||||
id: 'meeting-005',
|
||||
title: '영업 전략 회의',
|
||||
date: '2025-10-18',
|
||||
time: '13:00',
|
||||
duration: 60,
|
||||
location: 'Google Meet',
|
||||
status: 'completed',
|
||||
participants: [
|
||||
{ id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' },
|
||||
{ id: 'user-002', name: '박서연', avatar: '박', avatarColor: 'blue' },
|
||||
{ id: 'user-004', name: '최유진', avatar: '최', avatarColor: 'pink' }
|
||||
],
|
||||
sections: 5,
|
||||
todos: 6
|
||||
},
|
||||
{
|
||||
id: 'meeting-006',
|
||||
title: '월간 회고 미팅',
|
||||
date: '2025-10-20',
|
||||
time: '11:00',
|
||||
duration: 90,
|
||||
location: '본사 4층 라운지',
|
||||
status: 'completed',
|
||||
participants: [
|
||||
{ id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' },
|
||||
{ id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' },
|
||||
{ id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple' }
|
||||
],
|
||||
sections: 3,
|
||||
todos: 4
|
||||
}
|
||||
];
|
||||
|
||||
// 샘플 회의록 데이터 (완료된 회의의 회의록만 포함)
|
||||
// participantCount: 참여자 총 인원수 (회의록 작성자 포함)
|
||||
const SAMPLE_MINUTES = [
|
||||
{
|
||||
id: 'minutes-001',
|
||||
meetingId: 'meeting-001',
|
||||
title: '2025년 1분기 제품 기획 회의',
|
||||
date: '2025-10-25',
|
||||
time: '14:00',
|
||||
status: 'draft', // complete(확정완료), draft(작성중)
|
||||
participants: [
|
||||
{ id: 'user-001', name: '김민준', role: 'creator' },
|
||||
{ id: 'user-002', name: '박서연' },
|
||||
{ id: 'user-003', name: '이준호' },
|
||||
{ id: 'user-004', name: '최유진' }
|
||||
],
|
||||
participantCount: 4,
|
||||
lastUpdated: '2025-10-23',
|
||||
completionRate: 75,
|
||||
sections: 3,
|
||||
todos: 5
|
||||
},
|
||||
{
|
||||
id: 'minutes-002',
|
||||
meetingId: 'meeting-002',
|
||||
title: '주간 스크럼 회의',
|
||||
date: '2025-10-21',
|
||||
time: '10:00',
|
||||
status: 'complete',
|
||||
participants: [
|
||||
{ id: 'user-002', name: '박서연', role: 'creator' },
|
||||
{ id: 'user-001', name: '김민준' },
|
||||
{ id: 'user-005', name: '정도현' }
|
||||
],
|
||||
participantCount: 3,
|
||||
lastUpdated: '2025-10-21',
|
||||
sections: 2,
|
||||
todos: 8
|
||||
},
|
||||
{
|
||||
id: 'minutes-003',
|
||||
meetingId: 'meeting-003',
|
||||
title: 'AI 기능 개선 회의',
|
||||
date: '2025-10-23',
|
||||
time: '15:00',
|
||||
status: 'complete',
|
||||
participants: [
|
||||
{ id: 'user-003', name: '이준호', role: 'creator' },
|
||||
{ id: 'user-001', name: '김민준' }
|
||||
],
|
||||
participantCount: 2,
|
||||
lastUpdated: '2025-10-23',
|
||||
sections: 4,
|
||||
todos: 3
|
||||
},
|
||||
{
|
||||
id: 'minutes-004',
|
||||
meetingId: 'meeting-007',
|
||||
title: '개발 리소스 계획 회의',
|
||||
date: '2025-10-22',
|
||||
time: '11:00',
|
||||
status: 'draft',
|
||||
participants: [
|
||||
{ id: 'user-002', name: '박서연', role: 'creator' },
|
||||
{ id: 'user-001', name: '김민준' },
|
||||
{ id: 'user-003', name: '이준호' },
|
||||
{ id: 'user-004', name: '최유진' },
|
||||
{ id: 'user-005', name: '정도현' }
|
||||
],
|
||||
participantCount: 5,
|
||||
lastUpdated: '2025-10-22',
|
||||
completionRate: 50,
|
||||
sections: 5,
|
||||
todos: 7
|
||||
},
|
||||
{
|
||||
id: 'minutes-005',
|
||||
meetingId: 'meeting-005',
|
||||
title: '영업 전략 회의',
|
||||
date: '2025-10-18',
|
||||
time: '13:00',
|
||||
status: 'complete',
|
||||
participants: [
|
||||
{ id: 'user-001', name: '김민준', role: 'creator' },
|
||||
{ id: 'user-002', name: '박서연' },
|
||||
{ id: 'user-004', name: '최유진' }
|
||||
],
|
||||
participantCount: 3,
|
||||
lastUpdated: '2025-10-18',
|
||||
sections: 5,
|
||||
todos: 6
|
||||
},
|
||||
{
|
||||
id: 'minutes-006',
|
||||
meetingId: 'meeting-006',
|
||||
title: '월간 회고 미팅',
|
||||
date: '2025-10-20',
|
||||
time: '11:00',
|
||||
status: 'complete',
|
||||
participants: [
|
||||
{ id: 'user-001', name: '김민준', role: 'creator' },
|
||||
{ id: 'user-003', name: '이준호' },
|
||||
{ id: 'user-005', name: '정도현' }
|
||||
],
|
||||
participantCount: 3,
|
||||
lastUpdated: '2025-10-20',
|
||||
sections: 3,
|
||||
todos: 4
|
||||
},
|
||||
{
|
||||
id: 'minutes-007',
|
||||
meetingId: 'meeting-008',
|
||||
title: 'UI/UX 디자인 검토 회의',
|
||||
date: '2025-10-19',
|
||||
time: '14:00',
|
||||
status: 'complete',
|
||||
participants: [
|
||||
{ id: 'user-004', name: '최유진', role: 'creator' },
|
||||
{ id: 'user-001', name: '김민준' },
|
||||
{ id: 'user-002', name: '박서연' },
|
||||
{ id: 'user-003', name: '이준호' }
|
||||
],
|
||||
participantCount: 4,
|
||||
lastUpdated: '2025-10-19',
|
||||
sections: 4,
|
||||
todos: 5
|
||||
},
|
||||
{
|
||||
id: 'minutes-008',
|
||||
meetingId: 'meeting-009',
|
||||
title: '경쟁사 분석 회의',
|
||||
date: '2025-10-20',
|
||||
time: '10:00',
|
||||
status: 'complete',
|
||||
participants: [
|
||||
{ id: 'user-001', name: '김민준', role: 'creator' },
|
||||
{ id: 'user-002', name: '박서연' },
|
||||
{ id: 'user-005', name: '정도현' }
|
||||
],
|
||||
participantCount: 3,
|
||||
lastUpdated: '2025-10-20',
|
||||
sections: 3,
|
||||
todos: 2
|
||||
}
|
||||
];
|
||||
|
||||
// 샘플 Todo 데이터
|
||||
// status: not_started(미시작), completed(완료)만 사용
|
||||
const SAMPLE_TODOS = [
|
||||
{
|
||||
id: 'todo-001',
|
||||
@ -76,8 +271,7 @@ const SAMPLE_TODOS = [
|
||||
assignee: { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' },
|
||||
dueDate: '2025-10-23',
|
||||
priority: 'high',
|
||||
status: 'in_progress',
|
||||
progress: 60,
|
||||
status: 'not_started',
|
||||
meetingId: 'meeting-001',
|
||||
meetingTitle: '2025년 1분기 제품 기획 회의'
|
||||
},
|
||||
@ -87,8 +281,7 @@ const SAMPLE_TODOS = [
|
||||
assignee: { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' },
|
||||
dueDate: '2025-10-20',
|
||||
priority: 'high',
|
||||
status: 'overdue',
|
||||
progress: 80,
|
||||
status: 'not_started',
|
||||
meetingId: 'meeting-001',
|
||||
meetingTitle: '2025년 1분기 제품 기획 회의'
|
||||
},
|
||||
@ -99,7 +292,6 @@ const SAMPLE_TODOS = [
|
||||
dueDate: '2025-10-28',
|
||||
priority: 'medium',
|
||||
status: 'not_started',
|
||||
progress: 0,
|
||||
meetingId: 'meeting-001',
|
||||
meetingTitle: '2025년 1분기 제품 기획 회의'
|
||||
},
|
||||
@ -109,8 +301,7 @@ const SAMPLE_TODOS = [
|
||||
assignee: { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' },
|
||||
dueDate: '2025-10-22',
|
||||
priority: 'high',
|
||||
status: 'in_progress',
|
||||
progress: 40,
|
||||
status: 'not_started',
|
||||
meetingId: 'meeting-002',
|
||||
meetingTitle: '주간 스크럼 회의'
|
||||
},
|
||||
@ -121,7 +312,37 @@ const SAMPLE_TODOS = [
|
||||
dueDate: '2025-10-19',
|
||||
priority: 'medium',
|
||||
status: 'completed',
|
||||
progress: 100,
|
||||
meetingId: 'meeting-002',
|
||||
meetingTitle: '주간 스크럼 회의'
|
||||
},
|
||||
// 김민준에게 할당된 다양한 상태의 Todo 추가
|
||||
{
|
||||
id: 'todo-006',
|
||||
title: '고객사 제안서 작성',
|
||||
assignee: { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' },
|
||||
dueDate: '2025-10-19',
|
||||
priority: 'high',
|
||||
status: 'not_started',
|
||||
meetingId: 'meeting-003',
|
||||
meetingTitle: '영업 전략 회의'
|
||||
},
|
||||
{
|
||||
id: 'todo-007',
|
||||
title: '분기 성과 보고서 검토',
|
||||
assignee: { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' },
|
||||
dueDate: '2025-10-30',
|
||||
priority: 'medium',
|
||||
status: 'not_started',
|
||||
meetingId: 'meeting-004',
|
||||
meetingTitle: '경영진 보고 회의'
|
||||
},
|
||||
{
|
||||
id: 'todo-008',
|
||||
title: '시스템 보안 점검',
|
||||
assignee: { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' },
|
||||
dueDate: '2025-10-18',
|
||||
priority: 'low',
|
||||
status: 'completed',
|
||||
meetingId: 'meeting-002',
|
||||
meetingTitle: '주간 스크럼 회의'
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
- **작성일**: 2025-10-21
|
||||
- **최종 수정일**: 2025-10-23
|
||||
- **작성자**: 이미준 (서비스 기획자)
|
||||
- **버전**: 1.4.8
|
||||
- **버전**: 1.4.10
|
||||
- **설계 철학**: Mobile First Design
|
||||
|
||||
---
|
||||
@ -1321,9 +1321,13 @@ graph TD
|
||||
- 각 카드: 결정 내용 + 결정자 + 시간 + 배경 설명
|
||||
|
||||
- **Todo 진행상황 섹션** (📋)
|
||||
- **전체 진행률 표시**: 상단에 원형 진행 바 (완료 Todo 개수 / 전체 Todo 개수)
|
||||
- 진행률 퍼센트 중앙 표시 (예: "60%")
|
||||
- 색상: Primary 색상 (#4DD5A7)
|
||||
- 크기: 80px (Desktop), 60px (Mobile)
|
||||
- 상태별 필터 탭 (전체/시작 전/진행 중/완료)
|
||||
- 담당자별 그룹화
|
||||
- 각 Todo: 제목 + 진행률 바 + 마감일 + 우선순위 배지
|
||||
- 각 Todo: 제목 + 마감일 + 우선순위 배지 (개별 진행률 바 제거)
|
||||
|
||||
- **참고자료 섹션** (📚)
|
||||
- 참고자료 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
|
||||
@ -2075,6 +2079,8 @@ graph TD
|
||||
| 1.4.6 | 2025-10-23 | 강지수 | 검증완료 섹션 잠금해제 정책 단순화<br>- **정책 변경**: 검증완료 섹션은 회의 생성자만 잠금 해제 후 수정 가능 (참석자는 수정 불가)<br>- **제거**: 참석자용 잠금해제 요청 기능 완전 제거 (공수 절감)<br>- **11-회의록수정**: 검증완료 섹션에 "🔒 읽기 전용" 배지 표시 (참석자 화면)<br> - 잠금해제요청 버튼 제거<br> - unlockSection() 함수 제거<br> - 읽기 전용 안내 텍스트 추가: "(잠금됨 · 회의 생성자만 수정 가능)"<br>- **06-검증완료**: 회의 생성자용 잠금해제 버튼 유지 (변경 없음)<br>- **인터랙션**: "3. 섹션 잠금 해제" → "3. 검증완료 섹션 (권한별 차등 표시)"로 수정<br>- **유저스토리**: UFR-MEET-055, UFR-COLLAB-030 권한 제어 명확화 |
|
||||
| 1.4.7 | 2025-10-23 | 강지수, 도그냥 | Todo 및 회의록 관련 UI/UX 재정의<br>- **09-Todo관리**: "Todo수정" → "Todo관리" 기능 확장<br> - 통계 블록: 전체(미완료), 마감임박(3일 이내), 지연(기한 경과)<br> - 필터 탭 개수 표시: 전체(개수), 지연(개수), 마감임박(개수), 완료(개수)<br> - 편집 모달: 제목, 담당자, 마감일, 우선순위 수정<br> - 체크박스 확인 모달: 완료/미완료 전환 시 확인<br> - 프로토타입: 09-Todo관리.html (통계, 필터, 모달 구현)<br>- **10-회의록상세조회**: 탭 순서 및 기본 노출 변경<br> - 탭 순서: 대시보드 → 회의록 (기존: 회의록 → 대시보드)<br> - 기본 활성 탭: 대시보드 (Desktop/Mobile 공통)<br> - 프로토타입: 10-회의록상세조회.html (탭 순서 변경, active 클래스 이동)<br>- **11-회의록수정**: 진입 경로 및 권한 제어 명확화<br> - 진입 경로: 10-회의록상세조회 → "수정" 버튼 클릭<br> - 권한 제어: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만)<br> - 회의 일시/장소: 읽기 전용 표시 추가 "(읽기 전용)"<br> - UI 구성: 회의록 리스트 제거, 직접 편집 화면으로 시작<br> - 프로토타입: 11-회의록수정.html (권한 코멘트 추가, readonly 표시) |
|
||||
| 1.4.8 | 2025-10-23 | 강지수 | Todo 관리 화면 UI/UX 개선 (컴팩트 디자인 및 시각적 계층 차별화)<br>- **09-Todo관리**: 통계 블록 및 Todo 카드 디자인 전면 개선<br> - **통계 블록**: 정보 표시 전용 디자인으로 변경<br> - 그라데이션 제거 → 모던한 단색 배경 + 좌측 4px 액센트 라인<br> - 상태별 연한 단색 배경 (블루 #F8FBFF / 오렌지 #FFFBF5 / 레드 #FFF8F8)<br> - 호버 효과 추가: 살짝 떠오르는 애니메이션 (translateY -2px)<br> - 미묘한 그림자로 깊이감 표현 (0 1px 3px rgba(0,0,0,0.05))<br> - 모바일에서도 3개 블록 한 줄 유지 (grid-template-columns: repeat(3, 1fr))<br> - 큰 숫자 + 작은 레이블로 정보 계층 명확화<br> - **Todo 카드**: 컴팩트 레이아웃으로 재설계<br> - 레이아웃: [체크박스] [배지] [배지] [✏️] / [제목] / [🔗 링크] [마감일]<br> - 편집 버튼: 우측 상단 절대 위치, ✏️ 이모지 아이콘 사용 (32×32px)<br> - 담당자 정보 제거 (간결한 디자인)<br> - 얇은 테두리 + 얇은 그림자로 인터랙티브 의도 명확화<br> - **Todo 편집 모달**: 모바일 전체화면 모드로 변경<br> - 모바일: 전체화면 (100vh), 헤더/바디/푸터 flexbox 구조<br> - 바디 영역만 스크롤 가능 (overflow-y: auto, -webkit-overflow-scrolling: touch)<br> - 데스크톱: 중앙 모달 (max-width: 600px, max-height: 90vh)<br> - 버튼 크기 확대 (40px) 및 가로 균등 배치 (flex: 1)<br> - **시각적 차별화**: 정보 블록 vs 인터랙티브 블록<br> - 통계 블록: 정보 표시 + 부드러운 호버 효과<br> - Todo 카드: 인터랙티브 (호버 시 테두리/그림자 변경)<br>- **프로토타입**: design/uiux/prototype/09-Todo관리.html 전면 개선 |
|
||||
| 1.4.9 | 2025-10-23 | 강지수 | 회의록 상세조회 화면 Todo 진행상황 섹션 정책 추가<br>- **10-회의록상세조회**: Todo 진행상황 섹션에 전체 진행률 표시 추가<br> - **전체 진행률**: 원형 진행 바로 완료 Todo / 전체 Todo 비율 표시<br> - 진행률 퍼센트 중앙 표시 (예: "60%")<br> - 색상: Primary 색상 (#4DD5A7)<br> - 크기: 80px (Desktop), 60px (Mobile)<br> - **개별 Todo 진행률 바 제거**: Todo는 완료/미완료 상태만 존재하므로 개별 진행률 표시 불필요<br> - Todo 카드 구성: 제목 + 마감일 + 우선순위 배지만 표시<br>- **이유**: 회의록에 포함된 Todo의 전체 완료 상황을 한눈에 파악하기 위함 |
|
||||
| 1.4.10 | 2025-10-23 | 강지수 | 대시보드 카드 디자인 통일 및 Todo 카드 스타일 공통화<br>- **02-대시보드**: 모든 카드 레이아웃 일관성 개선 (배지 우선 배치)<br> - **나의 Todo 카드**: 담당자 정보 제거 → 회의록 링크로 변경<br> - 메타 정보: 🔗 회의 제목 + 마감일 (담당자 정보 제거, 나의 Todo이므로 불필요)<br> - 09-Todo관리.html과 동일한 구조 적용<br> - **나의 회의록 카드**: 배지 + 제목 + 👑 레이아웃 통일<br> - 1줄: [상태배지] 제목 👑<br> - 2줄: 📅 날짜/시간 👥 인원수 완료율%<br> - **최근 회의 카드**: 배지 + 제목👑 + 메타정보 3줄 구조<br> - 1줄: [상태배지] 제목👑<br> - 2줄: 📅 날짜/시간 👥 인원수<br> - 3줄: 📍 장소<br>- **공통 스타일 관리**: Todo 카드 스타일 common.css로 이동<br> - common.css 1767-1890 라인에 Todo 카드 공통 스타일 추가<br> - 02-대시보드.html, 09-Todo관리.html에서 중복 스타일 제거 (~240줄 절감)<br> - 페이지별 전용 스타일만 개별 파일에 유지<br>- **샘플 데이터 개선**: common.js 샘플 데이터 정책 명확화<br> - SAMPLE_TODOS: status는 not_started/completed만 사용, progress 항목 제거<br> - SAMPLE_MINUTES: lastUpdated를 날짜 형식으로 변경, participantCount 의미 주석 추가, draft 상태 최소 1개 보장<br>- **유지보수성 향상**: 모든 화면에서 동일한 Todo 카드 디자인, 중앙 관리로 일관성 보장<br>- **프로토타입**: 02-대시보드.html, 09-Todo관리.html, common.css, common.js 수정 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user