refactor(web-ui): 전체 UI 반응형 디자인 개선

모든 화면 크기에서 일관되고 안정적인 사용자 경험을 제공하도록
UI 컴포넌트를 전면 개선했습니다.

주요 변경사항:
- 네비게이션 바: flex-wrap, rem 단위, sticky positioning 적용
- 사용자 정보 영역: max-width로 크기 제한, 텍스트 overflow 처리
- 공통 헤더: clamp()로 반응형 폰트, 반응형 패딩 적용
- 모든 관리 페이지: ES6 모듈 로딩 통일 (type="module")
- 반응형 breakpoint: 1200px, 768px, 640px, 480px

개선 효과:
✅ 모든 페이지에서 일관된 헤더 표시
✅ 사용자 정보 영역 늘어나는 문제 해결
✅ 모든 화면 크기에서 최적화된 레이아웃
✅ rem 단위 사용으로 접근성 개선

수정된 파일:
- web-ui/components/navbar.html: 전면 리팩토링
- web-ui/css/common.css: 반응형 스타일 추가
- web-ui/pages/**/*.html: 모듈 로딩 및 버전 업데이트 (13개 파일)
- web-ui/js/*.js: 모듈 시스템 개선

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

web-ui/js/api-config.js

@@ -118,18 +118,34 @@ async function apiCall(url, method = 'GET', data = null) {
     if (!response.ok) {
       let errorMessage = `HTTP ${response.status}`;
       try {
-        const errorData = await response.json();
-        errorMessage = errorData.error || errorData.message || errorMessage;
-        console.error('📋 서버 에러 상세:', errorData);
-      } catch (e) {
-        // JSON 파싱 실패시 텍스트로 시도
-        try {
+        const contentType = response.headers.get('content-type');
+
+        if (contentType && contentType.includes('application/json')) {
+          const errorData = await response.json();
+          console.error('📋 서버 에러 상세:', errorData);
+
+          // 에러 메시지 추출 (여러 형식 지원)
+          if (typeof errorData === 'string') {
+            errorMessage = errorData;
+          } else if (errorData.error) {
+            errorMessage = typeof errorData.error === 'string'
+              ? errorData.error
+              : JSON.stringify(errorData.error);
+          } else if (errorData.message) {
+            errorMessage = errorData.message;
+          } else if (errorData.details) {
+            errorMessage = errorData.details;
+          } else {
+            errorMessage = `HTTP ${response.status}: ${JSON.stringify(errorData)}`;
+          }
+        } else {
           const errorText = await response.text();
           console.error('📋 서버 에러 텍스트:', errorText);
           errorMessage = errorText || errorMessage;
-        } catch (e2) {
-          console.error('📋 에러 파싱 실패');
         }
+      } catch (e) {
+        console.error('📋 에러 파싱 중 예외 발생:', e.message);
+        // 파싱 실패해도 HTTP 상태 코드는 전달
       }
       throw new Error(errorMessage);
     }
@@ -182,10 +198,31 @@ async function testApiConnection() {
   }
 }
 
+// API 헬퍼 함수들
+async function apiGet(url) {
+  return apiCall(url, 'GET');
+}
+
+async function apiPost(url, data) {
+  return apiCall(url, 'POST', data);
+}
+
+async function apiPut(url, data) {
+  return apiCall(url, 'PUT', data);
+}
+
+async function apiDelete(url) {
+  return apiCall(url, 'DELETE');
+}
+
 // 전역 함수로 설정
 window.ensureAuthenticated = ensureAuthenticated;
 window.getAuthHeaders = getAuthHeaders;
 window.apiCall = apiCall;
+window.apiGet = apiGet;
+window.apiPost = apiPost;
+window.apiPut = apiPut;
+window.apiDelete = apiDelete;
 window.testApiConnection = testApiConnection;
 window.isTokenExpired = isTokenExpired;
 window.clearAuthData = clearAuthData;

web-ui/js/component-loader.js

@@ -11,7 +11,7 @@ import { config } from './config.js';
 export async function loadComponent(componentName, containerSelector, domProcessor = null) {
   const container = document.querySelector(containerSelector);
   if (!container) {
-    console.error(`🔴 컴포넌트를 삽입할 컨테이너를 찾을 수 없습니다: ${containerSelector}`);
+    console.warn(`⚠️ 컴포넌트를 삽입할 컨테이너를 찾을 수 없습니다: ${containerSelector} (선택사항일 수 있음)`);
     return;
   }
 

web-ui/js/modules/calendar/CalendarAPI.js

@@ -90,7 +90,7 @@
 
   /**
    * 폴백: 순차적 로딩 (지연 시간 포함) - Private helper
-   * @param {number} year 
+   * @param {number} year
    * @param {number} month (0-indexed)
    * @returns {Promise<object>}
    */
@@ -101,22 +101,43 @@
       const firstDay = new Date(year, month, 1);
       const lastDay = new Date(year, month + 1, 0);
       const currentDay = new Date(firstDay);
-      
-      const promises = [];
-      while (currentDay <= lastDay) {
-        const dateStr = currentDay.toISOString().split('T')[0];
-        promises.push(window.apiGet(`/daily-work-reports?date=${dateStr}&view_all=true`));
-        currentDay.setDate(currentDay.getDate() + 1);
-      }
-      
-      const results = await Promise.all(promises);
-      
+
+      console.log(`📅 폴백: ${monthKey} 순차 로딩 시작 (rate limit 방지)`);
+
+      // 순차적으로 요청하되 작은 배치로 나눔 (5개씩)
+      const BATCH_SIZE = 5;
+      const DELAY_BETWEEN_BATCHES = 100; // 100ms
+
       let day = 1;
-      for (const result of results) {
-        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-        monthData[dateStr] = result.success && Array.isArray(result.data) ? result.data : [];
-        day++;
+      while (currentDay <= lastDay) {
+        const batch = [];
+
+        // 배치 생성
+        for (let i = 0; i < BATCH_SIZE && currentDay <= lastDay; i++) {
+          const dateStr = currentDay.toISOString().split('T')[0];
+          batch.push({
+            date: dateStr,
+            promise: window.apiGet(`/daily-work-reports?date=${dateStr}&view_all=true`)
+          });
+          currentDay.setDate(currentDay.getDate() + 1);
+        }
+
+        // 배치 실행
+        const results = await Promise.all(batch.map(b => b.promise));
+
+        // 결과 저장
+        batch.forEach((item, index) => {
+          const result = results[index];
+          monthData[item.date] = result.success && Array.isArray(result.data) ? result.data : [];
+        });
+
+        // 다음 배치 전 잠시 대기 (rate limit 방지)
+        if (currentDay <= lastDay) {
+          await new Promise(resolve => setTimeout(resolve, DELAY_BETWEEN_BATCHES));
+        }
       }
+
+      console.log(`✅ 폴백: ${monthKey} 순차 로딩 완료`);
       return monthData;
     } catch (error) {
       console.error(`${monthKey} 순차 로딩 오류:`, error);

web-ui/js/work-report-calendar.js

@@ -29,19 +29,20 @@ const elements = {
 // 초기화
 document.addEventListener('DOMContentLoaded', async function() {
   console.log('🚀 작업 현황 캘린더 초기화 시작');
-  
-  // DOM 요소 초기화
+
+  // DOM 요소 초기화 (기존 + CalendarView)
   initializeElements();
-  
+  CalendarView.initializeElements();
+
   // 이벤트 리스너 등록
   setupEventListeners();
-  
+
   // 작업자 데이터 로드 (한 번만)
   await loadWorkersData();
-  
+
   // 현재 월 캘린더 렌더링
-  await renderCalendar();
-  
+  await CalendarView.renderCalendar();
+
   console.log('✅ 작업 현황 캘린더 초기화 완료');
 });
 
@@ -69,17 +70,17 @@ function initializeElements() {
 function setupEventListeners() {
   elements.prevMonthBtn.addEventListener('click', () => {
     CalendarState.currentDate.setMonth(CalendarState.currentDate.getMonth() - 1);
-    renderCalendar();
+    CalendarView.renderCalendar();
   });
-  
+
   elements.nextMonthBtn.addEventListener('click', () => {
     CalendarState.currentDate.setMonth(CalendarState.currentDate.getMonth() + 1);
-    renderCalendar();
+    CalendarView.renderCalendar();
   });
-  
+
   elements.todayBtn.addEventListener('click', () => {
     CalendarState.currentDate = new Date();
-    renderCalendar();
+    CalendarView.renderCalendar();
   });
   
   elements.statusFilter.addEventListener('change', filterWorkersList);
@@ -518,9 +519,9 @@ async function deleteWorkerDayWork(workerId, date, workerName) {
     
     // 모달 데이터 새로고침
     await openDailyWorkModal(CalendarState.currentModalDate);
-    
+
     // 캘린더도 새로고침
-    await renderCalendar();
+    await CalendarView.renderCalendar();
     
   } catch (error) {
     console.error('❌ 작업 삭제 실패:', error);
@@ -741,9 +742,9 @@ async function saveWorkEntry() {
       
       // 기존 작업 탭으로 전환
       switchTab('existing');
-      
+
       // 캘린더 새로고침
-      await renderCalendar();
+      await CalendarView.renderCalendar();
       
       // 현재 열린 모달이 있다면 새로고침
       if (CalendarState.currentModalDate) {