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>

layers/components/templates/Description.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { getResponsiveResolvedSrc } 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 assetPath = computed(() => {
+  // [TODO] 이미지 그룹 여러개 처리
+  // [TODO] 언어 처리
+  return props.componentData?.resources[0]?.["groups"]?.[0]?.img_path?.ko;
+});
+const imageSrcs = computed(() => {
+  if (!assetPath.value?.path_mo || !assetPath.value?.path_pc) {
+    return { mobileSrc: "", pcSrc: "" };
+  }
+  return getResponsiveResolvedSrc(assetPath.value);
+});
+</script>
+
+<template>
+  <div>
+    <img
+      :src="imageSrcs.mobileSrc"
+      :alt="displayText"
+      class="w-full sm:hidden"
+    />
+
+    <!-- PC 이미지 (sm 이상) -->
+    <img
+      :src="imageSrcs.pcSrc"
+      :alt="displayText"
+      class="w-full hidden sm:block"
+    />
+  </div>
+</template>

layers/components/templates/MainTitle.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { getResponsiveResolvedSrc } 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 assetPath = computed(() => {
+  // [TODO] 이미지 그룹 여러개 처리
+  // [TODO] 언어 처리
+  return props.componentData?.resources[0]?.["groups"]?.[0]?.img_path?.ko;
+});
+const imageSrcs = computed(() => {
+  if (!assetPath.value?.path_mo || !assetPath.value?.path_pc) {
+    return { mobileSrc: "", pcSrc: "" };
+  }
+  return getResponsiveResolvedSrc(assetPath.value);
+});
+</script>
+
+<template>
+  <h2>
+    <img
+      :src="imageSrcs.mobileSrc"
+      :alt="displayText"
+      class="w-full sm:hidden"
+    />
+
+    <!-- PC 이미지 (sm 이상) -->
+    <img
+      :src="imageSrcs.pcSrc"
+      :alt="displayText"
+      class="w-full hidden sm:block"
+    />
+  </h2>
+</template>

layers/components/templates/VideoPlay.vue

@@ -0,0 +1,27 @@
+<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 assetPath = computed(() => {
+  // [TODO] 이미지 그룹 여러개 처리
+  // [TODO] comm 처리
+  return props.componentData?.resources[0]["groups"][0]?.img_path?.comm;
+});
+
+console.log("assetPath:", props.componentData);
+</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')"
+  >
+    <span class="sr-only">videoPlay</span>
+  </button>
+</template>