feat.[SWV-806] 템플릿 모션 적용

layers/components/widgets/ButtonList.vue

@@ -122,7 +122,8 @@ const handleButtonClick = (button: PageDataResourceGroup) => {
 <template>
   <div
     v-if="buttonList.length"
-    class="flex flex-wrap justify-center items-center gap-3 md:gap-4"
+    v-motion-stagger
+    class="flex flex-wrap justify-center gap-3 md:gap-4"
   >
     <template v-for="(button, index) in buttonList" :key="index">
       <template v-if="button.btn_info?.detail?.btn_type === 'RUN'">

layers/components/widgets/Description.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p class="description">
+  <p v-motion-stagger class="description">
     <BlocksVisualContent :resources-data="props.resourcesData" />
   </p>
 </template>

layers/components/widgets/MainTitle.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <h2>
+  <h2 v-motion-stagger>
     <BlocksVisualContent :resources-data="props.resourcesData" />
   </h2>
 </template>

layers/components/widgets/SubTitle.vue

@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <component :is="props.tag">
+  <component :is="props.tag" v-motion-stagger>
     <BlocksVisualContent :resources-data="props.resourcesData" />
   </component>
 </template>

layers/components/widgets/VideoPlay.vue

@@ -22,6 +22,7 @@ const handleVideoPlayClick = () => {
 
 <template>
   <AtomsButtonPlay
+    v-motion-stagger
     :bg-color="bgColor"
     :tracking="props.resourcesData.tracking"
     @click="handleVideoPlayClick"