feat. 환경 세팅

layers/components/templates/Background.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {
+  getResponsiveResolvedSrc,
+  getResponsiveClass,
+} from "#layers/utils/dataUtil";
+import type { PageDataComponent } from "#layers/types/api/pageData";
+
+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;
+});
+</script>
+
+<template>
+  <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"
+      :class="getResponsiveClass()"
+      :style="getResponsiveResolvedSrc(assetPath, 'bg')"
+    ></div>
+
+    <!-- 비디오 타입 -->
+    <video
+      v-else-if="assetType === 'VIDEO'"
+      class="absolute inset-0 w-full h-full object-cover"
+      :poster="assetPoster"
+      autoplay
+      muted
+      loop
+      playsinline
+    >
+      <source :src="assetPath" type="video/mp4" />
+      <source :src="assetPath" type="video/webm" />
+    </video>
+  </div>
+</template>