feat: Implement daily attendance tracking system

- Backend: Auto-sync work reports with attendance records
- Backend: Lazy initialization of daily active worker records
- Frontend: Real-time attendance status on Group Leader Dashboard

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

@@ -1,103 +1,174 @@
 // /js/group-leader-dashboard.js
-// 그룹장 전용 대시보드 기능
+// 그룹장 전용 대시보드 - 실시간 근태 및 작업 현황 (Real Data Version)
 
-console.log('📊 그룹장 대시보드 스크립트 로딩');
+console.log('📊 그룹장 대시보드 스크립트 로딩 (Live Data)');
+
+// 상태별 스타일/텍스트 매핑
+const STATUS_MAP = {
+  'incomplete': { text: '미제출', class: 'status-incomplete', icon: '❌', color: '#ff5252' },
+  'partial': { text: '작성중', class: 'status-warning', icon: '📝', color: '#ff9800' },
+  'complete': { text: '제출완료', class: 'status-success', icon: '✅', color: '#4caf50' },
+  'overtime': { text: '초과근무', class: 'status-info', icon: '🌙', color: '#673ab7' },
+  'vacation': { text: '휴가', class: 'status-vacation', icon: '🏖️', color: '#2196f3' }
+};
+
+// 현재 선택된 날짜
+let currentSelectedDate = new Date().toISOString().split('T')[0];
+
+/**
+ * 📅 날짜 초기화 및 이벤트 리스너 등록
+ */
+function initDateSelector() {
+  const dateInput = document.getElementById('selectedDate');
+  const refreshBtn = document.getElementById('refreshBtn');
+
+  if (dateInput) {
+    dateInput.value = currentSelectedDate;
+    dateInput.addEventListener('change', (e) => {
+      currentSelectedDate = e.target.value;
+      loadDailyWorkStatus();
+    });
+  }
+
+  if (refreshBtn) {
+    refreshBtn.addEventListener('click', () => {
+      loadDailyWorkStatus();
+      showToast('데이터를 새로고침했습니다.', 'success');
+    });
+  }
+}
+
+/**
+ * 🔄 일일 근태 현황 로드 (API 호출)
+ */
+async function loadDailyWorkStatus() {
+  const container = document.getElementById('workStatusContainer');
+  if (!container) return;
+
+  // 로딩 표시
+  container.innerHTML = `
+    <div class="loading-state">
+      <div class="spinner"></div>
+      <p>작업 현황을 불러오는 중...</p>
+    </div>
+  `;
 
-// 팀 현황 새로고침
-async function refreshTeamStatus() {
-  console.log('🔄 팀 현황 새로고침 시작');
-  
   try {
-    // 로딩 상태 표시
-    const teamList = document.getElementById('team-list');
-    if (teamList) {
-      teamList.innerHTML = '<div style="text-align: center; padding: 20px;">⏳ 로딩 중...</div>';
-    }
-    
-    // 실제로는 API 호출
-    // const response = await fetch('/api/team-status', { headers: getAuthHeaders() });
-    // const data = await response.json();
-    
-    // 임시 데이터로 업데이트 (실제 API 연동 시 교체)
-    setTimeout(() => {
-      updateTeamStatusUI();
-    }, 1000);
-    
+    const response = await fetch(`${window.API_BASE_URL}/attendance/daily-status?date=${currentSelectedDate}`, {
+      headers: getAuthHeaders()
+    });
+
+    if (!response.ok) throw new Error('데이터 로드 실패');
+
+    const result = await response.json();
+    const workers = result.data || [];
+
+    renderWorkStatus(workers);
+    updateSummaryStats(workers);
+
   } catch (error) {
-    console.error('❌ 팀 현황 로딩 실패:', error);
-    const teamList = document.getElementById('team-list');
-    if (teamList) {
-      teamList.innerHTML = '<div style="text-align: center; padding: 20px; color: #f44336;">❌ 로딩 실패</div>';
-    }
-  }
-}
-
-// 팀 현황 UI 업데이트 (임시 데이터)
-function updateTeamStatusUI() {
-  const teamData = [
-    { name: '김작업', status: 'present', statusText: '출근' },
-    { name: '이현장', status: 'present', statusText: '출근' },
-    { name: '박휴가', status: 'absent', statusText: '휴가' },
-    { name: '최작업', status: 'present', statusText: '출근' },
-    { name: '정현장', status: 'present', statusText: '출근' }
-  ];
-  
-  const teamList = document.getElementById('team-list');
-  if (teamList) {
-    teamList.innerHTML = teamData.map(member => `
-      <div class="team-member ${member.status}">
-        <span class="member-name">${member.name}</span>
-        <span class="member-status">${member.statusText}</span>
+    console.error('현황 로드 오류:', error);
+    container.innerHTML = `
+      <div class="error-state">
+        <p>⚠️ 데이터를 불러오는데 실패했습니다.</p>
+        <button onclick="loadDailyWorkStatus()" class="btn btn-sm btn-outline">재시도</button>
       </div>
-    `).join('');
-  }
-  
-  // 통계 업데이트
-  const presentCount = teamData.filter(m => m.status === 'present').length;
-  const absentCount = teamData.filter(m => m.status === 'absent').length;
-  
-  const totalEl = document.getElementById('team-total');
-  const presentEl = document.getElementById('team-present');
-  const absentEl = document.getElementById('team-absent');
-  
-  if (totalEl) totalEl.textContent = teamData.length;
-  if (presentEl) presentEl.textContent = presentCount;
-  if (absentEl) absentEl.textContent = absentCount;
-  
-  console.log('✅ 팀 현황 업데이트 완료');
-}
-
-// 환영 메시지 개인화
-function personalizeWelcome() {
-  const user = JSON.parse(localStorage.getItem('user') || '{}');
-  const welcomeMsg = document.getElementById('welcome-message');
-  
-  if (user && user.name && welcomeMsg) {
-    welcomeMsg.textContent = `${user.name}님의 실시간 팀 현황 및 작업 모니터링`;
-    console.log('✅ 환영 메시지 개인화 완료');
+    `;
   }
 }
 
-// 페이지 초기화
-document.addEventListener('DOMContentLoaded', function() {
-  console.log('🚀 그룹장 대시보드 초기화 시작');
-  
-  // 사용자 정보 확인
-  const user = JSON.parse(localStorage.getItem('user') || '{}');
-  console.log('👤 현재 사용자:', user);
-  
-  // 권한 확인
-  if (user.access_level !== 'group_leader') {
-    console.warn('⚠️ 그룹장 권한 없음:', user.access_level);
-    // 필요시 다른 페이지로 리다이렉트
+/**
+ * 📊 통계 요약 업데이트
+ */
+function updateSummaryStats(workers) {
+  // 요약 카드가 있다면 업데이트 (현재 HTML에는 없으므로 생략 가능하거나 동적으로 추가)
+  // 여기서는 콘솔에만 로그
+  const stats = workers.reduce((acc, w) => {
+    acc[w.status] = (acc[w.status] || 0) + 1;
+    return acc;
+  }, {});
+  console.log('Daily Stats:', stats);
+}
+
+/**
+ * 🎨 현황 리스트 렌더링
+ */
+function renderWorkStatus(workers) {
+  const container = document.getElementById('workStatusContainer');
+  if (!container) return;
+
+  if (workers.length === 0) {
+    container.innerHTML = '<div class="empty-state">등록된 작업자가 없습니다.</div>';
+    return;
   }
-  
-  // 초기화 작업
-  personalizeWelcome();
-  updateTeamStatusUI();
-  
-  console.log('✅ 그룹장 대시보드 초기화 완료');
+
+  // 상태 우선순위 정렬 (미제출 -> 작성중 -> 완료)
+  const sortOrder = ['incomplete', 'partial', 'vacation', 'complete', 'overtime'];
+  workers.sort((a, b) => {
+    return sortOrder.indexOf(a.status) - sortOrder.indexOf(b.status) || a.worker_name.localeCompare(b.worker_name);
+  });
+
+  const html = `
+    <div class="status-grid">
+      ${workers.map(worker => {
+    const statusInfo = STATUS_MAP[worker.status] || { text: worker.status, class: '', icon: '❓', color: '#999' };
+
+    return `
+          <div class="worker-card ${worker.status === 'incomplete' ? 'status-alert' : ''}" style="border-left: 4px solid ${statusInfo.color}">
+            <div class="worker-header">
+              <span class="worker-name">${worker.worker_name}</span>
+              <span class="worker-job">${worker.job_type || '-'}</span>
+            </div>
+            
+            <div class="worker-body">
+              <div class="status-badge" style="background-color: ${statusInfo.color}20; color: ${statusInfo.color}">
+                ${statusInfo.icon} ${statusInfo.text}
+              </div>
+              <div class="work-hours">
+                ${worker.total_work_hours > 0 ? worker.total_work_hours + '시간' : '-'}
+              </div>
+            </div>
+
+            ${worker.status === 'incomplete' ? `
+              <div class="worker-footer">
+                <span class="alert-text">⚠️ 보고서 미제출</span>
+              </div>
+            ` : ''}
+          </div>
+        `;
+  }).join('')}
+    </div>
+  `;
+
+  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) {
+    window.showToast(message, type);
+  } else {
+    alert(message);
+  }
+}
+
+// 초기화
+document.addEventListener('DOMContentLoaded', () => {
+  // API_BASE_URL 설정 (없으면 기본값)
+  if (!window.API_BASE_URL) window.API_BASE_URL = '/api';
+
+  initDateSelector();
+  loadDailyWorkStatus();
 });
 
-// 전역 함수로 내보내기 (HTML에서 사용)
-window.refreshTeamStatus = refreshTeamStatus;
+// 전역 노출
+window.refreshTeamStatus = loadDailyWorkStatus;