해당 서비스 도커화 성공, 룰 추가, 로그인 오류 수정, 소문자 룰 어느정도 해결

fastapi-bridge/static/js/load-sections.js

@@ -0,0 +1,104 @@
+// /js/load-sections.js
+import { getUser } from './auth.js';
+import { apiGet } from './api-helper.js';
+
+// 역할에 따라 불러올 섹션 HTML 파일을 매핑합니다.
+const SECTION_MAP = {
+  admin: '/components/sections/admin-sections.html',
+  system: '/components/sections/admin-sections.html', // system도 admin과 동일한 섹션을 사용
+  leader: '/components/sections/leader-sections.html',
+  user: '/components/sections/user-sections.html',
+  default: '/components/sections/user-sections.html', // 역할이 없는 경우 기본값
+};
+
+/**
+ * API를 통해 대시보드 통계 데이터를 가져옵니다.
+ * @returns {Promise<object|null>} 통계 데이터 또는 에러 시 null
+ */
+async function fetchDashboardStats() {
+  try {
+    const today = new Date().toISOString().split('T')[0];
+    // 실제 백엔드 엔드포인트는 /api/dashboard/stats 와 같은 형태로 구현될 수 있습니다.
+    const stats = await apiGet(`/workreports?start=${today}&end=${today}`);
+    // 필요한 데이터 형태로 가공 (예시)
+    return {
+      today_reports_count: stats.length,
+      today_workers_count: new Set(stats.map(d => d.worker_id)).size,
+    };
+  } catch (error) {
+    console.error('대시보드 통계 데이터 로드 실패:', error);
+    return null;
+  }
+}
+
+/**
+ * 가상 DOM에 통계 데이터를 채워 넣습니다.
+ * @param {Document} doc - 파싱된 HTML 문서 객체
+ * @param {object} stats - 통계 데이터
+ */
+function populateStatsData(doc, stats) {
+  if (!stats) return;
+
+  const todayStatsEl = doc.getElementById('today-stats');
+  if (todayStatsEl) {
+    todayStatsEl.innerHTML = `
+      <p>📝 오늘 등록된 작업: ${stats.today_reports_count}건</p>
+      <p>👥 참여 작업자: ${stats.today_workers_count}명</p>
+    `;
+  }
+}
+
+/**
+ * 메인 로직: 페이지에 역할별 섹션을 로드하고 내용을 채웁니다.
+ */
+async function initializeSections() {
+  const mainContainer = document.querySelector('main[id$="-sections"]');
+  if (!mainContainer) {
+    console.error('섹션을 담을 메인 컨테이너를 찾을 수 없습니다.');
+    return;
+  }
+  mainContainer.innerHTML = '<div class="loading">콘텐츠를 불러오는 중...</div>';
+
+  const currentUser = getUser();
+  if (!currentUser) {
+    mainContainer.innerHTML = '<div class="error-state">사용자 정보를 찾을 수 없습니다.</div>';
+    return;
+  }
+  
+  const sectionFile = SECTION_MAP[currentUser.role] || SECTION_MAP.default;
+
+  try {
+    // 1. 역할에 맞는 HTML 템플릿과 동적 데이터를 동시에 로드 (Promise.all 활용)
+    const [htmlResponse, statsData] = await Promise.all([
+      fetch(sectionFile),
+      fetchDashboardStats()
+    ]);
+
+    if (!htmlResponse.ok) {
+      throw new Error(`섹션 파일(${sectionFile})을 불러오는 데 실패했습니다.`);
+    }
+    const htmlText = await htmlResponse.text();
+
+    // 2. 텍스트를 가상 DOM으로 파싱
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(htmlText, 'text/html');
+    
+    // 3. (필요 시) 역할 기반으로 가상 DOM 필터링 - 현재는 파일 자체가 역할별로 나뉘어 불필요
+    // filterByRole(doc, currentUser.role); 
+
+    // 4. 가상 DOM에 동적 데이터 채우기
+    populateStatsData(doc, statsData);
+
+    // 5. 모든 수정이 완료된 HTML을 실제 DOM에 한 번에 삽입
+    mainContainer.innerHTML = doc.body.innerHTML;
+
+    console.log(`✅ ${currentUser.role} 역할의 섹션 로딩 완료.`);
+
+  } catch (error) {
+    console.error('섹션 로딩 중 오류 발생:', error);
+    mainContainer.innerHTML = `<div class="error-state">콘텐츠 로딩에 실패했습니다: ${error.message}</div>`;
+  }
+}
+
+// DOM이 로드되면 섹션 초기화를 시작합니다.
+document.addEventListener('DOMContentLoaded', initializeSections);