feat. GR_GALLERY_03 템플릿 제작

layers/components/widgets/BannerList.vue

@@ -15,63 +15,33 @@ const props = withDefaults(defineProps<BannerListProps>(), {
   arrows: true,
   pagination: true,
 })
-
-const isMultipleItems = computed(() => {
-  return props.resourcesData.length > 1
-})
 </script>
 
 <template>
   <BlocksSlideCenterHighlight
     :slide-item-size="props.slideItemSize"
-    :type="isMultipleItems ? 'loop' : 'slide'"
-    :arrows="isMultipleItems ? true : false"
+    :slide-item-length="props.resourcesData.length"
     :pagination="false"
     class="mt-[36px] md:mt-[60px]"
   >
-    <SplideSlide
-      v-for="(item, index) in props.resourcesData"
-      :key="index"
-      class="splide-slide"
-    >
+    <SplideSlide v-for="(item, index) in props.resourcesData" :key="index">
       <BlocksCardNews
         :title="item.title"
         :description="item.option01"
         :img-path="getResolvedHost(item.img_path)"
         :url="item.url"
         :link-target="item.link_target"
-        class="news-center-highlight"
+        class="slide-inner"
       />
     </SplideSlide>
   </BlocksSlideCenterHighlight>
 </template>
 
 <style scoped>
-.center-highlight:deep(.splide__slide.is-active .news-center-highlight) {
-  width: var(--banner-width-mo-active);
-  height: var(--banner-height-mo-active);
-}
 .center-highlight:deep(.splide__slide.is-active .card-link) {
   pointer-events: auto;
 }
-.news-center-highlight {
-  width: var(--banner-width-mo);
-  height: var(--banner-height-mo);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
 .center-highlight:deep(.splide__slide .card-link) {
   pointer-events: none;
 }
-
-/* PC 스타일 */
-@media (min-width: 1024px) {
-  .center-highlight:deep(.splide__slide.is-active .news-center-highlight) {
-    width: var(--banner-width-pc-active);
-    height: var(--banner-height-pc-active);
-  }
-  .news-center-highlight {
-    width: var(--banner-width-pc);
-    height: var(--banner-height-pc);
-  }
-}
 </style>