fix. Circle 컴포넌트 bgColor props 추가

layers/components/blocks/Button/Home.vue

@@ -17,6 +17,7 @@ const analytics = {
     type="link"
     to="/home"
     class="btn-home"
+    bg-color="rgb(0 0 0 / 0.2)"
     @click="sendLog(locale, analytics)"
   >
     <AtomsIconsHomeFill />
@@ -28,7 +29,7 @@ const analytics = {
   @apply mt-[var(--scroll-position,48px)] md:mt-[var(--scroll-position,64px)];
 }
 .btn-home {
-  @apply fixed top-3 right-3 mt-[calc(var(--scroll-position,48px)+48px)] bg-black/20 shadow-[0_1.667px_3.333px_0_rgba(0,0,0,0.06)] backdrop-blur-[12.5px] z-[100]
+  @apply fixed top-3 right-3 mt-[calc(var(--scroll-position,48px)+48px)] shadow-[0_1.667px_3.333px_0_rgba(0,0,0,0.06)] backdrop-blur-[12.5px] z-[100]
   sm:top-5 md:top-6 md:right-8 md:mt-[calc(var(--scroll-position,64px)+64px)];
 }
 .btn-home:hover :deep(.icon) {

layers/components/blocks/Button/Launcher.vue

@@ -8,8 +8,8 @@ import type {
 } from '#layers/types/components/button'
 
 interface Props {
-  platform: Platform
   type?: DownloadButtonType
+  platform: Platform
   variant?: ButtonVariant
   backgroundColor?: string
   textColor?: string

layers/components/blocks/Button/ScrollTop.vue

@@ -18,8 +18,8 @@ const analytics = {
 } as TrackingObject
 
 const showBtn = computed(() => windowY.value > 0)
-const backgroundColor = computed(() =>
-  getColorCodeFromData(props.color, 'none')
+const backgroundColor = computed(
+  () => getColorCodeFromData(props.color, 'none') ?? 'var(--primary)'
 )
 
 const handleScrollToTop = () => {
@@ -34,7 +34,7 @@ const handleScrollToTop = () => {
       v-show="showBtn"
       class="btn-top"
       sr-only="top"
-      :style="{ backgroundColor: backgroundColor }"
+      :bg-color="backgroundColor"
       @click="handleScrollToTop"
     >
       <AtomsIconsArrowControlTopLine />

layers/components/blocks/Button/SlideArrows.vue

@@ -11,9 +11,11 @@ const { locale } = useI18n()
 const { sendLog } = useAnalytics()
 
 const getArrowBgColor = (direction: 'prev' | 'next') => {
-  return getColorCodeFromData(
-    props.arrowsData?.[direction === 'prev' ? 0 : 1]?.display,
-    'none'
+  return (
+    getColorCodeFromData(
+      props.arrowsData?.[direction === 'prev' ? 0 : 1]?.display,
+      'none'
+    ) ?? 'var(--primary)'
   )
 }
 
@@ -30,7 +32,7 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
     <AtomsButtonCircle
       sr-only="Previous"
       class="splide-arrow splide__arrow--prev"
-      :style="{ backgroundColor: getArrowBgColor('prev') }"
+      :bg-color="getArrowBgColor('prev')"
       @click="handleArrowClick('prev')"
     >
       <AtomsIconsArrowRightLine color="#ffffff" />
@@ -38,7 +40,7 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
     <AtomsButtonCircle
       sr-only="Next"
       class="splide-arrow splide__arrow--next"
-      :style="{ backgroundColor: getArrowBgColor('next') }"
+      :bg-color="getArrowBgColor('next')"
       @click="handleArrowClick('next')"
     >
       <AtomsIconsArrowRightLine color="#ffffff" />