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/load-sidebar.js

@@ -1,12 +1,17 @@
 // /js/load-sidebar.js
 import { getUser } from './auth.js';
+import { loadComponent } from './component-loader.js';
 
 /**
- * 사용자 역할에 따라 사이드바 메뉴 항목을 필터링합니다.
+ * 사용자 역할에 따라 사이드바 메뉴 항목을 필터링하는 DOM 프로세서입니다.
  * @param {Document} doc - 파싱된 HTML 문서 객체
- * @param {string} userRole - 현재 사용자의 역할
  */
-function filterSidebarByRole(doc, userRole) {
+function filterSidebarByRole(doc) {
+  const currentUser = getUser();
+  if (!currentUser) return; // 비로그인 상태면 필터링하지 않음
+
+  const userRole = currentUser.role;
+
   // 'system' 역할은 모든 메뉴를 볼 수 있으므로 필터링하지 않음
   if (userRole === 'system') {
     return;
@@ -16,7 +21,7 @@ function filterSidebarByRole(doc, userRole) {
   const roleClassMap = {
     admin: '.admin-only',
     leader: '.leader-only',
-    user: '.user-only', // 또는 'worker-only' 등, sidebar.html에 정의된 클래스에 맞춰야 함
+    user: '.user-only',
     support: '.support-only'
   };
 
@@ -33,35 +38,10 @@ function filterSidebarByRole(doc, userRole) {
   });
 }
 
-
-document.addEventListener('DOMContentLoaded', async () => {
-  const sidebarContainer = document.getElementById('sidebar-container');
-  if (!sidebarContainer) return;
-
-  const currentUser = getUser();
-  if (!currentUser) return; // 비로그인 상태면 사이드바를 로드하지 않음
-
-  try {
-    const response = await fetch('/components/sidebar.html');
-    if (!response.ok) {
-      throw new Error(`사이드바 파일을 불러올 수 없습니다: ${response.statusText}`);
-    }
-    const htmlText = await response.text();
-
-    // 1. 텍스트를 가상 DOM으로 파싱
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(htmlText, 'text/html');
-
-    // 2. DOM에 삽입하기 *전*에 역할에 따라 메뉴 필터링
-    filterSidebarByRole(doc, currentUser.role);
-
-    // 3. 수정 완료된 HTML을 실제 DOM에 삽입
-    sidebarContainer.innerHTML = doc.body.innerHTML;
-
-    console.log('✅ 사이드바 로딩 및 필터링 완료');
-
-  } catch (error) {
-    console.error('🔴 사이드바 로딩 실패:', error);
-    sidebarContainer.innerHTML = '<p>메뉴 로딩 실패</p>';
+// 페이지 로드 시 사이드바를 로드하고 역할에 따라 필터링합니다.
+document.addEventListener('DOMContentLoaded', () => {
+  // 'getUser'를 통해 로그인 상태 확인. 비로그인 시 아무 작업도 하지 않음.
+  if (getUser()) {
+    loadComponent('sidebar', '#sidebar-container', filterSidebarByRole);
   }
 });