fix: [equipment] 설비 사진 원본 비율 유지 + 클릭 시 모달 확대

resources/views/equipment/partials/tabs/basic-info.blade.php

@@ -97,16 +97,48 @@
             @endphp
             @if($url)
                 <div>
-                    <a href="{{ $url }}" target="_blank">
-                        <img src="{{ $url }}" alt="{{ $photo->original_name }}"
-                             class="w-full h-32 object-cover rounded-lg border hover:opacity-80 transition">
-                    </a>
+                    <img src="{{ $url }}" alt="{{ $photo->original_name }}"
+                         class="w-full rounded-lg border hover:opacity-80 transition cursor-pointer"
+                         onclick="openPhotoModal(this.src, '{{ addslashes($photo->original_name) }}')">
                     <p class="text-xs text-gray-500 mt-1 truncate">{{ $photo->original_name }}</p>
                 </div>
             @endif
         @endforeach
     </div>
 </div>
+
+<!-- 사진 확대 모달 -->
+<div id="photoModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/70" onclick="closePhotoModal(event)">
+    <div class="relative max-w-4xl max-h-[90vh] mx-4">
+        <button onclick="closePhotoModal()" class="absolute -top-10 right-0 text-white hover:text-gray-300 text-sm flex items-center gap-1">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+            닫기
+        </button>
+        <img id="photoModalImg" src="" alt="" class="max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl">
+        <p id="photoModalName" class="text-center text-white text-sm mt-2"></p>
+    </div>
+</div>
+
+<script>
+function openPhotoModal(src, name) {
+    const modal = document.getElementById('photoModal');
+    document.getElementById('photoModalImg').src = src;
+    document.getElementById('photoModalName').textContent = name;
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+    document.body.style.overflow = 'hidden';
+}
+function closePhotoModal(e) {
+    if (e && e.target !== e.currentTarget) return;
+    const modal = document.getElementById('photoModal');
+    modal.classList.add('hidden');
+    modal.classList.remove('flex');
+    document.body.style.overflow = '';
+}
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') closePhotoModal();
+});
+</script>
 @endif
 
 @if($equipment->processes->isNotEmpty())