fix. Circle 컴포넌트 bgColor props 추가

layers/components/atoms/Button/Circle.vue

@@ -3,6 +3,7 @@ interface props {
   type?: 'button' | 'link'
   to?: string
   target?: '_self' | '_blank'
+  bgColor?: string
   srOnly?: string
 }
 
@@ -10,6 +11,7 @@ const props = withDefaults(defineProps<props>(), {
   type: 'button',
   to: '',
   target: '_self',
+  bgColor: '',
   srOnly: '',
 })
 
@@ -29,10 +31,23 @@ const componentProps = computed(() => {
       return {}
   }
 })
+
+const buttonStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.bgColor) {
+    style.backgroundColor = props.bgColor
+  }
+  return style
+})
 </script>
 
 <template>
-  <component :is="componentTag" v-bind="componentProps" class="btn-circle">
+  <component
+    :is="componentTag"
+    v-bind="componentProps"
+    class="btn-circle"
+    :style="buttonStyle"
+  >
     <span class="icon">
       <slot />
     </span>

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" />

layers/components/blocks/Sns.vue

@@ -48,7 +48,7 @@ const handleCopy = async () => {
         v-show="!showSnsList"
         class="btn-more"
         sr-only="sns"
-        :style="{ backgroundColor: snsBackgroundColor }"
+        :bg-color="snsBackgroundColor"
         @click="handleControlForce(true)"
       >
         <AtomsIconsShareLine class="icon-share" />

layers/components/layouts/EventNavigation.vue

@@ -72,6 +72,7 @@ onMounted(async () => {
       <AtomsButtonCircle
         sr-only="event navigation control"
         class="btn-control"
+        bg-color="rgb(0 0 0 / 0.2)"
         @click="toggleEventNavigation"
       >
         <AtomsIconsArrowRightLine color="#ffffff" />
@@ -137,7 +138,7 @@ onMounted(async () => {
   @apply block mt-2 text-center text-[#FFF] text-[14px] font-normal leading-[20px] tracking-[-0.42px] opacity-50 transition-opacity duration-300 ease-in-out;
 }
 .btn-control {
-  @apply absolute top-3 right-[-40px] bg-black/20 shadow-[0_1.667px_3.333px_0_rgba(0,0,0,0.06)] backdrop-blur-[12.5px] rotate-180
+  @apply absolute top-3 right-[-40px] shadow-[0_1.667px_3.333px_0_rgba(0,0,0,0.06)] backdrop-blur-[12.5px] rotate-180
   sm:top-5 md:top-6 md:right-[-48px];
 }
 .btn-control:hover :deep(.icon) {

tailwind.config.ts

@@ -1,7 +1,11 @@
 import type { Config } from 'tailwindcss'
 
 export default {
-  content: ['./app/**/*.{js,vue,ts}', './layers/**/*.{js,vue,ts}'],
+  content: [
+    './app/**/*.{js,vue,ts}',
+    './layers/**/*.{js,vue,ts}',
+    './layers/assets/css/**/*.css',
+  ],
   theme: {
     extend: {
       screens: {