fix. 컴포넌트 리팩토링, 타입 명시적 적용

app/pages/[d1]/[d2]/[d3].vue

@@ -32,8 +32,6 @@ watchEffect(() => {
 
 <template>
   <NuxtLayout :name="layout">
-    <ClientOnly>
-      <LayoutsMain :templates="pageData?.templates ?? []" />
-    </ClientOnly>
+    <LayoutsMain :templates="pageData?.templates ?? []" />
   </NuxtLayout>
 </template>

app/pages/[d1]/[d2]/index.vue

@@ -32,8 +32,6 @@ watchEffect(() => {
 
 <template>
   <NuxtLayout :name="layout">
-    <ClientOnly>
-      <LayoutsMain :templates="pageData?.templates ?? []" />
-    </ClientOnly>
+    <LayoutsMain :templates="pageData?.templates ?? []" />
   </NuxtLayout>
 </template>

app/pages/[d1]/index.vue

@@ -32,8 +32,6 @@ watchEffect(() => {
 
 <template>
   <NuxtLayout :name="layout">
-    <ClientOnly>
-      <LayoutsMain :templates="pageData?.templates ?? []" />
-    </ClientOnly>
+    <LayoutsMain :templates="pageData?.templates ?? []" />
   </NuxtLayout>
 </template>

app/pages/index.vue

@@ -41,8 +41,6 @@ watchEffect(() => {
 
 <template>
   <NuxtLayout :name="layout">
-    <ClientOnly>
-      <LayoutsMain :templates="pageData?.templates ?? []" />
-    </ClientOnly>
+    <LayoutsMain :templates="pageData?.templates ?? []" />
   </NuxtLayout>
 </template>

layers/components/blocks/VisualContent.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+interface ImageSource {
+  mobileSrc?: string
+  pcSrc?: string
+}
+
 interface Props {
-  tag: string
   text?: string
-  imageSrc?: any
-  imageClass?: string
+  imageSrc?: ImageSource
 }
 
 const props = defineProps<Props>()
@@ -14,23 +17,21 @@ const sanitizedContent = computed(() => {
 </script>
 
 <template>
-  <component :is="tag" v-bind="$attrs">
-    <template v-if="imageSrc && 'mobileSrc' in imageSrc">
-      <!-- 모바일 이미지 (sm 미만) -->
-      <img
-        v-if="imageSrc.mobileSrc"
-        :src="imageSrc.mobileSrc"
-        :alt="text"
-        :class="`${props.imageClass} sm:hidden`"
-      />
-      <!-- PC 이미지 (sm 이상) -->
-      <img
-        v-if="imageSrc.pcSrc"
-        :src="imageSrc.pcSrc"
-        :alt="text"
-        :class="`${props.imageClass} hidden sm:block`"
-      />
-    </template>
-    <span v-else-if="text" v-dompurify-html="sanitizedContent" />
-  </component>
+  <template v-if="imageSrc && 'mobileSrc' in imageSrc">
+    <!-- 모바일 이미지 (sm 미만) -->
+    <img
+      v-if="imageSrc.mobileSrc"
+      :src="imageSrc.mobileSrc"
+      :alt="text"
+      class="sm:hidden w-full h-full object-contain"
+    />
+    <!-- PC 이미지 (sm 이상) -->
+    <img
+      v-if="imageSrc.pcSrc"
+      :src="imageSrc.pcSrc"
+      :alt="text"
+      class="hidden sm:block w-full h-full object-contain"
+    />
+  </template>
+  <span v-else-if="text" v-dompurify-html="sanitizedContent" />
 </template>

layers/components/layouts/Main.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
 import { templateRegistry } from '#layers/registry'
-import type { PageDataTemplate } from '#layers/types/api/pageData'
+import type {
+  PageDataTemplate,
+  TemplateComponent,
+} from '#layers/types/api/pageData'
 
 const props = defineProps<{ templates: PageDataTemplate[] }>()
-const registry = templateRegistry as Record<string, { component: any }>
+
+const registry = templateRegistry as unknown as Record<
+  string,
+  { component: TemplateComponent }
+>
 
 const isShowTemplate = (template: PageDataTemplate) => {
-  return template?.components && Object.keys(template.components).length > 0
+  return Boolean(
+    template?.components && Object.keys(template.components ?? {}).length > 0
+  )
 }
 </script>
 

layers/components/widgets/Description.vue

@@ -19,13 +19,7 @@ const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
 </script>
 
 <template>
-  <BlocksVisualContent
-    tag="p"
-    :text="displayText"
-    :image-src="imageSrc as any"
-    image-class="w-full"
-    :style="{
-      color: '#000000',
-    }"
-  />
+  <p>
+    <BlocksVisualContent :text="displayText" :image-src="imageSrc" />
+  </p>
 </template>

layers/components/widgets/MainTitle.vue

@@ -19,10 +19,7 @@ const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
 </script>
 
 <template>
-  <BlocksVisualContent
-    tag="h2"
-    :text="displayText"
-    :image-src="imageSrc as any"
-    image-class="w-full"
-  />
+  <h2>
+    <BlocksVisualContent :text="displayText" :image-src="imageSrc" />
+  </h2>
 </template>

layers/components/widgets/SubTitle.vue

@@ -19,13 +19,7 @@ const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
 </script>
 
 <template>
-  <BlocksVisualContent
-    tag="h3"
-    :text="displayText"
-    :image-src="imageSrc as any"
-    image-class="w-full"
-    :style="{
-      color: '#000000',
-    }"
-  />
+  <h3>
+    <BlocksVisualContent :text="displayText" :image-src="imageSrc" />
+  </h3>
 </template>

layers/templates/GrVisual03/index.vue

@@ -36,7 +36,7 @@ console.log('components:', props.components)
         :group-sets="true"
         class="text-[20px] font-[500] text-white/70 leading-[30px]"
       />
-      <WidgetsButtonList
+      <WidgetsButton
         v-if="props.components.cardButtonList"
         :component-data="props.components.cardButtonList"
         :group-sets="true"

layers/types/api/gameData.ts

@@ -22,7 +22,7 @@ export interface GameDataValue {
   ga_code: string
   design_theme: number
   lang_codes: string // JSON 문자열로 변경
-  key_color_codes: string // JSON 문자열로 변경
+  key_color_codes: ParsedKeyColorCodes
   use_game_font: boolean
   comm_sns_bg_color_code: string
   comm_multilang_filename: string
@@ -265,9 +265,9 @@ export interface GameDataApiResult {
 
 // JSON 문자열 파싱을 위한 유틸리티 타입들
 export interface ParsedKeyColorCodes {
-  extra: string
+  'alternative-01': string
+  'alternative-02': string
   primary: string
-  secondary: string
   'text-primary': string
   'text-secondary': string
 }

layers/types/api/pageData.ts

@@ -168,3 +168,8 @@ export interface PageDataApiResult {
 
 // 페이지 데이터 별칭 (기존 호환성)
 export type pageData = PageDataValue
+
+// Vue 컴포넌트 타입 정의
+export interface TemplateComponent {
+  components: Record<string, PageDataComponent>
+}