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

Todo 관리 시스템 및 공통 네비게이션 구현

Browse Source 
- Todo CRUD 기능 구현 (TodoController, TodoModel)
- 서버 기반 공통 네비게이션 시스템 구축
- 모든 웹 페이지에 통일된 네비게이션 적용
- 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-28 14:15:08 +09:00
parent 0c5744c12c
commit e309864262
11 changed files with 2132 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -101,7 +101,7 @@
/* 스크롤바 스타일링 */
.custom-scrollbar::-webkit-scrollbar {
width: var(--scrollbar-width, 16px); /* 동적 스크롤바 너비 */
width: 16px;
}
.custom-scrollbar::-webkit-scrollbar-track {
@@ -124,21 +124,6 @@
<div class="container mx-auto px-4 py-8">
<!-- 헤더 -->
<div class="text-center mb-8 animate-fade-in">
<h1 class="text-4xl font-bold text-white mb-2">근태현황 대시보드</h1>
<p class="text-white/80 text-lg">-- 기능 테스트 중입니다 --</p>
<!-- 스크롤바 설정 -->
<div class="mt-4 flex items-center justify-center gap-4">
<label class="text-white/70 text-sm font-medium">스크롤바 크기:</label>
<select id="scrollbarSize" class="bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
<option value="8">작게 (8px)</option>
<option value="12">보통 (12px)</option>
<option value="16" selected>크게 (16px)</option>
<option value="20">매우 크게 (20px)</option>
<option value="24">터치용 (24px)</option>
<option value="32">매우 터치용 (32px)</option>
</select>
</div>
</div>
<!-- 통계 카드 -->
@@ -218,36 +203,70 @@
</div>
</div>
</div>
</div>
<!-- 통계 카드들을 새로운 컨테이너로 이동 -->
<div class="mb-8">
</div>
<!-- 휴가자 현황 테이블 -->
<div class="glass-effect rounded-2xl overflow-hidden animate-slide-up">
<div class="px-6 py-4 border-b border-white/10">
<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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
휴가/기타 현황
</h2>
<!-- 2칸 레이아웃: 좌측 휴가현황, 우측 할일 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 animate-slide-up">
<!-- 좌측: 휴가/기타 현황 -->
<div class="glass-effect rounded-2xl overflow-hidden">
<div class="px-6 py-4 border-b border-white/10">
<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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
휴가/기타 현황
</h2>
</div>
<div class="overflow-x-auto max-h-96 custom-scrollbar">
<table class="w-full">
<thead class="bg-white/10 sticky top-0">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">이름</th>
<th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">형태</th>
<th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">종류</th>
<th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">기간</th>
<th class="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase tracking-wider">사유</th>
</tr>
</thead>
<tbody id="holidayTable" class="divide-y divide-white/10">
<!-- 데이터가 여기에 표시됩니다 -->
</tbody>
</table>
</div>
</div>
<div class="overflow-x-auto">
<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>
</tr>
</thead>
<tbody id="holidayTable" class="divide-y divide-white/10">
<!-- 데이터가 여기에 표시됩니다 -->
</tbody>
</table>
<!-- 우측: 할일 -->
<div class="glass-effect rounded-2xl overflow-hidden">
<div class="px-6 py-4 border-b border-white/10">
<h2 class="text-xl font-semibold text-white flex items-center justify-between">
<span class="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="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</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>
</h2>
</div>
<div class="p-4">
<div id="urgentTodoList" class="space-y-3 max-h-80 overflow-y-auto custom-scrollbar">
<!-- 할일이 여기에 표시됩니다 -->
<div class="text-center text-white/50 py-8">
<svg class="w-8 h-8 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
급한 할일이 없습니다
</div>
</div>
</div>
</div>
</div>
@@ -459,6 +478,99 @@
</div>
</div>
</div>
<!-- 할일 상세 정보 모달 -->
<div id="todoDetailModal" 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 max-h-[80vh] overflow-hidden 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="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
할일 상세 정보
</h2>
<button onclick="hideTodoDetailModal()" 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 max-h-[60vh] overflow-y-auto custom-scrollbar">
<div class="space-y-4">
<!-- 제목 -->
<div>
<label class="block text-white/70 text-sm font-medium mb-2">제목</label>
<div id="detailTitle" 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="detailRemark" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[4rem] whitespace-pre-wrap">
-
</div>
</div>
<!-- 요청자 -->
<div>
<label class="block text-white/70 text-sm font-medium mb-2">요청자</label>
<div id="detailRequest" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
-
</div>
</div>
<!-- 중요도 및 플래그 -->
<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>
<div id="detailSeqno" 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="detailFlag" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
-
</div>
</div>
</div>
<!-- 만료일 및 작성일 -->
<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>
<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="detailWdate" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
-
</div>
</div>
</div>
</div>
</div>
<!-- 모달 푸터 -->
<div class="px-6 py-4 border-t border-white/10 flex justify-between items-center">
<button onclick="goToTodoPageFromDetail()" class="text-primary-400 hover:text-primary-300 text-sm transition-colors">
전체 할일 목록으로 이동 →
</button>
<button onclick="hideTodoDetailModal()" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors">
닫기
</button>
</div>
</div>
</div>
</div>
</div>
<script>
@@ -466,12 +578,52 @@
class CommonNavigation {
constructor(currentPage = '') {
this.currentPage = currentPage;
this.menuItems = [];
this.init();
}
init() {
async init() {
try {
await this.loadMenuItems();
this.createNavigation();
this.addEventListeners();
} catch (error) {
console.error('Navigation initialization failed:', error);
this.createFallbackNavigation();
}
}
async loadMenuItems() {
try {
const response = await fetch('/Common/GetNavigationMenu');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data.Success && data.Data) {
this.menuItems = data.Data;
} else {
throw new Error(data.Message || 'Failed to load menu items');
}
} catch (error) {
console.error('Failed to load navigation menu:', error);
this.menuItems = this.getDefaultMenuItems();
}
}
getDefaultMenuItems() {
return [
{ key: 'dashboard', title: '대시보드', url: '/Dashboard/', icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z', isVisible: true, sortOrder: 1 },
{ key: 'common', title: '공용코드', url: '/Common', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', isVisible: true, sortOrder: 2 },
{ key: 'jobreport', title: '업무일지', url: '/Jobreport/', icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2', isVisible: true, sortOrder: 3 },
{ key: 'kuntae', title: '근태관리', url: '/Kuntae/', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', isVisible: true, sortOrder: 4 },
{ key: 'todo', title: '할일관리', url: '/Todo/', icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4', isVisible: true, sortOrder: 5 }
];
}
createFallbackNavigation() {
this.createNavigation();
this.addEventListeners();
}
createNavigation() {
@@ -484,23 +636,16 @@
}
getNavigationHTML() {
const visibleItems = this.menuItems.filter(item => item.isVisible).sort((a, b) => a.sortOrder - b.sortOrder);
return `
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<!-- 로고/타이틀 -->
<div class="flex items-center">
<h2 class="text-xl font-bold text-white">GroupWare</h2>
</div>
<!-- 메뉴 -->
<div class="hidden md:flex items-center space-x-8">
${this.getMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
${this.getMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
${this.getMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
${this.getMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
${visibleItems.map(item => this.getMenuItemHTML(item)).join('')}
</div>
<!-- 모바일 메뉴 버튼 -->
<div class="md:hidden">
<button id="mobile-menu-button" class="text-white/80 hover:text-white transition-colors p-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -509,42 +654,37 @@
</button>
</div>
</div>
<!-- 모바일 메뉴 -->
<div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
${this.getMobileMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
${this.getMobileMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
${this.getMobileMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
${this.getMobileMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
${visibleItems.map(item => this.getMobileMenuItemHTML(item)).join('')}
</div>
</div>
`;
}
getMenuItemHTML(pageKey, href, text, svgPath) {
const isActive = this.currentPage === pageKey;
getMenuItemHTML(item) {
const isActive = this.currentPage === item.key;
const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
return `
<a href="${href}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
<a href="${item.url}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
</svg>
${text}
${item.title}
</a>
`;
}
getMobileMenuItemHTML(pageKey, href, text, svgPath) {
const isActive = this.currentPage === pageKey;
getMobileMenuItemHTML(item) {
const isActive = this.currentPage === item.key;
const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
return `
<a href="${href}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
<a href="${item.url}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
</svg>
${text}
${item.title}
</a>
`;
}
@@ -577,7 +717,7 @@
// 휴가 인원 Ajax 업데이트
function updateLeaveCount() {
showLoading();
fetch('http://127.0.0.1:7979/Dashboard/TodayCountH')
fetch('http://127.0.0.1:7979/DashBoard/TodayCountH')
.then(response => response.text())
.then(data => {
const cleanData = data.replace(/"/g, '');
@@ -594,7 +734,7 @@
// 휴가자 목록 Ajax 업데이트
function updateHolidayList() {
showLoading();
fetch('http://127.0.0.1:7979/Dashboard/GetholyUser')
fetch('http://127.0.0.1:7979/DashBoard/GetholyUser')
.then(response => response.json())
.then(data => {
let tableRows = '';
@@ -613,22 +753,35 @@
cateColorClass = 'bg-warning-500/20 text-warning-300'; // 기타는 주황색 계열
}
// 기간 표시 형식 개선
let periodText = '';
if (item.sdate && item.edate) {
if (item.sdate === item.edate) {
periodText = item.sdate;
} else {
periodText = `${item.sdate}~${item.edate}`;
}
} else if (item.sdate) {
periodText = item.sdate;
} else {
periodText = '-';
}
tableRows += `
<tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4 whitespace-nowrap text-white">${item.name || '-'}(${item.uid})</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 ${typeColorClass}">
<td class="px-4 py-3 text-white text-sm">${item.name || '-'}(${item.uid})</td>
<td class="px-4 py-3">
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${typeColorClass}">
${item.type || '-'}
</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 ${cateColorClass}">
<td class="px-4 py-3">
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${cateColorClass}">
${item.cate || '-'}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.sdate || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.edate || '-'}</td>
<td class="px-6 py-4 text-white/80">${item.title || '-'}</td>
<td class="px-4 py-3 text-white/80 text-sm">${periodText}</td>
<td class="px-4 py-3 text-white/80 text-sm max-w-32 truncate" title="${item.title || '-'}">${item.title || '-'}</td>
</tr>
`;
});
@@ -749,15 +902,181 @@
document.getElementById('loadingIndicator').classList.add('hidden');
}
// Todo 목록 Ajax 업데이트
function updateTodoList() {
showLoading();
fetch('http://127.0.0.1:7979/Todo/GetUrgentTodos')
.then(response => response.json())
.then(data => {
if (data.Success && data.Data) {
displayTodoList(data.Data);
} else {
displayTodoList([]);
}
hideLoading();
})
.catch(error => {
console.error('Todo 목록 업데이트 중 오류 발생:', error);
displayTodoList([]);
hideLoading();
});
}
// Todo 목록 표시
function displayTodoList(todos) {
const todoListElement = document.getElementById('urgentTodoList');
let todoItems = '';
if (todos && todos.length > 0) {
todos.forEach(todo => {
const flagIcon = todo.flag ? '📌 ' : '';
const seqnoClass = getTodoSeqnoClass(todo.seqno);
const seqnoText = getTodoSeqnoText(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/60';
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="flex items-start justify-between mb-2">
<div class="flex items-center gap-1">
${flagIcon ? `<span class="text-xs">${flagIcon}</span>` : ''}
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${seqnoClass}">
${seqnoText}
</span>
</div>
${expireText ? `<span class="text-xs ${expireClass}">${expireText}</span>` : ''}
</div>
<h3 class="text-white font-medium text-sm mb-1 line-clamp-1">${todo.title || '제목 없음'}</h3>
<p class="text-white/70 text-xs line-clamp-2">${todo.remark || ''}</p>
${todo.request ? `<p class="text-white/50 text-xs mt-1">요청자: ${todo.request}</p>` : ''}
</div>
`;
});
} else {
todoItems = `
<div class="text-center text-white/50 py-8">
<svg class="w-8 h-8 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
<p class="text-sm">할일이 없습니다</p>
<button onclick="window.location.href='/Todo'" class="text-primary-400 hover:text-primary-300 text-xs transition-colors mt-1 inline-block">
할일 추가하기 →
</button>
</div>
`;
}
todoListElement.innerHTML = todoItems;
}
// Todo 중요도 클래스 반환
function getTodoSeqnoClass(seqno) {
switch(seqno) {
case 1: return 'bg-primary-500/20 text-primary-300';
case 2: return 'bg-warning-500/20 text-warning-300';
case 3: return 'bg-danger-500/20 text-danger-300';
default: return 'bg-white/10 text-white/50';
}
}
// Todo 중요도 텍스트 반환
function getTodoSeqnoText(seqno) {
switch(seqno) {
case 1: return '중요';
case 2: return '매우 중요';
case 3: return '긴급';
default: return '보통';
}
}
// Todo 페이지로 이동
function goToTodoPage() {
window.location.href = '/Todo/';
}
// 할일 상세 정보 표시
function showTodoDetail(todoId) {
showLoading();
fetch(`/Todo/GetTodo?id=${todoId}`)
.then(response => response.json())
.then(data => {
if (data.Success && data.Data) {
displayTodoDetail(data.Data);
document.getElementById('todoDetailModal').classList.remove('hidden');
} else {
showError('할일 정보를 불러올 수 없습니다.');
}
hideLoading();
})
.catch(error => {
console.error('할일 상세 정보 로드 중 오류 발생:', error);
showError('할일 정보를 불러오는 중 오류가 발생했습니다.');
hideLoading();
});
}
// 할일 상세 정보를 모달에 표시
function displayTodoDetail(todo) {
document.getElementById('detailTitle').textContent = todo.title || '제목 없음';
document.getElementById('detailRemark').textContent = todo.remark || '-';
document.getElementById('detailRequest').textContent = todo.request || '-';
// 중요도 표시
const seqnoText = getTodoSeqnoText(todo.seqno);
const seqnoClass = getTodoSeqnoClass(todo.seqno);
document.getElementById('detailSeqno').innerHTML = `
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${seqnoClass}">
${seqnoText}
</span>
`;
// 플래그 상태 표시
const flagText = todo.flag ? '중요' : '일반';
const flagClass = todo.flag ? 'bg-danger-500/20 text-danger-300' : 'bg-white/10 text-white/50';
document.getElementById('detailFlag').innerHTML = `
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${flagClass}">
${todo.flag ? '📌 ' : ''}${flagText}
</span>
`;
// 만료일 표시
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';
document.getElementById('detailExpire').innerHTML = `<span class="${expireClass}">${expireText}</span>`;
// 작성일 표시
const wdateText = todo.wdate ? new Date(todo.wdate).toLocaleDateString('ko-KR') + ' ' + new Date(todo.wdate).toLocaleTimeString('ko-KR') : '-';
document.getElementById('detailWdate').textContent = wdateText;
}
// 할일 상세 정보 모달 숨기기
function hideTodoDetailModal() {
document.getElementById('todoDetailModal').classList.add('hidden');
}
// 할일 상세 정보에서 Todo 페이지로 이동
function goToTodoPageFromDetail() {
hideTodoDetailModal();
window.location.href = '/Todo/';
}
// 간단한 에러 표시 함수
function showError(message) {
alert(message); // 나중에 더 예쁜 toast나 modal로 변경 가능
}
// 페이지 로드 시 데이터 업데이트
updateLeaveCount();
updateHolidayList();
updatePurchaseCount();
updateHolydayRequestCount();
updateCurrentUserCount();
updateTodoList();
// 스크롤바 크기 설정 초기화
initializeScrollbarSize();
// 30초마다 데이터 새로고침
setInterval(() => {
@@ -766,6 +1085,7 @@
updatePurchaseCount();
updateHolydayRequestCount();
updateCurrentUserCount();
updateTodoList();
}, 30000);
// 공통 네비게이션 초기화
@@ -844,6 +1164,7 @@
hideHolidayRequestModal();
hidePurchaseNRModal();
hidePurchaseCRModal();
hideTodoDetailModal();
}
});
@@ -1083,25 +1404,13 @@
}
});
// 스크롤바 크기 초기화
function initializeScrollbarSize() {
const savedSize = localStorage.getItem('scrollbarSize') || '16';
const select = document.getElementById('scrollbarSize');
select.value = savedSize;
updateScrollbarSize(savedSize);
// 콤보박스 변경 이벤트 리스너
select.addEventListener('change', function() {
const size = this.value;
updateScrollbarSize(size);
localStorage.setItem('scrollbarSize', size);
});
}
// 할일 상세 정보 모달 외부 클릭으로 닫기
document.getElementById('todoDetailModal').addEventListener('click', function(event) {
if (event.target === this) {
hideTodoDetailModal();
}
});
// 스크롤바 크기 업데이트
function updateScrollbarSize(size) {
document.documentElement.style.setProperty('--scrollbar-width', size + 'px');
}
</script>
</body>
</html>