fix. 머지 충돌 수정

Made-with: Cursor

app/pages/teaser.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: false, // 동적 레이아웃을 위해 기본 레이아웃 비활성화
-  middleware: ['inspection'],
-})
-
-// 진입 시 /home으로 리다이렉트
-await navigateTo('/home', { replace: true })
-</script>
-
-<template>
-  <div />
-</template>

layers/components/atoms/Button/Circle.vue

@@ -1,25 +1,13 @@
 <script setup lang="ts">
 interface props {
-<<<<<<< HEAD
-  type?: 'button' | 'link'
-  to?: string
-  target?: '_self' | '_blank'
-=======
   type?: 'internal' | 'external' | 'action'
   href?: string
->>>>>>> feature/20250228_SWV-866
   backgroundColor?: string
   srOnly?: string
 }
 
 const props = withDefaults(defineProps<props>(), {
-<<<<<<< HEAD
-  type: 'button',
-  to: '',
-  target: '_self',
-=======
   type: 'action',
->>>>>>> feature/20250228_SWV-866
   backgroundColor: '',
   srOnly: '',
 })

layers/components/atoms/Button/Play.vue

@@ -2,23 +2,23 @@
 import type { TrackingObject } from '#layers/types/api/common'
 
 interface Props {
-  variant?: 'videoPlay' | 'videoPlayImg'
+  category?: 'system' | 'image'
   backgroundColor?: string
   tracking: TrackingObject
 }
 
-const props = withDefaults(defineProps<Props>(), { variant: 'videoPlay' })
+const props = withDefaults(defineProps<Props>(), { category: 'system' })
 
 const { locale } = useI18n()
 const { sendLog } = useAnalytics()
 
 const buttonClasses = computed(() => [
   'btn-play',
-  props.variant === 'videoPlay' ? 'play-icon' : 'play-image',
+  props.category === 'system' ? 'play-icon' : 'play-image',
 ])
 
 const buttonStyle = computed(() =>
-  props.variant === 'videoPlay' && props.backgroundColor
+  props.category === 'system' && props.backgroundColor
     ? { backgroundColor: props.backgroundColor }
     : {}
 )
@@ -28,7 +28,7 @@ const onClick = () => sendLog(locale.value, props.tracking)
 
 <template>
   <button :class="buttonClasses" :style="buttonStyle" @click="onClick">
-    <span v-if="props.variant === 'videoPlay'" class="icon">
+    <span v-if="props.category === 'system'" class="icon">
       <AtomsIconsArrowRightFill />
     </span>
     <span class="sr-only">Play</span>
@@ -37,11 +37,12 @@ const onClick = () => sendLog(locale.value, props.tracking)
 
 <style scoped>
 .btn-play {
-  @apply relative flex items-center justify-center rounded-full w-[60px] h-[60px] md:w-[80px] md:h-[80px];
+  @apply relative flex items-center justify-center;
 }
 
 .play-icon {
-  @apply before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.5)] before:rounded-full
+  @apply w-[60px] h-[60px] md:w-[80px] md:h-[80px] rounded-full
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.5)] before:rounded-full
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-[50%] after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out
   hover:after:opacity-10;
 }
@@ -53,13 +54,16 @@ const onClick = () => sendLog(locale.value, props.tracking)
 }
 
 .play-image {
-  @apply overflow-hidden;
+  @apply w-[69px] h-[69px] md:w-[110px] md:h-[110px];
 }
 .play-image::before {
-  @apply content-[''] absolute inset-0 z-0 rounded-full bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_default_m.png)] md:bg-[url(/images/common/btn_play/btn_default.png)];
+  @apply content-[''] absolute inset-0 z-0 bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_default.png)] transition-opacity duration-300 ease-out;
 }
 .play-image::after {
-  @apply content-[''] absolute inset-0 z-0 rounded-full bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_hover_m.png)] md:bg-[url(/images/common/btn_play/btn_hover.png)] opacity-0 transition-opacity duration-300 ease-out;
+  @apply content-[''] absolute inset-0 z-0 bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_hover.png)] opacity-0 transition-opacity duration-300 ease-out;
+}
+.play-image:hover::before {
+  @apply opacity-0;
 }
 .play-image:hover::after {
   @apply opacity-100;

layers/components/blocks/Button/Home.vue

@@ -13,11 +13,11 @@ const analytics = {
 
 <template>
   <AtomsButtonCircle
-    sr-only="home"
     type="internal"
     href="/home"
-    class="btn-home"
     background-color="rgb(0 0 0 / 0.2)"
+    sr-only="home"
+    class="btn-home"
     @click="sendLog(locale, analytics)"
   >
     <AtomsIconsHomeFill />

layers/components/blocks/Button/ScrollTop.vue

@@ -32,9 +32,9 @@ const handleScrollToTop = () => {
   <Transition name="fade">
     <AtomsButtonCircle
       v-show="showBtn"
-      class="btn-top"
-      sr-only="top"
       :background-color="backgroundColor"
+      sr-only="top"
+      class="btn-top"
       @click="handleScrollToTop"
     >
       <AtomsIconsArrowControlTopLine />

layers/components/blocks/Button/SlideArrows.vue

@@ -30,17 +30,17 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
 <template>
   <div class="splide__arrows">
     <AtomsButtonCircle
+      :background-color="getArrowBackgroundColor('prev')"
       sr-only="Previous"
       class="splide-arrow splide__arrow--prev"
-      :background-color="getArrowBackgroundColor('prev')"
       @click="handleArrowClick('prev')"
     >
       <AtomsIconsArrowRightLine color="#ffffff" />
     </AtomsButtonCircle>
     <AtomsButtonCircle
+      :background-color="getArrowBackgroundColor('next')"
       sr-only="Next"
       class="splide-arrow splide__arrow--next"
-      :background-color="getArrowBackgroundColor('next')"
       @click="handleArrowClick('next')"
     >
       <AtomsIconsArrowRightLine color="#ffffff" />

layers/components/blocks/Sns.vue

@@ -46,9 +46,9 @@ const handleCopy = async () => {
     <transition name="fade">
       <AtomsButtonCircle
         v-show="!showSnsList"
-        class="btn-more"
-        sr-only="sns"
         :background-color="snsBackgroundColor"
+        sr-only="sns"
+        class="btn-more"
         @click="handleControlForce(true)"
       >
         <AtomsIconsShareLine class="icon-share" />
@@ -61,8 +61,8 @@ const handleCopy = async () => {
             v-if="item.use_yn === 1 && item.url"
             type="external"
             :href="item.url"
-            :class="['btn-sns', key]"
             :sr-only="key"
+            :class="['btn-sns', key]"
             @click="sendLog(locale, { ...analytics, click_item: key })"
           >
             <img
@@ -79,8 +79,8 @@ const handleCopy = async () => {
         </template>
         <AtomsButtonCircle
           type="action"
-          class="btn-sns link"
           sr-only="copy"
+          class="btn-sns link"
           @click="handleCopy"
         >
           <img

layers/components/layouts/EventNavigation.vue

@@ -70,9 +70,9 @@ onMounted(async () => {
   >
     <div class="navigation-container">
       <AtomsButtonCircle
+        background-color="rgb(0 0 0 / 0.2)"
         sr-only="event navigation control"
         class="btn-control"
-        background-color="rgb(0 0 0 / 0.2)"
         @click="toggleEventNavigation"
       >
         <AtomsIconsArrowRightLine color="#ffffff" />

layers/components/widgets/VideoPlay.vue

@@ -2,7 +2,7 @@
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 interface Props {
-  variant?: 'videoPlay' | 'videoPlayImg'
+  category?: 'system' | 'image'
   resourcesData: PageDataResourceGroup
 }
 
@@ -26,7 +26,7 @@ const handleVideoPlayClick = () => {
 <template>
   <AtomsButtonPlay
     v-motion-stagger
-    :variant="props.variant"
+    :category="props.category"
     :background-color="backgroundColor"
     :tracking="props.resourcesData.tracking"
     @click="handleVideoPlayClick"

layers/templates/GrGallery01/index.vue

@@ -119,7 +119,6 @@ onBeforeUnmount(() => {
             <AtomsButtonPlay
               v-if="playingSlideIndex !== index"
               class="btn-play"
-              variant="videoPlay"
               :background-color="
                 getColorCodeFromData(videoPlayData?.display, 'none')
               "

layers/templates/GrVisual01/index.vue

@@ -20,7 +20,7 @@ const descriptionData = computed(() =>
   getComponentGroup(props.components, 'description')
 )
 const videoPlayData = computed(() =>
-  getComponentGroup(props.components, 'videoPlayImg')
+  getComponentGroup(props.components, 'videoPlay')
 )
 // [TODO] api 수정 후 사용
 // const videoPlayData = computed(() =>
@@ -51,7 +51,7 @@ const buttonListData = computed(() =>
       />
       <WidgetsVideoPlay
         v-if="videoPlayData"
-        variant="videoPlayImg"
+        category="image"
         :resources-data="videoPlayData"
       />
       <WidgetsButtonList

layers/templates/GrVisual02/index.vue

@@ -34,7 +34,7 @@ const descriptionData = computed(() =>
   getComponentGroup(props.components, 'description')
 )
 const videoPlayData = computed(() =>
-  getComponentGroup(props.components, 'videoPlayImg')
+  getComponentGroup(props.components, 'videoPlay')
 )
 // [TODO] api 수정 후 사용
 // const videoPlayData = computed(() =>
@@ -105,7 +105,7 @@ const slideItemSize = {
       />
       <WidgetsVideoPlay
         v-if="videoPlayData"
-        variant="videoPlayImg"
+        category="image"
         :resources-data="videoPlayData"
       />
       <WidgetsSlideCenterHighlight