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

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

@@ -387,147 +387,34 @@
</div>
</div>
<!-- 공통 네비게이션 -->
<script src="/js/common-navigation.js"></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 관련 함수들
let currentEditId = null;
// 비동기 프록시 캐싱 (한 번만 초기화)
const machine = window.chrome.webview.hostObjects.machine;
// 할일 목록 로드
function loadTodos() {
async function loadTodos() {
showLoading();
fetch('/Todo/GetTodos')
.then(response => response.json())
.then(data => {
if (data.Success) {
displayTodos(data.Data || []);
} else {
showError(data.Message || '할일 목록을 불러올 수 없습니다.');
}
hideLoading();
})
.catch(error => {
console.error('할일 목록 로드 중 오류:', error);
showError('서버 연결에 실패했습니다.');
hideLoading();
});
try {
const jsonStr = await machine.Todo_GetTodos();
const data = JSON.parse(jsonStr);
if (data.Success) {
displayTodos(data.Data || []);
} else {
showError(data.Message || '할일 목록을 불러올 수 없습니다.');
}
} catch (error) {
console.error('할일 목록 로드 중 오류:', error);
showError('서버 연결에 실패했습니다.');
} finally {
hideLoading();
}
}
// 할일 목록 표시 (탭별로 분리)
@@ -735,35 +622,26 @@
}
// 편집 모달에서 상태 업데이트 (바로 서버에 반영)
function updateTodoStatus(status) {
async function updateTodoStatus(status) {
if (!currentEditId) return;
const formData = {
idx: currentEditId,
title: document.getElementById('editTodoTitle').value,
remark: document.getElementById('editTodoRemark').value,
expire: document.getElementById('editTodoExpire').value || null,
seqno: parseInt(document.getElementById('editTodoSeqno').value),
flag: document.getElementById('editTodoFlag').checked,
request: document.getElementById('editTodoRequest').value || null,
status: status
};
if (!formData.remark.trim()) {
const title = document.getElementById('editTodoTitle').value;
const remark = document.getElementById('editTodoRemark').value;
const expire = document.getElementById('editTodoExpire').value || null;
const seqno = parseInt(document.getElementById('editTodoSeqno').value);
const flag = document.getElementById('editTodoFlag').checked;
const request = document.getElementById('editTodoRequest').value || null;
if (!remark.trim()) {
showError('할일 내용을 입력해주세요.');
return;
}
showLoading();
fetch('/Todo/UpdateTodo', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
try {
const jsonStr = await machine.Todo_UpdateTodo(currentEditId, title, remark, expire, seqno, flag, request, status);
const data = JSON.parse(jsonStr);
if (data.Success) {
// 목록 새로고침
loadTodos();
@@ -779,13 +657,12 @@
} else {
showError(data.Message || '상태 변경에 실패했습니다.');
}
hideLoading();
})
.catch(error => {
} catch (error) {
console.error('상태 변경 중 오류:', error);
showError('서버 연결에 실패했습니다.');
} finally {
hideLoading();
});
}
}
// 편집 모달에서 상태 버튼 표시 설정
@@ -813,32 +690,25 @@
}
// 새 할일 추가
function addTodo() {
const formData = {
title: document.getElementById('todoTitle').value,
remark: document.getElementById('todoRemark').value,
expire: document.getElementById('todoExpire').value || null,
seqno: parseInt(document.getElementById('todoSeqno').value),
flag: document.getElementById('todoFlag').checked,
request: document.getElementById('todoRequest').value || null,
status: document.getElementById('todoStatus').value
};
async function addTodo() {
const title = document.getElementById('todoTitle').value;
const remark = document.getElementById('todoRemark').value;
const expire = document.getElementById('todoExpire').value || null;
const seqno = parseInt(document.getElementById('todoSeqno').value);
const flag = document.getElementById('todoFlag').checked;
const request = document.getElementById('todoRequest').value || null;
const status = document.getElementById('todoStatus').value;
if (!formData.remark.trim()) {
if (!remark.trim()) {
showError('할일 내용을 입력해주세요.');
return;
}
showLoading();
fetch('/Todo/CreateTodo', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
try {
const jsonStr = await machine.Todo_CreateTodo(title, remark, expire, seqno, flag, request, status);
const data = JSON.parse(jsonStr);
if (data.Success) {
hideAddTodoModal();
loadTodos();
@@ -852,82 +722,73 @@
} else {
showError(data.Message || '할일 추가에 실패했습니다.');
}
hideLoading();
})
.catch(error => {
} catch (error) {
console.error('할일 추가 중 오류:', error);
showError('서버 연결에 실패했습니다.');
} finally {
hideLoading();
});
}
}
// 할일 수정 모달 표시
function editTodo(id) {
async function editTodo(id) {
currentEditId = id;
showLoading();
fetch(`/Todo/GetTodo?id=${id}`)
.then(response => response.json())
.then(data => {
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 (todo.expire) {
const expireDate = new Date(todo.expire);
document.getElementById('editTodoExpire').value = expireDate.toISOString().split('T')[0];
} else {
document.getElementById('editTodoExpire').value = '';
}
showEditModal();
try {
const jsonStr = await machine.Todo_GetTodo(id);
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 (todo.expire) {
const expireDate = new Date(todo.expire);
document.getElementById('editTodoExpire').value = expireDate.toISOString().split('T')[0];
} else {
showError(data.Message || '할일 정보를 불러올 수 없습니다.');
document.getElementById('editTodoExpire').value = '';
}
hideLoading();
})
.catch(error => {
console.error('할일 조회 중 오류:', error);
showError('서버 연결에 실패했습니다.');
hideLoading();
});
showEditModal();
} else {
showError(data.Message || '할일 정보를 불러올 수 없습니다.');
}
} catch (error) {
console.error('할일 조회 중 오류:', error);
showError('서버 연결에 실패했습니다.');
} finally {
hideLoading();
}
}
// 할일 수정
function updateTodo() {
const formData = {
idx: currentEditId,
title: document.getElementById('editTodoTitle').value,
remark: document.getElementById('editTodoRemark').value,
expire: document.getElementById('editTodoExpire').value || null,
seqno: parseInt(document.getElementById('editTodoSeqno').value),
flag: document.getElementById('editTodoFlag').checked,
request: document.getElementById('editTodoRequest').value || null,
status: document.getElementById('editTodoStatus').value
};
async function updateTodo() {
const title = document.getElementById('editTodoTitle').value;
const remark = document.getElementById('editTodoRemark').value;
const expire = document.getElementById('editTodoExpire').value || null;
const seqno = parseInt(document.getElementById('editTodoSeqno').value);
const flag = document.getElementById('editTodoFlag').checked;
const request = document.getElementById('editTodoRequest').value || null;
const status = document.getElementById('editTodoStatus').value;
if (!formData.remark.trim()) {
if (!remark.trim()) {
showError('할일 내용을 입력해주세요.');
return;
}
showLoading();
fetch('/Todo/UpdateTodo', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
try {
const jsonStr = await machine.Todo_UpdateTodo(currentEditId, title, remark, expire, seqno, flag, request, status);
const data = JSON.parse(jsonStr);
if (data.Success) {
hideEditModal();
loadTodos();
@@ -941,27 +802,25 @@
} else {
showError(data.Message || '할일 수정에 실패했습니다.');
}
hideLoading();
})
.catch(error => {
} catch (error) {
console.error('할일 수정 중 오류:', error);
showError('서버 연결에 실패했습니다.');
} finally {
hideLoading();
});
}
}
// 할일 삭제
function deleteTodo(id) {
async function deleteTodo(id) {
if (!confirm('정말로 이 할일을 삭제하시겠습니까?')) {
return;
}
showLoading();
fetch(`/Todo/DeleteTodo?id=${id}`, {
method: 'DELETE'
})
.then(response => response.json())
.then(data => {
try {
const jsonStr = await machine.Todo_DeleteTodo(id);
const data = JSON.parse(jsonStr);
if (data.Success) {
loadTodos();
// 현재 탭 상태 유지
@@ -974,13 +833,12 @@
} else {
showError(data.Message || '할일 삭제에 실패했습니다.');
}
hideLoading();
})
.catch(error => {
} catch (error) {
console.error('할일 삭제 중 오류:', error);
showError('서버 연결에 실패했습니다.');
} finally {
hideLoading();
});
}
}
// 새 할일 추가 모달 표시/숨기기