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

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">