feat(web-ui): Refactor web-ui for improved maintainability and modularity

This commit introduces a series of refactoring changes to the web-ui
to remove hardcoded values and improve page integration.

- **Centralized Configuration:** Created  to
  centralize API ports, paths, and navigation URLs, replacing
  hardcoded values across multiple files.
- **Modular Component Loading:** Introduced
  to handle dynamic loading of common HTML components (e.g., sidebar, navbar),
  using paths from .
- **Modular Navigation:** Created  to centralize
  page redirection logic, improving maintainability and reducing direct
   manipulations.
- **Refactored Existing Modules:** Updated ,
  , , and
   to utilize the new , ,
  and  modules.
- **ES6 Module Compatibility:** Ensured  loads scripts
  as ES6 modules () to support  statements.

web-ui/js/api-config.js

@@ -1,4 +1,6 @@
 // api-config.js - nginx 프록시 대응 API 설정
+import { config } from './config.js';
+import { redirectToLogin } from './navigation.js';
 
 function getApiBaseUrl() {
   const hostname = window.location.hostname;
@@ -13,8 +15,8 @@ function getApiBaseUrl() {
       hostname === 'localhost' || hostname === '127.0.0.1' || 
       hostname.includes('.local') || hostname.includes('hyungi')) {
     
-    // 현재 웹서버의 도메인/IP를 그대로 사용하되 API 포트(20005)로 직접 연결
-    const baseUrl = `${protocol}//${hostname}:20005/api`;
+    // 현재 웹서버의 도메인/IP를 그대로 사용하되 API 포트(config.api.port)로 직접 연결
+    const baseUrl = `${protocol}//${hostname}:${config.api.port}${config.api.path}`;
     
     console.log('✅ nginx 프록시 사용:', baseUrl);
     return baseUrl;
@@ -22,7 +24,7 @@ function getApiBaseUrl() {
   
   // 🚨 백업: 직접 접근 (nginx 프록시 실패시에만)
   console.warn('⚠️ 직접 API 접근 (백업 모드)');
-  return `${protocol}//${hostname}:20005/api`;
+  return `${protocol}//${hostname}:${config.api.port}${config.api.path}`;
 }
 
 // API 설정
@@ -37,7 +39,7 @@ function ensureAuthenticated() {
   if (!token || token === 'undefined' || token === 'null') {
     console.log('🚨 인증되지 않은 사용자. 로그인 페이지로 이동합니다.');
     clearAuthData(); // 만약을 위해 한번 더 정리
-    window.location.href = '/index.html';
+    redirectToLogin();
     return false; // 이후 코드 실행 방지
   }
   
@@ -46,7 +48,7 @@ function ensureAuthenticated() {
     console.log('🚨 토큰이 만료되었습니다. 로그인 페이지로 이동합니다.');
     clearAuthData();
     alert('세션이 만료되었습니다. 다시 로그인해주세요.');
-    window.location.href = '/index.html';
+    redirectToLogin();
     return false;
   }
   
@@ -108,7 +110,7 @@ async function apiCall(url, method = 'GET', data = null) {
       console.error('🚨 인증 실패: 토큰이 만료되었거나 유효하지 않습니다.');
       clearAuthData();
       alert('세션이 만료되었습니다. 다시 로그인해주세요.');
-      window.location.href = '/index.html';
+      redirectToLogin();
       throw new Error('인증에 실패했습니다.');
     }
 
@@ -193,6 +195,6 @@ setInterval(() => {
     console.log('🚨 주기적 확인: 토큰이 만료되었습니다.');
     clearAuthData();
     alert('세션이 만료되었습니다. 다시 로그인해주세요.');
-    window.location.href = '/index.html';
+    redirectToLogin();
   }
-}, 5 * 60 * 1000); // 5분마다 확인
+}, config.app.tokenRefreshInterval); // 5분마다 확인