From 0dfbe2188b637c96f46dbe73d52ca606c9b76b89 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Mon, 23 Mar 2026 09:55:48 +0900
Subject: [PATCH] =?UTF-8?q?refactor.=20SEO=20=EB=A9=94=ED=83=80=20?=
 =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=B2=98=EB=A6=AC=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                        |  4 +--
 layers/components/layouts/Main.vue | 47 ++++++++++++++++++++----------
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 83d2c28..953d128 100644
--- a/app/app.vue
+++ b/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,
diff --git a/layers/components/layouts/Main.vue b/layers/components/layouts/Main.vue
index ef3ff35..0bfd3fa 100644
--- a/layers/components/layouts/Main.vue
+++ b/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) {