feat: 다수 기능 개선 - 순찰, 출근, 작업분석, 모바일 UI 등

- 순찰/점검 기능 개선 (zone-detail 페이지 추가) - 출근/근태 시스템 개선 (연차 조회, 근무현황) - 작업분석 대분류 그룹화 및 마이그레이션 스크립트 - 모바일 네비게이션 UI 추가 - NAS 배포 도구 및 문서 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 14:41:01 +09:00
parent 1548253f56
commit 2b1c7bfb88
633 changed files with 361224 additions and 1090 deletions
--- a/web-ui/components/mobile-nav.html
+++ b/web-ui/components/mobile-nav.html
@@ -0,0 +1,135 @@
+<!-- components/mobile-nav.html -->
+<!-- 모바일 하단 네비게이션 -->
+<nav class="mobile-bottom-nav" id="mobileBottomNav">
+  <a href="/pages/dashboard.html" class="mobile-nav-item" data-page="dashboard">
+    <span class="mobile-nav-icon">🏠</span>
+    <span class="mobile-nav-label">홈</span>
+  </a>
+  <a href="/pages/work/tbm.html" class="mobile-nav-item" data-page="tbm">
+    <span class="mobile-nav-icon">📋</span>
+    <span class="mobile-nav-label">TBM</span>
+  </a>
+  <a href="/pages/work/report-create.html" class="mobile-nav-item" data-page="report">
+    <span class="mobile-nav-icon">📝</span>
+    <span class="mobile-nav-label">작업보고</span>
+  </a>
+  <a href="/pages/attendance/checkin.html" class="mobile-nav-item" data-page="checkin">
+    <span class="mobile-nav-icon">⏰</span>
+    <span class="mobile-nav-label">출근</span>
+  </a>
+  <button class="mobile-nav-item" id="mobileMoreBtn">
+    <span class="mobile-nav-icon">☰</span>
+    <span class="mobile-nav-label">메뉴</span>
+  </button>
+</nav>
+
+<style>
+/* 모바일 하단 네비게이션 */
+.mobile-bottom-nav {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  background: #ffffff;
+  border-top: 1px solid #e5e7eb;
+  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+  z-index: 1000;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+@media (max-width: 768px) {
+  .mobile-bottom-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  /* 바디 패딩 추가 */
+  body {
+    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
+  }
+}
+
+.mobile-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 100%;
+  text-decoration: none;
+  color: #6b7280;
+  background: none;
+  border: none;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color 0.2s;
+  padding: 0.5rem;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mobile-nav-item:active {
+  background: #f3f4f6;
+}
+
+.mobile-nav-item.active {
+  color: #2563eb;
+}
+
+.mobile-nav-icon {
+  font-size: 1.5rem;
+  line-height: 1;
+  margin-bottom: 0.25rem;
+}
+
+.mobile-nav-label {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1;
+}
+
+/* 활성 상태 */
+.mobile-nav-item.active .mobile-nav-icon {
+  transform: scale(1.1);
+}
+
+.mobile-nav-item.active .mobile-nav-label {
+  font-weight: 600;
+}
+</style>
+
+<script>
+(function() {
+  // 현재 페이지 하이라이트
+  const currentPath = window.location.pathname;
+  const navItems = document.querySelectorAll('.mobile-nav-item[data-page]');
+
+  navItems.forEach(item => {
+    const href = item.getAttribute('href');
+    if (href && currentPath.includes(href.replace('/pages/', '').replace('.html', ''))) {
+      item.classList.add('active');
+    }
+  });
+
+  // 대시보드 페이지 체크
+  if (currentPath.includes('dashboard')) {
+    document.querySelector('[data-page="dashboard"]')?.classList.add('active');
+  }
+
+  // 더보기 버튼 - 사이드바 열기
+  const moreBtn = document.getElementById('mobileMoreBtn');
+  if (moreBtn) {
+    moreBtn.addEventListener('click', () => {
+      const sidebar = document.getElementById('sidebarNav');
+      const overlay = document.getElementById('sidebarOverlay');
+      if (sidebar) {
+        sidebar.classList.add('mobile-open');
+        overlay?.classList.add('show');
+        document.body.classList.add('sidebar-mobile-open');
+      }
+    });
+  }
+})();
+</script>