할일관리 개선: 인라인 메모 기능, 캘린더 일정 확인, UI 개선
This commit is contained in:
Hyungi Ahn
@@ -11,16 +11,26 @@
|
||||
<style>
|
||||
[x-cloak] { display: none !important; }
|
||||
|
||||
/* 모바일 최적화 */
|
||||
@media (max-width: 768px) {
|
||||
.container { padding-left: 1rem; padding-right: 1rem; }
|
||||
.todo-input-inner { padding: 16px; }
|
||||
.todo-textarea { font-size: 16px; } /* iOS 줌 방지 */
|
||||
.todo-card { margin-bottom: 12px; }
|
||||
.modal-content { margin: 1rem; max-height: 90vh; }
|
||||
}
|
||||
|
||||
/* memos/트위터 스타일 입력창 */
|
||||
.todo-input-container {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2px;
|
||||
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.todo-input-inner {
|
||||
background: white;
|
||||
border-radius: 18px;
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -28,32 +38,56 @@
|
||||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
min-height: 60px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
min-height: 80px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.todo-textarea::placeholder {
|
||||
color: #9ca3af;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 카드 스타일 */
|
||||
.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;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.todo-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.todo-card.draft::before { background: #9ca3af; }
|
||||
.todo-card.scheduled::before { background: #3b82f6; }
|
||||
.todo-card.active::before { background: #f59e0b; }
|
||||
.todo-card.completed::before { background: #10b981; }
|
||||
.todo-card.delayed::before { background: #ef4444; }
|
||||
|
||||
.todo-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 상태 배지 */
|
||||
.status-badge {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-draft { background: #f3f4f6; color: #6b7280; }
|
||||
@@ -62,14 +96,71 @@
|
||||
.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;
|
||||
font-size: 10px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 탭 스타일 */
|
||||
.tab-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
/* 버튼 스타일 */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 액션 버튼들 */
|
||||
.action-btn {
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 6px 12px;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 댓글 버블 */
|
||||
.comment-bubble {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
@@ -77,6 +168,156 @@
|
||||
margin-top: 8px;
|
||||
border-left: 3px solid #e2e8f0;
|
||||
}
|
||||
|
||||
/* 모달 스타일 */
|
||||
.modal-content {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* 빈 상태 */
|
||||
.empty-state {
|
||||
padding: 3rem 1rem;
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 스와이프 힌트 */
|
||||
.swipe-hint {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 풀 투 리프레시 스타일 */
|
||||
.pull-refresh {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #6366f1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 햅틱 피드백 애니메이션 */
|
||||
@keyframes haptic-pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.haptic-feedback {
|
||||
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>
|
||||
@@ -86,12 +327,12 @@
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<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>
|
||||
<div class="text-center mb-6">
|
||||
<h1 class="text-2xl md:text-4xl font-bold text-gray-900 mb-2">
|
||||
<i class="fas fa-tasks text-indigo-600 mr-2"></i>
|
||||
할일관리
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600">효율적인 할일 관리로 생산성을 높여보세요</p>
|
||||
<p class="text-sm md:text-xl text-gray-600">간편한 할일 관리</p>
|
||||
</div>
|
||||
|
||||
<!-- 할일 입력 (memos/트위터 스타일) -->
|
||||
@@ -113,13 +354,15 @@
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="createTodo()"
|
||||
@click="createTodo(); hapticFeedback($event.target)"
|
||||
: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"
|
||||
class="btn-primary px-6 py-3 text-white rounded-full disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<i class="fas fa-plus mr-2"></i>
|
||||
<span x-show="!loading">추가</span>
|
||||
<span x-show="loading">저장 중...</span>
|
||||
<span x-show="loading">
|
||||
<i class="fas fa-spinner fa-spin mr-2"></i>저장 중...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,40 +370,49 @@
|
||||
</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 class="max-w-4xl mx-auto mb-6">
|
||||
<!-- 모바일용 스와이프 힌트 -->
|
||||
<div class="swipe-hint md:hidden">
|
||||
<i class="fas fa-hand-pointer mr-1"></i>
|
||||
탭을 눌러서 전환하세요
|
||||
</div>
|
||||
|
||||
<div class="tab-container">
|
||||
<div class="grid grid-cols-3 gap-1">
|
||||
<button
|
||||
@click="activeTab = 'draft'; hapticFeedback($event.target)"
|
||||
:class="activeTab === 'draft' ? 'tab-button active' : 'tab-button text-gray-600 hover:text-gray-900'"
|
||||
class="px-4 py-3 text-center"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<i class="fas fa-inbox text-lg mb-1"></i>
|
||||
<span class="text-sm font-medium">검토필요</span>
|
||||
<span class="text-xs opacity-75">(<span x-text="stats.draft_count || 0"></span>)</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'todo'; hapticFeedback($event.target)"
|
||||
:class="activeTab === 'todo' ? 'tab-button active' : 'tab-button text-gray-600 hover:text-gray-900'"
|
||||
class="px-4 py-3 text-center"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<i class="fas fa-tasks text-lg mb-1"></i>
|
||||
<span class="text-sm font-medium">TODO</span>
|
||||
<span class="text-xs opacity-75">(<span x-text="stats.todo_count || 0"></span>)</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'completed'; hapticFeedback($event.target)"
|
||||
:class="activeTab === 'completed' ? 'tab-button active' : 'tab-button text-gray-600 hover:text-gray-900'"
|
||||
class="px-4 py-3 text-center"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<i class="fas fa-check text-lg mb-1"></i>
|
||||
<span class="text-sm font-medium">완료된일</span>
|
||||
<span class="text-xs opacity-75">(<span x-text="stats.completed_count || 0"></span>)</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -202,10 +454,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 오늘할일 탭 -->
|
||||
<div x-show="activeTab === 'active'" class="space-y-4">
|
||||
<!-- TODO 탭 -->
|
||||
<div x-show="activeTab === 'todo'" 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="todo-card active bg-white rounded-lg shadow-sm p-6" x-data="{ showMemos: false, newMemo: '', addingMemo: false, memos: [] }" x-init="memos = await $parent.loadTodoMemos(todo.id)">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-gray-900 mb-3" x-text="todo.content"></p>
|
||||
@@ -214,45 +466,68 @@
|
||||
<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"
|
||||
@click="completeTodo(todo.id); hapticFeedback($event.target)"
|
||||
class="action-btn bg-green-600 text-white 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"
|
||||
@click="openDelayModal(todo); hapticFeedback($event.target)"
|
||||
class="action-btn bg-red-600 text-white 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"
|
||||
@click="showMemos = !showMemos; if(showMemos && memos.length === 0) { memos = await $parent.loadTodoMemos(todo.id); } $parent.hapticFeedback($event.target)"
|
||||
class="action-btn bg-indigo-600 text-white hover:bg-indigo-700"
|
||||
>
|
||||
<i class="fas fa-comment mr-1"></i>메모
|
||||
<i class="fas fa-sticky-note mr-1"></i>메모
|
||||
<span x-show="memos.length > 0" class="ml-1 bg-white text-indigo-600 rounded-full px-1 text-xs" x-text="memos.length"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 인라인 메모 섹션 -->
|
||||
<div x-show="showMemos" x-transition class="mt-4 border-t pt-4">
|
||||
<!-- 기존 메모들 -->
|
||||
<div x-show="memos.length > 0" class="space-y-2 mb-3">
|
||||
<template x-for="memo in memos" :key="memo.id">
|
||||
<div class="comment-bubble">
|
||||
<p class="text-sm text-gray-700" x-text="memo.content"></p>
|
||||
<div class="text-xs text-gray-500 mt-1" x-text="formatRelativeTime(memo.created_at)"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 새 메모 입력 -->
|
||||
<div class="flex space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
x-model="newMemo"
|
||||
placeholder="메모를 입력하세요..."
|
||||
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
@keydown.enter="if(newMemo.trim()) { addingMemo = true; $parent.addTodoMemo(todo.id, newMemo).then(() => { newMemo = ''; addingMemo = false; memos = await $parent.loadTodoMemos(todo.id); }); }"
|
||||
>
|
||||
<button
|
||||
@click="if(newMemo.trim()) { addingMemo = true; $parent.addTodoMemo(todo.id, newMemo).then(() => { newMemo = ''; addingMemo = false; memos = await $parent.loadTodoMemos(todo.id); }); $parent.hapticFeedback($event.target); }"
|
||||
:disabled="!newMemo.trim() || addingMemo"
|
||||
class="action-btn bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50"
|
||||
>
|
||||
<i class="fas fa-plus" x-show="!addingMemo"></i>
|
||||
<i class="fas fa-spinner fa-spin" x-show="addingMemo"></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 x-show="activeTodos.length === 0" class="empty-state">
|
||||
<i class="fas fa-tasks text-4xl"></i>
|
||||
<p class="text-lg font-medium">할 일이 없습니다</p>
|
||||
<p class="text-sm">검토필요에서 일정을 설정해보세요</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -306,48 +581,119 @@
|
||||
|
||||
<!-- 일정 설정 모달 -->
|
||||
<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="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" x-data="calendarComponent()">
|
||||
<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="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 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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -355,35 +701,106 @@
|
||||
|
||||
<!-- 지연 모달 -->
|
||||
<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="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" x-data="calendarComponent()">
|
||||
<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="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 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>
|
||||
|
||||
Reference in New Issue
Block a user