fix. 페이지네이션 스타일 적용

layers/components/blocks/slide/Fade.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { Splide } from '@splidejs/vue-splide'
-import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
 import { useSplideArrow } from '#layers/composables/useSplideArrow'
+import { getPaginationClass } from '#layers/utils/styleUtil'
+import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
+import type { PageDataResourceGroups } from '#layers/types/api/pageData'
 
 interface Props {
   autoplay?: boolean | string
   arrows?: boolean
   pagination?: boolean
+  paginationData?: PageDataResourceGroups
   class?: string
 }
 
@@ -52,7 +55,6 @@ defineExpose({
 
 const handleSplideMounted = (splide: SplideType) => {
   emit('mounted', splide)
-  splide.refresh()
 
   // 화살표 버튼 클릭 이벤트 리스너 추가
   nextTick(() => {
@@ -77,6 +79,7 @@ const handleMove = (
     ref="splideRef"
     :options="options"
     class="h-full"
+    :style="getPaginationClass(props.paginationData)"
     @splide:mounted="handleSplideMounted"
     @splide:move="handleMove"
   >

layers/components/blocks/slide/Thumbnail.vue

@@ -137,7 +137,7 @@ onBeforeUnmount(() => {
       ref="thumbsRef"
       :options="thumbOptions"
       class="thumbnail-splide"
-      :style="getPaginationClass(paginationData, { type: 'thumbnail' })"
+      :style="getPaginationClass(paginationData)"
     >
       <SplideSlide
         v-for="(item, index) in props.slideData"

layers/components/widgets/Background.vue

@@ -4,10 +4,12 @@ import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 interface Props {
   resourcesData: PageDataResourceGroup
   gradient?: string
+  size?: 'contain' | 'cover'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   gradient: '',
+  size: 'cover',
 })
 
 const breakpoints = useResponsiveBreakpointsReliable()
@@ -47,8 +49,13 @@ const currentPosterSrc = computed(() => {
     <!-- 이미지 타입-->
     <div
       v-if="isTypeImage(resourcesData?.resource_type)"
-      class="w-full h-full bg-cover bg-center bg-no-repeat"
-      :class="getResponsiveClass()"
+      :class="[
+        'w-full h-full bg-cover bg-center bg-no-repeat',
+        {
+          'object-contain': props.size === 'contain',
+          'object-cover': props.size === 'cover',
+        },
+      ]"
       :style="bgStyles"
     />
 

layers/components/widgets/Description.vue

@@ -7,7 +7,13 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p>
+  <p class="description">
     <BlocksVisualContent :resources-data="props.resourcesData" />
   </p>
 </template>
+
+<style scoped>
+.description {
+  @apply line-clamp-4 text-[15px] font-[400] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[20px] md:leading-[30px];
+}
+</style>

layers/components/widgets/SubTitle.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
-const props = defineProps<{
+interface Props {
   resourcesData: PageDataResourceGroup
-}>()
+  tag?: 'h3' | 'h4' | 'p'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: 'h3',
+})
 </script>
 
 <template>
-  <h3>
+  <component :is="props.tag">
     <BlocksVisualContent :resources-data="props.resourcesData" />
-  </h3>
+  </component>
 </template>