From ed40eec2610af92b391c9572cbc3807476512794 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Wed, 5 Nov 2025 10:12:52 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B7=B8=EB=A3=B9=20=EB=A6=AC=EB=8D=94?=
 =?UTF-8?q?=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EC=9E=91=EC=97=85=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5/=EC=82=AD=EC=A0=9C=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0=20=EB=B0=8F=20=EC=9E=91=EC=97=85=20=EB=B6=84?=
 =?UTF-8?q?=EC=84=9D=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=84=B1=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔧 그룹 리더 대시보드 수정사항:
- API 호출 방식 수정 (modern-dashboard.js)
- 서버 API 요구사항에 맞는 데이터 구조 변경
- work_entries 배열 구조로 변경
- work_type_id → task_id 필드명 매핑
- 400 Bad Request 오류 해결

⚡ 작업 분석 시스템 성능 최적화:
- 중복 함수 제거 (isWeekend, isVacationProject 통합)
- WorkAnalysisAPI 캐싱 시스템 구현 (5분 만료)
- 네임스페이스 조직화 (utils, ui, analysis, render)
- ErrorHandler 통합 에러 처리 시스템
- 성능 모니터링 및 메모리 누수 방지
- GPU 가속 CSS 애니메이션 추가
- 디바운스/스로틀 함수 적용
- 의미 없는 통계 카드 제거

📊 작업 분석 페이지 개선:
- 프로그레스 바 애니메이션
- 토스트 알림 시스템
- 부드러운 전환 효과
- 반응형 최적화
- 메모리 사용량 모니터링
---
 web-ui/css/work-analysis.css                  |  192 +-
 web-ui/js/modern-dashboard.js                 |   41 +-
 web-ui/js/work-analysis/api-client.js         |  231 ++
 web-ui/js/work-analysis/chart-renderer.js     |  455 ++++
 web-ui/js/work-analysis/data-processor.js     |  355 +++
 web-ui/js/work-analysis/main-controller.js    |  612 +++++
 web-ui/js/work-analysis/module-loader.js      |  267 ++
 web-ui/js/work-analysis/state-manager.js      |  382 +++
 web-ui/js/work-analysis/table-renderer.js     |  510 ++++
 .../pages/analysis/work-analysis-legacy.html  | 2233 +++++++++++++++++
 .../pages/analysis/work-analysis-modular.html |  363 +++
 web-ui/pages/analysis/work-analysis.html      | 1110 ++++++--
 .../pages/analysis/work-analysis.html.backup  | 2230 ++++++++++++++++
 web-ui/pages/dashboard/group-leader.html      |    2 +-
 14 files changed, 8740 insertions(+), 243 deletions(-)
 create mode 100644 web-ui/js/work-analysis/api-client.js
 create mode 100644 web-ui/js/work-analysis/chart-renderer.js
 create mode 100644 web-ui/js/work-analysis/data-processor.js
 create mode 100644 web-ui/js/work-analysis/main-controller.js
 create mode 100644 web-ui/js/work-analysis/module-loader.js
 create mode 100644 web-ui/js/work-analysis/state-manager.js
 create mode 100644 web-ui/js/work-analysis/table-renderer.js
 create mode 100644 web-ui/pages/analysis/work-analysis-legacy.html
 create mode 100644 web-ui/pages/analysis/work-analysis-modular.html
 create mode 100644 web-ui/pages/analysis/work-analysis.html.backup

diff --git a/web-ui/css/work-analysis.css b/web-ui/css/work-analysis.css
index b144181..1278e60 100644
--- a/web-ui/css/work-analysis.css
+++ b/web-ui/css/work-analysis.css
@@ -103,6 +103,46 @@ body {
   min-height: 100vh;
 }
 
+/* ========== 네비게이션 헤더 ========== */
+.breadcrumb-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-6);
+  padding: var(--space-4);
+  background: var(--white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--gray-200);
+}
+
+.breadcrumb-nav .nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  color: var(--primary);
+  text-decoration: none;
+  border-radius: var(--radius);
+  font-weight: 500;
+  transition: all var(--transition);
+}
+
+.breadcrumb-nav .nav-link:hover {
+  background: var(--primary-bg);
+  color: var(--primary-dark);
+}
+
+.breadcrumb-nav .separator {
+  color: var(--gray-400);
+  font-weight: 400;
+}
+
+.breadcrumb-nav .current-page {
+  color: var(--gray-700);
+  font-weight: 600;
+}
+
 .page-header {
   background: var(--white);
   border-radius: var(--radius-xl);
@@ -160,6 +200,100 @@ body {
   gap: var(--space-2);
 }
 
+/* 분석 탭 네비게이션 */
+.tab-navigation {
+  background: var(--white);
+  border-radius: var(--radius-xl);
+  padding: var(--space-4);
+  margin-bottom: var(--space-6);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--gray-200);
+}
+
+.tab-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-3);
+}
+
+/* 탭 컨텐츠 표시/숨김 */
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* 결과 그리드 */
+.results-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
+}
+
+.tab-contents {
+  background: var(--white);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid var(--gray-200);
+}
+
+/* ========== 통계 카드 ========== */
+.stat-card {
+  background: var(--white);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--gray-200);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  transition: all var(--transition);
+}
+
+.stat-card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+
+.stat-icon {
+  font-size: 2.5rem;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--gradient-primary);
+  border-radius: var(--radius-lg);
+  color: var(--white);
+}
+
+.stat-content {
+  flex: 1;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+  font-weight: 500;
+  margin-bottom: var(--space-1);
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--gray-900);
+}
+
 .tab-button {
   flex: 1;
   padding: var(--space-4) var(--space-6);
@@ -411,6 +545,61 @@ body {
   overflow: visible; /* 테이블이 보이도록 */
 }
 
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-6);
+  padding-bottom: var(--space-4);
+  border-bottom: 2px solid var(--gray-100);
+}
+
+.chart-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--gray-900);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.chart-title .icon {
+  font-size: 1.25rem;
+}
+
+.chart-analyze-btn {
+  padding: var(--space-3) var(--space-6);
+  background: var(--gradient-primary);
+  color: var(--white);
+  border: none;
+  border-radius: var(--radius-lg);
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all var(--transition);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  box-shadow: var(--shadow-sm);
+}
+
+.chart-analyze-btn:hover:not(:disabled) {
+  background: var(--gradient-primary);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.chart-analyze-btn:disabled {
+  background: var(--gray-300);
+  color: var(--gray-500);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.chart-analyze-btn .icon {
+  font-size: 1rem;
+}
+
 /* 차트 컨테이너 타입별 스타일 */
 .chart-container.chart-type {
   height: 450px; /* 차트일 때만 고정 높이 */
@@ -435,7 +624,8 @@ body {
   border: 1px solid var(--gray-200);
 }
 
-.work-report-table {
+.work-report-table,
+.work-status-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.9rem;
diff --git a/web-ui/js/modern-dashboard.js b/web-ui/js/modern-dashboard.js
index 128e544..c024f78 100644
--- a/web-ui/js/modern-dashboard.js
+++ b/web-ui/js/modern-dashboard.js
@@ -752,10 +752,7 @@ async function processVacation(workerId, vacationType, hours) {
       created_by: currentUser?.user_id || 1
     };
     
-    const response = await window.apiCall(`${window.API}/daily-work-reports`, {
-      method: 'POST',
-      body: JSON.stringify(vacationReport)
-    });
+    const response = await window.apiCall('/daily-work-reports', 'POST', vacationReport);
     
     showToast(`휴가 처리가 완료되었습니다.`, 'success');
     await loadDashboardData(); // 데이터 새로고침
@@ -998,7 +995,7 @@ async function loadModalData() {
 
 async function loadModalExistingWork() {
   try {
-    const response = await window.apiCall(`${window.API}/daily-work-reports?date=${currentModalWorker.date}&worker_id=${currentModalWorker.id}`);
+    const response = await window.apiCall(`/daily-work-reports?date=${currentModalWorker.date}&worker_id=${currentModalWorker.id}`);
     modalExistingWork = Array.isArray(response) ? response : (response.data || []);
   } catch (error) {
     console.error('기존 작업 로드 오류:', error);
@@ -1009,10 +1006,10 @@ async function loadModalExistingWork() {
 async function loadModalDropdownData() {
   try {
     const [projectsRes, workTypesRes, workStatusRes, errorTypesRes] = await Promise.all([
-      window.apiCall(`${window.API}/projects/active/list`),
-      window.apiCall(`${window.API}/daily-work-reports/work-types`),
-      window.apiCall(`${window.API}/daily-work-reports/work-status-types`),
-      window.apiCall(`${window.API}/daily-work-reports/error-types`)
+      window.apiCall('/projects/active/list'),
+      window.apiCall('/daily-work-reports/work-types'),
+      window.apiCall('/daily-work-reports/work-status-types'),
+      window.apiCall('/daily-work-reports/error-types')
     ]);
     
     modalProjects = Array.isArray(projectsRes) ? projectsRes : (projectsRes.data || []);
@@ -1153,18 +1150,20 @@ async function saveModalNewWork() {
     const workData = {
       report_date: currentModalWorker.date,
       worker_id: currentModalWorker.id,
-      project_id: parseInt(projectId),
-      work_type_id: parseInt(workTypeId),
-      work_status_id: parseInt(workStatusId),
-      error_type_id: workStatusId === '2' ? parseInt(errorTypeId) : null,
-      work_hours: parseFloat(workHours),
-      created_by: currentUser?.user_id || 1
+      work_entries: [{
+        project_id: parseInt(projectId),
+        task_id: parseInt(workTypeId), // work_type_id를 task_id로 매핑
+        work_hours: parseFloat(workHours),
+        work_status_id: parseInt(workStatusId),
+        error_type_id: workStatusId === '2' ? parseInt(errorTypeId) : null,
+        description: '' // 기본 설명
+      }]
     };
     
-    await window.apiCall(`${window.API}/daily-work-reports`, {
-      method: 'POST',
-      body: JSON.stringify(workData)
-    });
+    console.log('📤 전송할 작업 데이터:', workData);
+    console.log('📋 현재 사용자:', currentUser);
+    
+    await window.apiCall('/daily-work-reports', 'POST', workData);
     
     showToast('작업이 성공적으로 저장되었습니다.', 'success');
     
@@ -1189,9 +1188,7 @@ async function deleteModalWork(workId) {
   }
   
   try {
-    await window.apiCall(`${window.API}/daily-work-reports/${workId}`, {
-      method: 'DELETE'
-    });
+    await window.apiCall(`/daily-work-reports/${workId}`, 'DELETE');
     
     showToast('작업이 성공적으로 삭제되었습니다.', 'success');
     
diff --git a/web-ui/js/work-analysis/api-client.js b/web-ui/js/work-analysis/api-client.js
new file mode 100644
index 0000000..9ede593
--- /dev/null
+++ b/web-ui/js/work-analysis/api-client.js
@@ -0,0 +1,231 @@
+/**
+ * Work Analysis API Client Module
+ * 작업 분석 관련 모든 API 호출을 관리하는 모듈
+ */
+
+class WorkAnalysisAPIClient {
+    constructor() {
+        this.baseURL = window.API_BASE_URL || 'http://localhost:20005/api';
+    }
+
+    /**
+     * 기본 API 호출 메서드
+     * @param {string} endpoint - API 엔드포인트
+     * @param {string} method - HTTP 메서드
+     * @param {Object} data - 요청 데이터
+     * @returns {Promise<Object>} API 응답
+     */
+    async apiCall(endpoint, method = 'GET', data = null) {
+        try {
+            const config = {
+                method,
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            };
+
+            if (data && method !== 'GET') {
+                config.body = JSON.stringify(data);
+            }
+
+            console.log(`📡 API 호출: ${this.baseURL}${endpoint} (${method})`);
+            
+            const response = await fetch(`${this.baseURL}${endpoint}`, config);
+            const result = await response.json();
+
+            if (!response.ok) {
+                throw new Error(result.message || `HTTP ${response.status}`);
+            }
+
+            console.log(`✅ API 성공: ${this.baseURL}${endpoint}`);
+            return result;
+
+        } catch (error) {
+            console.error(`❌ API 실패: ${this.baseURL}${endpoint}`, error);
+            throw error;
+        }
+    }
+
+    /**
+     * 날짜 범위 파라미터 생성
+     * @param {string} startDate - 시작일
+     * @param {string} endDate - 종료일
+     * @param {Object} additionalParams - 추가 파라미터
+     * @returns {URLSearchParams} URL 파라미터
+     */
+    createDateParams(startDate, endDate, additionalParams = {}) {
+        const params = new URLSearchParams({
+            start: startDate,
+            end: endDate,
+            ...additionalParams
+        });
+        return params;
+    }
+
+    // ========== 기본 통계 API ==========
+    
+    /**
+     * 기본 통계 조회
+     */
+    async getBasicStats(startDate, endDate, projectId = null) {
+        console.log('🔍 getBasicStats 호출:', startDate, '~', endDate, projectId ? `(프로젝트: ${projectId})` : '');
+        const params = this.createDateParams(startDate, endDate, 
+            projectId ? { project_id: projectId } : {}
+        );
+        console.log('🌐 API 요청 URL:', `/work-analysis/stats?${params}`);
+        return await this.apiCall(`/work-analysis/stats?${params}`);
+    }
+
+    /**
+     * 일별 추이 조회
+     */
+    async getDailyTrend(startDate, endDate, projectId = null) {
+        const params = this.createDateParams(startDate, endDate, 
+            projectId ? { project_id: projectId } : {}
+        );
+        return await this.apiCall(`/work-analysis/daily-trend?${params}`);
+    }
+
+    /**
+     * 작업자별 통계 조회
+     */
+    async getWorkerStats(startDate, endDate, projectId = null) {
+        const params = this.createDateParams(startDate, endDate, 
+            projectId ? { project_id: projectId } : {}
+        );
+        return await this.apiCall(`/work-analysis/worker-stats?${params}`);
+    }
+
+    /**
+     * 프로젝트별 통계 조회
+     */
+    async getProjectStats(startDate, endDate) {
+        const params = this.createDateParams(startDate, endDate);
+        return await this.apiCall(`/work-analysis/project-stats?${params}`);
+    }
+
+    // ========== 상세 분석 API ==========
+
+    /**
+     * 프로젝트별-작업유형별 분석
+     */
+    async getProjectWorkTypeAnalysis(startDate, endDate, limit = 2000) {
+        const params = this.createDateParams(startDate, endDate, { limit });
+        return await this.apiCall(`/work-analysis/project-worktype-analysis?${params}`);
+    }
+
+    /**
+     * 최근 작업 데이터 조회
+     */
+    async getRecentWork(startDate, endDate, limit = 2000) {
+        const params = this.createDateParams(startDate, endDate, { limit });
+        return await this.apiCall(`/work-analysis/recent-work?${params}`);
+    }
+
+    /**
+     * 오류 분석 데이터 조회
+     */
+    async getErrorAnalysis(startDate, endDate) {
+        const params = this.createDateParams(startDate, endDate);
+        return await this.apiCall(`/work-analysis/error-analysis?${params}`);
+    }
+
+    // ========== 배치 API 호출 ==========
+
+    /**
+     * 여러 API를 병렬로 호출
+     * @param {Array} apiCalls - API 호출 배열
+     * @returns {Promise<Array>} 결과 배열
+     */
+    async batchCall(apiCalls) {
+        console.log('🔄 배치 API 호출 시작:', apiCalls.length, '개');
+        
+        const promises = apiCalls.map(async ({ name, method, ...args }) => {
+            try {
+                const result = await this[method](...args);
+                return { name, success: true, data: result };
+            } catch (error) {
+                console.warn(`⚠️ ${name} API 오류:`, error);
+                return { name, success: false, error: error.message, data: null };
+            }
+        });
+
+        const results = await Promise.all(promises);
+        console.log('✅ 배치 API 호출 완료');
+        
+        return results.reduce((acc, result) => {
+            acc[result.name] = result;
+            return acc;
+        }, {});
+    }
+
+    /**
+     * 차트 데이터를 위한 배치 호출
+     */
+    async getChartData(startDate, endDate, projectId = null) {
+        return await this.batchCall([
+            {
+                name: 'dailyTrend',
+                method: 'getDailyTrend',
+                startDate,
+                endDate,
+                projectId
+            },
+            {
+                name: 'workerStats',
+                method: 'getWorkerStats',
+                startDate,
+                endDate,
+                projectId
+            },
+            {
+                name: 'projectStats',
+                method: 'getProjectStats',
+                startDate,
+                endDate
+            },
+            {
+                name: 'errorAnalysis',
+                method: 'getErrorAnalysis',
+                startDate,
+                endDate
+            }
+        ]);
+    }
+
+    /**
+     * 프로젝트 분포 분석을 위한 배치 호출
+     */
+    async getProjectDistributionData(startDate, endDate) {
+        return await this.batchCall([
+            {
+                name: 'projectWorkType',
+                method: 'getProjectWorkTypeAnalysis',
+                startDate,
+                endDate
+            },
+            {
+                name: 'workerStats',
+                method: 'getWorkerStats',
+                startDate,
+                endDate
+            },
+            {
+                name: 'recentWork',
+                method: 'getRecentWork',
+                startDate,
+                endDate
+            }
+        ]);
+    }
+}
+
+// 전역 인스턴스 생성
+window.WorkAnalysisAPI = new WorkAnalysisAPIClient();
+
+// 하위 호환성을 위한 전역 함수
+window.apiCall = (endpoint, method, data) => {
+    return window.WorkAnalysisAPI.apiCall(endpoint, method, data);
+};
+
+// Export는 브라우저 환경에서 제거됨
diff --git a/web-ui/js/work-analysis/chart-renderer.js b/web-ui/js/work-analysis/chart-renderer.js
new file mode 100644
index 0000000..f1d2911
--- /dev/null
+++ b/web-ui/js/work-analysis/chart-renderer.js
@@ -0,0 +1,455 @@
+/**
+ * Work Analysis Chart Renderer Module
+ * 작업 분석 차트 렌더링을 담당하는 모듈
+ */
+
+class WorkAnalysisChartRenderer {
+    constructor() {
+        this.charts = new Map(); // 차트 인스턴스 관리
+        this.dataProcessor = window.WorkAnalysisDataProcessor;
+        this.defaultColors = [
+            '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
+            '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
+        ];
+    }
+
+    // ========== 차트 관리 ==========
+
+    /**
+     * 기존 차트 제거
+     * @param {string} chartId - 차트 ID
+     */
+    destroyChart(chartId) {
+        if (this.charts.has(chartId)) {
+            this.charts.get(chartId).destroy();
+            this.charts.delete(chartId);
+            console.log('🗑️ 차트 제거:', chartId);
+        }
+    }
+
+    /**
+     * 모든 차트 제거
+     */
+    destroyAllCharts() {
+        this.charts.forEach((chart, id) => {
+            chart.destroy();
+            console.log('🗑️ 차트 제거:', id);
+        });
+        this.charts.clear();
+    }
+
+    /**
+     * 차트 생성 및 등록
+     * @param {string} chartId - 차트 ID
+     * @param {HTMLCanvasElement} canvas - 캔버스 요소
+     * @param {Object} config - 차트 설정
+     * @returns {Chart} 생성된 차트 인스턴스
+     */
+    createChart(chartId, canvas, config) {
+        // 기존 차트가 있으면 제거
+        this.destroyChart(chartId);
+
+        const chart = new Chart(canvas, config);
+        this.charts.set(chartId, chart);
+        
+        console.log('📊 차트 생성:', chartId);
+        return chart;
+    }
+
+    // ========== 시계열 차트 ==========
+
+    /**
+     * 시계열 차트 렌더링 (기간별 작업 현황)
+     * @param {string} startDate - 시작일
+     * @param {string} endDate - 종료일
+     * @param {string} projectId - 프로젝트 ID (선택사항)
+     */
+    async renderTimeSeriesChart(startDate, endDate, projectId = '') {
+        console.log('📈 시계열 차트 렌더링 시작');
+        
+        try {
+            const api = window.WorkAnalysisAPI;
+            const dailyTrendResponse = await api.getDailyTrend(startDate, endDate, projectId);
+            
+            if (!dailyTrendResponse.success || !dailyTrendResponse.data) {
+                throw new Error('일별 추이 데이터를 가져올 수 없습니다');
+            }
+
+            const canvas = document.getElementById('workStatusChart');
+            if (!canvas) {
+                console.error('❌ workStatusChart 캔버스를 찾을 수 없습니다');
+                return;
+            }
+
+            const chartData = this.dataProcessor.processTimeSeriesData(dailyTrendResponse.data);
+            
+            const config = {
+                type: 'line',
+                data: chartData,
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    aspectRatio: 2,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: '작업시간 (h)'
+                            }
+                        },
+                        y1: {
+                            type: 'linear',
+                            display: true,
+                            position: 'right',
+                            title: {
+                                display: true,
+                                text: '작업자 수 (명)'
+                            },
+                            grid: {
+                                drawOnChartArea: false,
+                            },
+                        }
+                    },
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: '일별 작업 현황'
+                        },
+                        legend: {
+                            display: true,
+                            position: 'top'
+                        }
+                    }
+                }
+            };
+
+            this.createChart('workStatus', canvas, config);
+            console.log('✅ 시계열 차트 렌더링 완료');
+
+        } catch (error) {
+            console.error('❌ 시계열 차트 렌더링 실패:', error);
+            this._showChartError('workStatusChart', '시계열 차트를 불러올 수 없습니다');
+        }
+    }
+
+    // ========== 스택 바 차트 ==========
+
+    /**
+     * 스택 바 차트 렌더링 (프로젝트별 → 작업유형별)
+     * @param {Array} projectData - 프로젝트 데이터
+     */
+    renderStackedBarChart(projectData) {
+        console.log('📊 스택 바 차트 렌더링 시작');
+        
+        const canvas = document.getElementById('projectDistributionChart');
+        if (!canvas) {
+            console.error('❌ projectDistributionChart 캔버스를 찾을 수 없습니다');
+            return;
+        }
+
+        if (!projectData || !projectData.projects || projectData.projects.length === 0) {
+            this._showChartError('projectDistributionChart', '프로젝트 데이터가 없습니다');
+            return;
+        }
+
+        // 데이터 변환
+        const { labels, datasets } = this._processStackedBarData(projectData.projects);
+
+        const config = {
+            type: 'bar',
+            data: {
+                labels,
+                datasets
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                aspectRatio: 2,
+                scales: {
+                    x: {
+                        stacked: true,
+                        title: {
+                            display: true,
+                            text: '프로젝트'
+                        }
+                    },
+                    y: {
+                        stacked: true,
+                        beginAtZero: true,
+                        title: {
+                            display: true,
+                            text: '작업시간 (h)'
+                        }
+                    }
+                },
+                plugins: {
+                    title: {
+                        display: true,
+                        text: '프로젝트별 작업유형 분포'
+                    },
+                    legend: {
+                        display: true,
+                        position: 'top'
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                        callbacks: {
+                            title: function(context) {
+                                return `${context[0].label}`;
+                            },
+                            label: function(context) {
+                                const workType = context.dataset.label;
+                                const hours = context.parsed.y;
+                                const percentage = ((hours / projectData.totalHours) * 100).toFixed(1);
+                                return `${workType}: ${hours}h (${percentage}%)`;
+                            }
+                        }
+                    }
+                }
+            }
+        };
+
+        this.createChart('projectDistribution', canvas, config);
+        console.log('✅ 스택 바 차트 렌더링 완료');
+    }
+
+    /**
+     * 스택 바 차트 데이터 처리
+     */
+    _processStackedBarData(projects) {
+        // 모든 작업유형 수집
+        const allWorkTypes = new Set();
+        projects.forEach(project => {
+            project.workTypes.forEach(wt => {
+                allWorkTypes.add(wt.work_type_name);
+            });
+        });
+
+        const workTypeArray = Array.from(allWorkTypes);
+        const labels = projects.map(p => p.project_name);
+
+        // 작업유형별 데이터셋 생성
+        const datasets = workTypeArray.map((workTypeName, index) => {
+            const data = projects.map(project => {
+                const workType = project.workTypes.find(wt => wt.work_type_name === workTypeName);
+                return workType ? workType.totalHours : 0;
+            });
+
+            return {
+                label: workTypeName,
+                data,
+                backgroundColor: this.defaultColors[index % this.defaultColors.length],
+                borderColor: this.defaultColors[index % this.defaultColors.length],
+                borderWidth: 1
+            };
+        });
+
+        return { labels, datasets };
+    }
+
+    // ========== 도넛 차트 ==========
+
+    /**
+     * 도넛 차트 렌더링 (작업자별 성과)
+     * @param {Array} workerData - 작업자 데이터
+     */
+    renderWorkerPerformanceChart(workerData) {
+        console.log('👤 작업자별 성과 차트 렌더링 시작');
+        
+        const canvas = document.getElementById('workerPerformanceChart');
+        if (!canvas) {
+            console.error('❌ workerPerformanceChart 캔버스를 찾을 수 없습니다');
+            return;
+        }
+
+        if (!workerData || workerData.length === 0) {
+            this._showChartError('workerPerformanceChart', '작업자 데이터가 없습니다');
+            return;
+        }
+
+        const chartData = this.dataProcessor.processDonutChartData(
+            workerData.map(worker => ({
+                name: worker.worker_name,
+                hours: worker.totalHours
+            }))
+        );
+
+        const config = {
+            type: 'doughnut',
+            data: chartData,
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                aspectRatio: 1,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: '작업자별 작업시간 분포'
+                    },
+                    legend: {
+                        display: true,
+                        position: 'right'
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                const label = context.label;
+                                const value = context.parsed;
+                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                                const percentage = ((value / total) * 100).toFixed(1);
+                                return `${label}: ${value}h (${percentage}%)`;
+                            }
+                        }
+                    }
+                }
+            }
+        };
+
+        this.createChart('workerPerformance', canvas, config);
+        console.log('✅ 작업자별 성과 차트 렌더링 완료');
+    }
+
+    // ========== 오류 분석 차트 ==========
+
+    /**
+     * 오류 분석 차트 렌더링
+     * @param {Array} errorData - 오류 데이터
+     */
+    renderErrorAnalysisChart(errorData) {
+        console.log('⚠️ 오류 분석 차트 렌더링 시작');
+        
+        const canvas = document.getElementById('errorAnalysisChart');
+        if (!canvas) {
+            console.error('❌ errorAnalysisChart 캔버스를 찾을 수 없습니다');
+            return;
+        }
+
+        if (!errorData || errorData.length === 0) {
+            this._showChartError('errorAnalysisChart', '오류 데이터가 없습니다');
+            return;
+        }
+
+        // 오류가 있는 데이터만 필터링
+        const errorItems = errorData.filter(item => 
+            item.error_count > 0 || (item.errorDetails && item.errorDetails.length > 0)
+        );
+
+        if (errorItems.length === 0) {
+            this._showChartError('errorAnalysisChart', '오류가 발생한 항목이 없습니다');
+            return;
+        }
+
+        const chartData = this.dataProcessor.processDonutChartData(
+            errorItems.map(item => ({
+                name: item.project_name || item.name,
+                hours: item.errorHours || item.error_count
+            }))
+        );
+
+        const config = {
+            type: 'doughnut',
+            data: chartData,
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                aspectRatio: 1,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: '프로젝트별 오류 분포'
+                    },
+                    legend: {
+                        display: true,
+                        position: 'bottom'
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                const label = context.label;
+                                const value = context.parsed;
+                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                                const percentage = ((value / total) * 100).toFixed(1);
+                                return `${label}: ${value}h (${percentage}%)`;
+                            }
+                        }
+                    }
+                }
+            }
+        };
+
+        this.createChart('errorAnalysis', canvas, config);
+        console.log('✅ 오류 분석 차트 렌더링 완료');
+    }
+
+    // ========== 유틸리티 ==========
+
+    /**
+     * 차트 오류 표시
+     * @param {string} canvasId - 캔버스 ID
+     * @param {string} message - 오류 메시지
+     */
+    _showChartError(canvasId, message) {
+        const canvas = document.getElementById(canvasId);
+        if (!canvas) return;
+
+        const container = canvas.parentElement;
+        if (container) {
+            container.innerHTML = `
+                <div style="
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    height: 300px;
+                    color: #666;
+                    text-align: center;
+                ">
+                    <div style="font-size: 3rem; margin-bottom: 1rem;">📊</div>
+                    <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">차트를 표시할 수 없습니다</div>
+                    <div style="font-size: 0.9rem;">${message}</div>
+                </div>
+            `;
+        }
+    }
+
+    /**
+     * 차트 리사이즈
+     */
+    resizeCharts() {
+        this.charts.forEach((chart, id) => {
+            try {
+                chart.resize();
+                console.log('📏 차트 리사이즈:', id);
+            } catch (error) {
+                console.warn('⚠️ 차트 리사이즈 실패:', id, error);
+            }
+        });
+    }
+
+    /**
+     * 차트 상태 확인
+     */
+    getChartStatus() {
+        const status = {};
+        this.charts.forEach((chart, id) => {
+            status[id] = {
+                type: chart.config.type,
+                datasetCount: chart.data.datasets.length,
+                dataPointCount: chart.data.labels ? chart.data.labels.length : 0
+            };
+        });
+        return status;
+    }
+}
+
+// 전역 인스턴스 생성
+window.WorkAnalysisChartRenderer = new WorkAnalysisChartRenderer();
+
+// 윈도우 리사이즈 이벤트 리스너
+window.addEventListener('resize', () => {
+    window.WorkAnalysisChartRenderer.resizeCharts();
+});
+
+// Export는 브라우저 환경에서 제거됨
diff --git a/web-ui/js/work-analysis/data-processor.js b/web-ui/js/work-analysis/data-processor.js
new file mode 100644
index 0000000..bd0e9c1
--- /dev/null
+++ b/web-ui/js/work-analysis/data-processor.js
@@ -0,0 +1,355 @@
+/**
+ * Work Analysis Data Processor Module
+ * 작업 분석 데이터 가공 및 변환을 담당하는 모듈
+ */
+
+class WorkAnalysisDataProcessor {
+    
+    // ========== 유틸리티 함수 ==========
+
+    /**
+     * 주말 여부 확인
+     * @param {string} dateString - 날짜 문자열
+     * @returns {boolean} 주말 여부
+     */
+    isWeekendDate(dateString) {
+        const date = new Date(dateString);
+        const dayOfWeek = date.getDay();
+        return dayOfWeek === 0 || dayOfWeek === 6; // 일요일(0) 또는 토요일(6)
+    }
+
+    /**
+     * 연차/휴무 프로젝트 여부 확인
+     * @param {string} projectName - 프로젝트명
+     * @returns {boolean} 연차/휴무 여부
+     */
+    isVacationProject(projectName) {
+        if (!projectName) return false;
+        const vacationKeywords = ['연차', '휴무', '휴가', '병가', '특별휴가'];
+        return vacationKeywords.some(keyword => projectName.includes(keyword));
+    }
+
+    /**
+     * 날짜 포맷팅 (간단한 형식)
+     * @param {string} dateString - 날짜 문자열
+     * @returns {string} 포맷된 날짜
+     */
+    formatSimpleDate(dateString) {
+        if (!dateString) return '';
+        return dateString.split('T')[0]; // 시간 부분 제거
+    }
+
+    // ========== 프로젝트 분포 데이터 처리 ==========
+
+    /**
+     * 프로젝트별 데이터 집계
+     * @param {Array} recentWorkData - 최근 작업 데이터
+     * @returns {Object} 집계된 프로젝트 데이터
+     */
+    aggregateProjectData(recentWorkData) {
+        console.log('📊 프로젝트 데이터 집계 시작');
+        
+        if (!recentWorkData || recentWorkData.length === 0) {
+            return { projects: [], totalHours: 0 };
+        }
+
+        const projectMap = new Map();
+        let vacationData = null;
+
+        recentWorkData.forEach(work => {
+            const isWeekend = this.isWeekendDate(work.report_date);
+            const isVacation = this.isVacationProject(work.project_name);
+            
+            // 주말 연차는 제외
+            if (isWeekend && isVacation) {
+                console.log('🏖️ 주말 연차/휴무 제외:', work.report_date, work.project_name);
+                return;
+            }
+
+            if (isVacation) {
+                // 연차/휴무 통합 처리
+                if (!vacationData) {
+                    vacationData = {
+                        project_id: 'vacation',
+                        project_name: '연차/휴무',
+                        job_no: null,
+                        totalHours: 0,
+                        workTypes: new Map()
+                    };
+                }
+                this._addWorkToProject(vacationData, work, '연차/휴무');
+            } else {
+                // 일반 프로젝트 처리
+                const projectKey = work.project_id || 'unknown';
+                
+                if (!projectMap.has(projectKey)) {
+                    projectMap.set(projectKey, {
+                        project_id: projectKey,
+                        project_name: work.project_name || `프로젝트 ${projectKey}`,
+                        job_no: work.job_no,
+                        totalHours: 0,
+                        workTypes: new Map()
+                    });
+                }
+                
+                const project = projectMap.get(projectKey);
+                this._addWorkToProject(project, work);
+            }
+        });
+
+        // 결과 배열 생성
+        const projects = Array.from(projectMap.values());
+        if (vacationData && vacationData.totalHours > 0) {
+            projects.push(vacationData);
+        }
+
+        // 작업유형을 배열로 변환하고 정렬
+        projects.forEach(project => {
+            project.workTypes = Array.from(project.workTypes.values())
+                .sort((a, b) => b.totalHours - a.totalHours);
+        });
+
+        // 프로젝트를 총 시간 순으로 정렬 (연차/휴무는 맨 아래)
+        projects.sort((a, b) => {
+            if (a.project_id === 'vacation') return 1;
+            if (b.project_id === 'vacation') return -1;
+            return b.totalHours - a.totalHours;
+        });
+
+        const totalHours = projects.reduce((sum, p) => sum + p.totalHours, 0);
+
+        console.log('✅ 프로젝트 데이터 집계 완료:', projects.length, '개 프로젝트');
+        return { projects, totalHours };
+    }
+
+    /**
+     * 프로젝트에 작업 데이터 추가 (내부 헬퍼)
+     */
+    _addWorkToProject(project, work, overrideWorkTypeName = null) {
+        const hours = parseFloat(work.work_hours) || 0;
+        project.totalHours += hours;
+
+        const workTypeKey = work.work_type_id || 'unknown';
+        const workTypeName = overrideWorkTypeName || work.work_type_name || `작업유형 ${workTypeKey}`;
+
+        if (!project.workTypes.has(workTypeKey)) {
+            project.workTypes.set(workTypeKey, {
+                work_type_id: workTypeKey,
+                work_type_name: workTypeName,
+                totalHours: 0
+            });
+        }
+
+        project.workTypes.get(workTypeKey).totalHours += hours;
+    }
+
+    // ========== 오류 분석 데이터 처리 ==========
+
+    /**
+     * 작업 형태별 오류 데이터 집계
+     * @param {Array} recentWorkData - 최근 작업 데이터
+     * @returns {Array} 집계된 오류 데이터
+     */
+    aggregateErrorData(recentWorkData) {
+        console.log('📊 오류 분석 데이터 집계 시작');
+        
+        if (!recentWorkData || recentWorkData.length === 0) {
+            return [];
+        }
+
+        const workTypeMap = new Map();
+        let vacationData = null;
+
+        recentWorkData.forEach(work => {
+            const isWeekend = this.isWeekendDate(work.report_date);
+            const isVacation = this.isVacationProject(work.project_name);
+            
+            // 주말 연차는 완전히 제외
+            if (isWeekend && isVacation) {
+                console.log('🏖️ 주말 연차/휴무 제외:', work.report_date, work.project_name);
+                return;
+            }
+
+            if (isVacation) {
+                // 모든 연차/휴무를 하나로 통합
+                if (!vacationData) {
+                    vacationData = {
+                        project_id: 'vacation',
+                        project_name: '연차/휴무',
+                        job_no: null,
+                        work_type_id: 'vacation',
+                        work_type_name: '연차/휴무',
+                        regularHours: 0,
+                        errorHours: 0,
+                        errorDetails: new Map(),
+                        isVacation: true
+                    };
+                }
+
+                this._addWorkToErrorData(vacationData, work);
+            } else {
+                // 일반 프로젝트 처리
+                const workTypeKey = work.work_type_id || 'unknown';
+                const combinedKey = `${work.project_id || 'unknown'}_${workTypeKey}`;
+                
+                if (!workTypeMap.has(combinedKey)) {
+                    workTypeMap.set(combinedKey, {
+                        project_id: work.project_id,
+                        project_name: work.project_name || `프로젝트 ${work.project_id}`,
+                        job_no: work.job_no,
+                        work_type_id: workTypeKey,
+                        work_type_name: work.work_type_name || `작업유형 ${workTypeKey}`,
+                        regularHours: 0,
+                        errorHours: 0,
+                        errorDetails: new Map(),
+                        isVacation: false
+                    });
+                }
+
+                const workTypeData = workTypeMap.get(combinedKey);
+                this._addWorkToErrorData(workTypeData, work);
+            }
+        });
+
+        // 결과 배열 생성
+        const result = Array.from(workTypeMap.values());
+        
+        // 연차/휴무 데이터가 있으면 추가
+        if (vacationData && (vacationData.regularHours > 0 || vacationData.errorHours > 0)) {
+            result.push(vacationData);
+        }
+
+        // 최종 데이터 처리
+        const processedResult = result.map(wt => ({
+            ...wt,
+            totalHours: wt.regularHours + wt.errorHours,
+            errorRate: wt.regularHours + wt.errorHours > 0 ? 
+                ((wt.errorHours / (wt.regularHours + wt.errorHours)) * 100).toFixed(1) : '0.0',
+            errorDetails: Array.from(wt.errorDetails.entries()).map(([type, hours]) => ({
+                type, hours
+            }))
+        })).filter(wt => wt.totalHours > 0) // 시간이 있는 것만 표시
+        .sort((a, b) => {
+            // 연차/휴무를 맨 아래로
+            if (a.isVacation && !b.isVacation) return 1;
+            if (!a.isVacation && b.isVacation) return -1;
+            
+            // 같은 프로젝트 내에서는 오류 시간 순으로 정렬
+            if (a.project_id === b.project_id) {
+                return b.errorHours - a.errorHours;
+            }
+            
+            // 다른 프로젝트는 프로젝트명 순으로 정렬
+            return (a.project_name || '').localeCompare(b.project_name || '');
+        });
+
+        console.log('✅ 오류 분석 데이터 집계 완료:', processedResult.length, '개 항목');
+        return processedResult;
+    }
+
+    /**
+     * 작업 데이터를 오류 분석 데이터에 추가 (내부 헬퍼)
+     */
+    _addWorkToErrorData(workTypeData, work) {
+        const hours = parseFloat(work.work_hours) || 0;
+
+        if (work.work_status === 'error' || work.error_type_id) {
+            workTypeData.errorHours += hours;
+            
+            // 오류 유형별 세분화
+            const errorTypeName = work.error_type_name || work.error_description || '설계미스';
+            if (!workTypeData.errorDetails.has(errorTypeName)) {
+                workTypeData.errorDetails.set(errorTypeName, 0);
+            }
+            workTypeData.errorDetails.set(errorTypeName, 
+                workTypeData.errorDetails.get(errorTypeName) + hours
+            );
+        } else {
+            workTypeData.regularHours += hours;
+        }
+    }
+
+    // ========== 차트 데이터 처리 ==========
+
+    /**
+     * 시계열 차트 데이터 변환
+     * @param {Array} dailyData - 일별 데이터
+     * @returns {Object} 차트 데이터
+     */
+    processTimeSeriesData(dailyData) {
+        if (!dailyData || dailyData.length === 0) {
+            return { labels: [], datasets: [] };
+        }
+
+        const labels = dailyData.map(item => this.formatSimpleDate(item.date));
+        const hours = dailyData.map(item => item.total_hours || 0);
+        const workers = dailyData.map(item => item.worker_count || 0);
+
+        return {
+            labels,
+            datasets: [
+                {
+                    label: '총 작업시간',
+                    data: hours,
+                    borderColor: '#3b82f6',
+                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                    tension: 0.4
+                },
+                {
+                    label: '참여 작업자 수',
+                    data: workers,
+                    borderColor: '#10b981',
+                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                    tension: 0.4,
+                    yAxisID: 'y1'
+                }
+            ]
+        };
+    }
+
+    /**
+     * 도넛 차트 데이터 변환
+     * @param {Array} projectData - 프로젝트 데이터
+     * @returns {Object} 차트 데이터
+     */
+    processDonutChartData(projectData) {
+        if (!projectData || projectData.length === 0) {
+            return { labels: [], datasets: [] };
+        }
+
+        const labels = projectData.map(item => item.project_name || item.name);
+        const data = projectData.map(item => item.total_hours || item.hours || 0);
+        const colors = this._generateColors(data.length);
+
+        return {
+            labels,
+            datasets: [{
+                data,
+                backgroundColor: colors,
+                borderWidth: 2,
+                borderColor: '#ffffff'
+            }]
+        };
+    }
+
+    /**
+     * 색상 생성 헬퍼
+     */
+    _generateColors(count) {
+        const baseColors = [
+            '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
+            '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
+        ];
+        
+        const colors = [];
+        for (let i = 0; i < count; i++) {
+            colors.push(baseColors[i % baseColors.length]);
+        }
+        return colors;
+    }
+}
+
+// 전역 인스턴스 생성
+window.WorkAnalysisDataProcessor = new WorkAnalysisDataProcessor();
+
+// Export는 브라우저 환경에서 제거됨
diff --git a/web-ui/js/work-analysis/main-controller.js b/web-ui/js/work-analysis/main-controller.js
new file mode 100644
index 0000000..9dd7074
--- /dev/null
+++ b/web-ui/js/work-analysis/main-controller.js
@@ -0,0 +1,612 @@
+/**
+ * Work Analysis Main Controller Module
+ * 작업 분석 페이지의 메인 컨트롤러 - 모든 모듈을 조율하고 사용자 상호작용을 처리
+ */
+
+class WorkAnalysisMainController {
+    constructor() {
+        this.api = window.WorkAnalysisAPI;
+        this.state = window.WorkAnalysisState;
+        this.dataProcessor = window.WorkAnalysisDataProcessor;
+        this.tableRenderer = window.WorkAnalysisTableRenderer;
+        this.chartRenderer = window.WorkAnalysisChartRenderer;
+        
+        this.init();
+    }
+
+    /**
+     * 초기화
+     */
+    init() {
+        console.log('🚀 작업 분석 메인 컨트롤러 초기화');
+        
+        this.setupEventListeners();
+        this.setupStateListeners();
+        this.initializeUI();
+        
+        console.log('✅ 작업 분석 메인 컨트롤러 초기화 완료');
+    }
+
+    /**
+     * 이벤트 리스너 설정
+     */
+    setupEventListeners() {
+        // 기간 확정 버튼
+        const confirmButton = document.getElementById('confirmPeriodBtn');
+        if (confirmButton) {
+            confirmButton.addEventListener('click', () => this.handlePeriodConfirm());
+        }
+
+        // 분석 모드 탭
+        document.querySelectorAll('[data-mode]').forEach(button => {
+            button.addEventListener('click', (e) => {
+                const mode = e.target.dataset.mode;
+                this.handleModeChange(mode);
+            });
+        });
+
+        // 분석 탭 네비게이션
+        document.querySelectorAll('[data-tab]').forEach(button => {
+            button.addEventListener('click', (e) => {
+                const tabId = e.target.dataset.tab;
+                this.handleTabChange(tabId);
+            });
+        });
+
+        // 개별 분석 실행 버튼들
+        this.setupAnalysisButtons();
+
+        // 날짜 입력 필드
+        const startDateInput = document.getElementById('startDate');
+        const endDateInput = document.getElementById('endDate');
+        
+        if (startDateInput && endDateInput) {
+            [startDateInput, endDateInput].forEach(input => {
+                input.addEventListener('change', () => this.handleDateChange());
+            });
+        }
+    }
+
+    /**
+     * 개별 분석 버튼 설정
+     */
+    setupAnalysisButtons() {
+        const buttons = [
+            { selector: 'button[onclick*="analyzeWorkStatus"]', handler: () => this.analyzeWorkStatus() },
+            { selector: 'button[onclick*="analyzeProjectDistribution"]', handler: () => this.analyzeProjectDistribution() },
+            { selector: 'button[onclick*="analyzeWorkerPerformance"]', handler: () => this.analyzeWorkerPerformance() },
+            { selector: 'button[onclick*="analyzeErrorAnalysis"]', handler: () => this.analyzeErrorAnalysis() }
+        ];
+
+        buttons.forEach(({ selector, handler }) => {
+            const button = document.querySelector(selector);
+            if (button) {
+                // 기존 onclick 제거하고 새 이벤트 리스너 추가
+                button.removeAttribute('onclick');
+                button.addEventListener('click', handler);
+            }
+        });
+    }
+
+    /**
+     * 상태 리스너 설정
+     */
+    setupStateListeners() {
+        // 기간 확정 상태 변경 시 UI 업데이트
+        this.state.subscribe('periodConfirmed', (newState, prevState) => {
+            this.updateAnalysisButtons(newState.isAnalysisEnabled);
+            
+            if (newState.confirmedPeriod.confirmed && !prevState.confirmedPeriod.confirmed) {
+                this.showAnalysisTabs();
+            }
+        });
+
+        // 로딩 상태 변경 시 UI 업데이트
+        this.state.subscribe('loadingState', (newState) => {
+            if (newState.isLoading) {
+                this.showLoading(newState.loadingMessage);
+            } else {
+                this.hideLoading();
+            }
+        });
+
+        // 탭 변경 시 UI 업데이트
+        this.state.subscribe('tabChange', (newState) => {
+            this.updateActiveTab(newState.currentTab);
+        });
+
+        // 에러 발생 시 처리
+        this.state.subscribe('errorOccurred', (newState) => {
+            if (newState.lastError) {
+                this.handleError(newState.lastError);
+            }
+        });
+    }
+
+    /**
+     * UI 초기화
+     */
+    initializeUI() {
+        // 기본 날짜 설정
+        const currentState = this.state.getState();
+        const startDateInput = document.getElementById('startDate');
+        const endDateInput = document.getElementById('endDate');
+        
+        if (startDateInput && currentState.confirmedPeriod.start) {
+            startDateInput.value = currentState.confirmedPeriod.start;
+        }
+        
+        if (endDateInput && currentState.confirmedPeriod.end) {
+            endDateInput.value = currentState.confirmedPeriod.end;
+        }
+
+        // 분석 버튼 초기 상태 설정
+        this.updateAnalysisButtons(false);
+        
+        // 분석 탭 숨김
+        this.hideAnalysisTabs();
+    }
+
+    // ========== 이벤트 핸들러 ==========
+
+    /**
+     * 기간 확정 처리
+     */
+    async handlePeriodConfirm() {
+        try {
+            const startDate = document.getElementById('startDate').value;
+            const endDate = document.getElementById('endDate').value;
+            
+            console.log('🔄 기간 확정 처리 시작:', startDate, '~', endDate);
+            
+            this.state.confirmPeriod(startDate, endDate);
+            
+            this.showToast('기간이 확정되었습니다', 'success');
+            
+            console.log('✅ 기간 확정 완료 - 각 분석 버튼을 눌러서 데이터를 확인하세요');
+            
+        } catch (error) {
+            console.error('❌ 기간 확정 처리 오류:', error);
+            this.state.setError(error);
+            this.showToast(error.message, 'error');
+        }
+    }
+
+    /**
+     * 분석 모드 변경 처리
+     */
+    handleModeChange(mode) {
+        try {
+            this.state.setAnalysisMode(mode);
+            this.updateModeButtons(mode);
+            
+            // 캐시 초기화
+            this.state.clearCache();
+            
+        } catch (error) {
+            this.state.setError(error);
+        }
+    }
+
+    /**
+     * 탭 변경 처리
+     */
+    handleTabChange(tabId) {
+        this.state.setCurrentTab(tabId);
+    }
+
+    /**
+     * 날짜 변경 처리
+     */
+    handleDateChange() {
+        // 날짜가 변경되면 기간 확정 상태 해제
+        this.state.updateState({
+            confirmedPeriod: {
+                ...this.state.getState().confirmedPeriod,
+                confirmed: false
+            },
+            isAnalysisEnabled: false
+        });
+        
+        this.updateAnalysisButtons(false);
+        this.hideAnalysisTabs();
+    }
+
+    // ========== 분석 실행 ==========
+
+    /**
+     * 기본 통계 로드
+     */
+    async loadBasicStats() {
+        const currentState = this.state.getState();
+        const { start, end } = currentState.confirmedPeriod;
+        
+        try {
+            console.log('📊 기본 통계 로딩 시작 - 기간:', start, '~', end);
+            this.state.startLoading('기본 통계를 로딩 중입니다...');
+            
+            console.log('🌐 API 호출 전 - getBasicStats 호출...');
+            const statsResponse = await this.api.getBasicStats(start, end);
+            
+            console.log('📊 기본 통계 API 응답:', statsResponse);
+            
+            if (statsResponse.success && statsResponse.data) {
+                const stats = statsResponse.data;
+                
+                // 정상/오류 시간 계산
+                const totalHours = stats.totalHours || 0;
+                const errorReports = stats.errorRate || 0;
+                const errorHours = Math.round(totalHours * (errorReports / 100));
+                const normalHours = totalHours - errorHours;
+                
+                const cardData = {
+                    totalHours: totalHours,
+                    normalHours: normalHours,
+                    errorHours: errorHours,
+                    workerCount: stats.activeWorkers || stats.activeworkers || 0,
+                    errorRate: errorReports
+                };
+                
+                this.state.setCache('basicStats', cardData);
+                this.updateResultCards(cardData);
+                
+                console.log('✅ 기본 통계 로딩 완료:', cardData);
+            } else {
+                // 기본값으로 카드 업데이트
+                const defaultData = {
+                    totalHours: 0,
+                    normalHours: 0,
+                    errorHours: 0,
+                    workerCount: 0,
+                    errorRate: 0
+                };
+                this.updateResultCards(defaultData);
+                console.warn('⚠️ 기본 통계 데이터가 없어서 기본값으로 설정');
+            }
+            
+        } catch (error) {
+            console.error('❌ 기본 통계 로드 실패:', error);
+            // 에러 시에도 기본값으로 카드 업데이트
+            const defaultData = {
+                totalHours: 0,
+                normalHours: 0,
+                errorHours: 0,
+                workerCount: 0,
+                errorRate: 0
+            };
+            this.updateResultCards(defaultData);
+        } finally {
+            this.state.stopLoading();
+        }
+    }
+
+    /**
+     * 기간별 작업 현황 분석
+     */
+    async analyzeWorkStatus() {
+        if (!this.state.canAnalyze()) {
+            this.showToast('기간을 먼저 확정해주세요', 'warning');
+            return;
+        }
+
+        const currentState = this.state.getState();
+        const { start, end } = currentState.confirmedPeriod;
+        
+        try {
+            this.state.startLoading('기간별 작업 현황을 분석 중입니다...');
+            
+            // 실제 API 호출
+            const batchData = await this.api.batchCall([
+                {
+                    name: 'projectWorkType',
+                    method: 'getProjectWorkTypeAnalysis',
+                    startDate: start,
+                    endDate: end
+                },
+                {
+                    name: 'workerStats',
+                    method: 'getWorkerStats',
+                    startDate: start,
+                    endDate: end
+                },
+                {
+                    name: 'recentWork',
+                    method: 'getRecentWork',
+                    startDate: start,
+                    endDate: end,
+                    limit: 2000
+                }
+            ]);
+            
+            console.log('🔍 기간별 작업 현황 API 응답:', batchData);
+            
+            // 데이터 처리
+            const recentWorkData = batchData.recentWork?.success ? batchData.recentWork.data.data : [];
+            const workerData = batchData.workerStats?.success ? batchData.workerStats.data.data : [];
+            
+            const projectData = this.dataProcessor.aggregateProjectData(recentWorkData);
+            
+            // 테이블 렌더링
+            this.tableRenderer.renderWorkStatusTable(projectData, workerData, recentWorkData);
+            
+            this.showToast('기간별 작업 현황 분석이 완료되었습니다', 'success');
+            
+        } catch (error) {
+            console.error('❌ 기간별 작업 현황 분석 오류:', error);
+            this.state.setError(error);
+            this.showToast('기간별 작업 현황 분석에 실패했습니다', 'error');
+        } finally {
+            this.state.stopLoading();
+        }
+    }
+
+    /**
+     * 프로젝트별 분포 분석
+     */
+    async analyzeProjectDistribution() {
+        if (!this.state.canAnalyze()) {
+            this.showToast('기간을 먼저 확정해주세요', 'warning');
+            return;
+        }
+
+        const currentState = this.state.getState();
+        const { start, end } = currentState.confirmedPeriod;
+        
+        try {
+            this.state.startLoading('프로젝트별 분포를 분석 중입니다...');
+            
+            // 실제 API 호출
+            const distributionData = await this.api.getProjectDistributionData(start, end);
+            
+            console.log('🔍 프로젝트별 분포 API 응답:', distributionData);
+
+            // 데이터 처리
+            const recentWorkData = distributionData.recentWork?.success ? distributionData.recentWork.data.data : [];
+            const workerData = distributionData.workerStats?.success ? distributionData.workerStats.data.data : [];
+            
+            const projectData = this.dataProcessor.aggregateProjectData(recentWorkData);
+            
+            console.log('📊 취합된 프로젝트 데이터:', projectData);
+            
+            // 테이블 렌더링
+            this.tableRenderer.renderProjectDistributionTable(projectData, workerData);
+            
+            this.showToast('프로젝트별 분포 분석이 완료되었습니다', 'success');
+            
+        } catch (error) {
+            console.error('❌ 프로젝트별 분포 분석 오류:', error);
+            this.state.setError(error);
+            this.showToast('프로젝트별 분포 분석에 실패했습니다', 'error');
+        } finally {
+            this.state.stopLoading();
+        }
+    }
+
+    /**
+     * 작업자별 성과 분석
+     */
+    async analyzeWorkerPerformance() {
+        if (!this.state.canAnalyze()) {
+            this.showToast('기간을 먼저 확정해주세요', 'warning');
+            return;
+        }
+
+        const currentState = this.state.getState();
+        const { start, end } = currentState.confirmedPeriod;
+        
+        try {
+            this.state.startLoading('작업자별 성과를 분석 중입니다...');
+            
+            const workerStatsResponse = await this.api.getWorkerStats(start, end);
+            
+            console.log('👤 작업자 통계 API 응답:', workerStatsResponse);
+            
+            if (workerStatsResponse.success && workerStatsResponse.data) {
+                this.chartRenderer.renderWorkerPerformanceChart(workerStatsResponse.data);
+                this.showToast('작업자별 성과 분석이 완료되었습니다', 'success');
+            } else {
+                throw new Error('작업자 데이터를 가져올 수 없습니다');
+            }
+            
+        } catch (error) {
+            console.error('❌ 작업자별 성과 분석 오류:', error);
+            this.state.setError(error);
+            this.showToast('작업자별 성과 분석에 실패했습니다', 'error');
+        } finally {
+            this.state.stopLoading();
+        }
+    }
+
+    /**
+     * 오류 분석
+     */
+    async analyzeErrorAnalysis() {
+        if (!this.state.canAnalyze()) {
+            this.showToast('기간을 먼저 확정해주세요', 'warning');
+            return;
+        }
+
+        const currentState = this.state.getState();
+        const { start, end } = currentState.confirmedPeriod;
+        
+        try {
+            this.state.startLoading('오류 분석을 진행 중입니다...');
+            
+            // 병렬로 API 호출
+            const [recentWorkResponse, errorAnalysisResponse] = await Promise.all([
+                this.api.getRecentWork(start, end, 2000),
+                this.api.getErrorAnalysis(start, end)
+            ]);
+            
+            console.log('🔍 오류 분석 API 응답:', recentWorkResponse);
+            
+            if (recentWorkResponse.success && recentWorkResponse.data) {
+                this.tableRenderer.renderErrorAnalysisTable(recentWorkResponse.data);
+                this.showToast('오류 분석이 완료되었습니다', 'success');
+            } else {
+                throw new Error('작업 데이터를 가져올 수 없습니다');
+            }
+            
+        } catch (error) {
+            console.error('❌ 오류 분석 실패:', error);
+            this.state.setError(error);
+            this.showToast('오류 분석에 실패했습니다', 'error');
+        } finally {
+            this.state.stopLoading();
+        }
+    }
+
+    // ========== UI 업데이트 ==========
+
+    /**
+     * 결과 카드 업데이트
+     */
+    updateResultCards(stats) {
+        const cards = {
+            totalHours: stats.totalHours || 0,
+            normalHours: stats.normalHours || 0,
+            errorHours: stats.errorHours || 0,
+            workerCount: stats.activeWorkers || 0,
+            errorRate: stats.errorRate || 0
+        };
+
+        Object.entries(cards).forEach(([key, value]) => {
+            const element = document.getElementById(key);
+            if (element) {
+                element.textContent = typeof value === 'number' ? 
+                    (key.includes('Rate') ? `${value}%` : value.toLocaleString()) : value;
+            }
+        });
+    }
+
+    /**
+     * 분석 버튼 상태 업데이트
+     */
+    updateAnalysisButtons(enabled) {
+        const buttons = document.querySelectorAll('.chart-analyze-btn');
+        buttons.forEach(button => {
+            button.disabled = !enabled;
+            button.style.opacity = enabled ? '1' : '0.5';
+        });
+    }
+
+    /**
+     * 분석 탭 표시
+     */
+    showAnalysisTabs() {
+        const tabNavigation = document.getElementById('analysisTabNavigation');
+        if (tabNavigation) {
+            tabNavigation.style.display = 'block';
+        }
+    }
+
+    /**
+     * 분석 탭 숨김
+     */
+    hideAnalysisTabs() {
+        const tabNavigation = document.getElementById('analysisTabNavigation');
+        if (tabNavigation) {
+            tabNavigation.style.display = 'none';
+        }
+    }
+
+    /**
+     * 활성 탭 업데이트
+     */
+    updateActiveTab(tabId) {
+        // 탭 버튼 업데이트
+        document.querySelectorAll('.tab-button').forEach(button => {
+            button.classList.remove('active');
+            if (button.dataset.tab === tabId) {
+                button.classList.add('active');
+            }
+        });
+
+        // 탭 컨텐츠 업데이트
+        document.querySelectorAll('.tab-content').forEach(content => {
+            content.classList.remove('active');
+            if (content.id === `${tabId}-tab`) {
+                content.classList.add('active');
+            }
+        });
+    }
+
+    /**
+     * 모드 버튼 업데이트
+     */
+    updateModeButtons(mode) {
+        document.querySelectorAll('[data-mode]').forEach(button => {
+            button.classList.remove('active');
+            if (button.dataset.mode === mode) {
+                button.classList.add('active');
+            }
+        });
+    }
+
+    /**
+     * 로딩 표시
+     */
+    showLoading(message = '분석 중입니다...') {
+        const loadingElement = document.getElementById('loadingState');
+        if (loadingElement) {
+            const textElement = loadingElement.querySelector('.loading-text');
+            if (textElement) {
+                textElement.textContent = message;
+            }
+            loadingElement.style.display = 'flex';
+        }
+    }
+
+    /**
+     * 로딩 숨김
+     */
+    hideLoading() {
+        const loadingElement = document.getElementById('loadingState');
+        if (loadingElement) {
+            loadingElement.style.display = 'none';
+        }
+    }
+
+    /**
+     * 토스트 메시지 표시
+     */
+    showToast(message, type = 'info') {
+        console.log(`📢 ${type.toUpperCase()}: ${message}`);
+        
+        // 간단한 토스트 구현 (실제로는 더 정교한 토스트 라이브러리 사용 권장)
+        if (type === 'error') {
+            alert(`❌ ${message}`);
+        } else if (type === 'success') {
+            console.log(`✅ ${message}`);
+        } else if (type === 'warning') {
+            alert(`⚠️ ${message}`);
+        }
+    }
+
+    /**
+     * 에러 처리
+     */
+    handleError(errorInfo) {
+        console.error('❌ 에러 발생:', errorInfo);
+        this.showToast(errorInfo.message, 'error');
+    }
+
+    // ========== 유틸리티 ==========
+
+    /**
+     * 컨트롤러 상태 디버그
+     */
+    debug() {
+        console.log('🔍 메인 컨트롤러 상태:');
+        console.log('- API 클라이언트:', this.api);
+        console.log('- 상태 관리자:', this.state.getState());
+        console.log('- 차트 상태:', this.chartRenderer.getChartStatus());
+    }
+}
+
+// 전역 인스턴스 생성 및 초기화
+document.addEventListener('DOMContentLoaded', () => {
+    window.WorkAnalysisMainController = new WorkAnalysisMainController();
+});
+
+// Export는 브라우저 환경에서 제거됨
diff --git a/web-ui/js/work-analysis/module-loader.js b/web-ui/js/work-analysis/module-loader.js
new file mode 100644
index 0000000..b68ac64
--- /dev/null
+++ b/web-ui/js/work-analysis/module-loader.js
@@ -0,0 +1,267 @@
+/**
+ * Work Analysis Module Loader
+ * 작업 분석 모듈들을 순서대로 로드하고 초기화하는 로더
+ */
+
+class WorkAnalysisModuleLoader {
+    constructor() {
+        this.modules = [
+            { name: 'API Client', path: '/js/work-analysis/api-client.js', loaded: false },
+            { name: 'Data Processor', path: '/js/work-analysis/data-processor.js', loaded: false },
+            { name: 'State Manager', path: '/js/work-analysis/state-manager.js', loaded: false },
+            { name: 'Table Renderer', path: '/js/work-analysis/table-renderer.js', loaded: false },
+            { name: 'Chart Renderer', path: '/js/work-analysis/chart-renderer.js', loaded: false },
+            { name: 'Main Controller', path: '/js/work-analysis/main-controller.js', loaded: false }
+        ];
+        
+        this.loadingPromise = null;
+    }
+
+    /**
+     * 모든 모듈 로드
+     * @returns {Promise} 로딩 완료 Promise
+     */
+    async loadAll() {
+        if (this.loadingPromise) {
+            return this.loadingPromise;
+        }
+
+        this.loadingPromise = this._loadModules();
+        return this.loadingPromise;
+    }
+
+    /**
+     * 모듈들을 순차적으로 로드
+     */
+    async _loadModules() {
+        console.log('🚀 작업 분석 모듈 로딩 시작');
+        
+        try {
+            // 의존성 순서대로 로드
+            for (const module of this.modules) {
+                await this._loadModule(module);
+            }
+
+            console.log('✅ 모든 작업 분석 모듈 로딩 완료');
+            this._onAllModulesLoaded();
+            
+        } catch (error) {
+            console.error('❌ 모듈 로딩 실패:', error);
+            this._onLoadingError(error);
+            throw error;
+        }
+    }
+
+    /**
+     * 개별 모듈 로드
+     * @param {Object} module - 모듈 정보
+     */
+    async _loadModule(module) {
+        return new Promise((resolve, reject) => {
+            console.log(`📦 로딩 중: ${module.name}`);
+            
+            const script = document.createElement('script');
+            script.src = module.path;
+            script.type = 'text/javascript';
+            
+            script.onload = () => {
+                module.loaded = true;
+                console.log(`✅ 로딩 완료: ${module.name}`);
+                resolve();
+            };
+            
+            script.onerror = (error) => {
+                console.error(`❌ 로딩 실패: ${module.name}`, error);
+                reject(new Error(`Failed to load ${module.name}: ${module.path}`));
+            };
+            
+            document.head.appendChild(script);
+        });
+    }
+
+    /**
+     * 모든 모듈 로딩 완료 시 호출
+     */
+    _onAllModulesLoaded() {
+        // 전역 변수 확인
+        const requiredGlobals = [
+            'WorkAnalysisAPI',
+            'WorkAnalysisDataProcessor', 
+            'WorkAnalysisState',
+            'WorkAnalysisTableRenderer',
+            'WorkAnalysisChartRenderer'
+        ];
+
+        const missingGlobals = requiredGlobals.filter(name => !window[name]);
+        
+        if (missingGlobals.length > 0) {
+            console.warn('⚠️ 일부 전역 객체가 누락됨:', missingGlobals);
+        }
+
+        // 하위 호환성을 위한 전역 함수들 설정
+        this._setupLegacyFunctions();
+        
+        // 모듈 로딩 완료 이벤트 발생
+        window.dispatchEvent(new CustomEvent('workAnalysisModulesLoaded', {
+            detail: { modules: this.modules }
+        }));
+        
+        console.log('🎉 작업 분석 시스템 준비 완료');
+    }
+
+    /**
+     * 하위 호환성을 위한 전역 함수 설정
+     */
+    _setupLegacyFunctions() {
+        // 기존 HTML에서 사용하던 함수들을 새 모듈 시스템으로 연결
+        const legacyFunctions = {
+            // 기간 확정
+            confirmPeriod: () => {
+                if (window.WorkAnalysisMainController) {
+                    window.WorkAnalysisMainController.handlePeriodConfirm();
+                }
+            },
+            
+            // 분석 모드 변경
+            switchAnalysisMode: (mode) => {
+                if (window.WorkAnalysisState) {
+                    window.WorkAnalysisState.setAnalysisMode(mode);
+                }
+            },
+            
+            // 탭 변경
+            switchTab: (tabId) => {
+                if (window.WorkAnalysisState) {
+                    window.WorkAnalysisState.setCurrentTab(tabId);
+                }
+            },
+            
+            // 개별 분석 함수들
+            analyzeWorkStatus: () => {
+                if (window.WorkAnalysisMainController) {
+                    window.WorkAnalysisMainController.analyzeWorkStatus();
+                }
+            },
+            
+            analyzeProjectDistribution: () => {
+                if (window.WorkAnalysisMainController) {
+                    window.WorkAnalysisMainController.analyzeProjectDistribution();
+                }
+            },
+            
+            analyzeWorkerPerformance: () => {
+                if (window.WorkAnalysisMainController) {
+                    window.WorkAnalysisMainController.analyzeWorkerPerformance();
+                }
+            },
+            
+            analyzeErrorAnalysis: () => {
+                if (window.WorkAnalysisMainController) {
+                    window.WorkAnalysisMainController.analyzeErrorAnalysis();
+                }
+            }
+        };
+
+        // 전역 함수로 등록
+        Object.assign(window, legacyFunctions);
+        
+        console.log('🔗 하위 호환성 함수 설정 완료');
+    }
+
+    /**
+     * 로딩 에러 처리
+     */
+    _onLoadingError(error) {
+        // 에러 UI 표시
+        const container = document.querySelector('.analysis-container');
+        if (container) {
+            const errorHTML = `
+                <div style="
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    height: 50vh;
+                    text-align: center;
+                    color: #ef4444;
+                ">
+                    <div style="font-size: 4rem; margin-bottom: 1rem;">⚠️</div>
+                    <h2 style="margin-bottom: 1rem;">모듈 로딩 실패</h2>
+                    <p style="margin-bottom: 2rem; color: #666;">
+                        작업 분석 시스템을 로드하는 중 오류가 발생했습니다.<br>
+                        페이지를 새로고침하거나 관리자에게 문의하세요.
+                    </p>
+                    <button onclick="location.reload()" style="
+                        padding: 0.75rem 1.5rem;
+                        background: #3b82f6;
+                        color: white;
+                        border: none;
+                        border-radius: 0.5rem;
+                        cursor: pointer;
+                        font-size: 1rem;
+                    ">
+                        페이지 새로고침
+                    </button>
+                    <details style="margin-top: 2rem; text-align: left; max-width: 600px;">
+                        <summary style="cursor: pointer; color: #666;">기술적 세부사항</summary>
+                        <pre style="
+                            background: #f8f9fa;
+                            padding: 1rem;
+                            border-radius: 0.5rem;
+                            margin-top: 1rem;
+                            overflow-x: auto;
+                            font-size: 0.875rem;
+                        ">${error.message}</pre>
+                    </details>
+                </div>
+            `;
+            
+            container.innerHTML = errorHTML;
+        }
+    }
+
+    /**
+     * 로딩 상태 확인
+     * @returns {Object} 로딩 상태 정보
+     */
+    getLoadingStatus() {
+        const total = this.modules.length;
+        const loaded = this.modules.filter(m => m.loaded).length;
+        
+        return {
+            total,
+            loaded,
+            percentage: Math.round((loaded / total) * 100),
+            isComplete: loaded === total,
+            modules: this.modules.map(m => ({
+                name: m.name,
+                loaded: m.loaded
+            }))
+        };
+    }
+
+    /**
+     * 특정 모듈 로딩 상태 확인
+     * @param {string} moduleName - 모듈명
+     * @returns {boolean} 로딩 완료 여부
+     */
+    isModuleLoaded(moduleName) {
+        const module = this.modules.find(m => m.name === moduleName);
+        return module ? module.loaded : false;
+    }
+}
+
+// 전역 인스턴스 생성
+window.WorkAnalysisModuleLoader = new WorkAnalysisModuleLoader();
+
+// 자동 로딩 시작 (DOM이 준비되면)
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        window.WorkAnalysisModuleLoader.loadAll();
+    });
+} else {
+    // DOM이 이미 준비된 경우 즉시 로딩
+    window.WorkAnalysisModuleLoader.loadAll();
+}
+
+// Export는 브라우저 환경에서 제거됨
diff --git a/web-ui/js/work-analysis/state-manager.js b/web-ui/js/work-analysis/state-manager.js
new file mode 100644
index 0000000..0668bdf
--- /dev/null
+++ b/web-ui/js/work-analysis/state-manager.js
@@ -0,0 +1,382 @@
+/**
+ * Work Analysis State Manager Module
+ * 작업 분석 페이지의 상태 관리를 담당하는 모듈
+ */
+
+class WorkAnalysisStateManager {
+    constructor() {
+        this.state = {
+            // 분석 설정
+            analysisMode: 'period', // 'period' | 'project'
+            confirmedPeriod: {
+                start: null,
+                end: null,
+                confirmed: false
+            },
+            
+            // UI 상태
+            currentTab: 'work-status',
+            isAnalysisEnabled: false,
+            isLoading: false,
+            
+            // 데이터 캐시
+            cache: {
+                basicStats: null,
+                chartData: null,
+                projectDistribution: null,
+                errorAnalysis: null
+            },
+            
+            // 에러 상태
+            lastError: null
+        };
+        
+        this.listeners = new Map();
+        this.init();
+    }
+
+    /**
+     * 초기화
+     */
+    init() {
+        console.log('🔧 상태 관리자 초기화');
+        
+        // 기본 날짜 설정 (현재 월)
+        const now = new Date();
+        const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+        const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+        
+        this.updateState({
+            confirmedPeriod: {
+                start: this.formatDate(startOfMonth),
+                end: this.formatDate(endOfMonth),
+                confirmed: false
+            }
+        });
+    }
+
+    /**
+     * 상태 업데이트
+     * @param {Object} updates - 업데이트할 상태
+     */
+    updateState(updates) {
+        const prevState = { ...this.state };
+        this.state = { ...this.state, ...updates };
+        
+        console.log('🔄 상태 업데이트:', updates);
+        
+        // 리스너들에게 상태 변경 알림
+        this.notifyListeners(prevState, this.state);
+    }
+
+    /**
+     * 상태 리스너 등록
+     * @param {string} key - 리스너 키
+     * @param {Function} callback - 콜백 함수
+     */
+    subscribe(key, callback) {
+        this.listeners.set(key, callback);
+    }
+
+    /**
+     * 상태 리스너 제거
+     * @param {string} key - 리스너 키
+     */
+    unsubscribe(key) {
+        this.listeners.delete(key);
+    }
+
+    /**
+     * 리스너들에게 알림
+     */
+    notifyListeners(prevState, newState) {
+        this.listeners.forEach((callback, key) => {
+            try {
+                callback(newState, prevState);
+            } catch (error) {
+                console.error(`❌ 리스너 ${key} 오류:`, error);
+            }
+        });
+    }
+
+    // ========== 분석 설정 관리 ==========
+
+    /**
+     * 분석 모드 변경
+     * @param {string} mode - 분석 모드 ('period' | 'project')
+     */
+    setAnalysisMode(mode) {
+        if (mode !== 'period' && mode !== 'project') {
+            throw new Error('유효하지 않은 분석 모드입니다.');
+        }
+        
+        this.updateState({ 
+            analysisMode: mode,
+            currentTab: 'work-status' // 모드 변경 시 첫 번째 탭으로 리셋
+        });
+    }
+
+    /**
+     * 기간 확정
+     * @param {string} startDate - 시작일
+     * @param {string} endDate - 종료일
+     */
+    confirmPeriod(startDate, endDate) {
+        // 날짜 유효성 검사
+        if (!startDate || !endDate) {
+            throw new Error('시작일과 종료일을 모두 입력해주세요.');
+        }
+
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+
+        if (start > end) {
+            throw new Error('시작일이 종료일보다 늦을 수 없습니다.');
+        }
+
+        // 최대 1년 제한
+        const maxDays = 365;
+        const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
+        if (daysDiff > maxDays) {
+            throw new Error(`분석 기간은 최대 ${maxDays}일까지 가능합니다.`);
+        }
+
+        this.updateState({
+            confirmedPeriod: {
+                start: startDate,
+                end: endDate,
+                confirmed: true
+            },
+            isAnalysisEnabled: true,
+            // 기간 변경 시 캐시 초기화
+            cache: {
+                basicStats: null,
+                chartData: null,
+                projectDistribution: null,
+                errorAnalysis: null
+            }
+        });
+
+        console.log('✅ 기간 확정:', startDate, '~', endDate);
+    }
+
+    /**
+     * 현재 탭 변경
+     * @param {string} tabId - 탭 ID
+     */
+    setCurrentTab(tabId) {
+        const validTabs = ['work-status', 'project-distribution', 'worker-performance', 'error-analysis'];
+        
+        if (!validTabs.includes(tabId)) {
+            console.warn('유효하지 않은 탭 ID:', tabId);
+            return;
+        }
+
+        this.updateState({ currentTab: tabId });
+        
+        // DOM 업데이트 직접 수행
+        this.updateTabDOM(tabId);
+        
+        console.log('🔄 탭 전환:', tabId);
+    }
+
+    /**
+     * 탭 DOM 업데이트
+     * @param {string} tabId - 탭 ID
+     */
+    updateTabDOM(tabId) {
+        // 탭 버튼 업데이트
+        document.querySelectorAll('.tab-button').forEach(button => {
+            button.classList.remove('active');
+            if (button.dataset.tab === tabId) {
+                button.classList.add('active');
+            }
+        });
+
+        // 탭 컨텐츠 업데이트
+        document.querySelectorAll('.tab-content').forEach(content => {
+            content.classList.remove('active');
+            if (content.id === `${tabId}-tab`) {
+                content.classList.add('active');
+            }
+        });
+    }
+
+    // ========== 로딩 상태 관리 ==========
+
+    /**
+     * 로딩 시작
+     * @param {string} message - 로딩 메시지
+     */
+    startLoading(message = '분석 중입니다...') {
+        this.updateState({ 
+            isLoading: true,
+            loadingMessage: message 
+        });
+    }
+
+    /**
+     * 로딩 종료
+     */
+    stopLoading() {
+        this.updateState({ 
+            isLoading: false,
+            loadingMessage: null 
+        });
+    }
+
+    // ========== 데이터 캐시 관리 ==========
+
+    /**
+     * 캐시 데이터 저장
+     * @param {string} key - 캐시 키
+     * @param {*} data - 저장할 데이터
+     */
+    setCache(key, data) {
+        this.updateState({
+            cache: {
+                ...this.state.cache,
+                [key]: {
+                    data,
+                    timestamp: Date.now()
+                }
+            }
+        });
+    }
+
+    /**
+     * 캐시 데이터 조회
+     * @param {string} key - 캐시 키
+     * @param {number} maxAge - 최대 유효 시간 (밀리초)
+     * @returns {*} 캐시된 데이터 또는 null
+     */
+    getCache(key, maxAge = 5 * 60 * 1000) { // 기본 5분
+        const cached = this.state.cache[key];
+        
+        if (!cached) {
+            return null;
+        }
+
+        const age = Date.now() - cached.timestamp;
+        if (age > maxAge) {
+            console.log('🗑️ 캐시 만료:', key);
+            return null;
+        }
+
+        console.log('📦 캐시 히트:', key);
+        return cached.data;
+    }
+
+    /**
+     * 캐시 초기화
+     * @param {string} key - 특정 키만 초기화 (선택사항)
+     */
+    clearCache(key = null) {
+        if (key) {
+            this.updateState({
+                cache: {
+                    ...this.state.cache,
+                    [key]: null
+                }
+            });
+        } else {
+            this.updateState({
+                cache: {
+                    basicStats: null,
+                    chartData: null,
+                    projectDistribution: null,
+                    errorAnalysis: null
+                }
+            });
+        }
+    }
+
+    // ========== 에러 관리 ==========
+
+    /**
+     * 에러 설정
+     * @param {Error|string} error - 에러 객체 또는 메시지
+     */
+    setError(error) {
+        const errorInfo = {
+            message: error instanceof Error ? error.message : error,
+            timestamp: Date.now(),
+            stack: error instanceof Error ? error.stack : null
+        };
+
+        this.updateState({ 
+            lastError: errorInfo,
+            isLoading: false 
+        });
+
+        console.error('❌ 에러 발생:', errorInfo);
+    }
+
+    /**
+     * 에러 초기화
+     */
+    clearError() {
+        this.updateState({ lastError: null });
+    }
+
+    // ========== 유틸리티 ==========
+
+    /**
+     * 날짜 포맷팅
+     * @param {Date} date - 날짜 객체
+     * @returns {string} YYYY-MM-DD 형식
+     */
+    formatDate(date) {
+        return date.toISOString().split('T')[0];
+    }
+
+    /**
+     * 현재 상태 조회
+     * @returns {Object} 현재 상태
+     */
+    getState() {
+        return { ...this.state };
+    }
+
+    /**
+     * 분석 가능 여부 확인
+     * @returns {boolean} 분석 가능 여부
+     */
+    canAnalyze() {
+        return this.state.confirmedPeriod.confirmed && 
+               this.state.confirmedPeriod.start && 
+               this.state.confirmedPeriod.end &&
+               !this.state.isLoading;
+    }
+
+    /**
+     * 상태 디버그 정보 출력
+     */
+    debug() {
+        console.log('🔍 현재 상태:', this.state);
+        console.log('👂 등록된 리스너:', Array.from(this.listeners.keys()));
+    }
+}
+
+// 전역 인스턴스 생성
+window.WorkAnalysisState = new WorkAnalysisStateManager();
+
+// 하위 호환성을 위한 전역 변수들
+Object.defineProperty(window, 'currentAnalysisMode', {
+    get: () => window.WorkAnalysisState.state.analysisMode,
+    set: (value) => window.WorkAnalysisState.setAnalysisMode(value)
+});
+
+Object.defineProperty(window, 'confirmedStartDate', {
+    get: () => window.WorkAnalysisState.state.confirmedPeriod.start
+});
+
+Object.defineProperty(window, 'confirmedEndDate', {
+    get: () => window.WorkAnalysisState.state.confirmedPeriod.end
+});
+
+Object.defineProperty(window, 'isAnalysisEnabled', {
+    get: () => window.WorkAnalysisState.state.isAnalysisEnabled
+});
+
+// Export는 브라우저 환경에서 제거됨
diff --git a/web-ui/js/work-analysis/table-renderer.js b/web-ui/js/work-analysis/table-renderer.js
new file mode 100644
index 0000000..6572f04
--- /dev/null
+++ b/web-ui/js/work-analysis/table-renderer.js
@@ -0,0 +1,510 @@
+/**
+ * Work Analysis Table Renderer Module
+ * 작업 분석 테이블 렌더링을 담당하는 모듈
+ */
+
+class WorkAnalysisTableRenderer {
+    constructor() {
+        this.dataProcessor = window.WorkAnalysisDataProcessor;
+    }
+
+    // ========== 프로젝트 분포 테이블 ==========
+
+    /**
+     * 프로젝트 분포 테이블 렌더링 (Production Report 스타일)
+     * @param {Array} projectData - 프로젝트 데이터
+     * @param {Array} workerData - 작업자 데이터
+     */
+    renderProjectDistributionTable(projectData, workerData) {
+        console.log('📋 프로젝트별 분포 테이블 렌더링 시작');
+        
+        const tbody = document.getElementById('projectDistributionTableBody');
+        const tfoot = document.getElementById('projectDistributionTableFooter');
+        
+        if (!tbody) {
+            console.error('❌ projectDistributionTableBody 요소를 찾을 수 없습니다');
+            return;
+        }
+
+        // 프로젝트 데이터가 없으면 작업자 데이터로 대체
+        if (!projectData || !projectData.projects || projectData.projects.length === 0) {
+            console.log('⚠️ 프로젝트 데이터가 없어서 작업자 데이터로 대체합니다.');
+            this._renderFallbackTable(workerData, tbody, tfoot);
+            return;
+        }
+
+        let tableRows = [];
+        let grandTotalHours = 0;
+        let grandTotalManDays = 0;
+        let grandTotalLaborCost = 0;
+
+        // 공수당 인건비 (350,000원)
+        const manDayRate = 350000;
+
+        // 먼저 전체 시간을 계산 (부하율 계산용)
+        projectData.projects.forEach(project => {
+            project.workTypes.forEach(workType => {
+                grandTotalHours += workType.totalHours;
+            });
+        });
+
+        // 프로젝트별로 렌더링
+        projectData.projects.forEach(project => {
+            const projectName = project.project_name || '알 수 없는 프로젝트';
+            const jobNo = project.job_no || 'N/A';
+            const workTypes = project.workTypes || [];
+
+            if (workTypes.length === 0) {
+                // 작업유형이 없는 경우
+                const projectHours = project.totalHours || 0;
+                const manDays = Math.round((projectHours / 8) * 100) / 100;
+                const laborCost = manDays * manDayRate;
+                const loadRate = grandTotalHours > 0 ? ((projectHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+
+                grandTotalManDays += manDays;
+                grandTotalLaborCost += laborCost;
+
+                const isVacation = project.project_id === 'vacation';
+                const displayText = isVacation ? projectName : jobNo;
+
+                tableRows.push(`
+                    <tr class="project-group ${isVacation ? 'vacation-project' : ''}">
+                        <td class="project-name">${displayText}</td>
+                        <td class="work-content">데이터 없음</td>
+                        <td class="man-days">${manDays}</td>
+                        <td class="load-rate">${loadRate}%</td>
+                        <td class="labor-cost">₩${laborCost.toLocaleString()}</td>
+                    </tr>
+                `);
+            } else {
+                // 작업유형별 렌더링
+                workTypes.forEach((workType, index) => {
+                    const isFirstWorkType = index === 0;
+                    const rowspan = workTypes.length;
+                    const workTypeHours = workType.totalHours || 0;
+                    const manDays = Math.round((workTypeHours / 8) * 100) / 100;
+                    const laborCost = manDays * manDayRate;
+                    const loadRate = grandTotalHours > 0 ? ((workTypeHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+
+                    grandTotalManDays += manDays;
+                    grandTotalLaborCost += laborCost;
+
+                    const isVacation = project.project_id === 'vacation';
+                    const displayText = isVacation ? projectName : jobNo;
+
+                    tableRows.push(`
+                        <tr class="project-group ${isVacation ? 'vacation-project' : ''}">
+                            ${isFirstWorkType ? `<td class="project-name" rowspan="${rowspan}">${displayText}</td>` : ''}
+                            <td class="work-content">${workType.work_type_name}</td>
+                            <td class="man-days">${manDays}</td>
+                            <td class="load-rate">${loadRate}%</td>
+                            <td class="labor-cost">₩${laborCost.toLocaleString()}</td>
+                        </tr>
+                    `);
+                });
+
+                // 프로젝트 소계 행 추가
+                const projectTotalHours = workTypes.reduce((sum, wt) => sum + (wt.totalHours || 0), 0);
+                const projectTotalManDays = Math.round((projectTotalHours / 8) * 100) / 100;
+                const projectTotalLaborCost = projectTotalManDays * manDayRate;
+                const projectLoadRate = grandTotalHours > 0 ? ((projectTotalHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+
+                tableRows.push(`
+                    <tr class="project-subtotal">
+                        <td colspan="2"><strong>${projectName} 소계</strong></td>
+                        <td><strong>${projectTotalManDays}</strong></td>
+                        <td><strong>${projectLoadRate}%</strong></td>
+                        <td><strong>₩${projectTotalLaborCost.toLocaleString()}</strong></td>
+                    </tr>
+                `);
+            }
+        });
+
+        // 테이블 업데이트
+        tbody.innerHTML = tableRows.join('');
+
+        // 총계 업데이트
+        if (tfoot) {
+            document.getElementById('totalManDays').textContent = grandTotalManDays.toFixed(2);
+            document.getElementById('totalLaborCost').textContent = `₩${grandTotalLaborCost.toLocaleString()}`;
+            tfoot.style.display = 'table-footer-group';
+        }
+
+        console.log('✅ 프로젝트별 분포 테이블 렌더링 완료');
+    }
+
+    /**
+     * 대체 테이블 렌더링 (작업자 데이터 기반)
+     */
+    _renderFallbackTable(workerData, tbody, tfoot) {
+        if (!workerData || workerData.length === 0) {
+            tbody.innerHTML = `
+                <tr>
+                    <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                        해당 기간에 데이터가 없습니다
+                    </td>
+                </tr>
+            `;
+            if (tfoot) tfoot.style.display = 'none';
+            return;
+        }
+
+        const manDayRate = 350000;
+        let totalManDays = 0;
+        let totalLaborCost = 0;
+
+        const tableRows = workerData.map(worker => {
+            const hours = worker.totalHours || 0;
+            const manDays = Math.round((hours / 8) * 100) / 100;
+            const laborCost = manDays * manDayRate;
+            
+            totalManDays += manDays;
+            totalLaborCost += laborCost;
+
+            return `
+                <tr class="project-group">
+                    <td class="project-name">작업자 기반</td>
+                    <td class="work-content">${worker.worker_name}</td>
+                    <td class="man-days">${manDays}</td>
+                    <td class="load-rate">-</td>
+                    <td class="labor-cost">₩${laborCost.toLocaleString()}</td>
+                </tr>
+            `;
+        });
+
+        tbody.innerHTML = tableRows.join('');
+
+        // 총계 업데이트
+        if (tfoot) {
+            document.getElementById('totalManDays').textContent = totalManDays.toFixed(2);
+            document.getElementById('totalLaborCost').textContent = `₩${totalLaborCost.toLocaleString()}`;
+            tfoot.style.display = 'table-footer-group';
+        }
+    }
+
+    // ========== 오류 분석 테이블 ==========
+
+    /**
+     * 오류 분석 테이블 렌더링
+     * @param {Array} recentWorkData - 최근 작업 데이터
+     */
+    renderErrorAnalysisTable(recentWorkData) {
+        console.log('📊 오류 분석 테이블 렌더링 시작');
+        console.log('📊 받은 데이터:', recentWorkData);
+        
+        const tableBody = document.getElementById('errorAnalysisTableBody');
+        const tableFooter = document.getElementById('errorAnalysisTableFooter');
+        
+        console.log('📊 DOM 요소 확인:', { tableBody, tableFooter });
+        
+        // DOM 요소 존재 확인
+        if (!tableBody) {
+            console.error('❌ errorAnalysisTableBody 요소를 찾을 수 없습니다');
+            return;
+        }
+        
+        if (!recentWorkData || recentWorkData.length === 0) {
+            tableBody.innerHTML = `
+                <tr>
+                    <td colspan="6" style="text-align: center; padding: 2rem; color: #666;">
+                        해당 기간에 오류 데이터가 없습니다
+                    </td>
+                </tr>
+            `;
+            if (tableFooter) {
+                tableFooter.style.display = 'none';
+            }
+            return;
+        }
+
+        // 작업 형태별 오류 데이터 집계
+        const errorData = this.dataProcessor.aggregateErrorData(recentWorkData);
+        
+        let tableRows = [];
+        let grandTotalHours = 0;
+        let grandTotalRegularHours = 0;
+        let grandTotalErrorHours = 0;
+
+        // 프로젝트별로 그룹화
+        const projectGroups = new Map();
+        errorData.forEach(workType => {
+            const projectKey = workType.isVacation ? 'vacation' : workType.project_id;
+            if (!projectGroups.has(projectKey)) {
+                projectGroups.set(projectKey, []);
+            }
+            projectGroups.get(projectKey).push(workType);
+        });
+
+        // 프로젝트별로 렌더링
+        Array.from(projectGroups.entries()).forEach(([projectKey, workTypes]) => {
+            workTypes.forEach((workType, index) => {
+                grandTotalHours += workType.totalHours;
+                grandTotalRegularHours += workType.regularHours;
+                grandTotalErrorHours += workType.errorHours;
+
+                const rowClass = workType.isVacation ? 'vacation-project' : 'project-group';
+                const isFirstWorkType = index === 0;
+                const rowspan = workTypes.length;
+                
+                // 세부시간 구성
+                let detailHours = [];
+                if (workType.regularHours > 0) {
+                    detailHours.push(`<span class="regular-hours">정규: ${workType.regularHours}h</span>`);
+                }
+                
+                // 오류 세부사항 추가
+                workType.errorDetails.forEach(error => {
+                    detailHours.push(`<span class="error-hours">오류: ${error.type} ${error.hours}h</span>`);
+                });
+                
+                // 작업 타입 구성 (단순화)
+                let workTypeDisplay = '';
+                if (workType.regularHours > 0) {
+                    workTypeDisplay += `
+                        <div class="work-type-item regular">
+                            <span class="work-type-status">정규시간</span>
+                        </div>
+                    `;
+                }
+                
+                workType.errorDetails.forEach(error => {
+                    workTypeDisplay += `
+                        <div class="work-type-item error">
+                            <span class="work-type-status">오류: ${error.type}</span>
+                        </div>
+                    `;
+                });
+                
+                tableRows.push(`
+                    <tr class="${rowClass}">
+                        ${isFirstWorkType ? `<td class="project-name" rowspan="${rowspan}">${workType.isVacation ? '연차/휴무' : (workType.project_name || 'N/A')}</td>` : ''}
+                        <td class="work-content">${workType.work_type_name}</td>
+                        <td class="total-hours">${workType.totalHours}h</td>
+                        <td class="detail-hours">
+                            ${detailHours.join('<br>')}
+                        </td>
+                        <td class="work-type">
+                            <div class="work-type-breakdown">
+                                ${workTypeDisplay}
+                            </div>
+                        </td>
+                        <td class="error-percentage ${workType.errorHours > 0 ? 'has-error' : ''}">${workType.errorRate}%</td>
+                    </tr>
+                `);
+            });
+        });
+
+        if (tableRows.length === 0) {
+            tableBody.innerHTML = `
+                <tr>
+                    <td colspan="6" style="text-align: center; padding: 2rem; color: #666;">
+                        해당 기간에 작업 데이터가 없습니다
+                    </td>
+                </tr>
+            `;
+            if (tableFooter) {
+                tableFooter.style.display = 'none';
+            }
+        } else {
+            tableBody.innerHTML = tableRows.join('');
+            
+            // 총계 업데이트
+            const totalErrorRate = grandTotalHours > 0 ? ((grandTotalErrorHours / grandTotalHours) * 100).toFixed(1) : '0.0';
+            
+            // 안전한 DOM 요소 접근
+            const totalErrorHoursElement = document.getElementById('totalErrorHours');
+            if (totalErrorHoursElement) {
+                totalErrorHoursElement.textContent = `${grandTotalHours}h`;
+            }
+            
+            if (tableFooter) {
+                const detailHoursCell = tableFooter.querySelector('.total-row td:nth-child(4)');
+                const errorRateCell = tableFooter.querySelector('.total-row td:nth-child(6)');
+                
+                if (detailHoursCell) {
+                    detailHoursCell.innerHTML = `
+                        <strong>정규: ${grandTotalRegularHours}h<br>오류: ${grandTotalErrorHours}h</strong>
+                    `;
+                }
+                
+                if (errorRateCell) {
+                    errorRateCell.innerHTML = `<strong>${totalErrorRate}%</strong>`;
+                }
+                
+                tableFooter.style.display = 'table-footer-group';
+            }
+        }
+
+        console.log('✅ 오류 분석 테이블 렌더링 완료');
+    }
+
+    // ========== 기간별 작업 현황 테이블 ==========
+
+    /**
+     * 기간별 작업 현황 테이블 렌더링
+     * @param {Array} projectData - 프로젝트 데이터
+     * @param {Array} workerData - 작업자 데이터
+     * @param {Array} recentWorkData - 최근 작업 데이터
+     */
+    renderWorkStatusTable(projectData, workerData, recentWorkData) {
+        console.log('📈 기간별 작업 현황 테이블 렌더링 시작');
+        
+        const tableContainer = document.querySelector('#work-status-tab .table-container');
+        if (!tableContainer) {
+            console.error('❌ 작업 현황 테이블 컨테이너를 찾을 수 없습니다');
+            return;
+        }
+
+        // 데이터가 없는 경우 처리
+        if (!workerData || workerData.length === 0) {
+            tableContainer.innerHTML = `
+                <div style="text-align: center; padding: 3rem; color: #666;">
+                    <div style="font-size: 3rem; margin-bottom: 1rem;">📊</div>
+                    <div style="font-size: 1.2rem; margin-bottom: 0.5rem;">데이터가 없습니다</div>
+                    <div style="font-size: 0.9rem;">선택한 기간에 작업 데이터가 없습니다.</div>
+                </div>
+            `;
+            return;
+        }
+
+        // 작업자별 데이터 처리
+        const workerStats = this._processWorkerStats(workerData, recentWorkData);
+        
+        let tableHTML = `
+            <table class="work-status-table">
+                <thead>
+                    <tr>
+                        <th>작업자</th>
+                        <th>분류(프로젝트)</th>
+                        <th>작업내용</th>
+                        <th>투입시간</th>
+                        <th>작업공수</th>
+                        <th>작업일/일평균시간</th>
+                        <th>비고</th>
+                    </tr>
+                </thead>
+                <tbody>
+        `;
+
+        let totalHours = 0;
+        let totalManDays = 0;
+
+        workerStats.forEach(worker => {
+            worker.projects.forEach((project, projectIndex) => {
+                project.workTypes.forEach((workType, workTypeIndex) => {
+                    const isFirstProject = projectIndex === 0 && workTypeIndex === 0;
+                    const workerRowspan = worker.totalRowspan;
+                    
+                    totalHours += workType.hours;
+                    totalManDays += workType.manDays;
+
+                    tableHTML += `
+                        <tr class="worker-group">
+                            ${isFirstProject ? `
+                                <td class="worker-name" rowspan="${workerRowspan}">${worker.name}</td>
+                            ` : ''}
+                            <td class="project-name">${project.name}</td>
+                            <td class="work-content">${workType.name}</td>
+                            <td class="work-hours">${workType.hours}h</td>
+                            ${isFirstProject ? `
+                                <td class="man-days" rowspan="${workerRowspan}">${worker.totalManDays.toFixed(1)}</td>
+                                <td class="work-days" rowspan="${workerRowspan}">${worker.workDays}일 / ${worker.avgHours.toFixed(1)}h</td>
+                            ` : ''}
+                            <td class="remarks">${workType.remarks}</td>
+                        </tr>
+                    `;
+                });
+            });
+        });
+
+        tableHTML += `
+                </tbody>
+                <tfoot>
+                    <tr class="total-row">
+                        <td colspan="3"><strong>총 공수</strong></td>
+                        <td><strong>${totalHours}h</strong></td>
+                        <td><strong>${totalManDays.toFixed(1)}</strong></td>
+                        <td colspan="2"></td>
+                    </tr>
+                </tfoot>
+            </table>
+        `;
+
+        tableContainer.innerHTML = tableHTML;
+        console.log('✅ 기간별 작업 현황 테이블 렌더링 완료');
+    }
+
+    /**
+     * 작업자별 통계 처리 (내부 헬퍼)
+     */
+    _processWorkerStats(workerData, recentWorkData) {
+        if (!workerData || workerData.length === 0) {
+            return [];
+        }
+
+        return workerData.map(worker => {
+            // 해당 작업자의 작업 데이터 필터링
+            const workerWork = recentWorkData ? 
+                recentWorkData.filter(work => work.worker_id === worker.worker_id) : [];
+
+            // 프로젝트별로 그룹화
+            const projectMap = new Map();
+            workerWork.forEach(work => {
+                const projectKey = work.project_id || 'unknown';
+                if (!projectMap.has(projectKey)) {
+                    projectMap.set(projectKey, {
+                        name: work.project_name || `프로젝트 ${projectKey}`,
+                        workTypes: new Map()
+                    });
+                }
+
+                const project = projectMap.get(projectKey);
+                const workTypeKey = work.work_type_id || 'unknown';
+                const workTypeName = work.work_type_name || `작업유형 ${workTypeKey}`;
+
+                if (!project.workTypes.has(workTypeKey)) {
+                    project.workTypes.set(workTypeKey, {
+                        name: workTypeName,
+                        hours: 0,
+                        remarks: '정상'
+                    });
+                }
+
+                const workType = project.workTypes.get(workTypeKey);
+                workType.hours += parseFloat(work.work_hours) || 0;
+
+                // 오류가 있으면 비고 업데이트
+                if (work.work_status === 'error' || work.error_type_id) {
+                    workType.remarks = work.error_type_name || work.error_description || '오류';
+                }
+            });
+
+            // 프로젝트 배열로 변환
+            const projects = Array.from(projectMap.values()).map(project => ({
+                ...project,
+                workTypes: Array.from(project.workTypes.values()).map(wt => ({
+                    ...wt,
+                    manDays: Math.round((wt.hours / 8) * 10) / 10
+                }))
+            }));
+
+            // 전체 행 수 계산
+            const totalRowspan = projects.reduce((sum, p) => sum + p.workTypes.length, 0);
+
+            return {
+                name: worker.worker_name,
+                totalHours: worker.totalHours || 0,
+                totalManDays: (worker.totalHours || 0) / 8,
+                workDays: worker.workingDays || 0,
+                avgHours: worker.avgHours || 0,
+                projects,
+                totalRowspan: Math.max(totalRowspan, 1)
+            };
+        });
+    }
+}
+
+// 전역 인스턴스 생성
+window.WorkAnalysisTableRenderer = new WorkAnalysisTableRenderer();
+
+// Export는 브라우저 환경에서 제거됨
diff --git a/web-ui/pages/analysis/work-analysis-legacy.html b/web-ui/pages/analysis/work-analysis-legacy.html
new file mode 100644
index 0000000..52e1158
--- /dev/null
+++ b/web-ui/pages/analysis/work-analysis-legacy.html
@@ -0,0 +1,2233 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>작업 분석 | (주)테크니컬코리아</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/work-analysis.css?v=41">
+    <link rel="icon" type="image/png" href="/img/favicon.png">
+    <script src="/js/auth-check.js?v=1" defer></script>
+    <script src="/js/api-config.js?v=1" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+</head>
+<body>
+    <div class="analysis-container">
+        <!-- 페이지 헤더 -->
+        <header class="page-header fade-in">
+            <h1 class="page-title">
+                <span class="icon">📊</span>
+                작업 분석
+            </h1>
+            <p class="page-subtitle">기간별/프로젝트별 작업 현황을 분석하고 통계를 확인합니다</p>
+        </header>
+
+        <!-- 분석 모드 탭 -->
+        <nav class="analysis-tabs fade-in">
+            <button class="tab-button active" data-mode="period" onclick="switchAnalysisMode('period')">
+                📅 기간별 분석
+            </button>
+            <button class="tab-button" data-mode="project" onclick="switchAnalysisMode('project')">
+                🏗️ 프로젝트별 분석
+            </button>
+        </nav>
+
+        <!-- 분석 조건 설정 -->
+        <section class="analysis-controls fade-in">
+            <div class="controls-grid">
+                <!-- 기간 설정 -->
+                <div class="form-group">
+                    <label class="form-label" for="startDate">
+                        <span class="icon">📅</span>
+                        시작일
+                    </label>
+                    <input type="date" id="startDate" class="form-input" required>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label" for="endDate">
+                        <span class="icon">📅</span>
+                        종료일
+                    </label>
+                    <input type="date" id="endDate" class="form-input" required>
+                </div>
+
+                <!-- 기간 확정 버튼 -->
+                <div class="form-group">
+                    <button class="confirm-period-button" onclick="confirmPeriod()">
+                        <span class="icon">✅</span>
+                        기간 확정
+                    </button>
+                </div>
+                
+                <!-- 기간 상태 표시 -->
+                <div class="form-group" id="periodStatusGroup" style="display: none;">
+                    <div class="period-status">
+                        <span class="icon">✅</span>
+                        <div>
+                            <div style="font-size: 0.8rem; opacity: 0.8; margin-bottom: 2px;">분석 기간</div>
+                            <div id="periodText">기간이 설정되지 않았습니다</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 분석 결과 영역 -->
+        <main id="analysisResults" class="fade-in">
+            <!-- 로딩 상태 -->
+            <div id="loadingState" class="loading-container" style="display: none;">
+                <div class="loading-spinner"></div>
+                <p class="loading-text">분석 중입니다...</p>
+            </div>
+
+            <!-- 분석 탭 네비게이션 -->
+            <div id="analysisTabNavigation" class="tab-navigation" style="display: none;">
+                <div class="tab-buttons">
+                    <button class="tab-button active" data-tab="work-status">
+                        <span class="icon">📈</span>
+                        기간별 작업 현황
+                    </button>
+                    <button class="tab-button" data-tab="project-distribution">
+                        <span class="icon">🥧</span>
+                        프로젝트별 분포
+                    </button>
+                    <button class="tab-button" data-tab="worker-performance">
+                        <span class="icon">👤</span>
+                        작업자별 성과
+                    </button>
+                    <button class="tab-button" data-tab="error-analysis">
+                        <span class="icon">⚠️</span>
+                        오류 분석
+                    </button>
+                </div>
+            </div>
+
+            <!-- 결과 카드 그리드 -->
+            <div id="resultsGrid" class="results-grid" style="display: none;">
+                <!-- 총 작업 시간 카드 -->
+                <div class="result-card">
+                    <div class="card-header">
+                        <h3 class="card-title">
+                            <span class="icon">⏰</span>
+                            총 작업 시간
+                        </h3>
+                    </div>
+                    <div class="card-value" id="totalHours">0</div>
+                    <p class="card-subtitle">시간</p>
+                    <div class="card-progress">
+                        <div class="progress-bar" id="totalHoursProgress" style="width: 0%"></div>
+                    </div>
+                    <div class="card-stats">
+                        <span>목표 대비</span>
+                        <span id="totalHoursPercent">0%</span>
+                    </div>
+                </div>
+
+                <!-- 정상 작업 시간 카드 -->
+                <div class="result-card success">
+                    <div class="card-header">
+                        <h3 class="card-title">
+                            <span class="icon">✅</span>
+                            정상 작업
+                        </h3>
+                    </div>
+                    <div class="card-value" id="normalHours">0</div>
+                    <p class="card-subtitle">시간</p>
+                    <div class="card-progress">
+                        <div class="progress-bar success" id="normalHoursProgress" style="width: 0%"></div>
+                    </div>
+                    <div class="card-stats">
+                        <span>전체 대비</span>
+                        <span id="normalHoursPercent">0%</span>
+                    </div>
+                </div>
+
+                <!-- 오류 작업 시간 카드 -->
+                <div class="result-card error">
+                    <div class="card-header">
+                        <h3 class="card-title">
+                            <span class="icon">❌</span>
+                            오류 작업
+                        </h3>
+                    </div>
+                    <div class="card-value" id="errorHours">0</div>
+                    <p class="card-subtitle">시간</p>
+                    <div class="card-progress">
+                        <div class="progress-bar error" id="errorHoursProgress" style="width: 0%"></div>
+                    </div>
+                    <div class="card-stats">
+                        <span>오류율</span>
+                        <span id="errorRate">0%</span>
+                    </div>
+                </div>
+
+                <!-- 참여 작업자 수 카드 -->
+                <div class="result-card info">
+                    <div class="card-header">
+                        <h3 class="card-title">
+                            <span class="icon">👥</span>
+                            참여 작업자
+                        </h3>
+                    </div>
+                    <div class="card-value" id="workerCount">0</div>
+                    <p class="card-subtitle">명</p>
+                    <div class="card-progress">
+                        <div class="progress-bar" id="workerProgress" style="width: 0%"></div>
+                    </div>
+                    <div class="card-stats">
+                        <span>평균 작업시간</span>
+                        <span id="avgHoursPerWorker">0h</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 탭 컨텐츠 영역 -->
+            <div id="tabContentContainer" style="display: none;">
+                <!-- 기간별 작업 현황 탭 -->
+                <div id="work-status-tab" class="tab-content active">
+                    <div class="chart-container table-type">
+                        <div class="chart-header">
+                            <h3 class="chart-title">
+                                <span class="icon">📈</span>
+                                기간별 작업 현황
+                            </h3>
+                            <button class="chart-analyze-btn" onclick="analyzeWorkStatus()" disabled>
+                                <span class="icon">🔍</span>
+                                분석 실행
+                            </button>
+                        </div>
+                    <div class="table-container">
+                        <table class="work-report-table" id="workReportTable">
+                            <thead>
+                                <tr>
+                                    <th>작업자<br><small>Worker</small></th>
+                                    <th>분류<br><small>Job No.</small></th>
+                                    <th>작업내용<br><small>Contents</small></th>
+                                    <th>투입시간<br><small>Input</small></th>
+                                    <th>작업공수<br><small>Man/Day</small></th>
+                                    <th>작업일/<br>일평균시간</th>
+                                    <th>비고<br><small>Remarks</small></th>
+                                </tr>
+                            </thead>
+                            <tbody id="workReportTableBody">
+                                <tr>
+                                    <td colspan="7" style="text-align: center; padding: 2rem; color: #666;">
+                                        분석을 실행하여 데이터를 확인하세요
+                                    </td>
+                                </tr>
+                            </tbody>
+                        <tfoot id="workReportTableFooter" style="display: none;">
+                            <tr class="total-row">
+                                <td colspan="3"><strong>총 공수<br><small>Total Man/Day</small></strong></td>
+                                <td><strong id="totalHoursCell">-</strong></td>
+                                <td><strong id="totalManDaysCell">-</strong></td>
+                                <td><strong>-</strong></td>
+                                <td><strong>-</strong></td>
+                            </tr>
+                        </tfoot>
+                        </table>
+                    </div>
+                    </div>
+                </div>
+
+                <!-- 프로젝트별 작업 분포 탭 -->
+                <div id="project-distribution-tab" class="tab-content">
+                    <div class="chart-container table-type">
+                        <div class="chart-header">
+                            <h3 class="chart-title">
+                                <span class="icon">📋</span>
+                                프로젝트별 작업 분포
+                            </h3>
+                            <button class="chart-analyze-btn" onclick="analyzeProjectDistribution()" disabled>
+                                <span class="icon">🔍</span>
+                                분석 실행
+                            </button>
+                        </div>
+                        <div class="table-container">
+                            <table class="production-report-table" id="projectDistributionTable">
+                                <thead>
+                                    <tr>
+                                        <th>Job No.</th>
+                                        <th>작업 내용<br><small>Contents</small></th>
+                                        <th>공 수<br><small>Man / Day</small></th>
+                                        <th>전체 부하율</th>
+                                        <th>인건비<br><small>Labor Cost</small></th>
+                                    </tr>
+                                </thead>
+                                <tbody id="projectDistributionTableBody">
+                                    <tr>
+                                        <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                                            분석을 실행하여 데이터를 확인하세요
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot id="projectDistributionTableFooter" style="display: none;">
+                                    <tr class="total-row">
+                                        <td colspan="2"><strong>합계<br><small>Total</small></strong></td>
+                                        <td><strong id="totalManDays">-</strong></td>
+                                        <td><strong>100.00%</strong></td>
+                                        <td><strong id="totalLaborCost">-</strong></td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 작업자별 성과 탭 -->
+                <div id="worker-performance-tab" class="tab-content">
+                    <div class="chart-container chart-type">
+                        <div class="chart-header">
+                            <h3 class="chart-title">
+                                <span class="icon">👤</span>
+                                작업자별 성과
+                            </h3>
+                            <button class="chart-analyze-btn" onclick="analyzeWorkerPerformance()" disabled>
+                                <span class="icon">🔍</span>
+                                분석 실행
+                            </button>
+                        </div>
+                        <canvas id="workerPerformanceChart" class="chart-canvas"></canvas>
+                    </div>
+                </div>
+
+                <!-- 오류 분석 탭 -->
+                <div id="error-analysis-tab" class="tab-content">
+                    <div class="chart-container table-type">
+                        <div class="chart-header">
+                            <h3 class="chart-title">
+                                <span class="icon">⚠️</span>
+                                오류 분석
+                            </h3>
+                            <button class="chart-analyze-btn" onclick="analyzeErrorAnalysis()" disabled>
+                                <span class="icon">🔍</span>
+                                분석 실행
+                            </button>
+                        </div>
+                        <div class="table-container">
+                            <table class="error-analysis-table" id="errorAnalysisTable">
+                                <thead>
+                                    <tr>
+                                        <th>Job No.</th>
+                                        <th>작업내용<br><small>Contents</small></th>
+                                        <th>총 시간<br><small>Total Hours</small></th>
+                                        <th>세부시간<br><small>Detail Hours</small></th>
+                                        <th>작업 타입<br><small>Work Type</small></th>
+                                        <th>오류율<br><small>Error Rate</small></th>
+                                    </tr>
+                                </thead>
+                                <tbody id="errorAnalysisTableBody">
+                                    <tr>
+                                        <td colspan="6" style="text-align: center; padding: 2rem; color: #666;">
+                                            분석을 실행하여 데이터를 확인하세요
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot id="errorAnalysisTableFooter" style="display: none;">
+                                    <tr class="total-row">
+                                        <td colspan="2"><strong>합계<br><small>Total</small></strong></td>
+                                        <td><strong id="totalErrorHours">-</strong></td>
+                                        <td><strong>-</strong></td>
+                                        <td><strong>-</strong></td>
+                                        <td><strong id="totalErrorRate">-</strong></td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 상세 데이터 테이블 -->
+            <div id="dataTableContainer" class="data-table-container" style="display: none;">
+                <div class="table-header">
+                    <h3 class="table-title">
+                        <span class="icon">📋</span>
+                        상세 작업 데이터
+                    </h3>
+                </div>
+                <div style="overflow-x: auto;">
+                    <table class="data-table" id="detailDataTable">
+                        <thead>
+                            <tr>
+                                <th>날짜</th>
+                                <th>작업자</th>
+                                <th>프로젝트</th>
+                                <th>작업 유형</th>
+                                <th>작업 시간</th>
+                                <th>상태</th>
+                                <th>오류 유형</th>
+                            </tr>
+                        </thead>
+                        <tbody id="detailDataBody">
+                            <!-- 동적으로 생성됨 -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- 대시보드 이동 버튼 (고정) -->
+    <div style="position: fixed; top: 20px; right: 20px; z-index: 1000;">
+        <a href="/pages/dashboard/group-leader.html" 
+           style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; 
+                  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); 
+                  color: white; text-decoration: none; border-radius: 12px; 
+                  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
+                  font-weight: 600; transition: all 0.2s ease;">
+            <span>📊</span>
+            <span>대시보드</span>
+        </a>
+    </div>
+
+    <!-- JavaScript -->
+    <script src="/js/work-analysis.js?v=4"></script>
+    
+    <!-- 모듈화된 JavaScript 로딩 -->
+    <script src="/js/work-analysis/module-loader.js?v=1" defer></script>
+    
+    <script>
+        // 서울 표준시(KST) 기준 날짜 함수들 (하위 호환성 유지)
+        function getKSTDate() {
+            const now = new Date();
+            // UTC 시간에 9시간 추가 (KST = UTC+9)
+            const kstOffset = 9 * 60; // 9시간을 분으로 변환
+            const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
+            const kst = new Date(utc + (kstOffset * 60000));
+            return kst;
+        }
+
+        function formatDateToString(date) {
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        }
+
+        // 날짜 문자열을 간단한 형식으로 변환하는 함수
+        function formatSimpleDate(dateStr) {
+            if (!dateStr) return '날짜 없음';
+            if (typeof dateStr === 'string' && dateStr.includes('T')) {
+                return dateStr.split('T')[0]; // 2025-11-01T00:00:00.000Z → 2025-11-01
+            }
+            return dateStr;
+        }
+
+        // 현재 시간 업데이트
+        function updateTime() {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('ko-KR', {
+                hour12: false,
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+            
+            // 시간 표시 요소가 있다면 업데이트
+            const timeElement = document.querySelector('.time-value');
+            if (timeElement) {
+                timeElement.textContent = timeString;
+            }
+        }
+
+        // 전역 변수
+        let confirmedStartDate = null;
+        let confirmedEndDate = null;
+        let isAnalysisEnabled = false;
+        
+        // 페이지 로드 시 초기화
+        document.addEventListener('DOMContentLoaded', function() {
+            // 서울 표준시(KST) 기준 날짜 설정
+            const today = getKSTDate();
+            const monthStart = new Date(today.getFullYear(), today.getMonth(), 1); // 이번 달 1일
+            const monthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 이번 달 마지막 날
+            
+            document.getElementById('startDate').value = formatDateToString(monthStart);
+            document.getElementById('endDate').value = formatDateToString(monthEnd);
+            
+            // 시간 업데이트 시작
+            updateTime();
+            setInterval(updateTime, 1000);
+        });
+        
+        // 기간 확정 함수
+        function confirmPeriod() {
+            const startDate = document.getElementById('startDate').value;
+            const endDate = document.getElementById('endDate').value;
+            
+            if (!startDate || !endDate) {
+                alert('시작일과 종료일을 모두 선택해주세요.');
+                return;
+            }
+            
+            if (new Date(startDate) > new Date(endDate)) {
+                alert('시작일이 종료일보다 늦을 수 없습니다.');
+                return;
+            }
+            
+            confirmedStartDate = startDate;
+            confirmedEndDate = endDate;
+            isAnalysisEnabled = true;
+            
+            // UI 업데이트
+            const periodStatusGroup = document.getElementById('periodStatusGroup');
+            const periodText = document.getElementById('periodText');
+            
+            periodStatusGroup.style.display = 'block';
+            periodText.textContent = `${startDate} ~ ${endDate}`;
+            
+            // 모든 분석 버튼 활성화
+            document.querySelectorAll('.chart-analyze-btn').forEach(btn => {
+                btn.disabled = false;
+            });
+            
+            // 탭 네비게이션과 컨텐츠 표시
+            document.getElementById('analysisTabNavigation').style.display = 'block';
+            document.getElementById('tabContentContainer').style.display = 'block';
+            
+            console.log(`✅ 기간 확정: ${startDate} ~ ${endDate}`);
+        }
+        
+        // 탭 전환 함수
+        function switchTab(tabId) {
+            // 모든 탭 버튼 비활성화
+            document.querySelectorAll('.tab-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            
+            // 모든 탭 컨텐츠 숨기기
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            
+            // 선택된 탭 버튼 활성화
+            document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');
+            
+            // 선택된 탭 컨텐츠 표시
+            document.getElementById(`${tabId}-tab`).classList.add('active');
+            
+            console.log(`🔄 탭 전환: ${tabId}`);
+        }
+        
+        // 탭 버튼 이벤트 리스너 추가
+        document.addEventListener('DOMContentLoaded', function() {
+            // 기존 초기화 코드...
+            
+            // 탭 버튼 클릭 이벤트
+            document.querySelectorAll('.tab-button').forEach(button => {
+                button.addEventListener('click', function() {
+                    const tabId = this.getAttribute('data-tab');
+                    switchTab(tabId);
+                });
+            });
+        });
+        
+        // 개별 분석 함수들
+        async function analyzeWorkStatus() {
+            if (!isAnalysisEnabled) {
+                alert('먼저 기간을 확정해주세요.');
+                return;
+            }
+            
+            console.log('📊 기간별 작업 현황 분석 시작');
+            
+            try {
+                // 기존 renderTimeSeriesChart 로직 사용
+                await renderTimeSeriesChart(confirmedStartDate, confirmedEndDate, '');
+                console.log('✅ 기간별 작업 현황 분석 완료');
+            } catch (error) {
+                console.error('❌ 기간별 작업 현황 분석 오류:', error);
+                alert('기간별 작업 현황 분석에 실패했습니다.');
+            }
+        }
+        
+        async function analyzeProjectDistribution() {
+            if (!isAnalysisEnabled) {
+                alert('먼저 기간을 확정해주세요.');
+                return;
+            }
+            
+            console.log('📋 프로젝트별 작업 분포 분석 시작');
+            
+            try {
+                const params = new URLSearchParams({
+                    start: confirmedStartDate,
+                    end: confirmedEndDate,
+                    limit: 2000
+                });
+                
+                // 기간별 작업 현황 API를 사용해서 프로젝트별 데이터 가져오기
+                const [projectWorktypeResponse, workerResponse, recentWorkResponse] = await Promise.all([
+                    apiCall(`/work-analysis/project-worktype-analysis?${params}`, 'GET'),
+                    apiCall(`/work-analysis/worker-stats?${params}`, 'GET'),
+                    apiCall(`/work-analysis/recent-work?${params}`, 'GET')
+                ]);
+                
+                console.log('🔍 프로젝트-작업유형 API 응답:', projectWorktypeResponse);
+                console.log('🔍 작업자 API 응답:', workerResponse);
+                console.log('🔍 최근 작업 API 응답:', recentWorkResponse);
+                
+                // recent-work 데이터로 프로젝트별 취합
+                const projectData = aggregateProjectData(recentWorkResponse.data || []);
+                console.log('📊 취합된 프로젝트 데이터:', projectData);
+                
+                renderProjectDistributionTableFromRecentWork(projectData, workerResponse.data);
+                console.log('✅ 프로젝트별 작업 분포 분석 완료');
+            } catch (error) {
+                console.error('❌ 프로젝트별 작업 분포 분석 오류:', error);
+                alert('프로젝트별 작업 분포 분석에 실패했습니다.');
+            }
+        }
+        
+        async function analyzeWorkerPerformance() {
+            if (!isAnalysisEnabled) {
+                alert('먼저 기간을 확정해주세요.');
+                return;
+            }
+            
+            console.log('👤 작업자별 성과 분석 시작');
+            
+            try {
+                const params = new URLSearchParams({
+                    start: confirmedStartDate,
+                    end: confirmedEndDate
+                });
+                
+                const response = await apiCall(`/work-analysis/worker-stats?${params}`, 'GET');
+                renderWorkerPerformanceChart(response.data);
+                console.log('✅ 작업자별 성과 분석 완료');
+            } catch (error) {
+                console.error('❌ 작업자별 성과 분석 오류:', error);
+                alert('작업자별 성과 분석에 실패했습니다.');
+            }
+        }
+        
+        // 오류 분석 함수
+        async function analyzeErrorAnalysis() {
+            console.log('⚠️ 오류 분석 시작');
+            
+            if (!confirmedStartDate || !confirmedEndDate) {
+                alert('기간을 먼저 확정해주세요.');
+                return;
+            }
+
+            try {
+                // 병렬로 API 호출
+                const [recentWorkResponse, errorAnalysisResponse] = await Promise.all([
+                    apiCall(`/work-analysis/recent-work?start=${confirmedStartDate}&end=${confirmedEndDate}&limit=2000`, 'GET'),
+                    apiCall(`/work-analysis/error-analysis?start=${confirmedStartDate}&end=${confirmedEndDate}`, 'GET')
+                ]);
+                
+                console.log('🔍 최근 작업 API 응답:', recentWorkResponse);
+                console.log('🔍 오류 분석 API 응답:', errorAnalysisResponse);
+                
+                if (recentWorkResponse.success && recentWorkResponse.data) {
+                    renderErrorAnalysisTable(recentWorkResponse.data);
+                    console.log('✅ 오류 분석 완료');
+                } else {
+                    throw new Error(recentWorkResponse.message || '오류 분석 실패');
+                }
+            } catch (error) {
+                console.error('❌ 오류 분석 실패:', error);
+                alert('오류 분석에 실패했습니다.');
+            }
+        }
+
+        // 오류 분석 테이블 렌더링
+        function renderErrorAnalysisTable(recentWorkData) {
+            console.log('📊 오류 분석 테이블 렌더링 시작');
+            console.log('📊 받은 데이터:', recentWorkData);
+            
+            const tableBody = document.getElementById('errorAnalysisTableBody');
+            const tableFooter = document.getElementById('errorAnalysisTableFooter');
+            
+            console.log('📊 DOM 요소 확인:', { tableBody, tableFooter });
+            
+            // DOM 요소 존재 확인
+            if (!tableBody) {
+                console.error('❌ errorAnalysisTableBody 요소를 찾을 수 없습니다');
+                return;
+            }
+            
+            if (!recentWorkData || recentWorkData.length === 0) {
+                tableBody.innerHTML = `
+                    <tr>
+                        <td colspan="6" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 오류 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tableFooter) {
+                    tableFooter.style.display = 'none';
+                }
+                return;
+            }
+
+            // 작업 형태별 오류 데이터 집계
+            const errorData = aggregateErrorData(recentWorkData);
+            
+            let tableRows = [];
+            let grandTotalHours = 0;
+            let grandTotalRegularHours = 0;
+            let grandTotalErrorHours = 0;
+
+            // 프로젝트별로 그룹화
+            const projectGroups = new Map();
+            errorData.forEach(workType => {
+                const projectKey = workType.isVacation ? 'vacation' : workType.project_id;
+                if (!projectGroups.has(projectKey)) {
+                    projectGroups.set(projectKey, []);
+                }
+                projectGroups.get(projectKey).push(workType);
+            });
+
+            // 프로젝트별로 렌더링
+            Array.from(projectGroups.entries()).forEach(([projectKey, workTypes]) => {
+                workTypes.forEach((workType, index) => {
+                    grandTotalHours += workType.totalHours;
+                    grandTotalRegularHours += workType.regularHours;
+                    grandTotalErrorHours += workType.errorHours;
+
+                    const rowClass = workType.isVacation ? 'vacation-project' : 'project-group';
+                    const isFirstWorkType = index === 0;
+                    const rowspan = workTypes.length;
+                    
+                    // 세부시간 구성
+                    let detailHours = [];
+                    if (workType.regularHours > 0) {
+                        detailHours.push(`<span class="regular-hours">정규: ${workType.regularHours}h</span>`);
+                    }
+                    
+                    // 오류 세부사항 추가
+                    workType.errorDetails.forEach(error => {
+                        detailHours.push(`<span class="error-hours">오류: ${error.type} ${error.hours}h</span>`);
+                    });
+                    
+                    // 작업 타입 구성 (단순화)
+                    let workTypeDisplay = '';
+                    if (workType.regularHours > 0) {
+                        workTypeDisplay += `
+                            <div class="work-type-item regular">
+                                <span class="work-type-status">정규시간</span>
+                            </div>
+                        `;
+                    }
+                    
+                    workType.errorDetails.forEach(error => {
+                        workTypeDisplay += `
+                            <div class="work-type-item error">
+                                <span class="work-type-status">오류: ${error.type}</span>
+                            </div>
+                        `;
+                    });
+                    
+                    tableRows.push(`
+                        <tr class="${rowClass}">
+                            ${isFirstWorkType ? `<td class="project-name" rowspan="${rowspan}">${workType.isVacation ? '연차/휴무' : (workType.project_name || 'N/A')}</td>` : ''}
+                            <td class="work-content">${workType.work_type_name}</td>
+                            <td class="total-hours">${workType.totalHours}h</td>
+                            <td class="detail-hours">
+                                ${detailHours.join('<br>')}
+                            </td>
+                            <td class="work-type">
+                                <div class="work-type-breakdown">
+                                    ${workTypeDisplay}
+                                </div>
+                            </td>
+                            <td class="error-percentage ${workType.errorHours > 0 ? 'has-error' : ''}">${workType.errorRate}%</td>
+                        </tr>
+                    `);
+                });
+            });
+
+            if (tableRows.length === 0) {
+                tableBody.innerHTML = `
+                    <tr>
+                        <td colspan="6" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 작업 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tableFooter) {
+                    tableFooter.style.display = 'none';
+                }
+            } else {
+                tableBody.innerHTML = tableRows.join('');
+                
+                // 총계 업데이트
+                const totalErrorRate = grandTotalHours > 0 ? ((grandTotalErrorHours / grandTotalHours) * 100).toFixed(1) : '0.0';
+                
+                // 안전한 DOM 요소 접근
+                const totalErrorHoursElement = document.getElementById('totalErrorHours');
+                if (totalErrorHoursElement) {
+                    totalErrorHoursElement.textContent = `${grandTotalHours}h`;
+                }
+                
+                if (tableFooter) {
+                    const detailHoursCell = tableFooter.querySelector('.total-row td:nth-child(4)');
+                    const errorRateCell = tableFooter.querySelector('.total-row td:nth-child(6)');
+                    
+                    if (detailHoursCell) {
+                        detailHoursCell.innerHTML = `
+                            <strong>정규: ${grandTotalRegularHours}h<br>오류: ${grandTotalErrorHours}h</strong>
+                        `;
+                    }
+                    
+                    if (errorRateCell) {
+                        errorRateCell.innerHTML = `<strong>${totalErrorRate}%</strong>`;
+                    }
+                    
+                    tableFooter.style.display = 'table-footer-group';
+                }
+            }
+        }
+
+        // 헬퍼 함수들
+        function isWeekendDate(dateString) {
+            const date = new Date(dateString);
+            const dayOfWeek = date.getDay();
+            return dayOfWeek === 0 || dayOfWeek === 6; // 일요일(0) 또는 토요일(6)
+        }
+
+        function isVacationProject(projectName) {
+            if (!projectName) return false;
+            const vacationKeywords = ['연차', '휴무', '휴가', '병가', '특별휴가'];
+            return vacationKeywords.some(keyword => projectName.includes(keyword));
+        }
+
+        // 작업 형태별 오류 데이터 집계 함수
+        function aggregateErrorData(recentWorkData) {
+            const workTypeMap = new Map();
+            let vacationData = null; // 연차/휴무 통합 데이터
+
+            recentWorkData.forEach(work => {
+                const isWeekend = isWeekendDate(work.report_date);
+                const isVacation = isVacationProject(work.project_name);
+                
+                // 주말 연차는 완전히 제외
+                if (isWeekend && isVacation) {
+                    console.log('🏖️ 주말 연차/휴무 제외:', work.report_date, work.project_name);
+                    return;
+                }
+
+                if (isVacation) {
+                    // 모든 연차/휴무를 하나로 통합
+                    if (!vacationData) {
+                        vacationData = {
+                            project_id: 'vacation',
+                            project_name: '연차/휴무',
+                            job_no: null,
+                            work_type_id: 'vacation',
+                            work_type_name: '연차/휴무',
+                            regularHours: 0,
+                            errorHours: 0,
+                            errorDetails: new Map(),
+                            isVacation: true
+                        };
+                    }
+
+                    const hours = parseFloat(work.work_hours) || 0;
+                    if (work.work_status === 'error' || work.error_type_id) {
+                        vacationData.errorHours += hours;
+                        const errorTypeName = work.error_type_name || work.error_description || '설계미스';
+                        if (!vacationData.errorDetails.has(errorTypeName)) {
+                            vacationData.errorDetails.set(errorTypeName, 0);
+                        }
+                        vacationData.errorDetails.set(errorTypeName, 
+                            vacationData.errorDetails.get(errorTypeName) + hours
+                        );
+                    } else {
+                        vacationData.regularHours += hours;
+                    }
+                } else {
+                    // 일반 프로젝트 처리
+                    const workTypeKey = work.work_type_id || 'unknown';
+                    const projectName = work.project_name || `프로젝트 ${work.project_id}`;
+                    const workTypeName = work.work_type_name || `작업유형 ${workTypeKey}`;
+                    
+                    // 작업 형태별로 집계 (프로젝트별로 구분)
+                    const combinedKey = `${work.project_id || 'unknown'}_${workTypeKey}`;
+                    
+                    if (!workTypeMap.has(combinedKey)) {
+                        workTypeMap.set(combinedKey, {
+                            project_id: work.project_id,
+                            project_name: projectName,
+                            job_no: work.job_no,
+                            work_type_id: workTypeKey,
+                            work_type_name: workTypeName,
+                            regularHours: 0,
+                            errorHours: 0,
+                            errorDetails: new Map(), // 오류 유형별 세분화
+                            isVacation: false
+                        });
+                    }
+
+                    const workTypeData = workTypeMap.get(combinedKey);
+                    const hours = parseFloat(work.work_hours) || 0;
+
+                    if (work.work_status === 'error' || work.error_type_id) {
+                        workTypeData.errorHours += hours;
+                        
+                        // 오류 유형별 세분화
+                        const errorTypeName = work.error_type_name || work.error_description || '설계미스';
+                        if (!workTypeData.errorDetails.has(errorTypeName)) {
+                            workTypeData.errorDetails.set(errorTypeName, 0);
+                        }
+                        workTypeData.errorDetails.set(errorTypeName, 
+                            workTypeData.errorDetails.get(errorTypeName) + hours
+                        );
+                    } else {
+                        workTypeData.regularHours += hours;
+                    }
+                }
+            });
+
+            // 결과 배열 생성
+            const result = Array.from(workTypeMap.values());
+            
+            // 연차/휴무 데이터가 있으면 추가
+            if (vacationData && (vacationData.regularHours > 0 || vacationData.errorHours > 0)) {
+                result.push(vacationData);
+            }
+
+            // 최종 데이터 처리
+            return result.map(wt => ({
+                ...wt,
+                totalHours: wt.regularHours + wt.errorHours,
+                errorRate: wt.regularHours + wt.errorHours > 0 ? 
+                    ((wt.errorHours / (wt.regularHours + wt.errorHours)) * 100).toFixed(1) : '0.0',
+                errorDetails: Array.from(wt.errorDetails.entries()).map(([type, hours]) => ({
+                    type, hours
+                }))
+            })).filter(wt => wt.totalHours > 0) // 시간이 있는 것만 표시
+            .sort((a, b) => {
+                // 연차/휴무를 맨 아래로
+                if (a.isVacation && !b.isVacation) return 1;
+                if (!a.isVacation && b.isVacation) return -1;
+                
+                // 같은 프로젝트 내에서는 오류 시간 순으로 정렬
+                if (a.project_id === b.project_id) {
+                    return b.errorHours - a.errorHours;
+                }
+                
+                // 다른 프로젝트는 프로젝트명 순으로 정렬
+                return (a.project_name || '').localeCompare(b.project_name || '');
+            });
+        }
+        
+        // 프로젝트별 작업 분포 테이블 렌더링
+        function renderProjectDistributionTable(projectData, workerData) {
+            const tbody = document.getElementById('projectDistributionTableBody');
+            const tfoot = document.getElementById('projectDistributionTableFooter');
+            
+            if (!tbody) return;
+            
+            console.log('📋 프로젝트별 분포 테이블 렌더링:', projectData);
+            console.log('📋 작업자 데이터:', workerData);
+            
+            // 프로젝트 API 데이터가 null이면 작업자 데이터로 대체
+            if (!projectData || !projectData.projects || projectData.projects.length === 0 || 
+                (projectData.projects[0] && projectData.projects[0].total_project_hours === null)) {
+                console.log('⚠️ 프로젝트 API 데이터가 없어서 작업자 데이터로 대체합니다.');
+                renderFallbackTable(workerData);
+                return;
+            }
+            
+            let tableRows = [];
+            let grandTotalHours = 0;
+            let grandTotalManDays = 0;
+            let grandTotalLaborCost = 0;
+            
+            // 공수당 인건비 (350,000원)
+            const manDayRate = 350000;
+            
+            // 먼저 전체 시간을 계산 (부하율 계산용)
+            if (projectData && projectData.projects && Array.isArray(projectData.projects)) {
+                projectData.projects.forEach(project => {
+                    const workTypes = project.work_types || [];
+                    workTypes.forEach(workType => {
+                        grandTotalHours += parseFloat(workType.total_hours) || 0;
+                    });
+                });
+            }
+            
+            if (projectData && projectData.projects && Array.isArray(projectData.projects)) {
+                projectData.projects.forEach(project => {
+                    const projectName = project.project_name || '알 수 없는 프로젝트';
+                    const workTypes = project.work_types || [];
+                    
+                    let projectTotalHours = 0;
+                    let projectTotalManDays = 0;
+                    let projectTotalLaborCost = 0;
+                    
+                    if (workTypes.length === 0) {
+                        // 작업유형이 없는 경우
+                        const projectHours = parseFloat(project.total_hours) || 0;
+                        const manDays = Math.round((projectHours / 8) * 100) / 100;
+                        const laborCost = manDays * manDayRate;
+                        const loadRate = grandTotalHours > 0 ? ((projectHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                        
+                        projectTotalHours += projectHours;
+                        projectTotalManDays += manDays;
+                        projectTotalLaborCost += laborCost;
+                        
+                        tableRows.push(`
+                            <tr class="project-group">
+                                <td class="project-name">${projectName}</td>
+                                <td class="work-content">전체</td>
+                                <td class="man-days">${manDays}</td>
+                                <td class="load-rate">${loadRate}%</td>
+                                <td class="labor-cost">₩${laborCost.toLocaleString()}</td>
+                            </tr>
+                        `);
+                    } else {
+                        // 작업유형별로 행 생성
+                        workTypes.forEach((workType, index) => {
+                            const workTypeName = workType.work_type_name || `작업유형 ${workType.work_type_id}`;
+                            const workTypeHours = parseFloat(workType.total_hours) || 0;
+                            const manDays = Math.round((workTypeHours / 8) * 100) / 100;
+                            const laborCost = manDays * manDayRate;
+                            const loadRate = grandTotalHours > 0 ? ((workTypeHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                            
+                            projectTotalHours += workTypeHours;
+                            projectTotalManDays += manDays;
+                            projectTotalLaborCost += laborCost;
+                            
+                            const isFirstWorkType = index === 0;
+                            const rowspan = workTypes.length + 1; // +1 for subtotal row
+                            
+                            tableRows.push(`
+                                <tr class="project-group">
+                                    ${isFirstWorkType ? `<td class="project-name" rowspan="${rowspan}">${projectName}</td>` : ''}
+                                    <td class="work-content">${workTypeName}</td>
+                                    <td class="man-days">${manDays}</td>
+                                    <td class="load-rate">${loadRate}%</td>
+                                    <td class="labor-cost">₩${laborCost.toLocaleString()}</td>
+                                </tr>
+                            `);
+                        });
+                        
+                        // 프로젝트별 합계 행 추가
+                        const projectLoadRate = grandTotalHours > 0 ? ((projectTotalHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                        tableRows.push(`
+                            <tr class="project-subtotal">
+                                <td class="work-content"><strong>합계</strong></td>
+                                <td class="man-days"><strong>${Math.round(projectTotalManDays * 100) / 100}</strong></td>
+                                <td class="load-rate"><strong>${projectLoadRate}%</strong></td>
+                                <td class="labor-cost"><strong>₩${projectTotalLaborCost.toLocaleString()}</strong></td>
+                            </tr>
+                        `);
+                    }
+                    
+                    grandTotalManDays += projectTotalManDays;
+                    grandTotalLaborCost += projectTotalLaborCost;
+                });
+            }
+            
+            if (tableRows.length > 0) {
+                tbody.innerHTML = tableRows.join('');
+                
+                // 전체 합계 행 업데이트
+                document.getElementById('totalManDays').textContent = `${Math.round(grandTotalManDays * 100) / 100} 공수`;
+                document.getElementById('totalLaborCost').textContent = `₩${grandTotalLaborCost.toLocaleString()}`;
+                
+                if (tfoot) {
+                    tfoot.style.display = 'table-footer-group';
+                }
+            } else {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 프로젝트 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tfoot) {
+                    tfoot.style.display = 'none';
+                }
+            }
+        }
+        
+        // 작업자 데이터로 대체 테이블 렌더링
+        function renderFallbackTable(workerData) {
+            const tbody = document.getElementById('projectDistributionTableBody');
+            const tfoot = document.getElementById('projectDistributionTableFooter');
+            
+            if (!workerData || !Array.isArray(workerData) || workerData.length === 0) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tfoot) tfoot.style.display = 'none';
+                return;
+            }
+            
+            let tableRows = [];
+            let totalHours = 0;
+            let totalManDays = 0;
+            let totalLaborCost = 0;
+            
+            const manDayRate = 350000; // 공수당 인건비
+            
+            // 작업자별로 행 생성 (임시 데이터)
+            workerData.forEach(worker => {
+                const hours = worker.totalHours || 0;
+                const manDays = Math.round((hours / 8) * 100) / 100;
+                const laborCost = manDays * manDayRate;
+                const loadRate = 0; // 나중에 계산
+                
+                totalHours += hours;
+                totalManDays += manDays;
+                totalLaborCost += laborCost;
+                
+                tableRows.push({
+                    projectName: `작업자 ${worker.worker_name}`,
+                    workContent: '전체 작업',
+                    manDays: manDays,
+                    hours: hours,
+                    laborCost: laborCost
+                });
+            });
+            
+            // 부하율 계산 및 HTML 생성
+            const htmlRows = tableRows.map(row => {
+                const loadRate = totalHours > 0 ? ((row.hours / totalHours) * 100).toFixed(2) : '0.00';
+                return `
+                    <tr class="project-group">
+                        <td class="project-name">${row.projectName}</td>
+                        <td class="work-content">${row.workContent}</td>
+                        <td class="man-days">${row.manDays}</td>
+                        <td class="load-rate">${loadRate}%</td>
+                        <td class="labor-cost">₩${row.laborCost.toLocaleString()}</td>
+                    </tr>
+                `;
+            });
+            
+            tbody.innerHTML = htmlRows.join('');
+            
+            // 합계 행 업데이트
+            document.getElementById('totalManDays').textContent = `${Math.round(totalManDays * 100) / 100} 공수`;
+            document.getElementById('totalLaborCost').textContent = `₩${totalLaborCost.toLocaleString()}`;
+            
+            if (tfoot) {
+                tfoot.style.display = 'table-footer-group';
+            }
+        }
+        
+        // 주말 체크 함수
+        function isWeekend(dateStr) {
+            const date = new Date(dateStr);
+            const dayOfWeek = date.getDay();
+            return dayOfWeek === 0 || dayOfWeek === 6; // 0: 일요일, 6: 토요일
+        }
+        
+        // 연차/휴무 프로젝트 체크 함수
+        function isVacationProject(projectName) {
+            return projectName && (projectName.includes('연차') || projectName.includes('휴무'));
+        }
+        
+        // recent-work 데이터로 프로젝트별 취합
+        function aggregateProjectData(recentWorkData) {
+            const projectMap = new Map();
+            let vacationData = {
+                total_hours: 0,
+                regular_hours: 0,
+                error_hours: 0,
+                total_reports: 0
+            };
+            
+            recentWorkData.forEach(work => {
+                // 연차/휴무 프로젝트인 경우
+                if (isVacationProject(work.project_name)) {
+                    // 주말 연차는 제외
+                    if (!isWeekend(work.report_date)) {
+                        const hours = parseFloat(work.work_hours) || 0;
+                        vacationData.total_hours += hours;
+                        vacationData.total_reports += 1;
+                        
+                        if (work.work_status_name === '정규') {
+                            vacationData.regular_hours += hours;
+                        } else if (work.work_status_name === '에러') {
+                            vacationData.error_hours += hours;
+                        }
+                    }
+                    return; // 연차/휴무는 별도 처리하므로 여기서 종료
+                }
+                
+                const projectKey = `${work.project_id}_${work.project_name}`;
+                
+                if (!projectMap.has(projectKey)) {
+                    projectMap.set(projectKey, {
+                        project_id: work.project_id,
+                        project_name: work.project_name,
+                        job_no: work.job_no || work.project_name || 'N/A',
+                        work_types: new Map()
+                    });
+                }
+                
+                const project = projectMap.get(projectKey);
+                const workTypeKey = `${work.work_type_id}_${work.work_type_name}`;
+                
+                if (!project.work_types.has(workTypeKey)) {
+                    project.work_types.set(workTypeKey, {
+                        work_type_id: work.work_type_id,
+                        work_type_name: work.work_type_name,
+                        total_hours: 0,
+                        regular_hours: 0,
+                        error_hours: 0,
+                        total_reports: 0
+                    });
+                }
+                
+                const workType = project.work_types.get(workTypeKey);
+                const hours = parseFloat(work.work_hours) || 0;
+                
+                workType.total_hours += hours;
+                workType.total_reports += 1;
+                
+                if (work.work_status_name === '정규') {
+                    workType.regular_hours += hours;
+                } else if (work.work_status_name === '에러') {
+                    workType.error_hours += hours;
+                }
+            });
+            
+            // Map을 배열로 변환
+            const projects = Array.from(projectMap.values()).map(project => ({
+                ...project,
+                work_types: Array.from(project.work_types.values())
+            }));
+            
+            // 연차/휴무 데이터가 있으면 맨 마지막에 추가
+            if (vacationData.total_hours > 0) {
+                projects.push({
+                    project_id: 'vacation',
+                    project_name: '연차/휴무',
+                    job_no: '연차/휴무',
+                    work_types: [{
+                        work_type_id: 'vacation',
+                        work_type_name: '-',
+                        total_hours: vacationData.total_hours,
+                        regular_hours: vacationData.regular_hours,
+                        error_hours: vacationData.error_hours,
+                        total_reports: vacationData.total_reports
+                    }]
+                });
+            }
+            
+            return { projects };
+        }
+        
+        // recent-work 데이터로 프로젝트별 분포 테이블 렌더링
+        function renderProjectDistributionTableFromRecentWork(projectData, workerData) {
+            const tbody = document.getElementById('projectDistributionTableBody');
+            const tfoot = document.getElementById('projectDistributionTableFooter');
+            
+            if (!tbody) return;
+            
+            console.log('📋 프로젝트별 분포 테이블 렌더링 (recent-work 기반):', projectData);
+            
+            if (!projectData || !projectData.projects || projectData.projects.length === 0) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 프로젝트 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tfoot) tfoot.style.display = 'none';
+                return;
+            }
+            
+            let tableRows = [];
+            let grandTotalHours = 0;
+            let grandTotalManDays = 0;
+            let grandTotalLaborCost = 0;
+            
+            const manDayRate = 350000; // 공수당 인건비
+            
+            // 먼저 전체 시간 계산 (부하율 계산용)
+            projectData.projects.forEach(project => {
+                project.work_types.forEach(workType => {
+                    grandTotalHours += workType.total_hours;
+                });
+            });
+            
+            // 프로젝트별로 테이블 행 생성
+            projectData.projects.forEach(project => {
+                const projectName = project.project_name || '알 수 없는 프로젝트';
+                const jobNo = project.job_no || project.project_name || 'N/A';
+                const workTypes = project.work_types || [];
+                
+                let projectTotalHours = 0;
+                let projectTotalManDays = 0;
+                let projectTotalLaborCost = 0;
+                
+                if (workTypes.length === 0) {
+                    // 작업유형이 없는 경우 (빈 프로젝트)
+                    tableRows.push(`
+                        <tr class="project-group">
+                            <td class="project-name">${jobNo}</td>
+                            <td class="work-content">데이터 없음</td>
+                            <td class="man-days">0</td>
+                            <td class="load-rate">0.00%</td>
+                            <td class="labor-cost">₩0</td>
+                        </tr>
+                    `);
+                } else {
+                    // 작업유형별로 행 생성
+                    workTypes.forEach((workType, index) => {
+                        const workTypeName = workType.work_type_name || `작업유형 ${workType.work_type_id}`;
+                        const workTypeHours = workType.total_hours || 0;
+                        const manDays = Math.round((workTypeHours / 8) * 100) / 100;
+                        const laborCost = manDays * manDayRate;
+                        const loadRate = grandTotalHours > 0 ? ((workTypeHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                        
+                        projectTotalHours += workTypeHours;
+                        projectTotalManDays += manDays;
+                        projectTotalLaborCost += laborCost;
+                        
+                        const isFirstWorkType = index === 0;
+                        const rowspan = workTypes.length + 1; // +1 for subtotal row
+                        const isVacation = project.project_id === 'vacation';
+                        const rowClass = isVacation ? 'project-group vacation-project' : 'project-group';
+                        
+                        // 연차/휴무는 프로젝트명만, 일반 프로젝트는 Job No.만 표시
+                        const displayText = isVacation ? projectName : jobNo;
+                        
+                        tableRows.push(`
+                            <tr class="${rowClass}">
+                                ${isFirstWorkType ? `<td class="project-name" rowspan="${rowspan}">${displayText}</td>` : ''}
+                                <td class="work-content">${workTypeName}</td>
+                                <td class="man-days">${manDays}</td>
+                                <td class="load-rate">${loadRate}%</td>
+                                <td class="labor-cost">₩${laborCost.toLocaleString()}</td>
+                            </tr>
+                        `);
+                    });
+                    
+                    // 프로젝트별 합계 행 추가 (연차/휴무는 합계 행 제외)
+                    if (project.project_id !== 'vacation') {
+                        const projectLoadRate = grandTotalHours > 0 ? ((projectTotalHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                        tableRows.push(`
+                            <tr class="project-subtotal">
+                                <td class="work-content"><strong>합계</strong></td>
+                                <td class="man-days"><strong>${Math.round(projectTotalManDays * 100) / 100}</strong></td>
+                                <td class="load-rate"><strong>${projectLoadRate}%</strong></td>
+                                <td class="labor-cost"><strong>₩${projectTotalLaborCost.toLocaleString()}</strong></td>
+                            </tr>
+                        `);
+                    }
+                }
+                
+                grandTotalManDays += projectTotalManDays;
+                grandTotalLaborCost += projectTotalLaborCost;
+            });
+            
+            tbody.innerHTML = tableRows.join('');
+            
+            // 전체 합계 행 업데이트
+            document.getElementById('totalManDays').textContent = `${Math.round(grandTotalManDays * 100) / 100} 공수`;
+            document.getElementById('totalLaborCost').textContent = `₩${grandTotalLaborCost.toLocaleString()}`;
+            
+            if (tfoot) {
+                tfoot.style.display = 'table-footer-group';
+            }
+        }
+        
+        // 분석 모드 전환
+        function switchAnalysisMode(mode) {
+            // 탭 활성화 상태 변경
+            document.querySelectorAll('.tab-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
+            
+            // 프로젝트 선택 그룹은 제거되었으므로 이 로직은 불필요
+            // const projectGroup = document.getElementById('projectSelectGroup');
+            // if (mode === 'period') {
+            //     projectGroup.style.display = 'block';
+            // } else {
+            //     projectGroup.style.display = 'none';
+            // }
+            
+            // 현재 모드 저장
+            window.currentAnalysisMode = mode;
+        }
+
+        // 프로젝트 목록 로드
+        async function loadProjects() {
+            try {
+                const response = await window.apiCall('/projects/active/list', 'GET');
+                const projects = response.data || response;
+                
+                // 프로젝트 선택 드롭다운이 제거되었으므로 이 로직은 불필요
+                // const select = document.getElementById('projectSelect');
+                // select.innerHTML = '<option value="">전체 프로젝트</option>';
+                // 
+                // projects.forEach(project => {
+                //     const option = document.createElement('option');
+                //     option.value = project.project_id;
+                //     option.textContent = project.project_name;
+                //     select.appendChild(option);
+                // });
+            } catch (error) {
+                console.error('프로젝트 로드 실패:', error);
+            }
+        }
+
+        // 분석 실행
+        async function performAnalysis() {
+            const startDate = document.getElementById('startDate').value;
+            const endDate = document.getElementById('endDate').value;
+            const projectId = ''; // 프로젝트 선택이 제거되었으므로 빈 값으로 설정
+            
+            console.log('🔍 분석 실행 요청:', { startDate, endDate, projectId });
+            
+            if (!startDate || !endDate) {
+                alert('시작일과 종료일을 모두 선택해주세요.');
+                return;
+            }
+            
+            // 날짜 유효성 검사
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+            
+            if (start > end) {
+                alert('시작일이 종료일보다 늦을 수 없습니다.');
+                return;
+            }
+            
+            // 서울 표준시 기준으로 날짜 범위 확인
+            console.log('📅 분석 기간:', {
+                start: formatDateToString(start),
+                end: formatDateToString(end),
+                days: Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1
+            });
+            
+            // 로딩 상태 표시
+            showLoading();
+            
+            try {
+                const mode = window.currentAnalysisMode || 'period';
+                
+                if (mode === 'period') {
+                    await performPeriodAnalysis(startDate, endDate, projectId);
+                } else {
+                    await performProjectAnalysis(startDate, endDate);
+                }
+                
+                showResults();
+            } catch (error) {
+                console.error('분석 실행 실패:', error);
+                alert('분석 실행 중 오류가 발생했습니다.');
+                showEmpty();
+            }
+        }
+
+        // 기간별 분석
+        async function performPeriodAnalysis(startDate, endDate, projectId) {
+            console.log('📊 기간별 분석 실행:', { startDate, endDate, projectId });
+            
+            try {
+                // 실제 API 호출
+                const params = new URLSearchParams({
+                    start: startDate,
+                    end: endDate
+                });
+                
+                if (projectId) {
+                    params.append('project_id', projectId);
+                }
+                
+                console.log('📡 API 호출 파라미터:', params.toString());
+                
+                // 기본 통계 조회
+                const statsResponse = await window.apiCall(`/work-analysis/stats?${params}`, 'GET');
+                console.log('📊 통계 API 응답:', statsResponse);
+                
+                if (statsResponse.success && statsResponse.data) {
+                    const stats = statsResponse.data;
+                    
+                    // 정상/오류 시간 계산
+                    const totalHours = stats.totalHours || 0;
+                    const errorReports = stats.errorRate || 0;
+                    const errorHours = Math.round(totalHours * (errorReports / 100));
+                    const normalHours = totalHours - errorHours;
+                    
+                    updateResultCards({
+                        totalHours: totalHours,
+                        normalHours: normalHours,
+                        errorHours: errorHours,
+                        workerCount: stats.activeworkers || stats.activeWorkers || 0,
+                        errorRate: errorReports
+                    });
+                    
+                    // 추가 데이터 로드 및 차트 렌더링
+                    await loadChartsData(startDate, endDate, projectId);
+                    
+                } else {
+                    console.warn('⚠️ API 응답에 데이터가 없음:', statsResponse);
+                    // 데이터가 없어도 차트는 빈 상태로 표시
+                    updateResultCards({
+                        totalHours: 0,
+                        normalHours: 0,
+                        errorHours: 0,
+                        workerCount: 0,
+                        errorRate: 0
+                    });
+                    
+                    // 빈 차트 표시
+                    await loadChartsData(startDate, endDate, projectId);
+                }
+                
+            } catch (error) {
+                console.error('❌ 기간별 분석 API 오류:', error);
+                // 오류 시 기본값 표시
+                updateResultCards({
+                    totalHours: 0,
+                    normalHours: 0,
+                    errorHours: 0,
+                    workerCount: 0,
+                    errorRate: 0
+                });
+            }
+        }
+
+        // 프로젝트별 분석
+        async function performProjectAnalysis(startDate, endDate) {
+            console.log('🏗️ 프로젝트별 분석 실행:', { startDate, endDate });
+            
+            try {
+                // 실제 API 호출
+                const params = new URLSearchParams({
+                    start: startDate,
+                    end: endDate
+                });
+                
+                console.log('📡 프로젝트별 API 호출 파라미터:', params.toString());
+                
+                // 프로젝트별 통계 조회
+                const projectStatsResponse = await window.apiCall(`/work-analysis/project-stats?${params}`, 'GET');
+                console.log('🏗️ 프로젝트 통계 API 응답:', projectStatsResponse);
+                
+                // 기본 통계도 함께 조회
+                const statsResponse = await window.apiCall(`/work-analysis/stats?${params}`, 'GET');
+                console.log('📊 기본 통계 API 응답:', statsResponse);
+                
+                if (statsResponse.success && statsResponse.data) {
+                    const stats = statsResponse.data;
+                    
+                    // 정상/오류 시간 계산
+                    const totalHours = stats.totalHours || 0;
+                    const errorReports = stats.errorRate || 0;
+                    const errorHours = Math.round(totalHours * (errorReports / 100));
+                    const normalHours = totalHours - errorHours;
+                    
+                    updateResultCards({
+                        totalHours: totalHours,
+                        normalHours: normalHours,
+                        errorHours: errorHours,
+                        workerCount: stats.activeworkers || stats.activeWorkers || 0,
+                        errorRate: errorReports
+                    });
+                } else {
+                    console.warn('⚠️ 프로젝트별 분석 API 응답에 데이터가 없음');
+                    updateResultCards({
+                        totalHours: 0,
+                        normalHours: 0,
+                        errorHours: 0,
+                        workerCount: 0,
+                        errorRate: 0
+                    });
+                }
+                
+            } catch (error) {
+                console.error('❌ 프로젝트별 분석 API 오류:', error);
+                updateResultCards({
+                    totalHours: 0,
+                    normalHours: 0,
+                    errorHours: 0,
+                    workerCount: 0,
+                    errorRate: 0
+                });
+            }
+        }
+
+        // 결과 카드 업데이트
+        function updateResultCards(data) {
+            document.getElementById('totalHours').textContent = data.totalHours;
+            document.getElementById('normalHours').textContent = data.normalHours;
+            document.getElementById('errorHours').textContent = data.errorHours;
+            document.getElementById('workerCount').textContent = data.workerCount;
+            
+            // 퍼센트 계산 및 업데이트
+            const normalPercent = ((data.normalHours / data.totalHours) * 100).toFixed(1);
+            const errorPercent = data.errorRate.toFixed(1);
+            const avgHours = (data.totalHours / data.workerCount).toFixed(1);
+            
+            document.getElementById('normalHoursPercent').textContent = normalPercent + '%';
+            document.getElementById('errorRate').textContent = errorPercent + '%';
+            document.getElementById('avgHoursPerWorker').textContent = avgHours + 'h';
+            
+            // 프로그레스 바 업데이트
+            document.getElementById('normalHoursProgress').style.width = normalPercent + '%';
+            document.getElementById('errorHoursProgress').style.width = errorPercent + '%';
+            document.getElementById('totalHoursProgress').style.width = '85%'; // 목표 대비
+            document.getElementById('workerProgress').style.width = '75%'; // 전체 작업자 대비
+        }
+
+        // UI 상태 관리
+        function showLoading() {
+            document.getElementById('emptyState').style.display = 'none';
+            document.getElementById('resultsGrid').style.display = 'none';
+            document.getElementById('chartsContainer').style.display = 'none';
+            document.getElementById('dataTableContainer').style.display = 'none';
+            document.getElementById('loadingState').style.display = 'flex';
+        }
+
+        function showResults() {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('emptyState').style.display = 'none';
+            document.getElementById('resultsGrid').style.display = 'grid';
+            document.getElementById('chartsContainer').style.display = 'block';
+            document.getElementById('dataTableContainer').style.display = 'block';
+        }
+
+        function showEmpty() {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('resultsGrid').style.display = 'none';
+            document.getElementById('chartsContainer').style.display = 'none';
+            document.getElementById('dataTableContainer').style.display = 'none';
+            document.getElementById('emptyState').style.display = 'flex';
+        }
+
+        // 차트 데이터 로드 및 렌더링
+        async function loadChartsData(startDate, endDate, projectId) {
+            console.log('📈 차트 데이터 로딩 시작...');
+            
+            try {
+                const params = new URLSearchParams({
+                    start: startDate,
+                    end: endDate
+                });
+                
+                if (projectId) {
+                    params.append('project_id', projectId);
+                }
+                
+                // 여러 API를 병렬로 호출
+                const [dailyTrendRes, workerStatsRes, projectStatsRes, errorAnalysisRes] = await Promise.all([
+                    window.apiCall(`/work-analysis/daily-trend?${params}`, 'GET').catch(err => {
+                        console.warn('일별 추이 API 오류:', err);
+                        return { success: false, data: [] };
+                    }),
+                    window.apiCall(`/work-analysis/worker-stats?${params}`, 'GET').catch(err => {
+                        console.warn('작업자 통계 API 오류:', err);
+                        return { success: false, data: [] };
+                    }),
+                    window.apiCall(`/work-analysis/project-stats?${params}`, 'GET').catch(err => {
+                        console.warn('프로젝트 통계 API 오류:', err);
+                        return { success: false, data: [] };
+                    }),
+                    window.apiCall(`/work-analysis/error-analysis?${params}`, 'GET').catch(err => {
+                        console.warn('오류 분석 API 오류:', err);
+                        return { success: false, data: [] };
+                    })
+                ]);
+                
+                console.log('📊 차트 API 응답들:', {
+                    dailyTrend: dailyTrendRes,
+                    workerStats: workerStatsRes,
+                    projectStats: projectStatsRes,
+                    errorAnalysis: errorAnalysisRes
+                });
+                
+                // 차트 렌더링 (기간별 작업 현황은 개별 버튼으로 실행)
+                // renderTimeSeriesChart(startDate, endDate, projectId);
+                renderProjectDistributionChart(projectStatsRes.data || []);
+                renderWorkerPerformanceChart(workerStatsRes.data || []);
+                renderErrorAnalysisChart(errorAnalysisRes.data || []);
+                
+                // 상세 데이터 테이블 렌더링
+                renderDetailDataTable(startDate, endDate, projectId);
+                
+            } catch (error) {
+                console.error('❌ 차트 데이터 로딩 오류:', error);
+                // 오류 시에도 빈 차트 표시 (기간별 작업 현황은 개별 버튼으로 실행)
+                // renderTimeSeriesChart('', '', '');
+                renderProjectDistributionChart([]);
+                renderWorkerPerformanceChart([]);
+                renderErrorAnalysisChart([]);
+            }
+        }
+        
+        // 기간별 작업 현황 테이블 렌더링 (작업자별 → 프로젝트별 → 작업유형별)
+        async function renderTimeSeriesChart(startDate, endDate, projectId = '') {
+            try {
+                // 프로젝트별-작업유형별 상세 데이터 조회
+                const params = new URLSearchParams({
+                    start: startDate || confirmedStartDate,
+                    end: endDate || confirmedEndDate
+                });
+                
+                // 프로젝트 ID가 제공된 경우에만 필터링 적용
+                if (projectId) {
+                    params.append('project_id', projectId);
+                }
+                
+                console.log('📊 작업 현황 테이블 데이터 로딩...');
+                
+                // 프로젝트-작업유형, 작업자 데이터를 먼저 가져오기
+                const [detailResponse, workerResponse] = await Promise.all([
+                    window.apiCall(`/work-analysis/project-worktype-analysis?${params}`, 'GET'),
+                    window.apiCall(`/work-analysis/worker-stats?${params}`, 'GET')
+                ]);
+                
+                // 상세 작업 데이터를 한 번에 많이 가져오기 (서버 limit 증가로 인해 가능)
+                console.log('📊 상세 작업 데이터 로딩...');
+                let allRecentWorkData = [];
+                
+                try {
+                    // 먼저 큰 limit으로 시도 (한 달 데이터라면 보통 1000-2000개 정도)
+                    const recentWorkResponse = await window.apiCall(`/work-analysis/recent-work?${params}&limit=2000`, 'GET');
+                    
+                    if (recentWorkResponse.success && recentWorkResponse.data) {
+                        allRecentWorkData = recentWorkResponse.data;
+                        console.log(`📊 ${allRecentWorkData.length}개의 상세 작업 데이터 수집 완료`);
+                    } else {
+                        console.warn('📊 상세 작업 데이터가 없습니다');
+                    }
+                } catch (error) {
+                    console.error('📊 상세 작업 데이터 로딩 실패:', error);
+                    
+                    // 실패하면 작은 limit으로 재시도
+                    try {
+                        const fallbackResponse = await window.apiCall(`/work-analysis/recent-work?${params}&limit=100`, 'GET');
+                        if (fallbackResponse.success && fallbackResponse.data) {
+                            allRecentWorkData = fallbackResponse.data;
+                            console.log(`📊 폴백으로 ${allRecentWorkData.length}개의 상세 작업 데이터 수집 완료`);
+                        }
+                    } catch (fallbackError) {
+                        console.error('📊 폴백 데이터 로딩도 실패:', fallbackError);
+                        allRecentWorkData = [];
+                    }
+                }
+                
+                console.log('📊 프로젝트-작업유형 API 응답:', detailResponse);
+                console.log('📊 작업자 통계 API 응답:', workerResponse);
+                
+                if (detailResponse.success && detailResponse.data) {
+                    // 모든 데이터를 함께 전달
+                    const workerData = workerResponse.success ? workerResponse.data : [];
+                    renderWorkReportTable(detailResponse.data, workerData, allRecentWorkData);
+                } else {
+                    // 데이터가 없으면 빈 테이블 표시
+                    renderEmptyWorkReportTable();
+                }
+                
+            } catch (error) {
+                console.error('❌ 작업 현황 테이블 렌더링 오류:', error);
+                renderEmptyWorkReportTable(`데이터 로딩 실패: ${error.message}`);
+            }
+        }
+        
+        // 작업 현황 테이블 렌더링
+        function renderWorkReportTable(apiResponse, workerData = [], recentWorkData = []) {
+            const tbody = document.getElementById('workReportTableBody');
+            const tfoot = document.getElementById('workReportTableFooter');
+            
+            if (!tbody) return;
+            
+            console.log('🔄 작업 현황 테이블 데이터 처리 중:', apiResponse);
+            
+            let tableRows = [];
+            let totalHours = 0;
+            let totalManDays = 0;
+            
+            // 주말 체크 함수
+            function isWeekend(dateStr) {
+                const date = new Date(dateStr);
+                const dayOfWeek = date.getDay();
+                return dayOfWeek === 0 || dayOfWeek === 6; // 0=일요일, 6=토요일
+            }
+            
+            // 연차/휴무 프로젝트 체크 함수
+            function isVacationProject(projectName) {
+                return projectName && (
+                    projectName.includes('연차') || 
+                    projectName.includes('휴무') ||
+                    projectName.toLowerCase().includes('vacation') ||
+                    projectName.toLowerCase().includes('holiday')
+                );
+            }
+            
+            // 상세 데이터에서 작업자별 실제 작업일수 계산 (주말 연차/휴무 제외)
+            const workerActualWorkDays = {};
+            if (recentWorkData && Array.isArray(recentWorkData)) {
+                recentWorkData.forEach(work => {
+                    const workerName = work.worker_name || '알 수 없음';
+                    const projectName = work.project_name || '알 수 없는 프로젝트';
+                    const workDate = work.report_date;
+                    
+                    // 주말 연차/휴무는 작업일수 계산에서 제외
+                    if (isVacationProject(projectName) && isWeekend(workDate)) {
+                        return; // 작업일수에 포함하지 않음
+                    }
+                    
+                    if (!workerActualWorkDays[workerName]) {
+                        workerActualWorkDays[workerName] = new Set();
+                    }
+                    
+                    // 같은 날짜에 여러 작업이 있어도 작업일은 1일로 계산
+                    if (workDate) {
+                        workerActualWorkDays[workerName].add(formatSimpleDate(workDate));
+                    }
+                });
+            }
+            
+            // 작업자별 전체 통계 계산 (작업공수, 작업일 계산용) - 주말 연차/휴무 제외된 시간 계산
+            const workerTotalStats = {};
+            
+            // 작업자별 실제 총 시간 계산 (주말 연차/휴무 제외)
+            const workerActualTotalHours = {};
+            if (recentWorkData && Array.isArray(recentWorkData)) {
+                recentWorkData.forEach(work => {
+                    const workerName = work.worker_name || '알 수 없음';
+                    const projectName = work.project_name || '알 수 없는 프로젝트';
+                    const workHours = parseFloat(work.work_hours) || 0;
+                    const workDate = work.report_date;
+                    
+                    // 주말 연차/휴무는 총 시간에서 제외
+                    if (isVacationProject(projectName) && isWeekend(workDate)) {
+                        return; // 총 시간에 포함하지 않음
+                    }
+                    
+                    if (!workerActualTotalHours[workerName]) {
+                        workerActualTotalHours[workerName] = 0;
+                    }
+                    
+                    workerActualTotalHours[workerName] += workHours;
+                });
+            }
+            
+            if (workerData && Array.isArray(workerData)) {
+                workerData.forEach(worker => {
+                    const workerName = worker.worker_name || worker.name || '알 수 없음';
+                    
+                    // 실제 계산된 총 시간 사용 (주말 연차/휴무 제외)
+                    const workerTotalHours = workerActualTotalHours[workerName] || 0;
+                    
+                    // 실제 작업일수 사용 (상세 데이터에서 계산된 값)
+                    const actualWorkDays = workerActualWorkDays[workerName] ? workerActualWorkDays[workerName].size : Math.ceil(workerTotalHours / 8);
+                    
+                    workerTotalStats[workerName] = {
+                        totalHours: workerTotalHours,
+                        workDays: actualWorkDays,
+                        manDays: Math.round((workerTotalHours / 8) * 100) / 100,
+                        avgHours: actualWorkDays > 0 ? Math.round((workerTotalHours / actualWorkDays) * 100) / 100 : 0
+                    };
+                });
+            }
+            
+            console.log('👥 작업자별 전체 통계:', workerTotalStats);
+            
+            // 작업자별로 데이터 그룹화 (프로젝트별로 먼저 그룹화)
+            const workerGroupedData = {};
+            
+            // 상세 데이터에서 작업자별 프로젝트-작업유형 데이터 수집
+            if (recentWorkData && Array.isArray(recentWorkData)) {
+                recentWorkData.forEach(work => {
+                    const workerName = work.worker_name || '알 수 없음';
+                    const projectName = work.project_name || '알 수 없는 프로젝트';
+                    const workTypeName = work.work_type_name || `작업유형 ${work.work_type_id}`;
+                    const workHours = parseFloat(work.work_hours) || 0;
+                    const workDate = work.report_date;
+                    
+                    // 주말 연차/휴무는 집계에서 제외
+                    if (isVacationProject(projectName) && isWeekend(workDate)) {
+                        console.log(`🚫 주말 연차/휴무 제외: ${workerName} - ${projectName} (${formatSimpleDate(workDate)})`);
+                        return; // 집계하지 않음
+                    }
+                    
+                    if (!workerGroupedData[workerName]) {
+                        workerGroupedData[workerName] = {};
+                    }
+                    
+                    if (!workerGroupedData[workerName][projectName]) {
+                        workerGroupedData[workerName][projectName] = {};
+                    }
+                    
+                    // 연차/휴무 프로젝트는 작업내용을 통합
+                    let finalWorkTypeName = workTypeName;
+                    if (isVacationProject(projectName)) {
+                        finalWorkTypeName = '-'; // 연차/휴무는 작업내용을 '-'로 통합
+                        console.log(`🏖️ 연차/휴무 통합: ${workerName} - ${projectName} (${workTypeName} → -)`);
+                    }
+                    
+                    if (!workerGroupedData[workerName][projectName][finalWorkTypeName]) {
+                        workerGroupedData[workerName][projectName][finalWorkTypeName] = 0;
+                    }
+                    
+                    workerGroupedData[workerName][projectName][finalWorkTypeName] += workHours;
+                    totalHours += workHours;
+                });
+            }
+            
+            console.log('👥 작업자별 그룹화된 데이터:', workerGroupedData);
+            
+            // 작업자별로 테이블 행 생성 (프로젝트별 그룹화 + rowspan 사용)
+            let workerIndex = 0;
+            const workerNames = Object.keys(workerGroupedData);
+            
+            Object.entries(workerGroupedData).forEach(([workerName, workerProjects]) => {
+                const workerStats = workerTotalStats[workerName];
+                
+                if (workerStats && !workerStats.counted) {
+                    totalManDays += workerStats.manDays;
+                    workerStats.counted = true;
+                }
+                
+                // 작업자의 총 행 수 계산 (모든 프로젝트의 작업유형 합계)
+                let totalWorkerRows = 0;
+                Object.values(workerProjects).forEach(workTypes => {
+                    totalWorkerRows += Object.keys(workTypes).length;
+                });
+                
+                let workerRowIndex = 0;
+                const isFirstWorker = workerIndex === 0;
+                const isLastWorker = workerIndex === workerNames.length - 1;
+                
+                // 프로젝트 정렬: 연차/휴무를 맨 아래로
+                const sortedProjects = Object.entries(workerProjects).sort(([projectNameA], [projectNameB]) => {
+                    const isVacationA = isVacationProject(projectNameA);
+                    const isVacationB = isVacationProject(projectNameB);
+                    
+                    // 연차/휴무가 아닌 것을 위로, 연차/휴무를 아래로
+                    if (isVacationA && !isVacationB) return 1;  // A가 연차/휴무면 아래로
+                    if (!isVacationA && isVacationB) return -1; // B가 연차/휴무면 A를 위로
+                    
+                    // 둘 다 연차/휴무이거나 둘 다 일반 프로젝트면 이름순 정렬
+                    return projectNameA.localeCompare(projectNameB);
+                });
+                
+                console.log(`👤 ${workerName} 프로젝트 정렬 결과:`, sortedProjects.map(([name]) => name));
+                
+                // 정렬된 프로젝트별로 처리
+                sortedProjects.forEach(([projectName, workTypes]) => {
+                    const workTypeEntries = Object.entries(workTypes);
+                    const projectRowCount = workTypeEntries.length;
+                    
+                    // 작업유형별로 행 생성
+                    workTypeEntries.forEach(([workTypeName, hours], workTypeIndex) => {
+                        const isFirstWorkerRow = workerRowIndex === 0;
+                        const isFirstProjectRow = workTypeIndex === 0;
+                        const isLastProjectRow = workTypeIndex === projectRowCount - 1;
+                        const isLastWorkerRow = workerRowIndex === totalWorkerRows - 1;
+                        
+                        let rowClass = 'worker-group';
+                        if (isFirstWorkerRow) rowClass += ' worker-group-first';
+                        if (isLastWorkerRow) rowClass += ' worker-group-last';
+                        if (isFirstProjectRow) rowClass += ' project-group-first';
+                        if (isLastProjectRow) rowClass += ' project-group-last';
+                        
+                        // 연차/휴무 프로젝트 구분 클래스 추가
+                        if (isVacationProject(projectName)) {
+                            rowClass += ' vacation-project';
+                        }
+                        
+                        if (workerStats) {
+                            tableRows.push(`
+                                <tr class="${rowClass}">
+                                    ${isFirstWorkerRow ? `<td class="worker-name" rowspan="${totalWorkerRows}">${workerName}</td>` : ''}
+                                    ${isFirstProjectRow ? `<td class="project-name" rowspan="${projectRowCount}">${projectName}</td>` : ''}
+                                    <td class="work-content">${workTypeName}</td>
+                                    <td class="input-hours">${Math.round(hours * 100) / 100}h</td>
+                                    ${isFirstWorkerRow ? `<td class="man-days" rowspan="${totalWorkerRows}">${workerStats.manDays} 공수</td>` : ''}
+                                    ${isFirstWorkerRow ? `<td class="work-days" rowspan="${totalWorkerRows}">${workerStats.workDays}일 / ${workerStats.avgHours}시간</td>` : ''}
+                                    ${isFirstWorkerRow ? `<td rowspan="${totalWorkerRows}"></td>` : ''}
+                                </tr>
+                            `);
+                        } else {
+                            tableRows.push(`
+                                <tr class="${rowClass}">
+                                    ${isFirstWorkerRow ? `<td class="worker-name" rowspan="${totalWorkerRows}">${workerName}</td>` : ''}
+                                    ${isFirstProjectRow ? `<td class="project-name" rowspan="${projectRowCount}">${projectName}</td>` : ''}
+                                    <td class="work-content">${workTypeName}</td>
+                                    <td class="input-hours">${Math.round(hours * 100) / 100}h</td>
+                                    ${isFirstWorkerRow ? `<td class="man-days" rowspan="${totalWorkerRows}">-</td>` : ''}
+                                    ${isFirstWorkerRow ? `<td class="work-days" rowspan="${totalWorkerRows}">-</td>` : ''}
+                                    ${isFirstWorkerRow ? `<td rowspan="${totalWorkerRows}"></td>` : ''}
+                                </tr>
+                            `);
+                        }
+                        
+                        workerRowIndex++;
+                    });
+                });
+                
+                workerIndex++;
+            });
+            
+            // 데이터가 없는 경우
+            if (tableRows.length === 0) {
+                renderEmptyWorkReportTable('해당 기간에 작업 데이터가 없습니다');
+                return;
+            }
+            
+            // 테이블 업데이트
+            tbody.innerHTML = tableRows.join('');
+            
+            // 총계 업데이트
+            document.getElementById('totalHoursCell').textContent = `${Math.round(totalHours * 100) / 100}시간`;
+            document.getElementById('totalManDaysCell').textContent = `${Math.round(totalManDays * 100) / 100} 공수`;
+            
+            // 푸터 표시
+            if (tfoot) {
+                tfoot.style.display = 'table-footer-group';
+            }
+            
+            console.log('✅ 작업 현황 테이블 렌더링 완료:', { totalHours, totalManDays, rows: tableRows.length });
+        }
+        
+        // 빈 테이블 표시
+        function renderEmptyWorkReportTable(message = '분석을 실행하여 데이터를 확인하세요') {
+            const tbody = document.getElementById('workReportTableBody');
+            const tfoot = document.getElementById('workReportTableFooter');
+            
+            if (tbody) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="7" style="text-align: center; padding: 2rem; color: #666;">
+                            ${message}
+                        </td>
+                    </tr>
+                `;
+            }
+            
+            if (tfoot) {
+                tfoot.style.display = 'none';
+            }
+        }
+        
+        // 프로젝트 분포 차트 렌더링
+        function renderProjectDistributionChart(data) {
+            const ctx = document.getElementById('projectDistributionChart');
+            if (!ctx) return;
+            
+            if (window.projectDistributionChart && typeof window.projectDistributionChart.destroy === 'function') {
+                window.projectDistributionChart.destroy();
+            }
+            
+            // 데이터가 없으면 기본 메시지 표시
+            let labels, values;
+            if (!data || data.length === 0) {
+                labels = ['데이터 없음'];
+                values = [0];
+            } else {
+                labels = data.map(item => item.project_name || item.name || '프로젝트 없음');
+                values = data.map(item => item.totalHours || item.total_hours || 0);
+            }
+            const colors = [
+                '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
+                '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
+            ];
+            
+            window.projectDistributionChart = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        data: values,
+                        backgroundColor: colors.slice(0, labels.length),
+                        borderWidth: 2,
+                        borderColor: '#ffffff'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'right'
+                        }
+                    }
+                }
+            });
+        }
+        
+        // 작업자 성과 차트 렌더링
+        function renderWorkerPerformanceChart(data) {
+            const ctx = document.getElementById('workerPerformanceChart');
+            if (!ctx) return;
+            
+            if (window.workerPerformanceChart && typeof window.workerPerformanceChart.destroy === 'function') {
+                window.workerPerformanceChart.destroy();
+            }
+            
+            // 데이터가 없으면 기본 메시지 표시
+            let labels, values;
+            if (!data || data.length === 0) {
+                labels = ['데이터 없음'];
+                values = [0];
+            } else {
+                labels = data.map(item => item.worker_name || item.name || '작업자 없음');
+                values = data.map(item => item.totalHours || item.total_hours || 0);
+            }
+            
+            window.workerPerformanceChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: '작업 시간',
+                        data: values,
+                        backgroundColor: '#10b981',
+                        borderColor: '#059669',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: '작업 시간 (시간)'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        // 오류 분석 차트 렌더링
+        function renderErrorAnalysisChart(data) {
+            const ctx = document.getElementById('errorAnalysisChart');
+            if (!ctx) return;
+            
+            if (window.errorAnalysisChart && typeof window.errorAnalysisChart.destroy === 'function') {
+                window.errorAnalysisChart.destroy();
+            }
+            
+            // 데이터가 없으면 기본 메시지 표시
+            let labels, values;
+            if (!data || data.length === 0) {
+                labels = ['오류 없음'];
+                values = [0];
+            } else {
+                labels = data.map(item => item.error_type_name || item.name || '오류 유형 없음');
+                values = data.map(item => item.error_count || item.count || 0);
+            }
+            
+            window.errorAnalysisChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: '오류 발생 횟수',
+                        data: values,
+                        backgroundColor: '#ef4444',
+                        borderColor: '#dc2626',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: '오류 발생 횟수'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        // 상세 데이터 테이블 렌더링
+        async function renderDetailDataTable(startDate, endDate, projectId) {
+            try {
+                const params = new URLSearchParams({
+                    start: startDate,
+                    end: endDate,
+                    limit: 100
+                });
+                
+                if (projectId) {
+                    params.append('project_id', projectId);
+                }
+                
+                const recentWorkRes = await window.apiCall(`/work-analysis/recent-work?${params}`, 'GET');
+                console.log('📋 상세 데이터 API 응답:', recentWorkRes);
+                
+                const tbody = document.getElementById('detailDataBody');
+                if (!tbody) return;
+                
+                if (recentWorkRes.success && recentWorkRes.data && recentWorkRes.data.length > 0) {
+                    tbody.innerHTML = recentWorkRes.data.map(item => `
+                        <tr>
+                            <td>${formatSimpleDate(item.report_date)}</td>
+                            <td>${item.worker_name || '작업자 없음'}</td>
+                            <td>${item.project_name || '프로젝트 없음'}</td>
+                            <td>${item.work_type_name || '작업 유형 없음'}</td>
+                            <td>${item.work_hours || 0}시간</td>
+                            <td>
+                                <span class="status-badge ${item.work_status_id === 2 ? 'error' : 'success'}">
+                                    ${item.work_status_id === 2 ? '오류' : '정상'}
+                                </span>
+                            </td>
+                            <td>${item.error_type_name || '-'}</td>
+                        </tr>
+                    `).join('');
+                } else {
+                    tbody.innerHTML = `
+                        <tr>
+                            <td colspan="7" style="text-align: center; padding: 40px; color: #6b7280;">
+                                선택한 기간에 작업 데이터가 없습니다.
+                            </td>
+                        </tr>
+                    `;
+                }
+            } catch (error) {
+                console.error('❌ 상세 데이터 테이블 렌더링 오류:', error);
+                const tbody = document.getElementById('detailDataBody');
+                if (tbody) {
+                    tbody.innerHTML = `
+                        <tr>
+                            <td colspan="7" style="text-align: center; padding: 40px; color: #ef4444;">
+                                데이터 로딩 중 오류가 발생했습니다.
+                            </td>
+                        </tr>
+                    `;
+                }
+            }
+        }
+
+        // 초기 모드 설정
+        window.currentAnalysisMode = 'period';
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web-ui/pages/analysis/work-analysis-modular.html b/web-ui/pages/analysis/work-analysis-modular.html
new file mode 100644
index 0000000..94b9e26
--- /dev/null
+++ b/web-ui/pages/analysis/work-analysis-modular.html
@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>작업 분석 | (주)테크니컬코리아</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/work-analysis.css?v=42">
+    <link rel="icon" type="image/png" href="/img/favicon.png">
+    <script src="/js/auth-check.js?v=1" defer></script>
+    <script src="/js/api-config.js?v=1" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+</head>
+<body>
+    <div class="analysis-container">
+        <!-- 페이지 헤더 -->
+        <header class="page-header fade-in">
+            <h1 class="page-title">
+                <span class="icon">📊</span>
+                작업 분석
+            </h1>
+            <p class="page-subtitle">기간별/프로젝트별 작업 현황을 분석하고 통계를 확인합니다</p>
+        </header>
+
+        <!-- 분석 모드 탭 -->
+        <nav class="analysis-tabs fade-in">
+            <button class="tab-button active" data-mode="period">
+                📅 기간별 분석
+            </button>
+            <button class="tab-button" data-mode="project">
+                🏗️ 프로젝트별 분석
+            </button>
+        </nav>
+
+        <!-- 분석 조건 설정 -->
+        <section class="analysis-controls fade-in">
+            <div class="controls-grid">
+                <!-- 기간 설정 -->
+                <div class="form-group">
+                    <label class="form-label" for="startDate">
+                        <span class="icon">📅</span>
+                        시작일
+                    </label>
+                    <input type="date" id="startDate" class="form-input" required>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label" for="endDate">
+                        <span class="icon">📅</span>
+                        종료일
+                    </label>
+                    <input type="date" id="endDate" class="form-input" required>
+                </div>
+
+                <!-- 기간 확정 버튼 -->
+                <div class="form-group">
+                    <button class="confirm-period-button" id="confirmPeriodBtn">
+                        <span class="icon">✅</span>
+                        기간 확정
+                    </button>
+                </div>
+                
+                <!-- 기간 상태 표시 -->
+                <div class="form-group" id="periodStatusGroup" style="display: none;">
+                    <div class="period-status">
+                        <span class="icon">✅</span>
+                        <div>
+                            <div style="font-size: 0.8rem; opacity: 0.8; margin-bottom: 2px;">분석 기간</div>
+                            <div id="periodStatus">기간이 설정되지 않았습니다</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 분석 결과 영역 -->
+        <main id="analysisResults" class="fade-in">
+            <!-- 로딩 상태 -->
+            <div id="loadingState" class="loading-container" style="display: none;">
+                <div class="loading-spinner"></div>
+                <p class="loading-text">분석 중입니다...</p>
+            </div>
+
+            <!-- 분석 탭 네비게이션 -->
+            <div id="analysisTabNavigation" class="tab-navigation" style="display: none;">
+                <div class="tab-buttons">
+                    <button class="tab-button active" data-tab="work-status">
+                        <span class="icon">📈</span>
+                        기간별 작업 현황
+                    </button>
+                    <button class="tab-button" data-tab="project-distribution">
+                        <span class="icon">🥧</span>
+                        프로젝트별 분포
+                    </button>
+                    <button class="tab-button" data-tab="worker-performance">
+                        <span class="icon">👤</span>
+                        작업자별 성과
+                    </button>
+                    <button class="tab-button" data-tab="error-analysis">
+                        <span class="icon">⚠️</span>
+                        오류 분석
+                    </button>
+                </div>
+            </div>
+
+            <!-- 결과 카드 그리드 -->
+            <div id="resultsGrid" class="results-grid" style="display: none;">
+                
+                <!-- 통계 카드들 -->
+                <div class="stats-cards">
+                    <div class="stat-card">
+                        <div class="stat-icon">⏰</div>
+                        <div class="stat-content">
+                            <div class="stat-label">총 작업시간</div>
+                            <div class="stat-value" id="totalHours">0</div>
+                        </div>
+                    </div>
+                    
+                    <div class="stat-card">
+                        <div class="stat-icon">✅</div>
+                        <div class="stat-content">
+                            <div class="stat-label">정상 시간</div>
+                            <div class="stat-value" id="normalHours">0</div>
+                        </div>
+                    </div>
+                    
+                    <div class="stat-card">
+                        <div class="stat-icon">⚠️</div>
+                        <div class="stat-content">
+                            <div class="stat-label">오류 시간</div>
+                            <div class="stat-value" id="errorHours">0</div>
+                        </div>
+                    </div>
+                    
+                    <div class="stat-card">
+                        <div class="stat-icon">👥</div>
+                        <div class="stat-content">
+                            <div class="stat-label">참여 작업자</div>
+                            <div class="stat-value" id="workerCount">0</div>
+                        </div>
+                    </div>
+                    
+                    <div class="stat-card">
+                        <div class="stat-icon">📊</div>
+                        <div class="stat-content">
+                            <div class="stat-label">오류율</div>
+                            <div class="stat-value" id="errorRate">0%</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 분석 탭 컨텐츠 -->
+                <div class="tab-contents">
+                    
+                    <!-- 기간별 작업 현황 -->
+                    <div id="work-status-tab" class="tab-content active">
+                        <div class="chart-container table-type">
+                            <div class="chart-header">
+                                <h3 class="chart-title">
+                                    <span class="icon">📈</span>
+                                    기간별 작업 현황
+                                </h3>
+                                <button class="chart-analyze-btn" onclick="analyzeWorkStatus()" disabled>
+                                    <span class="icon">🔍</span>
+                                    분석 실행
+                                </button>
+                            </div>
+                            <div class="table-container">
+                                <!-- 테이블이 동적으로 생성됩니다 -->
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 프로젝트별 분포 -->
+                    <div id="project-distribution-tab" class="tab-content">
+                        <div class="chart-container table-type">
+                            <div class="chart-header">
+                                <h3 class="chart-title">
+                                    <span class="icon">🥧</span>
+                                    프로젝트별 분포
+                                </h3>
+                                <button class="chart-analyze-btn" onclick="analyzeProjectDistribution()" disabled>
+                                    <span class="icon">🔍</span>
+                                    분석 실행
+                                </button>
+                            </div>
+                            <div class="table-container">
+                                <table class="production-report-table">
+                                    <thead>
+                                        <tr>
+                                            <th class="job-no-header">Job No.</th>
+                                            <th class="work-content-header">작업내용</th>
+                                            <th class="man-days-header">공수</th>
+                                            <th class="load-rate-header">전체 부하율</th>
+                                            <th class="labor-cost-header">인건비</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="projectDistributionTableBody">
+                                        <tr>
+                                            <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                                                분석을 실행해주세요
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                    <tfoot id="projectDistributionTableFooter" style="display: none;">
+                                        <tr class="total-row">
+                                            <td colspan="2"><strong>총계</strong></td>
+                                            <td><strong id="totalManDays">0</strong></td>
+                                            <td><strong>100%</strong></td>
+                                            <td><strong id="totalLaborCost">₩0</strong></td>
+                                        </tr>
+                                    </tfoot>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 작업자별 성과 -->
+                    <div id="worker-performance-tab" class="tab-content">
+                        <div class="chart-container chart-type">
+                            <div class="chart-header">
+                                <h3 class="chart-title">
+                                    <span class="icon">👤</span>
+                                    작업자별 성과
+                                </h3>
+                                <button class="chart-analyze-btn" onclick="analyzeWorkerPerformance()" disabled>
+                                    <span class="icon">🔍</span>
+                                    분석 실행
+                                </button>
+                            </div>
+                            <canvas id="workerPerformanceChart"></canvas>
+                        </div>
+                    </div>
+
+                    <!-- 오류 분석 -->
+                    <div id="error-analysis-tab" class="tab-content">
+                        <div class="chart-container table-type">
+                            <div class="chart-header">
+                                <h3 class="chart-title">
+                                    <span class="icon">⚠️</span>
+                                    오류 분석
+                                </h3>
+                                <button class="chart-analyze-btn" onclick="analyzeErrorAnalysis()" disabled>
+                                    <span class="icon">🔍</span>
+                                    분석 실행
+                                </button>
+                            </div>
+                            <div class="table-container">
+                                <table class="error-analysis-table">
+                                    <thead>
+                                        <tr>
+                                            <th>Job No.</th>
+                                            <th>작업내용</th>
+                                            <th>총 시간</th>
+                                            <th>세부시간</th>
+                                            <th>작업 타입</th>
+                                            <th>오류율</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="errorAnalysisTableBody">
+                                        <tr>
+                                            <td colspan="6" style="text-align: center; padding: 2rem; color: #666;">
+                                                분석을 실행해주세요
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                    <tfoot id="errorAnalysisTableFooter" style="display: none;">
+                                        <tr class="total-row">
+                                            <td colspan="2"><strong>총계</strong></td>
+                                            <td><strong id="totalErrorHours">0h</strong></td>
+                                            <td><strong>-</strong></td>
+                                            <td><strong>-</strong></td>
+                                            <td><strong>0.0%</strong></td>
+                                        </tr>
+                                    </tfoot>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- 모듈화된 JavaScript 로딩 -->
+    <script src="/js/work-analysis/module-loader.js?v=1" defer></script>
+    
+    <script>
+        // 서울 표준시(KST) 기준 날짜 함수들 (하위 호환성 유지)
+        function getKSTDate() {
+            const now = new Date();
+            // UTC 시간에 9시간 추가 (KST = UTC+9)
+            const kstOffset = 9 * 60; // 9시간을 분으로 변환
+            const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
+            const kst = new Date(utc + (kstOffset * 60000));
+            return kst;
+        }
+
+        function formatDateToString(date) {
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        }
+
+        // 날짜 문자열을 간단한 형식으로 변환하는 함수 (하위 호환성 유지)
+        function formatSimpleDate(dateStr) {
+            if (!dateStr) return '날짜 없음';
+            if (typeof dateStr === 'string' && dateStr.includes('T')) {
+                return dateStr.split('T')[0]; // 2025-11-01T00:00:00.000Z → 2025-11-01
+            }
+            return dateStr;
+        }
+
+        // 현재 시간 업데이트 (하위 호환성 유지)
+        function updateTime() {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('ko-KR', {
+                hour12: false,
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+            
+            // 시간 표시 요소가 있다면 업데이트
+            const timeElement = document.querySelector('.time-value');
+            if (timeElement) {
+                timeElement.textContent = timeString;
+            }
+        }
+
+        // 페이지 로드 시 초기화
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('📦 작업 분석 모듈 로딩 시작...');
+            
+            // 서울 표준시(KST) 기준 날짜 설정
+            const today = getKSTDate();
+            const monthStart = new Date(today.getFullYear(), today.getMonth(), 1); // 이번 달 1일
+            const monthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 이번 달 마지막 날
+            
+            document.getElementById('startDate').value = formatDateToString(monthStart);
+            document.getElementById('endDate').value = formatDateToString(monthEnd);
+            
+            // 시간 업데이트 시작
+            updateTime();
+            setInterval(updateTime, 1000);
+        });
+
+        // 모듈 로딩 완료 후 초기화
+        window.addEventListener('workAnalysisModulesLoaded', function(event) {
+            console.log('🎉 작업 분석 모듈 로딩 완료:', event.detail.modules);
+            
+            // 모듈 로딩 완료 후 추가 초기화 작업이 있다면 여기에 추가
+        });
+
+        // 초기 모드 설정 (하위 호환성 유지)
+        window.currentAnalysisMode = 'period';
+    </script>
+</body>
+</html>
diff --git a/web-ui/pages/analysis/work-analysis.html b/web-ui/pages/analysis/work-analysis.html
index f74457f..1ccad19 100644
--- a/web-ui/pages/analysis/work-analysis.html
+++ b/web-ui/pages/analysis/work-analysis.html
@@ -105,83 +105,9 @@
                 </div>
             </div>
 
-            <!-- 결과 카드 그리드 -->
+            <!-- 통계 카드 제거됨 - 실제 분석 결과에 집중 -->
             <div id="resultsGrid" class="results-grid" style="display: none;">
-                <!-- 총 작업 시간 카드 -->
-                <div class="result-card">
-                    <div class="card-header">
-                        <h3 class="card-title">
-                            <span class="icon">⏰</span>
-                            총 작업 시간
-                        </h3>
-                    </div>
-                    <div class="card-value" id="totalHours">0</div>
-                    <p class="card-subtitle">시간</p>
-                    <div class="card-progress">
-                        <div class="progress-bar" id="totalHoursProgress" style="width: 0%"></div>
-                    </div>
-                    <div class="card-stats">
-                        <span>목표 대비</span>
-                        <span id="totalHoursPercent">0%</span>
-                    </div>
-                </div>
-
-                <!-- 정상 작업 시간 카드 -->
-                <div class="result-card success">
-                    <div class="card-header">
-                        <h3 class="card-title">
-                            <span class="icon">✅</span>
-                            정상 작업
-                        </h3>
-                    </div>
-                    <div class="card-value" id="normalHours">0</div>
-                    <p class="card-subtitle">시간</p>
-                    <div class="card-progress">
-                        <div class="progress-bar success" id="normalHoursProgress" style="width: 0%"></div>
-                    </div>
-                    <div class="card-stats">
-                        <span>전체 대비</span>
-                        <span id="normalHoursPercent">0%</span>
-                    </div>
-                </div>
-
-                <!-- 오류 작업 시간 카드 -->
-                <div class="result-card error">
-                    <div class="card-header">
-                        <h3 class="card-title">
-                            <span class="icon">❌</span>
-                            오류 작업
-                        </h3>
-                    </div>
-                    <div class="card-value" id="errorHours">0</div>
-                    <p class="card-subtitle">시간</p>
-                    <div class="card-progress">
-                        <div class="progress-bar error" id="errorHoursProgress" style="width: 0%"></div>
-                    </div>
-                    <div class="card-stats">
-                        <span>오류율</span>
-                        <span id="errorRate">0%</span>
-                    </div>
-                </div>
-
-                <!-- 참여 작업자 수 카드 -->
-                <div class="result-card info">
-                    <div class="card-header">
-                        <h3 class="card-title">
-                            <span class="icon">👥</span>
-                            참여 작업자
-                        </h3>
-                    </div>
-                    <div class="card-value" id="workerCount">0</div>
-                    <p class="card-subtitle">명</p>
-                    <div class="card-progress">
-                        <div class="progress-bar" id="workerProgress" style="width: 0%"></div>
-                    </div>
-                    <div class="card-stats">
-                        <span>평균 작업시간</span>
-                        <span id="avgHoursPerWorker">0h</span>
-                    </div>
-                </div>
+                <!-- 의미 없는 통계 카드들 제거됨 -->
             </div>
 
             <!-- 탭 컨텐츠 영역 -->
@@ -388,56 +314,819 @@
     <script src="/js/work-analysis.js?v=4"></script>
     
     <script>
-        // 서울 표준시(KST) 기준 날짜 함수들
-        function getKSTDate() {
-            const now = new Date();
-            // UTC 시간에 9시간 추가 (KST = UTC+9)
-            const kstOffset = 9 * 60; // 9시간을 분으로 변환
-            const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
-            const kst = new Date(utc + (kstOffset * 60000));
-            return kst;
-        }
+        // 날짜 및 시간 함수들은 WorkAnalysis.utils 네임스페이스로 이동됨
 
-        function formatDateToString(date) {
-            const year = date.getFullYear();
-            const month = String(date.getMonth() + 1).padStart(2, '0');
-            const day = String(date.getDate()).padStart(2, '0');
-            return `${year}-${month}-${day}`;
-        }
-
-        // 날짜 문자열을 간단한 형식으로 변환하는 함수
-        function formatSimpleDate(dateStr) {
-            if (!dateStr) return '날짜 없음';
-            if (typeof dateStr === 'string' && dateStr.includes('T')) {
-                return dateStr.split('T')[0]; // 2025-11-01T00:00:00.000Z → 2025-11-01
-            }
-            return dateStr;
-        }
-
-        // 현재 시간 업데이트
-        function updateTime() {
-            const now = new Date();
-            const timeString = now.toLocaleTimeString('ko-KR', {
-                hour12: false,
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit'
-            });
+        // ========== API 클라이언트 ==========
+        
+        const WorkAnalysisAPI = {
+            // 캐시 저장소
+            cache: new Map(),
             
-            // 시간 표시 요소가 있다면 업데이트
-            const timeElement = document.querySelector('.time-value');
-            if (timeElement) {
-                timeElement.textContent = timeString;
+            // 캐시 만료 시간 (5분)
+            CACHE_DURATION: 5 * 60 * 1000,
+            
+            // 기본 API 호출 함수
+            async call(endpoint, method = 'GET', data = null, useCache = true) {
+                const cacheKey = `${method}:${endpoint}`;
+                
+                // 캐시 확인
+                if (useCache && this.cache.has(cacheKey)) {
+                    const cached = this.cache.get(cacheKey);
+                    if (Date.now() - cached.timestamp < this.CACHE_DURATION) {
+                        console.log('📦 캐시에서 데이터 반환:', endpoint);
+                        return cached.data;
+                    }
+                }
+                
+                try {
+                    console.log('🌐 API 호출:', endpoint);
+                    const response = await window.apiCall(endpoint, method, data);
+                    
+                    // 성공 시 캐시 저장
+                    if (useCache && response.success) {
+                        this.cache.set(cacheKey, {
+                            data: response,
+                            timestamp: Date.now()
+                        });
+                    }
+                    
+                    return response;
+                } catch (error) {
+                    console.error('❌ API 호출 실패:', endpoint, error);
+                    throw error;
+                }
+            },
+            
+            // 배치 API 호출 (병렬 처리)
+            async batchCall(requests) {
+                console.log('🔄 배치 API 호출 시작:', requests.length, '개');
+                
+                const promises = requests.map(async (req) => {
+                    try {
+                        const result = await this.call(req.endpoint, req.method, req.data, req.useCache);
+                        return { name: req.name, success: true, data: result };
+                    } catch (error) {
+                        console.warn(`⚠️ ${req.name} API 실패:`, error);
+                        return { name: req.name, success: false, error: error.message, data: null };
+                    }
+                });
+                
+                const results = await Promise.all(promises);
+                console.log('✅ 배치 API 호출 완료');
+                return results;
+            },
+            
+            // 캐시 초기화
+            clearCache() {
+                this.cache.clear();
+                console.log('🗑️ API 캐시 초기화');
             }
+        };
+
+        // ========== 에러 처리 시스템 ==========
+        
+        const ErrorHandler = {
+            // 에러 타입 정의
+            ErrorTypes: {
+                NETWORK: 'network',
+                DATA: 'data', 
+                VALIDATION: 'validation',
+                PERMISSION: 'permission',
+                UNKNOWN: 'unknown'
+            },
+            
+            // 사용자 친화적 메시지 매핑
+            UserMessages: {
+                network: {
+                    title: '연결 오류',
+                    message: '서버와의 연결에 문제가 있습니다. 잠시 후 다시 시도해주세요.',
+                    action: '다시 시도'
+                },
+                data: {
+                    title: '데이터 오류',
+                    message: '요청하신 데이터를 불러올 수 없습니다. 다른 기간을 선택해보세요.',
+                    action: '기간 변경'
+                },
+                validation: {
+                    title: '입력 오류',
+                    message: '입력하신 정보를 확인해주세요.',
+                    action: '다시 입력'
+                },
+                permission: {
+                    title: '권한 오류',
+                    message: '이 기능을 사용할 권한이 없습니다. 관리자에게 문의하세요.',
+                    action: '문의하기'
+                },
+                unknown: {
+                    title: '알 수 없는 오류',
+                    message: '예상치 못한 오류가 발생했습니다. 관리자에게 문의하세요.',
+                    action: '새로고침'
+                }
+            },
+            
+            // 에러 분류 함수
+            classifyError(error) {
+                if (!error) return this.ErrorTypes.UNKNOWN;
+                
+                const message = error.message || error.toString().toLowerCase();
+                
+                if (message.includes('network') || message.includes('fetch') || message.includes('연결')) {
+                    return this.ErrorTypes.NETWORK;
+                } else if (message.includes('data') || message.includes('데이터') || message.includes('not found')) {
+                    return this.ErrorTypes.DATA;
+                } else if (message.includes('validation') || message.includes('invalid') || message.includes('유효하지')) {
+                    return this.ErrorTypes.VALIDATION;
+                } else if (message.includes('permission') || message.includes('unauthorized') || message.includes('권한')) {
+                    return this.ErrorTypes.PERMISSION;
+                } else {
+                    return this.ErrorTypes.UNKNOWN;
+                }
+            },
+            
+            // 토스트 알림 표시
+            showToast(message, type = 'error', duration = 5000) {
+                // 기존 토스트 제거
+                const existingToast = document.querySelector('.error-toast');
+                if (existingToast) {
+                    existingToast.remove();
+                }
+                
+                // 토스트 생성
+                const toast = document.createElement('div');
+                toast.className = `error-toast toast-${type}`;
+                toast.innerHTML = `
+                    <div class="toast-content">
+                        <span class="toast-icon">${type === 'error' ? '⚠️' : type === 'success' ? '✅' : 'ℹ️'}</span>
+                        <span class="toast-message">${message}</span>
+                        <button class="toast-close" onclick="this.parentElement.parentElement.remove()">×</button>
+                    </div>
+                `;
+                
+                // 스타일 적용
+                toast.style.cssText = `
+                    position: fixed;
+                    top: 20px;
+                    right: 20px;
+                    background: ${type === 'error' ? '#ff4757' : type === 'success' ? '#2ed573' : '#3742fa'};
+                    color: white;
+                    padding: 15px 20px;
+                    border-radius: 8px;
+                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+                    z-index: 10000;
+                    max-width: 400px;
+                    animation: slideIn 0.3s ease-out;
+                `;
+                
+                document.body.appendChild(toast);
+                
+                // 자동 제거
+                setTimeout(() => {
+                    if (toast.parentNode) {
+                        toast.style.animation = 'slideOut 0.3s ease-in';
+                        setTimeout(() => toast.remove(), 300);
+                    }
+                }, duration);
+            },
+            
+            // 통합 에러 처리 함수
+            handle(error, context = '', showUserMessage = true) {
+                const errorType = this.classifyError(error);
+                const userMessage = this.UserMessages[errorType];
+                
+                // 콘솔에 상세 로그
+                console.error(`❌ [${context}] ${errorType.toUpperCase()} 오류:`, error);
+                
+                // 사용자에게 친화적 메시지 표시
+                if (showUserMessage) {
+                    this.showToast(`${userMessage.title}: ${userMessage.message}`, 'error');
+                }
+                
+                return {
+                    type: errorType,
+                    userMessage: userMessage,
+                    originalError: error
+                };
+            },
+            
+            // 복구 제안 함수
+            suggestRecovery(errorType, context) {
+                const suggestions = {
+                    network: ['인터넷 연결을 확인하세요', '잠시 후 다시 시도하세요', '페이지를 새로고침하세요'],
+                    data: ['다른 기간을 선택해보세요', '필터 조건을 변경해보세요', '관리자에게 문의하세요'],
+                    validation: ['입력 정보를 다시 확인하세요', '필수 항목을 모두 입력하세요'],
+                    permission: ['로그인 상태를 확인하세요', '관리자에게 권한을 요청하세요'],
+                    unknown: ['페이지를 새로고침하세요', '브라우저 캐시를 삭제하세요', '관리자에게 문의하세요']
+                };
+                
+                return suggestions[errorType] || suggestions.unknown;
+            }
+        };
+        
+        // 성능 최적화 CSS 및 애니메이션 추가
+        const style = document.createElement('style');
+        style.textContent = `
+            /* 토스트 애니메이션 */
+            @keyframes slideIn {
+                from { transform: translateX(100%); opacity: 0; }
+                to { transform: translateX(0); opacity: 1; }
+            }
+            @keyframes slideOut {
+                from { transform: translateX(0); opacity: 1; }
+                to { transform: translateX(100%); opacity: 0; }
+            }
+            
+            /* 페이드인 애니메이션 */
+            @keyframes fadeIn {
+                from { opacity: 0; transform: translateY(10px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+            
+            /* 로딩 프로그레스 바 */
+            .loading-progress {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                height: 3px;
+                background: linear-gradient(90deg, #3742fa, #2ed573);
+                transition: width 0.3s ease;
+                border-radius: 0 2px 2px 0;
+            }
+            
+            /* 로딩 상태 개선 */
+            #loadingState {
+                position: relative;
+                overflow: hidden;
+            }
+            
+            /* 성능 최적화: GPU 가속 */
+            .fade-in, .chart-container, .table-container {
+                will-change: transform, opacity;
+                transform: translateZ(0);
+            }
+            
+            /* 토스트 스타일 */
+            .toast-content {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+            .toast-close {
+                background: none;
+                border: none;
+                color: white;
+                font-size: 18px;
+                cursor: pointer;
+                padding: 0;
+                margin-left: auto;
+                transition: opacity 0.2s ease;
+            }
+            .toast-close:hover {
+                opacity: 0.7;
+            }
+            
+            /* 스크롤 성능 최적화 */
+            .table-container {
+                contain: layout style paint;
+            }
+            
+            /* 반응형 최적화 */
+            @media (prefers-reduced-motion: reduce) {
+                *, *::before, *::after {
+                    animation-duration: 0.01ms !important;
+                    animation-iteration-count: 1 !important;
+                    transition-duration: 0.01ms !important;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+
+        // ========== 작업 분석 네임스페이스 ==========
+        
+        const WorkAnalysis = {
+            // ========== 유틸리티 함수들 ==========
+            utils: {
+                // 날짜 관련
+                getKSTDate: function() {
+                    const now = new Date();
+                    const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
+                    const kst = new Date(utc + (9 * 3600000));
+                    return kst;
+                },
+                
+                formatDateToString: function(date) {
+                    const year = date.getFullYear();
+                    const month = String(date.getMonth() + 1).padStart(2, '0');
+                    const day = String(date.getDate()).padStart(2, '0');
+                    return `${year}-${month}-${day}`;
+                },
+                
+                formatSimpleDate: function(dateStr) {
+                    if (!dateStr) return '날짜 없음';
+                    if (typeof dateStr === 'string' && dateStr.includes('T')) {
+                        return dateStr.split('T')[0]; // 2025-11-01T00:00:00.000Z → 2025-11-01
+                    }
+                    return dateStr;
+                },
+                
+                // 비즈니스 로직 관련
+                isWeekend: function(dateStr) {
+                    const date = new Date(dateStr);
+                    const dayOfWeek = date.getDay();
+                    return dayOfWeek === 0 || dayOfWeek === 6; // 0: 일요일, 6: 토요일
+                },
+                
+                isVacationProject: function(projectName) {
+                    if (!projectName) return false;
+                    const vacationKeywords = ['연차', '휴무', '휴가', '병가', '특별휴가'];
+                    return vacationKeywords.some(keyword => projectName.includes(keyword));
+                }
+            },
+            
+            // ========== UI 제어 함수들 ==========
+            ui: {
+                // 로딩 상태 관리
+                loadingStates: new Map(),
+                
+                showLoading: function(context = 'default', message = '분석 중입니다...') {
+                    const elements = {
+                        emptyState: document.getElementById('emptyState'),
+                        resultsGrid: document.getElementById('resultsGrid'),
+                        chartsContainer: document.getElementById('chartsContainer'),
+                        dataTableContainer: document.getElementById('dataTableContainer'),
+                        loadingState: document.getElementById('loadingState')
+                    };
+                    
+                    // 로딩 상태 추적
+                    this.loadingStates.set(context, true);
+                    
+                    // 모든 요소 숨기기 (성능 최적화: 한 번에 처리)
+                    const hideElements = [elements.emptyState, elements.resultsGrid, elements.chartsContainer, elements.dataTableContainer];
+                    hideElements.forEach(el => {
+                        if (el && el.style.display !== 'none') {
+                            el.style.display = 'none';
+                        }
+                    });
+                    
+                    // 로딩 상태 표시 및 메시지 업데이트
+                    if (elements.loadingState) {
+                        elements.loadingState.style.display = 'flex';
+                        
+                        // 로딩 메시지 업데이트
+                        const loadingText = elements.loadingState.querySelector('.loading-text');
+                        if (loadingText) {
+                            loadingText.textContent = message;
+                        }
+                        
+                        // 프로그레스 바 애니메이션 시작
+                        this.startProgressAnimation();
+                    }
+                },
+                
+                showResults: function(context = 'default') {
+                    // 로딩 상태 해제
+                    this.loadingStates.set(context, false);
+                    
+                    const elements = {
+                        loadingState: document.getElementById('loadingState'),
+                        emptyState: document.getElementById('emptyState'),
+                        resultsGrid: document.getElementById('resultsGrid'),
+                        chartsContainer: document.getElementById('chartsContainer'),
+                        dataTableContainer: document.getElementById('dataTableContainer')
+                    };
+                    
+                    // 프로그레스 애니메이션 중지
+                    this.stopProgressAnimation();
+                    
+                    // 부드러운 전환 효과
+                    if (elements.loadingState) {
+                        elements.loadingState.style.opacity = '0';
+                        setTimeout(() => {
+                            elements.loadingState.style.display = 'none';
+                            elements.loadingState.style.opacity = '1';
+                        }, 200);
+                    }
+                    
+                    if (elements.emptyState) elements.emptyState.style.display = 'none';
+                    
+                    // 결과 표시 (성능 최적화: 배치 DOM 업데이트)
+                    requestAnimationFrame(() => {
+                        const showElements = [
+                            { el: elements.resultsGrid, display: 'grid' },
+                            { el: elements.chartsContainer, display: 'block' },
+                            { el: elements.dataTableContainer, display: 'block' }
+                        ];
+                        
+                        showElements.forEach(({ el, display }) => {
+                            if (el && el.style.display !== display) {
+                                el.style.display = display;
+                                el.style.opacity = '0';
+                                el.style.animation = 'fadeIn 0.3s ease-out forwards';
+                            }
+                        });
+                    });
+                },
+                
+                showEmpty: function() {
+                    const elements = {
+                        loadingState: document.getElementById('loadingState'),
+                        resultsGrid: document.getElementById('resultsGrid'),
+                        chartsContainer: document.getElementById('chartsContainer'),
+                        dataTableContainer: document.getElementById('dataTableContainer'),
+                        emptyState: document.getElementById('emptyState')
+                    };
+                    
+                    // 모든 요소 숨기기
+                    Object.values(elements).forEach(el => {
+                        if (el && el !== elements.emptyState) el.style.display = 'none';
+                    });
+                    
+                    // 빈 상태만 표시
+                    if (elements.emptyState) {
+                        elements.emptyState.style.display = 'flex';
+                    }
+                },
+                
+                updateTime: function() {
+                    const now = new Date();
+                    const timeString = now.toLocaleTimeString('ko-KR', {
+                        hour12: false,
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                    });
+                    
+                    const timeElement = document.querySelector('.time-value');
+                    if (timeElement) {
+                        timeElement.textContent = timeString;
+                    }
+                },
+                
+                // 프로그레스 애니메이션 관리
+                progressInterval: null,
+                progressValue: 0,
+                
+                startProgressAnimation: function() {
+                    this.progressValue = 0;
+                    const progressBar = document.querySelector('.loading-progress');
+                    
+                    if (progressBar) {
+                        this.progressInterval = setInterval(() => {
+                            this.progressValue += Math.random() * 15;
+                            if (this.progressValue > 90) this.progressValue = 90;
+                            
+                            progressBar.style.width = this.progressValue + '%';
+                        }, 200);
+                    }
+                },
+                
+                stopProgressAnimation: function() {
+                    if (this.progressInterval) {
+                        clearInterval(this.progressInterval);
+                        this.progressInterval = null;
+                    }
+                    
+                    const progressBar = document.querySelector('.loading-progress');
+                    if (progressBar) {
+                        progressBar.style.width = '100%';
+                        setTimeout(() => {
+                            progressBar.style.width = '0%';
+                        }, 300);
+                    }
+                },
+                
+                // 디바운스 함수 (성능 최적화)
+                debounce: function(func, wait) {
+                    let timeout;
+                    return function executedFunction(...args) {
+                        const later = () => {
+                            clearTimeout(timeout);
+                            func(...args);
+                        };
+                        clearTimeout(timeout);
+                        timeout = setTimeout(later, wait);
+                    };
+                },
+                
+                // 스로틀 함수 (성능 최적화)
+                throttle: function(func, limit) {
+                    let inThrottle;
+                    return function() {
+                        const args = arguments;
+                        const context = this;
+                        if (!inThrottle) {
+                            func.apply(context, args);
+                            inThrottle = true;
+                            setTimeout(() => inThrottle = false, limit);
+                        }
+                    };
+                }
+            },
+            
+            // ========== 분석 함수들 ==========
+            analysis: {
+                // 기간별 작업 현황 분석
+                async workStatus() {
+                    if (!isAnalysisEnabled) {
+                        ErrorHandler.showToast('먼저 기간을 확정해주세요.', 'info');
+                        return;
+                    }
+                    
+                    console.log('📊 기간별 작업 현황 분석 시작');
+                    
+                    try {
+                        WorkAnalysis.ui.showLoading('workStatus', '기간별 작업 현황을 분석하고 있습니다...');
+                        
+                        // 성능 측정 시작
+                        const startTime = performance.now();
+                        
+                        // 기존 renderTimeSeriesChart 로직 사용
+                        await renderTimeSeriesChart(confirmedStartDate, confirmedEndDate, '');
+                        
+                        // 성능 측정 종료
+                        const endTime = performance.now();
+                        console.log(`⚡ 기간별 작업 현황 분석 소요시간: ${(endTime - startTime).toFixed(2)}ms`);
+                        
+                        WorkAnalysis.ui.showResults('workStatus');
+                        ErrorHandler.showToast('기간별 작업 현황 분석이 완료되었습니다.', 'success');
+                        console.log('✅ 기간별 작업 현황 분석 완료');
+                    } catch (error) {
+                        WorkAnalysis.ui.showResults('workStatus'); // 로딩 상태 해제
+                        ErrorHandler.handle(error, '기간별 작업 현황 분석');
+                        
+                        // 복구 제안
+                        const suggestions = ErrorHandler.suggestRecovery(ErrorHandler.classifyError(error), 'workStatus');
+                        console.log('💡 복구 제안:', suggestions);
+                    }
+                },
+                
+                // 프로젝트별 분포 분석
+                async projectDistribution() {
+                    if (!isAnalysisEnabled) {
+                        ErrorHandler.showToast('먼저 기간을 확정해주세요.', 'info');
+                        return;
+                    }
+                    
+                    console.log('📋 프로젝트별 작업 분포 분석 시작');
+                    
+                    try {
+                        WorkAnalysis.ui.showLoading();
+                        
+                        const params = new URLSearchParams({
+                            start: confirmedStartDate,
+                            end: confirmedEndDate,
+                            limit: 2000
+                        });
+                        
+                        const response = await WorkAnalysisAPI.call(`/work-analysis/recent-work?${params}`, 'GET', null, true);
+                        
+                        if (response.success && response.data) {
+                            renderProjectDistributionTableFromRecentWork(response.data, []);
+                            WorkAnalysis.ui.showResults();
+                            ErrorHandler.showToast('프로젝트별 분포 분석이 완료되었습니다.', 'success');
+                            console.log('✅ 프로젝트별 작업 분포 분석 완료 (캐싱)');
+                        } else {
+                            WorkAnalysis.ui.showEmpty();
+                            ErrorHandler.showToast('선택한 기간에 프로젝트 데이터가 없습니다. 다른 기간을 선택해보세요.', 'info');
+                        }
+                    } catch (error) {
+                        WorkAnalysis.ui.showResults();
+                        ErrorHandler.handle(error, '프로젝트별 분포 분석');
+                        
+                        // 데이터 없음 상태 표시
+                        WorkAnalysis.ui.showEmpty();
+                    }
+                },
+                
+                // 작업자별 성과 분석
+                async workerPerformance() {
+                    if (!isAnalysisEnabled) {
+                        ErrorHandler.showToast('먼저 기간을 확정해주세요.', 'info');
+                        return;
+                    }
+                    
+                    console.log('👤 작업자별 성과 분석 시작');
+                    
+                    try {
+                        WorkAnalysis.ui.showLoading();
+                        
+                        const params = new URLSearchParams({
+                            start: confirmedStartDate,
+                            end: confirmedEndDate
+                        });
+                        
+                        const response = await WorkAnalysisAPI.call(`/work-analysis/worker-stats?${params}`, 'GET', null, true);
+                        
+                        if (response.success && response.data) {
+                            renderWorkerPerformanceChart(response.data);
+                            WorkAnalysis.ui.showResults();
+                            ErrorHandler.showToast('작업자별 성과 분석이 완료되었습니다.', 'success');
+                            console.log('✅ 작업자별 성과 분석 완료 (캐싱)');
+                        } else {
+                            WorkAnalysis.ui.showEmpty();
+                            ErrorHandler.showToast('선택한 기간에 작업자 데이터가 없습니다.', 'info');
+                        }
+                    } catch (error) {
+                        WorkAnalysis.ui.showResults();
+                        ErrorHandler.handle(error, '작업자별 성과 분석');
+                        WorkAnalysis.ui.showEmpty();
+                    }
+                },
+                
+                // 오류 분석
+                async errorAnalysis() {
+                    console.log('⚠️ 오류 분석 시작');
+                    
+                    if (!confirmedStartDate || !confirmedEndDate) {
+                        ErrorHandler.showToast('먼저 기간을 확정해주세요.', 'info');
+                        return;
+                    }
+
+                    try {
+                        WorkAnalysis.ui.showLoading();
+                        
+                        const batchRequests = [
+                            {
+                                name: 'recentWork',
+                                endpoint: `/work-analysis/recent-work?start=${confirmedStartDate}&end=${confirmedEndDate}&limit=2000`,
+                                method: 'GET',
+                                useCache: true
+                            },
+                            {
+                                name: 'errorAnalysis',
+                                endpoint: `/work-analysis/error-analysis?start=${confirmedStartDate}&end=${confirmedEndDate}`,
+                                method: 'GET',
+                                useCache: true
+                            }
+                        ];
+                        
+                        const results = await WorkAnalysisAPI.batchCall(batchRequests);
+                        const recentWorkResponse = results.find(r => r.name === 'recentWork');
+                        
+                        if (recentWorkResponse && recentWorkResponse.success && recentWorkResponse.data.success) {
+                            renderErrorAnalysisTable(recentWorkResponse.data.data);
+                            WorkAnalysis.ui.showResults();
+                            ErrorHandler.showToast('오류 분석이 완료되었습니다.', 'success');
+                            console.log('✅ 오류 분석 완료 (배치)');
+                        } else {
+                            WorkAnalysis.ui.showEmpty();
+                            ErrorHandler.showToast('선택한 기간에 오류 데이터가 없습니다.', 'info');
+                        }
+                    } catch (error) {
+                        WorkAnalysis.ui.showResults();
+                        ErrorHandler.handle(error, '오류 분석');
+                        WorkAnalysis.ui.showEmpty();
+                    }
+                }
+            },
+            
+            // ========== 렌더링 함수들 ==========
+            render: {
+                // 결과 카드 업데이트
+                updateResultCards: function(data) {
+                    const elements = {
+                        totalHours: document.getElementById('totalHours'),
+                        normalHours: document.getElementById('normalHours'),
+                        errorHours: document.getElementById('errorHours'),
+                        workerCount: document.getElementById('workerCount'),
+                        errorRate: document.getElementById('errorRate')
+                    };
+                    
+                    if (elements.totalHours) elements.totalHours.textContent = data.totalHours || 0;
+                    if (elements.normalHours) elements.normalHours.textContent = data.normalHours || 0;
+                    if (elements.errorHours) elements.errorHours.textContent = data.errorHours || 0;
+                    if (elements.workerCount) elements.workerCount.textContent = data.workerCount || 0;
+                    if (elements.errorRate) elements.errorRate.textContent = (data.errorRate || 0) + '%';
+                    
+                    // 프로그레스 바 업데이트
+                    const totalPercent = Math.min((data.totalHours / 1000) * 100, 100);
+                    const errorPercent = data.totalHours > 0 ? (data.errorHours / data.totalHours) * 100 : 0;
+                    
+                    const progressElements = {
+                        normalHours: document.getElementById('normalHoursProgress'),
+                        errorHours: document.getElementById('errorHoursProgress'),
+                        totalHours: document.getElementById('totalHoursProgress'),
+                        worker: document.getElementById('workerProgress')
+                    };
+                    
+                    if (progressElements.normalHours) progressElements.normalHours.style.width = (100 - errorPercent) + '%';
+                    if (progressElements.errorHours) progressElements.errorHours.style.width = errorPercent + '%';
+                    if (progressElements.totalHours) progressElements.totalHours.style.width = '85%';
+                    if (progressElements.worker) progressElements.worker.style.width = '75%';
+                }
+            }
+        };
+
+        // ========== 공통 유틸리티 함수들 (하위 호환성) ==========
+        
+        // ========== 하위 호환성을 위한 글로벌 함수들 ==========
+        
+        // 네임스페이스 함수들을 글로벌로 노출 (하위 호환성)
+        function isWeekend(dateStr) {
+            return WorkAnalysis.utils.isWeekend(dateStr);
+        }
+        
+        function isVacationProject(projectName) {
+            return WorkAnalysis.utils.isVacationProject(projectName);
+        }
+        
+        function getKSTDate() {
+            return WorkAnalysis.utils.getKSTDate();
+        }
+        
+        function formatDateToString(date) {
+            return WorkAnalysis.utils.formatDateToString(date);
+        }
+        
+        function formatSimpleDate(dateStr) {
+            return WorkAnalysis.utils.formatSimpleDate(dateStr);
+        }
+        
+        function updateTime() {
+            return WorkAnalysis.ui.updateTime();
+        }
+        
+        function showLoading() {
+            return WorkAnalysis.ui.showLoading();
+        }
+        
+        function showResults() {
+            return WorkAnalysis.ui.showResults();
+        }
+        
+        function showEmpty() {
+            return WorkAnalysis.ui.showEmpty();
+        }
+        
+        // 분석 함수들을 네임스페이스로 연결 (하위 호환성)
+        async function analyzeWorkStatus() {
+            return await WorkAnalysis.analysis.workStatus();
+        }
+        
+        async function analyzeProjectDistribution() {
+            return await WorkAnalysis.analysis.projectDistribution();
+        }
+        
+        async function analyzeWorkerPerformance() {
+            return await WorkAnalysis.analysis.workerPerformance();
+        }
+        
+        async function analyzeErrorAnalysis() {
+            return await WorkAnalysis.analysis.errorAnalysis();
+        }
+        
+        // 렌더링 함수들을 네임스페이스로 연결 (하위 호환성)
+        function updateResultCards(data) {
+            return WorkAnalysis.render.updateResultCards(data);
         }
 
-        // 전역 변수
+        // ========== 전역 변수 ==========
         let confirmedStartDate = null;
         let confirmedEndDate = null;
         let isAnalysisEnabled = false;
         
+        // 성능 모니터링 및 정리 시스템
+        const PerformanceMonitor = {
+            timers: new Set(),
+            intervals: new Set(),
+            observers: new Set(),
+            
+            // 타이머 등록 및 관리
+            addTimer: function(timerId) {
+                this.timers.add(timerId);
+            },
+            
+            addInterval: function(intervalId) {
+                this.intervals.add(intervalId);
+            },
+            
+            // 메모리 정리
+            cleanup: function() {
+                // 모든 타이머 정리
+                this.timers.forEach(id => clearTimeout(id));
+                this.intervals.forEach(id => clearInterval(id));
+                this.observers.forEach(observer => observer.disconnect());
+                
+                // API 캐시 정리
+                if (WorkAnalysisAPI) {
+                    WorkAnalysisAPI.clearCache();
+                }
+                
+                // UI 상태 정리
+                if (WorkAnalysis && WorkAnalysis.ui) {
+                    WorkAnalysis.ui.loadingStates.clear();
+                    if (WorkAnalysis.ui.progressInterval) {
+                        clearInterval(WorkAnalysis.ui.progressInterval);
+                    }
+                }
+                
+                console.log('🧹 메모리 정리 완료');
+            }
+        };
+        
         // 페이지 로드 시 초기화
         document.addEventListener('DOMContentLoaded', function() {
+            console.log('🚀 작업 분석 페이지 초기화 시작');
+            
             // 서울 표준시(KST) 기준 날짜 설정
             const today = getKSTDate();
             const monthStart = new Date(today.getFullYear(), today.getMonth(), 1); // 이번 달 1일
@@ -446,23 +1135,49 @@
             document.getElementById('startDate').value = formatDateToString(monthStart);
             document.getElementById('endDate').value = formatDateToString(monthEnd);
             
-            // 시간 업데이트 시작
-            updateTime();
-            setInterval(updateTime, 1000);
+            // 시간 업데이트 시작 (성능 최적화: 스로틀링 적용)
+            const throttledUpdateTime = WorkAnalysis.ui.throttle(updateTime, 1000);
+            throttledUpdateTime();
+            const timeInterval = setInterval(throttledUpdateTime, 1000);
+            PerformanceMonitor.addInterval(timeInterval);
+            
+            console.log('✅ 작업 분석 페이지 초기화 완료');
         });
         
+        // 페이지 언로드 시 정리
+        window.addEventListener('beforeunload', function() {
+            PerformanceMonitor.cleanup();
+        });
+        
+        // 메모리 사용량 모니터링 (개발 환경에서만)
+        if (window.location.hostname === 'localhost') {
+            const memoryInterval = setInterval(() => {
+                if (performance.memory) {
+                    const memory = performance.memory;
+                    const used = Math.round(memory.usedJSHeapSize / 1048576);
+                    const total = Math.round(memory.totalJSHeapSize / 1048576);
+                    
+                    if (used > 50) { // 50MB 이상 사용 시 경고
+                        console.warn(`⚠️ 메모리 사용량: ${used}MB / ${total}MB`);
+                    }
+                }
+            }, 30000); // 30초마다 체크
+            
+            PerformanceMonitor.addInterval(memoryInterval);
+        }
+        
         // 기간 확정 함수
         function confirmPeriod() {
             const startDate = document.getElementById('startDate').value;
             const endDate = document.getElementById('endDate').value;
             
             if (!startDate || !endDate) {
-                alert('시작일과 종료일을 모두 선택해주세요.');
+                ErrorHandler.showToast('시작일과 종료일을 모두 선택해주세요.', 'info');
                 return;
             }
             
             if (new Date(startDate) > new Date(endDate)) {
-                alert('시작일이 종료일보다 늦을 수 없습니다.');
+                ErrorHandler.showToast('시작일이 종료일보다 늦을 수 없습니다.', 'info');
                 return;
             }
             
@@ -523,24 +1238,7 @@
             });
         });
         
-        // 개별 분석 함수들
-        async function analyzeWorkStatus() {
-            if (!isAnalysisEnabled) {
-                alert('먼저 기간을 확정해주세요.');
-                return;
-            }
-            
-            console.log('📊 기간별 작업 현황 분석 시작');
-            
-            try {
-                // 기존 renderTimeSeriesChart 로직 사용
-                await renderTimeSeriesChart(confirmedStartDate, confirmedEndDate, '');
-                console.log('✅ 기간별 작업 현황 분석 완료');
-            } catch (error) {
-                console.error('❌ 기간별 작업 현황 분석 오류:', error);
-                alert('기간별 작업 현황 분석에 실패했습니다.');
-            }
-        }
+        // 개별 분석 함수들은 WorkAnalysis.analysis 네임스페이스로 이동됨
         
         async function analyzeProjectDistribution() {
             if (!isAnalysisEnabled) {
@@ -594,9 +1292,16 @@
                     end: confirmedEndDate
                 });
                 
-                const response = await apiCall(`/work-analysis/worker-stats?${params}`, 'GET');
-                renderWorkerPerformanceChart(response.data);
-                console.log('✅ 작업자별 성과 분석 완료');
+                // 최적화된 API 호출 (캐싱 사용)
+                const response = await WorkAnalysisAPI.call(`/work-analysis/worker-stats?${params}`, 'GET', null, true);
+                
+                if (response.success && response.data) {
+                    renderWorkerPerformanceChart(response.data);
+                    console.log('✅ 작업자별 성과 분석 완료 (캐싱)');
+                } else {
+                    console.warn('⚠️ 작업자 데이터가 없습니다');
+                    alert('작업자 데이터를 불러올 수 없습니다.');
+                }
             } catch (error) {
                 console.error('❌ 작업자별 성과 분석 오류:', error);
                 alert('작업자별 성과 분석에 실패했습니다.');
@@ -613,17 +1318,31 @@
             }
 
             try {
-                // 병렬로 API 호출
-                const [recentWorkResponse, errorAnalysisResponse] = await Promise.all([
-                    apiCall(`/work-analysis/recent-work?start=${confirmedStartDate}&end=${confirmedEndDate}&limit=2000`, 'GET'),
-                    apiCall(`/work-analysis/error-analysis?start=${confirmedStartDate}&end=${confirmedEndDate}`, 'GET')
-                ]);
+                // 배치 API 호출로 최적화
+                const batchRequests = [
+                    {
+                        name: 'recentWork',
+                        endpoint: `/work-analysis/recent-work?start=${confirmedStartDate}&end=${confirmedEndDate}&limit=2000`,
+                        method: 'GET',
+                        useCache: true
+                    },
+                    {
+                        name: 'errorAnalysis',
+                        endpoint: `/work-analysis/error-analysis?start=${confirmedStartDate}&end=${confirmedEndDate}`,
+                        method: 'GET',
+                        useCache: true
+                    }
+                ];
                 
-                console.log('🔍 최근 작업 API 응답:', recentWorkResponse);
-                console.log('🔍 오류 분석 API 응답:', errorAnalysisResponse);
+                const results = await WorkAnalysisAPI.batchCall(batchRequests);
+                const recentWorkResponse = results.find(r => r.name === 'recentWork');
+                const errorAnalysisResponse = results.find(r => r.name === 'errorAnalysis');
                 
-                if (recentWorkResponse.success && recentWorkResponse.data) {
-                    renderErrorAnalysisTable(recentWorkResponse.data);
+                console.log('🔍 최근 작업 API 응답 (배치):', recentWorkResponse);
+                console.log('🔍 오류 분석 API 응답 (배치):', errorAnalysisResponse);
+                
+                if (recentWorkResponse && recentWorkResponse.success && recentWorkResponse.data.success) {
+                    renderErrorAnalysisTable(recentWorkResponse.data.data);
                     console.log('✅ 오류 분석 완료');
                 } else {
                     throw new Error(recentWorkResponse.message || '오류 분석 실패');
@@ -783,18 +1502,7 @@
             }
         }
 
-        // 헬퍼 함수들
-        function isWeekendDate(dateString) {
-            const date = new Date(dateString);
-            const dayOfWeek = date.getDay();
-            return dayOfWeek === 0 || dayOfWeek === 6; // 일요일(0) 또는 토요일(6)
-        }
-
-        function isVacationProject(projectName) {
-            if (!projectName) return false;
-            const vacationKeywords = ['연차', '휴무', '휴가', '병가', '특별휴가'];
-            return vacationKeywords.some(keyword => projectName.includes(keyword));
-        }
+        // 헬퍼 함수들 (공통 함수 사용)
 
         // 작업 형태별 오류 데이터 집계 함수
         function aggregateErrorData(recentWorkData) {
@@ -802,11 +1510,11 @@
             let vacationData = null; // 연차/휴무 통합 데이터
 
             recentWorkData.forEach(work => {
-                const isWeekend = isWeekendDate(work.report_date);
+                const isWeekendDay = isWeekend(work.report_date);
                 const isVacation = isVacationProject(work.project_name);
                 
                 // 주말 연차는 완전히 제외
-                if (isWeekend && isVacation) {
+                if (isWeekendDay && isVacation) {
                     console.log('🏖️ 주말 연차/휴무 제외:', work.report_date, work.project_name);
                     return;
                 }
@@ -1118,17 +1826,7 @@
             }
         }
         
-        // 주말 체크 함수
-        function isWeekend(dateStr) {
-            const date = new Date(dateStr);
-            const dayOfWeek = date.getDay();
-            return dayOfWeek === 0 || dayOfWeek === 6; // 0: 일요일, 6: 토요일
-        }
-        
-        // 연차/휴무 프로젝트 체크 함수
-        function isVacationProject(projectName) {
-            return projectName && (projectName.includes('연차') || projectName.includes('휴무'));
-        }
+        // 주말 체크 함수 및 연차/휴무 프로젝트 체크 함수는 상단에 통합 정의됨
         
         // recent-work 데이터로 프로젝트별 취합
         function aggregateProjectData(recentWorkData) {
@@ -1446,12 +2144,23 @@
                 
                 console.log('📡 API 호출 파라미터:', params.toString());
                 
-                // 기본 통계 조회
-                const statsResponse = await window.apiCall(`/work-analysis/stats?${params}`, 'GET');
-                console.log('📊 통계 API 응답:', statsResponse);
+                // 배치 API 호출로 최적화
+                const batchRequests = [
+                    {
+                        name: 'stats',
+                        endpoint: `/work-analysis/stats?${params}`,
+                        method: 'GET',
+                        useCache: true
+                    }
+                ];
                 
-                if (statsResponse.success && statsResponse.data) {
-                    const stats = statsResponse.data;
+                const results = await WorkAnalysisAPI.batchCall(batchRequests);
+                const statsResult = results.find(r => r.name === 'stats');
+                
+                console.log('📊 통계 API 응답 (배치):', statsResult);
+                
+                if (statsResult && statsResult.success && statsResult.data.success) {
+                    const stats = statsResult.data.data;
                     
                     // 정상/오류 시간 계산
                     const totalHours = stats.totalHours || 0;
@@ -1581,30 +2290,7 @@
             document.getElementById('workerProgress').style.width = '75%'; // 전체 작업자 대비
         }
 
-        // UI 상태 관리
-        function showLoading() {
-            document.getElementById('emptyState').style.display = 'none';
-            document.getElementById('resultsGrid').style.display = 'none';
-            document.getElementById('chartsContainer').style.display = 'none';
-            document.getElementById('dataTableContainer').style.display = 'none';
-            document.getElementById('loadingState').style.display = 'flex';
-        }
-
-        function showResults() {
-            document.getElementById('loadingState').style.display = 'none';
-            document.getElementById('emptyState').style.display = 'none';
-            document.getElementById('resultsGrid').style.display = 'grid';
-            document.getElementById('chartsContainer').style.display = 'block';
-            document.getElementById('dataTableContainer').style.display = 'block';
-        }
-
-        function showEmpty() {
-            document.getElementById('loadingState').style.display = 'none';
-            document.getElementById('resultsGrid').style.display = 'none';
-            document.getElementById('chartsContainer').style.display = 'none';
-            document.getElementById('dataTableContainer').style.display = 'none';
-            document.getElementById('emptyState').style.display = 'flex';
-        }
+        // UI 상태 관리 함수들은 WorkAnalysis.ui 네임스페이스로 이동됨
 
         // 차트 데이터 로드 및 렌더링
         async function loadChartsData(startDate, endDate, projectId) {
@@ -1750,21 +2436,7 @@
             let totalManDays = 0;
             
             // 주말 체크 함수
-            function isWeekend(dateStr) {
-                const date = new Date(dateStr);
-                const dayOfWeek = date.getDay();
-                return dayOfWeek === 0 || dayOfWeek === 6; // 0=일요일, 6=토요일
-            }
-            
-            // 연차/휴무 프로젝트 체크 함수
-            function isVacationProject(projectName) {
-                return projectName && (
-                    projectName.includes('연차') || 
-                    projectName.includes('휴무') ||
-                    projectName.toLowerCase().includes('vacation') ||
-                    projectName.toLowerCase().includes('holiday')
-                );
-            }
+            // 주말 체크 함수 및 연차/휴무 프로젝트 체크 함수는 상단에 통합 정의됨
             
             // 상세 데이터에서 작업자별 실제 작업일수 계산 (주말 연차/휴무 제외)
             const workerActualWorkDays = {};
diff --git a/web-ui/pages/analysis/work-analysis.html.backup b/web-ui/pages/analysis/work-analysis.html.backup
new file mode 100644
index 0000000..f74457f
--- /dev/null
+++ b/web-ui/pages/analysis/work-analysis.html.backup
@@ -0,0 +1,2230 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>작업 분석 | (주)테크니컬코리아</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/work-analysis.css?v=41">
+    <link rel="icon" type="image/png" href="/img/favicon.png">
+    <script src="/js/auth-check.js?v=1" defer></script>
+    <script src="/js/api-config.js?v=1" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+</head>
+<body>
+    <div class="analysis-container">
+        <!-- 페이지 헤더 -->
+        <header class="page-header fade-in">
+            <h1 class="page-title">
+                <span class="icon">📊</span>
+                작업 분석
+            </h1>
+            <p class="page-subtitle">기간별/프로젝트별 작업 현황을 분석하고 통계를 확인합니다</p>
+        </header>
+
+        <!-- 분석 모드 탭 -->
+        <nav class="analysis-tabs fade-in">
+            <button class="tab-button active" data-mode="period" onclick="switchAnalysisMode('period')">
+                📅 기간별 분석
+            </button>
+            <button class="tab-button" data-mode="project" onclick="switchAnalysisMode('project')">
+                🏗️ 프로젝트별 분석
+            </button>
+        </nav>
+
+        <!-- 분석 조건 설정 -->
+        <section class="analysis-controls fade-in">
+            <div class="controls-grid">
+                <!-- 기간 설정 -->
+                <div class="form-group">
+                    <label class="form-label" for="startDate">
+                        <span class="icon">📅</span>
+                        시작일
+                    </label>
+                    <input type="date" id="startDate" class="form-input" required>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label" for="endDate">
+                        <span class="icon">📅</span>
+                        종료일
+                    </label>
+                    <input type="date" id="endDate" class="form-input" required>
+                </div>
+
+                <!-- 기간 확정 버튼 -->
+                <div class="form-group">
+                    <button class="confirm-period-button" onclick="confirmPeriod()">
+                        <span class="icon">✅</span>
+                        기간 확정
+                    </button>
+                </div>
+                
+                <!-- 기간 상태 표시 -->
+                <div class="form-group" id="periodStatusGroup" style="display: none;">
+                    <div class="period-status">
+                        <span class="icon">✅</span>
+                        <div>
+                            <div style="font-size: 0.8rem; opacity: 0.8; margin-bottom: 2px;">분석 기간</div>
+                            <div id="periodText">기간이 설정되지 않았습니다</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 분석 결과 영역 -->
+        <main id="analysisResults" class="fade-in">
+            <!-- 로딩 상태 -->
+            <div id="loadingState" class="loading-container" style="display: none;">
+                <div class="loading-spinner"></div>
+                <p class="loading-text">분석 중입니다...</p>
+            </div>
+
+            <!-- 분석 탭 네비게이션 -->
+            <div id="analysisTabNavigation" class="tab-navigation" style="display: none;">
+                <div class="tab-buttons">
+                    <button class="tab-button active" data-tab="work-status">
+                        <span class="icon">📈</span>
+                        기간별 작업 현황
+                    </button>
+                    <button class="tab-button" data-tab="project-distribution">
+                        <span class="icon">🥧</span>
+                        프로젝트별 분포
+                    </button>
+                    <button class="tab-button" data-tab="worker-performance">
+                        <span class="icon">👤</span>
+                        작업자별 성과
+                    </button>
+                    <button class="tab-button" data-tab="error-analysis">
+                        <span class="icon">⚠️</span>
+                        오류 분석
+                    </button>
+                </div>
+            </div>
+
+            <!-- 결과 카드 그리드 -->
+            <div id="resultsGrid" class="results-grid" style="display: none;">
+                <!-- 총 작업 시간 카드 -->
+                <div class="result-card">
+                    <div class="card-header">
+                        <h3 class="card-title">
+                            <span class="icon">⏰</span>
+                            총 작업 시간
+                        </h3>
+                    </div>
+                    <div class="card-value" id="totalHours">0</div>
+                    <p class="card-subtitle">시간</p>
+                    <div class="card-progress">
+                        <div class="progress-bar" id="totalHoursProgress" style="width: 0%"></div>
+                    </div>
+                    <div class="card-stats">
+                        <span>목표 대비</span>
+                        <span id="totalHoursPercent">0%</span>
+                    </div>
+                </div>
+
+                <!-- 정상 작업 시간 카드 -->
+                <div class="result-card success">
+                    <div class="card-header">
+                        <h3 class="card-title">
+                            <span class="icon">✅</span>
+                            정상 작업
+                        </h3>
+                    </div>
+                    <div class="card-value" id="normalHours">0</div>
+                    <p class="card-subtitle">시간</p>
+                    <div class="card-progress">
+                        <div class="progress-bar success" id="normalHoursProgress" style="width: 0%"></div>
+                    </div>
+                    <div class="card-stats">
+                        <span>전체 대비</span>
+                        <span id="normalHoursPercent">0%</span>
+                    </div>
+                </div>
+
+                <!-- 오류 작업 시간 카드 -->
+                <div class="result-card error">
+                    <div class="card-header">
+                        <h3 class="card-title">
+                            <span class="icon">❌</span>
+                            오류 작업
+                        </h3>
+                    </div>
+                    <div class="card-value" id="errorHours">0</div>
+                    <p class="card-subtitle">시간</p>
+                    <div class="card-progress">
+                        <div class="progress-bar error" id="errorHoursProgress" style="width: 0%"></div>
+                    </div>
+                    <div class="card-stats">
+                        <span>오류율</span>
+                        <span id="errorRate">0%</span>
+                    </div>
+                </div>
+
+                <!-- 참여 작업자 수 카드 -->
+                <div class="result-card info">
+                    <div class="card-header">
+                        <h3 class="card-title">
+                            <span class="icon">👥</span>
+                            참여 작업자
+                        </h3>
+                    </div>
+                    <div class="card-value" id="workerCount">0</div>
+                    <p class="card-subtitle">명</p>
+                    <div class="card-progress">
+                        <div class="progress-bar" id="workerProgress" style="width: 0%"></div>
+                    </div>
+                    <div class="card-stats">
+                        <span>평균 작업시간</span>
+                        <span id="avgHoursPerWorker">0h</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 탭 컨텐츠 영역 -->
+            <div id="tabContentContainer" style="display: none;">
+                <!-- 기간별 작업 현황 탭 -->
+                <div id="work-status-tab" class="tab-content active">
+                    <div class="chart-container table-type">
+                        <div class="chart-header">
+                            <h3 class="chart-title">
+                                <span class="icon">📈</span>
+                                기간별 작업 현황
+                            </h3>
+                            <button class="chart-analyze-btn" onclick="analyzeWorkStatus()" disabled>
+                                <span class="icon">🔍</span>
+                                분석 실행
+                            </button>
+                        </div>
+                    <div class="table-container">
+                        <table class="work-report-table" id="workReportTable">
+                            <thead>
+                                <tr>
+                                    <th>작업자<br><small>Worker</small></th>
+                                    <th>분류<br><small>Job No.</small></th>
+                                    <th>작업내용<br><small>Contents</small></th>
+                                    <th>투입시간<br><small>Input</small></th>
+                                    <th>작업공수<br><small>Man/Day</small></th>
+                                    <th>작업일/<br>일평균시간</th>
+                                    <th>비고<br><small>Remarks</small></th>
+                                </tr>
+                            </thead>
+                            <tbody id="workReportTableBody">
+                                <tr>
+                                    <td colspan="7" style="text-align: center; padding: 2rem; color: #666;">
+                                        분석을 실행하여 데이터를 확인하세요
+                                    </td>
+                                </tr>
+                            </tbody>
+                        <tfoot id="workReportTableFooter" style="display: none;">
+                            <tr class="total-row">
+                                <td colspan="3"><strong>총 공수<br><small>Total Man/Day</small></strong></td>
+                                <td><strong id="totalHoursCell">-</strong></td>
+                                <td><strong id="totalManDaysCell">-</strong></td>
+                                <td><strong>-</strong></td>
+                                <td><strong>-</strong></td>
+                            </tr>
+                        </tfoot>
+                        </table>
+                    </div>
+                    </div>
+                </div>
+
+                <!-- 프로젝트별 작업 분포 탭 -->
+                <div id="project-distribution-tab" class="tab-content">
+                    <div class="chart-container table-type">
+                        <div class="chart-header">
+                            <h3 class="chart-title">
+                                <span class="icon">📋</span>
+                                프로젝트별 작업 분포
+                            </h3>
+                            <button class="chart-analyze-btn" onclick="analyzeProjectDistribution()" disabled>
+                                <span class="icon">🔍</span>
+                                분석 실행
+                            </button>
+                        </div>
+                        <div class="table-container">
+                            <table class="production-report-table" id="projectDistributionTable">
+                                <thead>
+                                    <tr>
+                                        <th>Job No.</th>
+                                        <th>작업 내용<br><small>Contents</small></th>
+                                        <th>공 수<br><small>Man / Day</small></th>
+                                        <th>전체 부하율</th>
+                                        <th>인건비<br><small>Labor Cost</small></th>
+                                    </tr>
+                                </thead>
+                                <tbody id="projectDistributionTableBody">
+                                    <tr>
+                                        <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                                            분석을 실행하여 데이터를 확인하세요
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot id="projectDistributionTableFooter" style="display: none;">
+                                    <tr class="total-row">
+                                        <td colspan="2"><strong>합계<br><small>Total</small></strong></td>
+                                        <td><strong id="totalManDays">-</strong></td>
+                                        <td><strong>100.00%</strong></td>
+                                        <td><strong id="totalLaborCost">-</strong></td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 작업자별 성과 탭 -->
+                <div id="worker-performance-tab" class="tab-content">
+                    <div class="chart-container chart-type">
+                        <div class="chart-header">
+                            <h3 class="chart-title">
+                                <span class="icon">👤</span>
+                                작업자별 성과
+                            </h3>
+                            <button class="chart-analyze-btn" onclick="analyzeWorkerPerformance()" disabled>
+                                <span class="icon">🔍</span>
+                                분석 실행
+                            </button>
+                        </div>
+                        <canvas id="workerPerformanceChart" class="chart-canvas"></canvas>
+                    </div>
+                </div>
+
+                <!-- 오류 분석 탭 -->
+                <div id="error-analysis-tab" class="tab-content">
+                    <div class="chart-container table-type">
+                        <div class="chart-header">
+                            <h3 class="chart-title">
+                                <span class="icon">⚠️</span>
+                                오류 분석
+                            </h3>
+                            <button class="chart-analyze-btn" onclick="analyzeErrorAnalysis()" disabled>
+                                <span class="icon">🔍</span>
+                                분석 실행
+                            </button>
+                        </div>
+                        <div class="table-container">
+                            <table class="error-analysis-table" id="errorAnalysisTable">
+                                <thead>
+                                    <tr>
+                                        <th>Job No.</th>
+                                        <th>작업내용<br><small>Contents</small></th>
+                                        <th>총 시간<br><small>Total Hours</small></th>
+                                        <th>세부시간<br><small>Detail Hours</small></th>
+                                        <th>작업 타입<br><small>Work Type</small></th>
+                                        <th>오류율<br><small>Error Rate</small></th>
+                                    </tr>
+                                </thead>
+                                <tbody id="errorAnalysisTableBody">
+                                    <tr>
+                                        <td colspan="6" style="text-align: center; padding: 2rem; color: #666;">
+                                            분석을 실행하여 데이터를 확인하세요
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot id="errorAnalysisTableFooter" style="display: none;">
+                                    <tr class="total-row">
+                                        <td colspan="2"><strong>합계<br><small>Total</small></strong></td>
+                                        <td><strong id="totalErrorHours">-</strong></td>
+                                        <td><strong>-</strong></td>
+                                        <td><strong>-</strong></td>
+                                        <td><strong id="totalErrorRate">-</strong></td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 상세 데이터 테이블 -->
+            <div id="dataTableContainer" class="data-table-container" style="display: none;">
+                <div class="table-header">
+                    <h3 class="table-title">
+                        <span class="icon">📋</span>
+                        상세 작업 데이터
+                    </h3>
+                </div>
+                <div style="overflow-x: auto;">
+                    <table class="data-table" id="detailDataTable">
+                        <thead>
+                            <tr>
+                                <th>날짜</th>
+                                <th>작업자</th>
+                                <th>프로젝트</th>
+                                <th>작업 유형</th>
+                                <th>작업 시간</th>
+                                <th>상태</th>
+                                <th>오류 유형</th>
+                            </tr>
+                        </thead>
+                        <tbody id="detailDataBody">
+                            <!-- 동적으로 생성됨 -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- 대시보드 이동 버튼 (고정) -->
+    <div style="position: fixed; top: 20px; right: 20px; z-index: 1000;">
+        <a href="/pages/dashboard/group-leader.html" 
+           style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; 
+                  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); 
+                  color: white; text-decoration: none; border-radius: 12px; 
+                  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
+                  font-weight: 600; transition: all 0.2s ease;">
+            <span>📊</span>
+            <span>대시보드</span>
+        </a>
+    </div>
+
+    <!-- JavaScript -->
+    <script src="/js/work-analysis.js?v=4"></script>
+    
+    <script>
+        // 서울 표준시(KST) 기준 날짜 함수들
+        function getKSTDate() {
+            const now = new Date();
+            // UTC 시간에 9시간 추가 (KST = UTC+9)
+            const kstOffset = 9 * 60; // 9시간을 분으로 변환
+            const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
+            const kst = new Date(utc + (kstOffset * 60000));
+            return kst;
+        }
+
+        function formatDateToString(date) {
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        }
+
+        // 날짜 문자열을 간단한 형식으로 변환하는 함수
+        function formatSimpleDate(dateStr) {
+            if (!dateStr) return '날짜 없음';
+            if (typeof dateStr === 'string' && dateStr.includes('T')) {
+                return dateStr.split('T')[0]; // 2025-11-01T00:00:00.000Z → 2025-11-01
+            }
+            return dateStr;
+        }
+
+        // 현재 시간 업데이트
+        function updateTime() {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('ko-KR', {
+                hour12: false,
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+            
+            // 시간 표시 요소가 있다면 업데이트
+            const timeElement = document.querySelector('.time-value');
+            if (timeElement) {
+                timeElement.textContent = timeString;
+            }
+        }
+
+        // 전역 변수
+        let confirmedStartDate = null;
+        let confirmedEndDate = null;
+        let isAnalysisEnabled = false;
+        
+        // 페이지 로드 시 초기화
+        document.addEventListener('DOMContentLoaded', function() {
+            // 서울 표준시(KST) 기준 날짜 설정
+            const today = getKSTDate();
+            const monthStart = new Date(today.getFullYear(), today.getMonth(), 1); // 이번 달 1일
+            const monthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 이번 달 마지막 날
+            
+            document.getElementById('startDate').value = formatDateToString(monthStart);
+            document.getElementById('endDate').value = formatDateToString(monthEnd);
+            
+            // 시간 업데이트 시작
+            updateTime();
+            setInterval(updateTime, 1000);
+        });
+        
+        // 기간 확정 함수
+        function confirmPeriod() {
+            const startDate = document.getElementById('startDate').value;
+            const endDate = document.getElementById('endDate').value;
+            
+            if (!startDate || !endDate) {
+                alert('시작일과 종료일을 모두 선택해주세요.');
+                return;
+            }
+            
+            if (new Date(startDate) > new Date(endDate)) {
+                alert('시작일이 종료일보다 늦을 수 없습니다.');
+                return;
+            }
+            
+            confirmedStartDate = startDate;
+            confirmedEndDate = endDate;
+            isAnalysisEnabled = true;
+            
+            // UI 업데이트
+            const periodStatusGroup = document.getElementById('periodStatusGroup');
+            const periodText = document.getElementById('periodText');
+            
+            periodStatusGroup.style.display = 'block';
+            periodText.textContent = `${startDate} ~ ${endDate}`;
+            
+            // 모든 분석 버튼 활성화
+            document.querySelectorAll('.chart-analyze-btn').forEach(btn => {
+                btn.disabled = false;
+            });
+            
+            // 탭 네비게이션과 컨텐츠 표시
+            document.getElementById('analysisTabNavigation').style.display = 'block';
+            document.getElementById('tabContentContainer').style.display = 'block';
+            
+            console.log(`✅ 기간 확정: ${startDate} ~ ${endDate}`);
+        }
+        
+        // 탭 전환 함수
+        function switchTab(tabId) {
+            // 모든 탭 버튼 비활성화
+            document.querySelectorAll('.tab-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            
+            // 모든 탭 컨텐츠 숨기기
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            
+            // 선택된 탭 버튼 활성화
+            document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');
+            
+            // 선택된 탭 컨텐츠 표시
+            document.getElementById(`${tabId}-tab`).classList.add('active');
+            
+            console.log(`🔄 탭 전환: ${tabId}`);
+        }
+        
+        // 탭 버튼 이벤트 리스너 추가
+        document.addEventListener('DOMContentLoaded', function() {
+            // 기존 초기화 코드...
+            
+            // 탭 버튼 클릭 이벤트
+            document.querySelectorAll('.tab-button').forEach(button => {
+                button.addEventListener('click', function() {
+                    const tabId = this.getAttribute('data-tab');
+                    switchTab(tabId);
+                });
+            });
+        });
+        
+        // 개별 분석 함수들
+        async function analyzeWorkStatus() {
+            if (!isAnalysisEnabled) {
+                alert('먼저 기간을 확정해주세요.');
+                return;
+            }
+            
+            console.log('📊 기간별 작업 현황 분석 시작');
+            
+            try {
+                // 기존 renderTimeSeriesChart 로직 사용
+                await renderTimeSeriesChart(confirmedStartDate, confirmedEndDate, '');
+                console.log('✅ 기간별 작업 현황 분석 완료');
+            } catch (error) {
+                console.error('❌ 기간별 작업 현황 분석 오류:', error);
+                alert('기간별 작업 현황 분석에 실패했습니다.');
+            }
+        }
+        
+        async function analyzeProjectDistribution() {
+            if (!isAnalysisEnabled) {
+                alert('먼저 기간을 확정해주세요.');
+                return;
+            }
+            
+            console.log('📋 프로젝트별 작업 분포 분석 시작');
+            
+            try {
+                const params = new URLSearchParams({
+                    start: confirmedStartDate,
+                    end: confirmedEndDate,
+                    limit: 2000
+                });
+                
+                // 기간별 작업 현황 API를 사용해서 프로젝트별 데이터 가져오기
+                const [projectWorktypeResponse, workerResponse, recentWorkResponse] = await Promise.all([
+                    apiCall(`/work-analysis/project-worktype-analysis?${params}`, 'GET'),
+                    apiCall(`/work-analysis/worker-stats?${params}`, 'GET'),
+                    apiCall(`/work-analysis/recent-work?${params}`, 'GET')
+                ]);
+                
+                console.log('🔍 프로젝트-작업유형 API 응답:', projectWorktypeResponse);
+                console.log('🔍 작업자 API 응답:', workerResponse);
+                console.log('🔍 최근 작업 API 응답:', recentWorkResponse);
+                
+                // recent-work 데이터로 프로젝트별 취합
+                const projectData = aggregateProjectData(recentWorkResponse.data || []);
+                console.log('📊 취합된 프로젝트 데이터:', projectData);
+                
+                renderProjectDistributionTableFromRecentWork(projectData, workerResponse.data);
+                console.log('✅ 프로젝트별 작업 분포 분석 완료');
+            } catch (error) {
+                console.error('❌ 프로젝트별 작업 분포 분석 오류:', error);
+                alert('프로젝트별 작업 분포 분석에 실패했습니다.');
+            }
+        }
+        
+        async function analyzeWorkerPerformance() {
+            if (!isAnalysisEnabled) {
+                alert('먼저 기간을 확정해주세요.');
+                return;
+            }
+            
+            console.log('👤 작업자별 성과 분석 시작');
+            
+            try {
+                const params = new URLSearchParams({
+                    start: confirmedStartDate,
+                    end: confirmedEndDate
+                });
+                
+                const response = await apiCall(`/work-analysis/worker-stats?${params}`, 'GET');
+                renderWorkerPerformanceChart(response.data);
+                console.log('✅ 작업자별 성과 분석 완료');
+            } catch (error) {
+                console.error('❌ 작업자별 성과 분석 오류:', error);
+                alert('작업자별 성과 분석에 실패했습니다.');
+            }
+        }
+        
+        // 오류 분석 함수
+        async function analyzeErrorAnalysis() {
+            console.log('⚠️ 오류 분석 시작');
+            
+            if (!confirmedStartDate || !confirmedEndDate) {
+                alert('기간을 먼저 확정해주세요.');
+                return;
+            }
+
+            try {
+                // 병렬로 API 호출
+                const [recentWorkResponse, errorAnalysisResponse] = await Promise.all([
+                    apiCall(`/work-analysis/recent-work?start=${confirmedStartDate}&end=${confirmedEndDate}&limit=2000`, 'GET'),
+                    apiCall(`/work-analysis/error-analysis?start=${confirmedStartDate}&end=${confirmedEndDate}`, 'GET')
+                ]);
+                
+                console.log('🔍 최근 작업 API 응답:', recentWorkResponse);
+                console.log('🔍 오류 분석 API 응답:', errorAnalysisResponse);
+                
+                if (recentWorkResponse.success && recentWorkResponse.data) {
+                    renderErrorAnalysisTable(recentWorkResponse.data);
+                    console.log('✅ 오류 분석 완료');
+                } else {
+                    throw new Error(recentWorkResponse.message || '오류 분석 실패');
+                }
+            } catch (error) {
+                console.error('❌ 오류 분석 실패:', error);
+                alert('오류 분석에 실패했습니다.');
+            }
+        }
+
+        // 오류 분석 테이블 렌더링
+        function renderErrorAnalysisTable(recentWorkData) {
+            console.log('📊 오류 분석 테이블 렌더링 시작');
+            console.log('📊 받은 데이터:', recentWorkData);
+            
+            const tableBody = document.getElementById('errorAnalysisTableBody');
+            const tableFooter = document.getElementById('errorAnalysisTableFooter');
+            
+            console.log('📊 DOM 요소 확인:', { tableBody, tableFooter });
+            
+            // DOM 요소 존재 확인
+            if (!tableBody) {
+                console.error('❌ errorAnalysisTableBody 요소를 찾을 수 없습니다');
+                return;
+            }
+            
+            if (!recentWorkData || recentWorkData.length === 0) {
+                tableBody.innerHTML = `
+                    <tr>
+                        <td colspan="6" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 오류 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tableFooter) {
+                    tableFooter.style.display = 'none';
+                }
+                return;
+            }
+
+            // 작업 형태별 오류 데이터 집계
+            const errorData = aggregateErrorData(recentWorkData);
+            
+            let tableRows = [];
+            let grandTotalHours = 0;
+            let grandTotalRegularHours = 0;
+            let grandTotalErrorHours = 0;
+
+            // 프로젝트별로 그룹화
+            const projectGroups = new Map();
+            errorData.forEach(workType => {
+                const projectKey = workType.isVacation ? 'vacation' : workType.project_id;
+                if (!projectGroups.has(projectKey)) {
+                    projectGroups.set(projectKey, []);
+                }
+                projectGroups.get(projectKey).push(workType);
+            });
+
+            // 프로젝트별로 렌더링
+            Array.from(projectGroups.entries()).forEach(([projectKey, workTypes]) => {
+                workTypes.forEach((workType, index) => {
+                    grandTotalHours += workType.totalHours;
+                    grandTotalRegularHours += workType.regularHours;
+                    grandTotalErrorHours += workType.errorHours;
+
+                    const rowClass = workType.isVacation ? 'vacation-project' : 'project-group';
+                    const isFirstWorkType = index === 0;
+                    const rowspan = workTypes.length;
+                    
+                    // 세부시간 구성
+                    let detailHours = [];
+                    if (workType.regularHours > 0) {
+                        detailHours.push(`<span class="regular-hours">정규: ${workType.regularHours}h</span>`);
+                    }
+                    
+                    // 오류 세부사항 추가
+                    workType.errorDetails.forEach(error => {
+                        detailHours.push(`<span class="error-hours">오류: ${error.type} ${error.hours}h</span>`);
+                    });
+                    
+                    // 작업 타입 구성 (단순화)
+                    let workTypeDisplay = '';
+                    if (workType.regularHours > 0) {
+                        workTypeDisplay += `
+                            <div class="work-type-item regular">
+                                <span class="work-type-status">정규시간</span>
+                            </div>
+                        `;
+                    }
+                    
+                    workType.errorDetails.forEach(error => {
+                        workTypeDisplay += `
+                            <div class="work-type-item error">
+                                <span class="work-type-status">오류: ${error.type}</span>
+                            </div>
+                        `;
+                    });
+                    
+                    tableRows.push(`
+                        <tr class="${rowClass}">
+                            ${isFirstWorkType ? `<td class="project-name" rowspan="${rowspan}">${workType.isVacation ? '연차/휴무' : (workType.project_name || 'N/A')}</td>` : ''}
+                            <td class="work-content">${workType.work_type_name}</td>
+                            <td class="total-hours">${workType.totalHours}h</td>
+                            <td class="detail-hours">
+                                ${detailHours.join('<br>')}
+                            </td>
+                            <td class="work-type">
+                                <div class="work-type-breakdown">
+                                    ${workTypeDisplay}
+                                </div>
+                            </td>
+                            <td class="error-percentage ${workType.errorHours > 0 ? 'has-error' : ''}">${workType.errorRate}%</td>
+                        </tr>
+                    `);
+                });
+            });
+
+            if (tableRows.length === 0) {
+                tableBody.innerHTML = `
+                    <tr>
+                        <td colspan="6" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 작업 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tableFooter) {
+                    tableFooter.style.display = 'none';
+                }
+            } else {
+                tableBody.innerHTML = tableRows.join('');
+                
+                // 총계 업데이트
+                const totalErrorRate = grandTotalHours > 0 ? ((grandTotalErrorHours / grandTotalHours) * 100).toFixed(1) : '0.0';
+                
+                // 안전한 DOM 요소 접근
+                const totalErrorHoursElement = document.getElementById('totalErrorHours');
+                if (totalErrorHoursElement) {
+                    totalErrorHoursElement.textContent = `${grandTotalHours}h`;
+                }
+                
+                if (tableFooter) {
+                    const detailHoursCell = tableFooter.querySelector('.total-row td:nth-child(4)');
+                    const errorRateCell = tableFooter.querySelector('.total-row td:nth-child(6)');
+                    
+                    if (detailHoursCell) {
+                        detailHoursCell.innerHTML = `
+                            <strong>정규: ${grandTotalRegularHours}h<br>오류: ${grandTotalErrorHours}h</strong>
+                        `;
+                    }
+                    
+                    if (errorRateCell) {
+                        errorRateCell.innerHTML = `<strong>${totalErrorRate}%</strong>`;
+                    }
+                    
+                    tableFooter.style.display = 'table-footer-group';
+                }
+            }
+        }
+
+        // 헬퍼 함수들
+        function isWeekendDate(dateString) {
+            const date = new Date(dateString);
+            const dayOfWeek = date.getDay();
+            return dayOfWeek === 0 || dayOfWeek === 6; // 일요일(0) 또는 토요일(6)
+        }
+
+        function isVacationProject(projectName) {
+            if (!projectName) return false;
+            const vacationKeywords = ['연차', '휴무', '휴가', '병가', '특별휴가'];
+            return vacationKeywords.some(keyword => projectName.includes(keyword));
+        }
+
+        // 작업 형태별 오류 데이터 집계 함수
+        function aggregateErrorData(recentWorkData) {
+            const workTypeMap = new Map();
+            let vacationData = null; // 연차/휴무 통합 데이터
+
+            recentWorkData.forEach(work => {
+                const isWeekend = isWeekendDate(work.report_date);
+                const isVacation = isVacationProject(work.project_name);
+                
+                // 주말 연차는 완전히 제외
+                if (isWeekend && isVacation) {
+                    console.log('🏖️ 주말 연차/휴무 제외:', work.report_date, work.project_name);
+                    return;
+                }
+
+                if (isVacation) {
+                    // 모든 연차/휴무를 하나로 통합
+                    if (!vacationData) {
+                        vacationData = {
+                            project_id: 'vacation',
+                            project_name: '연차/휴무',
+                            job_no: null,
+                            work_type_id: 'vacation',
+                            work_type_name: '연차/휴무',
+                            regularHours: 0,
+                            errorHours: 0,
+                            errorDetails: new Map(),
+                            isVacation: true
+                        };
+                    }
+
+                    const hours = parseFloat(work.work_hours) || 0;
+                    if (work.work_status === 'error' || work.error_type_id) {
+                        vacationData.errorHours += hours;
+                        const errorTypeName = work.error_type_name || work.error_description || '설계미스';
+                        if (!vacationData.errorDetails.has(errorTypeName)) {
+                            vacationData.errorDetails.set(errorTypeName, 0);
+                        }
+                        vacationData.errorDetails.set(errorTypeName, 
+                            vacationData.errorDetails.get(errorTypeName) + hours
+                        );
+                    } else {
+                        vacationData.regularHours += hours;
+                    }
+                } else {
+                    // 일반 프로젝트 처리
+                    const workTypeKey = work.work_type_id || 'unknown';
+                    const projectName = work.project_name || `프로젝트 ${work.project_id}`;
+                    const workTypeName = work.work_type_name || `작업유형 ${workTypeKey}`;
+                    
+                    // 작업 형태별로 집계 (프로젝트별로 구분)
+                    const combinedKey = `${work.project_id || 'unknown'}_${workTypeKey}`;
+                    
+                    if (!workTypeMap.has(combinedKey)) {
+                        workTypeMap.set(combinedKey, {
+                            project_id: work.project_id,
+                            project_name: projectName,
+                            job_no: work.job_no,
+                            work_type_id: workTypeKey,
+                            work_type_name: workTypeName,
+                            regularHours: 0,
+                            errorHours: 0,
+                            errorDetails: new Map(), // 오류 유형별 세분화
+                            isVacation: false
+                        });
+                    }
+
+                    const workTypeData = workTypeMap.get(combinedKey);
+                    const hours = parseFloat(work.work_hours) || 0;
+
+                    if (work.work_status === 'error' || work.error_type_id) {
+                        workTypeData.errorHours += hours;
+                        
+                        // 오류 유형별 세분화
+                        const errorTypeName = work.error_type_name || work.error_description || '설계미스';
+                        if (!workTypeData.errorDetails.has(errorTypeName)) {
+                            workTypeData.errorDetails.set(errorTypeName, 0);
+                        }
+                        workTypeData.errorDetails.set(errorTypeName, 
+                            workTypeData.errorDetails.get(errorTypeName) + hours
+                        );
+                    } else {
+                        workTypeData.regularHours += hours;
+                    }
+                }
+            });
+
+            // 결과 배열 생성
+            const result = Array.from(workTypeMap.values());
+            
+            // 연차/휴무 데이터가 있으면 추가
+            if (vacationData && (vacationData.regularHours > 0 || vacationData.errorHours > 0)) {
+                result.push(vacationData);
+            }
+
+            // 최종 데이터 처리
+            return result.map(wt => ({
+                ...wt,
+                totalHours: wt.regularHours + wt.errorHours,
+                errorRate: wt.regularHours + wt.errorHours > 0 ? 
+                    ((wt.errorHours / (wt.regularHours + wt.errorHours)) * 100).toFixed(1) : '0.0',
+                errorDetails: Array.from(wt.errorDetails.entries()).map(([type, hours]) => ({
+                    type, hours
+                }))
+            })).filter(wt => wt.totalHours > 0) // 시간이 있는 것만 표시
+            .sort((a, b) => {
+                // 연차/휴무를 맨 아래로
+                if (a.isVacation && !b.isVacation) return 1;
+                if (!a.isVacation && b.isVacation) return -1;
+                
+                // 같은 프로젝트 내에서는 오류 시간 순으로 정렬
+                if (a.project_id === b.project_id) {
+                    return b.errorHours - a.errorHours;
+                }
+                
+                // 다른 프로젝트는 프로젝트명 순으로 정렬
+                return (a.project_name || '').localeCompare(b.project_name || '');
+            });
+        }
+        
+        // 프로젝트별 작업 분포 테이블 렌더링
+        function renderProjectDistributionTable(projectData, workerData) {
+            const tbody = document.getElementById('projectDistributionTableBody');
+            const tfoot = document.getElementById('projectDistributionTableFooter');
+            
+            if (!tbody) return;
+            
+            console.log('📋 프로젝트별 분포 테이블 렌더링:', projectData);
+            console.log('📋 작업자 데이터:', workerData);
+            
+            // 프로젝트 API 데이터가 null이면 작업자 데이터로 대체
+            if (!projectData || !projectData.projects || projectData.projects.length === 0 || 
+                (projectData.projects[0] && projectData.projects[0].total_project_hours === null)) {
+                console.log('⚠️ 프로젝트 API 데이터가 없어서 작업자 데이터로 대체합니다.');
+                renderFallbackTable(workerData);
+                return;
+            }
+            
+            let tableRows = [];
+            let grandTotalHours = 0;
+            let grandTotalManDays = 0;
+            let grandTotalLaborCost = 0;
+            
+            // 공수당 인건비 (350,000원)
+            const manDayRate = 350000;
+            
+            // 먼저 전체 시간을 계산 (부하율 계산용)
+            if (projectData && projectData.projects && Array.isArray(projectData.projects)) {
+                projectData.projects.forEach(project => {
+                    const workTypes = project.work_types || [];
+                    workTypes.forEach(workType => {
+                        grandTotalHours += parseFloat(workType.total_hours) || 0;
+                    });
+                });
+            }
+            
+            if (projectData && projectData.projects && Array.isArray(projectData.projects)) {
+                projectData.projects.forEach(project => {
+                    const projectName = project.project_name || '알 수 없는 프로젝트';
+                    const workTypes = project.work_types || [];
+                    
+                    let projectTotalHours = 0;
+                    let projectTotalManDays = 0;
+                    let projectTotalLaborCost = 0;
+                    
+                    if (workTypes.length === 0) {
+                        // 작업유형이 없는 경우
+                        const projectHours = parseFloat(project.total_hours) || 0;
+                        const manDays = Math.round((projectHours / 8) * 100) / 100;
+                        const laborCost = manDays * manDayRate;
+                        const loadRate = grandTotalHours > 0 ? ((projectHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                        
+                        projectTotalHours += projectHours;
+                        projectTotalManDays += manDays;
+                        projectTotalLaborCost += laborCost;
+                        
+                        tableRows.push(`
+                            <tr class="project-group">
+                                <td class="project-name">${projectName}</td>
+                                <td class="work-content">전체</td>
+                                <td class="man-days">${manDays}</td>
+                                <td class="load-rate">${loadRate}%</td>
+                                <td class="labor-cost">₩${laborCost.toLocaleString()}</td>
+                            </tr>
+                        `);
+                    } else {
+                        // 작업유형별로 행 생성
+                        workTypes.forEach((workType, index) => {
+                            const workTypeName = workType.work_type_name || `작업유형 ${workType.work_type_id}`;
+                            const workTypeHours = parseFloat(workType.total_hours) || 0;
+                            const manDays = Math.round((workTypeHours / 8) * 100) / 100;
+                            const laborCost = manDays * manDayRate;
+                            const loadRate = grandTotalHours > 0 ? ((workTypeHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                            
+                            projectTotalHours += workTypeHours;
+                            projectTotalManDays += manDays;
+                            projectTotalLaborCost += laborCost;
+                            
+                            const isFirstWorkType = index === 0;
+                            const rowspan = workTypes.length + 1; // +1 for subtotal row
+                            
+                            tableRows.push(`
+                                <tr class="project-group">
+                                    ${isFirstWorkType ? `<td class="project-name" rowspan="${rowspan}">${projectName}</td>` : ''}
+                                    <td class="work-content">${workTypeName}</td>
+                                    <td class="man-days">${manDays}</td>
+                                    <td class="load-rate">${loadRate}%</td>
+                                    <td class="labor-cost">₩${laborCost.toLocaleString()}</td>
+                                </tr>
+                            `);
+                        });
+                        
+                        // 프로젝트별 합계 행 추가
+                        const projectLoadRate = grandTotalHours > 0 ? ((projectTotalHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                        tableRows.push(`
+                            <tr class="project-subtotal">
+                                <td class="work-content"><strong>합계</strong></td>
+                                <td class="man-days"><strong>${Math.round(projectTotalManDays * 100) / 100}</strong></td>
+                                <td class="load-rate"><strong>${projectLoadRate}%</strong></td>
+                                <td class="labor-cost"><strong>₩${projectTotalLaborCost.toLocaleString()}</strong></td>
+                            </tr>
+                        `);
+                    }
+                    
+                    grandTotalManDays += projectTotalManDays;
+                    grandTotalLaborCost += projectTotalLaborCost;
+                });
+            }
+            
+            if (tableRows.length > 0) {
+                tbody.innerHTML = tableRows.join('');
+                
+                // 전체 합계 행 업데이트
+                document.getElementById('totalManDays').textContent = `${Math.round(grandTotalManDays * 100) / 100} 공수`;
+                document.getElementById('totalLaborCost').textContent = `₩${grandTotalLaborCost.toLocaleString()}`;
+                
+                if (tfoot) {
+                    tfoot.style.display = 'table-footer-group';
+                }
+            } else {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 프로젝트 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tfoot) {
+                    tfoot.style.display = 'none';
+                }
+            }
+        }
+        
+        // 작업자 데이터로 대체 테이블 렌더링
+        function renderFallbackTable(workerData) {
+            const tbody = document.getElementById('projectDistributionTableBody');
+            const tfoot = document.getElementById('projectDistributionTableFooter');
+            
+            if (!workerData || !Array.isArray(workerData) || workerData.length === 0) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tfoot) tfoot.style.display = 'none';
+                return;
+            }
+            
+            let tableRows = [];
+            let totalHours = 0;
+            let totalManDays = 0;
+            let totalLaborCost = 0;
+            
+            const manDayRate = 350000; // 공수당 인건비
+            
+            // 작업자별로 행 생성 (임시 데이터)
+            workerData.forEach(worker => {
+                const hours = worker.totalHours || 0;
+                const manDays = Math.round((hours / 8) * 100) / 100;
+                const laborCost = manDays * manDayRate;
+                const loadRate = 0; // 나중에 계산
+                
+                totalHours += hours;
+                totalManDays += manDays;
+                totalLaborCost += laborCost;
+                
+                tableRows.push({
+                    projectName: `작업자 ${worker.worker_name}`,
+                    workContent: '전체 작업',
+                    manDays: manDays,
+                    hours: hours,
+                    laborCost: laborCost
+                });
+            });
+            
+            // 부하율 계산 및 HTML 생성
+            const htmlRows = tableRows.map(row => {
+                const loadRate = totalHours > 0 ? ((row.hours / totalHours) * 100).toFixed(2) : '0.00';
+                return `
+                    <tr class="project-group">
+                        <td class="project-name">${row.projectName}</td>
+                        <td class="work-content">${row.workContent}</td>
+                        <td class="man-days">${row.manDays}</td>
+                        <td class="load-rate">${loadRate}%</td>
+                        <td class="labor-cost">₩${row.laborCost.toLocaleString()}</td>
+                    </tr>
+                `;
+            });
+            
+            tbody.innerHTML = htmlRows.join('');
+            
+            // 합계 행 업데이트
+            document.getElementById('totalManDays').textContent = `${Math.round(totalManDays * 100) / 100} 공수`;
+            document.getElementById('totalLaborCost').textContent = `₩${totalLaborCost.toLocaleString()}`;
+            
+            if (tfoot) {
+                tfoot.style.display = 'table-footer-group';
+            }
+        }
+        
+        // 주말 체크 함수
+        function isWeekend(dateStr) {
+            const date = new Date(dateStr);
+            const dayOfWeek = date.getDay();
+            return dayOfWeek === 0 || dayOfWeek === 6; // 0: 일요일, 6: 토요일
+        }
+        
+        // 연차/휴무 프로젝트 체크 함수
+        function isVacationProject(projectName) {
+            return projectName && (projectName.includes('연차') || projectName.includes('휴무'));
+        }
+        
+        // recent-work 데이터로 프로젝트별 취합
+        function aggregateProjectData(recentWorkData) {
+            const projectMap = new Map();
+            let vacationData = {
+                total_hours: 0,
+                regular_hours: 0,
+                error_hours: 0,
+                total_reports: 0
+            };
+            
+            recentWorkData.forEach(work => {
+                // 연차/휴무 프로젝트인 경우
+                if (isVacationProject(work.project_name)) {
+                    // 주말 연차는 제외
+                    if (!isWeekend(work.report_date)) {
+                        const hours = parseFloat(work.work_hours) || 0;
+                        vacationData.total_hours += hours;
+                        vacationData.total_reports += 1;
+                        
+                        if (work.work_status_name === '정규') {
+                            vacationData.regular_hours += hours;
+                        } else if (work.work_status_name === '에러') {
+                            vacationData.error_hours += hours;
+                        }
+                    }
+                    return; // 연차/휴무는 별도 처리하므로 여기서 종료
+                }
+                
+                const projectKey = `${work.project_id}_${work.project_name}`;
+                
+                if (!projectMap.has(projectKey)) {
+                    projectMap.set(projectKey, {
+                        project_id: work.project_id,
+                        project_name: work.project_name,
+                        job_no: work.job_no || work.project_name || 'N/A',
+                        work_types: new Map()
+                    });
+                }
+                
+                const project = projectMap.get(projectKey);
+                const workTypeKey = `${work.work_type_id}_${work.work_type_name}`;
+                
+                if (!project.work_types.has(workTypeKey)) {
+                    project.work_types.set(workTypeKey, {
+                        work_type_id: work.work_type_id,
+                        work_type_name: work.work_type_name,
+                        total_hours: 0,
+                        regular_hours: 0,
+                        error_hours: 0,
+                        total_reports: 0
+                    });
+                }
+                
+                const workType = project.work_types.get(workTypeKey);
+                const hours = parseFloat(work.work_hours) || 0;
+                
+                workType.total_hours += hours;
+                workType.total_reports += 1;
+                
+                if (work.work_status_name === '정규') {
+                    workType.regular_hours += hours;
+                } else if (work.work_status_name === '에러') {
+                    workType.error_hours += hours;
+                }
+            });
+            
+            // Map을 배열로 변환
+            const projects = Array.from(projectMap.values()).map(project => ({
+                ...project,
+                work_types: Array.from(project.work_types.values())
+            }));
+            
+            // 연차/휴무 데이터가 있으면 맨 마지막에 추가
+            if (vacationData.total_hours > 0) {
+                projects.push({
+                    project_id: 'vacation',
+                    project_name: '연차/휴무',
+                    job_no: '연차/휴무',
+                    work_types: [{
+                        work_type_id: 'vacation',
+                        work_type_name: '-',
+                        total_hours: vacationData.total_hours,
+                        regular_hours: vacationData.regular_hours,
+                        error_hours: vacationData.error_hours,
+                        total_reports: vacationData.total_reports
+                    }]
+                });
+            }
+            
+            return { projects };
+        }
+        
+        // recent-work 데이터로 프로젝트별 분포 테이블 렌더링
+        function renderProjectDistributionTableFromRecentWork(projectData, workerData) {
+            const tbody = document.getElementById('projectDistributionTableBody');
+            const tfoot = document.getElementById('projectDistributionTableFooter');
+            
+            if (!tbody) return;
+            
+            console.log('📋 프로젝트별 분포 테이블 렌더링 (recent-work 기반):', projectData);
+            
+            if (!projectData || !projectData.projects || projectData.projects.length === 0) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
+                            해당 기간에 프로젝트 데이터가 없습니다
+                        </td>
+                    </tr>
+                `;
+                if (tfoot) tfoot.style.display = 'none';
+                return;
+            }
+            
+            let tableRows = [];
+            let grandTotalHours = 0;
+            let grandTotalManDays = 0;
+            let grandTotalLaborCost = 0;
+            
+            const manDayRate = 350000; // 공수당 인건비
+            
+            // 먼저 전체 시간 계산 (부하율 계산용)
+            projectData.projects.forEach(project => {
+                project.work_types.forEach(workType => {
+                    grandTotalHours += workType.total_hours;
+                });
+            });
+            
+            // 프로젝트별로 테이블 행 생성
+            projectData.projects.forEach(project => {
+                const projectName = project.project_name || '알 수 없는 프로젝트';
+                const jobNo = project.job_no || project.project_name || 'N/A';
+                const workTypes = project.work_types || [];
+                
+                let projectTotalHours = 0;
+                let projectTotalManDays = 0;
+                let projectTotalLaborCost = 0;
+                
+                if (workTypes.length === 0) {
+                    // 작업유형이 없는 경우 (빈 프로젝트)
+                    tableRows.push(`
+                        <tr class="project-group">
+                            <td class="project-name">${jobNo}</td>
+                            <td class="work-content">데이터 없음</td>
+                            <td class="man-days">0</td>
+                            <td class="load-rate">0.00%</td>
+                            <td class="labor-cost">₩0</td>
+                        </tr>
+                    `);
+                } else {
+                    // 작업유형별로 행 생성
+                    workTypes.forEach((workType, index) => {
+                        const workTypeName = workType.work_type_name || `작업유형 ${workType.work_type_id}`;
+                        const workTypeHours = workType.total_hours || 0;
+                        const manDays = Math.round((workTypeHours / 8) * 100) / 100;
+                        const laborCost = manDays * manDayRate;
+                        const loadRate = grandTotalHours > 0 ? ((workTypeHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                        
+                        projectTotalHours += workTypeHours;
+                        projectTotalManDays += manDays;
+                        projectTotalLaborCost += laborCost;
+                        
+                        const isFirstWorkType = index === 0;
+                        const rowspan = workTypes.length + 1; // +1 for subtotal row
+                        const isVacation = project.project_id === 'vacation';
+                        const rowClass = isVacation ? 'project-group vacation-project' : 'project-group';
+                        
+                        // 연차/휴무는 프로젝트명만, 일반 프로젝트는 Job No.만 표시
+                        const displayText = isVacation ? projectName : jobNo;
+                        
+                        tableRows.push(`
+                            <tr class="${rowClass}">
+                                ${isFirstWorkType ? `<td class="project-name" rowspan="${rowspan}">${displayText}</td>` : ''}
+                                <td class="work-content">${workTypeName}</td>
+                                <td class="man-days">${manDays}</td>
+                                <td class="load-rate">${loadRate}%</td>
+                                <td class="labor-cost">₩${laborCost.toLocaleString()}</td>
+                            </tr>
+                        `);
+                    });
+                    
+                    // 프로젝트별 합계 행 추가 (연차/휴무는 합계 행 제외)
+                    if (project.project_id !== 'vacation') {
+                        const projectLoadRate = grandTotalHours > 0 ? ((projectTotalHours / grandTotalHours) * 100).toFixed(2) : '0.00';
+                        tableRows.push(`
+                            <tr class="project-subtotal">
+                                <td class="work-content"><strong>합계</strong></td>
+                                <td class="man-days"><strong>${Math.round(projectTotalManDays * 100) / 100}</strong></td>
+                                <td class="load-rate"><strong>${projectLoadRate}%</strong></td>
+                                <td class="labor-cost"><strong>₩${projectTotalLaborCost.toLocaleString()}</strong></td>
+                            </tr>
+                        `);
+                    }
+                }
+                
+                grandTotalManDays += projectTotalManDays;
+                grandTotalLaborCost += projectTotalLaborCost;
+            });
+            
+            tbody.innerHTML = tableRows.join('');
+            
+            // 전체 합계 행 업데이트
+            document.getElementById('totalManDays').textContent = `${Math.round(grandTotalManDays * 100) / 100} 공수`;
+            document.getElementById('totalLaborCost').textContent = `₩${grandTotalLaborCost.toLocaleString()}`;
+            
+            if (tfoot) {
+                tfoot.style.display = 'table-footer-group';
+            }
+        }
+        
+        // 분석 모드 전환
+        function switchAnalysisMode(mode) {
+            // 탭 활성화 상태 변경
+            document.querySelectorAll('.tab-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
+            
+            // 프로젝트 선택 그룹은 제거되었으므로 이 로직은 불필요
+            // const projectGroup = document.getElementById('projectSelectGroup');
+            // if (mode === 'period') {
+            //     projectGroup.style.display = 'block';
+            // } else {
+            //     projectGroup.style.display = 'none';
+            // }
+            
+            // 현재 모드 저장
+            window.currentAnalysisMode = mode;
+        }
+
+        // 프로젝트 목록 로드
+        async function loadProjects() {
+            try {
+                const response = await window.apiCall('/projects/active/list', 'GET');
+                const projects = response.data || response;
+                
+                // 프로젝트 선택 드롭다운이 제거되었으므로 이 로직은 불필요
+                // const select = document.getElementById('projectSelect');
+                // select.innerHTML = '<option value="">전체 프로젝트</option>';
+                // 
+                // projects.forEach(project => {
+                //     const option = document.createElement('option');
+                //     option.value = project.project_id;
+                //     option.textContent = project.project_name;
+                //     select.appendChild(option);
+                // });
+            } catch (error) {
+                console.error('프로젝트 로드 실패:', error);
+            }
+        }
+
+        // 분석 실행
+        async function performAnalysis() {
+            const startDate = document.getElementById('startDate').value;
+            const endDate = document.getElementById('endDate').value;
+            const projectId = ''; // 프로젝트 선택이 제거되었으므로 빈 값으로 설정
+            
+            console.log('🔍 분석 실행 요청:', { startDate, endDate, projectId });
+            
+            if (!startDate || !endDate) {
+                alert('시작일과 종료일을 모두 선택해주세요.');
+                return;
+            }
+            
+            // 날짜 유효성 검사
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+            
+            if (start > end) {
+                alert('시작일이 종료일보다 늦을 수 없습니다.');
+                return;
+            }
+            
+            // 서울 표준시 기준으로 날짜 범위 확인
+            console.log('📅 분석 기간:', {
+                start: formatDateToString(start),
+                end: formatDateToString(end),
+                days: Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1
+            });
+            
+            // 로딩 상태 표시
+            showLoading();
+            
+            try {
+                const mode = window.currentAnalysisMode || 'period';
+                
+                if (mode === 'period') {
+                    await performPeriodAnalysis(startDate, endDate, projectId);
+                } else {
+                    await performProjectAnalysis(startDate, endDate);
+                }
+                
+                showResults();
+            } catch (error) {
+                console.error('분석 실행 실패:', error);
+                alert('분석 실행 중 오류가 발생했습니다.');
+                showEmpty();
+            }
+        }
+
+        // 기간별 분석
+        async function performPeriodAnalysis(startDate, endDate, projectId) {
+            console.log('📊 기간별 분석 실행:', { startDate, endDate, projectId });
+            
+            try {
+                // 실제 API 호출
+                const params = new URLSearchParams({
+                    start: startDate,
+                    end: endDate
+                });
+                
+                if (projectId) {
+                    params.append('project_id', projectId);
+                }
+                
+                console.log('📡 API 호출 파라미터:', params.toString());
+                
+                // 기본 통계 조회
+                const statsResponse = await window.apiCall(`/work-analysis/stats?${params}`, 'GET');
+                console.log('📊 통계 API 응답:', statsResponse);
+                
+                if (statsResponse.success && statsResponse.data) {
+                    const stats = statsResponse.data;
+                    
+                    // 정상/오류 시간 계산
+                    const totalHours = stats.totalHours || 0;
+                    const errorReports = stats.errorRate || 0;
+                    const errorHours = Math.round(totalHours * (errorReports / 100));
+                    const normalHours = totalHours - errorHours;
+                    
+                    updateResultCards({
+                        totalHours: totalHours,
+                        normalHours: normalHours,
+                        errorHours: errorHours,
+                        workerCount: stats.activeworkers || stats.activeWorkers || 0,
+                        errorRate: errorReports
+                    });
+                    
+                    // 추가 데이터 로드 및 차트 렌더링
+                    await loadChartsData(startDate, endDate, projectId);
+                    
+                } else {
+                    console.warn('⚠️ API 응답에 데이터가 없음:', statsResponse);
+                    // 데이터가 없어도 차트는 빈 상태로 표시
+                    updateResultCards({
+                        totalHours: 0,
+                        normalHours: 0,
+                        errorHours: 0,
+                        workerCount: 0,
+                        errorRate: 0
+                    });
+                    
+                    // 빈 차트 표시
+                    await loadChartsData(startDate, endDate, projectId);
+                }
+                
+            } catch (error) {
+                console.error('❌ 기간별 분석 API 오류:', error);
+                // 오류 시 기본값 표시
+                updateResultCards({
+                    totalHours: 0,
+                    normalHours: 0,
+                    errorHours: 0,
+                    workerCount: 0,
+                    errorRate: 0
+                });
+            }
+        }
+
+        // 프로젝트별 분석
+        async function performProjectAnalysis(startDate, endDate) {
+            console.log('🏗️ 프로젝트별 분석 실행:', { startDate, endDate });
+            
+            try {
+                // 실제 API 호출
+                const params = new URLSearchParams({
+                    start: startDate,
+                    end: endDate
+                });
+                
+                console.log('📡 프로젝트별 API 호출 파라미터:', params.toString());
+                
+                // 프로젝트별 통계 조회
+                const projectStatsResponse = await window.apiCall(`/work-analysis/project-stats?${params}`, 'GET');
+                console.log('🏗️ 프로젝트 통계 API 응답:', projectStatsResponse);
+                
+                // 기본 통계도 함께 조회
+                const statsResponse = await window.apiCall(`/work-analysis/stats?${params}`, 'GET');
+                console.log('📊 기본 통계 API 응답:', statsResponse);
+                
+                if (statsResponse.success && statsResponse.data) {
+                    const stats = statsResponse.data;
+                    
+                    // 정상/오류 시간 계산
+                    const totalHours = stats.totalHours || 0;
+                    const errorReports = stats.errorRate || 0;
+                    const errorHours = Math.round(totalHours * (errorReports / 100));
+                    const normalHours = totalHours - errorHours;
+                    
+                    updateResultCards({
+                        totalHours: totalHours,
+                        normalHours: normalHours,
+                        errorHours: errorHours,
+                        workerCount: stats.activeworkers || stats.activeWorkers || 0,
+                        errorRate: errorReports
+                    });
+                } else {
+                    console.warn('⚠️ 프로젝트별 분석 API 응답에 데이터가 없음');
+                    updateResultCards({
+                        totalHours: 0,
+                        normalHours: 0,
+                        errorHours: 0,
+                        workerCount: 0,
+                        errorRate: 0
+                    });
+                }
+                
+            } catch (error) {
+                console.error('❌ 프로젝트별 분석 API 오류:', error);
+                updateResultCards({
+                    totalHours: 0,
+                    normalHours: 0,
+                    errorHours: 0,
+                    workerCount: 0,
+                    errorRate: 0
+                });
+            }
+        }
+
+        // 결과 카드 업데이트
+        function updateResultCards(data) {
+            document.getElementById('totalHours').textContent = data.totalHours;
+            document.getElementById('normalHours').textContent = data.normalHours;
+            document.getElementById('errorHours').textContent = data.errorHours;
+            document.getElementById('workerCount').textContent = data.workerCount;
+            
+            // 퍼센트 계산 및 업데이트
+            const normalPercent = ((data.normalHours / data.totalHours) * 100).toFixed(1);
+            const errorPercent = data.errorRate.toFixed(1);
+            const avgHours = (data.totalHours / data.workerCount).toFixed(1);
+            
+            document.getElementById('normalHoursPercent').textContent = normalPercent + '%';
+            document.getElementById('errorRate').textContent = errorPercent + '%';
+            document.getElementById('avgHoursPerWorker').textContent = avgHours + 'h';
+            
+            // 프로그레스 바 업데이트
+            document.getElementById('normalHoursProgress').style.width = normalPercent + '%';
+            document.getElementById('errorHoursProgress').style.width = errorPercent + '%';
+            document.getElementById('totalHoursProgress').style.width = '85%'; // 목표 대비
+            document.getElementById('workerProgress').style.width = '75%'; // 전체 작업자 대비
+        }
+
+        // UI 상태 관리
+        function showLoading() {
+            document.getElementById('emptyState').style.display = 'none';
+            document.getElementById('resultsGrid').style.display = 'none';
+            document.getElementById('chartsContainer').style.display = 'none';
+            document.getElementById('dataTableContainer').style.display = 'none';
+            document.getElementById('loadingState').style.display = 'flex';
+        }
+
+        function showResults() {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('emptyState').style.display = 'none';
+            document.getElementById('resultsGrid').style.display = 'grid';
+            document.getElementById('chartsContainer').style.display = 'block';
+            document.getElementById('dataTableContainer').style.display = 'block';
+        }
+
+        function showEmpty() {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('resultsGrid').style.display = 'none';
+            document.getElementById('chartsContainer').style.display = 'none';
+            document.getElementById('dataTableContainer').style.display = 'none';
+            document.getElementById('emptyState').style.display = 'flex';
+        }
+
+        // 차트 데이터 로드 및 렌더링
+        async function loadChartsData(startDate, endDate, projectId) {
+            console.log('📈 차트 데이터 로딩 시작...');
+            
+            try {
+                const params = new URLSearchParams({
+                    start: startDate,
+                    end: endDate
+                });
+                
+                if (projectId) {
+                    params.append('project_id', projectId);
+                }
+                
+                // 여러 API를 병렬로 호출
+                const [dailyTrendRes, workerStatsRes, projectStatsRes, errorAnalysisRes] = await Promise.all([
+                    window.apiCall(`/work-analysis/daily-trend?${params}`, 'GET').catch(err => {
+                        console.warn('일별 추이 API 오류:', err);
+                        return { success: false, data: [] };
+                    }),
+                    window.apiCall(`/work-analysis/worker-stats?${params}`, 'GET').catch(err => {
+                        console.warn('작업자 통계 API 오류:', err);
+                        return { success: false, data: [] };
+                    }),
+                    window.apiCall(`/work-analysis/project-stats?${params}`, 'GET').catch(err => {
+                        console.warn('프로젝트 통계 API 오류:', err);
+                        return { success: false, data: [] };
+                    }),
+                    window.apiCall(`/work-analysis/error-analysis?${params}`, 'GET').catch(err => {
+                        console.warn('오류 분석 API 오류:', err);
+                        return { success: false, data: [] };
+                    })
+                ]);
+                
+                console.log('📊 차트 API 응답들:', {
+                    dailyTrend: dailyTrendRes,
+                    workerStats: workerStatsRes,
+                    projectStats: projectStatsRes,
+                    errorAnalysis: errorAnalysisRes
+                });
+                
+                // 차트 렌더링 (기간별 작업 현황은 개별 버튼으로 실행)
+                // renderTimeSeriesChart(startDate, endDate, projectId);
+                renderProjectDistributionChart(projectStatsRes.data || []);
+                renderWorkerPerformanceChart(workerStatsRes.data || []);
+                renderErrorAnalysisChart(errorAnalysisRes.data || []);
+                
+                // 상세 데이터 테이블 렌더링
+                renderDetailDataTable(startDate, endDate, projectId);
+                
+            } catch (error) {
+                console.error('❌ 차트 데이터 로딩 오류:', error);
+                // 오류 시에도 빈 차트 표시 (기간별 작업 현황은 개별 버튼으로 실행)
+                // renderTimeSeriesChart('', '', '');
+                renderProjectDistributionChart([]);
+                renderWorkerPerformanceChart([]);
+                renderErrorAnalysisChart([]);
+            }
+        }
+        
+        // 기간별 작업 현황 테이블 렌더링 (작업자별 → 프로젝트별 → 작업유형별)
+        async function renderTimeSeriesChart(startDate, endDate, projectId = '') {
+            try {
+                // 프로젝트별-작업유형별 상세 데이터 조회
+                const params = new URLSearchParams({
+                    start: startDate || confirmedStartDate,
+                    end: endDate || confirmedEndDate
+                });
+                
+                // 프로젝트 ID가 제공된 경우에만 필터링 적용
+                if (projectId) {
+                    params.append('project_id', projectId);
+                }
+                
+                console.log('📊 작업 현황 테이블 데이터 로딩...');
+                
+                // 프로젝트-작업유형, 작업자 데이터를 먼저 가져오기
+                const [detailResponse, workerResponse] = await Promise.all([
+                    window.apiCall(`/work-analysis/project-worktype-analysis?${params}`, 'GET'),
+                    window.apiCall(`/work-analysis/worker-stats?${params}`, 'GET')
+                ]);
+                
+                // 상세 작업 데이터를 한 번에 많이 가져오기 (서버 limit 증가로 인해 가능)
+                console.log('📊 상세 작업 데이터 로딩...');
+                let allRecentWorkData = [];
+                
+                try {
+                    // 먼저 큰 limit으로 시도 (한 달 데이터라면 보통 1000-2000개 정도)
+                    const recentWorkResponse = await window.apiCall(`/work-analysis/recent-work?${params}&limit=2000`, 'GET');
+                    
+                    if (recentWorkResponse.success && recentWorkResponse.data) {
+                        allRecentWorkData = recentWorkResponse.data;
+                        console.log(`📊 ${allRecentWorkData.length}개의 상세 작업 데이터 수집 완료`);
+                    } else {
+                        console.warn('📊 상세 작업 데이터가 없습니다');
+                    }
+                } catch (error) {
+                    console.error('📊 상세 작업 데이터 로딩 실패:', error);
+                    
+                    // 실패하면 작은 limit으로 재시도
+                    try {
+                        const fallbackResponse = await window.apiCall(`/work-analysis/recent-work?${params}&limit=100`, 'GET');
+                        if (fallbackResponse.success && fallbackResponse.data) {
+                            allRecentWorkData = fallbackResponse.data;
+                            console.log(`📊 폴백으로 ${allRecentWorkData.length}개의 상세 작업 데이터 수집 완료`);
+                        }
+                    } catch (fallbackError) {
+                        console.error('📊 폴백 데이터 로딩도 실패:', fallbackError);
+                        allRecentWorkData = [];
+                    }
+                }
+                
+                console.log('📊 프로젝트-작업유형 API 응답:', detailResponse);
+                console.log('📊 작업자 통계 API 응답:', workerResponse);
+                
+                if (detailResponse.success && detailResponse.data) {
+                    // 모든 데이터를 함께 전달
+                    const workerData = workerResponse.success ? workerResponse.data : [];
+                    renderWorkReportTable(detailResponse.data, workerData, allRecentWorkData);
+                } else {
+                    // 데이터가 없으면 빈 테이블 표시
+                    renderEmptyWorkReportTable();
+                }
+                
+            } catch (error) {
+                console.error('❌ 작업 현황 테이블 렌더링 오류:', error);
+                renderEmptyWorkReportTable(`데이터 로딩 실패: ${error.message}`);
+            }
+        }
+        
+        // 작업 현황 테이블 렌더링
+        function renderWorkReportTable(apiResponse, workerData = [], recentWorkData = []) {
+            const tbody = document.getElementById('workReportTableBody');
+            const tfoot = document.getElementById('workReportTableFooter');
+            
+            if (!tbody) return;
+            
+            console.log('🔄 작업 현황 테이블 데이터 처리 중:', apiResponse);
+            
+            let tableRows = [];
+            let totalHours = 0;
+            let totalManDays = 0;
+            
+            // 주말 체크 함수
+            function isWeekend(dateStr) {
+                const date = new Date(dateStr);
+                const dayOfWeek = date.getDay();
+                return dayOfWeek === 0 || dayOfWeek === 6; // 0=일요일, 6=토요일
+            }
+            
+            // 연차/휴무 프로젝트 체크 함수
+            function isVacationProject(projectName) {
+                return projectName && (
+                    projectName.includes('연차') || 
+                    projectName.includes('휴무') ||
+                    projectName.toLowerCase().includes('vacation') ||
+                    projectName.toLowerCase().includes('holiday')
+                );
+            }
+            
+            // 상세 데이터에서 작업자별 실제 작업일수 계산 (주말 연차/휴무 제외)
+            const workerActualWorkDays = {};
+            if (recentWorkData && Array.isArray(recentWorkData)) {
+                recentWorkData.forEach(work => {
+                    const workerName = work.worker_name || '알 수 없음';
+                    const projectName = work.project_name || '알 수 없는 프로젝트';
+                    const workDate = work.report_date;
+                    
+                    // 주말 연차/휴무는 작업일수 계산에서 제외
+                    if (isVacationProject(projectName) && isWeekend(workDate)) {
+                        return; // 작업일수에 포함하지 않음
+                    }
+                    
+                    if (!workerActualWorkDays[workerName]) {
+                        workerActualWorkDays[workerName] = new Set();
+                    }
+                    
+                    // 같은 날짜에 여러 작업이 있어도 작업일은 1일로 계산
+                    if (workDate) {
+                        workerActualWorkDays[workerName].add(formatSimpleDate(workDate));
+                    }
+                });
+            }
+            
+            // 작업자별 전체 통계 계산 (작업공수, 작업일 계산용) - 주말 연차/휴무 제외된 시간 계산
+            const workerTotalStats = {};
+            
+            // 작업자별 실제 총 시간 계산 (주말 연차/휴무 제외)
+            const workerActualTotalHours = {};
+            if (recentWorkData && Array.isArray(recentWorkData)) {
+                recentWorkData.forEach(work => {
+                    const workerName = work.worker_name || '알 수 없음';
+                    const projectName = work.project_name || '알 수 없는 프로젝트';
+                    const workHours = parseFloat(work.work_hours) || 0;
+                    const workDate = work.report_date;
+                    
+                    // 주말 연차/휴무는 총 시간에서 제외
+                    if (isVacationProject(projectName) && isWeekend(workDate)) {
+                        return; // 총 시간에 포함하지 않음
+                    }
+                    
+                    if (!workerActualTotalHours[workerName]) {
+                        workerActualTotalHours[workerName] = 0;
+                    }
+                    
+                    workerActualTotalHours[workerName] += workHours;
+                });
+            }
+            
+            if (workerData && Array.isArray(workerData)) {
+                workerData.forEach(worker => {
+                    const workerName = worker.worker_name || worker.name || '알 수 없음';
+                    
+                    // 실제 계산된 총 시간 사용 (주말 연차/휴무 제외)
+                    const workerTotalHours = workerActualTotalHours[workerName] || 0;
+                    
+                    // 실제 작업일수 사용 (상세 데이터에서 계산된 값)
+                    const actualWorkDays = workerActualWorkDays[workerName] ? workerActualWorkDays[workerName].size : Math.ceil(workerTotalHours / 8);
+                    
+                    workerTotalStats[workerName] = {
+                        totalHours: workerTotalHours,
+                        workDays: actualWorkDays,
+                        manDays: Math.round((workerTotalHours / 8) * 100) / 100,
+                        avgHours: actualWorkDays > 0 ? Math.round((workerTotalHours / actualWorkDays) * 100) / 100 : 0
+                    };
+                });
+            }
+            
+            console.log('👥 작업자별 전체 통계:', workerTotalStats);
+            
+            // 작업자별로 데이터 그룹화 (프로젝트별로 먼저 그룹화)
+            const workerGroupedData = {};
+            
+            // 상세 데이터에서 작업자별 프로젝트-작업유형 데이터 수집
+            if (recentWorkData && Array.isArray(recentWorkData)) {
+                recentWorkData.forEach(work => {
+                    const workerName = work.worker_name || '알 수 없음';
+                    const projectName = work.project_name || '알 수 없는 프로젝트';
+                    const workTypeName = work.work_type_name || `작업유형 ${work.work_type_id}`;
+                    const workHours = parseFloat(work.work_hours) || 0;
+                    const workDate = work.report_date;
+                    
+                    // 주말 연차/휴무는 집계에서 제외
+                    if (isVacationProject(projectName) && isWeekend(workDate)) {
+                        console.log(`🚫 주말 연차/휴무 제외: ${workerName} - ${projectName} (${formatSimpleDate(workDate)})`);
+                        return; // 집계하지 않음
+                    }
+                    
+                    if (!workerGroupedData[workerName]) {
+                        workerGroupedData[workerName] = {};
+                    }
+                    
+                    if (!workerGroupedData[workerName][projectName]) {
+                        workerGroupedData[workerName][projectName] = {};
+                    }
+                    
+                    // 연차/휴무 프로젝트는 작업내용을 통합
+                    let finalWorkTypeName = workTypeName;
+                    if (isVacationProject(projectName)) {
+                        finalWorkTypeName = '-'; // 연차/휴무는 작업내용을 '-'로 통합
+                        console.log(`🏖️ 연차/휴무 통합: ${workerName} - ${projectName} (${workTypeName} → -)`);
+                    }
+                    
+                    if (!workerGroupedData[workerName][projectName][finalWorkTypeName]) {
+                        workerGroupedData[workerName][projectName][finalWorkTypeName] = 0;
+                    }
+                    
+                    workerGroupedData[workerName][projectName][finalWorkTypeName] += workHours;
+                    totalHours += workHours;
+                });
+            }
+            
+            console.log('👥 작업자별 그룹화된 데이터:', workerGroupedData);
+            
+            // 작업자별로 테이블 행 생성 (프로젝트별 그룹화 + rowspan 사용)
+            let workerIndex = 0;
+            const workerNames = Object.keys(workerGroupedData);
+            
+            Object.entries(workerGroupedData).forEach(([workerName, workerProjects]) => {
+                const workerStats = workerTotalStats[workerName];
+                
+                if (workerStats && !workerStats.counted) {
+                    totalManDays += workerStats.manDays;
+                    workerStats.counted = true;
+                }
+                
+                // 작업자의 총 행 수 계산 (모든 프로젝트의 작업유형 합계)
+                let totalWorkerRows = 0;
+                Object.values(workerProjects).forEach(workTypes => {
+                    totalWorkerRows += Object.keys(workTypes).length;
+                });
+                
+                let workerRowIndex = 0;
+                const isFirstWorker = workerIndex === 0;
+                const isLastWorker = workerIndex === workerNames.length - 1;
+                
+                // 프로젝트 정렬: 연차/휴무를 맨 아래로
+                const sortedProjects = Object.entries(workerProjects).sort(([projectNameA], [projectNameB]) => {
+                    const isVacationA = isVacationProject(projectNameA);
+                    const isVacationB = isVacationProject(projectNameB);
+                    
+                    // 연차/휴무가 아닌 것을 위로, 연차/휴무를 아래로
+                    if (isVacationA && !isVacationB) return 1;  // A가 연차/휴무면 아래로
+                    if (!isVacationA && isVacationB) return -1; // B가 연차/휴무면 A를 위로
+                    
+                    // 둘 다 연차/휴무이거나 둘 다 일반 프로젝트면 이름순 정렬
+                    return projectNameA.localeCompare(projectNameB);
+                });
+                
+                console.log(`👤 ${workerName} 프로젝트 정렬 결과:`, sortedProjects.map(([name]) => name));
+                
+                // 정렬된 프로젝트별로 처리
+                sortedProjects.forEach(([projectName, workTypes]) => {
+                    const workTypeEntries = Object.entries(workTypes);
+                    const projectRowCount = workTypeEntries.length;
+                    
+                    // 작업유형별로 행 생성
+                    workTypeEntries.forEach(([workTypeName, hours], workTypeIndex) => {
+                        const isFirstWorkerRow = workerRowIndex === 0;
+                        const isFirstProjectRow = workTypeIndex === 0;
+                        const isLastProjectRow = workTypeIndex === projectRowCount - 1;
+                        const isLastWorkerRow = workerRowIndex === totalWorkerRows - 1;
+                        
+                        let rowClass = 'worker-group';
+                        if (isFirstWorkerRow) rowClass += ' worker-group-first';
+                        if (isLastWorkerRow) rowClass += ' worker-group-last';
+                        if (isFirstProjectRow) rowClass += ' project-group-first';
+                        if (isLastProjectRow) rowClass += ' project-group-last';
+                        
+                        // 연차/휴무 프로젝트 구분 클래스 추가
+                        if (isVacationProject(projectName)) {
+                            rowClass += ' vacation-project';
+                        }
+                        
+                        if (workerStats) {
+                            tableRows.push(`
+                                <tr class="${rowClass}">
+                                    ${isFirstWorkerRow ? `<td class="worker-name" rowspan="${totalWorkerRows}">${workerName}</td>` : ''}
+                                    ${isFirstProjectRow ? `<td class="project-name" rowspan="${projectRowCount}">${projectName}</td>` : ''}
+                                    <td class="work-content">${workTypeName}</td>
+                                    <td class="input-hours">${Math.round(hours * 100) / 100}h</td>
+                                    ${isFirstWorkerRow ? `<td class="man-days" rowspan="${totalWorkerRows}">${workerStats.manDays} 공수</td>` : ''}
+                                    ${isFirstWorkerRow ? `<td class="work-days" rowspan="${totalWorkerRows}">${workerStats.workDays}일 / ${workerStats.avgHours}시간</td>` : ''}
+                                    ${isFirstWorkerRow ? `<td rowspan="${totalWorkerRows}"></td>` : ''}
+                                </tr>
+                            `);
+                        } else {
+                            tableRows.push(`
+                                <tr class="${rowClass}">
+                                    ${isFirstWorkerRow ? `<td class="worker-name" rowspan="${totalWorkerRows}">${workerName}</td>` : ''}
+                                    ${isFirstProjectRow ? `<td class="project-name" rowspan="${projectRowCount}">${projectName}</td>` : ''}
+                                    <td class="work-content">${workTypeName}</td>
+                                    <td class="input-hours">${Math.round(hours * 100) / 100}h</td>
+                                    ${isFirstWorkerRow ? `<td class="man-days" rowspan="${totalWorkerRows}">-</td>` : ''}
+                                    ${isFirstWorkerRow ? `<td class="work-days" rowspan="${totalWorkerRows}">-</td>` : ''}
+                                    ${isFirstWorkerRow ? `<td rowspan="${totalWorkerRows}"></td>` : ''}
+                                </tr>
+                            `);
+                        }
+                        
+                        workerRowIndex++;
+                    });
+                });
+                
+                workerIndex++;
+            });
+            
+            // 데이터가 없는 경우
+            if (tableRows.length === 0) {
+                renderEmptyWorkReportTable('해당 기간에 작업 데이터가 없습니다');
+                return;
+            }
+            
+            // 테이블 업데이트
+            tbody.innerHTML = tableRows.join('');
+            
+            // 총계 업데이트
+            document.getElementById('totalHoursCell').textContent = `${Math.round(totalHours * 100) / 100}시간`;
+            document.getElementById('totalManDaysCell').textContent = `${Math.round(totalManDays * 100) / 100} 공수`;
+            
+            // 푸터 표시
+            if (tfoot) {
+                tfoot.style.display = 'table-footer-group';
+            }
+            
+            console.log('✅ 작업 현황 테이블 렌더링 완료:', { totalHours, totalManDays, rows: tableRows.length });
+        }
+        
+        // 빈 테이블 표시
+        function renderEmptyWorkReportTable(message = '분석을 실행하여 데이터를 확인하세요') {
+            const tbody = document.getElementById('workReportTableBody');
+            const tfoot = document.getElementById('workReportTableFooter');
+            
+            if (tbody) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="7" style="text-align: center; padding: 2rem; color: #666;">
+                            ${message}
+                        </td>
+                    </tr>
+                `;
+            }
+            
+            if (tfoot) {
+                tfoot.style.display = 'none';
+            }
+        }
+        
+        // 프로젝트 분포 차트 렌더링
+        function renderProjectDistributionChart(data) {
+            const ctx = document.getElementById('projectDistributionChart');
+            if (!ctx) return;
+            
+            if (window.projectDistributionChart && typeof window.projectDistributionChart.destroy === 'function') {
+                window.projectDistributionChart.destroy();
+            }
+            
+            // 데이터가 없으면 기본 메시지 표시
+            let labels, values;
+            if (!data || data.length === 0) {
+                labels = ['데이터 없음'];
+                values = [0];
+            } else {
+                labels = data.map(item => item.project_name || item.name || '프로젝트 없음');
+                values = data.map(item => item.totalHours || item.total_hours || 0);
+            }
+            const colors = [
+                '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
+                '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
+            ];
+            
+            window.projectDistributionChart = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        data: values,
+                        backgroundColor: colors.slice(0, labels.length),
+                        borderWidth: 2,
+                        borderColor: '#ffffff'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'right'
+                        }
+                    }
+                }
+            });
+        }
+        
+        // 작업자 성과 차트 렌더링
+        function renderWorkerPerformanceChart(data) {
+            const ctx = document.getElementById('workerPerformanceChart');
+            if (!ctx) return;
+            
+            if (window.workerPerformanceChart && typeof window.workerPerformanceChart.destroy === 'function') {
+                window.workerPerformanceChart.destroy();
+            }
+            
+            // 데이터가 없으면 기본 메시지 표시
+            let labels, values;
+            if (!data || data.length === 0) {
+                labels = ['데이터 없음'];
+                values = [0];
+            } else {
+                labels = data.map(item => item.worker_name || item.name || '작업자 없음');
+                values = data.map(item => item.totalHours || item.total_hours || 0);
+            }
+            
+            window.workerPerformanceChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: '작업 시간',
+                        data: values,
+                        backgroundColor: '#10b981',
+                        borderColor: '#059669',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: '작업 시간 (시간)'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        // 오류 분석 차트 렌더링
+        function renderErrorAnalysisChart(data) {
+            const ctx = document.getElementById('errorAnalysisChart');
+            if (!ctx) return;
+            
+            if (window.errorAnalysisChart && typeof window.errorAnalysisChart.destroy === 'function') {
+                window.errorAnalysisChart.destroy();
+            }
+            
+            // 데이터가 없으면 기본 메시지 표시
+            let labels, values;
+            if (!data || data.length === 0) {
+                labels = ['오류 없음'];
+                values = [0];
+            } else {
+                labels = data.map(item => item.error_type_name || item.name || '오류 유형 없음');
+                values = data.map(item => item.error_count || item.count || 0);
+            }
+            
+            window.errorAnalysisChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: '오류 발생 횟수',
+                        data: values,
+                        backgroundColor: '#ef4444',
+                        borderColor: '#dc2626',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: '오류 발생 횟수'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        // 상세 데이터 테이블 렌더링
+        async function renderDetailDataTable(startDate, endDate, projectId) {
+            try {
+                const params = new URLSearchParams({
+                    start: startDate,
+                    end: endDate,
+                    limit: 100
+                });
+                
+                if (projectId) {
+                    params.append('project_id', projectId);
+                }
+                
+                const recentWorkRes = await window.apiCall(`/work-analysis/recent-work?${params}`, 'GET');
+                console.log('📋 상세 데이터 API 응답:', recentWorkRes);
+                
+                const tbody = document.getElementById('detailDataBody');
+                if (!tbody) return;
+                
+                if (recentWorkRes.success && recentWorkRes.data && recentWorkRes.data.length > 0) {
+                    tbody.innerHTML = recentWorkRes.data.map(item => `
+                        <tr>
+                            <td>${formatSimpleDate(item.report_date)}</td>
+                            <td>${item.worker_name || '작업자 없음'}</td>
+                            <td>${item.project_name || '프로젝트 없음'}</td>
+                            <td>${item.work_type_name || '작업 유형 없음'}</td>
+                            <td>${item.work_hours || 0}시간</td>
+                            <td>
+                                <span class="status-badge ${item.work_status_id === 2 ? 'error' : 'success'}">
+                                    ${item.work_status_id === 2 ? '오류' : '정상'}
+                                </span>
+                            </td>
+                            <td>${item.error_type_name || '-'}</td>
+                        </tr>
+                    `).join('');
+                } else {
+                    tbody.innerHTML = `
+                        <tr>
+                            <td colspan="7" style="text-align: center; padding: 40px; color: #6b7280;">
+                                선택한 기간에 작업 데이터가 없습니다.
+                            </td>
+                        </tr>
+                    `;
+                }
+            } catch (error) {
+                console.error('❌ 상세 데이터 테이블 렌더링 오류:', error);
+                const tbody = document.getElementById('detailDataBody');
+                if (tbody) {
+                    tbody.innerHTML = `
+                        <tr>
+                            <td colspan="7" style="text-align: center; padding: 40px; color: #ef4444;">
+                                데이터 로딩 중 오류가 발생했습니다.
+                            </td>
+                        </tr>
+                    `;
+                }
+            }
+        }
+
+        // 초기 모드 설정
+        window.currentAnalysisMode = 'period';
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web-ui/pages/dashboard/group-leader.html b/web-ui/pages/dashboard/group-leader.html
index d2f4530..4136eaa 100644
--- a/web-ui/pages/dashboard/group-leader.html
+++ b/web-ui/pages/dashboard/group-leader.html
@@ -13,7 +13,7 @@
   <!-- 스크립트 (순서 중요: api-config.js가 먼저 로드되어야 함) -->
   <script src="/js/api-config.js"></script>
   <script src="/js/auth-check.js" defer></script>
-  <script src="/js/modern-dashboard.js" defer></script>
+  <script src="/js/modern-dashboard.js?v=3" defer></script>
 </head>
 <body>
   <!-- 메인 컨테이너 -->