fix. 공통 스타일 분리

layers/components/blocks/CardNews.vue

@@ -42,8 +42,8 @@ const props = defineProps<Props>()
 <style scoped>
 .card-news {
   @apply overflow-hidden relative flex items-center justify-center h-full rounded-lg
-         after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
-         after:border after:border-white/10 after:rounded-lg;
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
+  after:border after:border-white/10 after:rounded-lg;
 }
 .card-image {
   @apply transition-transform duration-300 w-full h-full object-cover;

layers/components/blocks/VisualContent.vue

@@ -83,5 +83,6 @@ const hasImage = computed(() => {
     v-else-if="displayText"
     v-dompurify-html="sanitizedContent"
     :style="textStyles"
+    class="block"
   />
 </template>

layers/components/blocks/slide/Thumbnail.vue

@@ -16,7 +16,7 @@ const props = defineProps<Props>()
 
 const mainRef = ref<InstanceType<typeof Splide> | null>(null)
 const thumbsRef = ref<InstanceType<typeof Splide> | null>(null)
-const isPlaying = ref<boolean>(false)
+const playingSlideIndex = ref<number | null>(null)
 
 const mainOptions = computed<Options>(() => ({
   type: 'fade',
@@ -26,6 +26,7 @@ const mainOptions = computed<Options>(() => ({
   speed: 600,
   arrows: false,
   pagination: false,
+  drag: false,
 }))
 const thumbOptions = computed<Options>(() => ({
   type: 'slide',
@@ -45,9 +46,8 @@ const thumbOptions = computed<Options>(() => ({
   },
 }))
 
-// 비디오 클릭 핸들러
-const handleVideoClick = () => {
-  isPlaying.value = true
+const handleVideoClick = (index: number) => {
+  playingSlideIndex.value = index
 }
 
 let mainInst: SplideType | null = null
@@ -58,6 +58,10 @@ onMounted(() => {
   thumbsInst = thumbsRef.value?.splide ?? null
   if (mainInst && thumbsInst) {
     mainInst.sync(thumbsInst)
+
+    mainInst.on('moved', () => {
+      playingSlideIndex.value = null
+    })
   }
 })
 
@@ -76,28 +80,28 @@ onBeforeUnmount(() => {
         :key="item.set_order || index"
         class="main-slide"
       >
-        <template v-if="!isPlaying">
-          <img
-            :src="getMediaImgSrc(item.media)"
-            alt="main image"
-            class="slide-image"
-          />
-          <AtomsButtonPlay
-            v-if="getMediaType(item.media) === 'video'"
-            :resources-data="videoPlay"
-            class="btn-play"
-            @click="handleVideoClick()"
-          />
-        </template>
-        <template v-else>
-          <iframe
-            :src="getYouTubeEmbedUrl(getMediaText(item.media))"
-            class="absolute top-0 left-0 w-full h-full"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-          />
-        </template>
+        <img
+          :src="getMediaImgSrc(item.media)"
+          alt="main image"
+          class="slide-image"
+          :class="{ 'opacity-0': playingSlideIndex === index }"
+        />
+        <AtomsButtonPlay
+          v-if="
+            getMediaType(item.media) === 'video' && playingSlideIndex !== index
+          "
+          :resources-data="videoPlay"
+          class="btn-play"
+          @click="handleVideoClick(index)"
+        />
+        <iframe
+          v-if="playingSlideIndex === index"
+          :src="getYouTubeEmbedUrl(getMediaText(item.media), true)"
+          class="absolute top-0 left-0 w-full h-full"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+        />
       </SplideSlide>
     </Splide>
 
@@ -122,14 +126,14 @@ onBeforeUnmount(() => {
 /* 비디오 iframe 전환 애니메이션 */
 
 .thumbnail-carousel {
-  @apply w-full px-[20px] sm:px-[40px] md:max-w-[1024px];
+  @apply w-full md:max-w-[944px];
 }
 
 .main-splide {
   @apply overflow-hidden mx-auto rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
 }
 .main-slide {
-  @apply aspect-[16/9];
+  @apply relative aspect-[16/9];
 }
 .slide-image {
   @apply w-full h-full object-cover;

layers/components/widgets/Background.vue

@@ -4,11 +4,11 @@ import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 interface Props {
   resourcesData: PageDataResourceGroup
-  gradient?: boolean
+  gradient?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  gradient: false,
+  gradient: '',
 })
 
 const resPath = computed(() => {
@@ -72,7 +72,7 @@ const posterSrc = computed(() => {
     <!-- 그라디언트 오버레이 (gradient가 true일 때만) -->
     <div
       v-if="props.gradient"
-      class="absolute bottom-0 left-0 right-0 h-[342px] md:h-[720px] bg-gradient-to-b from-[#100d0f]/0 to-[#100d0f]"
+      :class="`absolute bottom-0 left-0 right-0 ${props.gradient}`"
     />
   </div>
 </template>