hyungi/document-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

할일관리 단순화: 복잡한 캘린더 제거, 8시간 초과 시 경고 알람 추가

Browse Source
This commit is contained in:
Hyungi Ahn
2025-09-04 11:05:23 +09:00
parent 87d0335bfd
commit ef2e20f7f5
2 changed files with 77 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/static/js/todos.js
View File

@@ -231,12 +231,37 @@ function todosApp() {
if (!this.currentTodo || !this.scheduleForm.start_date) return;
try {
// 선택한 날짜의 총 시간 체크
const selectedDate = this.scheduleForm.start_date;
const newMinutes = parseInt(this.scheduleForm.estimated_minutes);
// 해당 날짜의 기존 할일들 시간 합계
const existingMinutes = this.todos
.filter(todo => {
if (!todo.start_date || todo.id === this.currentTodo.id) return false;
const todoDate = new Date(todo.start_date).toISOString().slice(0, 10);
return todoDate === selectedDate && (todo.status === 'scheduled' || todo.status === 'active');
})
.reduce((sum, todo) => sum + (todo.estimated_minutes || 0), 0);
const totalMinutes = existingMinutes + newMinutes;
const totalHours = Math.round(totalMinutes / 60 * 10) / 10;
// 8시간 초과 시 경고
if (totalMinutes > 480) { // 8시간 = 480분
const confirm = window.confirm(
`⚠️ 경고: ${selectedDate}의 총 작업시간이 ${totalHours}시간이 됩니다.\n` +
`8시간을 초과했습니다. 계속 진행하시겠습니까?`
);
if (!confirm) return;
}
// 날짜만 사용하여 해당 날짜의 시작 시간으로 설정
const startDate = new Date(this.scheduleForm.start_date + 'T00:00:00');
const response = await window.api.post(`/todos/${this.currentTodo.id}/schedule`, {
start_date: startDate.toISOString(),
estimated_minutes: parseInt(this.scheduleForm.estimated_minutes)
estimated_minutes: newMinutes
});
// 할일 업데이트
@@ -280,46 +305,16 @@ function todosApp() {
}
},
// 지연 모달 열기
// 지연 모달 열기 (일정 설정 모달 재사용)
openDelayModal(todo) {
this.currentTodo = todo;
this.delayForm = {
delayed_until: this.formatDateTimeLocal(new Date(Date.now() + 24 * 60 * 60 * 1000)) // 내일
this.scheduleForm = {
start_date: this.formatDateLocal(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 내일
estimated_minutes: todo.estimated_minutes || 30
};
this.showDelayModal = true;
this.showScheduleModal = 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) {
@@ -620,105 +615,5 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
// 캘린더 컴포넌트 (메인 컴포넌트에 통합)
function calendarComponent() {
return {
currentDate: new Date(),
init() {
// 부모 컴포넌트 참조 설정
this.parentApp = this.$el.closest('[x-data*="todosApp"]').__x.$data;
},
get calendarDays() {
if (!this.parentApp) return [];
const year = this.currentDate.getFullYear();
const month = this.currentDate.getMonth();
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const startDate = new Date(firstDay);
startDate.setDate(startDate.getDate() - firstDay.getDay());
const days = [];
const today = new Date();
const todayString = today.toISOString().slice(0, 10);
for (let i = 0; i < 42; i++) {
const currentDay = new Date(startDate);
currentDay.setDate(startDate.getDate() + i);
const dateString = currentDay.toISOString().slice(0, 10);
const isCurrentMonth = currentDay.getMonth() === month;
const isToday = dateString === todayString;
// 해당 날짜의 할일들 찾기
const dayTodos = this.parentApp.todos.filter(todo => {
if (!todo.start_date) return false;
const todoDate = new Date(todo.start_date).toISOString().slice(0, 10);
return todoDate === dateString && (todo.status === 'scheduled' || todo.status === 'active');
});
days.push({
day: currentDay.getDate(),
dateString: dateString,
isCurrentMonth: isCurrentMonth,
isToday: isToday,
todos: dayTodos
});
}
return days;
},
formatMonthYear(date) {
return date.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long' });
},
formatSelectedDate(dateString) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toLocaleDateString('ko-KR', { month: 'long', day: 'numeric', weekday: 'short' });
},
previousMonth() {
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
},
nextMonth() {
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
},
selectDate(dateString) {
if (this.parentApp) {
this.parentApp.scheduleForm.start_date = dateString;
}
},
selectDelayDate(dateString) {
if (this.parentApp) {
this.parentApp.delayForm.delayed_until = dateString;
}
},
getSelectedDateTodos() {
if (!this.parentApp || !this.parentApp.scheduleForm.start_date) return [];
return this.parentApp.todos.filter(todo => {
if (!todo.start_date) return false;
const todoDate = new Date(todo.start_date).toISOString().slice(0, 10);
return todoDate === this.parentApp.scheduleForm.start_date && (todo.status === 'scheduled' || todo.status === 'active');
});
},
getDelayDateTodos() {
if (!this.parentApp || !this.parentApp.delayForm.delayed_until) return [];
return this.parentApp.todos.filter(todo => {
if (!todo.start_date) return false;
const todoDate = new Date(todo.start_date).toISOString().slice(0, 10);
return todoDate === this.parentApp.delayForm.delayed_until && (todo.status === 'scheduled' || todo.status === 'active');
});
}
};
}
console.log('📋 할일관리 컴포넌트 등록 완료');

364
frontend/todos.html
View File

@@ -217,107 +217,6 @@
animation: haptic-pulse 0.1s ease-in-out;
}
/* 캘린더 스타일 */
.calendar-container {
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.calendar-header {
padding: 16px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: between;
align-items: center;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: #f3f4f6;
padding: 1px;
}
.calendar-day {
background: white;
min-height: 60px;
padding: 8px 4px;
display: flex;
flex-direction: column;
font-size: 12px;
position: relative;
cursor: pointer;
transition: all 0.2s ease;
}
.calendar-day:hover {
background: #f9fafb;
}
.calendar-day.selected {
background: #6366f1;
color: white;
}
.calendar-day.today {
background: #fef3c7;
font-weight: 600;
}
.calendar-day.other-month {
color: #9ca3af;
background: #f9fafb;
}
.calendar-day-number {
font-weight: 500;
margin-bottom: 2px;
}
.calendar-todos {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.calendar-todo-item {
background: #dbeafe;
color: #1e40af;
padding: 1px 4px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-todo-item.active {
background: #fef3c7;
color: #d97706;
}
.calendar-todo-item.scheduled {
background: #dbeafe;
color: #1e40af;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: #f3f4f6;
font-weight: 600;
font-size: 12px;
color: #6b7280;
}
.calendar-weekday {
padding: 8px;
text-align: center;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen" x-data="todosApp()" x-init="init()" x-cloak>
@@ -475,10 +374,10 @@
<i class="fas fa-check mr-1"></i>완료
</button>
<button
@click="openDelayModal(todo); hapticFeedback($event.target)"
class="action-btn bg-red-600 text-white hover:bg-red-700"
@click="openScheduleModal(todo); hapticFeedback($event.target)"
class="action-btn bg-blue-600 text-white hover:bg-blue-700"
>
<i class="fas fa-clock mr-1"></i>지연
<i class="fas fa-calendar mr-1"></i>일정변경
</button>
<button
@click="toggleMemo(todo.id); hapticFeedback($event.target)"
@@ -581,230 +480,59 @@
<!-- 일정 설정 모달 -->
<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-4xl w-full max-h-[90vh] overflow-y-auto" x-data="calendarComponent()" x-init="init()">
<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>
<p class="text-sm text-gray-600 mt-1">캘린더에서 날짜를 선택하고 예정된 할일을 확인하세요</p>
<p class="text-sm text-gray-600 mt-1">날짜와 예상 소요시간을 설정하세요</p>
</div>
<div class="p-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- 캘린더 -->
<div class="calendar-container">
<div class="calendar-header">
<button @click="previousMonth()" class="p-2 hover:bg-gray-100 rounded-lg">
<i class="fas fa-chevron-left"></i>
</button>
<h4 class="text-lg font-semibold" x-text="formatMonthYear(currentDate)"></h4>
<button @click="nextMonth()" class="p-2 hover:bg-gray-100 rounded-lg">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="calendar-weekdays">
<div class="calendar-weekday">일</div>
<div class="calendar-weekday">월</div>
<div class="calendar-weekday">화</div>
<div class="calendar-weekday">수</div>
<div class="calendar-weekday">목</div>
<div class="calendar-weekday">금</div>
<div class="calendar-weekday">토</div>
</div>
<div class="calendar-grid">
<template x-for="day in calendarDays" :key="day.dateString">
<div
@click="selectDate(day.dateString)"
:class="{
'calendar-day': true,
'selected': scheduleForm.start_date === day.dateString,
'today': day.isToday,
'other-month': !day.isCurrentMonth
}"
>
<div class="calendar-day-number" x-text="day.day"></div>
<div class="calendar-todos">
<template x-for="todo in day.todos" :key="todo.id">
<div :class="`calendar-todo-item ${todo.status}`">
<span x-text="todo.content.slice(0, 8) + (todo.content.length > 8 ? '...' : '')"></span>
<span x-text="`${todo.estimated_minutes}분`" class="ml-1 opacity-75"></span>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
<!-- 설정 폼 -->
<div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">선택된 날짜</label>
<input
type="date"
x-model="scheduleForm.start_date"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-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-indigo-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 x-show="scheduleForm.start_date" class="mb-6">
<h5 class="text-sm font-medium text-gray-700 mb-2">
<span x-text="formatSelectedDate(scheduleForm.start_date)"></span>의 예정된 할일
</h5>
<div class="bg-gray-50 rounded-lg p-3 max-h-32 overflow-y-auto">
<template x-for="todo in getSelectedDateTodos()" :key="todo.id">
<div class="flex items-center justify-between py-1 text-sm">
<span x-text="todo.content" class="flex-1 truncate"></span>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded" x-text="`${todo.estimated_minutes}분`"></span>
</div>
</template>
<div x-show="getSelectedDateTodos().length === 0" class="text-sm text-gray-500 text-center py-2">
이 날짜에는 예정된 할일이 없습니다
</div>
</div>
</div>
<div class="flex space-x-3">
<button
@click="scheduleTodo(); hapticFeedback($event.target)"
:disabled="!scheduleForm.start_date || !scheduleForm.estimated_minutes"
class="flex-1 btn-primary px-4 py-2 text-white rounded-lg disabled:opacity-50"
>
일정 설정
</button>
<button
@click="closeScheduleModal(); hapticFeedback($event.target)"
class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
>
취소
</button>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">시작 날짜</label>
<input
type="date"
x-model="scheduleForm.start_date"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-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-indigo-500"
>
<option value="15">15분</option>
<option value="30">30분</option>
<option value="60">1시간</option>
<option value="90">1시간 30분</option>
<option value="120">2시간</option>
</select>
<p class="text-xs text-gray-500 mt-1">
<i class="fas fa-info-circle mr-1"></i>
하루 8시간 초과 시 경고가 표시됩니다
</p>
</div>
<div class="flex space-x-3">
<button
@click="scheduleTodo(); hapticFeedback($event.target)"
:disabled="!scheduleForm.start_date || !scheduleForm.estimated_minutes"
class="flex-1 btn-primary px-4 py-2 text-white rounded-lg disabled:opacity-50"
>
일정 설정
</button>
<button
@click="closeScheduleModal(); hapticFeedback($event.target)"
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-4xl w-full max-h-[90vh] overflow-y-auto" x-data="calendarComponent()" x-init="init()">
<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">새로운 날짜를 선택하고 예정된 할일을 확인하세요</p>
</div>
<div class="p-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- 캘린더 -->
<div class="calendar-container">
<div class="calendar-header">
<button @click="previousMonth()" class="p-2 hover:bg-gray-100 rounded-lg">
<i class="fas fa-chevron-left"></i>
</button>
<h4 class="text-lg font-semibold" x-text="formatMonthYear(currentDate)"></h4>
<button @click="nextMonth()" class="p-2 hover:bg-gray-100 rounded-lg">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="calendar-weekdays">
<div class="calendar-weekday">일</div>
<div class="calendar-weekday">월</div>
<div class="calendar-weekday">화</div>
<div class="calendar-weekday">수</div>
<div class="calendar-weekday">목</div>
<div class="calendar-weekday">금</div>
<div class="calendar-weekday">토</div>
</div>
<div class="calendar-grid">
<template x-for="day in calendarDays" :key="day.dateString">
<div
@click="selectDelayDate(day.dateString)"
:class="{
'calendar-day': true,
'selected': delayForm.delayed_until === day.dateString,
'today': day.isToday,
'other-month': !day.isCurrentMonth
}"
>
<div class="calendar-day-number" x-text="day.day"></div>
<div class="calendar-todos">
<template x-for="todo in day.todos" :key="todo.id">
<div :class="`calendar-todo-item ${todo.status}`">
<span x-text="todo.content.slice(0, 8) + (todo.content.length > 8 ? '...' : '')"></span>
<span x-text="`${todo.estimated_minutes}분`" class="ml-1 opacity-75"></span>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
<!-- 설정 폼 -->
<div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">새로운 시작 날짜</label>
<input
type="date"
x-model="delayForm.delayed_until"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
>
</div>
<!-- 선택된 날짜의 할일 목록 -->
<div x-show="delayForm.delayed_until" class="mb-6">
<h5 class="text-sm font-medium text-gray-700 mb-2">
<span x-text="formatSelectedDate(delayForm.delayed_until)"></span>의 예정된 할일
</h5>
<div class="bg-gray-50 rounded-lg p-3 max-h-32 overflow-y-auto">
<template x-for="todo in getDelayDateTodos()" :key="todo.id">
<div class="flex items-center justify-between py-1 text-sm">
<span x-text="todo.content" class="flex-1 truncate"></span>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded" x-text="`${todo.estimated_minutes}분`"></span>
</div>
</template>
<div x-show="getDelayDateTodos().length === 0" class="text-sm text-gray-500 text-center py-2">
이 날짜에는 예정된 할일이 없습니다
</div>
</div>
</div>
<div class="flex space-x-3">
<button
@click="delayTodo(); hapticFeedback($event.target)"
: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(); hapticFeedback($event.target)"
class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
>
취소
</button>
</div>
</div>
</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">