feat(F-055): completed feature

project/frontend/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "16.3.1",
         "react": "19.2.8",
-        "react-dom": "19.2.8"
+        "react-dom": "19.2.8",
+        "sharp": "^0.35.3"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -524,7 +525,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"
       }
@@ -3035,7 +3035,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -5999,7 +5998,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",
@@ -6049,7 +6047,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"
       },

project/frontend/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "16.3.1",
     "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "react-dom": "19.2.8",
+    "sharp": "^0.35.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

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

@@ -100,7 +100,7 @@ export default async function ProductPage({ params }: Props) {
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
         {/* Image */}
         <div>
-          <div className="aspect-square bg-gray-50 rounded-2xl border border-gray-100 flex items-center justify-center overflow-hidden">
+          <div className="aspect-square max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 flex items-center justify-center overflow-hidden">
             {product.images?.[0] ? (
               <Image
                 src={product.images[0].url}

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

@@ -1,49 +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.
- *
- * Next.js production mode caches the public/ directory listing at build/start
- * time, so files added after startup return 404 when served as static
- * assets. This route reads the file fresh from disk each time, mirroring
- * 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 });
-  }
-}