feat: 페이지 구조 재구성 및 사이드바 네비게이션 구현

- 페이지 폴더 재구성: safety/, attendance/ 폴더 신규 생성 - work/ → safety/: 이슈 신고, 출입 신청 관련 페이지 이동 - common/ → attendance/: 근태/휴가 관련 페이지 이동 - admin/ 정리: safety-* 파일들을 safety/로 이동 - 사이드바 네비게이션 메뉴 구현 - 카테고리별 메뉴: 작업관리, 안전관리, 근태관리, 시스템관리 - 접기/펼치기 기능 및 상태 저장 - 관리자 전용 메뉴 자동 표시/숨김 - 날씨 API 연동 (기상청 단기예보) - TBM 및 navbar에 현재 날씨 표시 - weatherService.js 추가 - 안전 체크리스트 확장 - 기본/날씨별/작업별 체크 유형 추가 - checklist-manage.html 페이지 추가 - 이슈 신고 시스템 구현 - workIssueController, workIssueModel, workIssueRoutes 추가 - DB 마이그레이션 파일 추가 (실행 대기) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-02 14:27:22 +09:00
parent b6485e3140
commit 74d3a78aa3
116 changed files with 23117 additions and 294 deletions
--- a/web-ui/pages.backup.20260202/common/daily-attendance.html
+++ b/web-ui/pages.backup.20260202/common/daily-attendance.html
@@ -0,0 +1,395 @@
+<!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="stylesheet" href="/css/design-system.css">
+    <link rel="stylesheet" href="/css/admin-pages.css?v=7">
+    <link rel="icon" type="image/png" href="/img/favicon.png">
+    <script src="/js/auth-check.js?v=1" defer></script>
+    <script type="module" src="/js/api-config.js?v=3"></script>
+</head>
+<body>
+  <!-- 네비게이션 바 -->
+  <div id="navbar-container"></div>
+
+  <!-- 메인 콘텐츠 -->
+  <main class="main-content">
+    <div class="dashboard-main">
+      <div class="page-header">
+        <div class="page-title-section">
+          <h1 class="page-title">
+            <span class="title-icon">📅</span>
+            일일 출퇴근 입력
+          </h1>
+          <p class="page-description">오늘 출근한 작업자들의 출퇴근 기록을 입력합니다</p>
+        </div>
+
+        <div class="page-actions">
+          <input type="date" id="selectedDate" class="form-control" style="width: auto;">
+          <button class="btn btn-primary" onclick="loadAttendanceRecords()">
+            <span>🔄 새로고침</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- 출퇴근 입력 폼 -->
+      <div class="content-section">
+        <div class="card">
+          <div class="card-header">
+            <h2 class="card-title">작업자 출퇴근 기록</h2>
+            <p class="text-muted">근태 구분을 선택하면 근무시간이 자동 입력됩니다. 연장근로는 별도로 입력 가능합니다. (조퇴: 2시간, 반반차: 6시간, 반차: 4시간, 정시: 8시간, 주말근무: 0시간)</p>
+          </div>
+          <div class="card-body">
+            <div id="attendanceList" class="data-table-container">
+              <!-- 출퇴근 기록 목록이 여기에 동적으로 렌더링됩니다 -->
+            </div>
+
+            <div style="text-align: center; margin-top: 2rem;">
+              <button class="btn btn-primary" onclick="saveAllAttendance()" style="padding: 1rem 3rem; font-size: 1.1rem;">
+                <span>💾 전체 저장</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script type="module" src="/js/load-navbar.js?v=5"></script>
+  <script type="module">
+    import '/js/api-config.js?v=3';
+  </script>
+  <script>
+    // axios 기본 설정
+    (function() {
+      const checkApiConfig = setInterval(() => {
+        if (window.API_BASE_URL) {
+          clearInterval(checkApiConfig);
+          axios.defaults.baseURL = window.API_BASE_URL;
+          const token = localStorage.getItem('token');
+          if (token) {
+            axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+          }
+
+          axios.interceptors.request.use(
+            config => {
+              const token = localStorage.getItem('token');
+              if (token) {
+                config.headers.Authorization = `Bearer ${token}`;
+              }
+              return config;
+            },
+            error => Promise.reject(error)
+          );
+
+          axios.interceptors.response.use(
+            response => response,
+            error => {
+              if (error.response?.status === 401) {
+                alert('세션이 만료되었습니다. 다시 로그인해주세요.');
+                window.location.href = '/pages/login.html';
+              }
+              return Promise.reject(error);
+            }
+          );
+        }
+      }, 50);
+    })();
+  </script>
+  <script>
+    // 전역 변수
+    let workers = [];
+    let attendanceRecords = [];
+
+    // 근태 구분 옵션 (근무시간 자동 설정, 연장근로는 별도 입력)
+    const attendanceTypes = [
+      { value: 'on_time', label: '정시', hours: 8 },
+      { value: 'half_leave', label: '반차', hours: 4 },
+      { value: 'quarter_leave', label: '반반차', hours: 6 },
+      { value: 'early_leave', label: '조퇴', hours: 2 },
+      { value: 'weekend_work', label: '주말근무', hours: 0 },
+      { value: 'annual_leave', label: '연차', hours: 0 },
+      { value: 'custom', label: '특이사항', hours: 0 }
+    ];
+
+    // 페이지 로드 시 초기화
+    document.addEventListener('DOMContentLoaded', async () => {
+      await waitForAxiosConfig();
+      initializePage();
+    });
+
+    function waitForAxiosConfig() {
+      return new Promise((resolve) => {
+        const check = setInterval(() => {
+          if (axios.defaults.baseURL) {
+            clearInterval(check);
+            resolve();
+          }
+        }, 50);
+        setTimeout(() => {
+          clearInterval(check);
+          resolve();
+        }, 5000);
+      });
+    }
+
+    async function initializePage() {
+      // 오늘 날짜 설정
+      const today = new Date().toISOString().split('T')[0];
+      document.getElementById('selectedDate').value = today;
+
+      try {
+        await loadWorkers();
+        await loadAttendanceRecords();
+      } catch (error) {
+        console.error('초기화 오류:', error);
+        alert('페이지 초기화 중 오류가 발생했습니다.');
+      }
+    }
+
+    async function loadWorkers() {
+      try {
+        const response = await axios.get('/workers');
+        if (response.data.success) {
+          workers = response.data.data.filter(w => w.employment_status === 'employed');
+        }
+      } catch (error) {
+        console.error('작업자 목록 로드 오류:', error);
+      }
+    }
+
+    async function loadAttendanceRecords() {
+      const selectedDate = document.getElementById('selectedDate').value;
+      if (!selectedDate) {
+        alert('날짜를 선택해주세요.');
+        return;
+      }
+
+      try {
+        // 출퇴근 기록과 체크인 목록(휴가 정보 포함)을 동시에 가져오기
+        const [recordsResponse, checkinResponse] = await Promise.all([
+          axios.get(`/attendance/records?date=${selectedDate}`).catch(() => ({ data: { success: false, data: [] } })),
+          axios.get(`/attendance/checkin-list?date=${selectedDate}`).catch(() => ({ data: { success: false, data: [] } }))
+        ]);
+
+        const existingRecords = recordsResponse.data.success ? recordsResponse.data.data : [];
+        const checkinList = checkinResponse.data.success ? checkinResponse.data.data : [];
+
+        // 체크인 목록을 기준으로 출퇴근 기록 생성 (연차 정보 포함)
+        attendanceRecords = checkinList.map(worker => {
+          const existingRecord = existingRecords.find(r => r.worker_id === worker.worker_id);
+          const isOnVacation = worker.vacation_status === 'approved';
+
+          // 기존 기록이 있으면 사용, 없으면 초기화
+          if (existingRecord) {
+            return existingRecord;
+          } else {
+            return {
+              worker_id: worker.worker_id,
+              worker_name: worker.worker_name,
+              attendance_date: selectedDate,
+              total_hours: isOnVacation ? 0 : 8,
+              overtime_hours: 0,
+              attendance_type: isOnVacation ? 'annual_leave' : 'on_time',
+              is_custom: false,
+              is_new: true,
+              is_on_vacation: isOnVacation,
+              vacation_type_name: worker.vacation_type_name
+            };
+          }
+        });
+
+        renderAttendanceList();
+      } catch (error) {
+        console.error('출퇴근 기록 로드 오류:', error);
+        alert('출퇴근 기록 조회 중 오류가 발생했습니다.');
+      }
+    }
+
+    function initializeAttendanceRecords() {
+      const selectedDate = document.getElementById('selectedDate').value;
+      attendanceRecords = workers.map(worker => ({
+        worker_id: worker.worker_id,
+        worker_name: worker.worker_name,
+        attendance_date: selectedDate,
+        total_hours: 8,
+        overtime_hours: 0,
+        attendance_type: 'on_time',
+        is_custom: false,
+        is_new: true
+      }));
+      renderAttendanceList();
+    }
+
+    function renderAttendanceList() {
+      const container = document.getElementById('attendanceList');
+
+      if (attendanceRecords.length === 0) {
+        container.innerHTML = `
+          <div class="empty-state">
+            <p>등록된 작업자가 없거나 출퇴근 기록이 없습니다.</p>
+            <button class="btn btn-primary" onclick="initializeAttendanceRecords()">
+              작업자 목록으로 초기화
+            </button>
+          </div>
+        `;
+        return;
+      }
+
+      const tableHTML = `
+        <table class="data-table" style="font-size: 0.95rem;">
+          <thead style="background-color: #f8f9fa;">
+            <tr>
+              <th style="width: 120px;">작업자</th>
+              <th style="width: 180px;">근태 구분</th>
+              <th style="width: 100px;">근무시간</th>
+              <th style="width: 120px;">연장근로</th>
+              <th style="width: 100px;">특이사항</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${attendanceRecords.map((record, index) => {
+              const isCustom = record.is_custom || record.attendance_type === 'custom';
+              const isHoursReadonly = !isCustom; // 특이사항이 아니면 근무시간은 읽기 전용
+
+              const isOnVacation = record.is_on_vacation || false;
+              const vacationLabel = record.vacation_type_name ? ` (${record.vacation_type_name})` : '';
+
+              return `
+                <tr style="border-bottom: 1px solid #e5e7eb; ${isOnVacation ? 'background-color: #f0f9ff;' : ''}">
+                  <td style="padding: 0.75rem; font-weight: 600;">
+                    ${record.worker_name}
+                    ${isOnVacation ? `<span style="margin-left: 0.5rem; display: inline-block; padding: 0.125rem 0.5rem; background-color: #dbeafe; color: #1e40af; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500;">연차${vacationLabel}</span>` : ''}
+                  </td>
+                  <td style="padding: 0.75rem;">
+                    <select class="form-control"
+                            onchange="updateAttendanceType(${index}, this.value)"
+                            style="width: 160px; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;">
+                      ${attendanceTypes.map(type => `
+                        <option value="${type.value}" ${record.attendance_type === type.value ? 'selected' : ''}>
+                          ${type.label}
+                        </option>
+                      `).join('')}
+                    </select>
+                  </td>
+                  <td style="padding: 0.75rem;">
+                    <input type="number" class="form-control"
+                           id="hours_${index}"
+                           value="${record.total_hours || 0}"
+                           min="0" max="24" step="0.5"
+                           ${isHoursReadonly ? 'readonly' : ''}
+                           onchange="updateTotalHours(${index}, this.value)"
+                           style="width: 90px; padding: 0.5rem; border: 1px solid ${isHoursReadonly ? '#e5e7eb' : '#d1d5db'};
+                                  border-radius: 0.375rem; background-color: ${isHoursReadonly ? '#f9fafb' : 'white'}; text-align: center;">
+                  </td>
+                  <td style="padding: 0.75rem;">
+                    <input type="number" class="form-control"
+                           id="overtime_${index}"
+                           value="${record.overtime_hours || 0}"
+                           min="0" max="12" step="0.5"
+                           onchange="updateOvertimeHours(${index}, this.value)"
+                           style="width: 90px; padding: 0.5rem; border: 1px solid #d1d5db;
+                                  border-radius: 0.375rem; background-color: white; text-align: center;">
+                  </td>
+                  <td style="padding: 0.75rem; text-align: center;">
+                    ${isCustom ?
+                      '<span style="color: #dc2626; font-weight: 600;">✓</span>' :
+                      '<span style="color: #9ca3af;">-</span>'}
+                  </td>
+                </tr>
+              `;
+            }).join('')}
+          </tbody>
+        </table>
+      `;
+
+      container.innerHTML = tableHTML;
+    }
+
+    function updateTotalHours(index, value) {
+      attendanceRecords[index].total_hours = parseFloat(value) || 0;
+    }
+
+    function updateOvertimeHours(index, value) {
+      attendanceRecords[index].overtime_hours = parseFloat(value) || 0;
+    }
+
+    function updateAttendanceType(index, value) {
+      const record = attendanceRecords[index];
+      record.attendance_type = value;
+
+      // 근태 구분에 따라 자동으로 근무시간 설정
+      const attendanceType = attendanceTypes.find(t => t.value === value);
+
+      if (value === 'custom') {
+        // 특이사항 선택 시 수동 입력 가능
+        record.is_custom = true;
+        // 기존 값 유지, 수동 입력 가능
+      } else if (attendanceType) {
+        // 다른 근태 구분 선택 시 근무시간만 자동 설정
+        record.is_custom = false;
+        record.total_hours = attendanceType.hours;
+        // 연장근로는 유지 (별도 입력 가능)
+      }
+
+      // UI 다시 렌더링
+      renderAttendanceList();
+    }
+
+    async function saveAllAttendance() {
+      const selectedDate = document.getElementById('selectedDate').value;
+
+      if (!selectedDate) {
+        alert('날짜를 선택해주세요.');
+        return;
+      }
+
+      if (attendanceRecords.length === 0) {
+        alert('저장할 출퇴근 기록이 없습니다.');
+        return;
+      }
+
+      // 모든 기록을 API 형식에 맞게 변환
+      const recordsToSave = attendanceRecords.map(record => ({
+        worker_id: record.worker_id,
+        attendance_date: selectedDate,
+        total_hours: record.total_hours || 0,
+        overtime_hours: record.overtime_hours || 0,
+        attendance_type: record.attendance_type || 'on_time',
+        is_custom: record.is_custom || false
+      }));
+
+      try {
+        // 각 기록을 순차적으로 저장
+        let successCount = 0;
+        let errorCount = 0;
+
+        for (const data of recordsToSave) {
+          try {
+            const response = await axios.post('/attendance/records', data);
+            if (response.data.success) {
+              successCount++;
+            }
+          } catch (error) {
+            console.error(`작업자 ${data.worker_id} 저장 오류:`, error);
+            errorCount++;
+          }
+        }
+
+        if (errorCount === 0) {
+          alert(`${successCount}건의 출퇴근 기록이 모두 저장되었습니다.`);
+          await loadAttendanceRecords(); // 저장 후 새로고침
+        } else {
+          alert(`${successCount}건 저장 완료, ${errorCount}건 저장 실패\n자세한 내용은 콘솔을 확인해주세요.`);
+        }
+      } catch (error) {
+        console.error('전체 저장 오류:', error);
+        alert('저장 중 오류가 발생했습니다.');
+      }
+    }
+  </script>
+</body>
+</html>