From 56a1a50312c22a45c3e8041af9d850a6c9b766ef Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Tue, 9 Sep 2025 22:18:10 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20=EC=9E=84=EC=8B=9C=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EB=A7=9E=EC=B6=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                                 |  17 +-
 layers/assets/css/theme.css                 |  49 ++++++
 layers/components/atoms/LocaleLink.vue      |  15 ++
 layers/components/atoms/icons/ArrowDown.vue |  28 +++
 layers/components/atoms/icons/LinkOut.vue   |  32 ++++
 layers/components/atoms/icons/Star.vue      |  29 ++++
 layers/components/layout/StoveGnb.vue       |   2 +-
 layers/components/layout/default/Header.vue | 180 +++++++-------------
 layers/components/molecules/Link.vue        |  27 +++
 layers/components/templates/Background.vue  |  30 ++--
 layers/components/templates/Description.vue |  27 ++-
 layers/components/templates/MainTitle.vue   |  27 ++-
 layers/components/templates/VideoPlay.vue   |  20 +--
 layers/server/api/gameData.get.ts           |  52 ------
 layers/types/api/gameData.ts                | 127 +++++++++++---
 layers/utils/dataUtil.ts                    |  70 +++++++-
 tailwind.config.ts                          |  17 ++
 tsconfig.json                               |   2 +-
 18 files changed, 492 insertions(+), 259 deletions(-)
 create mode 100644 layers/assets/css/theme.css
 create mode 100644 layers/components/atoms/LocaleLink.vue
 create mode 100644 layers/components/atoms/icons/ArrowDown.vue
 create mode 100644 layers/components/atoms/icons/LinkOut.vue
 create mode 100644 layers/components/atoms/icons/Star.vue
 create mode 100644 layers/components/molecules/Link.vue
 delete mode 100644 layers/server/api/gameData.get.ts

diff --git a/app/app.vue b/app/app.vue
index bd7008c..8509d8c 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -8,6 +8,10 @@
   </NuxtLayout>
 </template>
 
+<style>
+@import "#layers/assets/css/theme.css";
+</style>
+
 <script setup lang="ts">
 import { useNuxtApp } from "nuxt/app";
 import { useGameDataStore } from "#layers/stores/useGameDataStore";
@@ -32,9 +36,10 @@ if (gameDataFromServer) {
   setGameData(gameDataFromServer);
 }
 
-const meta = gameDataFromServer?.meta_tag || null;
+const meta = gameDataFromServer?.meta_tag ?? null;
+const theme = gameDataFromServer?.design_theme === 1 ? "dark" : "light";
 
-if (meta) {
+if (gameDataFromServer && meta) {
   metaData.value = meta;
   useSeoMeta({
     title: meta.page_title,
@@ -48,9 +53,11 @@ if (meta) {
     twitterDescription: meta.x_desc,
   });
   useHead({
-    // htmlAttrs: {
-    //   lang: locale.value
-    // },
+    htmlAttrs: {
+      "data-game": gameDataFromServer.game_name || "",
+      "data-theme": theme || "",
+      lang: gameDataFromServer.default_lang_code,
+    },
     //meta: [...(updatedMetaTags.value || [])],
     //link: [...(links.value || [])]
   });
diff --git a/layers/assets/css/theme.css b/layers/assets/css/theme.css
new file mode 100644
index 0000000..6552aa7
--- /dev/null
+++ b/layers/assets/css/theme.css
@@ -0,0 +1,49 @@
+/* 라이트 테마 기본 색상 */
+:root {
+  --foreground: #ffffff;
+  --foreground-10: #ffffff;
+
+  --foreground-reversal: #1f1f1f;
+  --foreground-reversal-10: rgba(0, 0, 0, 0.1);
+  --foreground-reversal-30: #ebebeb; /* gray-80 */
+  --foreground-reversal-40: rgba(0, 0, 0, 0.4);
+  --foreground-reversal-70: #666666; /* gray-700 */
+
+  --primary: #3b82f6;
+  --secondary: #64748b;
+
+  --surface: #f8fafc;
+
+  --textSecondary: #475569;
+  --accent: #f59e0b;
+  --border: #e2e8f0;
+}
+
+/* 다크 테마 색상 */
+[data-theme="dark"] {
+  --foreground: #191919;
+  --foreground-10: #292929;
+
+  --foreground-reversal: #ebebeb;
+  --foreground-reversal-10: rgba(255, 255, 255, 0.1);
+  --foreground-reversal-30: #404040; /* gray-750 */
+  --foreground-reversal-40: rgba(255, 255, 255, 0.4);
+  --foreground-reversal-70: #b2b2b2; /* gray-300 */
+
+  --primary: #60a5fa;
+  --secondary: #94a3b8;
+  --surface: #1e293b;
+
+  --textSecondary: #cbd5e1;
+  --accent: #fbbf24;
+  --border: #475569;
+}
+
+/* Gradient 텍스트 스타일 */
+.text-gradient-pink {
+  background: linear-gradient(270deg, #e872ff 0%, #ff357e 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}
diff --git a/layers/components/atoms/LocaleLink.vue b/layers/components/atoms/LocaleLink.vue
new file mode 100644
index 0000000..a699e12
--- /dev/null
+++ b/layers/components/atoms/LocaleLink.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps({
+  to: {
+    type: String,
+    default: null,
+    required: true,
+  },
+});
+
+const localePath = useLocalePath();
+</script>
+
+<template>
+  <NuxtLink :to="localePath(props.to)"><slot></slot></NuxtLink>
+</template>
diff --git a/layers/components/atoms/icons/ArrowDown.vue b/layers/components/atoms/icons/ArrowDown.vue
new file mode 100644
index 0000000..46efed4
--- /dev/null
+++ b/layers/components/atoms/icons/ArrowDown.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string;
+  color?: string;
+  className?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 12,
+  color: "#7F7F7F",
+  className: "",
+});
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 12 12"
+    :fill="color"
+  >
+    <path
+      d="M5.29499 7.715L2.39999 4.875C2.07499 4.555 2.29999 4 2.75999 4L9.23499 4C9.69499 4 9.91999 4.555 9.59499 4.875L6.69999 7.715C6.30999 8.095 5.68999 8.095 5.29999 7.715H5.29499Z"
+      fill="#7F7F7F"
+    />
+  </svg>
+</template>
diff --git a/layers/components/atoms/icons/LinkOut.vue b/layers/components/atoms/icons/LinkOut.vue
new file mode 100644
index 0000000..947007c
--- /dev/null
+++ b/layers/components/atoms/icons/LinkOut.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string;
+  color?: string;
+  className?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 16,
+  color: "#B2B2B2",
+  className: "",
+});
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 16 16"
+    :fill="color"
+  >
+    <path
+      d="M3.63636 3.33333C3.469 3.33333 3.33333 3.469 3.33333 3.63636L3.33333 12.3636C3.33333 12.531 3.469 12.6667 3.63636 12.6667H12.3636C12.531 12.6667 12.6667 12.531 12.6667 12.3636V9.93939C12.6667 9.5712 12.9651 9.27273 13.3333 9.27273C13.7015 9.27273 14 9.5712 14 9.93939V12.3636C14 13.2674 13.2674 14 12.3636 14H3.63636C2.73262 14 2 13.2674 2 12.3636L2 3.63636C2 2.73263 2.73262 2 3.63636 2L6.06061 2C6.4288 2 6.72727 2.29848 6.72727 2.66667C6.72727 3.03486 6.4288 3.33333 6.06061 3.33333H3.63636Z"
+      fill="#B2B2B2"
+    />
+    <path
+      d="M12.6667 4.27614V6.54545C12.6667 6.91364 12.9651 7.21212 13.3333 7.21212C13.7015 7.21212 14 6.91364 14 6.54545V2.66667C14 2.29848 13.7015 2 13.3333 2L9.45455 2C9.08636 2 8.78788 2.29848 8.78788 2.66667C8.78788 3.03486 9.08636 3.33333 9.45455 3.33333L11.7239 3.33333L7.28616 7.77103C7.02581 8.03138 7.02581 8.45349 7.28616 8.71384C7.54651 8.97419 7.96862 8.97419 8.22897 8.71384L12.6667 4.27614Z"
+      fill="#B2B2B2"
+    />
+  </svg>
+</template>
diff --git a/layers/components/atoms/icons/Star.vue b/layers/components/atoms/icons/Star.vue
new file mode 100644
index 0000000..269d056
--- /dev/null
+++ b/layers/components/atoms/icons/Star.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string;
+  color?: string;
+  className?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 12,
+  color: "#FD3886",
+  className: "",
+});
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 12 12"
+    fill="none"
+    :class="className"
+  >
+    <path
+      d="M6.37364 3.24966C6.22658 2.91678 5.77344 2.91678 5.62638 3.24966L4.95508 4.76916L3.36352 4.96618C3.01484 5.00934 2.87482 5.4593 3.1326 5.7082L4.30928 6.84431L3.99693 8.48558C3.9285 8.84514 4.2951 9.12323 4.60148 8.94417L6.00001 8.12684L7.39853 8.94417C7.70491 9.12323 8.07151 8.84514 8.00308 8.48558L7.69074 6.84431L8.8674 5.70819C9.12518 5.4593 8.98515 5.00934 8.63648 4.96618L7.04492 4.76916L6.37364 3.24966Z"
+      :fill="color"
+    />
+  </svg>
+</template>
diff --git a/layers/components/layout/StoveGnb.vue b/layers/components/layout/StoveGnb.vue
index e45a956..0f26fe6 100644
--- a/layers/components/layout/StoveGnb.vue
+++ b/layers/components/layout/StoveGnb.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="header-stove"></div>
+  <div id="header-stove" class="relative z-[5]"></div>
 </template>
 
 <script setup lang="ts">
diff --git a/layers/components/layout/default/Header.vue b/layers/components/layout/default/Header.vue
index 042cfe4..bec26f5 100644
--- a/layers/components/layout/default/Header.vue
+++ b/layers/components/layout/default/Header.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
+import type { GameDataValue, GameDataGnb } from "#layers/types/api/gameData";
+
 const gameDataStore = useGameDataStore();
-const gameData = computed(() => gameDataStore.gameData);
+
+const gameData = gameDataStore.gameData as GameDataValue;
+const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
 </script>
 
 <template>
-  <header class="bg-black text-white relative z-50">
+  <header
+    class="bg-theme-foreground text-theme-foreground-reversal relative z-50"
+  >
     <LayoutStoveGnb />
-    <div class="px-[40px] h-16 flex items-center">
+    <div data-name="header-game" class="px-[40px] h-16 flex items-center">
       <!-- 로고 -->
-      <div class="mr-[40px]">
+      <div data-name="header-logo" class="mr-[40px]">
         <img
           :src="gameData?.gnb?.bi_path"
           :alt="gameData?.game_name"
@@ -17,126 +23,64 @@ const gameData = computed(() => gameDataStore.gameData);
       </div>
 
       <!-- 메인 네비게이션 -->
-      <nav class="flex items-center space-x-[32px]">
-        <!-- 동적 메뉴 (비활성화) -->
-        <template v-if="false">
+      <nav data-name="header-nav" class="flex items-center space-x-[32px]">
+        <template v-if="gnbList">
           <div
-            v-for="menuList in gameData?.gnb?.menus"
-            :key="menuList.path_code"
+            v-for="(gnbItem, key) in gnbList"
+            :key="key"
+            class="relative group"
           >
-            <a
-              v-if="menuList.depth === 1"
-              :href="menuList.url_path"
-              :target="menuList.link_target"
-              class="hover:text-yellow-400 transition-colors"
+            <!-- Link 컴포넌트 사용 -->
+            <MoleculesLink
+              :to="gnbItem.url_path"
+              :target="gnbItem.link_target"
+              class="relative flex items-center h-[64px]"
             >
-              {{ menuList.menu_name }}
-            </a>
+              {{ gnbItem.menu_name }}
+              <AtomsIconsArrowDown v-if="gnbItem.children" class="ml-1" />
+              <span
+                class="absolute bottom-0 left-0 w-full h-2 border-b-2 border-transparent transition-border-color group-hover:border-theme-foreground-reversal group-active:border-theme-foreground-reversal-10"
+              ></span>
+            </MoleculesLink>
+            <div
+              v-if="gnbItem.children"
+              class="absolute top-full left-[-28px] min-w-[190px] pt-[4px]"
+            >
+              <ul
+                class="bg-theme-foreground-10 rounded-[20px] shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
+              >
+                <li v-for="child in gnbItem.children" :key="child.menu_name">
+                  <!-- Link 컴포넌트 사용 -->
+                  <MoleculesLink
+                    :to="child.url_path"
+                    :target="child.link_target"
+                    class="flex items-center px-4 py-[9px] rounded-[12px] transition-background hover:bg-theme-foreground-reversal-40 active:bg-theme-foreground-reversal-70"
+                  >
+                    {{ child.menu_name }}
+                    <AtomsIconsLinkOut
+                      v-if="child.link_target === '_blank'"
+                      class="ml-1"
+                    />
+                  </MoleculesLink>
+                </li>
+              </ul>
+            </div>
           </div>
         </template>
 
-        <!-- 고객지원 (2단계 드롭다운) -->
-        <div class="relative group">
-          <button
-            class="flex items-center space-x-1 hover:text-yellow-400 transition-colors"
-          >
-            <span>고객지원</span>
-            <svg
-              class="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M19 9l-7 7-7-7"
-              ></path>
-            </svg>
-          </button>
-
-          <!-- 2단계 드롭다운 메뉴 -->
-          <div
-            class="absolute top-full left-0 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"
-          >
-            <div class="py-2">
-              <a
-                href="#"
-                class="block px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors"
-                >다운로드</a
-              >
-              <a
-                href="#"
-                class="block px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors bg-gray-700 text-yellow-400"
-                >쿠폰 등록</a
-              >
-              <a
-                href="#"
-                class="flex items-center justify-between px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors"
-              >
-                <span>고객센터</span>
-                <svg
-                  class="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                  ></path>
-                </svg>
-              </a>
-              <a
-                href="#"
-                class="flex items-center justify-between px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors"
-              >
-                <span>확률 정보</span>
-                <svg
-                  class="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                  ></path>
-                </svg>
-              </a>
-              <a
-                href="#"
-                class="block px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors"
-                >보안 강화 캠페인</a
-              >
-            </div>
-          </div>
-        </div>
-
-        <!-- 기부 -->
-        <a href="#" class="hover:text-yellow-400 transition-colors">기부</a>
-
         <!-- 구분선 -->
-        <div class="w-px h-6 bg-gray-600"></div>
+        <div class="w-px h-4 bg-theme-foreground-reversal-30"></div>
 
         <!-- 이벤트 -->
-        <a
-          href="#"
-          class="flex items-center space-x-1 text-pink-400 hover:text-pink-300 transition-colors"
-        >
-          <span class="text-pink-400">•</span>
+        <a href="#" class="flex items-center space-x-[3px] text-gradient-pink">
+          <AtomsIconsStar />
           <span>이벤트</span>
-          <span class="text-pink-400">•</span>
+          <AtomsIconsStar />
         </a>
       </nav>
 
-      <!-- 게임 시작 버튼 (2단계 드롭다운) -->
-      <div class="relative group ml-auto">
+      <!-- 오른쪽 영역 -->
+      <div data-name="header-right" class="relative group ml-auto">
         <button
           class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
         >
@@ -145,12 +89,12 @@ const gameData = computed(() => gameDataStore.gameData);
 
         <!-- 2단계 드롭다운 메뉴 -->
         <div
-          class="absolute top-full right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"
+          class="absolute top-full right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
         >
-          <div class="py-2">
+          <div class="px-4 py-2">
             <a
               href="#"
-              class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 transition-colors"
+              class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
             >
               <div
                 class="w-8 h-8 bg-orange-500 rounded flex items-center justify-center"
@@ -159,9 +103,11 @@ const gameData = computed(() => gameDataStore.gameData);
               </div>
               <span>PC 버전 다운로드</span>
             </a>
+          </div>
+          <div class="px-4 py-2">
             <a
               href="#"
-              class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 transition-colors"
+              class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
             >
               <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
                 <path
@@ -170,9 +116,11 @@ const gameData = computed(() => gameDataStore.gameData);
               </svg>
               <span>Google Store</span>
             </a>
+          </div>
+          <div class="px-4 py-2">
             <a
               href="#"
-              class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 transition-colors"
+              class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
             >
               <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
                 <path
diff --git a/layers/components/molecules/Link.vue b/layers/components/molecules/Link.vue
new file mode 100644
index 0000000..7362e46
--- /dev/null
+++ b/layers/components/molecules/Link.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  to: string;
+  target?: string;
+  class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  target: "",
+  class: "",
+});
+</script>
+
+<template>
+  <a
+    v-if="props.target === '_blank'"
+    v-bind="$attrs"
+    :href="props.to"
+    :target="props.target"
+    :class="props.class"
+  >
+    <slot />
+  </a>
+  <AtomsLocaleLink v-else v-bind="$attrs" :to="props.to" :class="props.class">
+    <slot />
+  </AtomsLocaleLink>
+</template>
diff --git a/layers/components/templates/Background.vue b/layers/components/templates/Background.vue
index 2b40933..8478423 100644
--- a/layers/components/templates/Background.vue
+++ b/layers/components/templates/Background.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import {
-  getResponsiveResolvedSrc,
-  getResponsiveClass,
-} from "#layers/utils/dataUtil";
+import { getResponsiveSrc, getResponsiveClass } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
@@ -10,10 +7,15 @@ const props = defineProps<{ componentData: PageDataComponent }>();
 const assetType = computed(() => {
   return props.componentData?.component_type;
 });
-const assetPath = computed(() => {
-  // [TODO] 이미지 그룹 여러개 처리
-  // [TODO] comm 처리
-  return props.componentData?.resources[0]["groups"][0]?.img_path?.comm;
+const resources = computed(() => {
+  return props.componentData?.resources;
+});
+
+const imageSrc = getResponsiveSrc({
+  resources: resources.value,
+  type: "bg",
+
+  test: "test2",
 });
 </script>
 
@@ -21,17 +23,17 @@ const assetPath = computed(() => {
   <div class="absolute inset-0 w-full h-full">
     <!-- 이미지 타입-->
     <div
-      v-if="assetType === 'IMG'"
-      class="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat"
+      v-if="assetType === 'IMG' && imageSrc"
+      class="w-full h-full bg-cover bg-center bg-no-repeat"
       :class="getResponsiveClass()"
-      :style="getResponsiveResolvedSrc(assetPath, 'bg')"
+      :style="imageSrc"
     ></div>
 
     <!-- 비디오 타입 -->
-    <video
+    <!-- <video
       v-else-if="assetType === 'VIDEO'"
       class="absolute inset-0 w-full h-full object-cover"
-      :poster="assetPoster"
+      :poster="getResponsiveSrc({ resources: resources, type: 'img' })"
       autoplay
       muted
       loop
@@ -39,7 +41,7 @@ const assetPath = computed(() => {
     >
       <source :src="assetPath" type="video/mp4" />
       <source :src="assetPath" type="video/webm" />
-    </video>
+    </video> -->
     <div
       class="absolute inset-0"
       style="
diff --git a/layers/components/templates/Description.vue b/layers/components/templates/Description.vue
index c4ea637..e9906d5 100644
--- a/layers/components/templates/Description.vue
+++ b/layers/components/templates/Description.vue
@@ -1,38 +1,33 @@
 <script setup lang="ts">
-import { getResponsiveResolvedSrc } from "#layers/utils/dataUtil";
+import { getResponsiveSrc, getDisplayText } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
 
-const displayText = computed(() => {
-  return (
-    props.componentData?.resources[0]?.["groups"]?.[0]?.display?.ko?.text || ""
-  );
+const resources = computed(() => {
+  return props.componentData?.resources;
 });
-const assetPath = computed(() => {
-  // [TODO] 이미지 그룹 여러개 처리
-  // [TODO] 언어 처리
-  return props.componentData?.resources[0]?.["groups"]?.[0]?.img_path?.ko;
+
+const displayText = getDisplayText({
+  resources: resources.value,
 });
-const imageSrcs = computed(() => {
-  if (!assetPath.value?.path_mo || !assetPath.value?.path_pc) {
-    return { mobileSrc: "", pcSrc: "" };
-  }
-  return getResponsiveResolvedSrc(assetPath.value);
+const imageSrc = getResponsiveSrc({
+  resources: resources.value,
+  type: "img",
 });
 </script>
 
 <template>
   <div>
     <img
-      :src="imageSrcs.mobileSrc"
+      :src="imageSrc?.mobileSrc"
       :alt="displayText"
       class="w-full sm:hidden"
     />
 
     <!-- PC 이미지 (sm 이상) -->
     <img
-      :src="imageSrcs.pcSrc"
+      :src="imageSrc?.pcSrc"
       :alt="displayText"
       class="w-full hidden sm:block"
     />
diff --git a/layers/components/templates/MainTitle.vue b/layers/components/templates/MainTitle.vue
index 7d9c425..60ed49c 100644
--- a/layers/components/templates/MainTitle.vue
+++ b/layers/components/templates/MainTitle.vue
@@ -1,38 +1,33 @@
 <script setup lang="ts">
-import { getResponsiveResolvedSrc } from "#layers/utils/dataUtil";
+import { getResponsiveSrc, getDisplayText } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
 
-const displayText = computed(() => {
-  return (
-    props.componentData?.resources[0]?.["groups"]?.[0]?.display?.ko?.text || ""
-  );
+const resources = computed(() => {
+  return props.componentData?.resources;
 });
-const assetPath = computed(() => {
-  // [TODO] 이미지 그룹 여러개 처리
-  // [TODO] 언어 처리
-  return props.componentData?.resources[0]?.["groups"]?.[0]?.img_path?.ko;
+
+const displayText = getDisplayText({
+  resources: resources.value,
 });
-const imageSrcs = computed(() => {
-  if (!assetPath.value?.path_mo || !assetPath.value?.path_pc) {
-    return { mobileSrc: "", pcSrc: "" };
-  }
-  return getResponsiveResolvedSrc(assetPath.value);
+const imageSrc = getResponsiveSrc({
+  resources: resources.value,
+  type: "img",
 });
 </script>
 
 <template>
   <h2>
     <img
-      :src="imageSrcs.mobileSrc"
+      :src="imageSrc?.mobileSrc"
       :alt="displayText"
       class="w-full sm:hidden"
     />
 
     <!-- PC 이미지 (sm 이상) -->
     <img
-      :src="imageSrcs.pcSrc"
+      :src="imageSrc?.pcSrc"
       :alt="displayText"
       class="w-full hidden sm:block"
     />
diff --git a/layers/components/templates/VideoPlay.vue b/layers/components/templates/VideoPlay.vue
index 879e898..80cb732 100644
--- a/layers/components/templates/VideoPlay.vue
+++ b/layers/components/templates/VideoPlay.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import {
-  getResponsiveResolvedSrc,
-  getResponsiveClass,
-} from "#layers/utils/dataUtil";
+import { getResponsiveSrc, getResponsiveClass } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
 
-const assetPath = computed(() => {
-  // [TODO] 이미지 그룹 여러개 처리
-  // [TODO] comm 처리
-  return props.componentData?.resources[0]["groups"][0]?.img_path?.comm;
+const resources = computed(() => {
+  return props.componentData?.resources;
 });
 
-console.log("assetPath:", props.componentData);
+const imageSrc = getResponsiveSrc({
+  resources: resources.value,
+  type: "bg",
+
+  test: "test",
+});
 </script>
 
 <template>
   <button
     class="bg-cover bg-center bg-no-repeat w-[66px] h-[66px] lg:w-[100px] lg:h-[100px]"
     :class="getResponsiveClass()"
-    :style="getResponsiveResolvedSrc(assetPath, 'bg')"
+    :style="imageSrc"
   >
     <span class="sr-only">videoPlay</span>
   </button>
diff --git a/layers/server/api/gameData.get.ts b/layers/server/api/gameData.get.ts
deleted file mode 100644
index 4d8fc1a..0000000
--- a/layers/server/api/gameData.get.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { commonFetch } from "#layers/utils/apiUtil";
-import { getHeader } from "h3";
-import type {
-  GameDataResponse,
-  GameDataValue,
-} from "#layers/types/api/gameData";
-
-export default defineEventHandler(async (event) => {
-  const config = useRuntimeConfig();
-  const baseDomain = (config.public.baseDomain || ".onstove.com") as string;
-  const stoveApiBaseUrl = config.public.stoveApiUrl;
-  const apiUrl = `${stoveApiBaseUrl}/pub-comm/v1.0/template/game`;
-  let gameAlias = "";
-
-  try {
-    // 미들웨어에서 설정한 gameAlias가 있다면 우선 사용
-    if (event.context.gameAlias) {
-      gameAlias = event.context.gameAlias;
-    } else {
-      const host = getHeader(event, "host") || "";
-      const isGameAliasExtractable = host.includes(baseDomain);
-
-      if (isGameAliasExtractable) {
-        const subdomain = host.split(".")[0];
-        if (subdomain && subdomain !== "www") {
-          gameAlias = subdomain;
-        }
-      }
-    }
-  } catch (error) {
-    console.log("gameAlias extraction error: ", error);
-  }
-
-  try {
-    const queryParams: Record<string, string> = {
-      game_alias: gameAlias,
-      lang_code: "ko",
-    };
-
-    const response = (await commonFetch("GET", apiUrl, {
-      query: queryParams,
-    })) as GameDataResponse | null;
-
-    if (response?.code === 0 && "value" in response) {
-      event.context.gameData = response.value;
-      return response.value as GameDataValue;
-    }
-  } catch (error) {
-    console.error(error);
-    return {};
-  }
-});
diff --git a/layers/types/api/gameData.ts b/layers/types/api/gameData.ts
index 9710591..3d72011 100644
--- a/layers/types/api/gameData.ts
+++ b/layers/types/api/gameData.ts
@@ -18,31 +18,30 @@ export interface GameDataValue {
   game_id: string;
   game_code: number;
   s3_folder_name: string;
-  default_lang_code: string;
+  game_name: string;
   ga_code: string;
   favicon_path: string;
   design_theme: number;
-  key_color_codes: string[];
-  lang_codes: string[];
+  lang_codes: string; // JSON 문자열로 변경
+  key_color_codes: string; // JSON 문자열로 변경
   use_game_font: boolean;
   footer_dev_ci_img_yn: boolean;
-  game_font: GameDataFont;
-  global: GameDataGlobal;
+  footer_dev_ci_img_path: string;
+  game_font: string; // JSON 문자열로 변경
+  globals: GameDataGlobal[]; // 배열로 변경
   gnb: GameDataGnb;
-  quick_menus: GameDataQuickMenu[];
-  stove_gnb: GameDataStoveGnb;
-  comm_img: GameDataCommImg;
-  meta_tag: GameDataMetaTag;
-  youtube: GameDataYoutube;
-  sns: GameDataSns;
-  market: GameDataMarket;
-  footer: GameDataFooter;
+  intro: GameDataIntro;
+  inspection: Record<string, any>; // 동적 객체
+  stove_gnb: string; // JSON 문자열로 변경
+  meta_tag: string; // JSON 문자열로 변경
+  sns: string; // JSON 문자열로 변경
+  footer: string; // JSON 문자열로 변경
 }
 
 // Global 설정 타입
 export interface GameDataGlobal {
-  system_font: GameDataFont;
-  lang: GameDataLang;
+  system_font: string; // JSON 문자열로 변경
+  lang: string; // JSON 문자열로 변경
 }
 
 // 폰트 타입
@@ -61,12 +60,18 @@ export interface GameDataLang {
 // GNB 설정 타입
 export interface GameDataGnb {
   game_gnb_ver: string;
-  display_start_dt: number;
+  display_start_dt: string; // ISO 문자열로 변경
   theme_type: string;
   bi_path: string;
-  lang_codes: string[];
-  buttons: any[];
-  menus: GameDataMenu[];
+  lang_codes: string; // JSON 문자열로 변경
+  buttons: GameDataButton[];
+  menus: Record<string, GameDataMenu>; // 동적 객체로 변경
+}
+
+// 버튼 타입
+export interface GameDataButton {
+  depth_type: number;
+  button: string; // JSON 문자열로 변경
 }
 
 // 메뉴 타입
@@ -78,7 +83,16 @@ export interface GameDataMenu {
   click_action_type: number;
   url_path: string;
   link_target: string;
-  tracking: GameDataTracking;
+  children: Record<string, GameDataMenu>; // 중첩 메뉴를 위한 children 속성 추가
+  tracking: string; // JSON 문자열로 변경
+}
+
+// 인트로 타입
+export interface GameDataIntro {
+  seq: number;
+  display_start_dt: string;
+  display_end_dt: string;
+  page_url: string;
 }
 
 // 트래킹 타입
@@ -108,6 +122,15 @@ export interface GameDataStoveGnb {
   stove_install_button_visible: string;
 }
 
+// 파비콘 경로 타입
+export interface GameDataFaviconPath {
+  "16_16": string;
+  "32_32": string;
+  "72_72": string;
+  "180_180": string;
+  "192_192": string;
+}
+
 // 공통 이미지 타입
 export interface GameDataCommImg {
   groups: GameDataCommImgGroup[];
@@ -226,5 +249,69 @@ export interface GameDataApiResult {
   error: string | null;
 }
 
+// JSON 문자열 파싱을 위한 유틸리티 타입들
+export interface ParsedKeyColorCodes {
+  extra: string;
+  primary: string;
+  secondary: string;
+  "text-primary": string;
+  "text-secondary": string;
+}
+
+export interface ParsedGameFont {
+  "font-family": string;
+}
+
+export interface ParsedGlobal {
+  system_font: ParsedGameFont;
+  lang: GameDataLang;
+}
+
+export interface ParsedButton {
+  google_play: {
+    label: Record<string, string>;
+    url: string;
+    tracking: GameDataTracking;
+  };
+  app_store: {
+    label: Record<string, string>;
+    url: string;
+    tracking: GameDataTracking;
+  };
+}
+
+export interface ParsedStoveGnb {
+  skin_type: string;
+  stove_install_button_visible: string;
+}
+
+export interface ParsedSns {
+  kakao: GameDataSnsItem;
+  twitter: GameDataSnsItem;
+  discord: GameDataSnsItem;
+  youtube: GameDataSnsItem;
+  instagram: GameDataSnsItem;
+  facebook: GameDataSnsItem;
+  tiktok: GameDataSnsItem;
+}
+
+export interface ParsedFooter {
+  use_game_rating: boolean;
+  game_rating_info: GameDataGameRatingInfo;
+  use_dev_ci_url: boolean;
+  dev_ci_url: string;
+  fund_display_yn: boolean;
+  fund_display_url: string;
+}
+
+// 파비콘 경로 파싱 타입
+export interface ParsedFaviconPath {
+  "16_16": string;
+  "32_32": string;
+  "72_72": string;
+  "180_180": string;
+  "192_192": string;
+}
+
 // 기존 gameData 타입과의 호환성을 위한 별칭
 export type gameData = GameDataValue;
diff --git a/layers/utils/dataUtil.ts b/layers/utils/dataUtil.ts
index d071ff1..2cbca8f 100644
--- a/layers/utils/dataUtil.ts
+++ b/layers/utils/dataUtil.ts
@@ -17,24 +17,78 @@ export const getResolvedSrc = (path: string): string => {
   return `${rootPath}${path}`;
 };
 
+// [TODO] data 타입 정의
+export const getDisplayText = ({
+  resources,
+  groupsDepth = 0,
+}: {
+  resources: any;
+  groupsDepth?: number;
+}): string => {
+  const group = resources[0]?.groups?.[groupsDepth];
+  return group?.display?.text ?? "";
+};
+
+// [TODO] data 타입 정의
+export const getAssetPath = ({
+  resources,
+  groupsDepth = 0,
+
+  test,
+}: {
+  resources: any;
+  groupsDepth?: number;
+
+  test?: string;
+}): ResponsiveImagePath | null => {
+  // const group = resources[0]?.groups?.[groupsDepth].resource_data;
+  // const imgPath = group?.resource_data?.img_path;
+
+  const group = resources[groupsDepth];
+
+  if (test) {
+    if (test === "test") {
+      const tests = {
+        path_mo: group?.resource_data?.img_path.comm,
+      };
+      return tests ?? null;
+    }
+    if (test === "test2") {
+      return group?.resource_data?.img_path.comm ?? null;
+    }
+  }
+
+  const imgPath = group?.resource_data?.img_path.ko;
+  return imgPath ?? null;
+};
+
 // 반응형 클래스 리턴하는 함수
 export const getResponsiveClass = () => {
   return ["bg-[image:var(--mobile-bg)]", "sm:bg-[image:var(--pc-bg)]"];
 };
 
 // 반응형 이미지 리턴하는 함수
-export const getResponsiveResolvedSrc = (
-  path: ResponsiveImagePath,
-  type: ImageType = "img"
-): ResponsiveImageResult => {
-  // 필수 경로가 없으면 null 반환
-  if (!path?.path_mo || !path?.path_pc) {
+export const getResponsiveSrc = ({
+  resources,
+  type = "img",
+  groupsDepth = 0,
+
+  test,
+}: {
+  resources: any;
+  type?: ImageType;
+  groupsDepth?: number;
+
+  test?: string;
+}): ResponsiveImageResult | ResponsiveImagePath => {
+  const path = getAssetPath({ resources, groupsDepth, test });
+
+  if (!path?.path_mo) {
     return null;
   }
 
-  // 이미지 경로 해석
   const resolvedImages = {
-    pc: getResolvedSrc(path.path_pc),
+    pc: getResolvedSrc(path.path_pc || path.path_mo),
     mobile: getResolvedSrc(path.path_mo),
   };
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1591ea4..b27994b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -11,6 +11,23 @@ export default {
         lg: "1440px", // Large PC: 1440px+
       },
       spacing: {},
+      colors: {
+        "theme-foreground": "var(--foreground)",
+        "theme-foreground-10": "var(--foreground-10)",
+
+        "theme-foreground-reversal": "var(--foreground-reversal)",
+        "theme-foreground-reversal-10": "var(--foreground-reversal-10)",
+        "theme-foreground-reversal-30": "var(--foreground-reversal-30)",
+        "theme-foreground-reversal-40": "var(--foreground-reversal-40)",
+        "theme-foreground-reversal-70": "var(--foreground-reversal-70)",
+
+        // "theme-primary": "var(--light-primary)",
+        // "theme-secondary": "var(--light-secondary)",
+        // "theme-surface": "var(--light-surface)",
+        // "theme-text-secondary": "var(--light-textSecondary)",
+        // "theme-accent": "var(--light-accent)",
+        // "theme-border": "var(--light-border)",
+      },
     },
   },
 } satisfies Config;
diff --git a/tsconfig.json b/tsconfig.json
index b0de953..767efac 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "types": ["nuxt", "node"],
+    "types": ["nuxt", "node", "@nuxtjs/i18n"],
     "moduleResolution": "bundler",
     "paths": {
       "@/*": ["."],