x

apps/website/src/app/[lang]/products/[slug]/page.tsx

@@ -5,7 +5,7 @@ import Image from 'next/image'
 import { generateSeoMetadata } from '@/lib/seo'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { getCategoryImage, type PageSection, type Product, type ProductDetailSection } from '@homaroma/types'
+import { getCategoryImage, type PageSection, type Product, type ProductDetailSection, type ProductImage } from '@homaroma/types'
 import AddToCartSection from '@/components/AddToCartSection'
 import ProductGallery from '@/components/ProductGallery'
 import ProductHeroCarousel from '@/components/ProductHeroCarousel'
@@ -104,8 +104,10 @@ function ProductMainSection({
   const purchaseCardSticky = payload.purchaseCardSticky !== false
   const showBreadcrumbs = payload.showBreadcrumbs !== false
   const showBrandMeta = payload.showBrandMeta !== false
-  const images = product.images?.map(img => img.url).filter(Boolean) || []
-  const galleryImages = images.length > 0 ? images : [imageUrl]
+  const images = product.images?.filter((image) => Boolean(image.url)) || []
+  const galleryImages: ProductImage[] = images.length > 0
+    ? images
+    : [{ id: -1, url: imageUrl, mobileUrl: null, order: 0 }]
 
   if (layoutMode === 'sticky_gallery') {
     return (
@@ -131,10 +133,10 @@ function ProductMainSection({
 
           <div className="hidden space-y-6 lg:block">
             {galleryBehavior === 'stacked' ? (
-              galleryImages.map((src, index) => (
-                <div key={`${src}-${index}`} className="relative min-h-[78vh] overflow-hidden rounded-3xl bg-surface-card shadow-card">
+              galleryImages.map((image, index) => (
+                <div key={image.id || `${image.url}-${index}`} className="relative min-h-[78vh] overflow-hidden rounded-3xl bg-surface-card shadow-card">
                   <Image
-                    src={src}
+                    src={image.url}
                     alt={`${productName} ${index + 1}`}
                     fill
                     priority={index === 0}
@@ -179,11 +181,12 @@ function ProductMainSection({
         </nav>
       )}
 
-      <section className="grid gap-10 md:grid-cols-2 md:gap-16">
+      <section className="grid gap-10 md:grid-cols-2 md:items-stretch md:gap-16">
         <ProductGallery
           images={galleryImages}
           productName={productName}
           categoryName={categoryName}
+          stretchDesktop
         />
 
         <AddToCartSection product={product} showBrandMeta={showBrandMeta} />