fix. main 컴포넌트 변경, 수정된 api 구조에 맞춰 코드 수정

layers/components/atoms/Button.vue

@@ -4,8 +4,8 @@ import type {
   ButtonConfig,
   ButtonProps,
 } from '#layers/types/components/button'
+import type { GameDataKeyCodeCodes } from '#layers/types/api/gameData'
 
-// Props 정의
 const props = withDefaults(defineProps<ButtonProps>(), {
   size: 'medium',
   backgroundColor: 'var(--primary)',
@@ -14,6 +14,15 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   disabled: false,
 })
 
+// 색상 코드 키 목록 key_code_codes
+const PARSED_KEY_CODE_CODES_KEYS: (keyof GameDataKeyCodeCodes)[] = [
+  'primary',
+  'text-primary',
+  'text-secondary',
+  'alternative-01',
+  'alternative-02',
+]
+
 // 버튼 크기별 설정 상수
 const BUTTON_CONFIGS: Record<ButtonSize, ButtonConfig> = {
   large: {
@@ -42,6 +51,12 @@ const BUTTON_CONFIGS: Record<ButtonSize, ButtonConfig> = {
   },
 } as const
 
+// 색상 값을 CSS 변수로 변환하는 헬퍼 함수
+const getColorValue = (color: string) =>
+  PARSED_KEY_CODE_CODES_KEYS.includes(color as keyof GameDataKeyCodeCodes)
+    ? `var(--${color})`
+    : color
+
 const currentConfig = computed(() => BUTTON_CONFIGS[props.size])
 const buttonClasses = computed(() => [
   'group relative inline-flex items-center justify-center font-medium border border-gray-600/30 overflow-hidden',
@@ -49,8 +64,8 @@ const buttonClasses = computed(() => [
   props.disabled ? 'cursor-default' : 'cursor-pointer',
 ])
 const buttonStyles = computed(() => ({
-  backgroundColor: props.backgroundColor,
-  color: props.textColor,
+  backgroundColor: getColorValue(props.backgroundColor),
+  color: getColorValue(props.textColor),
 }))
 const overlayClasses = computed(() => [
   'absolute inset-0 -m-px transition-opacity duration-200',

layers/components/layouts/Main.vue

@@ -1,34 +1,70 @@
 <script setup lang="ts">
 import { templateRegistry } from '#layers/registry'
 import type {
+  PageDataValue,
   PageDataTemplate,
-  TemplateComponent,
+  PageDataTemplateComponent,
+  PageDataMetaTag,
 } from '#layers/types/api/pageData'
 
-const props = defineProps<{ templates: PageDataTemplate[] }>()
+interface Props {
+  pageData: PageDataValue
+}
 
+const props = defineProps<Props>()
+
+// 템플릿 레지스트리 타입 캐스팅
 const registry = templateRegistry as unknown as Record<
   string,
-  { component: TemplateComponent }
+  { component: PageDataTemplateComponent }
 >
 
-const isShowTemplate = (template: PageDataTemplate) => {
+// 개별 메타 태그 표시 여부 확인
+const shouldShowMetaTag = computed(() => props.pageData.meta_tag_type === 2)
+
+// 템플릿 표시 여부 확인
+const isTemplateVisible = (template: PageDataTemplate): boolean => {
   return Boolean(
-    template?.components && Object.keys(template.components ?? {}).length > 0
+    template?.components_ && Object.keys(template.components_).length > 0
   )
 }
+
+// 템플릿 목록 계산
+const visibleTemplates = computed(() =>
+  Object.values(props.pageData.templates).filter(isTemplateVisible)
+)
+
+// SEO 메타 태그 설정
+const setupSeoMeta = (metaTag: PageDataMetaTag) => {
+  useSeoMeta({
+    title: metaTag.page_title ?? '',
+    description: metaTag.page_desc ?? '',
+    ogTitle: metaTag.og_title ?? '',
+    ogDescription: metaTag.og_desc ?? '',
+    ogImage: metaTag.og_image ?? '',
+    twitterTitle: metaTag.x_title ?? '',
+    twitterImage: metaTag.x_image ?? '',
+    twitterDescription: metaTag.x_desc ?? '',
+  })
+}
+
+// 메타 태그 설정 감시
+watchEffect(() => {
+  if (shouldShowMetaTag.value && props.pageData.meta_tag) {
+    setupSeoMeta(props.pageData.meta_tag)
+  }
+})
 </script>
 
 <template>
   <main>
     <template
-      v-for="(template, index) in props.templates"
+      v-for="(template, index) in visibleTemplates"
       :key="template.template_code ?? index"
     >
       <component
         :is="registry[template.template_code]?.component"
-        v-if="isShowTemplate(template)"
-        :components="template.components"
+        :components="template.components_"
       />
     </template>
   </main>