mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 13:46:24 +00:00
bb921e10eb
- 가파팀 프로토타입 파일 삭제 - 가파팀 유저스토리 삭제 - 실시간 회의록 작성 플로우 설계서 추가 (Mermaid, Markdown) - 백업 및 데이터 디렉토리 추가 - AI 데이터 샘플 생성 도구 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
470 lines
16 KiB
HTML
470 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Todo 관리 - 회의록 서비스</title>
|
|
<link rel="stylesheet" href="common.css">
|
|
<style>
|
|
body { background-color: var(--color-gray-50); }
|
|
.page-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-8) var(--spacing-4);
|
|
}
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
.page-title {
|
|
font-size: var(--font-size-h1);
|
|
color: var(--color-gray-900);
|
|
}
|
|
.view-toggle {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
}
|
|
.view-btn {
|
|
padding: var(--spacing-2) var(--spacing-4);
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-300);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-body-small);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
.view-btn.active {
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
border-color: var(--color-primary-main);
|
|
}
|
|
.kanban-board {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--spacing-6);
|
|
}
|
|
.kanban-column {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-4);
|
|
min-height: 500px;
|
|
}
|
|
.column-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-4);
|
|
padding-bottom: var(--spacing-3);
|
|
border-bottom: 2px solid var(--color-gray-200);
|
|
}
|
|
.column-title {
|
|
font-size: var(--font-size-h4);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
}
|
|
.column-count {
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
background-color: var(--color-gray-200);
|
|
color: var(--color-gray-700);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
.todo-card {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-4);
|
|
margin-bottom: var(--spacing-3);
|
|
cursor: grab;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
.todo-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-2px);
|
|
}
|
|
.todo-card.priority-high {
|
|
border-left: 4px solid var(--color-error-main);
|
|
}
|
|
.todo-card.priority-medium {
|
|
border-left: 4px solid var(--color-warning-main);
|
|
}
|
|
.todo-title {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
.todo-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
margin-bottom: var(--spacing-3);
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
.todo-assignee {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
}
|
|
.avatar-sm {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--radius-full);
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
.todo-duedate {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
}
|
|
.todo-duedate.overdue {
|
|
color: var(--color-error-main);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
.todo-progress {
|
|
height: 4px;
|
|
background-color: var(--color-gray-200);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
.todo-progress-bar {
|
|
height: 100%;
|
|
background-color: var(--color-primary-main);
|
|
transition: width var(--transition-slow);
|
|
}
|
|
.todo-source {
|
|
margin-top: var(--spacing-3);
|
|
padding-top: var(--spacing-3);
|
|
border-top: 1px dashed var(--color-gray-200);
|
|
font-size: var(--font-size-caption);
|
|
color: var(--color-gray-500);
|
|
}
|
|
.todo-source-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
color: var(--color-primary-main);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
cursor: pointer;
|
|
}
|
|
.todo-source-link:hover {
|
|
color: var(--color-primary-dark);
|
|
text-decoration: underline;
|
|
}
|
|
.list-view {
|
|
display: none;
|
|
}
|
|
.list-view.active {
|
|
display: block;
|
|
}
|
|
.todo-list-item {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-4);
|
|
margin-bottom: var(--spacing-3);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
.todo-checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--color-gray-300);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
.todo-list-content {
|
|
flex: 1;
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.kanban-board {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.page-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-4);
|
|
}
|
|
.page-title { font-size: var(--font-size-h2); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-container">
|
|
<div class="page-header">
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-3);">
|
|
<button class="btn btn-secondary" onclick="window.location.href='02-대시보드.html'">← 대시보드</button>
|
|
<h1 class="page-title">Todo 관리</h1>
|
|
</div>
|
|
<div style="display: flex; gap: var(--spacing-3); align-items: center;">
|
|
<div class="view-toggle">
|
|
<button class="view-btn active" data-view="kanban">칸반</button>
|
|
<button class="view-btn" data-view="list">리스트</button>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="addTodo()">+ 새 Todo</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 칸반 보드 뷰 -->
|
|
<div class="kanban-board" id="kanbanView">
|
|
<!-- 시작 전 -->
|
|
<div class="kanban-column">
|
|
<div class="column-header">
|
|
<h2 class="column-title">시작 전</h2>
|
|
<span class="column-count">2</span>
|
|
</div>
|
|
|
|
<div class="todo-card priority-high">
|
|
<div class="todo-title">데이터베이스 스키마 설계</div>
|
|
<div class="todo-meta">
|
|
<div class="todo-assignee">
|
|
<div class="avatar-sm">이</div>
|
|
<span>이준호</span>
|
|
</div>
|
|
<div class="todo-duedate">
|
|
📅 D-3
|
|
</div>
|
|
</div>
|
|
<div class="todo-progress">
|
|
<div class="todo-progress-bar" style="width: 0%;"></div>
|
|
</div>
|
|
<div class="todo-source">
|
|
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
|
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-card">
|
|
<div class="todo-title">사용자 피드백 분석</div>
|
|
<div class="todo-meta">
|
|
<div class="todo-assignee">
|
|
<div class="avatar-sm" style="background-color: var(--color-secondary-main);">박</div>
|
|
<span>박서연</span>
|
|
</div>
|
|
<div class="todo-duedate">
|
|
📅 D-5
|
|
</div>
|
|
</div>
|
|
<div class="todo-progress">
|
|
<div class="todo-progress-bar" style="width: 0%;"></div>
|
|
</div>
|
|
<div class="todo-source">
|
|
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
|
📄 고객 만족도 개선 회의 (2025-10-18)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 진행 중 -->
|
|
<div class="kanban-column">
|
|
<div class="column-header">
|
|
<h2 class="column-title">진행 중</h2>
|
|
<span class="column-count">2</span>
|
|
</div>
|
|
|
|
<div class="todo-card priority-high">
|
|
<div class="todo-title">API 명세서 작성</div>
|
|
<div class="todo-meta">
|
|
<div class="todo-assignee">
|
|
<div class="avatar-sm">이</div>
|
|
<span>이준호</span>
|
|
</div>
|
|
<div class="todo-duedate">
|
|
📅 오늘
|
|
</div>
|
|
</div>
|
|
<div class="todo-progress">
|
|
<div class="todo-progress-bar" style="width: 60%;"></div>
|
|
</div>
|
|
<div class="todo-source">
|
|
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
|
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-card priority-medium">
|
|
<div class="todo-title">예산 편성안 검토</div>
|
|
<div class="todo-meta">
|
|
<div class="todo-assignee">
|
|
<div class="avatar-sm" style="background-color: var(--color-secondary-main);">박</div>
|
|
<span>박서연</span>
|
|
</div>
|
|
<div class="todo-duedate overdue">
|
|
📅 D+2 (지남)
|
|
</div>
|
|
</div>
|
|
<div class="todo-progress">
|
|
<div class="todo-progress-bar" style="width: 30%;"></div>
|
|
</div>
|
|
<div class="todo-source">
|
|
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
|
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 완료 -->
|
|
<div class="kanban-column">
|
|
<div class="column-header">
|
|
<h2 class="column-title">완료</h2>
|
|
<span class="column-count">1</span>
|
|
</div>
|
|
|
|
<div class="todo-card">
|
|
<div class="todo-title">UI 프로토타입 디자인</div>
|
|
<div class="todo-meta">
|
|
<div class="todo-assignee">
|
|
<div class="avatar-sm" style="background-color: var(--color-info-main);">최</div>
|
|
<span>최유진</span>
|
|
</div>
|
|
<div class="todo-duedate">
|
|
✅ 완료
|
|
</div>
|
|
</div>
|
|
<div class="todo-progress">
|
|
<div class="todo-progress-bar" style="width: 100%; background-color: var(--color-success-main);"></div>
|
|
</div>
|
|
<div class="todo-source">
|
|
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
|
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 리스트 뷰 -->
|
|
<div class="list-view" id="listView">
|
|
<div class="todo-list-item">
|
|
<input type="checkbox" class="todo-checkbox">
|
|
<div class="todo-list-content">
|
|
<div class="todo-title">API 명세서 작성</div>
|
|
<div class="todo-meta">
|
|
<div class="todo-assignee">
|
|
<div class="avatar-sm">이</div>
|
|
<span>이준호</span>
|
|
</div>
|
|
<div class="todo-duedate">📅 오늘</div>
|
|
<span class="badge badge-warning">진행 중</span>
|
|
</div>
|
|
<div class="todo-source" style="margin-top: var(--spacing-2);">
|
|
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
|
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-list-item">
|
|
<input type="checkbox" class="todo-checkbox">
|
|
<div class="todo-list-content">
|
|
<div class="todo-title">예산 편성안 검토</div>
|
|
<div class="todo-meta">
|
|
<div class="todo-assignee">
|
|
<div class="avatar-sm" style="background-color: var(--color-secondary-main);">박</div>
|
|
<span>박서연</span>
|
|
</div>
|
|
<div class="todo-duedate overdue">📅 D+2 (지남)</div>
|
|
<span class="badge badge-warning">진행 중</span>
|
|
</div>
|
|
<div class="todo-source" style="margin-top: var(--spacing-2);">
|
|
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
|
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-list-item">
|
|
<input type="checkbox" class="todo-checkbox" checked>
|
|
<div class="todo-list-content">
|
|
<div class="todo-title" style="text-decoration: line-through; color: var(--color-gray-500);">UI 프로토타입 디자인</div>
|
|
<div class="todo-meta">
|
|
<div class="todo-assignee">
|
|
<div class="avatar-sm" style="background-color: var(--color-info-main);">최</div>
|
|
<span>최유진</span>
|
|
</div>
|
|
<span class="badge badge-success">완료</span>
|
|
</div>
|
|
<div class="todo-source" style="margin-top: var(--spacing-2);">
|
|
<a href="12-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
|
|
📄 2025년 1분기 제품 기획 회의 (2025-10-25)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="common.js"></script>
|
|
<script>
|
|
// 뷰 전환
|
|
const viewBtns = document.querySelectorAll('.view-btn');
|
|
const kanbanView = document.getElementById('kanbanView');
|
|
const listView = document.getElementById('listView');
|
|
|
|
viewBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const view = btn.getAttribute('data-view');
|
|
|
|
viewBtns.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
|
|
if (view === 'kanban') {
|
|
kanbanView.style.display = 'grid';
|
|
listView.classList.remove('active');
|
|
} else {
|
|
kanbanView.style.display = 'none';
|
|
listView.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Todo 추가
|
|
function addTodo() {
|
|
MeetingApp.Toast.info('Todo 추가 기능은 준비 중입니다');
|
|
}
|
|
|
|
// Todo 카드 클릭
|
|
const todoCards = document.querySelectorAll('.todo-card');
|
|
todoCards.forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
MeetingApp.Toast.info('Todo 상세 정보를 표시합니다');
|
|
});
|
|
});
|
|
|
|
// 드래그 앤 드롭 (간단한 시뮬레이션)
|
|
todoCards.forEach(card => {
|
|
card.addEventListener('dragstart', (e) => {
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
e.target.style.opacity = '0.5';
|
|
});
|
|
|
|
card.addEventListener('dragend', (e) => {
|
|
e.target.style.opacity = '1';
|
|
});
|
|
|
|
card.setAttribute('draggable', 'true');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|