refactor. 게임 데이터 관련 상태 및 메타 태그 처리 개선

- 게임 데이터 스토어에서 상태 변수 이름 변경 및 추가
- 메타 태그 및 스타일 링크 생성 로직 간소화
- 코드 가독성 향상을 위한 함수 인자 제거

app/app.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
 import { useNuxtApp } from 'nuxt/app'
-import type {
-  GameDataMetaTag,
-  GameDataValue,
-  GameDataKeyColors,
-  GameDataImg,
-} from '#layers/types/api/gameData'
 
 const nuxtApp = useNuxtApp()
 const { locale } = useI18n()
@@ -15,15 +9,25 @@ const scrollStore = useScrollStore()
 
 const { setGameData } = gameDataStore
 const { confirm, alert } = modalStore
-const { gameName, gaCode } = storeToRefs(gameDataStore)
+const {
+  gameName,
+  gaCode,
+  gameTheme,
+  gameMetaTag,
+  faviconJson,
+  defaultLangCode,
+  gameFontJson,
+  keyColorJson,
+} = storeToRefs(gameDataStore)
 const { scrollGnbPosition } = storeToRefs(scrollStore)
 
 // favicon 링크 생성 헬퍼
-const createStyleLinks = (faviconJson: GameDataImg, fontPath: string = '') => {
+const createStyleLinks = () => {
   const links = []
-  const iconUrl = faviconJson[0]
-  const appleTouchIconUrl = faviconJson[1]
-  const pngIconUrl = faviconJson[2]
+  const iconUrl = faviconJson.value[0]
+  const appleTouchIconUrl = faviconJson.value[1]
+  const pngIconUrl = faviconJson.value[2]
+  const fontPath = gameFontJson.value?.font_path
 
   if (iconUrl) {
     links.push({
@@ -56,21 +60,21 @@ const createStyleLinks = (faviconJson: GameDataImg, fontPath: string = '') => {
 }
 
 // 메타 태그 생성 헬퍼
-const createMetaTags = (metaTag: Partial<GameDataMetaTag> = {}) => {
-  if (!metaTag) return []
+const createMetaTags = () => {
+  if (!gameMetaTag.value) return []
   const metaList = [
-    { name: 'description', content: metaTag.page_desc },
-    { property: 'og:title', content: metaTag.og_title },
-    { property: 'og:description', content: metaTag.og_desc },
+    { name: 'description', content: gameMetaTag.value.page_desc },
+    { property: 'og:title', content: gameMetaTag.value.og_title },
+    { property: 'og:description', content: gameMetaTag.value.og_desc },
     {
       property: 'og:image',
-      content: formatPathHost(metaTag.og_image),
+      content: formatPathHost(gameMetaTag.value.og_image),
     },
-    { name: 'twitter:title', content: metaTag.x_title },
-    { name: 'twitter:description', content: metaTag.x_desc },
+    { name: 'twitter:title', content: gameMetaTag.value.x_title },
+    { name: 'twitter:description', content: gameMetaTag.value.x_desc },
     {
       name: 'twitter:image',
-      content: formatPathHost(metaTag.x_image),
+      content: formatPathHost(gameMetaTag.value.x_image),
     },
   ]
 
@@ -81,8 +85,8 @@ const createMetaTags = (metaTag: Partial<GameDataMetaTag> = {}) => {
 }
 
 // CSS 변수 생성 헬퍼
-const createStyleCss = (keyColorJson: GameDataKeyColors) => {
-  const colorVariables = Object.entries(keyColorJson)
+const createStyleCss = () => {
+  const colorVariables = Object.entries(keyColorJson.value)
     .filter(([key, value]) => key && value != null)
     .map(([key, value]) => `--${key}: ${value};`)
     .join('\n      ')
@@ -91,25 +95,20 @@ const createStyleCss = (keyColorJson: GameDataKeyColors) => {
 }
 
 // 게임 헤드 설정
-const setupGameHead = (data: GameDataValue) => {
+const setupGameHead = () => {
+  if (!gameMetaTag.value) return
   try {
-    const metaTag: Partial<GameDataMetaTag> = data?.meta_tag_json ?? {}
-    const designTheme = data.design_theme === 1 ? 'light' : 'dark'
-    const styleLinks = createStyleLinks(
-      data.favicon_json,
-      data?.game_font_json?.font_path
-    )
-    const styleCss = createStyleCss(data.key_color_json)
+    const styleCss = createStyleCss()
 
     useHead({
-      title: metaTag.page_title ?? '',
-      meta: createMetaTags(metaTag),
+      title: gameMetaTag.value?.page_title ?? '',
+      meta: createMetaTags(),
       htmlAttrs: {
-        'data-game': data.game_name ?? '',
-        'data-theme': designTheme,
-        lang: locale.value ?? data.default_lang_code ?? 'ko',
+        'data-game': gameName.value ?? '',
+        'data-theme': gameTheme.value,
+        lang: locale.value ?? defaultLangCode.value ?? 'ko',
       },
-      link: styleLinks,
+      link: createStyleLinks(),
       style: [
         {
           innerHTML: styleCss,
@@ -127,12 +126,12 @@ if (import.meta.server) {
   const gameData = nuxtApp.ssrContext?.event?.context?.gameData
   if (gameData) {
     setGameData(gameData)
-    setupGameHead(gameData)
   }
 }
 
-let rafId: number | null = null
+setupGameHead()
 
+let rafId: number | null = null
 onMounted(() => {
   useEventListener('scroll', scrollStore.updateScrollValue, { passive: true })