할일관리 개선: 인라인 메모 기능, 캘린더 일정 확인, UI 개선

backend/src/models/todo.py

@@ -22,11 +22,11 @@ class TodoItem(Base):
     status = Column(String(20), nullable=False, default="draft")  # draft, scheduled, active, completed, delayed
     
     # 시간 관리
-    created_at = Column(DateTime, nullable=False, default=datetime.utcnow)
+    created_at = Column(DateTime(timezone=True), nullable=False, default=datetime.utcnow)
-    start_date = Column(DateTime, nullable=True)  # 시작 예정일
+    start_date = Column(DateTime(timezone=True), nullable=True)  # 시작 예정일
     estimated_minutes = Column(Integer, nullable=True)  # 예상 소요시간 (분)
-    completed_at = Column(DateTime, nullable=True)
+    completed_at = Column(DateTime(timezone=True), nullable=True)
-    delayed_until = Column(DateTime, nullable=True)  # 지연된 경우 새로운 시작일
+    delayed_until = Column(DateTime(timezone=True), nullable=True)  # 지연된 경우 새로운 시작일
     
     # 분할 관리
     parent_id = Column(UUID(as_uuid=True), ForeignKey("todo_items.id"), nullable=True)  # 분할된 할일의 부모
@@ -52,8 +52,8 @@ class TodoComment(Base):
     user_id = Column(UUID(as_uuid=True), ForeignKey("users.id"), nullable=False)
     
     content = Column(Text, nullable=False)
-    created_at = Column(DateTime, nullable=False, default=datetime.utcnow)
+    created_at = Column(DateTime(timezone=True), nullable=False, default=datetime.utcnow)
-    updated_at = Column(DateTime, nullable=False, default=datetime.utcnow, onupdate=datetime.utcnow)
+    updated_at = Column(DateTime(timezone=True), nullable=False, default=datetime.utcnow, onupdate=datetime.utcnow)
     
     # 관계
     todo_item = relationship("TodoItem", back_populates="comments")

frontend/static/js/todos.js

@@ -8,7 +8,7 @@ function todosApp() {
     return {
         // 상태 관리
         loading: false,
-        activeTab: 'active', // draft, active, scheduled, completed
+        activeTab: 'todo', // draft, todo, completed
         
         // 할일 데이터
         todos: [],
@@ -57,7 +57,19 @@ function todosApp() {
         },
         
         get activeTodos() {
-            return this.todos.filter(todo => todo.status === 'active');
+            const now = new Date();
+            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+            
+            return this.todos.filter(todo => {
+                // active 상태이거나, scheduled인데 날짜가 오늘이거나 지난 경우
+                if (todo.status === 'active') return true;
+                if (todo.status === 'scheduled' && todo.start_date) {
+                    const startDate = new Date(todo.start_date);
+                    const startDay = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+                    return startDay <= today;
+                }
+                return false;
+            });
         },
         
         get scheduledTodos() {
@@ -133,21 +145,31 @@ function todosApp() {
             }
         },
         
-        // 통계 로드
+                // 통계 로드
         async loadStats() {
+            const now = new Date();
+            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+            
             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,
+                todo_count: this.todos.filter(t => {
-                active_count: this.todos.filter(t => t.status === 'active').length,
+                    // active 상태이거나, scheduled인데 날짜가 오늘이거나 지난 경우
-                completed_count: this.todos.filter(t => t.status === 'completed').length,
+                    if (t.status === 'active') return true;
-                delayed_count: this.todos.filter(t => t.status === 'delayed').length
+                    if (t.status === 'scheduled' && t.start_date) {
+                        const startDate = new Date(t.start_date);
+                        const startDay = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+                        return startDay <= today;
+                    }
+                    return false;
+                }).length,
+                completed_count: this.todos.filter(t => t.status === 'completed').length
             };
             
             stats.completion_rate = stats.total_count > 0 
                 ? Math.round((stats.completed_count / stats.total_count) * 100)
                 : 0;
-            
+                
             this.stats = stats;
         },
         
@@ -182,7 +204,7 @@ function todosApp() {
         openScheduleModal(todo) {
             this.currentTodo = todo;
             this.scheduleForm = {
-                start_date: this.formatDateTimeLocal(new Date()),
+                start_date: this.formatDateLocal(new Date()),
                 estimated_minutes: 30
             };
             this.showScheduleModal = true;
@@ -199,8 +221,11 @@ function todosApp() {
             if (!this.currentTodo || !this.scheduleForm.start_date) return;
             
             try {
+                // 날짜만 사용하여 해당 날짜의 시작 시간으로 설정
+                const startDate = new Date(this.scheduleForm.start_date + 'T00:00:00');
+                
                 const response = await window.api.post(`/todos/${this.currentTodo.id}/schedule`, {
-                    start_date: new Date(this.scheduleForm.start_date).toISOString(),
+                    start_date: startDate.toISOString(),
                     estimated_minutes: parseInt(this.scheduleForm.estimated_minutes)
                 });
                 
@@ -410,10 +435,215 @@ function todosApp() {
             return date.toLocaleDateString('ko-KR');
         },
         
-        formatDateTimeLocal(date) {
+        formatDateLocal(date) {
             const d = new Date(date);
-            d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
+            return d.toISOString().slice(0, 10);
-            return d.toISOString().slice(0, 16);
+        },
+        
+        // 햅틱 피드백 (모바일)
+        hapticFeedback(element) {
+            // 진동 API 지원 확인
+            if ('vibrate' in navigator) {
+                navigator.vibrate(50); // 50ms 진동
+            }
+            
+            // 시각적 피드백
+            if (element) {
+                element.classList.add('haptic-feedback');
+                setTimeout(() => {
+                    element.classList.remove('haptic-feedback');
+                }, 100);
+            }
+        },
+        
+        // 풀 투 리프레시 (모바일)
+        handlePullToRefresh() {
+            let startY = 0;
+            let currentY = 0;
+            let pullDistance = 0;
+            const threshold = 100;
+            
+            document.addEventListener('touchstart', (e) => {
+                if (window.scrollY === 0) {
+                    startY = e.touches[0].clientY;
+                }
+            });
+            
+            document.addEventListener('touchmove', (e) => {
+                if (startY > 0) {
+                    currentY = e.touches[0].clientY;
+                    pullDistance = currentY - startY;
+                    
+                    if (pullDistance > 0 && pullDistance < threshold) {
+                        // 당기는 중 시각적 피드백
+                        const opacity = pullDistance / threshold;
+                        document.body.style.background = `linear-gradient(to bottom, rgba(99, 102, 241, ${opacity * 0.1}) 0%, #f9fafb 100%)`;
+                    }
+                }
+            });
+            
+            document.addEventListener('touchend', async () => {
+                if (pullDistance > threshold) {
+                    // 새로고침 실행
+                    await this.loadTodos();
+                    await this.loadActiveTodos();
+                    
+                    // 햅틱 피드백
+                    if ('vibrate' in navigator) {
+                        navigator.vibrate([100, 50, 100]);
+                    }
+                }
+                
+                // 리셋
+                startY = 0;
+                pullDistance = 0;
+                document.body.style.background = '';
+            });
+        },
+        
+        // 할일 메모 로드 (인라인용)
+        async loadTodoMemos(todoId) {
+            try {
+                const response = await window.api.get(`/todos/${todoId}/comments`);
+                return response || [];
+            } catch (error) {
+                console.error('❌ 메모 로드 실패:', error);
+                return [];
+            }
+        },
+        
+        // 할일 메모 추가 (인라인용)
+        async addTodoMemo(todoId, content) {
+            try {
+                const response = await window.api.post(`/todos/${todoId}/comments`, {
+                    content: content.trim()
+                });
+                
+                console.log('✅ 메모 추가 완료');
+                return response;
+                
+            } catch (error) {
+                console.error('❌ 메모 추가 실패:', error);
+                alert('메모 추가 중 오류가 발생했습니다.');
+                throw error;
+            }
+        }
+    };
+}
+
+// 모바일 감지 및 초기화
+function isMobile() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+           (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform));
+}
+
+// 모바일 최적화 초기화
+document.addEventListener('DOMContentLoaded', () => {
+    if (isMobile()) {
+        // 모바일 전용 스타일 추가
+        document.body.classList.add('mobile-optimized');
+        
+        // iOS Safari 주소창 숨김 대응
+        const setVH = () => {
+            const vh = window.innerHeight * 0.01;
+            document.documentElement.style.setProperty('--vh', `${vh}px`);
+        };
+        
+        setVH();
+        window.addEventListener('resize', setVH);
+        window.addEventListener('orientationchange', setVH);
+        
+        // 터치 스크롤 개선
+        document.body.style.webkitOverflowScrolling = 'touch';
+    }
+});
+
+// 캘린더 컴포넌트
+function calendarComponent() {
+    return {
+        currentDate: new Date(),
+        
+        get calendarDays() {
+            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.$parent.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) {
+            this.$parent.scheduleForm.start_date = dateString;
+        },
+        
+        selectDelayDate(dateString) {
+            this.$parent.delayForm.delayed_until = dateString;
+        },
+        
+        getSelectedDateTodos() {
+            if (!this.$parent.scheduleForm.start_date) return [];
+            return this.$parent.todos.filter(todo => {
+                if (!todo.start_date) return false;
+                const todoDate = new Date(todo.start_date).toISOString().slice(0, 10);
+                return todoDate === this.$parent.scheduleForm.start_date && (todo.status === 'scheduled' || todo.status === 'active');
+            });
+        },
+        
+        getDelayDateTodos() {
+            if (!this.$parent.delayForm.delayed_until) return [];
+            return this.$parent.todos.filter(todo => {
+                if (!todo.start_date) return false;
+                const todoDate = new Date(todo.start_date).toISOString().slice(0, 10);
+                return todoDate === this.$parent.delayForm.delayed_until && (todo.status === 'scheduled' || todo.status === 'active');
+            });
         }
     };
 }

frontend/todos.html

@@ -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%);
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-            border-radius: 20px;
+            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;
+            font-size: 16px;
-            line-height: 1.5;
+            line-height: 1.6;
-            min-height: 60px;
+            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;
+            transition: all 0.2s 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;
+            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;
+            font-size: 10px;
-            padding: 2px 6px;
+            padding: 3px 8px;
-            border-radius: 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">
+        <div class="text-center mb-6">
-            <h1 class="text-4xl font-bold text-gray-900 mb-4">
+            <h1 class="text-2xl md:text-4xl font-bold text-gray-900 mb-2">
-                <i class="fas fa-tasks text-purple-600 mr-3"></i>
+                <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="max-w-4xl mx-auto mb-6">
-            <div class="flex space-x-1 bg-white rounded-lg p-1 shadow-sm">
+            <!-- 모바일용 스와이프 힌트 -->
-                <button 
+            <div class="swipe-hint md:hidden">
-                    @click="activeTab = 'draft'"
+                <i class="fas fa-hand-pointer mr-1"></i>
-                    :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"
+            </div>
-                >
+            
-                    <i class="fas fa-inbox mr-2"></i>
+            <div class="tab-container">
-                    검토필요 (<span x-text="stats.draft_count || 0"></span>)
+                <div class="grid grid-cols-3 gap-1">
-                </button>
+                    <button 
-                <button 
+                        @click="activeTab = 'draft'; hapticFeedback($event.target)"
-                    @click="activeTab = 'active'"
+                        :class="activeTab === 'draft' ? 'tab-button active' : 'tab-button text-gray-600 hover:text-gray-900'"
-                    :class="activeTab === 'active' ? 'bg-purple-600 text-white' : 'text-gray-600 hover:text-gray-900'"
+                        class="px-4 py-3 text-center"
-                    class="flex-1 px-4 py-2 rounded-md font-medium transition-colors"
+                    >
-                >
+                        <div class="flex flex-col items-center">
-                    <i class="fas fa-play mr-2"></i>
+                            <i class="fas fa-inbox text-lg mb-1"></i>
-                    오늘할일 (<span x-text="stats.active_count || 0"></span>)
+                            <span class="text-sm font-medium">검토필요</span>
-                </button>
+                            <span class="text-xs opacity-75">(<span x-text="stats.draft_count || 0"></span>)</span>
-                <button 
+                        </div>
-                    @click="activeTab = 'scheduled'"
+                    </button>
-                    :class="activeTab === 'scheduled' ? 'bg-purple-600 text-white' : 'text-gray-600 hover:text-gray-900'"
+                    <button 
-                    class="flex-1 px-4 py-2 rounded-md font-medium transition-colors"
+                        @click="activeTab = 'todo'; hapticFeedback($event.target)"
-                >
+                        :class="activeTab === 'todo' ? 'tab-button active' : 'tab-button text-gray-600 hover:text-gray-900'"
-                    <i class="fas fa-calendar mr-2"></i>
+                        class="px-4 py-3 text-center"
-                    예정된일 (<span x-text="stats.scheduled_count || 0"></span>)
+                    >
-                </button>
+                        <div class="flex flex-col items-center">
-                <button 
+                            <i class="fas fa-tasks text-lg mb-1"></i>
-                    @click="activeTab = 'completed'"
+                            <span class="text-sm font-medium">TODO</span>
-                    :class="activeTab === 'completed' ? 'bg-purple-600 text-white' : 'text-gray-600 hover:text-gray-900'"
+                            <span class="text-xs opacity-75">(<span x-text="stats.todo_count || 0"></span>)</span>
-                    class="flex-1 px-4 py-2 rounded-md font-medium transition-colors"
+                        </div>
-                >
+                    </button>
-                    <i class="fas fa-check mr-2"></i>
+                    <button 
-                    완료된일 (<span x-text="stats.completed_count || 0"></span>)
+                        @click="activeTab = 'completed'; hapticFeedback($event.target)"
-                </button>
+                        :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>
 
-            <!-- 오늘할일 탭 -->
+            <!-- TODO 탭 -->
-            <div x-show="activeTab === 'active'" class="space-y-4">
+            <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)"
+                                    @click="completeTodo(todo.id); hapticFeedback($event.target)"
-                                    class="px-3 py-1 bg-green-600 text-white text-sm rounded-md hover:bg-green-700"
+                                    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)"
+                                    @click="openDelayModal(todo); hapticFeedback($event.target)"
-                                    class="px-3 py-1 bg-red-600 text-white text-sm rounded-md hover:bg-red-700"
+                                    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)"
+                                    @click="showMemos = !showMemos; if(showMemos && memos.length === 0) { memos = await $parent.loadTodoMemos(todo.id); } $parent.hapticFeedback($event.target)"
-                                    class="px-3 py-1 bg-gray-600 text-white text-sm rounded-md hover:bg-gray-700"
+                                    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">
+                <div x-show="activeTodos.length === 0" class="empty-state">
-                    <i class="fas fa-play text-6xl text-gray-300 mb-4"></i>
+                    <i class="fas fa-tasks text-4xl"></i>
-                    <p class="text-gray-500">오늘 할 일이 없습니다</p>
+                    <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">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">시작 날짜</label>
+                    <!-- 캘린더 -->
-                    <input 
+                    <div class="calendar-container">
-                        type="datetime-local" 
+                        <div class="calendar-header">
-                        x-model="scheduleForm.start_date"
+                            <button @click="previousMonth()" class="p-2 hover:bg-gray-100 rounded-lg">
-                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                                <i class="fas fa-chevron-left"></i>
-                    >
+                            </button>
-                </div>
+                            <h4 class="text-lg font-semibold" x-text="formatMonthYear(currentDate)"></h4>
-                
+                            <button @click="nextMonth()" class="p-2 hover:bg-gray-100 rounded-lg">
-                <div class="mb-6">
+                                <i class="fas fa-chevron-right"></i>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">예상 소요시간</label>
+                            </button>
-                    <select 
+                        </div>
-                        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"
+                        <div class="calendar-weekdays">
-                    >
+                            <div class="calendar-weekday">일</div>
-                        <option value="1">1분</option>
+                            <div class="calendar-weekday">월</div>
-                        <option value="30">30분</option>
+                            <div class="calendar-weekday">화</div>
-                        <option value="60">1시간</option>
+                            <div class="calendar-weekday">수</div>
-                    </select>
+                            <div class="calendar-weekday">목</div>
-                    <p class="text-xs text-gray-500 mt-1">2시간 이상의 작업은 분할하는 것을 권장합니다</p>
+                            <div class="calendar-weekday">금</div>
-                </div>
+                            <div class="calendar-weekday">토</div>
-                
+                        </div>
-                <div class="flex space-x-3">
+                        
-                    <button 
+                        <div class="calendar-grid">
-                        @click="scheduleTodo()"
+                            <template x-for="day in calendarDays" :key="day.dateString">
-                        :disabled="!scheduleForm.start_date || !scheduleForm.estimated_minutes"
+                                <div 
-                        class="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
+                                    @click="selectDate(day.dateString)"
-                    >
+                                    :class="{
-                        일정 설정
+                                        'calendar-day': true,
-                    </button>
+                                        'selected': scheduleForm.start_date === day.dateString,
-                    <button 
+                                        'today': day.isToday,
-                        @click="closeScheduleModal()"
+                                        'other-month': !day.isCurrentMonth
-                        class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
+                                    }"
-                    >
+                                >
-                        취소
+                                    <div class="calendar-day-number" x-text="day.day"></div>
-                    </button>
+                                    <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">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">새로운 시작 날짜</label>
+                    <!-- 캘린더 -->
-                    <input 
+                    <div class="calendar-container">
-                        type="datetime-local" 
+                        <div class="calendar-header">
-                        x-model="delayForm.delayed_until"
+                            <button @click="previousMonth()" class="p-2 hover:bg-gray-100 rounded-lg">
-                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                                <i class="fas fa-chevron-left"></i>
-                    >
+                            </button>
-                </div>
+                            <h4 class="text-lg font-semibold" x-text="formatMonthYear(currentDate)"></h4>
-                
+                            <button @click="nextMonth()" class="p-2 hover:bg-gray-100 rounded-lg">
-                <div class="flex space-x-3">
+                                <i class="fas fa-chevron-right"></i>
-                    <button 
+                            </button>
-                        @click="delayTodo()"
+                        </div>
-                        :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"
+                        <div class="calendar-weekdays">
-                    >
+                            <div class="calendar-weekday">일</div>
-                        지연 설정
+                            <div class="calendar-weekday">월</div>
-                    </button>
+                            <div class="calendar-weekday">화</div>
-                    <button 
+                            <div class="calendar-weekday">수</div>
-                        @click="closeDelayModal()"
+                            <div class="calendar-weekday">목</div>
-                        class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
+                            <div class="calendar-weekday">금</div>
-                    >
+                            <div class="calendar-weekday">토</div>
-                        취소
+                        </div>
-                    </button>
+                        
+                        <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>