feat: 모바일 UX 대폭 개선 + PWA 구현 + 로그인 루프 수정

- 모바일 하단 네비: 메뉴 제거, 4개 핵심 기능(홈/TBM/작업보고/출근) SVG 아이콘 - 모바일 사이드바 스킵: 768px 이하에서 사이드바 미로드, 레이아웃 오프셋 해결 - 모바일 헤더: 햄버거 메뉴 숨김, 본문 margin/overflow 정리 - TBM 모바일: 풀스크린 모달, 저장 버튼 하단 고정, 터치 UX 개선 - PWA: manifest.json, sw.js(network-first), 앱 아이콘, iOS 메타태그, 킬스위치 - 로그인 무한루프 수정: 토큰 만료 검증, 쿠키 정리, loginPage 경로 수정 - 신고 메뉴 tkreport 리다이렉트: navbar + sidebar cross-system-link 적용 - TBM API: 작업장별 안전점검 체크리스트 조회 엔드포인트 추가 - 안전점검 체크리스트 관리 UI 개선 - tkuser: 이슈유형 관리 기능 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-24 08:20:50 +09:00
parent 3cc29c03a8
commit d36303101e
60 changed files with 1418 additions and 270 deletions
--- a/system1-factory/web/pages/admin/accounts.html
+++ b/system1-factory/web/pages/admin/accounts.html
@@ -279,7 +279,7 @@

    <!-- JavaScript -->
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <script src="/js/admin-settings.js?v=9"></script>
 </body>
--- a/system1-factory/web/pages/admin/attendance-report.html
+++ b/system1-factory/web/pages/admin/attendance-report.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=8">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
      .comparison-grid {
--- a/system1-factory/web/pages/admin/departments.html
+++ b/system1-factory/web/pages/admin/departments.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=8">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
        .department-grid {
--- a/system1-factory/web/pages/admin/equipment-detail.html
+++ b/system1-factory/web/pages/admin/equipment-detail.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/equipment-detail.css?v=1">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
 </head>
 <body>
  <!-- 네비게이션 바 -->
--- a/system1-factory/web/pages/admin/equipments.html
+++ b/system1-factory/web/pages/admin/equipments.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/equipment-management.css?v=1">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
 </head>
 <body>
  <!-- 네비게이션 바 -->
--- a/system1-factory/web/pages/admin/issue-categories.html
+++ b/system1-factory/web/pages/admin/issue-categories.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=8">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
        .type-tabs {
--- a/system1-factory/web/pages/admin/notifications.html
+++ b/system1-factory/web/pages/admin/notifications.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=8">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
        .notification-page-container {
--- a/system1-factory/web/pages/admin/projects.html
+++ b/system1-factory/web/pages/admin/projects.html
@@ -367,7 +367,7 @@
  </div>

  <script src="/js/api-base.js"></script>
-  <script src="/js/app-init.js?v=2" defer></script>
+  <script src="/js/app-init.js?v=3" defer></script>
  <script>
    let allProjects = [];
    let filteredProjects = [];
--- a/system1-factory/web/pages/admin/tasks.html
+++ b/system1-factory/web/pages/admin/tasks.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=8">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <style>
      .page-wrapper { padding: 1rem 1.5rem; max-width: 1400px; }
      .page-header {
--- a/system1-factory/web/pages/admin/workers.html
+++ b/system1-factory/web/pages/admin/workers.html
@@ -9,7 +9,7 @@
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <!-- 최적화된 로딩: API 설정 → 앱 초기화 (병렬 컴포넌트 로딩) -->
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <!-- instant.page: 링크 호버 시 페이지 프리로딩 -->
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
--- a/system1-factory/web/pages/admin/workplaces.html
+++ b/system1-factory/web/pages/admin/workplaces.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/workplace-management.css?v=7">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
 </head>
 <body>
--- a/system1-factory/web/pages/attendance/annual-overview.html
+++ b/system1-factory/web/pages/attendance/annual-overview.html
@@ -8,7 +8,7 @@
  <link rel="stylesheet" href="/css/admin-pages.css?v=7">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <script src="/js/api-base.js"></script>
-  <script src="/js/app-init.js?v=2" defer></script>
+  <script src="/js/app-init.js?v=3" defer></script>
  <style>
    .page-wrapper {
      padding: 1.5rem;
--- a/system1-factory/web/pages/attendance/checkin.html
+++ b/system1-factory/web/pages/attendance/checkin.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/mobile.css?v=1">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
      .page-wrapper {
--- a/system1-factory/web/pages/attendance/daily.html
+++ b/system1-factory/web/pages/attendance/daily.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=7">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
 </head>
 <body>
--- a/system1-factory/web/pages/attendance/monthly.html
+++ b/system1-factory/web/pages/attendance/monthly.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=7">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
      /* 테이블 컨테이너 */
--- a/system1-factory/web/pages/attendance/my-vacation-info.html
+++ b/system1-factory/web/pages/attendance/my-vacation-info.html
@@ -8,7 +8,7 @@
  <link rel="stylesheet" href="/css/admin-pages.css?v=7">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <script src="/js/api-base.js"></script>
-  <script src="/js/app-init.js?v=2" defer></script>
+  <script src="/js/app-init.js?v=3" defer></script>
  <style>
    .page-wrapper {
      padding: 1.5rem;
--- a/system1-factory/web/pages/attendance/vacation-allocation.html
+++ b/system1-factory/web/pages/attendance/vacation-allocation.html
@@ -13,7 +13,7 @@

  <!-- 스크립트 -->
  <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
  <script type="module" src="/js/vacation-allocation.js" defer></script>
 </head>
--- a/system1-factory/web/pages/attendance/vacation-approval.html
+++ b/system1-factory/web/pages/attendance/vacation-approval.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=7">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
      .tabs {
--- a/system1-factory/web/pages/attendance/vacation-input.html
+++ b/system1-factory/web/pages/attendance/vacation-input.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=7">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
 </head>
 <body>
--- a/system1-factory/web/pages/attendance/vacation-management.html
+++ b/system1-factory/web/pages/attendance/vacation-management.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=7">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
      .tabs {
--- a/system1-factory/web/pages/attendance/vacation-request.html
+++ b/system1-factory/web/pages/attendance/vacation-request.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="/css/admin-pages.css?v=7">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
 </head>
 <body>
--- a/system1-factory/web/pages/attendance/work-status.html
+++ b/system1-factory/web/pages/attendance/work-status.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/mobile.css?v=1">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <style>
      .page-wrapper {
        padding: 1.5rem;
--- a/system1-factory/web/pages/dashboard.html
+++ b/system1-factory/web/pages/dashboard.html
@@ -10,17 +10,17 @@
  <!-- preconnect는 Gateway 프록시 사용 시 불필요 -->
  <link rel="preload" href="/css/design-system.css" as="style">
  <link rel="preload" href="/js/api-base.js" as="script">
-  <link rel="preload" href="/js/app-init.js?v=2" as="script">
+  <link rel="preload" href="/js/app-init.js?v=3" as="script">

  <!-- 모던 디자인 시스템 적용 -->
  <link rel="stylesheet" href="/css/design-system.css">
-  <link rel="stylesheet" href="/css/modern-dashboard.css?v=2">
-  <link rel="stylesheet" href="/css/mobile.css?v=1">
+  <link rel="stylesheet" href="/css/modern-dashboard.css?v=3">
+  <link rel="stylesheet" href="/css/mobile.css?v=2">
  <link rel="icon" type="image/png" href="/img/favicon.png">

  <!-- 최적화된 로딩: API 설정 → 앱 초기화 (병렬 컴포넌트 로딩) -->
  <script src="/js/api-base.js"></script>
-  <script src="/js/app-init.js?v=2" defer></script>
+  <script src="/js/app-init.js?v=3" defer></script>
  <script type="module" src="/js/modern-dashboard.js?v=10" defer></script>
  <script type="module" src="/js/group-leader-dashboard.js?v=1" defer></script>
  <script src="/js/workplace-status.js" defer></script>
--- a/system1-factory/web/pages/inspection/daily-patrol.html
+++ b/system1-factory/web/pages/inspection/daily-patrol.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/daily-patrol.css?v=4">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
 </head>
 <body>
  <!-- 네비게이션 바 -->
--- a/system1-factory/web/pages/inspection/zone-detail.html
+++ b/system1-factory/web/pages/inspection/zone-detail.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/zone-detail.css?v=3">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
 </head>
 <body>
  <!-- 네비게이션 바 -->
--- a/system1-factory/web/pages/safety/checklist-manage.html
+++ b/system1-factory/web/pages/safety/checklist-manage.html
@@ -29,23 +29,6 @@
      margin: 0;
    }

-    .btn-add {
-      padding: 0.75rem 1.5rem;
-      background: linear-gradient(135deg, #3b82f6, #2563eb);
-      color: white;
-      border: none;
-      border-radius: 8px;
-      font-weight: 600;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .btn-add:hover {
-      background: linear-gradient(135deg, #2563eb, #1d4ed8);
-    }
-
    /* 탭 메뉴 */
    .tab-menu {
      display: flex;
@@ -401,6 +384,65 @@
      margin-bottom: 1rem;
    }

+    /* 인라인 추가 행 */
+    .inline-add-row {
+      display: flex;
+      gap: 0.5rem;
+      padding: 0.75rem 1.25rem;
+      background: #f9fafb;
+      border-top: 1px dashed #e5e7eb;
+      align-items: center;
+    }
+
+    .inline-add-input {
+      flex: 1;
+      padding: 0.5rem 0.75rem;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      font-size: 0.9rem;
+    }
+
+    .inline-add-input:focus {
+      outline: none;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+    }
+
+    .inline-add-btn {
+      padding: 0.5rem 1rem;
+      background: #3b82f6;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      font-weight: 500;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .inline-add-btn:hover {
+      background: #2563eb;
+    }
+
+    .inline-add-select {
+      padding: 0.5rem;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      font-size: 0.85rem;
+      max-width: 160px;
+    }
+
+    .inline-add-standalone {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      margin-bottom: 1rem;
+      overflow: hidden;
+    }
+
+    .inline-add-standalone .inline-add-row {
+      border-top: none;
+    }
+
    /* 날씨 아이콘 */
    .weather-icon {
      display: inline-flex;
@@ -437,9 +479,6 @@
  <div class="page-container">
    <div class="page-header">
      <h1 class="page-title">안전 체크리스트 관리</h1>
-      <button class="btn-add" onclick="openAddModal()">
-        <span>+</span> 항목 추가
-      </button>
    </div>

    <!-- 탭 메뉴 -->
@@ -589,7 +628,7 @@
  </div>

  <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
  <script type="module" src="/js/safety-checklist-manage.js"></script>
 </body>
--- a/system1-factory/web/pages/safety/management.html
+++ b/system1-factory/web/pages/safety/management.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/project-management.css?v=3">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
        .status-tabs {
--- a/system1-factory/web/pages/safety/report.html
+++ b/system1-factory/web/pages/safety/report.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/project-management.css?v=3">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
        /* 스텝 인디케이터 */
--- a/system1-factory/web/pages/safety/training-conduct.html
+++ b/system1-factory/web/pages/safety/training-conduct.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/project-management.css?v=3">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
        .training-container {
--- a/system1-factory/web/pages/safety/visit-request.html
+++ b/system1-factory/web/pages/safety/visit-request.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/project-management.css?v=3">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
        .visit-form-container {
--- a/system1-factory/web/pages/work/analysis.html
+++ b/system1-factory/web/pages/work/analysis.html
@@ -11,7 +11,7 @@
    <link rel="stylesheet" href="/css/work-analysis.css?v=41">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
 </head>
--- a/system1-factory/web/pages/work/nonconformity.html
+++ b/system1-factory/web/pages/work/nonconformity.html
@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="/css/project-management.css?v=3">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <script src="https://instant.page/5.2.0" type="module"></script>
    <style>
        /* 통계 카드 */
--- a/system1-factory/web/pages/work/report-create.html
+++ b/system1-factory/web/pages/work/report-create.html
@@ -10,7 +10,7 @@
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <!-- 최적화된 로딩 -->
  <script src="/js/api-base.js"></script>
-  <script src="/js/app-init.js?v=2" defer></script>
+  <script src="/js/app-init.js?v=3" defer></script>
  <script src="https://instant.page/5.2.0" type="module"></script>
 </head>
 <body>
@@ -169,7 +169,7 @@

  <!-- 스크립트 -->
  <script src="/js/api-base.js"></script>
-  <script src="/js/app-init.js?v=2" defer></script>
+  <script src="/js/app-init.js?v=3" defer></script>
  <script src="https://instant.page/5.2.0" type="module"></script>

  <!-- 작업보고서 모듈 (리팩토링된 구조) -->
--- a/system1-factory/web/pages/work/tbm.html
+++ b/system1-factory/web/pages/work/tbm.html
@@ -6,12 +6,12 @@
    <title>TBM 관리 | (주)테크니컬코리아</title>
    <link rel="stylesheet" href="/css/design-system.css">
    <link rel="stylesheet" href="/css/common.css?v=2">
-    <link rel="stylesheet" href="/css/tbm.css?v=1">
+    <link rel="stylesheet" href="/css/tbm.css?v=5">
    <link rel="stylesheet" href="/css/mobile.css?v=1">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <!-- 최적화된 로딩: API 설정 → 앱 초기화 (병렬 컴포넌트 로딩) -->
    <script src="/js/api-base.js"></script>
-    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="/js/app-init.js?v=3" defer></script>
    <!-- instant.page: 링크 호버 시 페이지 프리로딩 -->
    <script src="https://instant.page/5.2.0" type="module"></script>
 </head>
@@ -220,7 +220,7 @@
    </div>

    <!-- 일괄 설정 모달 -->
-    <div id="bulkSettingModal" class="tbm-modal-overlay" style="display: none; z-index: 1001;">
+    <div id="bulkSettingModal" class="tbm-modal-overlay" style="display: none; z-index: 1101;">
        <div class="tbm-modal" style="max-width: 700px;">
            <div class="tbm-modal-header">
                <h2 class="tbm-modal-title">
@@ -310,7 +310,7 @@
    </div>

    <!-- 작업자 선택 모달 -->
-    <div id="workerSelectionModal" class="tbm-modal-overlay" style="display: none; z-index: 1001;">
+    <div id="workerSelectionModal" class="tbm-modal-overlay" style="display: none; z-index: 1101;">
        <div class="tbm-modal" style="max-width: 800px;">
            <div class="tbm-modal-header">
                <h2 class="tbm-modal-title">
@@ -342,7 +342,7 @@
    </div>

    <!-- 항목 선택 모달 (프로젝트/공정/작업 선택용) -->
-    <div id="itemSelectModal" class="tbm-modal-overlay" style="display: none; z-index: 1002;">
+    <div id="itemSelectModal" class="tbm-modal-overlay" style="display: none; z-index: 1102;">
        <div class="tbm-modal" style="max-width: 600px;">
            <div class="tbm-modal-header">
                <h2 class="tbm-modal-title" id="itemSelectModalTitle">항목 선택</h2>
@@ -362,7 +362,7 @@
    </div>

    <!-- 작업장 선택 모달 (2단계: 공장 → 작업장) -->
-    <div id="workplaceSelectModal" class="tbm-modal-overlay" style="display: none; z-index: 1002;">
+    <div id="workplaceSelectModal" class="tbm-modal-overlay" style="display: none; z-index: 1102;">
        <div class="tbm-modal" style="max-width: 1000px;">
            <div class="tbm-modal-header">
                <h2 class="tbm-modal-title">
@@ -384,7 +384,7 @@
                    </div>
                </div>

-                <!-- 2단계: 작업장 선택 (지도 + 리스트) -->
+                <!-- 2단계: 작업장 선택 (지도 기본 + 리스트 토글) -->
                <div id="workplaceSelectionArea" style="display: none;">
                    <div class="tbm-form-section">
                        <h3 class="tbm-form-section-title">
@@ -392,8 +392,8 @@
                            작업장 선택
                        </h3>

-                        <!-- 지도 기반 선택 영역 -->
-                        <div id="layoutMapArea" style="display: none; margin-bottom: 1rem; padding: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;">
+                        <!-- 지도 기반 선택 (기본 표시) -->
+                        <div id="layoutMapArea" style="display: none; padding: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;">
                            <div style="font-size: 0.875rem; color: #64748b; margin-bottom: 0.75rem;">
                                지도에서 작업장을 클릭하여 선택하세요
                            </div>
@@ -402,18 +402,17 @@
                            </div>
                        </div>

-                        <!-- 리스트 기반 선택 (오류 대비용) -->
-                        <div>
-                            <div style="font-size: 0.875rem; color: #64748b; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between;">
-                                <span>리스트에서 선택 (지도 오류 시)</span>
-                                <button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="toggleWorkplaceList()" id="toggleListBtn">
-                                    <span id="toggleListIcon">&#9660;</span>
-                                    리스트 보기
-                                </button>
-                            </div>
-                            <div id="workplaceList" class="tbm-item-list" style="display: none; max-height: 250px;">
-                                <div style="color: #94a3b8; text-align: center; padding: 2rem;">
-                                    공장을 먼저 선택해주세요
+                        <!-- 리스트 기반 선택 (모바일에서 토글) -->
+                        <div style="margin-top: 0.75rem;">
+                            <button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm"
+                                    onclick="toggleWorkplaceList()" id="toggleListBtn" style="display: none;">
+                                리스트로 선택
+                            </button>
+                            <div id="workplaceListSection">
+                                <div id="workplaceList" class="tbm-item-list">
+                                    <div style="color: #94a3b8; text-align: center; padding: 2rem;">
+                                        공장을 먼저 선택해주세요
+                                    </div>
                                </div>
                            </div>
                        </div>
@@ -652,7 +651,7 @@
                </div>
            </div>

-            <div class="tbm-modal-footer">
+            <div class="tbm-modal-footer" id="detailModalFooter">
                <button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeDetailModal()">닫기</button>
            </div>
        </div>
@@ -668,7 +667,7 @@
    <script src="/js/tbm/api.js?v=1"></script>

    <!-- 기존 UI 로직 (점진적 마이그레이션) -->
-    <script type="module" src="/js/tbm.js?v=4"></script>
+    <script type="module" src="/js/tbm.js?v=8"></script>

    <!-- 모바일 하단 네비게이션 -->
    <div id="mobile-nav-container"></div>