할일 관리 시스템 개선 및 대시보드 UI 향상

- Todo 상태 관리 시스템 추가 (대기, 진행, 보류, 완료, 취소)
- 완료일(okdate) 자동 설정 기능 구현
- 대시보드 할일 목록에서 만료일 지난 항목 적색 배경 강조
- 휴가신청 목록에서 항목별 색상 구분 (대체=노란색, 년차=녹색, 하기=파란색)
- 휴가신청 목록 데이터 매핑 수정 (holydays, holytimes, HolyReason)
- Todo 정렬 순서 개선 (상태별 우선순위 적용)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Project/Web/wwwroot/DashBoard/index.html

@@ -252,9 +252,17 @@
                             </svg>
                             할일
                         </span>
-                        <button onclick="window.location.href='/Todo'" class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded-full transition-colors">
-                            전체보기
-                        </button>
+                        <div class="flex items-center space-x-2">
+                            <button onclick="showDashboardAddTodoModal()" class="text-xs bg-primary-500/20 hover:bg-primary-500/30 text-primary-300 hover:text-primary-200 px-3 py-1 rounded-full transition-colors flex items-center">
+                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                                </svg>
+                                할일추가
+                            </button>
+                            <button onclick="window.location.href='/Todo'" class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded-full transition-colors">
+                                전체보기
+                            </button>
+                        </div>
                     </h2>
                 </div>
                 <div class="p-4">
@@ -542,14 +550,20 @@
                                 </div>
                             </div>
                             
-                            <!-- 만료일 및 작성일 -->
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <!-- 만료일, 완료일 및 작성일 -->
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                 <div>
                                     <label class="block text-white/70 text-sm font-medium mb-2">만료일</label>
                                     <div id="detailExpire" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
                                         -
                                     </div>
                                 </div>
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">완료일</label>
+                                    <div id="detailOkdate" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
+                                        -
+                                    </div>
+                                </div>
                                 <div>
                                     <label class="block text-white/70 text-sm font-medium mb-2">작성일</label>
                                     <div id="detailWdate" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
@@ -572,6 +586,93 @@
                 </div>
             </div>
         </div>
+
+        <!-- 할일 추가 모달 -->
+        <div id="dashboardAddTodoModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
+            <div class="flex items-center justify-center min-h-screen p-4">
+                <div class="glass-effect rounded-2xl w-full max-w-2xl animate-slide-up">
+                    <!-- 모달 헤더 -->
+                    <div class="px-6 py-4 border-b border-white/10 flex items-center justify-between">
+                        <h2 class="text-xl font-semibold text-white flex items-center">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                            </svg>
+                            새 할일 추가
+                        </h2>
+                        <button onclick="hideDashboardAddTodoModal()" class="text-white/70 hover:text-white transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    
+                    <!-- 모달 내용 -->
+                    <div class="p-6">
+                        <form id="dashboardTodoForm" class="space-y-4">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">제목 (선택사항)</label>
+                                    <input type="text" id="dashboardTodoTitle" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all" placeholder="할일 제목을 입력하세요">
+                                </div>
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">만료일 (선택사항)</label>
+                                    <input type="date" id="dashboardTodoExpire" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-white/70 text-sm font-medium mb-2">내용 *</label>
+                                <textarea id="dashboardTodoRemark" rows="3" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all" placeholder="할일 내용을 입력하세요 (필수)" required></textarea>
+                            </div>
+                            <div>
+                                <label class="block text-white/70 text-sm font-medium mb-2">요청자</label>
+                                <input type="text" id="dashboardTodoRequest" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all" placeholder="업무 요청자를 입력하세요">
+                            </div>
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">진행상태</label>
+                                    <input type="hidden" id="dashboardTodoStatus" value="0">
+                                    <div class="flex flex-wrap gap-2">
+                                        <button type="button" onclick="setDashboardTodoStatus('0')" id="dashboardStatusBtn0" class="px-3 py-1 rounded-lg text-xs font-medium bg-gray-500/20 text-gray-300 border border-gray-500/30 transition-all">대기</button>
+                                        <button type="button" onclick="setDashboardTodoStatus('1')" id="dashboardStatusBtn1" class="px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-primary-500/20 hover:text-primary-300 transition-all">진행</button>
+                                        <button type="button" onclick="setDashboardTodoStatus('3')" id="dashboardStatusBtn3" class="px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-warning-500/20 hover:text-warning-300 transition-all">보류</button>
+                                        <button type="button" onclick="setDashboardTodoStatus('2')" id="dashboardStatusBtn2" class="px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-danger-500/20 hover:text-danger-300 transition-all">취소</button>
+                                        <button type="button" onclick="setDashboardTodoStatus('5')" id="dashboardStatusBtn5" class="px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-success-500/20 hover:text-success-300 transition-all">완료</button>
+                                    </div>
+                                </div>
+                                <div>
+                                    <label class="block text-white/70 text-sm font-medium mb-2">중요도</label>
+                                    <select id="dashboardTodoSeqno" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
+                                        <option value="0">보통</option>
+                                        <option value="1">중요</option>
+                                        <option value="2">매우 중요</option>
+                                        <option value="3">긴급</option>
+                                    </select>
+                                </div>
+                                <div class="flex items-end">
+                                    <label class="flex items-center text-white/70 text-sm font-medium">
+                                        <input type="checkbox" id="dashboardTodoFlag" class="mr-2 text-primary-500 focus:ring-primary-400 focus:ring-offset-0 rounded">
+                                        플래그 (상단 고정)
+                                    </label>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    
+                    <!-- 모달 푸터 -->
+                    <div class="px-6 py-4 border-t border-white/10 flex justify-end space-x-3">
+                        <button type="button" onclick="hideDashboardAddTodoModal()" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors">
+                            취소
+                        </button>
+                        <button type="submit" form="dashboardTodoForm" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg transition-colors flex items-center">
+                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                            </svg>
+                            추가
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <script>
@@ -938,9 +1039,12 @@
                 const expireText = todo.expire ? new Date(todo.expire).toLocaleDateString('ko-KR') : '';
                 const isExpired = todo.expire && new Date(todo.expire) < new Date();
                 const expireClass = isExpired ? 'text-danger-400' : 'text-white/60';
+                
+                // 만료일이 지난 경우 배경을 적색계통으로 강조
+                const expiredBgClass = isExpired ? 'bg-danger-600/30 border-danger-400/40 hover:bg-danger-600/40' : 'bg-white/10 hover:bg-white/15 border-white/20';
 
                 todoItems += `
-                    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 hover:bg-white/15 transition-colors cursor-pointer border border-white/20" onclick="showTodoDetail(${todo.idx})">
+                    <div class="${expiredBgClass} backdrop-blur-sm rounded-lg p-3 transition-colors cursor-pointer border" onclick="showTodoDetail(${todo.idx})">
                         <div class="flex items-start justify-between mb-2">
                             <div class="flex items-center gap-1">
                                 ${flagIcon ? `<span class="text-xs">${flagIcon}</span>` : ''}
@@ -1049,6 +1153,11 @@
         const expireClass = isExpired ? 'text-danger-400' : 'text-white';
         document.getElementById('detailExpire').innerHTML = `<span class="${expireClass}">${expireText}</span>`;
         
+        // 완료일 표시
+        const okdateText = todo.okdate ? new Date(todo.okdate).toLocaleDateString('ko-KR') + ' ' + new Date(todo.okdate).toLocaleTimeString('ko-KR') : '-';
+        const okdateClass = todo.okdate ? 'text-success-400' : 'text-white';
+        document.getElementById('detailOkdate').innerHTML = `<span class="${okdateClass}">${okdateText}</span>`;
+        
         // 작성일 표시
         const wdateText = todo.wdate ? new Date(todo.wdate).toLocaleDateString('ko-KR') + ' ' + new Date(todo.wdate).toLocaleTimeString('ko-KR') : '-';
         document.getElementById('detailWdate').textContent = wdateText;
@@ -1070,6 +1179,88 @@
         alert(message); // 나중에 더 예쁜 toast나 modal로 변경 가능
     }
 
+    // 간단한 성공 표시 함수
+    function showSuccess(message) {
+        alert(message);
+    }
+
+    // 대시보드 할일 추가 모달 표시/숨기기
+    function showDashboardAddTodoModal() {
+        document.getElementById('dashboardAddTodoModal').classList.remove('hidden');
+        // 폼 초기화
+        document.getElementById('dashboardTodoForm').reset();
+        document.getElementById('dashboardTodoStatus').value = '0';
+        setDashboardTodoStatus('0');
+    }
+
+    function hideDashboardAddTodoModal() {
+        document.getElementById('dashboardAddTodoModal').classList.add('hidden');
+    }
+
+    // 대시보드에서 할일 상태 설정
+    function setDashboardTodoStatus(status) {
+        document.getElementById('dashboardTodoStatus').value = status;
+        
+        // 모든 버튼 초기화
+        ['0', '1', '2', '3', '5'].forEach(s => {
+            const btn = document.getElementById(`dashboardStatusBtn${s}`);
+            if (btn) {
+                btn.className = 'px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-white/20 transition-all';
+            }
+        });
+        
+        // 선택된 버튼 활성화
+        const selectedBtn = document.getElementById(`dashboardStatusBtn${status}`);
+        if (selectedBtn) {
+            const statusClass = getTodoStatusClass(status).replace('bg-', 'bg-').replace('text-', 'text-');
+            const borderClass = statusClass.replace('bg-', 'border-').replace('text-', 'border-').replace('/20', '/30');
+            selectedBtn.className = `px-3 py-1 rounded-lg text-xs font-medium ${statusClass} ${borderClass} transition-all`;
+        }
+    }
+
+    // 대시보드에서 할일 추가
+    function addDashboardTodo() {
+        const formData = {
+            title: document.getElementById('dashboardTodoTitle').value,
+            remark: document.getElementById('dashboardTodoRemark').value,
+            expire: document.getElementById('dashboardTodoExpire').value || null,
+            seqno: parseInt(document.getElementById('dashboardTodoSeqno').value),
+            flag: document.getElementById('dashboardTodoFlag').checked,
+            request: document.getElementById('dashboardTodoRequest').value || null,
+            status: document.getElementById('dashboardTodoStatus').value
+        };
+
+        if (!formData.remark.trim()) {
+            showError('할일 내용을 입력해주세요.');
+            return;
+        }
+
+        showLoading();
+        fetch('/Todo/CreateTodo', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(formData)
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.Success) {
+                hideDashboardAddTodoModal();
+                updateTodoList(); // 대시보드 할일 목록 새로고침
+                showSuccess(data.Message || '할일이 추가되었습니다.');
+            } else {
+                showError(data.Message || '할일 추가에 실패했습니다.');
+            }
+            hideLoading();
+        })
+        .catch(error => {
+            console.error('할일 추가 중 오류:', error);
+            showError('서버 연결에 실패했습니다.');
+            hideLoading();
+        });
+    }
+
     // Todo 목록 업데이트
     function updateTodoList() {
         showLoading();
@@ -1106,6 +1297,8 @@
                 const isExpired = todo.expire && new Date(todo.expire) < new Date();
                 const expireClass = isExpired ? 'text-danger-400' : 'text-white/60';
 
+                const okdateText = todo.okdate ? new Date(todo.okdate).toLocaleDateString('ko-KR') : '';
+
                 todoItems += `
                     <div class="bg-white/10 rounded-lg p-4 hover:bg-white/15 transition-colors cursor-pointer" onclick="showTodoDetail(${todo.idx})">
                         <div class="flex items-start justify-between mb-2">
@@ -1117,7 +1310,10 @@
                                     ${seqnoText}
                                 </span>
                             </div>
-                            ${expireText ? `<span class="text-xs ${expireClass}">${expireText}</span>` : ''}
+                            <div class="text-xs text-right">
+                                ${expireText ? `<div class="${expireClass}">만료: ${expireText}</div>` : ''}
+                                ${okdateText ? `<div class="text-success-400">완료: ${okdateText}</div>` : ''}
+                            </div>
                         </div>
                         <h4 class="text-white font-medium mb-1">${flagIcon}${todo.title || '제목 없음'}</h4>
                         <p class="text-white/70 text-sm line-clamp-2">${todo.remark || ''}</p>
@@ -1195,6 +1391,19 @@
         updateTodoList();
     }, 30000);
 
+    // 대시보드 할일 추가 폼 이벤트 리스너
+    document.getElementById('dashboardTodoForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+        addDashboardTodo();
+    });
+
+    // 대시보드 할일 추가 모달 외부 클릭으로 닫기
+    document.getElementById('dashboardAddTodoModal').addEventListener('click', function(event) {
+        if (event.target === this) {
+            hideDashboardAddTodoModal();
+        }
+    });
+
     // 공통 네비게이션 초기화
     initNavigation('dashboard');
 
@@ -1272,6 +1481,7 @@
             hidePurchaseNRModal();
             hidePurchaseCRModal();
             hideTodoDetailModal();
+            hideDashboardAddTodoModal();
         }
     });
 
@@ -1307,22 +1517,33 @@
                         const endDate = item.edate ? new Date(item.edate).toLocaleDateString('ko-KR') : '-';
                         const dateRange = startDate !== '-' && endDate !== '-' ? `${startDate} ~ ${endDate}` : '-';
                         
-                        // 요청일 포맷팅
-                        const requestDate = item.holyday ? new Date(item.holyday).toLocaleDateString('ko-KR') : '-';
+                        // 요청일 포맷팅 (holydays 컬럼은 숫자 형태)
+                        const requestDate = item.holydays || '-';
+                        
+                        // 휴가 종류별 색상 구분
+                        let cateColorClass = 'bg-white/20 text-white'; // 기본값 (흰색)
+                        const cateValue = item.cate || '';
+                        if (cateValue === '대체') {
+                            cateColorClass = 'bg-yellow-500/20 text-yellow-300'; // 노란색
+                        } else if (cateValue === '년차') {
+                            cateColorClass = 'bg-green-500/20 text-green-300'; // 녹색
+                        } else if (cateValue === '하기') {
+                            cateColorClass = 'bg-blue-500/20 text-blue-300'; // 파란색
+                        }
                         
                         tableRows += `
                             <tr class="hover:bg-white/5 transition-colors">
                                 <td class="px-6 py-4 whitespace-nowrap text-white">${item.uid || '-'}</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-white">${item.name || '-'}</td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-500/20 text-primary-300">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${cateColorClass}">
                                         ${item.cate || '-'}
                                     </span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-white/80">${dateRange}</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-white/80">${requestDate}</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.holytime || '-'}</td>
-                                <td class="px-6 py-4 text-white/80">${item.remakr || '-'}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.holytimes || '-'}</td>
+                                <td class="px-6 py-4 text-white/80">${item.HolyReason || '-'}</td>
                             </tr>
                         `;
                     });

Project/Web/wwwroot/Todo/index.html

@@ -137,7 +137,33 @@
                     새 할일 추가
                 </button>
             </div>
-            <div class="overflow-x-auto">
+
+            <!-- 탭 메뉴 -->
+            <div class="px-6 py-2 border-b border-white/10">
+                <div class="flex space-x-1 bg-white/5 rounded-lg p-1">
+                    <button id="activeTab" onclick="switchTab('active')" class="flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white bg-white/20 shadow-sm">
+                        <div class="flex items-center justify-center space-x-2">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                            </svg>
+                            <span>진행중인 할일</span>
+                            <span id="activeCount" class="px-2 py-0.5 text-xs bg-primary-500/30 text-primary-200 rounded-full">0</span>
+                        </div>
+                    </button>
+                    <button id="completedTab" onclick="switchTab('completed')" class="flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white/60 hover:text-white hover:bg-white/10">
+                        <div class="flex items-center justify-center space-x-2">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                            <span>완료된 할일</span>
+                            <span id="completedCount" class="px-2 py-0.5 text-xs bg-success-500/30 text-success-200 rounded-full">0</span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+
+            <!-- 진행중인 할일 테이블 -->
+            <div id="activeTabContent" class="overflow-x-auto">
                 <table class="w-full">
                     <thead class="bg-white/10">
                         <tr>
@@ -151,8 +177,30 @@
                             <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">작업</th>
                         </tr>
                     </thead>
-                    <tbody id="todoTable" class="divide-y divide-white/10">
-                        <!-- 데이터가 여기에 표시됩니다 -->
+                    <tbody id="activeTable" class="divide-y divide-white/10">
+                        <!-- 진행중인 할일이 여기에 표시됩니다 -->
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- 완료된 할일 테이블 -->
+            <div id="completedTabContent" class="overflow-x-auto hidden">
+                <table class="w-full">
+                    <thead class="bg-white/10">
+                        <tr>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">진행상태</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">플래그</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">제목</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">내용</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">요청자</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">중요도</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">만료일</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">완료일</th>
+                            <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">작업</th>
+                        </tr>
+                    </thead>
+                    <tbody id="completedTable" class="divide-y divide-white/10">
+                        <!-- 완료된 할일이 여기에 표시됩니다 -->
                     </tbody>
                 </table>
             </div>
@@ -477,63 +525,40 @@
             });
     }
 
-    // 할일 목록 표시
+    // 할일 목록 표시 (탭별로 분리)
     function displayTodos(todos) {
-        const tableBody = document.getElementById('todoTable');
+        if (!todos || todos.length === 0) {
+            displayEmptyTodos();
+            return;
+        }
+
+        // 완료(5)와 진행중(0,1,2,3) 할일 분리
+        const activeTodos = todos.filter(todo => (todo.status || '0') !== '5');
+        const completedTodos = todos.filter(todo => (todo.status || '0') === '5');
+
+        // 각 탭에 표시
+        displayActiveTodos(activeTodos);
+        displayCompletedTodos(completedTodos);
+
+        // 카운트 업데이트
+        document.getElementById('activeCount').textContent = activeTodos.length;
+        document.getElementById('completedCount').textContent = completedTodos.length;
+    }
+
+    // 진행중인 할일 표시
+    function displayActiveTodos(todos) {
+        const tableBody = document.getElementById('activeTable');
         let tableRows = '';
 
         if (todos && todos.length > 0) {
             todos.forEach(todo => {
-                const statusClass = getStatusClass(todo.status);
-                const statusText = getStatusText(todo.status);
-                
-                const flagClass = todo.flag ? 'bg-warning-500/20 text-warning-300' : 'bg-white/10 text-white/50';
-                const flagText = todo.flag ? '고정' : '일반';
-                
-                const seqnoClass = getSeqnoClass(todo.seqno);
-                const seqnoText = getSeqnoText(todo.seqno);
-                
-                const expireText = todo.expire ? new Date(todo.expire).toLocaleDateString('ko-KR') : '-';
-                const isExpired = todo.expire && new Date(todo.expire) < new Date();
-                const expireClass = isExpired ? 'text-danger-400' : 'text-white/80';
-
-                tableRows += `
-                    <tr class="hover:bg-white/5 transition-colors cursor-pointer" onclick="editTodo(${todo.idx})">
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}">
-                                ${statusText}
-                            </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${flagClass}">
-                                ${flagText}
-                            </span>
-                        </td>
-                        <td class="px-6 py-4 text-white">${todo.title || '제목 없음'}</td>
-                        <td class="px-6 py-4 text-white/80 max-w-xs truncate">${todo.remark || ''}</td>
-                        <td class="px-6 py-4 text-white/80">${todo.request || '-'}</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${seqnoClass}">
-                                ${seqnoText}
-                            </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap ${expireClass}">${expireText}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm" onclick="event.stopPropagation();">
-                            <button onclick="editTodo(${todo.idx})" class="text-primary-400 hover:text-primary-300 mr-3 transition-colors">
-                                수정
-                            </button>
-                            <button onclick="deleteTodo(${todo.idx})" class="text-danger-400 hover:text-danger-300 transition-colors">
-                                삭제
-                            </button>
-                        </td>
-                    </tr>
-                `;
+                tableRows += generateTodoRow(todo, false); // 완료일 컬럼 제외
             });
         } else {
             tableRows = `
                 <tr>
                     <td colspan="8" class="px-6 py-8 text-center text-white/50">
-                        등록된 할일이 없습니다
+                        진행중인 할일이 없습니다
                     </td>
                 </tr>
             `;
@@ -542,6 +567,100 @@
         tableBody.innerHTML = tableRows;
     }
 
+    // 완료된 할일 표시
+    function displayCompletedTodos(todos) {
+        const tableBody = document.getElementById('completedTable');
+        let tableRows = '';
+
+        if (todos && todos.length > 0) {
+            todos.forEach(todo => {
+                tableRows += generateTodoRow(todo, true); // 완료일 컬럼 포함
+            });
+        } else {
+            tableRows = `
+                <tr>
+                    <td colspan="9" class="px-6 py-8 text-center text-white/50">
+                        완료된 할일이 없습니다
+                    </td>
+                </tr>
+            `;
+        }
+
+        tableBody.innerHTML = tableRows;
+    }
+
+    // 할일 행 생성 (공통 함수)
+    function generateTodoRow(todo, includeOkdate = false) {
+        const statusClass = getStatusClass(todo.status);
+        const statusText = getStatusText(todo.status);
+        
+        const flagClass = todo.flag ? 'bg-warning-500/20 text-warning-300' : 'bg-white/10 text-white/50';
+        const flagText = todo.flag ? '고정' : '일반';
+        
+        const seqnoClass = getSeqnoClass(todo.seqno);
+        const seqnoText = getSeqnoText(todo.seqno);
+        
+        const expireText = todo.expire ? new Date(todo.expire).toLocaleDateString('ko-KR') : '-';
+        const isExpired = todo.expire && new Date(todo.expire) < new Date();
+        const expireClass = isExpired ? 'text-danger-400' : 'text-white/80';
+
+        const okdateText = todo.okdate ? new Date(todo.okdate).toLocaleDateString('ko-KR') : '-';
+        const okdateClass = todo.okdate ? 'text-success-400' : 'text-white/80';
+
+        return `
+            <tr class="hover:bg-white/5 transition-colors cursor-pointer" onclick="editTodo(${todo.idx})">
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}">
+                        ${statusText}
+                    </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${flagClass}">
+                        ${flagText}
+                    </span>
+                </td>
+                <td class="px-6 py-4 text-white">${todo.title || '제목 없음'}</td>
+                <td class="px-6 py-4 text-white/80 max-w-xs truncate">${todo.remark || ''}</td>
+                <td class="px-6 py-4 text-white/80">${todo.request || '-'}</td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${seqnoClass}">
+                        ${seqnoText}
+                    </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap ${expireClass}">${expireText}</td>
+                ${includeOkdate ? `<td class="px-6 py-4 whitespace-nowrap ${okdateClass}">${okdateText}</td>` : ''}
+                <td class="px-6 py-4 whitespace-nowrap text-sm" onclick="event.stopPropagation();">
+                    <button onclick="editTodo(${todo.idx})" class="text-primary-400 hover:text-primary-300 mr-3 transition-colors">
+                        수정
+                    </button>
+                    <button onclick="deleteTodo(${todo.idx})" class="text-danger-400 hover:text-danger-300 transition-colors">
+                        삭제
+                    </button>
+                </td>
+            </tr>
+        `;
+    }
+
+    // 빈 할일 목록 표시
+    function displayEmptyTodos() {
+        document.getElementById('activeTable').innerHTML = `
+            <tr>
+                <td colspan="8" class="px-6 py-8 text-center text-white/50">
+                    진행중인 할일이 없습니다
+                </td>
+            </tr>
+        `;
+        document.getElementById('completedTable').innerHTML = `
+            <tr>
+                <td colspan="9" class="px-6 py-8 text-center text-white/50">
+                    완료된 할일이 없습니다
+                </td>
+            </tr>
+        `;
+        document.getElementById('activeCount').textContent = '0';
+        document.getElementById('completedCount').textContent = '0';
+    }
+
     // 중요도 클래스 반환
     function getSeqnoClass(seqno) {
         switch(seqno) {
@@ -645,6 +764,12 @@
                 loadTodos();
                 // 모달 닫기
                 hideEditModal();
+                // 현재 탭 상태 유지
+                setTimeout(() => {
+                    if (typeof maintainCurrentTab === 'function') {
+                        maintainCurrentTab();
+                    }
+                }, 100);
                 showSuccess(`상태가 '${getStatusText(status)}'(으)로 변경되었습니다.`);
             } else {
                 showError(data.Message || '상태 변경에 실패했습니다.');
@@ -712,6 +837,12 @@
             if (data.Success) {
                 hideAddTodoModal();
                 loadTodos();
+                // 현재 탭 상태 유지
+                setTimeout(() => {
+                    if (typeof maintainCurrentTab === 'function') {
+                        maintainCurrentTab();
+                    }
+                }, 100);
                 showSuccess(data.Message || '할일이 추가되었습니다.');
             } else {
                 showError(data.Message || '할일 추가에 실패했습니다.');
@@ -795,6 +926,12 @@
             if (data.Success) {
                 hideEditModal();
                 loadTodos();
+                // 현재 탭 상태 유지
+                setTimeout(() => {
+                    if (typeof maintainCurrentTab === 'function') {
+                        maintainCurrentTab();
+                    }
+                }, 100);
                 showSuccess(data.Message || '할일이 수정되었습니다.');
             } else {
                 showError(data.Message || '할일 수정에 실패했습니다.');
@@ -822,6 +959,12 @@
         .then(data => {
             if (data.Success) {
                 loadTodos();
+                // 현재 탭 상태 유지
+                setTimeout(() => {
+                    if (typeof maintainCurrentTab === 'function') {
+                        maintainCurrentTab();
+                    }
+                }, 100);
                 showSuccess(data.Message || '할일이 삭제되었습니다.');
             } else {
                 showError(data.Message || '할일 삭제에 실패했습니다.');
@@ -901,10 +1044,41 @@
         }
     });
 
+    // 탭 전환 기능
+    let currentTab = 'active';
+
+    function switchTab(tabName) {
+        // 이전 탭 버튼 스타일 제거
+        document.getElementById('activeTab').className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white/60 hover:text-white hover:bg-white/10';
+        document.getElementById('completedTab').className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white/60 hover:text-white hover:bg-white/10';
+        
+        // 이전 탭 컨텐츠 숨기기
+        document.getElementById('activeTabContent').classList.add('hidden');
+        document.getElementById('completedTabContent').classList.add('hidden');
+        
+        // 선택된 탭 버튼 활성화
+        if (tabName === 'active') {
+            document.getElementById('activeTab').className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white bg-white/20 shadow-sm';
+            document.getElementById('activeTabContent').classList.remove('hidden');
+        } else {
+            document.getElementById('completedTab').className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white bg-white/20 shadow-sm';
+            document.getElementById('completedTabContent').classList.remove('hidden');
+        }
+        
+        currentTab = tabName;
+    }
+
+    // 할일 상태 변경 후 현재 탭 유지
+    function maintainCurrentTab() {
+        switchTab(currentTab);
+    }
+
+
     // 페이지 초기화
     document.addEventListener('DOMContentLoaded', function() {
         initNavigation('todo');
         loadTodos();
+        switchTab('active'); // 기본적으로 진행중 탭 선택
     });
     </script>
 </body>