feat(F-055): completed feature

project/storefront/package-lock.json

@@ -13,6 +13,7 @@
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "server-only": "^0.0.1",
+        "sharp": "^0.35.3",
         "tailwindcss": "^4.1.17"
       },
       "devDependencies": {
@@ -53,7 +54,6 @@
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
       "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=18"
       }
@@ -1544,7 +1544,6 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
       "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
       "license": "ISC",
-      "optional": true,
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -1563,7 +1562,6 @@
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.3.tgz",
       "integrity": "sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==",
       "license": "Apache-2.0",
-      "optional": true,
       "dependencies": {
         "@img/colour": "^1.1.0",
         "detect-libc": "^2.1.2",

project/storefront/package.json

@@ -20,6 +20,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "server-only": "^0.0.1",
+    "sharp": "^0.35.3",
     "tailwindcss": "^4.1.17"
   },
   "devDependencies": {

project/storefront/src/app/productos/[slug]/page.tsx

@@ -66,7 +66,11 @@ export default async function ProductPage({ params }: PageProps) {
         <div className="overflow-hidden rounded-[2rem] border border-emerald-900/10 bg-emerald-50">
           {image ? (
             // eslint-disable-next-line @next/next/no-img-element
-            <img src={image.url} alt={image.altText} className="aspect-[4/3] w-full object-cover" />
+            <img
+              src={image.url}
+              alt={image.altText}
+              className="aspect-[4/3] w-full max-h-[600px] object-cover"
+            />
           ) : (
             <div className="flex aspect-[4/3] items-center justify-center text-emerald-900">
               Imagen próximamente

project/storefront/src/app/uploads/[filename]/route.ts

@@ -1,45 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { readFile } from 'fs/promises';
-import path from 'path';
-
-const MIME: Record<string, string> = {
-  '.jpg': 'image/jpeg',
-  '.jpeg': 'image/jpeg',
-  '.png': 'image/png',
-  '.webp': 'image/webp',
-  '.avif': 'image/avif',
-  '.gif': 'image/gif',
-};
-
-/**
- * Serves uploaded product images dynamically from disk on every request.
- * Mirrors the behaviour of the admin app so newly uploaded images are
- * immediately available without a rebuild.
- */
-export async function GET(
-  _request: NextRequest,
-  { params }: { params: Promise<{ filename: string }> },
-) {
-  const { filename } = await params;
-
-  const safe = path.basename(filename);
-  if (safe !== filename || filename.includes('..')) {
-    return NextResponse.json({ error: 'Invalid filename' }, { status: 400 });
-  }
-
-  const ext = path.extname(safe).toLowerCase();
-  const filePath = path.join(process.cwd(), 'public', 'uploads', safe);
-
-  try {
-    const buffer = await readFile(filePath);
-    return new NextResponse(buffer, {
-      headers: {
-        'Content-Type': MIME[ext] ?? 'application/octet-stream',
-        'Cache-Control': 'public, max-age=31536000, immutable',
-        'X-Content-Type-Options': 'nosniff',
-      },
-    });
-  } catch {
-    return NextResponse.json({ error: 'Not found' }, { status: 404 });
-  }
-}