feat(F-066): completed feature

project/frontend/src/app/products/[slug]/page.tsx

@@ -100,24 +100,26 @@ export default async function ProductPage({ params }: Props) {
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
         {/* Image */}
         <div>
-          {/* Detail image: the container fills its column so the image is
-              always horizontally centered within the column (matches the
-              behaviour of the checkout layout). `max-h` bounds the height
-              and `object-contain` on the inner image preserves the source
-              aspect ratio without cropping. */}
-          <div className="relative w-full max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
-            {product.images?.[0] ? (
-              <Image
-                src={product.images[0].url}
-                alt={product.name}
-                fill
-                className="object-contain"
-                priority
-                sizes="(max-width: 1024px) 100vw, 50vw"
-              />
-            ) : (
-              <span className="absolute inset-0 flex items-center justify-center text-8xl">🌿</span>
-            )}
+          {/* Detail image: wrap in a flex container so the inner box is
+              horizontally centred inside the grid cell. The inner box has
+              `aspect-[5/7] max-h-[500px]` so it always has a real height
+              (next/image `fill` needs a non-zero parent) and the image is
+              letterboxed with `object-contain`. */}
+          <div className="flex justify-center">
+            <div className="relative w-full max-w-md aspect-[5/7] max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
+              {product.images?.[0] ? (
+                <Image
+                  src={product.images[0].url}
+                  alt={product.name}
+                  fill
+                  className="object-contain"
+                  priority
+                  sizes="(max-width: 1024px) 100vw, 50vw"
+                />
+              ) : (
+                <span className="absolute inset-0 flex items-center justify-center text-8xl">🌿</span>
+              )}
+            </div>
           </div>
         </div>
 

project/src/modules/catalog/api/catalog.routes.ts

@@ -655,6 +655,9 @@ function serializeProduct(product: Product, images: ProductImage[] = []) {
     images: images.map(serializeImage),
     description: product.description,
     state: product.state,
+    channels: product.channels,
+    featured: product.featured,
+    attributes: product.attributes,
     seoTitle: product.seoTitle,
     seoDescription: product.seoDescription,
     categoryIds: product.categoryIds,

project/src/modules/catalog/infrastructure/pg-product-repository.ts

@@ -121,8 +121,16 @@ export class PgProductRepository implements ProductRepository {
       const values: unknown[] = [];
       for (const [key, column] of UPDATABLE) {
         if (key in patch) {
-          values.push(patch[key]);
-          setClauses.push(`${column} = $${values.length}`);
+          // The `attributes` column is JSONB; pg-node would otherwise serialise
+          // JS arrays as PG array literals (`{bio,keto}`) which the JSONB parser
+          // rejects. Stringify explicitly and cast to JSONB.
+          if (key === 'attributes' && Array.isArray(patch[key])) {
+            values.push(JSON.stringify(patch[key]));
+            setClauses.push(`${column} = $${values.length}::jsonb`);
+          } else {
+            values.push(patch[key]);
+            setClauses.push(`${column} = $${values.length}`);
+          }
         }
       }