fix. 폴더 구조 변경

layers/components/widgets/Background.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {
+  getResourcesData,
+  getResponsiveClass,
+  getResponsiveSrc,
+} from '#layers/utils/dataUtil'
+import type { PageDataComponent } from '#layers/types/api/pageData'
+
+const props = defineProps<{
+  componentData: PageDataComponent
+  gradientClass?: string
+  groupSets?: boolean
+}>()
+
+const resourcesData = computed(() => {
+  return getResourcesData({
+    resources: props.componentData?.resources,
+    groupSets: props.groupSets,
+  })
+})
+const bgStyles = computed(() => {
+  return getResponsiveSrc(resourcesData.value?.res_path, {
+    resourcesType: 'bg',
+  })
+})
+const videoSrc = computed(() => {
+  return getResponsiveSrc(resourcesData.value?.res_path, {
+    resourcesType: 'video',
+  })
+})
+const posterSrc = computed(() => {
+  return getResponsiveSrc(resourcesData.value?.res_path)
+})
+</script>
+
+<template>
+  <div class="absolute inset-0 w-full h-full">
+    <!-- 이미지 타입-->
+    <div
+      v-if="resourcesData?.group_type === 'image'"
+      class="w-full h-full bg-cover bg-center bg-no-repeat"
+      :class="getResponsiveClass()"
+      :style="bgStyles"
+    />
+
+    <!-- 비디오 타입 -->
+    <template v-else-if="resourcesData?.group_type === 'video'">
+      <!-- 모바일 비디오 (sm 미만) -->
+      <video
+        v-if="videoSrc?.mobileSrc"
+        class="w-full h-full object-cover sm:hidden"
+        :poster="posterSrc?.mobileSrc"
+        autoplay
+        muted
+        loop
+        playsinline
+      >
+        <source :src="videoSrc.mobileSrc" type="video/mp4" />
+        <source :src="videoSrc.mobileSrc" type="video/webm" />
+      </video>
+      <!-- PC 비디오 (sm 이상) -->
+      <video
+        v-if="videoSrc?.pcSrc"
+        class="w-full h-full object-cover hidden sm:block"
+        :poster="posterSrc?.pcSrc"
+        autoplay
+        muted
+        loop
+        playsinline
+      >
+        <source :src="videoSrc.pcSrc" type="video/mp4" />
+        <source :src="videoSrc.pcSrc" type="video/webm" />
+      </video>
+    </template>
+
+    <div class="absolute inset-0" :class="gradientClass" />
+  </div>
+</template>

layers/components/widgets/ButtonList.vue

@@ -0,0 +1,30 @@
+<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">
+      {{ button.btn_info?.txt_btn_name }}
+    </AtomsButton>
+
+    <!-- :style="{
+        backgroundColor: button.btn_info?.color_code_btn,
+        color: button.btn_info?.color_code_txt,
+      }" -->
+  </template>
+</template>

layers/components/widgets/Description.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { getResourcesData, getResponsiveSrc } 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,
+    groupSets: props.groupSets,
+  })
+})
+
+const displayText = resourcesData.value?.display?.txt
+const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
+</script>
+
+<template>
+  <MoleculesVisualContent
+    tag="p"
+    :text="displayText"
+    :image-src="imageSrc as any"
+    image-class="w-full"
+    :style="{
+      color: '#000000',
+    }"
+  />
+</template>

layers/components/widgets/MainTitle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { getResourcesData, getResponsiveSrc } 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,
+    groupSets: props.groupSets,
+  })
+})
+
+const displayText = resourcesData.value?.display?.txt
+const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
+</script>
+
+<template>
+  <MoleculesVisualContent
+    tag="h2"
+    :text="displayText"
+    :image-src="imageSrc as any"
+    image-class="w-full"
+  />
+</template>

layers/components/widgets/SubTitle.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { getResourcesData, getResponsiveSrc } 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,
+    groupSets: props.groupSets,
+  })
+})
+
+const displayText = resourcesData.value?.display?.txt
+const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
+</script>
+
+<template>
+  <MoleculesVisualContent
+    tag="h3"
+    :text="displayText"
+    :image-src="imageSrc as any"
+    image-class="w-full"
+    :style="{
+      color: '#000000',
+    }"
+  />
+</template>

layers/components/widgets/VideoPlay.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  getResourcesData,
+  getResponsiveSrc,
+  getResponsiveClass,
+} from '#layers/utils/dataUtil'
+import type { PageDataComponent } from '#layers/types/api/pageData'
+
+const props = defineProps<{ componentData: PageDataComponent }>()
+
+const resourcesData = computed(() => {
+  return getResourcesData({
+    resources: props.componentData?.resources,
+  })
+})
+const bgStyles = getResponsiveSrc(resourcesData.value?.res_path, {
+  resourcesType: 'bg',
+})
+</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()"
+    :style="bgStyles"
+  >
+    <span class="sr-only">videoPlay</span>
+  </button>
+</template>