feat. FX_PREREGIST_01 템플릿 제작

layers/templates/GrBoard01/index.vue

@@ -58,33 +58,42 @@ const { data: slideData } = await useAsyncData(
     server: false,
   }
 )
-const slideLength = computed(() => slideData.value.length)
-const slideClass = computed(() => ({
-  'is-one-item': slideLength.value === 1,
-  'is-two-items': slideLength.value === 2,
-  'is-three-items': slideLength.value === 3,
-  'is-four-items': slideLength.value === 4,
-}))
-const splideOptions = computed(() => ({
-  gap: 20,
-  perPage: 4,
-  drag: false,
-  arrows: slideLength.value > 4,
-  pagination: slideLength.value > 4,
-  breakpoints: {
-    [BREAKPOINTS.lg - 1]: {
-      perPage: 2,
-      arrows: slideLength.value > 2,
-      pagination: slideLength.value > 2,
+const slideLength = computed(() => slideData.value.length ?? 0)
+const splideOptions = computed(() => {
+  return {
+    gap: 20,
+    perPage: 4,
+    drag: false,
+    arrows: slideLength.value > 4,
+    pagination: slideLength.value > 4,
+    destroy: slideLength.value <= 4,
+    breakpoints: {
+      [BREAKPOINTS.lg - 1]: {
+        perPage: 2,
+        arrows: slideLength.value > 2,
+        pagination: slideLength.value > 2,
+        destroy: slideLength.value < 3,
+      },
+      [BREAKPOINTS.md - 1]: {
+        drag: true,
+        perPage: 1,
+        arrows: false,
+        pagination: false,
+        destroy: slideLength.value < 2,
+        padding: {
+          left: 40,
+          right: 40,
+        },
+      },
+      [BREAKPOINTS.sm - 1]: {
+        padding: {
+          left: 20,
+          right: 20,
+        },
+      },
     },
-    [BREAKPOINTS.md - 1]: {
-      drag: true,
-      perPage: 1,
-      arrows: false,
-      pagination: false,
-    },
-  },
-}))
+  }
+})
 
 const getArticleUrl = (articleId: string) => {
   const communityUrl = gameData.value?.url_json?.community
@@ -118,7 +127,7 @@ const onArrowClick = (direction, targetIndex) => {
           v-if="slideLength > 0"
           :slide-item-length="slideLength"
           v-bind="splideOptions"
-          :class="`${slideClass} w-full`"
+          class="w-full"
           @arrow-click="onArrowClick"
         >
           <SplideSlide
@@ -158,9 +167,6 @@ const onArrowClick = (direction, targetIndex) => {
 .splide {
   @apply mt-[24px] md:max-w-[776px] md:mt-[48px] md:mx-auto md:px-[72px] lg:max-w-[1428px];
 }
-.splide:deep(.splide__track) {
-  @apply !px-[20px] md:max-w-[632px] lg:max-w-[1284px] md:mx-auto md:!px-[0] sm:!px-[40px];
-}
 .splide:deep(.arrow-prev) {
   @apply top-[calc(50%-28px)] left-[0];
 }
@@ -168,23 +174,11 @@ const onArrowClick = (direction, targetIndex) => {
   @apply top-[calc(50%-28px)] right-[0];
 }
 .slide-inner {
-  @apply w-[275px] aspect-[1/1] md:w-[306px] md:box-border;
+  @apply w-[275px] aspect-[1/1] md:w-[306px];
 }
 
-.splide.is-one-item:deep(.splide__track) {
-  @apply max-w-[315px] sm:max-w-[355px] mx-auto md:max-w-[306px];
-}
-.splide.is-two-items:deep(.splide__track) {
-  @apply lg:max-w-[632px];
-}
-.splide.is-two-items:deep(.splide__list) {
-  @apply md:!translate-x-0;
-}
-.splide.is-three-items:deep(.splide__track) {
-  @apply lg:max-w-[958px];
-}
-.splide.is-three-items:deep(.splide__list),
-.splide.is-four-items:deep(.splide__list) {
-  @apply lg:!translate-x-0;
+/* destroy되었을 때 (슬라이드 비활성화) 중앙 정렬 */
+.splide:not(.is-active):deep(.splide__list) {
+  @apply flex justify-center gap-5;
 }
 </style>