feat. 게임시작 로직 적용

layers/assets/css/app.css

@@ -1,5 +1,6 @@
 @import './base/_theme.css';
 @import './base/_reset.css';
+@import './base/_transition.css';
 
 @import './components/_button.css';
 @import './components/_layout.css';

layers/assets/css/base/_transition.css

@@ -0,0 +1,19 @@
+/* page-fade */
+.page-fade-enter-active,
+.page-fade-leave-active {
+  transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1);
+}
+.page-fade-enter-from,
+.page-fade-leave-to {
+  opacity: 0;
+}
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

layers/assets/css/components/_modal.css

@@ -9,7 +9,7 @@
   }
 
   .modal-area {
-    @apply relative w-full max-w-[312px] m-auto p-6 bg-white rounded-[20px];
+    @apply relative w-full m-auto bg-white;
   }
 
   .content-btns {

layers/assets/css/components/_splide.css

@@ -10,11 +10,11 @@
 
   .splide-pagination-bullet {
     @apply relative w-2 h-2 rounded-full bg-[var(--primary)] opacity-100 md:w-3 md:h-3
-    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-[rgba(0,0,0,0.5)] after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0;
+    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-[rgba(0,0,0,0.5)] after:transition-opacity after:duration-300 after:ease-in-out after:opacity-100;
   }
 
   .splide-pagination-bullet.is-active {
-    @apply after:opacity-100;
+    @apply after:opacity-0;
   }
   .splide-arrow {
     @apply hidden absolute top-1/2 w-[48px] h-[48px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5] md:block