feat. alert, confirm 모달 추가

layers/assets/css/app.css

@@ -1,9 +1,10 @@
 @import './base/_theme.css';
 @import './base/_reset.css';
 
-@import './components/_splide.css';
 @import './components/_button.css';
 @import './components/_layout.css';
+@import './components/_modal.css';
+@import './components/_splide.css';
 
 @import '@splidejs/vue-splide/css';
 

layers/assets/css/base/_reset.css

@@ -1,21 +1,21 @@
 /* CSS 리셋 및 기본 스타일 */
 @layer base {
   body {
-    background-color: #000;
+    @apply min-w-[320px] bg-black;
   }
   body.scroll-lock {
-    overflow: hidden;
+    @apply overflow-hidden;
   }
 
   button,
   a {
-    outline: none;
+    @apply outline-none;
   }
 
   /* 라이트 테마 색상 */
   [data-theme='light'] {
     body {
-      background-color: #fff;
+      @apply bg-white;
     }
   }
 }

layers/assets/css/base/_theme.css

@@ -1,4 +1,5 @@
 :root {
+  /* 다크 테마 색상  */
   --foreground: #191919;
   --foreground-10: #292929;
 

layers/assets/css/components/_button.css

@@ -28,7 +28,7 @@
   }
 
   .size-extra-small {
-    @apply before:rounded after:rounded
-    px-6 h-10 text-sm rounded;
+    @apply px-6 h-10 text-sm rounded
+    before:rounded after:rounded;
   }
 }

layers/assets/css/components/_modal.css

@@ -0,0 +1,22 @@
+/* Button Size Classes */
+@layer components {
+  .modal-wrap {
+    @apply fixed inset-0 flex p-5 z-[500];
+  }
+
+  .modal-wrap.dimmed {
+    @apply bg-black/60;
+  }
+
+  .modal-area {
+    @apply relative w-full max-w-[312px] m-auto p-6 bg-white rounded-[20px];
+  }
+
+  .content-btns {
+    @apply flex gap-2 mt-6;
+  }
+
+  .content-text {
+    @apply text-center text-[15px] text-[#333333] leading-6 tracking-[-0.45px];
+  }
+}

layers/assets/css/components/_splide.css

@@ -1,102 +1,42 @@
 /*  페이지네이션 버튼 - 모바일 퍼스트 */
-.splide-pagination-bullets {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  margin-top: 24px;
-  z-index: 5;
-}
-
-.splide-pagination-bullets.type-full {
-  position: absolute;
-  bottom: 32px;
-  left: 0;
-}
-
-.splide-pagination-bullet {
-  position: relative;
-  width: 8px;
-  height: 8px;
-  background: var(--primary);
-  border-radius: 50%;
-  opacity: 1;
-}
-
-.splide-pagination-bullet:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
-  transition: opacity 0.3s ease;
-}
-
-.splide-pagination-bullet.is-active:after {
-  opacity: 0;
-}
-
-/* 네비게이션 버튼 - 모바일 퍼스트 */
-.splide-arrow {
-  display: none;
-  /* position: absolute;
-  top: 50%;
-  width: 40px;
-  height: 40px;
-  transform: translateY(-50%);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  z-index: 5;
-  background-color: var(--primary); */
-}
-
-/* .type-full .arrow-prev {
-  left: 20px;
-}
-.type-full.arrow-next {
-  right: 20px;
-} */
-
-/* 데스크톱 스타일 */
-@media (min-width: 1024px) {
+@layer components {
   .splide-pagination-bullets {
-    gap: 24px;
-    margin-top: 32px;
+    @apply w-full flex justify-center items-center gap-3 mt-6 z-[5] md:mt-8 md:gap-6;
   }
 
-  .splide-pagination-bullets.position-absolute {
-    bottom: 48px;
+  .splide-pagination-bullets.type-full {
+    @apply absolute bottom-8 left-0;
   }
 
   .splide-pagination-bullet {
-    width: 12px;
-    height: 12px;
+    @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;
   }
 
+  .splide-pagination-bullet.is-active {
+    @apply after:opacity-100;
+  }
   .splide-arrow {
-    display: block;
-    position: absolute;
-    top: 50%;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: var(--primary);
-    transform: translateY(-50%);
-    cursor: pointer;
-    z-index: 5;
+    @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
+    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
+    hover:after:opacity-10;
+  }
+  .arrow-prev {
+    @apply bg-[image:var(--arrow-left)];
+  }
+  .arrow-next {
+    @apply bg-[image:var(--arrow-right)];
   }
 
   .type-full .arrow-prev {
-    left: 40px;
+    @apply left-10;
   }
 
   .type-full .arrow-next {
-    right: 40px;
+    @apply right-10;
+  }
+
+  .splide-arrow svg {
+    @apply hidden;
   }
 }