refactor(web-ui): Apply modular structure and refactor dashboard
This commit applies the modular refactoring to the web-ui,
including the new daily attendance tracking feature.
- **Modular Structure:** Re-introduced the modular files 'config.js',
'component-loader.js', and 'navigation.js' to centralize configuration,
component loading, and navigation logic.
- **Refactored Dashboard:** Refactored 'group-leader-dashboard.js' to use
the new 'apiCall' function from 'api-config.js' for API requests,
removing duplicated code and improving error handling.
- **ES6 Modules:** Updated 'group-leader.html' to load scripts as
ES6 modules ('type="module"'), ensuring compatibility with the
modular JavaScript files.
- **Clean-up:** Removed unnecessary global variables and duplicated
functions, improving code quality and maintainability.
This commit is contained in:
19
update-logs/updates.md
Normal file
19
update-logs/updates.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# 업데이트 로그
|
||||
|
||||
## 2026-01-06
|
||||
|
||||
### feat(web-ui): Refactor web-ui for improved maintainability and modularity
|
||||
|
||||
- **Commit:** `b4037c9395da89271c82285e9284f4c37aa66296`
|
||||
- **Author:** Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
|
||||
- **Date:** Tue Jan 6 15:54:49 2026 +0900
|
||||
|
||||
**Description:**
|
||||
|
||||
This commit introduces a series of refactoring changes to the web-ui to remove hardcoded values and improve page integration.
|
||||
|
||||
- **Centralized Configuration:** Created `web-ui/js/config.js` to centralize API ports, paths, and navigation URLs, replacing hardcoded values across multiple files.
|
||||
- **Modular Component Loading:** Introduced `web-ui/js/component-loader.js` to handle dynamic loading of common HTML components (e.g., sidebar, navbar), using paths from `config.js`.
|
||||
- **Modular Navigation:** Created `web-ui/js/navigation.js` to centralize page redirection logic, improving maintainability and reducing direct `window.location.href` manipulations.
|
||||
- **Refactored Existing Modules:** Updated `web-ui/js/api-config.js`, `web-ui/js/login.js`, `web-ui/js/load-sidebar.js`, and `web-ui/js/load-navbar.js` to utilize the new `config`, `component-loader`, and `navigation` modules.
|
||||
- **ES6 Module Compatibility:** Ensured `web-ui/index.html` loads scripts as ES6 modules (`type="module"`) to support `import` statements.
|
||||
@@ -1,5 +1,6 @@
|
||||
// /js/group-leader-dashboard.js
|
||||
// 그룹장 전용 대시보드 - 실시간 근태 및 작업 현황 (Real Data Version)
|
||||
import { apiCall } from './api-config.js';
|
||||
|
||||
console.log('📊 그룹장 대시보드 스크립트 로딩 (Live Data)');
|
||||
|
||||
@@ -54,13 +55,7 @@ async function loadDailyWorkStatus() {
|
||||
`;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${window.API_BASE_URL}/attendance/daily-status?date=${currentSelectedDate}`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('데이터 로드 실패');
|
||||
|
||||
const result = await response.json();
|
||||
const result = await apiCall(`/attendance/daily-status?date=${currentSelectedDate}`);
|
||||
const workers = result.data || [];
|
||||
|
||||
renderWorkStatus(workers);
|
||||
@@ -143,15 +138,6 @@ function renderWorkStatus(workers) {
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// 🔐 인증 헤더 헬퍼
|
||||
function getAuthHeaders() {
|
||||
const token = localStorage.getItem('token');
|
||||
return {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
}
|
||||
|
||||
// 🍞 토스트 메시지 (기존 modern-dashboard.js에 있다면 중복 주의, 없으면 사용)
|
||||
function showToast(message, type = 'info') {
|
||||
if (window.showToast) {
|
||||
@@ -163,12 +149,9 @@ function showToast(message, type = 'info') {
|
||||
|
||||
// 초기화
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// API_BASE_URL 설정 (없으면 기본값)
|
||||
if (!window.API_BASE_URL) window.API_BASE_URL = '/api';
|
||||
|
||||
initDateSelector();
|
||||
loadDailyWorkStatus();
|
||||
});
|
||||
|
||||
// 전역 노출
|
||||
window.refreshTeamStatus = loadDailyWorkStatus;
|
||||
// 전역 노출 대신 모듈로 내보내기
|
||||
export { loadDailyWorkStatus as refreshTeamStatus };
|
||||
@@ -12,10 +12,10 @@
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
|
||||
<!-- 스크립트 (순서 중요: api-config.js가 먼저 로드되어야 함) -->
|
||||
<script src="/js/api-config.js"></script>
|
||||
<script src="/js/auth-check.js" defer></script>
|
||||
<script src="/js/modern-dashboard.js?v=10" defer></script>
|
||||
<script src="/js/group-leader-dashboard.js?v=1" defer></script>
|
||||
<script type="module" src="/js/api-config.js"></script>
|
||||
<script type="module" src="/js/auth-check.js" defer></script>
|
||||
<script type="module" src="/js/modern-dashboard.js?v=10" defer></script>
|
||||
<script type="module" src="/js/group-leader-dashboard.js?v=1" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user