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

perf: WebView2 HostObject 프록시 캐싱으로 성능 개선

Browse Source 
- 각 HTML 파일에서 machine 프록시를 전역 변수로 한 번만 초기화
- 매 함수 호출마다 hostObjects.machine 접근하던 오버헤드 제거
- 네비게이션 클릭 시 콘솔 로그 추가 (디버깅용)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
backuppc
2025-11-25 15:58:39 +09:00
parent 3bd7a37b72
commit f0d46b7cb1
6 changed files with 464 additions and 1274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
Project/Web/wwwroot/Common.html
View File

@@ -298,171 +298,39 @@
</div> </div>
</div> </div>
<!-- 공통 네비게이션 -->
<script src="/js/common-navigation.js"></script>
<script> <script>
// 공통 네비게이션 컴포넌트
class CommonNavigation {
constructor(currentPage = '') {
this.currentPage = currentPage;
this.menuItems = [];
this.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();
}
createNavigation() {
const nav = document.createElement('nav');
nav.className = 'glass-effect border-b border-white/10';
nav.innerHTML = this.getNavigationHTML();
document.body.insertBefore(nav, document.body.firstChild);
}
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 space-x-8">
<a href="/Dashboard/" class="flex items-center space-x-2 hover:opacity-80 transition-opacity cursor-pointer">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path>
</svg>
<span class="text-xl font-bold text-white">GroupWare</span>
</a>
<nav class="hidden md:flex space-x-1">
${visibleItems.map(item => `
<a href="${item.url}" class="px-3 py-2 rounded-md text-sm font-medium transition-colors ${
this.currentPage === item.key
? 'bg-white/20 text-white'
: 'text-white/60 hover:text-white hover:bg-white/10'
}">
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
</svg>
${item.title}
</a>
`).join('')}
</nav>
</div>
<div class="flex items-center space-x-4">
<div class="text-sm text-white/60">
<span id="currentUser">사용자</span>
</div>
</div>
</div>
</div>
`;
}
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="${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="${item.icon}"></path>
</svg>
${item.title}
</a>
`;
}
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="${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="${item.icon}"></path>
</svg>
${item.title}
</a>
`;
}
addEventListeners() {
// 모바일 메뉴 토글
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
}
}
}
let currentData = []; let currentData = [];
let deleteTargetIdx = null; let deleteTargetIdx = null;
let groupData = []; let groupData = [];
let selectedGroupCode = null; let selectedGroupCode = null;
// 비동기 프록시 캐싱 (한 번만 초기화)
const machine = window.chrome.webview.hostObjects.machine;
// 페이지 로드시 초기 데이터 로드 // 페이지 로드시 초기 데이터 로드
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
loadGroups(); loadGroups();
}); });
// 코드그룹 목록 로드 // 코드그룹 목록 로드
function loadGroups() { async function loadGroups() {
showLoading(); showLoading();
fetch('/Common/GetGroups') try {
.then(response => response.json()) const jsonStr = await machine.Common_GetGroups();
.then(data => { const data = JSON.parse(jsonStr);
groupData = data || []; groupData = data || [];
renderGroupList(); renderGroupList();
renderEditGroupSelect(); renderEditGroupSelect();
hideLoading(); hideLoading();
}) } catch (error) {
.catch(error => { console.error('그룹 데이터 로드 중 오류 발생:', error);
console.error('그룹 데이터 로드 중 오류 발생:', error); hideLoading();
hideLoading(); showNotification('그룹 데이터 로드 중 오류가 발생했습니다.', 'error');
showNotification('그룹 데이터 로드 중 오류가 발생했습니다.', 'error'); }
});
} }
// 좌측 그룹 리스트 렌더링 // 좌측 그룹 리스트 렌더링
@@ -516,26 +384,20 @@
} }
// 특정 그룹의 데이터 로드 // 특정 그룹의 데이터 로드
function loadDataByGroup(grp) { async function loadDataByGroup(grp) {
showLoading(); showLoading();
let url = '/Common/GetList'; try {
if (grp) { const jsonStr = await machine.Common_GetList(grp || '99');
url += '?grp=' + encodeURIComponent(grp); const data = JSON.parse(jsonStr);
currentData = data || [];
renderTable();
hideLoading();
} catch (error) {
console.error('데이터 로드 중 오류 발생:', error);
hideLoading();
showNotification('데이터 로드 중 오류가 발생했습니다.', 'error');
} }
fetch(url)
.then(response => response.json())
.then(data => {
currentData = data || [];
renderTable();
hideLoading();
})
.catch(error => {
console.error('데이터 로드 중 오류 발생:', error);
hideLoading();
showNotification('데이터 로드 중 오류가 발생했습니다.', 'error');
});
} }
// 테이블 렌더링 // 테이블 렌더링
@@ -641,20 +503,15 @@
} }
// 삭제 실행 // 삭제 실행
function confirmDelete() { async function confirmDelete() {
if (!deleteTargetIdx) return; if (!deleteTargetIdx) return;
showLoading(); showLoading();
fetch('/Common/Delete', { try {
method: 'POST', const jsonStr = await machine.Common_Delete(deleteTargetIdx);
headers: { const data = JSON.parse(jsonStr);
'Content-Type': 'application/json',
},
body: JSON.stringify({ idx: deleteTargetIdx })
})
.then(response => response.json())
.then(data => {
hideLoading(); hideLoading();
if (data.Success) { if (data.Success) {
showNotification(data.Message, 'success'); showNotification(data.Message, 'success');
@@ -666,12 +523,11 @@
} else { } else {
showNotification(data.Message, 'error'); showNotification(data.Message, 'error');
} }
}) } catch (error) {
.catch(error => {
hideLoading(); hideLoading();
console.error('삭제 중 오류 발생:', error); console.error('삭제 중 오류 발생:', error);
showNotification('삭제 중 오류가 발생했습니다.', 'error'); showNotification('삭제 중 오류가 발생했습니다.', 'error');
}); }
} }
// 편집 다이얼로그에서 현재 항목 삭제 // 편집 다이얼로그에서 현재 항목 삭제
@@ -688,35 +544,28 @@
} }
// 데이터 저장 // 데이터 저장
function saveData() { async function saveData() {
const form = document.getElementById('editForm'); const form = document.getElementById('editForm');
if (!form.checkValidity()) { if (!form.checkValidity()) {
form.reportValidity(); form.reportValidity();
return; return;
} }
const data = { const idx = parseInt(document.getElementById('editIdx').value) || 0;
idx: parseInt(document.getElementById('editIdx').value) || 0, const grp = document.getElementById('editGrp').value;
grp: document.getElementById('editGrp').value, const code = document.getElementById('editCode').value;
code: document.getElementById('editCode').value, const svalue = document.getElementById('editSvalue').value;
svalue: document.getElementById('editSvalue').value, const ivalue = parseInt(document.getElementById('editIvalue').value) || 0;
ivalue: parseInt(document.getElementById('editIvalue').value) || 0, const fvalue = parseFloat(document.getElementById('editFvalue').value) || 0.0;
fvalue: parseFloat(document.getElementById('editFvalue').value) || 0.0, const svalue2 = document.getElementById('editSvalue2').value;
svalue2: document.getElementById('editSvalue2').value, const memo = document.getElementById('editMemo').value;
memo: document.getElementById('editMemo').value
};
showLoading(); showLoading();
fetch('/Common/Save', { try {
method: 'POST', const jsonStr = await machine.Common_Save(idx, grp, code, svalue, ivalue, fvalue, svalue2, memo);
headers: { const result = JSON.parse(jsonStr);
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
hideLoading(); hideLoading();
if (result.Success) { if (result.Success) {
showNotification(result.Message, 'success'); showNotification(result.Message, 'success');
@@ -728,12 +577,11 @@
} else { } else {
showNotification(result.Message, 'error'); showNotification(result.Message, 'error');
} }
}) } catch (error) {
.catch(error => {
hideLoading(); hideLoading();
console.error('저장 중 오류 발생:', error); console.error('저장 중 오류 발생:', error);
showNotification('저장 중 오류가 발생했습니다.', 'error'); showNotification('저장 중 오류가 발생했습니다.', 'error');
}); }
} }
// 로딩 표시 // 로딩 표시
@@ -807,17 +655,6 @@
} }
}); });
// 전역 함수로 내비게이션 초기화
function initNavigation(currentPage = '') {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new CommonNavigation(currentPage);
});
} else {
new CommonNavigation(currentPage);
}
}
// 공통 네비게이션 초기화 // 공통 네비게이션 초기화
initNavigation('common'); initNavigation('common');
</script> </script>

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

@@ -187,7 +187,7 @@
</svg> </svg>
할일추가 할일추가
</button> </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 onclick="window.location.href='/Todo/index.html'" class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded-full transition-colors">
전체보기 전체보기
</button> </button>
</div> </div>
@@ -510,170 +510,40 @@
<script> <script>
// 대시보드 전용 스크립트 // 대시보드 전용 스크립트
// 휴가 인원 Ajax 업데이트 // 비동기 프록시 캐싱 (한 번만 초기화)
function updateLeaveCount() { const machine = window.chrome.webview.hostObjects.machine;
showLoading();
fetch('/DashBoard/TodayCountH')
.then(response => response.text())
.then(data => {
const cleanData = data.replace(/"/g, '');
const count = parseInt(cleanData, 10);
animateNumberChange('leaveCount', count);
hideLoading();
})
.catch(error => {
console.error('휴가 인원 업데이트 중 오류 발생:', error);
hideLoading();
});
}
// 휴가자 목록 Ajax 업데이트
function updateHolidayList() {
showLoading();
fetch('/DashBoard/GetholyUser')
.then(response => response.json())
.then(data => {
let tableRows = '';
if (data && data.length > 0) {
data.forEach(item => {
// 형태에 따른 색상 결정
const typeColorClass = (item.type === '휴가') ? 'bg-green-500/20 text-green-300' : 'bg-warning-500/20 text-warning-300';
// 종류에 따른 색상 결정
let cateColorClass = 'bg-warning-500/20 text-warning-300'; // 기본값
if (item.cate === '휴가') {
cateColorClass = 'bg-warning-500/20 text-warning-300'; // 노란색 계열
} else if (item.cate === '파견') {
cateColorClass = 'bg-purple-500/20 text-purple-300'; // 보라색 계열
} else {
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-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-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-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>
`;
});
} else {
tableRows = `
<tr>
<td colspan="5" class="px-6 py-8 text-center text-white/50">
현재 휴가자가 없습니다
</td>
</tr>
`;
}
document.getElementById('holidayTable').innerHTML = tableRows;
hideLoading();
})
.catch(error => {
console.error('휴가자 목록 업데이트 중 오류 발생:', error);
document.getElementById('holidayTable').innerHTML = `
<tr>
<td colspan="5" class="px-6 py-8 text-center text-danger-400">
데이터를 불러오는 중 오류가 발생했습니다
</td>
</tr>
`;
hideLoading();
});
}
// 구매요청 데이터 Ajax 업데이트 // 구매요청 데이터 Ajax 업데이트
function updatePurchaseCount() { async function updatePurchaseCount() {
showLoading(); showLoading();
fetch('/DashBoard/GetPurchaseWaitCount') try {
.then(response => response.json()) const jsonData = await machine.GetPurchaseWaitCount();
.then(data => { const data = JSON.parse(jsonData);
if (data) {
// NR 구매요청 카운트 업데이트
if (data.NR !== undefined) {
animateNumberChange('purchaseCountNR', data.NR);
}
// CR 구매요청 카운트 업데이트 if (data) {
if (data.CR !== undefined) { // NR 구매요청 카운트 업데이트
animateNumberChange('purchaseCountCR', data.CR); if (data.NR !== undefined) {
} animateNumberChange('purchaseCountNR', data.NR);
} }
hideLoading();
})
.catch(error => {
console.error('구매요청 데이터 업데이트 중 오류 발생:', error);
hideLoading();
});
}
// 휴가요청 데이터 Ajax 업데이트 // CR 구매요청 카운트 업데이트
function updateHolydayRequestCount() { if (data.CR !== undefined) {
showLoading(); animateNumberChange('purchaseCountCR', data.CR);
fetch('/DashBoard/GetHolydayRequestCount')
.then(response => response.json())
.then(data => {
if (data) {
// NR 구매요청 카운트 업데이트
if (data.HOLY !== undefined) {
animateNumberChange('leaveRequestCount', data.HOLY);
}
} }
hideLoading(); }
}) } catch (error) {
.catch(error => { console.error('구매요청 데이터 업데이트 중 오류 발생:', error);
console.error('휴가요청 데이터 업데이트 중 오류 발생:', error); }
hideLoading(); hideLoading();
});
}
// 사용자카운트 데이터 Ajax 업데이트
function updateCurrentUserCount() {
showLoading();
fetch('/DashBoard/GetCurrentUserCount')
.then(response => response.json())
.then(data => {
if (data) {
// NR 구매요청 카운트 업데이트
if (data.Count !== undefined) {
animateNumberChange('presentCount', data.Count);
}
}
hideLoading();
})
.catch(error => {
console.error('현재유저 카운트 업데이트 중 오류 발생:', error);
hideLoading();
});
} }
// 숫자 애니메이션 // 숫자 애니메이션
function animateNumberChange(elementId, newValue) { function animateNumberChange(elementId, newValue) {
const element = document.getElementById(elementId); const element = document.getElementById(elementId);
if (!element) {
console.warn(`Element not found: ${elementId}`);
return;
}
const currentValue = parseInt(element.textContent) || 0; const currentValue = parseInt(element.textContent) || 0;
const increment = (newValue - currentValue) / 20; const increment = (newValue - currentValue) / 20;
let current = currentValue; let current = currentValue;
@@ -699,23 +569,22 @@
} }
// Todo 목록 Ajax 업데이트 // Todo 목록 Ajax 업데이트
function updateTodoList() { async function updateTodoList() {
showLoading(); showLoading();
fetch('/Todo/GetUrgentTodos') try {
.then(response => response.json()) const jsonData = await machine.GetUrgentTodos();
.then(data => { const data = JSON.parse(jsonData);
if (data.Success && data.Data) {
displayTodoList(data.Data); if (data.Success && data.Data) {
} else { displayTodoList(data.Data);
displayTodoList([]); } else {
}
hideLoading();
})
.catch(error => {
console.error('Todo 목록 업데이트 중 오류 발생:', error);
displayTodoList([]); displayTodoList([]);
hideLoading(); }
}); } catch (error) {
console.error('Todo 목록 업데이트 중 오류 발생:', error);
displayTodoList([]);
}
hideLoading();
} }
// Todo 목록 표시 // Todo 목록 표시
@@ -763,7 +632,7 @@
<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> <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> </svg>
<p class="text-sm">할일이 없습니다</p> <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 onclick="window.location.href='/Todo/index.html'" class="text-primary-400 hover:text-primary-300 text-xs transition-colors mt-1 inline-block">
할일 추가하기 → 할일 추가하기 →
</button> </button>
</div> </div>
@@ -795,28 +664,27 @@
// Todo 페이지로 이동 // Todo 페이지로 이동
function goToTodoPage() { function goToTodoPage() {
window.location.href = '/Todo/'; window.location.href = '/Todo/index.html';
} }
// 할일 상세 정보 표시 // 할일 상세 정보 표시
function showTodoDetail(todoId) { async function showTodoDetail(todoId) {
showLoading(); showLoading();
fetch(`/Todo/GetTodo?id=${todoId}`) try {
.then(response => response.json()) const jsonData = await machine.GetTodo(todoId);
.then(data => { const data = JSON.parse(jsonData);
if (data.Success && data.Data) {
displayTodoDetail(data.Data); if (data.Success && data.Data) {
document.getElementById('todoDetailModal').classList.remove('hidden'); displayTodoDetail(data.Data);
} else { document.getElementById('todoDetailModal').classList.remove('hidden');
showError('할일 정보를 불러올 수 없습니다.'); } else {
} showError('할일 정보를 불러올 수 없습니다.');
hideLoading(); }
}) } catch (error) {
.catch(error => { console.error('할일 상세 정보 로드 중 오류 발생:', error);
console.error('할일 상세 정보 로드 중 오류 발생:', error); showError('할일 정보를 불러오는 중 오류가 발생했습니다.');
showError('할일 정보를 불러오는 중 오류가 발생했습니다.'); }
hideLoading(); hideLoading();
});
} }
// 할일 상세 정보를 모달에 표시 // 할일 상세 정보를 모달에 표시
@@ -867,7 +735,7 @@
// 할일 상세 정보에서 Todo 페이지로 이동 // 할일 상세 정보에서 Todo 페이지로 이동
function goToTodoPageFromDetail() { function goToTodoPageFromDetail() {
hideTodoDetailModal(); hideTodoDetailModal();
window.location.href = '/Todo/'; window.location.href = '/Todo/index.html';
} }
// 간단한 에러 표시 함수 // 간단한 에러 표시 함수
@@ -915,32 +783,25 @@
} }
// 대시보드에서 할일 추가 // 대시보드에서 할일 추가
function addDashboardTodo() { async function addDashboardTodo() {
const formData = { const title = document.getElementById('dashboardTodoTitle').value;
title: document.getElementById('dashboardTodoTitle').value, const remark = document.getElementById('dashboardTodoRemark').value;
remark: document.getElementById('dashboardTodoRemark').value, const expire = document.getElementById('dashboardTodoExpire').value || '';
expire: document.getElementById('dashboardTodoExpire').value || null, const seqno = parseInt(document.getElementById('dashboardTodoSeqno').value) || 0;
seqno: parseInt(document.getElementById('dashboardTodoSeqno').value), const flag = document.getElementById('dashboardTodoFlag').checked;
flag: document.getElementById('dashboardTodoFlag').checked, const request = document.getElementById('dashboardTodoRequest').value || '';
request: document.getElementById('dashboardTodoRequest').value || null, const status = document.getElementById('dashboardTodoStatus').value || '0';
status: document.getElementById('dashboardTodoStatus').value
};
if (!formData.remark.trim()) { if (!remark.trim()) {
showError('할일 내용을 입력해주세요.'); showError('할일 내용을 입력해주세요.');
return; return;
} }
showLoading(); showLoading();
fetch('/Todo/CreateTodo', { try {
method: 'POST', const jsonData = await machine.CreateTodo(title, remark, expire, seqno, flag, request, status);
headers: { const data = JSON.parse(jsonData);
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
if (data.Success) { if (data.Success) {
hideDashboardAddTodoModal(); hideDashboardAddTodoModal();
updateTodoList(); // 대시보드 할일 목록 새로고침 updateTodoList(); // 대시보드 할일 목록 새로고침
@@ -948,33 +809,30 @@
} else { } else {
showError(data.Message || '할일 추가에 실패했습니다.'); showError(data.Message || '할일 추가에 실패했습니다.');
} }
hideLoading(); } catch (error) {
})
.catch(error => {
console.error('할일 추가 중 오류:', error); console.error('할일 추가 중 오류:', error);
showError('서버 연결에 실패했습니다.'); showError('서버 연결에 실패했습니다.');
hideLoading(); }
}); hideLoading();
} }
// Todo 목록 업데이트 // Todo 목록 업데이트 (중복 함수 - 이미 위에서 정의됨, displayUrgentTodos 호출용으로 유지)
function updateTodoList() { async function updateTodoListUrgent() {
showLoading(); showLoading();
fetch('/Todo/GetUrgentTodos') try {
.then(response => response.json()) const jsonData = await machine.GetUrgentTodos();
.then(data => { const data = JSON.parse(jsonData);
if (data.Success && data.Data) {
displayUrgentTodos(data.Data); if (data.Success && data.Data) {
} else { displayUrgentTodos(data.Data);
displayEmptyTodos(); } else {
}
hideLoading();
})
.catch(error => {
console.error('급한 할일 목록 업데이트 중 오류 발생:', error);
displayEmptyTodos(); displayEmptyTodos();
hideLoading(); }
}); } catch (error) {
console.error('급한 할일 목록 업데이트 중 오류 발생:', error);
displayEmptyTodos();
}
hideLoading();
} }
// 급한 할일 목록 표시 // 급한 할일 목록 표시
@@ -1069,21 +927,13 @@
} }
// 페이지 로드 시 데이터 업데이트 // 페이지 로드 시 데이터 업데이트
updateLeaveCount();
updateHolidayList();
updatePurchaseCount(); updatePurchaseCount();
updateHolydayRequestCount();
updateCurrentUserCount();
updateTodoList(); updateTodoList();
// 30초마다 데이터 새로고침 // 30초마다 데이터 새로고침
setInterval(() => { setInterval(() => {
updateLeaveCount();
updateHolidayList();
updatePurchaseCount(); updatePurchaseCount();
updateHolydayRequestCount();
updateCurrentUserCount();
updateTodoList(); updateTodoList();
}, 30000); }, 30000);
@@ -1103,77 +953,9 @@
// 공통 네비게이션 초기화 // 공통 네비게이션 초기화
initNavigation('dashboard'); initNavigation('dashboard');
// 출근 대상자 모달 표시
function showPresentUserModal() {
document.getElementById('presentUserModal').classList.remove('hidden');
loadPresentUserList();
}
// 출근 대상자 모달 숨기기
function hidePresentUserModal() {
document.getElementById('presentUserModal').classList.add('hidden');
}
// 출근 대상자 목록 로드
function loadPresentUserList() {
showLoading();
fetch('/DashBoard/GetPresentUserList')
.then(response => response.json())
.then(data => {
let tableRows = '';
if (data && data.length > 0) {
data.forEach(item => {
const statusClass = item.useUserState == 1 ? 'bg-success-500/20 text-success-300' : 'bg-danger-500/20 text-danger-300';
const statusText = item.useUserState == 1 ? '활성' : '비활성';
tableRows += `
<tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4 whitespace-nowrap text-white">${item.id || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-white">${item.name || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.processs || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.grade || '-'}</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 ${statusClass}">
${statusText}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.email || '-'}</td>
</tr>
`;
});
document.getElementById('presentUserCount').textContent = data.length;
} else {
tableRows = `
<tr>
<td colspan="5" class="px-6 py-8 text-center text-white/50">
출근 대상자가 없습니다
</td>
</tr>
`;
document.getElementById('presentUserCount').textContent = '0';
}
document.getElementById('presentUserTable').innerHTML = tableRows;
hideLoading();
})
.catch(error => {
console.error('출근 대상자 목록 로드 중 오류 발생:', error);
document.getElementById('presentUserTable').innerHTML = `
<tr>
<td colspan="5" class="px-6 py-8 text-center text-danger-400">
데이터를 불러오는 중 오류가 발생했습니다
</td>
</tr>
`;
document.getElementById('presentUserCount').textContent = '0';
hideLoading();
});
}
// ESC 키로 모달 닫기 // ESC 키로 모달 닫기
document.addEventListener('keydown', function(event) { document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') { if (event.key === 'Escape') {
hidePresentUserModal();
hideHolidayRequestModal();
hidePurchaseNRModal(); hidePurchaseNRModal();
hidePurchaseCRModal(); hidePurchaseCRModal();
hideTodoDetailModal(); hideTodoDetailModal();
@@ -1181,103 +963,6 @@
} }
}); });
// 모달 외부 클릭으로 닫기
document.getElementById('presentUserModal').addEventListener('click', function(event) {
if (event.target === this) {
hidePresentUserModal();
}
});
// 휴가요청 모달 표시
function showHolidayRequestModal() {
document.getElementById('holidayRequestModal').classList.remove('hidden');
loadHolidayRequestList();
}
// 휴가요청 모달 숨기기
function hideHolidayRequestModal() {
document.getElementById('holidayRequestModal').classList.add('hidden');
}
// 휴가요청 목록 로드
function loadHolidayRequestList() {
showLoading();
fetch('/DashBoard/GetholyRequestUser')
.then(response => response.json())
.then(data => {
let tableRows = '';
if (data && data.length > 0) {
data.forEach(item => {
// 일자 포맷팅 (시작일 ~ 종료일)
const startDate = item.sdate ? new Date(item.sdate).toLocaleDateString('ko-KR') : '-';
const endDate = item.edate ? new Date(item.edate).toLocaleDateString('ko-KR') : '-';
const dateRange = startDate !== '-' && endDate !== '-' ? `${startDate} ~ ${endDate}` : '-';
// 요청일 포맷팅 (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 ${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.holytimes || '-'}</td>
<td class="px-6 py-4 text-white/80">${item.HolyReason || '-'}</td>
</tr>
`;
});
document.getElementById('holidayRequestCount').textContent = data.length;
} else {
tableRows = `
<tr>
<td colspan="7" class="px-6 py-8 text-center text-white/50">
휴가 신청이 없습니다
</td>
</tr>
`;
document.getElementById('holidayRequestCount').textContent = '0';
}
document.getElementById('holidayRequestTable').innerHTML = tableRows;
hideLoading();
})
.catch(error => {
console.error('휴가요청 목록 로드 중 오류 발생:', error);
document.getElementById('holidayRequestTable').innerHTML = `
<tr>
<td colspan="7" class="px-6 py-8 text-center text-danger-400">
데이터를 불러오는 중 오류가 발생했습니다
</td>
</tr>
`;
document.getElementById('holidayRequestCount').textContent = '0';
hideLoading();
});
}
// 휴가요청 모달 외부 클릭으로 닫기
document.getElementById('holidayRequestModal').addEventListener('click', function(event) {
if (event.target === this) {
hideHolidayRequestModal();
}
});
// 구매NR 모달 표시 // 구매NR 모달 표시
function showPurchaseNRModal() { function showPurchaseNRModal() {
document.getElementById('purchaseNRModal').classList.remove('hidden'); document.getElementById('purchaseNRModal').classList.remove('hidden');
@@ -1290,60 +975,59 @@
} }
// 구매NR 목록 로드 // 구매NR 목록 로드
function loadPurchaseNRList() { async function loadPurchaseNRList() {
showLoading(); showLoading();
fetch('/DashBoard/GetPurchaseNRList') try {
.then(response => response.json()) const jsonData = await machine.GetPurchaseNRList();
.then(data => { const data = JSON.parse(jsonData);
let tableRows = '';
if (data && data.length > 0) {
data.forEach(item => {
// 요청일 포맷팅
const requestDate = item.pdate ? new Date(item.pdate).toLocaleDateString('ko-KR') : '-';
// 금액 포맷팅 (천 단위 콤마) let tableRows = '';
const amount = item.pumamt ? Number(item.pumamt).toLocaleString() : '-'; if (data && data.length > 0) {
const price = item.pumprice ? Number(item.pumprice).toLocaleString() : '-'; data.forEach(item => {
// 요청일 포맷팅
const requestDate = item.pdate ? new Date(item.pdate).toLocaleDateString('ko-KR') : '-';
tableRows += ` // 금액 포맷팅 (천 단위 콤마)
<tr class="hover:bg-white/5 transition-colors"> const amount = item.pumamt ? Number(item.pumamt).toLocaleString() : '-';
<td class="px-6 py-4 whitespace-nowrap text-white/80">${requestDate}</td> const price = item.pumprice ? Number(item.pumprice).toLocaleString() : '-';
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.process || '-'}</td>
<td class="px-6 py-4 text-white">${item.pumname || '-'}</td> tableRows += `
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumscale || '-'}</td> <tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumunit || '-'}</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.pumqtyreq || '-'}</td> <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.process || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${price}</td> <td class="px-6 py-4 text-white">${item.pumname || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-white font-medium">${amount}</td> <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumscale || '-'}</td>
</tr> <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumunit || '-'}</td>
`; <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumqtyreq || '-'}</td>
}); <td class="px-6 py-4 whitespace-nowrap text-white/80">${price}</td>
document.getElementById('purchaseNRCount').textContent = data.length; <td class="px-6 py-4 whitespace-nowrap text-white font-medium">${amount}</td>
} else {
tableRows = `
<tr>
<td colspan="8" class="px-6 py-8 text-center text-white/50">
구매요청이 없습니다
</td>
</tr> </tr>
`; `;
document.getElementById('purchaseNRCount').textContent = '0'; });
} document.getElementById('purchaseNRCount').textContent = data.length;
document.getElementById('purchaseNRTable').innerHTML = tableRows; } else {
hideLoading(); tableRows = `
})
.catch(error => {
console.error('구매NR 목록 로드 중 오류 발생:', error);
document.getElementById('purchaseNRTable').innerHTML = `
<tr> <tr>
<td colspan="8" class="px-6 py-8 text-center text-danger-400"> <td colspan="8" class="px-6 py-8 text-center text-white/50">
데이터를 불러오는 중 오류가 발생했습니다 구매요청이 없습니다
</td> </td>
</tr> </tr>
`; `;
document.getElementById('purchaseNRCount').textContent = '0'; document.getElementById('purchaseNRCount').textContent = '0';
hideLoading(); }
}); document.getElementById('purchaseNRTable').innerHTML = tableRows;
} catch (error) {
console.error('구매NR 목록 로드 중 오류 발생:', error);
document.getElementById('purchaseNRTable').innerHTML = `
<tr>
<td colspan="8" class="px-6 py-8 text-center text-danger-400">
데이터를 불러오는 중 오류가 발생했습니다
</td>
</tr>
`;
document.getElementById('purchaseNRCount').textContent = '0';
}
hideLoading();
} }
// 구매NR 모달 외부 클릭으로 닫기 // 구매NR 모달 외부 클릭으로 닫기
@@ -1365,60 +1049,59 @@
} }
// 구매CR 목록 로드 // 구매CR 목록 로드
function loadPurchaseCRList() { async function loadPurchaseCRList() {
showLoading(); showLoading();
fetch('/DashBoard/GetPurchaseCRList') try {
.then(response => response.json()) const jsonData = await machine.GetPurchaseCRList();
.then(data => { const data = JSON.parse(jsonData);
let tableRows = '';
if (data && data.length > 0) {
data.forEach(item => {
// 요청일 포맷팅
const requestDate = item.pdate ? new Date(item.pdate).toLocaleDateString('ko-KR') : '-';
// 금액 포맷팅 (천 단위 콤마) let tableRows = '';
const amount = item.pumamt ? Number(item.pumamt).toLocaleString() : '-'; if (data && data.length > 0) {
const price = item.pumprice ? Number(item.pumprice).toLocaleString() : '-'; data.forEach(item => {
// 요청일 포맷팅
const requestDate = item.pdate ? new Date(item.pdate).toLocaleDateString('ko-KR') : '-';
tableRows += ` // 금액 포맷팅 (천 단위 콤마)
<tr class="hover:bg-white/5 transition-colors"> const amount = item.pumamt ? Number(item.pumamt).toLocaleString() : '-';
<td class="px-6 py-4 whitespace-nowrap text-white/80">${requestDate}</td> const price = item.pumprice ? Number(item.pumprice).toLocaleString() : '-';
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.process || '-'}</td>
<td class="px-6 py-4 text-white">${item.pumname || '-'}</td> tableRows += `
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumscale || '-'}</td> <tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumunit || '-'}</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.pumqtyreq || '-'}</td> <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.process || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${price}</td> <td class="px-6 py-4 text-white">${item.pumname || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-white font-medium">${amount}</td> <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumscale || '-'}</td>
</tr> <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumunit || '-'}</td>
`; <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.pumqtyreq || '-'}</td>
}); <td class="px-6 py-4 whitespace-nowrap text-white/80">${price}</td>
document.getElementById('purchaseCRCount').textContent = data.length; <td class="px-6 py-4 whitespace-nowrap text-white font-medium">${amount}</td>
} else {
tableRows = `
<tr>
<td colspan="8" class="px-6 py-8 text-center text-white/50">
구매요청이 없습니다
</td>
</tr> </tr>
`; `;
document.getElementById('purchaseCRCount').textContent = '0'; });
} document.getElementById('purchaseCRCount').textContent = data.length;
document.getElementById('purchaseCRTable').innerHTML = tableRows; } else {
hideLoading(); tableRows = `
})
.catch(error => {
console.error('구매CR 목록 로드 중 오류 발생:', error);
document.getElementById('purchaseCRTable').innerHTML = `
<tr> <tr>
<td colspan="8" class="px-6 py-8 text-center text-danger-400"> <td colspan="8" class="px-6 py-8 text-center text-white/50">
데이터를 불러오는 중 오류가 발생했습니다 구매요청이 없습니다
</td> </td>
</tr> </tr>
`; `;
document.getElementById('purchaseCRCount').textContent = '0'; document.getElementById('purchaseCRCount').textContent = '0';
hideLoading(); }
}); document.getElementById('purchaseCRTable').innerHTML = tableRows;
} catch (error) {
console.error('구매CR 목록 로드 중 오류 발생:', error);
document.getElementById('purchaseCRTable').innerHTML = `
<tr>
<td colspan="8" class="px-6 py-8 text-center text-danger-400">
데이터를 불러오는 중 오류가 발생했습니다
</td>
</tr>
`;
document.getElementById('purchaseCRCount').textContent = '0';
}
hideLoading();
} }
// 구매CR 모달 외부 클릭으로 닫기 // 구매CR 모달 외부 클릭으로 닫기

215
Project/Web/wwwroot/Kuntae/index.html
View File

@@ -378,206 +378,17 @@
</div> </div>
</div> </div>
<!-- 공통 네비게이션 -->
<script src="/js/common-navigation.js"></script>
<script> <script>
/**
* 공통 네비게이션 컴포넌트
* 서버에서 메뉴 정보를 받아와서 동적으로 네비게이션을 생성합니다.
*/
class CommonNavigation {
constructor(currentPage = '') {
this.currentPage = currentPage;
this.menuItems = [];
this.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
}
];
}
createNavigation() {
const nav = document.createElement('nav');
nav.className = 'glass-effect border-b border-white/10';
nav.innerHTML = this.getNavigationHTML();
// body의 첫 번째 자식으로 추가
document.body.insertBefore(nav, document.body.firstChild);
}
createFallbackNavigation() {
console.log('Creating fallback navigation...');
this.createNavigation();
}
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 space-x-8">
<a href="/Dashboard/" class="flex items-center space-x-2 hover:opacity-80 transition-opacity cursor-pointer">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-xl font-bold text-white">GroupWare</span>
</a>
<nav class="hidden md:flex space-x-1">
${visibleItems.map(item => `
<a href="${item.url}" class="px-3 py-2 rounded-md text-sm font-medium transition-colors ${
this.currentPage === item.key
? 'bg-white/20 text-white'
: 'text-white/60 hover:text-white hover:bg-white/10'
}">
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
</svg>
${item.title}
</a>
`).join('')}
</nav>
</div>
<div class="flex items-center space-x-4">
<div class="text-sm text-white/60">
<span id="currentUser">사용자</span>
</div>
</div>
</div>
</div>
`;
}
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="${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="${item.icon}"></path>
</svg>
${item.title}
</a>
`;
}
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="${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="${item.icon}"></path>
</svg>
${item.title}
</a>
`;
}
addEventListeners() {
// 모바일 메뉴 토글
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
}
}
}
// 전역 함수로 내비게이션 초기화
function initNavigation(currentPage = '') {
// DOM이 로드된 후에 실행
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new CommonNavigation(currentPage);
});
} else {
new CommonNavigation(currentPage);
}
}
// 전역 변수 // 전역 변수
let currentData = []; let currentData = [];
let currentEditId = null; let currentEditId = null;
// 비동기 프록시 캐싱 (한 번만 초기화)
const machine = window.chrome.webview.hostObjects.machine;
// 페이지 로드 시 초기화 // 페이지 로드 시 초기화
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// 네비게이션 초기화 // 네비게이션 초기화
@@ -650,10 +461,11 @@
showLoading(true); showLoading(true);
try { try {
const response = await axios.get(`/Kuntae/GetList?sd=${startDate}&ed=${endDate}`); const jsonStr = await machine.Kuntae_GetList(startDate, endDate);
const data = JSON.parse(jsonStr);
if (response.data) { if (data) {
currentData = response.data; currentData = data;
renderTable(); renderTable();
updateStatistics(); updateStatistics();
} else { } else {
@@ -958,14 +770,15 @@
const id = document.getElementById('confirmDeleteBtn').getAttribute('data-id'); const id = document.getElementById('confirmDeleteBtn').getAttribute('data-id');
try { try {
const response = await axios.delete(`/Kuntae/Delete/${id}`); const jsonStr = await machine.Kuntae_Delete(id);
const result = JSON.parse(jsonStr);
if (response.data && response.data.success) { if (result && result.success) {
alert('근태가 삭제되었습니다.'); alert('근태가 삭제되었습니다.');
hideDeleteModal(); hideDeleteModal();
loadData(); // 목록 새로고침 loadData(); // 목록 새로고침
} else { } else {
alert(response.data?.message || '삭제 중 오류가 발생했습니다.'); alert(result?.message || '삭제 중 오류가 발생했습니다.');
} }
} catch (error) { } catch (error) {
console.error('삭제 중 오류 발생:', error); console.error('삭제 중 오류 발생:', error);

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

@@ -387,147 +387,34 @@
</div> </div>
</div> </div>
<!-- 공통 네비게이션 -->
<script src="/js/common-navigation.js"></script>
<script> <script>
// 공통 네비게이션 컴포넌트
class CommonNavigation {
constructor(currentPage = '') {
this.currentPage = currentPage;
this.init();
}
init() {
this.createNavigation();
this.addEventListeners();
}
createNavigation() {
const nav = document.createElement('nav');
nav.className = 'glass-effect border-b border-white/10';
nav.innerHTML = this.getNavigationHTML();
// body의 첫 번째 자식으로 추가
document.body.insertBefore(nav, document.body.firstChild);
}
getNavigationHTML() {
const menuItems = [
{ 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' },
{ 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' },
{ 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' },
{ key: 'kuntae', title: '근태관리', url: '/Kuntae/', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' },
{ 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' },
{ key: 'project', title: '프로젝트', url: '/Project/', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' }
];
return `
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<div class="flex items-center space-x-8">
<a href="/Dashboard/" class="flex items-center space-x-2 hover:opacity-80 transition-opacity cursor-pointer">
<svg class="w-8 h-8 text-white" 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 2M12 12l2 2 4-4"></path>
</svg>
<span class="text-xl font-bold text-white">GroupWare</span>
</a>
<nav class="hidden md:flex space-x-1">
${menuItems.map(item => `
<a href="${item.url}" class="px-3 py-2 rounded-md text-sm font-medium transition-colors ${
this.currentPage === item.key
? 'bg-white/20 text-white'
: 'text-white/60 hover:text-white hover:bg-white/10'
}">
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
</svg>
${item.title}
</a>
`).join('')}
</nav>
</div>
<div class="flex items-center space-x-4">
<div class="text-sm text-white/60">
<span id="currentUser">사용자</span>
</div>
</div>
</div>
</div>
`;
}
getMenuItemHTML(pageKey, href, text, svgPath) {
const isActive = this.currentPage === pageKey;
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">
<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>
</svg>
${text}
</a>
`;
}
getMobileMenuItemHTML(pageKey, href, text, svgPath) {
const isActive = this.currentPage === pageKey;
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">
<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>
</svg>
${text}
</a>
`;
}
addEventListeners() {
// 모바일 메뉴 토글
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
}
}
}
// 전역 함수로 내비게이션 초기화
function initNavigation(currentPage = '') {
// DOM이 로드된 후에 실행
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new CommonNavigation(currentPage);
});
} else {
new CommonNavigation(currentPage);
}
}
// Todo 관련 함수들 // Todo 관련 함수들
let currentEditId = null; let currentEditId = null;
// 비동기 프록시 캐싱 (한 번만 초기화)
const machine = window.chrome.webview.hostObjects.machine;
// 할일 목록 로드 // 할일 목록 로드
function loadTodos() { async function loadTodos() {
showLoading(); showLoading();
fetch('/Todo/GetTodos') try {
.then(response => response.json()) const jsonStr = await machine.Todo_GetTodos();
.then(data => { const data = JSON.parse(jsonStr);
if (data.Success) {
displayTodos(data.Data || []); if (data.Success) {
} else { displayTodos(data.Data || []);
showError(data.Message || '할일 목록을 불러올 수 없습니다.'); } else {
} showError(data.Message || '할일 목록을 불러올 수 없습니다.');
hideLoading(); }
}) } catch (error) {
.catch(error => { console.error('할일 목록 로드 중 오류:', error);
console.error('할일 목록 로드 중 오류:', error); showError('서버 연결에 실패했습니다.');
showError('서버 연결에 실패했습니다.'); } finally {
hideLoading(); hideLoading();
}); }
} }
// 할일 목록 표시 (탭별로 분리) // 할일 목록 표시 (탭별로 분리)
@@ -735,35 +622,26 @@
} }
// 편집 모달에서 상태 업데이트 (바로 서버에 반영) // 편집 모달에서 상태 업데이트 (바로 서버에 반영)
function updateTodoStatus(status) { async function updateTodoStatus(status) {
if (!currentEditId) return; if (!currentEditId) return;
const formData = { const title = document.getElementById('editTodoTitle').value;
idx: currentEditId, const remark = document.getElementById('editTodoRemark').value;
title: document.getElementById('editTodoTitle').value, const expire = document.getElementById('editTodoExpire').value || null;
remark: document.getElementById('editTodoRemark').value, const seqno = parseInt(document.getElementById('editTodoSeqno').value);
expire: document.getElementById('editTodoExpire').value || null, const flag = document.getElementById('editTodoFlag').checked;
seqno: parseInt(document.getElementById('editTodoSeqno').value), const request = document.getElementById('editTodoRequest').value || null;
flag: document.getElementById('editTodoFlag').checked,
request: document.getElementById('editTodoRequest').value || null,
status: status
};
if (!formData.remark.trim()) { if (!remark.trim()) {
showError('할일 내용을 입력해주세요.'); showError('할일 내용을 입력해주세요.');
return; return;
} }
showLoading(); showLoading();
fetch('/Todo/UpdateTodo', { try {
method: 'PUT', const jsonStr = await machine.Todo_UpdateTodo(currentEditId, title, remark, expire, seqno, flag, request, status);
headers: { const data = JSON.parse(jsonStr);
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
if (data.Success) { if (data.Success) {
// 목록 새로고침 // 목록 새로고침
loadTodos(); loadTodos();
@@ -779,13 +657,12 @@
} else { } else {
showError(data.Message || '상태 변경에 실패했습니다.'); showError(data.Message || '상태 변경에 실패했습니다.');
} }
hideLoading(); } catch (error) {
})
.catch(error => {
console.error('상태 변경 중 오류:', error); console.error('상태 변경 중 오류:', error);
showError('서버 연결에 실패했습니다.'); showError('서버 연결에 실패했습니다.');
} finally {
hideLoading(); hideLoading();
}); }
} }
// 편집 모달에서 상태 버튼 표시 설정 // 편집 모달에서 상태 버튼 표시 설정
@@ -813,32 +690,25 @@
} }
// 새 할일 추가 // 새 할일 추가
function addTodo() { async function addTodo() {
const formData = { const title = document.getElementById('todoTitle').value;
title: document.getElementById('todoTitle').value, const remark = document.getElementById('todoRemark').value;
remark: document.getElementById('todoRemark').value, const expire = document.getElementById('todoExpire').value || null;
expire: document.getElementById('todoExpire').value || null, const seqno = parseInt(document.getElementById('todoSeqno').value);
seqno: parseInt(document.getElementById('todoSeqno').value), const flag = document.getElementById('todoFlag').checked;
flag: document.getElementById('todoFlag').checked, const request = document.getElementById('todoRequest').value || null;
request: document.getElementById('todoRequest').value || null, const status = document.getElementById('todoStatus').value;
status: document.getElementById('todoStatus').value
};
if (!formData.remark.trim()) { if (!remark.trim()) {
showError('할일 내용을 입력해주세요.'); showError('할일 내용을 입력해주세요.');
return; return;
} }
showLoading(); showLoading();
fetch('/Todo/CreateTodo', { try {
method: 'POST', const jsonStr = await machine.Todo_CreateTodo(title, remark, expire, seqno, flag, request, status);
headers: { const data = JSON.parse(jsonStr);
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
if (data.Success) { if (data.Success) {
hideAddTodoModal(); hideAddTodoModal();
loadTodos(); loadTodos();
@@ -852,82 +722,73 @@
} else { } else {
showError(data.Message || '할일 추가에 실패했습니다.'); showError(data.Message || '할일 추가에 실패했습니다.');
} }
hideLoading(); } catch (error) {
})
.catch(error => {
console.error('할일 추가 중 오류:', error); console.error('할일 추가 중 오류:', error);
showError('서버 연결에 실패했습니다.'); showError('서버 연결에 실패했습니다.');
} finally {
hideLoading(); hideLoading();
}); }
} }
// 할일 수정 모달 표시 // 할일 수정 모달 표시
function editTodo(id) { async function editTodo(id) {
currentEditId = id; currentEditId = id;
showLoading(); showLoading();
fetch(`/Todo/GetTodo?id=${id}`) try {
.then(response => response.json()) const jsonStr = await machine.Todo_GetTodo(id);
.then(data => { const data = JSON.parse(jsonStr);
if (data.Success && data.Data) {
const todo = data.Data;
document.getElementById('editTodoId').value = todo.idx;
document.getElementById('editTodoTitle').value = todo.title || '';
document.getElementById('editTodoRemark').value = todo.remark || '';
document.getElementById('editTodoSeqno').value = todo.seqno || 0;
document.getElementById('editTodoFlag').checked = todo.flag || false;
document.getElementById('editTodoRequest').value = todo.request || '';
setEditTodoStatus(todo.status || '0');
// 날짜 포맷 변환 if (data.Success && data.Data) {
if (todo.expire) { const todo = data.Data;
const expireDate = new Date(todo.expire); document.getElementById('editTodoId').value = todo.idx;
document.getElementById('editTodoExpire').value = expireDate.toISOString().split('T')[0]; document.getElementById('editTodoTitle').value = todo.title || '';
} else { document.getElementById('editTodoRemark').value = todo.remark || '';
document.getElementById('editTodoExpire').value = ''; document.getElementById('editTodoSeqno').value = todo.seqno || 0;
} document.getElementById('editTodoFlag').checked = todo.flag || false;
document.getElementById('editTodoRequest').value = todo.request || '';
setEditTodoStatus(todo.status || '0');
showEditModal(); // 날짜 포맷 변환
if (todo.expire) {
const expireDate = new Date(todo.expire);
document.getElementById('editTodoExpire').value = expireDate.toISOString().split('T')[0];
} else { } else {
showError(data.Message || '할일 정보를 불러올 수 없습니다.'); document.getElementById('editTodoExpire').value = '';
} }
hideLoading();
}) showEditModal();
.catch(error => { } else {
console.error('할일 조회 중 오류:', error); showError(data.Message || '할일 정보를 불러올 수 없습니다.');
showError('서버 연결에 실패했습니다.'); }
hideLoading(); } catch (error) {
}); console.error('할일 조회 중 오류:', error);
showError('서버 연결에 실패했습니다.');
} finally {
hideLoading();
}
} }
// 할일 수정 // 할일 수정
function updateTodo() { async function updateTodo() {
const formData = { const title = document.getElementById('editTodoTitle').value;
idx: currentEditId, const remark = document.getElementById('editTodoRemark').value;
title: document.getElementById('editTodoTitle').value, const expire = document.getElementById('editTodoExpire').value || null;
remark: document.getElementById('editTodoRemark').value, const seqno = parseInt(document.getElementById('editTodoSeqno').value);
expire: document.getElementById('editTodoExpire').value || null, const flag = document.getElementById('editTodoFlag').checked;
seqno: parseInt(document.getElementById('editTodoSeqno').value), const request = document.getElementById('editTodoRequest').value || null;
flag: document.getElementById('editTodoFlag').checked, const status = document.getElementById('editTodoStatus').value;
request: document.getElementById('editTodoRequest').value || null,
status: document.getElementById('editTodoStatus').value
};
if (!formData.remark.trim()) { if (!remark.trim()) {
showError('할일 내용을 입력해주세요.'); showError('할일 내용을 입력해주세요.');
return; return;
} }
showLoading(); showLoading();
fetch('/Todo/UpdateTodo', { try {
method: 'PUT', const jsonStr = await machine.Todo_UpdateTodo(currentEditId, title, remark, expire, seqno, flag, request, status);
headers: { const data = JSON.parse(jsonStr);
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
if (data.Success) { if (data.Success) {
hideEditModal(); hideEditModal();
loadTodos(); loadTodos();
@@ -941,27 +802,25 @@
} else { } else {
showError(data.Message || '할일 수정에 실패했습니다.'); showError(data.Message || '할일 수정에 실패했습니다.');
} }
hideLoading(); } catch (error) {
})
.catch(error => {
console.error('할일 수정 중 오류:', error); console.error('할일 수정 중 오류:', error);
showError('서버 연결에 실패했습니다.'); showError('서버 연결에 실패했습니다.');
} finally {
hideLoading(); hideLoading();
}); }
} }
// 할일 삭제 // 할일 삭제
function deleteTodo(id) { async function deleteTodo(id) {
if (!confirm('정말로 이 할일을 삭제하시겠습니까?')) { if (!confirm('정말로 이 할일을 삭제하시겠습니까?')) {
return; return;
} }
showLoading(); showLoading();
fetch(`/Todo/DeleteTodo?id=${id}`, { try {
method: 'DELETE' const jsonStr = await machine.Todo_DeleteTodo(id);
}) const data = JSON.parse(jsonStr);
.then(response => response.json())
.then(data => {
if (data.Success) { if (data.Success) {
loadTodos(); loadTodos();
// 현재 탭 상태 유지 // 현재 탭 상태 유지
@@ -974,13 +833,12 @@
} else { } else {
showError(data.Message || '할일 삭제에 실패했습니다.'); showError(data.Message || '할일 삭제에 실패했습니다.');
} }
hideLoading(); } catch (error) {
})
.catch(error => {
console.error('할일 삭제 중 오류:', error); console.error('할일 삭제 중 오류:', error);
showError('서버 연결에 실패했습니다.'); showError('서버 연결에 실패했습니다.');
} finally {
hideLoading(); hideLoading();
}); }
} }
// 새 할일 추가 모달 표시/숨기기 // 새 할일 추가 모달 표시/숨기기

16
Project/Web/wwwroot/js/common-navigation.js
View File

@@ -21,19 +21,19 @@ class CommonNavigation {
getNavigationHTML() { getNavigationHTML() {
const menuItems = [ const menuItems = [
{ 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' }, { key: 'dashboard', title: '대시보드', url: '/DashBoard/index.html', 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' },
{ 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' }, { key: 'common', title: '공용코드', url: '/Common.html', 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' },
{ 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' }, { key: 'jobreport', title: '업무일지', url: '/Jobreport/index.html', 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' },
{ key: 'kuntae', title: '근태관리', url: '/Kuntae/', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' }, { key: 'kuntae', title: '근태관리', url: '/Kuntae/index.html', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' },
{ 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' }, { key: 'todo', title: '할일관리', url: '/Todo/index.html', 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' },
{ key: 'project', title: '프로젝트', url: '/Project/', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' } { key: 'project', title: '프로젝트', url: '/Project/index.html', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' }
]; ];
return ` return `
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16"> <div class="flex items-center justify-between h-16">
<div class="flex items-center space-x-8"> <div class="flex items-center space-x-8">
<a href="/Dashboard/" class="flex items-center space-x-2 hover:opacity-80 transition-opacity cursor-pointer"> <a href="/DashBoard/index.html" onclick="console.log('[NAV CLICK] logo clicked at', new Date().toISOString())" class="flex items-center space-x-2 hover:opacity-80 transition-opacity cursor-pointer">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8 text-white" 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 2M12 12l2 2 4-4"></path> <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 2M12 12l2 2 4-4"></path>
</svg> </svg>
@@ -41,7 +41,7 @@ class CommonNavigation {
</a> </a>
<nav class="hidden md:flex space-x-1"> <nav class="hidden md:flex space-x-1">
${menuItems.map(item => ` ${menuItems.map(item => `
<a href="${item.url}" class="px-3 py-2 rounded-md text-sm font-medium transition-colors ${ <a href="${item.url}" onclick="console.log('[NAV CLICK] ${item.key} clicked at', new Date().toISOString(), 'navigating to:', '${item.url}')" class="px-3 py-2 rounded-md text-sm font-medium transition-colors ${
this.currentPage === item.key this.currentPage === item.key
? 'bg-white/20 text-white' ? 'bg-white/20 text-white'
: 'text-white/60 hover:text-white hover:bg-white/10' : 'text-white/60 hover:text-white hover:bg-white/10'

165
Project/Web/wwwroot/login.html
View File

@@ -262,6 +262,9 @@
</div> </div>
<script> <script>
// 비동기 프록시 캐싱 (한 번만 초기화)
const machine = window.chrome.webview.hostObjects.machine;
// 폼 제출 처리 // 폼 제출 처리
document.getElementById('loginForm').addEventListener('submit', function(e) { document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault(); e.preventDefault();
@@ -279,48 +282,42 @@
// 로딩 표시 // 로딩 표시
showLoading(); showLoading();
// HomeController의 로그인 API 호출 // WebView2 HostObject를 통해 C# Login 함수 호출
fetch('/Home/Login', { (async () => {
method: 'POST', try {
headers: { const jsonResult = await machine.Login(gcode, userId, password, rememberMe);
'Content-Type': 'application/json', const data = JSON.parse(jsonResult);
},
body: JSON.stringify({
Gcode: gcode,
UserId: userId,
Password: password,
RememberMe: rememberMe
})
})
.then(response => response.json())
.then(data => {
hideLoading();
if (data.Success) { hideLoading();
// 로그인 성공
showSuccess(data.Message);
// WebView2에 로그인 성공 메시지 전송 if (data.Success) {
if (window.chrome && window.chrome.webview) { // 로그인 성공
window.chrome.webview.postMessage('LOGIN_SUCCESS'); showSuccess(data.Message);
}
// 리다이렉트 URL이 있으면 이동 // 버전 경고가 있으면 표시
if (data.RedirectUrl) { if (data.VersionWarning) {
alert(data.VersionWarning);
}
// WebView2에 로그인 성공 메시지 전송
if (window.chrome && window.chrome.webview) {
window.chrome.webview.postMessage('LOGIN_SUCCESS');
}
// 리다이렉트 URL이 있으면 이동, 없으면 대시보드로 이동
setTimeout(() => { setTimeout(() => {
window.location.href = data.RedirectUrl; window.location.href = data.RedirectUrl || '/DashBoard/index.html';
}, 1000); }, 1000);
} else {
// 로그인 실패
showError(data.Message || '로그인에 실패했습니다.');
} }
} else { } catch (error) {
// 로그인 실패 hideLoading();
showError(data.Message || '로그인에 실패했습니다.'); console.error('로그인 요청 중 오류 발생:', error);
showError('서버 연결에 실패했습니다. 다시 시도해주세요.');
} }
}) })();
.catch(error => {
hideLoading();
console.error('로그인 요청 중 오류 발생:', error);
showError('서버 연결에 실패했습니다. 다시 시도해주세요.');
});
}); });
// 입력 필드 포커스 효과 // 입력 필드 포커스 효과
@@ -372,71 +369,73 @@
} }
// 그룹 목록 로드 // 그룹 목록 로드
function loadUserGroups() { async function loadUserGroups() {
fetch('/DashBoard/GetUserGroups') try {
.then(response => response.json()) // WebView2 HostObject를 통해 C# 함수 호출
.then(data => { const machine = window.chrome.webview.hostObjects.machine;
const gcodeSelect = document.getElementById('gcode'); const jsonData = await machine.GetUserGroups();
const data = JSON.parse(jsonData);
// 기존 옵션 제거 (첫 번째 옵션 제외) const gcodeSelect = document.getElementById('gcode');
while (gcodeSelect.children.length > 1) {
gcodeSelect.removeChild(gcodeSelect.lastChild); // 기존 옵션 제거 (첫 번째 옵션 제외)
while (gcodeSelect.children.length > 1) {
gcodeSelect.removeChild(gcodeSelect.lastChild);
}
// 데이터 추가
data.forEach(group => {
if (group.gcode && group.name) {
const option = document.createElement('option');
option.value = group.gcode;
option.textContent = group.name;
option.className = 'text-gray-800';
gcodeSelect.appendChild(option);
} }
// 데이터 추가
data.forEach(group => {
if (group.gcode && group.name) {
const option = document.createElement('option');
option.value = group.gcode;
option.textContent = group.name;
option.className = 'text-gray-800';
gcodeSelect.appendChild(option);
}
});
// 이전 로그인 정보 설정
setPreviousLoginInfo();
})
.catch(error => {
console.error('그룹 목록 로드 중 오류 발생:', error);
showError('부서 목록을 불러오는 중 오류가 발생했습니다.');
}); });
// 이전 로그인 정보 설정
setPreviousLoginInfo();
} catch (error) {
console.error('그룹 목록 로드 중 오류 발생:', error);
showError('부서 목록을 불러오는 중 오류가 발생했습니다.');
}
} }
// 이전 로그인 정보 설정 // 이전 로그인 정보 설정
function setPreviousLoginInfo() { async function setPreviousLoginInfo() {
// HomeController의 GetPreviousLoginInfo API 호출 try {
fetch('/Home/GetPreviousLoginInfo') // WebView2 HostObject를 통해 C# GetPreviousLoginInfo 함수 호출
.then(response => response.json()) const machine = window.chrome.webview.hostObjects.machine;
.then(data => { const jsonResult = await machine.GetPreviousLoginInfo();
if (data.Success && data.Data) { const data = JSON.parse(jsonResult);
handlePreviousLoginInfo(data.Data);
} if (data.Success && data.Data) {
}) handlePreviousLoginInfo(data.Data);
.catch(error => { }
console.error('이전 로그인 정보 로드 중 오류 발생:', error); } catch (error) {
// 오류가 발생해도 기본 포커스 설정 console.error('이전 로그인 정보 로드 중 오류 발생:', error);
setTimeout(() => { // 오류가 발생해도 기본 포커스 설정
document.getElementById('gcode').focus(); setTimeout(() => {
}, 100); document.getElementById('gcode').focus();
}); }, 100);
}
} }
// 이전 로그인 정보 처리 // 이전 로그인 정보 처리
function handlePreviousLoginInfo(data) { function handlePreviousLoginInfo(data) {
let hasPreviousInfo = false; let hasPreviousInfo = false;
if (data && data.Gcode) { if (data && data.LastGcode) {
// 부서 선택 // 부서 선택
const gcodeSelect = document.getElementById('gcode'); const gcodeSelect = document.getElementById('gcode');
gcodeSelect.value = data.Gcode; gcodeSelect.value = data.LastGcode;
hasPreviousInfo = true; hasPreviousInfo = true;
} }
if (data && data.UserId) { if (data && data.LastId) {
// 사용자 ID 설정 - 세미콜론으로 구분된 경우 첫 번째 요소만 사용 // 사용자 ID 설정
const userId = data.UserId.split(';')[0]; document.getElementById('userId').value = data.LastId;
document.getElementById('userId').value = userId;
hasPreviousInfo = true; hasPreviousInfo = true;
} }