feat: 설비 상세 패널 및 임시 이동 기능 구현

- 설비 마커 클릭 시 슬라이드 패널로 상세 정보 표시
- 설비 사진 업로드/삭제 기능
- 설비 임시 이동 기능 (3단계 지도 기반 선택)
  - Step 1: 공장 선택
  - Step 2: 레이아웃 지도에서 작업장 선택
  - Step 3: 상세 지도에서 위치 선택
- 설비 외부 반출/반입 기능
- 설비 수리 신청 기능 (기존 신고 시스템 연동)
- DB 마이그레이션 추가 (사진, 임시이동, 외부반출 테이블)

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

web-ui/pages/dashboard.html

@@ -109,23 +109,346 @@
   <div class="toast-container" id="toastContainer"></div>
 
   <!-- 작업장 상세 정보 모달 -->
-  <div id="workplaceDetailModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center;">
-    <div style="background: white; border-radius: var(--radius-lg); padding: 32px; max-width: 800px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-2xl);">
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
-        <h2 id="modalWorkplaceName" style="margin: 0; font-size: var(--text-2xl); font-weight: 700;"></h2>
-        <button class="btn btn-secondary btn-sm" onclick="closeWorkplaceModal()">닫기</button>
+  <div id="workplaceDetailModal" class="workplace-modal-overlay">
+    <div class="workplace-modal-container">
+      <!-- 모달 헤더 -->
+      <div class="workplace-modal-header">
+        <div class="workplace-modal-title-section">
+          <h2 id="modalWorkplaceName" class="workplace-modal-title"></h2>
+          <p id="modalWorkplaceDesc" class="workplace-modal-subtitle"></p>
+        </div>
+        <button class="workplace-modal-close" onclick="closeWorkplaceModal()">&times;</button>
       </div>
 
-      <!-- 내부 작업자 -->
-      <div id="internalWorkersSection" style="margin-bottom: 24px;">
-        <h3 style="font-size: var(--text-lg); font-weight: 600; margin-bottom: 16px; color: var(--primary-600);">👷 내부 작업자</h3>
-        <div id="internalWorkersList"></div>
+      <!-- 모달 바디 -->
+      <div class="workplace-modal-body">
+        <!-- 탭 네비게이션 -->
+        <div class="workplace-modal-tabs">
+          <button class="workplace-tab active" data-tab="overview" onclick="switchWorkplaceTab('overview')">
+            <span class="tab-icon">📊</span>
+            <span class="tab-text">현황 개요</span>
+          </button>
+          <button class="workplace-tab" data-tab="workers" onclick="switchWorkplaceTab('workers')">
+            <span class="tab-icon">👷</span>
+            <span class="tab-text">작업자</span>
+            <span id="workerCountBadge" class="tab-badge">0</span>
+          </button>
+          <button class="workplace-tab" data-tab="visitors" onclick="switchWorkplaceTab('visitors')">
+            <span class="tab-icon">🚪</span>
+            <span class="tab-text">방문자</span>
+            <span id="visitorCountBadge" class="tab-badge">0</span>
+          </button>
+          <button class="workplace-tab" data-tab="detail-map" onclick="switchWorkplaceTab('detail-map')">
+            <span class="tab-icon">🗺️</span>
+            <span class="tab-text">상세 지도</span>
+          </button>
+        </div>
+
+        <!-- 탭 콘텐츠 -->
+        <div class="workplace-tab-contents">
+          <!-- 현황 개요 탭 -->
+          <div id="tab-overview" class="workplace-tab-content active">
+            <!-- 요약 카드 -->
+            <div class="workplace-summary-cards">
+              <div class="summary-card workers">
+                <div class="summary-icon">👷</div>
+                <div class="summary-info">
+                  <span class="summary-value" id="summaryWorkerCount">0</span>
+                  <span class="summary-label">작업자</span>
+                </div>
+              </div>
+              <div class="summary-card visitors">
+                <div class="summary-icon">🚪</div>
+                <div class="summary-info">
+                  <span class="summary-value" id="summaryVisitorCount">0</span>
+                  <span class="summary-label">방문자</span>
+                </div>
+              </div>
+              <div class="summary-card tasks">
+                <div class="summary-icon">📋</div>
+                <div class="summary-info">
+                  <span class="summary-value" id="summaryTaskCount">0</span>
+                  <span class="summary-label">작업 수</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 현재 작업 목록 -->
+            <div class="workplace-section">
+              <h4 class="section-title">
+                <span class="section-icon">🔧</span>
+                진행 중인 작업
+              </h4>
+              <div id="currentTasksList" class="current-tasks-list">
+                <p class="empty-message">진행 중인 작업이 없습니다.</p>
+              </div>
+            </div>
+
+            <!-- 설비 현황 (간략) -->
+            <div class="workplace-section">
+              <h4 class="section-title">
+                <span class="section-icon">⚙️</span>
+                설비 현황
+              </h4>
+              <div id="equipmentSummary" class="equipment-summary">
+                <p class="empty-message">설비 정보를 불러오는 중...</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 작업자 탭 -->
+          <div id="tab-workers" class="workplace-tab-content">
+            <div id="internalWorkersList" class="workers-list"></div>
+          </div>
+
+          <!-- 방문자 탭 -->
+          <div id="tab-visitors" class="workplace-tab-content">
+            <div id="externalVisitorsList" class="visitors-list"></div>
+          </div>
+
+          <!-- 상세 지도 탭 -->
+          <div id="tab-detail-map" class="workplace-tab-content">
+            <div id="detailMapContainer" class="detail-map-container">
+              <div class="detail-map-placeholder">
+                <span class="placeholder-icon">🗺️</span>
+                <p>상세 지도를 불러오는 중...</p>
+              </div>
+            </div>
+            <div id="detailMapLegend" class="detail-map-legend"></div>
+          </div>
+        </div>
       </div>
 
-      <!-- 외부 방문자 -->
-      <div id="externalVisitorsSection">
-        <h3 style="font-size: var(--text-lg); font-weight: 600; margin-bottom: 16px; color: var(--purple-600);">🚪 외부 방문자</h3>
-        <div id="externalVisitorsList"></div>
+      <!-- 모달 푸터 -->
+      <div class="workplace-modal-footer">
+        <button class="btn btn-outline" onclick="openPatrolPage()">
+          <span>🔍</span> 순회점검
+        </button>
+        <button class="btn btn-primary" onclick="closeWorkplaceModal()">닫기</button>
+      </div>
+
+      <!-- 설비 상세 슬라이드 패널 -->
+      <div id="equipmentSlidePanel" class="equipment-slide-panel">
+        <div class="slide-panel-header">
+          <button class="slide-panel-back" onclick="closeEquipmentPanel()">&larr;</button>
+          <div class="slide-panel-title-section">
+            <h3 id="panelEquipmentTitle" class="slide-panel-title"></h3>
+            <span id="panelEquipmentStatus" class="slide-panel-status"></span>
+          </div>
+        </div>
+
+        <div class="slide-panel-body">
+          <!-- 기본 정보 -->
+          <div class="panel-section">
+            <div class="panel-info-grid" id="panelEquipmentInfo"></div>
+          </div>
+
+          <!-- 사진 -->
+          <div class="panel-section">
+            <div class="panel-section-header">
+              <h4>설비 사진</h4>
+              <button class="btn-icon-sm" onclick="openPanelPhotoUpload()">+</button>
+            </div>
+            <div class="panel-photo-grid" id="panelPhotoGrid">
+              <div class="panel-empty">등록된 사진이 없습니다</div>
+            </div>
+          </div>
+
+          <!-- 액션 버튼 -->
+          <div class="panel-actions">
+            <button class="panel-action-btn move" onclick="openPanelMoveModal()">
+              <span>↔</span> 임시이동
+            </button>
+            <button class="panel-action-btn repair" onclick="openPanelRepairModal()">
+              <span>🔧</span> 수리신청
+            </button>
+            <button class="panel-action-btn export" onclick="openPanelExportModal()">
+              <span>🚚</span> 외부반출
+            </button>
+          </div>
+
+          <!-- 수리 이력 -->
+          <div class="panel-section">
+            <h4 class="panel-section-title">수리 이력</h4>
+            <div id="panelRepairHistory" class="panel-history-list">
+              <div class="panel-empty">수리 이력이 없습니다</div>
+            </div>
+          </div>
+
+          <!-- 외부반출 이력 -->
+          <div class="panel-section">
+            <h4 class="panel-section-title">외부반출 이력</h4>
+            <div id="panelExternalHistory" class="panel-history-list">
+              <div class="panel-empty">외부반출 이력이 없습니다</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 설비 사진 업로드 모달 -->
+  <div id="panelPhotoModal" class="mini-modal-overlay" style="display:none;">
+    <div class="mini-modal">
+      <div class="mini-modal-header">
+        <h4>사진 추가</h4>
+        <button onclick="closePanelPhotoModal()">&times;</button>
+      </div>
+      <div class="mini-modal-body">
+        <input type="file" id="panelPhotoInput" accept="image/*" onchange="previewPanelPhoto(event)">
+        <div id="panelPhotoPreview" class="mini-photo-preview"></div>
+        <input type="text" id="panelPhotoDesc" class="form-control" placeholder="설명 (선택)">
+      </div>
+      <div class="mini-modal-footer">
+        <button class="btn btn-secondary btn-sm" onclick="closePanelPhotoModal()">취소</button>
+        <button class="btn btn-primary btn-sm" onclick="uploadPanelPhoto()">업로드</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 설비 임시이동 모달 -->
+  <div id="panelMoveModal" class="mini-modal-overlay" style="display:none;">
+    <div class="mini-modal" style="max-width:700px;">
+      <div class="mini-modal-header">
+        <h4 id="panelMoveTitle">설비 임시 이동</h4>
+        <button onclick="closePanelMoveModal()">&times;</button>
+      </div>
+      <div class="mini-modal-body" style="padding:0;">
+        <!-- Step 1: 공장 선택 (대분류 지도) -->
+        <div id="moveStep1" class="move-step-content">
+          <div class="move-step-header">
+            <span class="step-badge">1</span>
+            <span>공장 선택</span>
+          </div>
+          <div class="move-factory-grid" id="moveFactoryGrid">
+            <!-- 공장 카드들 -->
+          </div>
+        </div>
+
+        <!-- Step 2: 작업장 선택 (공장 레이아웃 지도) -->
+        <div id="moveStep2" class="move-step-content" style="display:none;">
+          <div class="move-step-header">
+            <button class="btn-step-back" onclick="moveBackToStep1()">←</button>
+            <span class="step-badge">2</span>
+            <span id="moveStep2Title">작업장 선택</span>
+          </div>
+          <p class="move-help-text">지도에서 이동할 작업장을 클릭하세요</p>
+          <div class="move-layout-map" id="moveLayoutMapContainer"></div>
+        </div>
+
+        <!-- Step 3: 위치 선택 (상세 지도) -->
+        <div id="moveStep3" class="move-step-content" style="display:none;">
+          <div class="move-step-header">
+            <button class="btn-step-back" onclick="moveBackToStep2()">←</button>
+            <span class="step-badge">3</span>
+            <span id="moveStep3Title">위치 선택</span>
+          </div>
+          <p class="move-help-text">지도에서 설비를 배치할 위치를 클릭하세요</p>
+          <div class="move-detail-map" id="moveDetailMapContainer"></div>
+          <div class="form-group" style="padding:12px;">
+            <input type="text" id="panelMoveReason" class="form-control" placeholder="이동 사유 (선택)">
+          </div>
+        </div>
+      </div>
+      <div class="mini-modal-footer">
+        <button class="btn btn-secondary btn-sm" onclick="closePanelMoveModal()">취소</button>
+        <button class="btn btn-primary btn-sm" id="panelMoveConfirmBtn" onclick="confirmPanelMove()" disabled>이동 확인</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 설비 수리신청 모달 -->
+  <div id="panelRepairModal" class="mini-modal-overlay" style="display:none;">
+    <div class="mini-modal">
+      <div class="mini-modal-header">
+        <h4>수리 신청</h4>
+        <button onclick="closePanelRepairModal()">&times;</button>
+      </div>
+      <div class="mini-modal-body">
+        <div class="form-group">
+          <label>수리 유형</label>
+          <select id="panelRepairItem" class="form-control">
+            <option value="">선택하세요</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>상세 내용</label>
+          <textarea id="panelRepairDesc" class="form-control" rows="3" placeholder="수리 필요 내용"></textarea>
+        </div>
+        <div class="form-group">
+          <label>사진 첨부</label>
+          <input type="file" id="panelRepairPhotoInput" accept="image/*" multiple>
+        </div>
+      </div>
+      <div class="mini-modal-footer">
+        <button class="btn btn-secondary btn-sm" onclick="closePanelRepairModal()">취소</button>
+        <button class="btn btn-primary btn-sm" onclick="submitPanelRepair()">신청</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 설비 외부반출 모달 -->
+  <div id="panelExportModal" class="mini-modal-overlay" style="display:none;">
+    <div class="mini-modal">
+      <div class="mini-modal-header">
+        <h4>외부 반출</h4>
+        <button onclick="closePanelExportModal()">&times;</button>
+      </div>
+      <div class="mini-modal-body">
+        <div class="form-group">
+          <label class="checkbox-inline">
+            <input type="checkbox" id="panelIsRepairExport"> 수리 외주
+          </label>
+        </div>
+        <div class="form-group">
+          <label>반출일</label>
+          <input type="date" id="panelExportDate" class="form-control">
+        </div>
+        <div class="form-group">
+          <label>반입 예정일</label>
+          <input type="date" id="panelExpectedReturn" class="form-control">
+        </div>
+        <div class="form-group">
+          <label>반출처</label>
+          <input type="text" id="panelExportDest" class="form-control" placeholder="업체명">
+        </div>
+        <div class="form-group">
+          <label>반출 사유</label>
+          <textarea id="panelExportReason" class="form-control" rows="2"></textarea>
+        </div>
+      </div>
+      <div class="mini-modal-footer">
+        <button class="btn btn-secondary btn-sm" onclick="closePanelExportModal()">취소</button>
+        <button class="btn btn-primary btn-sm" onclick="submitPanelExport()">반출</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 설비 반입 모달 -->
+  <div id="panelReturnModal" class="mini-modal-overlay" style="display:none;">
+    <div class="mini-modal" style="max-width:350px;">
+      <div class="mini-modal-header">
+        <h4>설비 반입</h4>
+        <button onclick="closePanelReturnModal()">&times;</button>
+      </div>
+      <div class="mini-modal-body">
+        <input type="hidden" id="panelReturnLogId">
+        <div class="form-group">
+          <label>반입일</label>
+          <input type="date" id="panelReturnDate" class="form-control">
+        </div>
+        <div class="form-group">
+          <label>반입 후 상태</label>
+          <select id="panelReturnStatus" class="form-control">
+            <option value="active">정상 가동</option>
+            <option value="maintenance">점검 필요</option>
+            <option value="repair_needed">추가 수리 필요</option>
+          </select>
+        </div>
+      </div>
+      <div class="mini-modal-footer">
+        <button class="btn btn-secondary btn-sm" onclick="closePanelReturnModal()">취소</button>
+        <button class="btn btn-primary btn-sm" onclick="submitPanelReturn()">반입</button>
       </div>
     </div>
   </div>