fix. page api 수정된 구조에 맞춰 코드 수정

layers/components/layouts/Main.vue

@@ -3,7 +3,7 @@ import { templateRegistry } from '#layers/registry'
 import type {
   PageDataValue,
   PageDataTemplate,
-  PageDataTemplateComponent,
+  PageDataComponent,
   PageDataMetaTag,
 } from '#layers/types/api/pageData'
 
@@ -16,7 +16,7 @@ const props = defineProps<Props>()
 // 템플릿 레지스트리 타입 캐스팅
 const registry = templateRegistry as unknown as Record<
   string,
-  { component: PageDataTemplateComponent }
+  { component: PageDataComponent }
 >
 
 // 개별 메타 태그 표시 여부 확인
@@ -25,7 +25,7 @@ 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
   )
 }
 
@@ -64,7 +64,7 @@ watchEffect(() => {
     >
       <component
         :is="registry[template.template_code]?.component"
-        :components="template.components_"
+        :components="template.components"
       />
     </template>
   </main>

layers/components/widgets/Background.vue

@@ -1,35 +1,27 @@
 <script setup lang="ts">
-import {
-  getResourcesData,
-  getResponsiveClass,
-  getResponsiveSrc,
-} from '#layers/utils/dataUtil'
-import type { PageDataComponent } from '#layers/types/api/pageData'
+import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 const props = defineProps<{
-  componentData: PageDataComponent
+  resourcesData: PageDataResourceGroup
   gradientClass?: string
-  groupSets?: boolean
 }>()
 
-const resourcesData = computed(() => {
-  return getResourcesData({
-    resources: props.componentData?.resources,
-    groupSets: props.groupSets,
-  })
+const resPath = computed(() => {
+  return props.resourcesData?.res_path
 })
 const bgStyles = computed(() => {
-  return getResponsiveSrc(resourcesData.value?.res_path, {
+  return getResponsiveSrc(resPath.value, {
     resourcesType: 'bg',
   })
 })
 const videoSrc = computed(() => {
-  return getResponsiveSrc(resourcesData.value?.res_path, {
+  return getResponsiveSrc(resPath.value, {
     resourcesType: 'video',
   })
 })
 const posterSrc = computed(() => {
-  return getResponsiveSrc(resourcesData.value?.res_path)
+  return getResponsiveSrc(resPath.value)
 })
 </script>
 

layers/components/widgets/Button.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { getResourcesData } from '#layers/utils/dataUtil'
-import type { PageDataComponent } from '#layers/types/api/pageData'
-
-const props = defineProps<{
-  componentData: PageDataComponent
-  groupSets?: boolean
-}>()
-
-const resourcesData = computed(() => {
-  return getResourcesData({
-    resources: props.componentData?.resources,
-    isMultiple: true,
-    groupSets: props.groupSets,
-  })
-})
-</script>
-
-<template>
-  <template v-if="resourcesData">
-    <AtomsButton
-      v-for="button in resourcesData"
-      :key="button.group_label"
-      :background-color="button.btn_info?.color_code_btn"
-      :text-color="button.btn_info?.color_code_txt"
-      :disabled="button.btn_info?.disabled"
-    >
-      {{ button.btn_info?.txt_btn_name }}
-    </AtomsButton>
-  </template>
-</template>

layers/components/widgets/ButtonList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+
+const props = defineProps<{
+  groupsData: PageDataResourceGroup[]
+}>()
+</script>
+
+<template>
+  <template v-if="props.groupsData">
+    <AtomsButton
+      v-for="button in props.groupsData"
+      :key="button.group_code"
+      :background-color="button.btn_info?.color_code_btn"
+      :text-color="button.btn_info?.color_code_txt"
+      :disabled="button.btn_info?.disabled"
+    >
+      {{ button.btn_info?.txt_btn_name }}
+    </AtomsButton>
+  </template>
+</template>

layers/components/widgets/Description.vue

@@ -1,21 +1,13 @@
 <script setup lang="ts">
-import { getResourcesData, getResponsiveSrc } from '#layers/utils/dataUtil'
-import type { PageDataComponent } from '#layers/types/api/pageData'
+import { getResponsiveSrc } from '#layers/utils/dataUtil'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 const props = defineProps<{
-  componentData: PageDataComponent
-  groupSets?: boolean
+  resourcesData: PageDataResourceGroup
 }>()
 
-const resourcesData = computed(() => {
-  return getResourcesData({
-    resources: props.componentData?.resources,
-    groupSets: props.groupSets,
-  })
-})
-
-const displayText = resourcesData.value?.display?.txt
-const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
+const displayText = props.resourcesData?.display?.text
+const imageSrc = getResponsiveSrc(props.resourcesData?.res_path)
 </script>
 
 <template>

layers/components/widgets/MainTitle.vue

@@ -1,21 +1,13 @@
 <script setup lang="ts">
-import { getResourcesData, getResponsiveSrc } from '#layers/utils/dataUtil'
-import type { PageDataComponent } from '#layers/types/api/pageData'
+import { getResponsiveSrc } from '#layers/utils/dataUtil'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 const props = defineProps<{
-  componentData: PageDataComponent
-  groupSets?: boolean
+  resourcesData: PageDataResourceGroup
 }>()
 
-const resourcesData = computed(() => {
-  return getResourcesData({
-    resources: props.componentData?.resources,
-    groupSets: props.groupSets,
-  })
-})
-
-const displayText = resourcesData.value?.display?.txt
-const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
+const displayText = props.resourcesData?.display?.text
+const imageSrc = getResponsiveSrc(props.resourcesData?.res_path)
 </script>
 
 <template>

layers/components/widgets/SubTitle.vue

@@ -1,21 +1,13 @@
 <script setup lang="ts">
-import { getResourcesData, getResponsiveSrc } from '#layers/utils/dataUtil'
-import type { PageDataComponent } from '#layers/types/api/pageData'
+import { getResponsiveSrc } from '#layers/utils/dataUtil'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 const props = defineProps<{
-  componentData: PageDataComponent
-  groupSets?: boolean
+  resourcesData: PageDataResourceGroup
 }>()
 
-const resourcesData = computed(() => {
-  return getResourcesData({
-    resources: props.componentData?.resources,
-    groupSets: props.groupSets,
-  })
-})
-
-const displayText = resourcesData.value?.display?.txt
-const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
+const displayText = props.resourcesData?.display?.text
+const imageSrc = getResponsiveSrc(props.resourcesData?.res_path)
 </script>
 
 <template>

layers/components/widgets/VideoPlay.vue

@@ -1,30 +1,48 @@
 <script setup lang="ts">
-import {
-  getResourcesData,
-  getResponsiveSrc,
-  getResponsiveClass,
-} from '#layers/utils/dataUtil'
-import type { PageDataComponent } from '#layers/types/api/pageData'
+import { getResponsiveSrc, getResponsiveClass } from '#layers/utils/dataUtil'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
-const props = defineProps<{ componentData: PageDataComponent }>()
+const props = defineProps<{ resourcesData: PageDataResourceGroup }>()
 
-const resourcesData = computed(() => {
-  return getResourcesData({
-    resources: props.componentData?.resources,
-  })
-})
-const bgStyles = getResponsiveSrc(resourcesData.value?.res_path, {
+const bgStyles = getResponsiveSrc(props.resourcesData?.res_path, {
   resourcesType: 'bg',
 })
+
+// YouTube 모달 상태 관리
+const isYouTubeModalOpen = ref(false)
+const youtubeVideoId = ref('')
+
+// 비디오 플레이 버튼 클릭 핸들러
+const handleVideoPlayClick = () => {
+  // TODO: 실제 YouTube 비디오 ID를 설정해야 합니다
+  // 예시: 'dQw4w9WgXcQ' (Rick Astley - Never Gonna Give You Up)
+  youtubeVideoId.value = 'UKVsZYHxYTc' // 임시로 설정
+  isYouTubeModalOpen.value = true
+}
+
+// 모달 닫기 핸들러
+const handleCloseModal = () => {
+  isYouTubeModalOpen.value = false
+  youtubeVideoId.value = ''
+}
 </script>
 
 <template>
   <button
     v-if="resourcesData"
     class="bg-cover bg-center bg-no-repeat w-[66px] h-[66px] lg:w-[100px] lg:h-[100px]"
-    :class="getResponsiveClass()"
+    :class="getResponsiveClass"
     :style="bgStyles"
+    @click="handleVideoPlayClick"
   >
     <span class="sr-only">videoPlay</span>
   </button>
+
+  <!-- YouTube 모달 -->
+  <BlocksModalYouTube
+    :is-open="isYouTubeModalOpen"
+    :youtube-id="youtubeVideoId"
+    @close="handleCloseModal"
+    @update:is-open="(value: boolean) => (isYouTubeModalOpen = value)"
+  />
 </template>