feat. [SWV-807] 컴포넌트(BTN, TXT) 단위로 폰트 설정 기능 추가

layers/components/atoms/Button/index.vue

@@ -11,6 +11,7 @@ interface props {
   textColor?: string
   disabled?: boolean
   gradient?: boolean
+  useGameFont?: boolean
 }
 
 const props = withDefaults(defineProps<props>(), {
@@ -21,8 +22,12 @@ const props = withDefaults(defineProps<props>(), {
   textColor: 'var(--alternative-02)',
   disabled: false,
   gradient: false,
+  useGameFont: false,
 })
 
+const gameDataStore = useGameDataStore()
+const { fontFamily } = storeToRefs(gameDataStore)
+
 const componentTag = computed((): string => {
   switch (props.type) {
     case 'external':
@@ -36,12 +41,6 @@ const componentTag = computed((): string => {
       return 'button'
   }
 })
-const backgroundColor = computed(() => {
-  if (props.backgroundColor) {
-    return props.backgroundColor
-  }
-  return props.variant === 'filled' ? 'var(--primary)' : 'white'
-})
 const componentProps = computed(() => {
   if (props.type === 'external' || props.type === 'link') {
     return {
@@ -72,6 +71,30 @@ const componentProps = computed(() => {
 
   return {}
 })
+const textColor = computed(() => {
+  return props.textColor ? props.textColor : 'var(--text-secondary)'
+})
+const buttonStyle = computed(() => {
+  const backgroundColor =
+    props.variant === 'filled' ? 'var(--primary)' : 'white'
+  const style: Record<string, string> = {
+    backgroundColor: props.backgroundColor ?? backgroundColor,
+    '--disabled-color': textColor.value,
+  }
+
+  return style
+})
+const textStyle = computed(() => {
+  const style: Record<string, string> = {
+    color: textColor.value,
+  }
+
+  if (props.useGameFont && fontFamily.value) {
+    style.fontFamily = fontFamily.value
+  }
+
+  return style
+})
 </script>
 
 <template>
@@ -80,15 +103,11 @@ const componentProps = computed(() => {
     v-bind="{ ...componentProps }"
     :class="['btn-base', props.size, { disabled: props.disabled }]"
     :data-variant="props.variant"
-    :style="{
-      backgroundColor: backgroundColor,
-      color: props.textColor ? props.textColor : 'var(--text-secondary)',
-      '--text-color': props.textColor,
-    }"
+    :style="buttonStyle"
     :disabled="props.disabled"
   >
     <i v-if="props.gradient" class="btn-gradient"></i>
-    <span class="btn-content">
+    <span class="btn-content" :style="textStyle">
       <slot />
       <AtomsIconsLongArrowRightLine
         v-if="props.type === 'internal'"
@@ -114,11 +133,6 @@ const componentProps = computed(() => {
   @apply overflow-hidden relative inline-flex items-center justify-center font-medium cursor-pointer
     before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-white/10;
 }
-.btn-base.disabled {
-  @apply cursor-default pointer-events-none
-  after:bg-[var(--text-color)] after:opacity-20 after:z-[2];
-}
-
 .btn-base[data-variant='filled'] {
   @apply after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
   hover:after:opacity-20;
@@ -127,6 +141,14 @@ const componentProps = computed(() => {
   @apply before:border-[rgba(0,0,0,0.1)]
   hover:before:border-[#999];
 }
+.btn-base.disabled {
+  @apply cursor-default pointer-events-none
+  after:opacity-20 after:z-[2];
+}
+.btn-base.disabled::after {
+  background-color: var(--disabled-color) !important;
+}
+
 .icon {
   @apply transition-transform duration-300 ease-spring;
 }