feat(ux): 전체 시스템 모바일 UX 개선 — 햄버거메뉴·필터반응형·터치타겟·iOS줌방지

7개 시스템(tkpurchase/tksafety/tksupport/tkuser/system1/system2/system3)의 모바일 사용성 일괄 개선. system1(tkfb)의 모바일 메뉴 패턴을 3개 신규 시스템에 적용. 주요 변경: - 모바일 햄버거 메뉴: tkpurchase/tksafety/tksupport에 toggleMobileMenu+overlay 추가 - 필터 반응형: 768px 이하 2열 그리드 전환 (filter-bar/filter-actions 클래스) - 터치 타겟 44px: 테이블 액션 버튼 36px+gap, tksafety ±버튼 w-11 - iOS 줌 방지: input/select/textarea font-size 16px - tkuser: 탭 가로스크롤+fade힌트, 사이드바·grid·드롭다운 반응형 - system1: 대시보드 인라인 width 제거, 이동설비 그리드 1열 - system2: 사진그리드 4열, 유형버튼 2열 (480px 이하) - system3: 카드 내 액션 버튼 stopPropagation 추가 - 캐시 무효화: 전체 HTML ?v=2026031401 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-14 17:57:47 +09:00
parent 2d8ac92404
commit fe5f7cd155
86 changed files with 667 additions and 373 deletions
--- a/tksupport/web/index.html
+++ b/tksupport/web/index.html
@@ -6,7 +6,7 @@
    <title>대시보드 - TK 행정지원</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="/static/css/tksupport.css?v=1">
+    <link rel="stylesheet" href="/static/css/tksupport.css?v=2026031401">
 </head>
 <body>
    <!-- Header -->
@@ -14,6 +14,9 @@
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-14">
                <div class="flex items-center gap-3">
+                    <button id="mobileMenuBtn" onclick="toggleMobileMenu()" class="lg:hidden text-purple-200 hover:text-white">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
                    <i class="fas fa-building text-xl text-purple-200"></i>
                    <h1 class="text-lg font-semibold">TK 행정지원</h1>
                </div>
@@ -120,7 +123,7 @@
        </div>
    </div>

-    <script src="/static/js/tksupport-core.js?v=20260313"></script>
+    <script src="/static/js/tksupport-core.js?v=2026031401"></script>
    <script>
    let vacationTypes = [];

--- a/tksupport/web/static/css/tksupport.css
+++ b/tksupport/web/static/css/tksupport.css
@@ -48,3 +48,48 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
  .data-table th, .data-table td { padding: 0.5rem; }
  .hide-mobile { display: none; }
 }
+
+/* Mobile menu */
+#mobileOverlay { z-index: 30; }
+#sideNav { transition: transform 0.3s ease; }
+@media (max-width: 1023px) {
+  #sideNav {
+    position: fixed; top: 3.5rem; left: 0; bottom: 0;
+    width: 14rem; background: white; z-index: 40;
+    transform: translateX(-100%);
+    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
+    padding: 0.5rem; overflow-y: auto;
+    display: flex !important; flex-direction: column; gap: 0.25rem;
+  }
+  #sideNav.mobile-open { transform: translateX(0); }
+}
+
+/* Filter responsive */
+@media (max-width: 768px) {
+  .filter-bar {
+    display: grid !important; grid-template-columns: 1fr 1fr;
+    gap: 0.5rem; align-items: end;
+  }
+  .filter-bar > div { width: 100%; }
+  .filter-bar > div > input,
+  .filter-bar > div > select { width: 100%; }
+  .filter-actions {
+    grid-column: 1 / -1; display: flex; gap: 0.5rem;
+  }
+  .filter-actions > * { flex: 1; }
+}
+
+/* Table action button touch targets */
+@media (max-width: 768px) {
+  .data-table td:last-child button,
+  .data-table td:last-child a {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-width: 36px; min-height: 36px; padding: 6px;
+  }
+  .data-table td:last-child { gap: 2px; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
+}
+
+/* iOS zoom prevention */
+@media (max-width: 768px) {
+  input, select, textarea { font-size: 16px !important; }
+}
--- a/tksupport/web/static/js/tksupport-core.js
+++ b/tksupport/web/static/js/tksupport-core.js
@@ -78,6 +78,25 @@ function doLogout() {
    location.href = getLoginUrl() + '&logout=1';
 }

+/* ===== Mobile Menu ===== */
+function toggleMobileMenu() {
+    const nav = document.getElementById('sideNav');
+    const overlay = document.getElementById('mobileOverlay');
+    if (!overlay) {
+        const o = document.createElement('div');
+        o.id = 'mobileOverlay';
+        o.className = 'fixed inset-0 bg-black bg-opacity-30 hidden';
+        o.style.zIndex = '30';
+        o.onclick = toggleMobileMenu;
+        document.body.appendChild(o);
+        toggleMobileMenu();
+        return;
+    }
+    const open = nav.classList.toggle('mobile-open');
+    overlay.classList.toggle('hidden', !open);
+    document.body.style.overflow = open ? 'hidden' : '';
+}
+
 /* ===== Navbar ===== */
 function renderNavbar() {
    const currentPage = location.pathname.replace(/\//g, '') || 'index.html';
@@ -95,6 +114,12 @@ function renderNavbar() {
        return `<a href="${l.href}" class="nav-link flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm transition-colors ${active ? 'active' : 'text-gray-600 hover:bg-gray-100'}">
            <i class="fas ${l.icon} w-5 text-center"></i><span>${l.label}</span></a>`;
    }).join('');
+    // 모바일: nav-link 클릭 시 메뉴 닫기
+    nav.querySelectorAll('.nav-link').forEach(a => {
+        a.addEventListener('click', () => {
+            if (nav.classList.contains('mobile-open')) toggleMobileMenu();
+        });
+    });
 }

 /* ===== State ===== */
--- a/tksupport/web/vacation-approval.html
+++ b/tksupport/web/vacation-approval.html
@@ -6,13 +6,16 @@
    <title>휴가 승인 - TK 행정지원</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="/static/css/tksupport.css?v=1">
+    <link rel="stylesheet" href="/static/css/tksupport.css?v=2026031401">
 </head>
 <body>
    <header class="bg-purple-700 text-white sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-14">
                <div class="flex items-center gap-3">
+                    <button id="mobileMenuBtn" onclick="toggleMobileMenu()" class="lg:hidden text-purple-200 hover:text-white">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
                    <i class="fas fa-building text-xl text-purple-200"></i>
                    <h1 class="text-lg font-semibold">TK 행정지원</h1>
                </div>
@@ -192,7 +195,7 @@
        </div>
    </div>

-    <script src="/static/js/tksupport-core.js?v=20260313"></script>
+    <script src="/static/js/tksupport-core.js?v=2026031401"></script>
    <script>
    let reviewAction = '';
    let reviewRequestId = null;
@@ -269,8 +272,8 @@
                    <td class="hide-mobile max-w-[200px] truncate">${escapeHtml(r.reason || '-')}</td>
                    <td class="hide-mobile text-gray-500 text-xs">${formatDate(r.created_at)}</td>
                    <td class="text-right whitespace-nowrap">
-                        <button onclick="openReview(${r.request_id}, 'approve', '${escapeHtml(r.user_name || r.username)}', '${escapeHtml(r.vacation_type_name)}', '${formatDate(r.start_date)} ~ ${formatDate(r.end_date)}', ${r.days_used})" class="px-2.5 py-1 bg-green-500 text-white rounded text-xs hover:bg-green-600 mr-1">승인</button>
-                        <button onclick="openReview(${r.request_id}, 'reject', '${escapeHtml(r.user_name || r.username)}', '${escapeHtml(r.vacation_type_name)}', '${formatDate(r.start_date)} ~ ${formatDate(r.end_date)}', ${r.days_used})" class="px-2.5 py-1 bg-red-500 text-white rounded text-xs hover:bg-red-600">반려</button>
+                        <button onclick="openReview(${r.request_id}, 'approve', '${escapeHtml(r.user_name || r.username)}', '${escapeHtml(r.vacation_type_name)}', '${formatDate(r.start_date)} ~ ${formatDate(r.end_date)}', ${r.days_used})" class="px-3 py-1.5 bg-green-500 text-white rounded text-sm hover:bg-green-600 mr-1">승인</button>
+                        <button onclick="openReview(${r.request_id}, 'reject', '${escapeHtml(r.user_name || r.username)}', '${escapeHtml(r.vacation_type_name)}', '${formatDate(r.start_date)} ~ ${formatDate(r.end_date)}', ${r.days_used})" class="px-3 py-1.5 bg-red-500 text-white rounded text-sm hover:bg-red-600">반려</button>
                    </td>
                </tr>
            `).join('');
--- a/tksupport/web/vacation-request.html
+++ b/tksupport/web/vacation-request.html
@@ -6,13 +6,16 @@
    <title>휴가 신청 - TK 행정지원</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="/static/css/tksupport.css?v=1">
+    <link rel="stylesheet" href="/static/css/tksupport.css?v=2026031401">
 </head>
 <body>
    <header class="bg-purple-700 text-white sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-14">
                <div class="flex items-center gap-3">
+                    <button id="mobileMenuBtn" onclick="toggleMobileMenu()" class="lg:hidden text-purple-200 hover:text-white">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
                    <i class="fas fa-building text-xl text-purple-200"></i>
                    <h1 class="text-lg font-semibold">TK 행정지원</h1>
                </div>
@@ -81,7 +84,7 @@
        </div>
    </div>

-    <script src="/static/js/tksupport-core.js?v=20260313"></script>
+    <script src="/static/js/tksupport-core.js?v=2026031401"></script>
    <script>
    async function initRequestPage() {
        if (!initAuth()) return;
--- a/tksupport/web/vacation-status.html
+++ b/tksupport/web/vacation-status.html
@@ -6,13 +6,16 @@
    <title>내 휴가 현황 - TK 행정지원</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="/static/css/tksupport.css?v=1">
+    <link rel="stylesheet" href="/static/css/tksupport.css?v=2026031401">
 </head>
 <body>
    <header class="bg-purple-700 text-white sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-14">
                <div class="flex items-center gap-3">
+                    <button id="mobileMenuBtn" onclick="toggleMobileMenu()" class="lg:hidden text-purple-200 hover:text-white">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
                    <i class="fas fa-building text-xl text-purple-200"></i>
                    <h1 class="text-lg font-semibold">TK 행정지원</h1>
                </div>
@@ -90,7 +93,7 @@
        </div>
    </div>

-    <script src="/static/js/tksupport-core.js?v=20260313"></script>
+    <script src="/static/js/tksupport-core.js?v=2026031401"></script>
    <script>
    async function initStatusPage() {
        if (!initAuth()) return;