할일관리 시스템 구현 완료
주요 기능: - memos/트위터 스타일 할일 입력 - 5단계 워크플로우: draft → scheduled → active → completed/delayed - 2시간 이상 작업 자동 분할 제안 (1분/30분/1시간 선택) - 시작날짜 기반 자동 활성화 - 할일별 댓글/메모 기능 - 개인별 할일 관리 백엔드: - TodoItem, TodoComment 모델 추가 - 완전한 REST API 구현 - 자동 상태 전환 로직 - 분할 기능 지원 프론트엔드: - 직관적인 탭 기반 UI - 실시간 상태 업데이트 - 모달 기반 상세 관리 - 반응형 디자인 데이터베이스: - PostgreSQL 테이블 및 인덱스 생성 - 트리거 기반 자동 업데이트
This commit is contained in:
Hyungi Ahn
@@ -51,6 +51,12 @@
|
||||
<span>통합 검색</span>
|
||||
</a>
|
||||
|
||||
<!-- 할일관리 -->
|
||||
<a href="todos.html" class="nav-link-modern" id="todos-nav-link">
|
||||
<i class="fas fa-tasks text-indigo-600"></i>
|
||||
<span>할일관리</span>
|
||||
</a>
|
||||
|
||||
<!-- 소설 관리 -->
|
||||
<div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
|
||||
<button class="nav-link-modern" id="novel-nav-link">
|
||||
|
||||
@@ -697,6 +697,53 @@ class DocumentServerAPI {
|
||||
async removeNoteFromNotebook(notebookId, noteId) {
|
||||
return await this.delete(`/notebooks/${notebookId}/notes/${noteId}`);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 할일관리 API
|
||||
// ============================================================================
|
||||
|
||||
// 할일 아이템 관리
|
||||
async getTodos(status = null) {
|
||||
const params = status ? `?status=${status}` : '';
|
||||
return await this.get(`/todos/${params}`);
|
||||
}
|
||||
|
||||
async createTodo(todoData) {
|
||||
return await this.post('/todos/', todoData);
|
||||
}
|
||||
|
||||
async getTodo(todoId) {
|
||||
return await this.get(`/todos/${todoId}`);
|
||||
}
|
||||
|
||||
async scheduleTodo(todoId, scheduleData) {
|
||||
return await this.post(`/todos/${todoId}/schedule`, scheduleData);
|
||||
}
|
||||
|
||||
async splitTodo(todoId, splitData) {
|
||||
return await this.post(`/todos/${todoId}/split`, splitData);
|
||||
}
|
||||
|
||||
async getActiveTodos() {
|
||||
return await this.get('/todos/active');
|
||||
}
|
||||
|
||||
async completeTodo(todoId) {
|
||||
return await this.put(`/todos/${todoId}/complete`);
|
||||
}
|
||||
|
||||
async delayTodo(todoId, delayData) {
|
||||
return await this.put(`/todos/${todoId}/delay`, delayData);
|
||||
}
|
||||
|
||||
// 댓글 관리
|
||||
async getTodoComments(todoId) {
|
||||
return await this.get(`/todos/${todoId}/comments`);
|
||||
}
|
||||
|
||||
async createTodoComment(todoId, commentData) {
|
||||
return await this.post(`/todos/${todoId}/comments`, commentData);
|
||||
}
|
||||
}
|
||||
|
||||
// 전역 API 인스턴스
|
||||
|
||||
421
frontend/static/js/todos.js
Normal file
421
frontend/static/js/todos.js
Normal file
@@ -0,0 +1,421 @@
|
||||
/**
|
||||
* 할일관리 애플리케이션
|
||||
*/
|
||||
|
||||
console.log('📋 할일관리 JavaScript 로드 완료');
|
||||
|
||||
function todosApp() {
|
||||
return {
|
||||
// 상태 관리
|
||||
loading: false,
|
||||
activeTab: 'active', // draft, active, scheduled, completed
|
||||
|
||||
// 할일 데이터
|
||||
todos: [],
|
||||
stats: {
|
||||
total_count: 0,
|
||||
draft_count: 0,
|
||||
scheduled_count: 0,
|
||||
active_count: 0,
|
||||
completed_count: 0,
|
||||
delayed_count: 0,
|
||||
completion_rate: 0
|
||||
},
|
||||
|
||||
// 입력 폼
|
||||
newTodoContent: '',
|
||||
|
||||
// 모달 상태
|
||||
showScheduleModal: false,
|
||||
showDelayModal: false,
|
||||
showCommentModal: false,
|
||||
showSplitModal: false,
|
||||
|
||||
// 현재 선택된 할일
|
||||
currentTodo: null,
|
||||
currentTodoComments: [],
|
||||
|
||||
// 폼 데이터
|
||||
scheduleForm: {
|
||||
start_date: '',
|
||||
estimated_minutes: 30
|
||||
},
|
||||
delayForm: {
|
||||
delayed_until: ''
|
||||
},
|
||||
commentForm: {
|
||||
content: ''
|
||||
},
|
||||
splitForm: {
|
||||
subtasks: ['', ''],
|
||||
estimated_minutes_per_task: [30, 30]
|
||||
},
|
||||
|
||||
// 계산된 속성들
|
||||
get draftTodos() {
|
||||
return this.todos.filter(todo => todo.status === 'draft');
|
||||
},
|
||||
|
||||
get activeTodos() {
|
||||
return this.todos.filter(todo => todo.status === 'active');
|
||||
},
|
||||
|
||||
get scheduledTodos() {
|
||||
return this.todos.filter(todo => todo.status === 'scheduled');
|
||||
},
|
||||
|
||||
get completedTodos() {
|
||||
return this.todos.filter(todo => todo.status === 'completed');
|
||||
},
|
||||
|
||||
// 초기화
|
||||
async init() {
|
||||
console.log('📋 할일관리 초기화 중...');
|
||||
|
||||
// API 로드 대기
|
||||
let retryCount = 0;
|
||||
while (!window.api && retryCount < 50) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
retryCount++;
|
||||
}
|
||||
|
||||
if (!window.api) {
|
||||
console.error('❌ API가 로드되지 않았습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
await this.loadTodos();
|
||||
await this.loadStats();
|
||||
|
||||
// 주기적으로 활성 할일 업데이트 (1분마다)
|
||||
setInterval(() => {
|
||||
this.loadActiveTodos();
|
||||
}, 60000);
|
||||
},
|
||||
|
||||
// 할일 목록 로드
|
||||
async loadTodos() {
|
||||
try {
|
||||
this.loading = true;
|
||||
const response = await window.api.get('/todos/');
|
||||
this.todos = response || [];
|
||||
console.log(`✅ ${this.todos.length}개 할일 로드 완료`);
|
||||
} catch (error) {
|
||||
console.error('❌ 할일 목록 로드 실패:', error);
|
||||
alert('할일 목록을 불러오는 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 활성 할일 로드 (시간 체크 포함)
|
||||
async loadActiveTodos() {
|
||||
try {
|
||||
const response = await window.api.get('/todos/active');
|
||||
const activeTodos = response || [];
|
||||
|
||||
// 기존 todos에서 active 상태 업데이트
|
||||
this.todos = this.todos.map(todo => {
|
||||
const activeVersion = activeTodos.find(active => active.id === todo.id);
|
||||
return activeVersion || todo;
|
||||
});
|
||||
|
||||
// 새로 활성화된 할일들 추가
|
||||
activeTodos.forEach(activeTodo => {
|
||||
if (!this.todos.find(todo => todo.id === activeTodo.id)) {
|
||||
this.todos.push(activeTodo);
|
||||
}
|
||||
});
|
||||
|
||||
await this.loadStats();
|
||||
} catch (error) {
|
||||
console.error('❌ 활성 할일 로드 실패:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 통계 로드
|
||||
async loadStats() {
|
||||
const stats = {
|
||||
total_count: this.todos.length,
|
||||
draft_count: this.todos.filter(t => t.status === 'draft').length,
|
||||
scheduled_count: this.todos.filter(t => t.status === 'scheduled').length,
|
||||
active_count: this.todos.filter(t => t.status === 'active').length,
|
||||
completed_count: this.todos.filter(t => t.status === 'completed').length,
|
||||
delayed_count: this.todos.filter(t => t.status === 'delayed').length
|
||||
};
|
||||
|
||||
stats.completion_rate = stats.total_count > 0
|
||||
? Math.round((stats.completed_count / stats.total_count) * 100)
|
||||
: 0;
|
||||
|
||||
this.stats = stats;
|
||||
},
|
||||
|
||||
// 새 할일 생성
|
||||
async createTodo() {
|
||||
if (!this.newTodoContent.trim()) return;
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const response = await window.api.post('/todos/', {
|
||||
content: this.newTodoContent.trim()
|
||||
});
|
||||
|
||||
this.todos.unshift(response);
|
||||
this.newTodoContent = '';
|
||||
await this.loadStats();
|
||||
|
||||
console.log('✅ 새 할일 생성 완료');
|
||||
|
||||
// 검토필요 탭으로 이동
|
||||
this.activeTab = 'draft';
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 할일 생성 실패:', error);
|
||||
alert('할일 생성 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 일정 설정 모달 열기
|
||||
openScheduleModal(todo) {
|
||||
this.currentTodo = todo;
|
||||
this.scheduleForm = {
|
||||
start_date: this.formatDateTimeLocal(new Date()),
|
||||
estimated_minutes: 30
|
||||
};
|
||||
this.showScheduleModal = true;
|
||||
},
|
||||
|
||||
// 일정 설정 모달 닫기
|
||||
closeScheduleModal() {
|
||||
this.showScheduleModal = false;
|
||||
this.currentTodo = null;
|
||||
},
|
||||
|
||||
// 할일 일정 설정
|
||||
async scheduleTodo() {
|
||||
if (!this.currentTodo || !this.scheduleForm.start_date) return;
|
||||
|
||||
try {
|
||||
const response = await window.api.post(`/todos/${this.currentTodo.id}/schedule`, {
|
||||
start_date: new Date(this.scheduleForm.start_date).toISOString(),
|
||||
estimated_minutes: parseInt(this.scheduleForm.estimated_minutes)
|
||||
});
|
||||
|
||||
// 할일 업데이트
|
||||
const index = this.todos.findIndex(t => t.id === this.currentTodo.id);
|
||||
if (index !== -1) {
|
||||
this.todos[index] = response;
|
||||
}
|
||||
|
||||
await this.loadStats();
|
||||
this.closeScheduleModal();
|
||||
|
||||
console.log('✅ 할일 일정 설정 완료');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 일정 설정 실패:', error);
|
||||
if (error.message.includes('split')) {
|
||||
alert('2시간 이상의 작업은 분할하는 것을 권장합니다.');
|
||||
} else {
|
||||
alert('일정 설정 중 오류가 발생했습니다.');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 할일 완료
|
||||
async completeTodo(todoId) {
|
||||
try {
|
||||
const response = await window.api.put(`/todos/${todoId}/complete`);
|
||||
|
||||
// 할일 업데이트
|
||||
const index = this.todos.findIndex(t => t.id === todoId);
|
||||
if (index !== -1) {
|
||||
this.todos[index] = response;
|
||||
}
|
||||
|
||||
await this.loadStats();
|
||||
console.log('✅ 할일 완료');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 할일 완료 실패:', error);
|
||||
alert('할일 완료 처리 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 지연 모달 열기
|
||||
openDelayModal(todo) {
|
||||
this.currentTodo = todo;
|
||||
this.delayForm = {
|
||||
delayed_until: this.formatDateTimeLocal(new Date(Date.now() + 24 * 60 * 60 * 1000)) // 내일
|
||||
};
|
||||
this.showDelayModal = true;
|
||||
},
|
||||
|
||||
// 지연 모달 닫기
|
||||
closeDelayModal() {
|
||||
this.showDelayModal = false;
|
||||
this.currentTodo = null;
|
||||
},
|
||||
|
||||
// 할일 지연
|
||||
async delayTodo() {
|
||||
if (!this.currentTodo || !this.delayForm.delayed_until) return;
|
||||
|
||||
try {
|
||||
const response = await window.api.put(`/todos/${this.currentTodo.id}/delay`, {
|
||||
delayed_until: new Date(this.delayForm.delayed_until).toISOString()
|
||||
});
|
||||
|
||||
// 할일 업데이트
|
||||
const index = this.todos.findIndex(t => t.id === this.currentTodo.id);
|
||||
if (index !== -1) {
|
||||
this.todos[index] = response;
|
||||
}
|
||||
|
||||
await this.loadStats();
|
||||
this.closeDelayModal();
|
||||
|
||||
console.log('✅ 할일 지연 설정 완료');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 할일 지연 실패:', error);
|
||||
alert('할일 지연 설정 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 댓글 모달 열기
|
||||
async openCommentModal(todo) {
|
||||
this.currentTodo = todo;
|
||||
this.commentForm = { content: '' };
|
||||
|
||||
try {
|
||||
const response = await window.api.get(`/todos/${todo.id}/comments`);
|
||||
this.currentTodoComments = response || [];
|
||||
} catch (error) {
|
||||
console.error('❌ 댓글 로드 실패:', error);
|
||||
this.currentTodoComments = [];
|
||||
}
|
||||
|
||||
this.showCommentModal = true;
|
||||
},
|
||||
|
||||
// 댓글 모달 닫기
|
||||
closeCommentModal() {
|
||||
this.showCommentModal = false;
|
||||
this.currentTodo = null;
|
||||
this.currentTodoComments = [];
|
||||
},
|
||||
|
||||
// 댓글 추가
|
||||
async addComment() {
|
||||
if (!this.currentTodo || !this.commentForm.content.trim()) return;
|
||||
|
||||
try {
|
||||
const response = await window.api.post(`/todos/${this.currentTodo.id}/comments`, {
|
||||
content: this.commentForm.content.trim()
|
||||
});
|
||||
|
||||
this.currentTodoComments.push(response);
|
||||
this.commentForm.content = '';
|
||||
|
||||
// 할일의 댓글 수 업데이트
|
||||
const index = this.todos.findIndex(t => t.id === this.currentTodo.id);
|
||||
if (index !== -1) {
|
||||
this.todos[index].comment_count = this.currentTodoComments.length;
|
||||
}
|
||||
|
||||
console.log('✅ 댓글 추가 완료');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 댓글 추가 실패:', error);
|
||||
alert('댓글 추가 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 분할 모달 열기
|
||||
openSplitModal(todo) {
|
||||
this.currentTodo = todo;
|
||||
this.splitForm = {
|
||||
subtasks: ['', ''],
|
||||
estimated_minutes_per_task: [30, 30]
|
||||
};
|
||||
this.showSplitModal = true;
|
||||
},
|
||||
|
||||
// 분할 모달 닫기
|
||||
closeSplitModal() {
|
||||
this.showSplitModal = false;
|
||||
this.currentTodo = null;
|
||||
},
|
||||
|
||||
// 할일 분할
|
||||
async splitTodo() {
|
||||
if (!this.currentTodo) return;
|
||||
|
||||
const validSubtasks = this.splitForm.subtasks.filter(s => s.trim());
|
||||
const validMinutes = this.splitForm.estimated_minutes_per_task.slice(0, validSubtasks.length);
|
||||
|
||||
if (validSubtasks.length < 2) {
|
||||
alert('최소 2개의 하위 작업이 필요합니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await window.api.post(`/todos/${this.currentTodo.id}/split`, {
|
||||
subtasks: validSubtasks,
|
||||
estimated_minutes_per_task: validMinutes
|
||||
});
|
||||
|
||||
// 원본 할일 제거하고 분할된 할일들 추가
|
||||
this.todos = this.todos.filter(t => t.id !== this.currentTodo.id);
|
||||
this.todos.unshift(...response);
|
||||
|
||||
await this.loadStats();
|
||||
this.closeSplitModal();
|
||||
|
||||
console.log('✅ 할일 분할 완료');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 할일 분할 실패:', error);
|
||||
alert('할일 분할 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 댓글 토글
|
||||
async toggleComments(todoId) {
|
||||
const todo = this.todos.find(t => t.id === todoId);
|
||||
if (todo) {
|
||||
await this.openCommentModal(todo);
|
||||
}
|
||||
},
|
||||
|
||||
// 유틸리티 함수들
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now - date;
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMins / 60);
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
|
||||
if (diffMins < 1) return '방금 전';
|
||||
if (diffMins < 60) return `${diffMins}분 전`;
|
||||
if (diffHours < 24) return `${diffHours}시간 전`;
|
||||
if (diffDays < 7) return `${diffDays}일 전`;
|
||||
|
||||
return date.toLocaleDateString('ko-KR');
|
||||
},
|
||||
|
||||
formatDateTimeLocal(date) {
|
||||
const d = new Date(date);
|
||||
d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
|
||||
return d.toISOString().slice(0, 16);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
console.log('📋 할일관리 컴포넌트 등록 완료');
|
||||
513
frontend/todos.html
Normal file
513
frontend/todos.html
Normal file
@@ -0,0 +1,513 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>할일관리 - Document Server</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
|
||||
<style>
|
||||
[x-cloak] { display: none !important; }
|
||||
|
||||
/* memos/트위터 스타일 입력창 */
|
||||
.todo-input-container {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 20px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.todo-input-inner {
|
||||
background: white;
|
||||
border-radius: 18px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.todo-textarea {
|
||||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.todo-card {
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
.todo-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.todo-card.draft { border-left-color: #9ca3af; }
|
||||
.todo-card.scheduled { border-left-color: #3b82f6; }
|
||||
.todo-card.active { border-left-color: #f59e0b; }
|
||||
.todo-card.completed { border-left-color: #10b981; }
|
||||
.todo-card.delayed { border-left-color: #ef4444; }
|
||||
|
||||
.status-badge {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-draft { background: #f3f4f6; color: #6b7280; }
|
||||
.status-scheduled { background: #dbeafe; color: #1d4ed8; }
|
||||
.status-active { background: #fef3c7; color: #d97706; }
|
||||
.status-completed { background: #d1fae5; color: #065f46; }
|
||||
.status-delayed { background: #fee2e2; color: #dc2626; }
|
||||
|
||||
.time-badge {
|
||||
background: #f0f9ff;
|
||||
color: #0369a1;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.comment-bubble {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
border-left: 3px solid #e2e8f0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen" x-data="todosApp()" x-init="init()" x-cloak>
|
||||
<!-- 헤더 -->
|
||||
<div id="header-container"></div>
|
||||
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<main class="container mx-auto px-4 pt-20 pb-8">
|
||||
<!-- 페이지 헤더 -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
||||
<i class="fas fa-tasks text-purple-600 mr-3"></i>
|
||||
할일관리
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600">효율적인 할일 관리로 생산성을 높여보세요</p>
|
||||
</div>
|
||||
|
||||
<!-- 할일 입력 (memos/트위터 스타일) -->
|
||||
<div class="max-w-2xl mx-auto mb-8">
|
||||
<div class="todo-input-container">
|
||||
<div class="todo-input-inner">
|
||||
<textarea
|
||||
x-model="newTodoContent"
|
||||
@keydown.ctrl.enter="createTodo()"
|
||||
placeholder="새로운 할일을 입력하세요... (Ctrl+Enter로 저장)"
|
||||
class="todo-textarea w-full"
|
||||
rows="3"
|
||||
></textarea>
|
||||
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<div class="text-sm text-gray-500">
|
||||
<i class="fas fa-lightbulb mr-1"></i>
|
||||
Ctrl+Enter로 빠르게 저장하세요
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="createTodo()"
|
||||
:disabled="!newTodoContent.trim() || loading"
|
||||
class="px-6 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<i class="fas fa-plus mr-2"></i>
|
||||
<span x-show="!loading">추가</span>
|
||||
<span x-show="loading">저장 중...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 탭 네비게이션 -->
|
||||
<div class="max-w-6xl mx-auto mb-6">
|
||||
<div class="flex space-x-1 bg-white rounded-lg p-1 shadow-sm">
|
||||
<button
|
||||
@click="activeTab = 'draft'"
|
||||
:class="activeTab === 'draft' ? 'bg-purple-600 text-white' : 'text-gray-600 hover:text-gray-900'"
|
||||
class="flex-1 px-4 py-2 rounded-md font-medium transition-colors"
|
||||
>
|
||||
<i class="fas fa-inbox mr-2"></i>
|
||||
검토필요 (<span x-text="stats.draft_count || 0"></span>)
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'active'"
|
||||
:class="activeTab === 'active' ? 'bg-purple-600 text-white' : 'text-gray-600 hover:text-gray-900'"
|
||||
class="flex-1 px-4 py-2 rounded-md font-medium transition-colors"
|
||||
>
|
||||
<i class="fas fa-play mr-2"></i>
|
||||
오늘할일 (<span x-text="stats.active_count || 0"></span>)
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'scheduled'"
|
||||
:class="activeTab === 'scheduled' ? 'bg-purple-600 text-white' : 'text-gray-600 hover:text-gray-900'"
|
||||
class="flex-1 px-4 py-2 rounded-md font-medium transition-colors"
|
||||
>
|
||||
<i class="fas fa-calendar mr-2"></i>
|
||||
예정된일 (<span x-text="stats.scheduled_count || 0"></span>)
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'completed'"
|
||||
:class="activeTab === 'completed' ? 'bg-purple-600 text-white' : 'text-gray-600 hover:text-gray-900'"
|
||||
class="flex-1 px-4 py-2 rounded-md font-medium transition-colors"
|
||||
>
|
||||
<i class="fas fa-check mr-2"></i>
|
||||
완료된일 (<span x-text="stats.completed_count || 0"></span>)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 할일 목록 -->
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<!-- 검토필요 탭 -->
|
||||
<div x-show="activeTab === 'draft'" class="space-y-4">
|
||||
<template x-for="todo in draftTodos" :key="todo.id">
|
||||
<div class="todo-card draft bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-gray-900 mb-3" x-text="todo.content"></p>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="status-badge status-draft">검토필요</span>
|
||||
<span class="text-xs text-gray-500" x-text="formatDate(todo.created_at)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 ml-4">
|
||||
<button
|
||||
@click="openScheduleModal(todo)"
|
||||
class="px-3 py-1 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700"
|
||||
>
|
||||
<i class="fas fa-calendar-plus mr-1"></i>일정설정
|
||||
</button>
|
||||
<button
|
||||
@click="openSplitModal(todo)"
|
||||
class="px-3 py-1 bg-green-600 text-white text-sm rounded-md hover:bg-green-700"
|
||||
>
|
||||
<i class="fas fa-cut mr-1"></i>분할
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div x-show="draftTodos.length === 0" class="text-center py-12">
|
||||
<i class="fas fa-inbox text-6xl text-gray-300 mb-4"></i>
|
||||
<p class="text-gray-500">검토가 필요한 할일이 없습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 오늘할일 탭 -->
|
||||
<div x-show="activeTab === 'active'" class="space-y-4">
|
||||
<template x-for="todo in activeTodos" :key="todo.id">
|
||||
<div class="todo-card active bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-gray-900 mb-3" x-text="todo.content"></p>
|
||||
<div class="flex items-center space-x-2 mb-3">
|
||||
<span class="status-badge status-active">진행중</span>
|
||||
<span class="time-badge" x-text="`${todo.estimated_minutes}분`"></span>
|
||||
<span class="text-xs text-gray-500" x-text="formatDate(todo.start_date)"></span>
|
||||
</div>
|
||||
|
||||
<!-- 댓글 표시 -->
|
||||
<div x-show="todo.comment_count > 0" class="mb-3">
|
||||
<button
|
||||
@click="toggleComments(todo.id)"
|
||||
class="text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
<i class="fas fa-comment mr-1"></i>
|
||||
댓글 <span x-text="todo.comment_count"></span>개
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 ml-4">
|
||||
<button
|
||||
@click="completeTodo(todo.id)"
|
||||
class="px-3 py-1 bg-green-600 text-white text-sm rounded-md hover:bg-green-700"
|
||||
>
|
||||
<i class="fas fa-check mr-1"></i>완료
|
||||
</button>
|
||||
<button
|
||||
@click="openDelayModal(todo)"
|
||||
class="px-3 py-1 bg-red-600 text-white text-sm rounded-md hover:bg-red-700"
|
||||
>
|
||||
<i class="fas fa-clock mr-1"></i>지연
|
||||
</button>
|
||||
<button
|
||||
@click="openCommentModal(todo)"
|
||||
class="px-3 py-1 bg-gray-600 text-white text-sm rounded-md hover:bg-gray-700"
|
||||
>
|
||||
<i class="fas fa-comment mr-1"></i>메모
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div x-show="activeTodos.length === 0" class="text-center py-12">
|
||||
<i class="fas fa-play text-6xl text-gray-300 mb-4"></i>
|
||||
<p class="text-gray-500">오늘 할 일이 없습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 예정된일 탭 -->
|
||||
<div x-show="activeTab === 'scheduled'" class="space-y-4">
|
||||
<template x-for="todo in scheduledTodos" :key="todo.id">
|
||||
<div class="todo-card scheduled bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-gray-900 mb-3" x-text="todo.content"></p>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="status-badge status-scheduled">예정됨</span>
|
||||
<span class="time-badge" x-text="`${todo.estimated_minutes}분`"></span>
|
||||
<span class="text-xs text-gray-500" x-text="formatDate(todo.start_date)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div x-show="scheduledTodos.length === 0" class="text-center py-12">
|
||||
<i class="fas fa-calendar text-6xl text-gray-300 mb-4"></i>
|
||||
<p class="text-gray-500">예정된 할일이 없습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 완료된일 탭 -->
|
||||
<div x-show="activeTab === 'completed'" class="space-y-4">
|
||||
<template x-for="todo in completedTodos" :key="todo.id">
|
||||
<div class="todo-card completed bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-gray-900 mb-3" x-text="todo.content"></p>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="status-badge status-completed">완료</span>
|
||||
<span class="time-badge" x-text="`${todo.estimated_minutes}분`"></span>
|
||||
<span class="text-xs text-gray-500" x-text="formatDate(todo.completed_at)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div x-show="completedTodos.length === 0" class="text-center py-12">
|
||||
<i class="fas fa-check text-6xl text-gray-300 mb-4"></i>
|
||||
<p class="text-gray-500">완료된 할일이 없습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 일정 설정 모달 -->
|
||||
<div x-show="showScheduleModal" x-transition class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-2xl shadow-2xl max-w-md w-full">
|
||||
<div class="p-6 border-b">
|
||||
<h3 class="text-xl font-bold text-gray-900">일정 설정</h3>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">시작 날짜</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
x-model="scheduleForm.start_date"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">예상 소요시간</label>
|
||||
<select
|
||||
x-model="scheduleForm.estimated_minutes"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<option value="1">1분</option>
|
||||
<option value="30">30분</option>
|
||||
<option value="60">1시간</option>
|
||||
</select>
|
||||
<p class="text-xs text-gray-500 mt-1">2시간 이상의 작업은 분할하는 것을 권장합니다</p>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
@click="scheduleTodo()"
|
||||
:disabled="!scheduleForm.start_date || !scheduleForm.estimated_minutes"
|
||||
class="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
일정 설정
|
||||
</button>
|
||||
<button
|
||||
@click="closeScheduleModal()"
|
||||
class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 지연 모달 -->
|
||||
<div x-show="showDelayModal" x-transition class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-2xl shadow-2xl max-w-md w-full">
|
||||
<div class="p-6 border-b">
|
||||
<h3 class="text-xl font-bold text-gray-900">할일 지연</h3>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">새로운 시작 날짜</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
x-model="delayForm.delayed_until"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
@click="delayTodo()"
|
||||
:disabled="!delayForm.delayed_until"
|
||||
class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
지연 설정
|
||||
</button>
|
||||
<button
|
||||
@click="closeDelayModal()"
|
||||
class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 분할 모달 -->
|
||||
<div x-show="showSplitModal" x-transition class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-2xl shadow-2xl max-w-lg w-full">
|
||||
<div class="p-6 border-b">
|
||||
<h3 class="text-xl font-bold text-gray-900">할일 분할</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">2시간 이상의 작업을 작은 단위로 나누어 관리하세요</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="space-y-4 mb-6">
|
||||
<template x-for="(subtask, index) in splitForm.subtasks" :key="index">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
x-model="splitForm.subtasks[index]"
|
||||
:placeholder="`하위 작업 ${index + 1}`"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
</div>
|
||||
<select
|
||||
x-model="splitForm.estimated_minutes_per_task[index]"
|
||||
class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<option value="1">1분</option>
|
||||
<option value="30">30분</option>
|
||||
<option value="60">1시간</option>
|
||||
</select>
|
||||
<button
|
||||
x-show="splitForm.subtasks.length > 2"
|
||||
@click="splitForm.subtasks.splice(index, 1); splitForm.estimated_minutes_per_task.splice(index, 1)"
|
||||
class="px-2 py-2 text-red-600 hover:bg-red-50 rounded"
|
||||
>
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<button
|
||||
@click="splitForm.subtasks.push(''); splitForm.estimated_minutes_per_task.push(30)"
|
||||
class="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded-md hover:bg-gray-300"
|
||||
>
|
||||
<i class="fas fa-plus mr-1"></i>하위 작업 추가
|
||||
</button>
|
||||
<span class="text-xs text-gray-500">최대 10개까지 가능</span>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
@click="splitTodo()"
|
||||
class="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
||||
>
|
||||
분할하기
|
||||
</button>
|
||||
<button
|
||||
@click="closeSplitModal()"
|
||||
class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 댓글 모달 -->
|
||||
<div x-show="showCommentModal" x-transition class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[80vh] overflow-y-auto">
|
||||
<div class="p-6 border-b">
|
||||
<h3 class="text-xl font-bold text-gray-900">메모 작성</h3>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<!-- 기존 댓글들 -->
|
||||
<div x-show="currentTodoComments.length > 0" class="mb-4 space-y-3">
|
||||
<template x-for="comment in currentTodoComments" :key="comment.id">
|
||||
<div class="comment-bubble">
|
||||
<p class="text-gray-900 text-sm" x-text="comment.content"></p>
|
||||
<p class="text-xs text-gray-500 mt-2" x-text="formatDate(comment.created_at)"></p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 새 댓글 입력 -->
|
||||
<div class="mb-4">
|
||||
<textarea
|
||||
x-model="commentForm.content"
|
||||
placeholder="메모를 입력하세요..."
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 resize-none"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
@click="addComment()"
|
||||
:disabled="!commentForm.content.trim()"
|
||||
class="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
메모 추가
|
||||
</button>
|
||||
<button
|
||||
@click="closeCommentModal()"
|
||||
class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
|
||||
>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 헤더 로더 -->
|
||||
<script src="static/js/header-loader.js"></script>
|
||||
|
||||
<!-- API 및 앱 스크립트 -->
|
||||
<script src="static/js/api.js?v=2025012627"></script>
|
||||
<script src="static/js/todos.js?v=2025012627"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user