feat. 환경 세팅

app/app.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { GameDataValue } from "#layers/types/api/gameData";
+
+const { locale } = useI18n();
+const gameCode = useGetGameAlias();
+
+const gameDataStore = useGameDataStore();
+const { data: gameData, error } = await useFetch<GameDataValue>(
+  "/api/gameData"
+);
+
+// Store에 데이터 저장
+watchEffect(() => {
+  if (gameData.value) {
+    gameDataStore.setGameData(gameData.value);
+  }
+});
+
+// 메타 태그 생성 헬퍼 함수
+const createMetaTags = (data: GameDataValue) => {
+  const metaTag = data.meta_tag;
+
+  return [
+    {
+      name: "description",
+      content: metaTag?.page_desc || "",
+    },
+    {
+      property: "og:title",
+      content: metaTag?.og_title || "",
+    },
+    {
+      property: "og:description",
+      content: metaTag?.og_desc || "",
+    },
+    {
+      property: "og:image",
+      content: metaTag?.og_image || "",
+    },
+    {
+      property: "twitter:title",
+      content: metaTag?.x_title || "",
+    },
+    {
+      property: "twitter:image",
+      content: metaTag?.x_image || "",
+    },
+    {
+      property: "twitter:description",
+      content: metaTag?.x_desc || "",
+    },
+  ];
+};
+
+const createFaviconLinks = () => {
+  return [
+    {
+      rel: "icon",
+      type: "image/png",
+      sizes: "32x32",
+      href: gameData.value?.favicon_path || "",
+    },
+  ];
+};
+
+watchEffect(() => {
+  if (gameData.value && !error.value) {
+    useHead(() => ({
+      htmlAttrs: {
+        "data-game-code": gameCode || "",
+        lang: locale.value,
+      },
+      title: gameData.value?.meta_tag?.page_title || "",
+      meta: createMetaTags(gameData.value as GameDataValue),
+      link: createFaviconLinks(),
+    }));
+  }
+});
+</script>
+
+<template>
+  <NuxtLayout>
+    <h1 class="sr-only">{{ gameDataStore.gameData?.game_name }}</h1>
+    <NuxtPage />
+
+    <MoleculesLoadingFull />
+    <MoleculesLoadingLocal />
+  </NuxtLayout>
+</template>