8시간 초과 경고 개선: 그냥쓴다/변경한다/취소 버튼 추가

frontend/static/js/todos.js

@@ -254,11 +254,13 @@ function todosApp() {
                 
                 // 8시간 초과 시 경고
                 if (totalMinutes > 480) { // 8시간 = 480분
-                    const confirm = window.confirm(
-                        `⚠️ 경고: ${selectedDate}의 총 작업시간이 ${totalHours}시간이 됩니다.\n` +
-                        `8시간을 초과했습니다. 계속 진행하시겠습니까?`
-                    );
-                    if (!confirm) return;
+                    const choice = await this.showOverworkWarning(selectedDate, totalHours);
+                    if (choice === 'cancel') return;
+                    if (choice === 'change') {
+                        // 모달을 닫지 않고 사용자가 다시 선택할 수 있도록 함
+                        return;
+                    }
+                    // choice === 'continue'인 경우 계속 진행
                 }
                 
                 // 날짜만 사용하여 해당 날짜의 시작 시간으로 설정
@@ -615,6 +617,83 @@ function todosApp() {
         // 특정 할일의 메모 목록 가져오기
         getTodoMemos(todoId) {
             return this.todoMemos[todoId] || [];
+        },
+        
+        // 8시간 초과 경고 모달 표시
+        showOverworkWarning(selectedDate, totalHours) {
+            return new Promise((resolve) => {
+                // 기존 경고 모달이 있으면 제거
+                const existingModal = document.getElementById('overwork-warning-modal');
+                if (existingModal) {
+                    existingModal.remove();
+                }
+                
+                // 모달 HTML 생성
+                const modalHTML = `
+                    <div id="overwork-warning-modal" class="fixed inset-0 bg-black bg-opacity-50 z-[60] flex items-center justify-center p-4">
+                        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full">
+                            <div class="p-6 border-b border-orange-200 bg-orange-50 rounded-t-2xl">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0">
+                                        <i class="fas fa-exclamation-triangle text-2xl text-orange-600"></i>
+                                    </div>
+                                    <div class="ml-3">
+                                        <h3 class="text-lg font-bold text-orange-900">⚠️ 과로 경고</h3>
+                                        <p class="text-sm text-orange-700 mt-1">하루 권장 작업시간을 초과했습니다</p>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="p-6">
+                                <div class="mb-6">
+                                    <p class="text-gray-700 mb-2">
+                                        <strong>${selectedDate}</strong>의 총 작업시간이 
+                                        <strong class="text-red-600">${totalHours}시간</strong>이 됩니다.
+                                    </p>
+                                    <p class="text-sm text-gray-600 bg-gray-50 p-3 rounded-lg">
+                                        <i class="fas fa-info-circle mr-1 text-blue-500"></i>
+                                        건강한 작업을 위해 하루 8시간 이내로 계획하는 것을 권장합니다.
+                                    </p>
+                                </div>
+                                
+                                <div class="flex flex-col space-y-3">
+                                    <button 
+                                        onclick="resolveOverworkWarning('continue')"
+                                        class="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium transition-colors"
+                                    >
+                                        <i class="fas fa-check mr-2"></i>그냥 쓴다 (계속 진행)
+                                    </button>
+                                    <button 
+                                        onclick="resolveOverworkWarning('change')"
+                                        class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium transition-colors"
+                                    >
+                                        <i class="fas fa-edit mr-2"></i>변경한다 (다시 설정)
+                                    </button>
+                                    <button 
+                                        onclick="resolveOverworkWarning('cancel')"
+                                        class="w-full px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors"
+                                    >
+                                        <i class="fas fa-times mr-2"></i>취소
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                
+                // 모달을 body에 추가
+                document.body.insertAdjacentHTML('beforeend', modalHTML);
+                
+                // 전역 함수로 resolve 설정
+                window.resolveOverworkWarning = (choice) => {
+                    const modal = document.getElementById('overwork-warning-modal');
+                    if (modal) {
+                        modal.remove();
+                    }
+                    delete window.resolveOverworkWarning;
+                    resolve(choice);
+                };
+            });
         }
     };
 }