feat: carousel image display

src/routes/space/[id]/+page.svelte

@@ -2,16 +2,19 @@
     import Navbar from "$lib/components/Navbar.svelte";
     import crossUrl from "$lib/assets/cross.svg";
     import placeholder from "$lib/assets/study_space.png";
+    import Carousel from "$lib/components/Carousel.svelte";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
 
-    const imgUrl = $derived(
-        space.study_space_images.length > 0
-            ? supabase.storage
-                  .from("files_bucket")
-                  .getPublicUrl(space.study_space_images[0].image_path).data.publicUrl
-            : placeholder
+    const imgUrls = $derived(
+        space.study_space_images.length === 0
+            ? [placeholder]
+            : space.study_space_images.map(
+                  (img) =>
+                      supabase.storage.from("files_bucket").getPublicUrl(img.image_path).data
+                          .publicUrl
+              )
     );
 </script>
 
@@ -22,7 +25,7 @@
 </Navbar>
 
 <main>
-    <img src={imgUrl} alt="the study space" />
+    <Carousel urls={imgUrls} />
     <div class="nameContainer">
         {space.location}
     </div>
@@ -61,6 +64,7 @@
         margin: 0 auto;
     }
     .nameContainer {
+        z-index: 10;
         display: block;
         width: 100%;
         padding: 0.6rem;