From 217642b44db4443f07b906c4ded031eb8f0cffe1 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Thu, 4 Sep 2025 11:09:22 +0900
Subject: [PATCH] =?UTF-8?q?8=EC=8B=9C=EA=B0=84=20=EC=B4=88=EA=B3=BC=20?=
 =?UTF-8?q?=EA=B2=BD=EA=B3=A0=20=EA=B0=9C=EC=84=A0:=20=EA=B7=B8=EB=83=A5?=
 =?UTF-8?q?=EC=93=B4=EB=8B=A4/=EB=B3=80=EA=B2=BD=ED=95=9C=EB=8B=A4/?=
 =?UTF-8?q?=EC=B7=A8=EC=86=8C=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/static/js/todos.js | 89 ++++++++++++++++++++++++++++++++++---
 1 file changed, 84 insertions(+), 5 deletions(-)

diff --git a/frontend/static/js/todos.js b/frontend/static/js/todos.js
index 101a9e2..1e7bb48 100644
--- a/frontend/static/js/todos.js
+++ b/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);
+                };
+            });
         }
     };
 }