feat(frontend): 공통 UI 로더 및 대시보드 구조 개선

- auth-check, load-navbar, load-sidebar 리팩토링
- auth.js 모듈을 활용하여 코드 중복 제거 및 일관성 확보
- DOMParser를 사용하여 컴포넌트 로딩 시 화면 깜빡임 현상 해결
- user-dashboard에 API 연동을 위한 견고한 기반 코드 마련

web-ui/js/user-dashboard.js

@@ -1,31 +1,93 @@
-import { API, getAuthHeaders } from '/js/api-config.js';
+// /js/user-dashboard.js
+import { getUser } from './auth.js';
+import { apiGet } from './api-helper.js'; // 개선된 api-helper를 사용합니다.
 
-// 오늘 일정 로드
+/**
+ * API를 호출하여 오늘의 작업 일정을 불러와 화면에 표시합니다.
+ */
 async function loadTodaySchedule() {
-  // 구현 필요
-  document.getElementById('today-schedule').innerHTML = 
-    '<p>오늘의 작업 일정이 여기에 표시됩니다.</p>';
-}
+  const scheduleContainer = document.getElementById('today-schedule');
+  scheduleContainer.innerHTML = '<p>📅 오늘의 작업 일정을 불러오는 중...</p>';
 
-// 작업 통계 로드
-async function loadWorkStats() {
-  // 구현 필요
-  document.getElementById('work-stats').innerHTML = 
-    '<p>이번 달 작업 시간: 160시간</p>';
-}
-
-// 환영 메시지 개인화
-function personalizeWelcome() {
-  const user = window.currentUser;
-  if (user) {
-    document.getElementById('welcome-message').textContent = 
-      `${user.name}님, 환영합니다!`;
+  try {
+    // 예시: /api/dashboard/today-schedule 엔드포인트에서 데이터를 가져옵니다.
+    // 실제 엔드포인트는 백엔드 구현에 따라 달라질 수 있습니다.
+    const scheduleData = await apiGet('/dashboard/today-schedule');
+    
+    if (scheduleData && scheduleData.length > 0) {
+      const scheduleHtml = scheduleData.map(item => `
+        <div class="schedule-item">
+          <span class="time">${item.time}</span>
+          <span class="task">${item.task_name}</span>
+          <span class="status ${item.status}">${item.status_kor}</span>
+        </div>
+      `).join('');
+      scheduleContainer.innerHTML = scheduleHtml;
+    } else {
+      scheduleContainer.innerHTML = '<p>오늘 예정된 작업이 없습니다.</p>';
+    }
+  } catch (error) {
+    console.error('오늘의 작업 일정 로드 실패:', error);
+    scheduleContainer.innerHTML = '<p class="error">일정 정보를 불러오는 데 실패했습니다.</p>';
   }
 }
 
-// 초기화
-document.addEventListener('DOMContentLoaded', () => {
+/**
+ * API를 호출하여 현재 사용자의 작업 통계를 불러와 화면에 표시합니다.
+ */
+async function loadWorkStats() {
+  const statsContainer = document.getElementById('work-stats');
+  statsContainer.innerHTML = '<p>📈 내 작업 현황을 불러오는 중...</p>';
+  
+  try {
+    // 예시: /api/dashboard/my-stats 엔드포인트에서 데이터를 가져옵니다.
+    const statsData = await apiGet('/dashboard/my-stats');
+
+    if (statsData) {
+      const statsHtml = `
+        <div class="stat-item">
+          <span>이번 주 작업 시간:</span>
+          <strong>${statsData.weekly_hours || 0} 시간</strong>
+        </div>
+        <div class="stat-item">
+          <span>이번 달 작업 시간:</span>
+          <strong>${statsData.monthly_hours || 0} 시간</strong>
+        </div>
+        <div class="stat-item">
+          <span>완료한 작업 수:</span>
+          <strong>${statsData.completed_tasks || 0} 건</strong>
+        </div>
+      `;
+      statsContainer.innerHTML = statsHtml;
+    } else {
+      statsContainer.innerHTML = '<p>표시할 통계 정보가 없습니다.</p>';
+    }
+  } catch (error) {
+    console.error('작업 통계 로드 실패:', error);
+    statsContainer.innerHTML = '<p class="error">통계 정보를 불러오는 데 실패했습니다.</p>';
+  }
+}
+
+/**
+ * 환영 메시지를 사용자 이름으로 개인화합니다.
+ */
+function personalizeWelcome() {
+  // 전역 변수 대신 auth.js 모듈을 통해 사용자 정보를 가져옵니다.
+  const user = getUser();
+  if (user) {
+    const welcomeEl = document.getElementById('welcome-message');
+    if (welcomeEl) {
+      welcomeEl.textContent = `${user.name || user.username}님, 환영합니다! 오늘 하루도 안전하게 작업하세요.`;
+    }
+  }
+}
+
+// 페이지 초기화 함수
+function initializeDashboard() {
   personalizeWelcome();
   loadTodaySchedule();
   loadWorkStats();
-});
+}
+
+// DOM이 로드되면 대시보드 초기화를 시작합니다.
+document.addEventListener('DOMContentLoaded', initializeDashboard);