fix. 임시 페이지 제작

layers/components/templates/Background.vue

@@ -1,31 +1,35 @@
 <script setup lang="ts">
 import {
   getResourcesData,
-  getResponsiveSrc,
   getResponsiveClass,
+  getResponsiveSrc,
 } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
-const props = defineProps<{ componentData: PageDataComponent }>();
+const props = defineProps<{
+  componentData: PageDataComponent;
+  gradientClass?: string;
+  groupSets?: boolean;
+}>();
 
 const resourcesData = computed(() => {
   return getResourcesData({
     resources: props.componentData?.resources,
+    groupSets: props.groupSets,
   });
 });
 const bgStyles = computed(() => {
-  const result = getResponsiveSrc({
-    pathArray: resourcesData.value?.res_path,
-    type: "bg",
+  return getResponsiveSrc(resourcesData.value?.res_path, {
+    resourcesType: "bg",
   });
-  return result && typeof result === "object" && "--pc-bg" in result
-    ? result
-    : {};
 });
-const hasImage = computed(() => {
-  return (
-    resourcesData.value?.group_type === "image" && resourcesData.value?.res_path
-  );
+const videoSrc = computed(() => {
+  return getResponsiveSrc(resourcesData.value?.res_path, {
+    resourcesType: "video",
+  });
+});
+const posterSrc = computed(() => {
+  return getResponsiveSrc(resourcesData.value?.res_path);
 });
 </script>
 
@@ -33,34 +37,42 @@ const hasImage = computed(() => {
   <div class="absolute inset-0 w-full h-full">
     <!-- 이미지 타입-->
     <div
-      v-if="hasImage"
+      v-if="resourcesData?.group_type === 'image'"
       class="w-full h-full bg-cover bg-center bg-no-repeat"
       :class="getResponsiveClass()"
       :style="bgStyles"
     ></div>
 
     <!-- 비디오 타입 -->
-    <!-- <video
-      v-else-if="assetType === 'VIDEO'"
-      class="absolute inset-0 w-full h-full object-cover"
-      :poster="getResponsiveSrc({ resources: resources, type: 'img' })"
-      autoplay
-      muted
-      loop
-      playsinline
-    >
-      <source :src="assetPath" type="video/mp4" />
-      <source :src="assetPath" type="video/webm" />
-    </video> -->
-    <div
-      class="absolute inset-0"
-      style="
-        background: linear-gradient(
-          180deg,
-          rgba(16, 13, 15, 0) 0%,
-          #100d0f 95%
-        );
-      "
-    ></div>
+    <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>
   </div>
 </template>

layers/components/templates/ButtonList.vue

@@ -0,0 +1,36 @@
+<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,
+  });
+});
+
+console.log("ButtonList resourcesData:", resourcesData.value);
+</script>
+
+<template>
+  <template
+    v-if="resourcesData"
+    v-for="button in resourcesData"
+    :key="button.group_label"
+  >
+    <AtomsButton>
+      {{ 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/templates/Description.vue

@@ -2,19 +2,20 @@
 import { getResourcesData, getResponsiveSrc } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
-const props = defineProps<{ componentData: PageDataComponent }>();
+const props = defineProps<{
+  componentData: PageDataComponent;
+  groupSets?: boolean;
+}>();
 
 const resourcesData = computed(() => {
   return getResourcesData({
     resources: props.componentData?.resources,
+    groupSets: props.groupSets,
   });
 });
 
-const displayText = resourcesData.value?.display?.text;
-const imageSrc = getResponsiveSrc({
-  pathArray: resourcesData.value?.res_path,
-  type: "image",
-});
+const displayText = resourcesData.value?.display?.txt;
+const imageSrc = getResponsiveSrc(resourcesData.value?.res_path);
 </script>
 
 <template>
@@ -23,5 +24,8 @@ const imageSrc = getResponsiveSrc({
     :text="displayText"
     :image-src="imageSrc as any"
     image-class="w-full"
+    :style="{
+      color: '#000000',
+    }"
   />
 </template>

layers/components/templates/MainTitle.vue

@@ -2,19 +2,20 @@
 import { getResourcesData, getResponsiveSrc } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
-const props = defineProps<{ componentData: PageDataComponent }>();
+const props = defineProps<{
+  componentData: PageDataComponent;
+  groupSets?: boolean;
+}>();
 
 const resourcesData = computed(() => {
   return getResourcesData({
     resources: props.componentData?.resources,
+    groupSets: props.groupSets,
   });
 });
 
-const displayText = resourcesData.value?.display?.text;
-const imageSrc = getResponsiveSrc({
-  pathArray: resourcesData.value?.res_path,
-  type: "image",
-});
+const displayText = resourcesData.value?.display?.txt;
+const imageSrc = getResponsiveSrc(resourcesData.value?.res_path);
 </script>
 
 <template>

layers/components/templates/SubTitle.vue

@@ -2,19 +2,20 @@
 import { getResourcesData, getResponsiveSrc } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
-const props = defineProps<{ componentData: PageDataComponent }>();
+const props = defineProps<{
+  componentData: PageDataComponent;
+  groupSets?: boolean;
+}>();
 
 const resourcesData = computed(() => {
   return getResourcesData({
     resources: props.componentData?.resources,
+    groupSets: props.groupSets,
   });
 });
 
-const displayText = resourcesData.value?.display?.text;
-const imageSrc = getResponsiveSrc({
-  pathArray: resourcesData.value?.res_path,
-  type: "image",
-});
+const displayText = resourcesData.value?.display?.txt;
+const imageSrc = getResponsiveSrc(resourcesData.value?.res_path);
 </script>
 
 <template>
@@ -23,5 +24,8 @@ const imageSrc = getResponsiveSrc({
     :text="displayText"
     :image-src="imageSrc as any"
     image-class="w-full"
+    :style="{
+      color: '#000000',
+    }"
   />
 </template>

layers/components/templates/VideoPlay.vue

@@ -13,14 +13,8 @@ const resourcesData = computed(() => {
     resources: 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 bgStyles = getResponsiveSrc(resourcesData.value?.res_path, {
+  resourcesType: "bg",
 });
 </script>