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

245
Project/Web/wwwroot/DashBoard/index.html
View File

@@ -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>
`;
});