update

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col w-screen min-h-screen h-full">
+  <div class="flex flex-col w-screen min-h-screen h-full gap-4">
     <div class="flex h-16 py-2 px-4 w-full justify-between items-center bg-white">
       <div class="flex items-center gap-4">
         <img

frontend/src/pages/mainPage.vue

@@ -1,11 +1,24 @@
 <template>
-  <div class="flex flex-col gap-4">
-
+  <div class="flex flex-col gap-4 w-full h-full">
+    <div ref="slider" class="flex w-full gap-4 snap-x overflow-x-scroll snap-mandatory drop-shadow-md">
+      <div
+          v-for="i in [1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]"
+          :key="i"
+          class="flex justify-center items-center snap-center min-w-96 w-[32rem] h-24 rounded-md bg-red-100 p-4"
+      >
+        <p>{{ i }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "mainPage"
+  name: "mainPage",
+  mounted() {
+    this.$refs.slider.addEventListener('wheel', ev => {
+      console.log(ev)
+    })
+  }
 }
-</script>
+</script>