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

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

@@ -298,171 +298,39 @@
</div>
</div>
<!-- 공통 네비게이션 -->
<script src="/js/common-navigation.js"></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 deleteTargetIdx = null;
let groupData = [];
let selectedGroupCode = null;
// 비동기 프록시 캐싱 (한 번만 초기화)
const machine = window.chrome.webview.hostObjects.machine;
// 페이지 로드시 초기 데이터 로드
document.addEventListener('DOMContentLoaded', function() {
loadGroups();
});
// 코드그룹 목록 로드
function loadGroups() {
async function loadGroups() {
showLoading();
fetch('/Common/GetGroups')
.then(response => response.json())
.then(data => {
groupData = data || [];
renderGroupList();
renderEditGroupSelect();
hideLoading();
})
.catch(error => {
console.error('그룹 데이터 로드 중 오류 발생:', error);
hideLoading();
showNotification('그룹 데이터 로드 중 오류가 발생했습니다.', 'error');
});
try {
const jsonStr = await machine.Common_GetGroups();
const data = JSON.parse(jsonStr);
groupData = data || [];
renderGroupList();
renderEditGroupSelect();
hideLoading();
} catch (error) {
console.error('그룹 데이터 로드 중 오류 발생:', error);
hideLoading();
showNotification('그룹 데이터 로드 중 오류가 발생했습니다.', 'error');
}
}
// 좌측 그룹 리스트 렌더링
@@ -516,26 +384,20 @@
}
// 특정 그룹의 데이터 로드
function loadDataByGroup(grp) {
async function loadDataByGroup(grp) {
showLoading();
let url = '/Common/GetList';
if (grp) {
url += '?grp=' + encodeURIComponent(grp);
try {
const jsonStr = await machine.Common_GetList(grp || '99');
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;
showLoading();
fetch('/Common/Delete', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ idx: deleteTargetIdx })
})
.then(response => response.json())
.then(data => {
try {
const jsonStr = await machine.Common_Delete(deleteTargetIdx);
const data = JSON.parse(jsonStr);
hideLoading();
if (data.Success) {
showNotification(data.Message, 'success');
@@ -666,12 +523,11 @@
} else {
showNotification(data.Message, 'error');
}
})
.catch(error => {
} catch (error) {
hideLoading();
console.error('삭제 중 오류 발생:', error);
showNotification('삭제 중 오류가 발생했습니다.', 'error');
});
}
}
// 편집 다이얼로그에서 현재 항목 삭제
@@ -688,35 +544,28 @@
}
// 데이터 저장
function saveData() {
async function saveData() {
const form = document.getElementById('editForm');
if (!form.checkValidity()) {
form.reportValidity();
return;
}
const data = {
idx: parseInt(document.getElementById('editIdx').value) || 0,
grp: document.getElementById('editGrp').value,
code: document.getElementById('editCode').value,
svalue: document.getElementById('editSvalue').value,
ivalue: parseInt(document.getElementById('editIvalue').value) || 0,
fvalue: parseFloat(document.getElementById('editFvalue').value) || 0.0,
svalue2: document.getElementById('editSvalue2').value,
memo: document.getElementById('editMemo').value
};
const idx = parseInt(document.getElementById('editIdx').value) || 0;
const grp = document.getElementById('editGrp').value;
const code = document.getElementById('editCode').value;
const svalue = document.getElementById('editSvalue').value;
const ivalue = parseInt(document.getElementById('editIvalue').value) || 0;
const fvalue = parseFloat(document.getElementById('editFvalue').value) || 0.0;
const svalue2 = document.getElementById('editSvalue2').value;
const memo = document.getElementById('editMemo').value;
showLoading();
fetch('/Common/Save', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
try {
const jsonStr = await machine.Common_Save(idx, grp, code, svalue, ivalue, fvalue, svalue2, memo);
const result = JSON.parse(jsonStr);
hideLoading();
if (result.Success) {
showNotification(result.Message, 'success');
@@ -728,12 +577,11 @@
} else {
showNotification(result.Message, 'error');
}
})
.catch(error => {
} catch (error) {
hideLoading();
console.error('저장 중 오류 발생:', 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');
</script>