feat. GrVisual03 임시 제작

layers/components/layout/default/Header.vue

@@ -12,7 +12,10 @@ const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
     class="bg-theme-foreground text-theme-foreground-reversal relative z-50"
   >
     <LayoutStoveGnb />
-    <div data-name="header-game" class="px-[40px] h-16 flex items-center">
+    <div
+      data-name="header-game"
+      class="px-[40px] h-16 flex items-center whitespace-nowrap"
+    >
       <!-- 로고 -->
       <div data-name="header-logo" class="mr-[40px]">
         <img

layers/components/templates/Background.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { getResponsiveSrc, getResponsiveClass } from "#layers/utils/dataUtil";
+import {
+  getAssetPathArray,
+  getResponsiveSrc,
+  getResponsiveClass,
+} from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
@@ -11,12 +15,14 @@ const resources = computed(() => {
   return props.componentData?.resources;
 });
 
-const imageSrc = getResponsiveSrc({
+const imgPathArray = getAssetPathArray({
   resources: resources.value,
-  type: "bg",
-
   test: "test2",
 });
+const imageSrc = getResponsiveSrc({
+  pathArray: imgPathArray,
+  type: "bg",
+});
 </script>
 
 <template>

layers/components/templates/Description.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { getResponsiveSrc, getDisplayText } from "#layers/utils/dataUtil";
+import {
+  getDisplayText,
+  getAssetPathArray,
+  getResponsiveSrc,
+} from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
@@ -11,14 +15,17 @@ const resources = computed(() => {
 const displayText = getDisplayText({
   resources: resources.value,
 });
-const imageSrc = getResponsiveSrc({
+const imgPathArray = getAssetPathArray({
   resources: resources.value,
+});
+const imageSrc = getResponsiveSrc({
+  pathArray: imgPathArray,
   type: "img",
 });
 </script>
 
 <template>
-  <div>
+  <div v-if="imgPathArray">
     <img
       :src="imageSrc?.mobileSrc"
       :alt="displayText"
@@ -32,4 +39,9 @@ const imageSrc = getResponsiveSrc({
       class="w-full hidden sm:block"
     />
   </div>
+  <p
+    v-else
+    v-html="displayText.replace(/\n/g, '<br/>')"
+    class="text-center"
+  ></p>
 </template>

layers/components/templates/MainTitle.vue

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

layers/components/templates/SubTitle.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import {
+  getDisplayText,
+  getAssetPathArray,
+  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 displayText = getDisplayText({
+  resources: resources.value,
+});
+const imgPathArray = getAssetPathArray({
+  resources: resources.value,
+});
+const imageSrc = getResponsiveSrc({
+  pathArray: imgPathArray,
+  type: "img",
+});
+</script>
+
+<template>
+  <h3>
+    <template v-if="imgPathArray">
+      <img
+        :src="imageSrc?.mobileSrc"
+        :alt="displayText"
+        class="w-full sm:hidden"
+      />
+
+      <!-- PC 이미지 (sm 이상) -->
+      <img
+        :src="imageSrc?.pcSrc"
+        :alt="displayText"
+        class="w-full hidden sm:block"
+      />
+    </template>
+    <span
+      v-else
+      v-html="displayText.replace(/\n/g, '<br/>')"
+      class="text-center"
+    >
+    </span>
+  </h3>
+</template>

layers/components/templates/VideoPlay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getResponsiveSrc, getResponsiveClass } from "#layers/utils/dataUtil";
+import { getAssetPathArray, getResponsiveSrc } from "#layers/utils/dataUtil";
 import type { PageDataComponent } from "#layers/types/api/pageData";
 
 const props = defineProps<{ componentData: PageDataComponent }>();
@@ -8,12 +8,14 @@ const resources = computed(() => {
   return props.componentData?.resources;
 });
 
-const imageSrc = getResponsiveSrc({
+const imgPathArray = getAssetPathArray({
   resources: resources.value,
-  type: "bg",
-
   test: "test",
 });
+const imageSrc = getResponsiveSrc({
+  pathArray: imgPathArray,
+  type: "bg",
+});
 </script>
 
 <template>