이미지 라이트박스 구성 요소

<div class="relative flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 font-sans overflow-hidden">

  <!-- Sample Grid to show how lightbox might be triggered -->
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-w-7xl mx-auto mb-12 sm:mb-0">
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1025/300/200" alt="Gallery Image 1" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1026/300/200" alt="Gallery Image 2" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1027/300/200" alt="Gallery Image 3" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1028/300/200" alt="Gallery Image 4" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
  </div>

  <!-- Lightbox Overlay -->
  <div id="lightbox" class="fixed inset-0 z-50 hidden bg-black bg-opacity-70 dark:bg-opacity-80 flex items-center justify-center p-4 sm:p-6 lg:p-8 transition-opacity duration-300 ease-in-out opacity-0" 
       style="opacity: 1;" 
       onclick="event.target === this && document.getElementById('lightbox').classList.add('hidden')">

    <!-- Lightbox Content Container -->
    <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-4 sm:p-6 w-full max-w-4xl max-h-[90vh] flex flex-col gap-4 transform scale-95 opacity-0 transition-all duration-300 ease-in-out" 
         style="opacity: 1; transform: scale(1);"
         role="dialog" aria-modal="true" aria-labelledby="lightbox-title">

      <!-- Close Button -->
      <button class="absolute -top-3 -right-3 sm:-top-4 sm:-right-4 p-3 bg-gray-900 border-4 border-white dark:border-gray-800 text-white rounded-full shadow-lg group focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 z-10" 
              aria-label="Close Lightbox" 
              onclick="document.getElementById('lightbox').classList.add('hidden')">
        <svg class="w-6 h-6 transform transition-transform group-hover:rotate-90 group-focus:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>

      <!-- Image Section -->
      <div class="flex-none w-full h-96 sm:h-[400px] lg:h-[500px] bg-gray-200 dark:bg-gray-700 rounded-xl overflow-hidden relative group">
        <img src="https://picsum.photos/id/1025/800/600" alt="Current Image" class="w-full h-full object-contain object-centers select-none" id="lightbox-img">
        
        <!-- Navigation Buttons (Overlay on image) -->
        <div class="absolute inset-0 flex items-center justify-between p-2 sm:p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          <button class="p-3 bg-black bg-opacity-40 text-white rounded-full hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-70" aria-label="Previous Image">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <button class="p-3 bg-black bg-opacity-40 text-white rounded-full hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-70" aria-label="Next Image">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>

      </div>

      <!-- Details Section -->
      <div class="flex-1 flex flex-col sm:flex-row gap-4 overflow-auto">
        <div class="flex-1">
          <h2 id="lightbox-title" class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3 leading-tight">Playful Corporate HQ</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4 sm:mb-6 leading-relaxed">
            A vibrant and welcoming image captured during an open house event, showcasing the modern architecture and collaborative spaces within our new office building.
          </p>

          <div class="flex flex-wrap items-center gap-x-6 gap-y-3 mb-4 sm:mb-6">
            <div class="flex items-center text-gray-700 dark:text-gray-300">
              <svg class="w-5 h-5 mr-1.5 opacity-80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm font-medium">Uploaded: May 15, 2024</span>
            </div>
            <div class="flex items-center text-gray-700 dark:text-gray-300">
              <svg class="w-5 h-5 mr-1.5 opacity-80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.816 2 12 2c5.18 0 10.265 3.552 11.54 8-.22.616-.48 1.21-.77 1.78l-1.32-1.32a.75.75 0 00-1.06 1.06l1.78 1.78a8 8 0 01-1.07 1C19.263 17.552 14.178 21 9 21c-5.18 0-10.265-3.552-11.54-8-.22-.616-.48-1.21-.77-1.78l-1.32-1.32a.75.75 0 00-1.06 1.06l1.78 1.78a8 8 0 01-1.07 1zM12 17a5 5 0 100-10 5 5 0 000 10z" clip-rule="evenodd"></path></svg>
              <span class="text-sm font-medium">Views: 1,200</span>
            </div>
          </div>

          <div class="flex items-center gap-3">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Uploader Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-md">
            <div>
              <strong class="block text-gray-800 dark:text-gray-200 text-sm">Uploaded by: John Doe</strong>
              <span class="text-gray-500 dark:text-gray-400 text-xs">Marketing Team</span>
            </div>
          </div>
        </div>

        <!-- Action Buttons / Tags -->
        <div class="flex-none sm:w-48 flex flex-col gap-3">
          <button class="w-full bg-gray-900 text-white py-2.5 px-4 rounded-xl shadow-md transform transition-transform hover:scale-105 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
            Download Image
          </button>
          <button class="w-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2.5 px-4 rounded-xl shadow-md transform transition-transform hover:scale-105 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Leave Comment
          </button>
          
          <div class="mt-auto flex flex-wrap gap-2 justify-center sm:justify-start">
            <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold rounded-full">#Office</span>
            <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold rounded-full">#Architecture</span>
            <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold rounded-full">#Team</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Just a little script for the lightbox animation - not part of the component itself -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const lightbox = document.getElementById('lightbox');
  if (lightbox) {
    lightbox.addEventListener('click', (event) => {
      if (event.target === lightbox) {
        lightbox.classList.add('hidden');
      }
    });
    
    // Observe for 'hidden' class changes to animate in/out
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'class') {
                const isHidden = lightbox.classList.contains('hidden');
                const content = lightbox.querySelector('div:first-of-type'); // The actual dialog content

                if (!isHidden) {
                    // Show lightbox, then apply animation classes
                    setTimeout(() => {
                        lightbox.style.opacity = '1';
                        if (content) {
                          content.style.transform = 'scale(1)';
                          content.style.opacity = '1';
                        }
                    }, 10);
                } else {
                    // Hide lightbox, apply reverse animation classes, then add 'hidden'
                    lightbox.style.opacity = '0';
                    if (content) {
                      content.style.transform = 'scale(0.95)';
                      content.style.opacity = '0';
                    }
                    setTimeout(() => {
                        // Ensure hidden is only added after transition for a smoother close
                        if (lightbox.classList.contains('hidden')) return;
                        lightbox.classList.add('hidden');
                    }, 300); // Match this with your Tailwind transition duration
                }
            }
        });
    });

    observer.observe(lightbox, { attributes: true });
  }
});
</script>