fix. 임시 데이터 맞춰 수정

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="

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"
     />

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"
     />

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>