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

app/app.vue

@@ -96,7 +96,7 @@ const setupGameHead = (data: GameDataValue) => {
     const designTheme = data.design_theme === 1 ? 'light' : 'dark'
     const styleLinks = createStyleLinks(
       data.favicon_json,
-      data?.game_font_key_json?.font_path
+      data?.game_font_json?.font_path
     )
     const styleCss = createStyleCss(data.key_color_json)
 

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;
 }

layers/components/blocks/Button/Launcher.vue

@@ -16,12 +16,14 @@ interface Props {
   iconComponent?: Component
   iconProps?: Record<string, any>
   disabled?: boolean
+  useGameFont?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'default',
   variant: 'filled',
   disabled: false,
+  useGameFont: false,
 })
 
 const runtimeConfig = useRuntimeConfig()
@@ -31,7 +33,7 @@ const gameDataStore = useGameDataStore()
 const modalStore = useModalStore()
 const { isProcessing, validateLauncher } = useCheckGameStart()
 
-const { gameName, platformType, osType, marketJson } =
+const { gameName, platformType, osType, marketJson, fontFamily } =
   storeToRefs(gameDataStore)
 
 const PLATFORM_ICON_MAP: Record<Platform, string> = {
@@ -63,18 +65,27 @@ const supportedPlatforms = computed(
     ) as PlatformTransformType[]
 )
 const platformIcon = computed(() => PLATFORM_ICON_MAP[props.platform])
-const inlineStyle = computed<CSSProperties>(() => {
+const buttonStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {}
 
   if (props.backgroundColor) {
     style.backgroundColor = props.backgroundColor
   }
-  if (props.textColor) {
-    style.color = props.textColor
-  }
   if (props.type === 'duplication') {
     style.backgroundImage = `url(${formatPathHost(DUP_IMAGE_MAP[props.platform], { imageType: 'common' })})`
   }
+
+  return style
+})
+const textStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {}
+  if (props.textColor) {
+    style.color = props.textColor
+  }
+  if (props.useGameFont && fontFamily.value) {
+    style.fontFamily = fontFamily.value
+  }
+
   return style
 })
 
@@ -144,7 +155,7 @@ const handleClick = () => {
     ]"
     :data-variant="props.variant"
     :data-platform="props.platform"
-    :style="inlineStyle"
+    :style="buttonStyle"
     :disabled="disabled || isProcessing"
     @click="handleClick"
   >
@@ -154,7 +165,7 @@ const handleClick = () => {
         v-if="props.type !== 'duplication'"
         class="icon-platform"
       />
-      <span class="text">
+      <span class="text" :style="textStyle">
         <slot />
       </span>
       <component

layers/components/layouts/Header.vue

@@ -384,6 +384,9 @@ onMounted(() => {
                   :text-color="
                     getColorCodeFromData(start1depthData?.btn_info, 'txt')
                   "
+                  :use-game-font="
+                    start1depthData?.btn_info?.use_game_font === 1
+                  "
                   @click="sendLog(locale, start1depthData.tracking)"
                 >
                   {{ start1depthData?.btn_info?.txt_btn_name }}

layers/components/widgets/ButtonList.vue

@@ -133,6 +133,7 @@ const handleButtonClick = (button: PageDataResourceGroup) => {
           :platform="button.btn_info?.detail?.market_type"
           :background-color="getColorCodeFromData(button.btn_info, 'btn')"
           :text-color="getColorCodeFromData(button.btn_info, 'txt')"
+          :use-game-font="button.btn_info?.use_game_font === 1"
           @click="handleButtonClick(button)"
         >
           {{ button.btn_info?.txt_btn_name }}
@@ -149,6 +150,7 @@ const handleButtonClick = (button: PageDataResourceGroup) => {
         :text-color="getColorCodeFromData(button.btn_info, 'txt')"
         :disabled="button.btn_info?.detail?.btn_type === 'DEACTIVE'"
         :gradient="true"
+        :use-game-font="button.btn_info?.use_game_font === 1"
         @click="handleButtonClick(button)"
       >
         {{ button.btn_info?.txt_btn_name }}

layers/stores/useGameDataStore.ts

@@ -18,9 +18,7 @@ export const useGameDataStore = defineStore('gameData', () => {
     snsJson: null as GameDataValue['sns_json'] | null,
     urlJson: null as GameDataValue['url_json'] | null,
     marketJson: null as GameDataValue['market_json'] | null,
-    fontFamily: null as
-      | GameDataValue['game_font_key_json']['font_family']
-      | null,
+    fontFamily: null as GameDataValue['game_font_json']['font_family'] | null,
     gnb: null as GameDataValue['gnb'] | null,
     eventBanner: null as GameDataValue['event_banner'] | null,
   })
@@ -44,7 +42,7 @@ export const useGameDataStore = defineStore('gameData', () => {
     state.snsJson = data?.sns_json
     state.urlJson = data?.url_json
     state.marketJson = data?.market_json
-    state.fontFamily = data?.game_font_key_json?.font_family
+    state.fontFamily = data?.game_font_json?.font_family
     state.gnb = data?.gnb
     state.eventBanner = data?.event_banner
   }

layers/types/api/gameData.ts

@@ -36,7 +36,7 @@ export interface GameDataValue {
   footer_dev_ci_img_yn: boolean
   footer_dev_ci_img_path: string
   default_lang_code?: string
-  game_font_key_json?: GameDataGameFont
+  game_font_json?: GameDataGameFont
   globals: GameDataGlobal[]
   gnb: GameDataGnb
   intro: GameDataIntro
@@ -119,6 +119,7 @@ export interface GameDataResourceGroupBtnInfo extends ColorObject {
   disabled: boolean
   txt_btn_name: string
   detail: Record<string, any>
+  use_game_font: 0 | 1 // 0: 사용하지 않음, 1: 사용함
 }
 
 export interface GameDataResourceGroup {
@@ -162,6 +163,7 @@ export interface GameDataGnb {
   lang_codes: string // JSON 문자열로 변경
   buttons: GameDataButton[]
   menus: GameDataMenuChildren
+  use_game_font: 0 | 1 // 0: 사용하지 않음, 1: 사용함
 }
 
 // 인트로 타입

layers/types/api/pageData.ts

@@ -87,15 +87,13 @@ export interface PageDataResourceGroupBtnInfo extends ColorObject {
   txt_btn_name: string
   detail: Record<string, any>
   disabled?: boolean
-  use_game_font?: 0 | 1
+  use_game_font: 0 | 1 // 0: 사용하지 않음, 1: 사용함
 }
 
 // 리소스 그룹 타입
 export interface PageDataResourceGroupDisplay extends ColorObject {
   text?: string
-  color_code?: string
-  color_name?: string
-  use_game_font?: 0 | 1
+  use_game_font?: 0 | 1 // 0: 사용하지 않음, 1: 사용함
 }
 
 export interface PageDataResourceGroup {