feat: introduce ProductImage component to streamline image handling in PrerenderProduct and ProductDetailPage

src/components/ProductImage.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import CardMedia from '@mui/material/CardMedia';
+import Images from './Images.js';
+
+const ProductImage = ({ 
+  product, 
+  socket, 
+  socketB, 
+  fullscreenOpen, 
+  onOpenFullscreen, 
+  onCloseFullscreen,
+  isPrerender = false 
+}) => {
+  // For prerender, use static image path
+  const getImagePath = (pictureList) => {
+    if (!pictureList || !pictureList.trim()) {
+      return '/assets/images/nopicture.jpg';
+    }
+    return `/assets/images/prod${pictureList.split(',')[0].trim()}.jpg`;
+  };
+
+  // Container styling - same for both versions
+  const containerSx = {
+    width: { xs: "100%", sm: "555px" },
+    maxWidth: "100%",
+    minHeight: "400px",
+    background: "#f8f8f8",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+
+  if (isPrerender) {
+    // Prerender version - use CardMedia with static paths
+    return (
+      <Box sx={containerSx}>
+        {!product.pictureList && (
+          <CardMedia
+            component="img"
+            height="400"
+            image="/assets/images/nopicture.jpg"
+            alt={product.name}
+            sx={{ objectFit: "cover" }}
+          />
+        )}
+        {product.pictureList && (
+          <Box sx={{ position: 'relative', display: 'inline-block' }}>
+            <CardMedia
+              component="img"
+              height="400"
+              image={getImagePath(product.pictureList)}
+              alt={product.name}
+              sx={{ 
+                objectFit: 'contain',
+                cursor: 'pointer',
+                transition: 'transform 0.2s ease-in-out',
+                '&:hover': {
+                  transform: 'scale(1.02)'
+                }
+              }}
+            />
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  // SPA version - use existing Images component
+  return (
+    <Box sx={containerSx}>
+      {!product.pictureList && (
+        <CardMedia
+          component="img"
+          height="400"
+          image="/assets/images/nopicture.jpg"
+          alt={product.name}
+          sx={{ objectFit: "cover" }}
+        />
+      )}
+      {product.pictureList && (
+        <Images
+          socket={socket}
+          socketB={socketB}
+          pictureList={product.pictureList}
+          fullscreenOpen={fullscreenOpen}
+          onOpenFullscreen={onOpenFullscreen}
+          onCloseFullscreen={onCloseFullscreen}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default ProductImage;