Amkor/Groupware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
ChiKyun Kim
2025-07-30 15:50:21 +09:00
parent 943fdb2036
commit 642c204a18
4 changed files with 518 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
Project/Web/wwwroot/Todo/index.html
View File

@@ -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>