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>

layers/utils/dataUtil.ts

@@ -25,12 +25,13 @@ export const getDisplayText = ({
   resources: any;
   groupsDepth?: number;
 }): string => {
-  const group = resources[0]?.groups?.[groupsDepth];
-  return group?.display?.text ?? "";
+  // const group = resources[0]?.groups?.[groupsDepth];
+  const group = resources[groupsDepth];
+  return group?.resource_data?.display?.ko?.text ?? "";
 };
 
 // [TODO] data 타입 정의
-export const getAssetPath = ({
+export const getAssetPathArray = ({
   resources,
   groupsDepth = 0,
 
@@ -58,7 +59,7 @@ export const getAssetPath = ({
     }
   }
 
-  const imgPath = group?.resource_data?.img_path.ko;
+  const imgPath = group?.resource_data?.img_path?.ko;
   return imgPath ?? null;
 };
 
@@ -69,27 +70,21 @@ export const getResponsiveClass = () => {
 
 // 반응형 이미지 리턴하는 함수
 export const getResponsiveSrc = ({
-  resources,
+  pathArray,
   type = "img",
-  groupsDepth = 0,
-
-  test,
 }: {
-  resources: any;
+  pathArray: any;
   type?: ImageType;
-  groupsDepth?: number;
 
   test?: string;
 }): ResponsiveImageResult | ResponsiveImagePath => {
-  const path = getAssetPath({ resources, groupsDepth, test });
-
-  if (!path?.path_mo) {
+  if (!pathArray?.path_mo) {
     return null;
   }
 
   const resolvedImages = {
-    pc: getResolvedSrc(path.path_pc || path.path_mo),
-    mobile: getResolvedSrc(path.path_mo),
+    pc: getResolvedSrc(pathArray.path_pc || pathArray.path_mo),
+    mobile: getResolvedSrc(pathArray.path_mo),
   };
 
   // 타입별 반환 객체 생성