refactor. SEO 메타 태그 처리 개선

app/app.vue

@@ -60,7 +60,7 @@ const createStyleLinks = () => {
 }
 
 // 메타 태그 생성 헬퍼
-const createMetaTags = () => {
+const setupSeoMeta = () => {
   if (!gameMetaTag.value) return []
   const metaList = [
     { name: 'description', content: gameMetaTag.value.page_desc },
@@ -102,7 +102,7 @@ const setupGameHead = () => {
 
     useHead({
       title: gameMetaTag.value?.page_title ?? '',
-      meta: createMetaTags(),
+      meta: setupSeoMeta(),
       htmlAttrs: {
         'data-game': gameName.value ?? '',
         'data-theme': gameTheme.value,

layers/components/layouts/Main.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { useTemplateRegistry } from '#layers/composables/useTemplateRegistry'
 import type { PageDataMetaTag } from '#layers/types/api/pageData'
+import { useGameDataStore } from '#layers/stores/useGameDataStore'
 
 const { tm, locale } = useI18n()
 const { getTemplateComponent } = useTemplateRegistry()
 const loadingStore = useLoadingStore()
 const pageDataStore = usePageDataStore()
+const gameDataStore = useGameDataStore()
 const modalStore = useModalStore()
 
 const { isPAssApiLoading, hasApiCallStarted } = storeToRefs(loadingStore)
@@ -19,27 +21,42 @@ const {
   isLoginRequired,
   topBtnColorJson,
 } = storeToRefs(pageDataStore)
+const { gameMetaTag } = storeToRefs(gameDataStore)
+
+// SEO 메타 태그 설정
+const buildSeoMetaPayload = (metaTag: PageDataMetaTag) => ({
+  title: metaTag?.page_title ?? '',
+  description: metaTag?.page_desc ?? '',
+  ogTitle: metaTag?.og_title ?? '',
+  ogDescription: metaTag?.og_desc ?? '',
+  ogImage: formatPathHost(metaTag?.og_image) ?? '',
+  twitterTitle: metaTag?.x_title ?? '',
+  twitterImage: formatPathHost(metaTag?.x_image) ?? '',
+  twitterDescription: metaTag?.x_desc ?? '',
+})
 
 // SEO 메타 태그 설정
 const setupSeoMeta = (metaTag: PageDataMetaTag) => {
-  useSeoMeta({
-    title: metaTag?.page_title ?? '',
-    description: metaTag?.page_desc ?? '',
-    ogTitle: metaTag?.og_title ?? '',
-    ogDescription: metaTag?.og_desc ?? '',
-    ogImage: formatPathHost(metaTag?.og_image) ?? '',
-    twitterTitle: metaTag?.x_title ?? '',
-    twitterImage: formatPathHost(metaTag?.x_image) ?? '',
-    twitterDescription: metaTag?.x_desc ?? '',
-  })
+  useSeoMeta(buildSeoMetaPayload(metaTag))
 }
 
+let lastSeoMetaFingerprint = ''
+
 // 메타 태그 설정 감시
-watchEffect(() => {
-  if (isUseMetaTag.value && pageMetaTag.value) {
-    setupSeoMeta(pageMetaTag.value)
-  }
-})
+watch(
+  [isUseMetaTag, pageMetaTag, gameMetaTag],
+  ([usePageMeta, pageMeta, gameMeta]) => {
+    // 개별 메타 사용 페이지면 pageMeta로, 아니면 게임(서버) 메타로 fallback
+    const metaToUse = usePageMeta && pageMeta ? pageMeta : (gameMeta ?? null)
+    if (!metaToUse) return
+
+    const fingerprint = JSON.stringify(buildSeoMetaPayload(metaToUse))
+    if (fingerprint === lastSeoMetaFingerprint) return
+    lastSeoMetaFingerprint = fingerprint
+    setupSeoMeta(metaToUse)
+  },
+  { immediate: true }
+)
 
 watch(isPAssApiLoading, newVal => {
   if (newVal) {