feat: added compulsory tags

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

@@ -3,6 +3,7 @@
     import crossUrl from "$lib/assets/cross.svg";
     import placeholder from "$lib/assets/study_space.png";
     import Carousel from "$lib/components/Carousel.svelte";
+    import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
@@ -35,13 +36,16 @@
         </p>
         <hr />
     {/if}
-    <div class="tagContainer">
-        {#each space.tags as tag (tag)}
-            <span class="tag">
-                {tag}
-            </span>
-        {/each}
-    </div>
+    <div class="compulsoryContainer"><CompulsoryTags {space} /></div>
+    {#if space.tags.length > 0}
+        <div class="tagContainer">
+            {#each space.tags as tag (tag)}
+                <span class="tag">
+                    {tag}
+                </span>
+            {/each}
+        </div>
+    {/if}
     <hr />
     <div class="subtitle">Where it is:</div>
     <p class="addrContainer">
@@ -128,4 +132,13 @@
         cursor: pointer;
         padding: 0.2rem 0.6rem;
     }
+
+    .compulsoryContainer {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.5rem;
+        padding: 1.4rem;
+        font-size: 1.3rem;
+        padding-bottom: 0;
+    }
 </style>