feat(SW-828): Moved placeholder image to ImageGallery

components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css

@@ -15,3 +15,20 @@
 .triggerArea {
   cursor: pointer;
 }
+
+.imagePlaceholder {
+  height: 100%;
+  min-height: 190px;
+  width: 100%;
+  background-color: #fff;
+  background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
+    linear-gradient(-45deg, #000000 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #000000 75%),
+    linear-gradient(-45deg, transparent 75%, #000000 75%);
+  background-size: 160px 160px;
+  background-position:
+    0 0,
+    0 80px,
+    80px -80px,
+    -80px 0;
+}

components/HotelReservation/SelectRate/ImageGallery/index.tsx

@@ -8,6 +8,9 @@ import styles from "./imageGallery.module.css"
 import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
 
 export default function ImageGallery({ images, title }: ImageGalleryProps) {
+  if (!images || images.length === 0)
+    return <div className={styles.imagePlaceholder} />
+
   return (
     <Lightbox images={images} dialogTitle={title}>
       <div className={styles.triggerArea} id="lightboxTrigger">