Penampil Foto Layar Penuh Ramah Sentuhan

Tantangan & Kebutuhan Pengguna

Memotong 25 foto dengan komposisi beragam ke dalam kotak-kotak Bento Grid maupun bingkai potret 3:4 pada Lightbox sering kali membuat kepala atau wajah pasangan terpotong bila hanya mengandalkan `object-position: center`. Selain itu, pengguna ponsel mengharapkan navigasi usap jari (swipe kiri/kanan) yang responsif saat melihat foto secara penuh, sekaligus menghentikan sementara guliran otomatis galeri di latar belakang.

Kualitas galeri fotografi digital ditentukan oleh kemampuannya menjaga titik fokus wajah subjek tetap utuh di rasio bingkai apa pun.

Solusi & Cara Kerja

Setiap entri dalam konstanta `PHOTOS` di `GallerySwiper.tsx` dibekali metadata `pos` (contoh: `"50% 25%"`, `"38% 30%"`, `"50% 15%"`) yang disuntikkan ke properti CSS `objectPosition` baik pada sel grid maupun komponen `Lightbox`. Saat foto diklik, state `active` menyimpan indeks foto, memicu `useEffect` untuk menyetel `pausedRef.current = true` agar loop `requestAnimationFrame` berhenti sementara, dan merender modal `Lightbox` yang mendengarkan event keyboard (`Escape`, `ArrowLeft`, `ArrowRight`) serta menghitung delta koordinat horizontal sentuhan jari (`onTouchStart` dan `onTouchEnd`).

Detail & Hal yang Diperhatikan

• Pencegahan penutupan tak sengaja saat swipe: Pemanggilan `e.stopPropagation()` ketika `Math.abs(dx) > 50` mencegah event `onClick={onClose}` pada backdrop gelap ikut terpicu seusai jari diangkat.
• Strategi pemuatan gambar hibrida (Eager vs Lazy): Hanya 6 foto pertama pada tiap grid yang diberikan `loading="eager"`, sementara 19 foto sisanya menggunakan `loading="lazy"` untuk menghemat kuota data seluler pengunjung.
• Transisi instan antar-slide: Penambahan `key={index}` pada komponen `<Image>` di dalam Lightbox memastikan elemen gambar langsung diperbarui tanpa menyisakan frame foto sebelumnya.

Ambang batas swipe 50px (`Math.abs(dx) > 50`) dipilih agar ketukan jari biasa (tap) yang sedikit bergeser tidak salah dikenali sebagai perintah berpindah foto.