Mosaik 20 Foto Pengantin & Pratinjau Layar Penuh

Tantangan & Kebutuhan Pengguna

Menampilkan 20 foto dokumentasi dengan ukuran bervariasi (kotak besar 2x2, potret tinggi 1x2, dan kotak standar 1x1) di dalam CSS Grid biasa sering kali menyisakan lubang kosong (empty cells) yang merusak estetika halaman. Selain itu, pemotongan gambar otomatis di tengah (center crop) sering memotong kepala atau wajah mempelai pada foto vertikal, dan pengguna membutuhkan penampil foto layar penuh (Lightbox) yang mendukung navigasi jari maupun papan ketik.

Kualitas galeri editorial terletak pada ketepatan penempatan tiap bingkai di dalam kisi serta perhatian pada titik fokus wajah di setiap potongannya.

Solusi & Cara Kerja

Di dalam app/gallery/page.tsx, tata letak dikendalikan secara deterministik oleh matriks PLACEMENTS berisi 20 tupel [colStart, rowStart, colSpan, rowSpan] yang memadatkan seluruh foto ke dalam grid 3 kolom x 12 baris tanpa satu pun sel kosong. Setiap entri di dalam konstanta PHOTOS menyimpan koordinat objectPosition khusus (misal '50% 28%' atau '34% 42%') dan filter color-grading individual. Saat salah satu foto diklik, state active membuka komponen Lightbox yang mendukung navigasi tombol panah di luar bingkai, event keyboard (Escape, ArrowLeft, ArrowRight), serta deteksi swipe horizontal layar sentuh.

Detail & Hal yang Diperhatikan

• Prioritas Pemuatan Gambar (Hybrid Eager/Lazy Loading): Enam foto pertama di baris atas menggunakan loading='eager' agar langsung tampil saat tirai halaman terbuka, sedangkan foto ke-7 hingga ke-20 menggunakan loading='lazy' untuk menghemat bandwidth.
• Smart Auto-Hiding Header: Header galeri yang bersifat sticky otomatis bergeser ke atas (translateY(-110%)) ketika pengguna menggulir ke bawah melewati 80px, dan langsung muncul kembali begitu pengguna menggulir sedikit saja ke arah atas.
• Aksesibilitas Penuh pada Item Grid: Setiap elemen foto di dalam grid memiliki role='button', tabIndex={0}, aria-label deskriptif, serta dukungan tombol Enter dan Space untuk membuka Lightbox tanpa mouse.

Bingkai foto di dalam Lightbox dilengkapi ornamen sudut L-bracket emas (.lbc-tl, .lbc-tr, .lbc-bl, .lbc-br) dan progress bar dinamis yang menghitung persentase ((index + 1) / total) * 100%.