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.

update-logs/updates.md

@@ -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.

web-ui/js/component-loader.js

@@ -50,4 +50,4 @@ export async function loadComponent(componentName, containerSelector, domProcess
     console.error(`🔴 '${componentName}' 컴포넌트 로딩 실패:`, error);
     container.innerHTML = `<p>${componentName} 로딩에 실패했습니다. 관리자에게 문의하세요.</p>`;
   }
-}
+}

web-ui/js/config.js

@@ -37,4 +37,4 @@ export const config = {
     // 토큰 만료 확인 주기 (밀리초 단위, 예: 5분)
     tokenRefreshInterval: 5 * 60 * 1000,
   }
-};
+};

web-ui/js/group-leader-dashboard.js

@@ -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}`, {
+    const result = await apiCall(`/attendance/daily-status?date=${currentSelectedDate}`);
-      headers: getAuthHeaders()
-    });
-
-    if (!response.ok) throw new Error('데이터 로드 실패');
-
-    const result = await response.json();
     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 };

web-ui/js/navigation.js

@@ -52,4 +52,4 @@ export function redirectToGroupLeaderDashboard() {
 }
 
 // 필요에 따라 더 많은 리디렉션 함수를 추가할 수 있습니다.
-// export function redirectToUserProfile() { ... }
+// export function redirectToUserProfile() { ... }

web-ui/pages/dashboard/group-leader.html

@@ -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 type="module" src="/js/api-config.js"></script>
-  <script src="/js/auth-check.js" defer></script>
+  <script type="module" src="/js/auth-check.js" defer></script>
-  <script src="/js/modern-dashboard.js?v=10" defer></script>
+  <script type="module" 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/group-leader-dashboard.js?v=1" defer></script>
 </head>
 
 <body>