feat. 데이터 구조 변경에 따른 수정

layers/components/templates/Background.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  getAssetPathArray,
+  getResourcesData,
   getResponsiveSrc,
   getResponsiveClass,
 } from "#layers/utils/dataUtil";
@@ -8,20 +8,24 @@ import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
 
-const assetType = computed(() => {
-  return props.componentData?.component_type;
+const resourcesData = computed(() => {
+  return getResourcesData({
+    resources: props.componentData?.resources,
+  });
 });
-const resources = computed(() => {
-  return props.componentData?.resources;
+const bgStyles = computed(() => {
+  const result = getResponsiveSrc({
+    pathArray: resourcesData.value?.res_path,
+    type: "bg",
+  });
+  return result && typeof result === "object" && "--pc-bg" in result
+    ? result
+    : {};
 });
-
-const imgPathArray = getAssetPathArray({
-  resources: resources.value,
-  test: "test2",
-});
-const imageSrc = getResponsiveSrc({
-  pathArray: imgPathArray,
-  type: "bg",
+const hasImage = computed(() => {
+  return (
+    resourcesData.value?.group_type === "image" && resourcesData.value?.res_path
+  );
 });
 </script>
 
@@ -29,10 +33,10 @@ const imageSrc = getResponsiveSrc({
   <div class="absolute inset-0 w-full h-full">
     <!-- 이미지 타입-->
     <div
-      v-if="assetType === 'IMG' && imageSrc"
+      v-if="hasImage"
       class="w-full h-full bg-cover bg-center bg-no-repeat"
       :class="getResponsiveClass()"
-      :style="imageSrc"
+      :style="bgStyles"
     ></div>
 
     <!-- 비디오 타입 -->

layers/components/templates/Description.vue

@@ -1,47 +1,42 @@
 <script setup lang="ts">
-import {
-  getDisplayText,
-  getAssetPathArray,
-  getResponsiveSrc,
-} from "#layers/utils/dataUtil";
+import { getResourcesData, getResponsiveSrc } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
 
-const resources = computed(() => {
-  return props.componentData?.resources;
+const resourcesData = computed(() => {
+  return getResourcesData({
+    resources: props.componentData?.resources,
+  });
 });
 
-const displayText = getDisplayText({
-  resources: resources.value,
-});
-const imgPathArray = getAssetPathArray({
-  resources: resources.value,
-});
+const displayText = resourcesData.value?.display?.text;
 const imageSrc = getResponsiveSrc({
-  pathArray: imgPathArray,
-  type: "img",
+  pathArray: resourcesData.value?.res_path,
+  type: "image",
 });
 </script>
 
 <template>
-  <div v-if="imgPathArray">
+  <div v-if="resourcesData">
     <img
-      :src="imageSrc?.mobileSrc"
+      v-if="imageSrc && 'mobileSrc' in imageSrc"
+      :src="imageSrc.mobileSrc"
       :alt="displayText"
       class="w-full sm:hidden"
     />
 
     <!-- PC 이미지 (sm 이상) -->
     <img
-      :src="imageSrc?.pcSrc"
+      v-if="imageSrc && 'pcSrc' in imageSrc"
+      :src="imageSrc.pcSrc"
       :alt="displayText"
       class="w-full hidden sm:block"
     />
   </div>
   <p
     v-else
-    v-html="displayText.replace(/\n/g, '<br/>')"
+    v-html="displayText?.replace(/\n/g, '<br/>') || ''"
     class="text-center"
   ></p>
 </template>

layers/components/templates/MainTitle.vue

@@ -1,48 +1,43 @@
 <script setup lang="ts">
-import {
-  getDisplayText,
-  getAssetPathArray,
-  getResponsiveSrc,
-} from "#layers/utils/dataUtil";
+import { getResourcesData, getResponsiveSrc } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
 
-const resources = computed(() => {
-  return props.componentData?.resources;
+const resourcesData = computed(() => {
+  return getResourcesData({
+    resources: props.componentData?.resources,
+  });
 });
 
-const displayText = getDisplayText({
-  resources: resources.value,
-});
-const imgPathArray = getAssetPathArray({
-  resources: resources.value,
-});
+const displayText = resourcesData.value?.display?.text;
 const imageSrc = getResponsiveSrc({
-  pathArray: imgPathArray,
-  type: "img",
+  pathArray: resourcesData.value?.res_path,
+  type: "image",
 });
 </script>
 
 <template>
   <h2>
-    <template v-if="imgPathArray">
+    <template v-if="resourcesData">
       <img
-        :src="imageSrc?.mobileSrc"
+        v-if="imageSrc && 'mobileSrc' in imageSrc"
+        :src="imageSrc.mobileSrc"
         :alt="displayText"
         class="w-full sm:hidden"
       />
 
       <!-- PC 이미지 (sm 이상) -->
       <img
-        :src="imageSrc?.pcSrc"
+        v-if="imageSrc && 'pcSrc' in imageSrc"
+        :src="imageSrc.pcSrc"
         :alt="displayText"
         class="w-full hidden sm:block"
       />
     </template>
     <span
       v-else
-      v-html="displayText.replace(/\n/g, '<br/>')"
+      v-html="displayText?.replace(/\n/g, '<br/>')"
       class="text-center"
     >
     </span>

layers/components/templates/SubTitle.vue

@@ -1,48 +1,43 @@
 <script setup lang="ts">
-import {
-  getDisplayText,
-  getAssetPathArray,
-  getResponsiveSrc,
-} from "#layers/utils/dataUtil";
+import { getResourcesData, getResponsiveSrc } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
 
-const resources = computed(() => {
-  return props.componentData?.resources;
+const resourcesData = computed(() => {
+  return getResourcesData({
+    resources: props.componentData?.resources,
+  });
 });
 
-const displayText = getDisplayText({
-  resources: resources.value,
-});
-const imgPathArray = getAssetPathArray({
-  resources: resources.value,
-});
+const displayText = resourcesData.value?.display?.text;
 const imageSrc = getResponsiveSrc({
-  pathArray: imgPathArray,
-  type: "img",
+  pathArray: resourcesData.value?.res_path,
+  type: "image",
 });
 </script>
 
 <template>
   <h3>
-    <template v-if="imgPathArray">
+    <template v-if="resourcesData">
       <img
-        :src="imageSrc?.mobileSrc"
+        v-if="imageSrc && 'mobileSrc' in imageSrc"
+        :src="imageSrc.mobileSrc"
         :alt="displayText"
         class="w-full sm:hidden"
       />
 
       <!-- PC 이미지 (sm 이상) -->
       <img
-        :src="imageSrc?.pcSrc"
+        v-if="imageSrc && 'pcSrc' in imageSrc"
+        :src="imageSrc.pcSrc"
         :alt="displayText"
         class="w-full hidden sm:block"
       />
     </template>
     <span
       v-else
-      v-html="displayText.replace(/\n/g, '<br/>')"
+      v-html="displayText?.replace(/\n/g, '<br/>')"
       class="text-center"
     >
     </span>

layers/components/templates/VideoPlay.vue

@@ -1,28 +1,35 @@
 <script setup lang="ts">
-import { getAssetPathArray, getResponsiveSrc } from "#layers/utils/dataUtil";
+import {
+  getResourcesData,
+  getResponsiveSrc,
+  getResponsiveClass,
+} from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
 
-const resources = computed(() => {
-  return props.componentData?.resources;
+const resourcesData = computed(() => {
+  return getResourcesData({
+    resources: props.componentData?.resources,
+  });
 });
-
-const imgPathArray = getAssetPathArray({
-  resources: resources.value,
-  test: "test",
-});
-const imageSrc = getResponsiveSrc({
-  pathArray: imgPathArray,
-  type: "bg",
+const bgStyles = computed(() => {
+  const result = getResponsiveSrc({
+    pathArray: resourcesData.value?.res_path,
+    type: "bg",
+  });
+  return result && typeof result === "object" && "--pc-bg" in result
+    ? result
+    : {};
 });
 </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="imageSrc"
+    :style="bgStyles"
   >
     <span class="sr-only">videoPlay</span>
   </button>