fix. 언어정책 적용

layers/components/blocks/StoveGnb.vue

@@ -1,72 +1,66 @@
 <script setup lang="ts">
-import { useGameDataStore } from '#layers/stores/useGameDataStore'
-
-let cpHeader: any = null
-
-const runtimeConfig = useRuntimeConfig()
-const { locale, availableLocales } = useI18n()
-const gameDataStore = useGameDataStore()
-
-const { gameData } = storeToRefs(gameDataStore)
-
-const stoveInflowPath = runtimeConfig.public.stoveInflowPath
-const stoveGameNo = runtimeConfig.public.stoveGameNo
-const stoveGnbData = gameData.value?.stove_gnb_json
-
-const languageCodes = computed(() => {
-  if (Array.isArray(availableLocales)) {
-    return availableLocales.map(
-      (localeCode: any) => localeCode.code ?? localeCode
-    )
-  }
-  return [locale]
-})
-
-const loadGnb = (locale: string) => {
-  locale = locale.toLowerCase()
-
-  const gnbOption = {
-    wrapper: '#stove-wrap',
-    isResponsive: true,
-    skin: 'gnb-dark-mini',
-    widget: {
-      gameListAndService: false,
-      languageSelect: false,
-      notification: stoveGnbData?.notify_icon_visible ?? true,
-      stoveDownload: false,
-    },
-    global: {
-      userGds: true,
-      defaultSelectedLanguage: locale ?? 'en',
-      languageCoverages: languageCodes.value,
-    },
-    loginMethod: {
-      params: {
-        inflow_path: stoveInflowPath,
-        game_no: stoveGameNo,
-        show_play_button: stoveGnbData?.stove_install_button_visible ?? 'Y',
-      },
-      redirectCurrentPage: true,
-      windowTitle: undefined,
-    },
-  }
-
-  cpHeader = new (window as any).cp.Header(gnbOption)
-  cpHeader.render()
-}
+let mountedInstance: any = null
 
 onMounted(() => {
-  loadGnb(locale.value)
+  const gameDataStore = useGameDataStore()
+
+  const { gameData } = storeToRefs(gameDataStore)
+  const langCodes = gameData.value?.lang_codes
+  const defaultLangCode = gameData.value?.default_lang_code
+  const stoveGnbData = gameData.value?.stove_gnb_json
+  const designTheme = gameData.value?.design_theme
+  const currentDomain =
+    window.location.protocol + '//' + window.location.hostname
+
+  if (typeof window !== 'undefined' && (window as any).StoveGnb) {
+    const stoveGnbOptions = {
+      logArea: currentDomain,
+      useLanguageCodeFromPath: true,
+      serviceTitle: {
+        pc: '',
+        mobile: '',
+      },
+      widget: {
+        notification: stoveGnbData?.notify_icon_visible ?? true,
+        stoveDownload: stoveGnbData?.stove_install_button_visible ?? true,
+        languageSelect: false,
+        themeSelect: false,
+        stoveMenu: {
+          active: false,
+          mobile: true,
+        },
+      },
+      global: {
+        languageCoverages: langCodes,
+        defaultSelectedLanguage: defaultLangCode ?? 'ko',
+      },
+      loginMethod: {
+        redirectCurrentPage: true,
+      },
+      mode: {
+        theme: {
+          support: designTheme === 1 ? ['light'] : ['dark'],
+          default: designTheme === 1 ? 'light' : 'dark',
+        },
+        mini: true,
+        layout: 'wide',
+        fixed: false,
+      },
+    }
+    mountedInstance = (window as any).StoveGnb.mount(
+      '#stove-wrap',
+      stoveGnbOptions
+    )
+  }
 })
 
 onBeforeUnmount(() => {
-  if (cpHeader && typeof cpHeader.destroy === 'function') {
-    cpHeader.destroy()
+  if (mountedInstance && typeof mountedInstance.destroy === 'function') {
+    mountedInstance.destroy()
   }
-  cpHeader = null
+  mountedInstance = null
 })
 </script>
-
 <template>
-  <div id="stove-wrap" class="relative z-[5]" />
+  <div id="stove-wrap" class="relative h-[48px] z-[5]" />
 </template>