fix. 컴포넌트 리팩토링

layers/components/blocks/CardNews.vue

@@ -5,6 +5,7 @@ interface Props {
   imgPath: string
   linkTarget?: string
   url?: string
+  alt?: string
   class?: string
 }
 
@@ -18,7 +19,7 @@ const props = defineProps<Props>()
   >
     <img
       :src="props.imgPath"
-      :alt="props.title"
+      :alt="props.title || props.alt"
       class="card-image"
       loading="lazy"
     />

layers/components/blocks/slide/Fade.vue

@@ -15,8 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
-// 페이드 슬라이드 옵션
-const fadeOptions = computed((): ResponsiveOptions => {
+const options = computed((): ResponsiveOptions => {
   return {
     type: 'fade',
     rewind: true,
@@ -40,7 +39,7 @@ const fadeOptions = computed((): ResponsiveOptions => {
 </script>
 
 <template>
-  <Splide :options="fadeOptions" class="h-full">
+  <Splide :options="options" class="h-full">
     <slot />
   </Splide>
 </template>

layers/components/widgets/Background.vue

@@ -10,6 +10,8 @@ const props = withDefaults(defineProps<Props>(), {
   gradient: '',
 })
 
+const breakpoints = useResponsiveBreakpointsReliable()
+
 const resPath = computed(() => {
   return props.resourcesData?.res_path
 })
@@ -26,6 +28,18 @@ const videoSrc = computed(() => {
 const posterSrc = computed(() => {
   return getResponsiveSrc(resPath.value)
 })
+const currentVideoSrc = computed(() => {
+  if (!videoSrc.value) return ''
+  return breakpoints.value.isMobile
+    ? videoSrc.value.mobileSrc
+    : videoSrc.value.pcSrc
+})
+const currentPosterSrc = computed(() => {
+  if (!posterSrc.value) return ''
+  return breakpoints.value.isMobile
+    ? posterSrc.value.mobileSrc
+    : posterSrc.value.pcSrc
+})
 </script>
 
 <template>
@@ -39,34 +53,18 @@ const posterSrc = computed(() => {
     />
 
     <!-- 비디오 타입 -->
-    <template v-else-if="resourcesData?.group_type === 'video'">
-      <!-- 모바일 비디오 (md 미만) -->
-      <video
-        v-if="videoSrc?.mobileSrc"
-        class="w-full h-full object-cover md:hidden"
-        :poster="posterSrc?.mobileSrc"
-        autoplay
-        muted
-        loop
-        playsinline
-      >
-        <source :src="videoSrc.mobileSrc" type="video/mp4" />
-        <source :src="videoSrc.mobileSrc" type="video/webm" />
-      </video>
-      <!-- PC 비디오 (md 이상) -->
-      <video
-        v-if="videoSrc?.pcSrc"
-        class="w-full h-full object-cover hidden md:block"
-        :poster="posterSrc?.pcSrc"
-        autoplay
-        muted
-        loop
-        playsinline
-      >
-        <source :src="videoSrc.pcSrc" type="video/mp4" />
-        <source :src="videoSrc.pcSrc" type="video/webm" />
-      </video>
-    </template>
+    <video
+      v-else-if="resourcesData?.group_type === 'video' && currentVideoSrc"
+      class="w-full h-full object-cover"
+      :poster="currentPosterSrc"
+      autoplay
+      muted
+      loop
+      playsinline
+    >
+      <source :src="currentVideoSrc" type="video/mp4" />
+      <source :src="currentVideoSrc" type="video/webm" />
+    </video>
 
     <!-- 그라디언트 오버레이 (gradient가 true일 때만) -->
     <div

layers/templates/GrGallery01/index.vue

@@ -32,6 +32,7 @@ const videoPlayData = computed(() =>
       <BlocksSlideThumbnail
         :slide-item-list="slideThumbnailData"
         :video-play="videoPlayData"
+        class="mt-[24px] md:mt-[32px]"
       />
     </div>
   </section>

layers/templates/GrVisual01/index.vue

@@ -32,7 +32,7 @@ const buttonListData = computed(() =>
       :resources-data="backgroundData"
       gradient="h-[342px] bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_90%)] md:h-[720px]"
     />
-    <div class="section-content">
+    <div class="section-content gap-4 md:gap-5">
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
@@ -52,7 +52,7 @@ const buttonListData = computed(() =>
         v-if="buttonListData.length > 0"
         :resources-data="buttonListData"
         button-type="market"
-        class="mt-[28px] md:mt-[52px]"
+        class="mt-[22px] md:mt-[52px]"
       />
     </div>
   </section>

layers/templates/GrVisual02/index.vue

@@ -79,7 +79,7 @@ const bannerSize = {
       :resources-data="backgroundData"
       gradient="h-[440px] bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_40%)] md:h-[720px] md:bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_50%)]"
     />
-    <div class="section-content px-0">
+    <div class="section-content px-0 gap-5">
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"

layers/templates/GrVisual03/index.vue

@@ -30,7 +30,7 @@ const props = defineProps<Props>()
           v-if="hasComponentGroup(item, 'background')"
           :resources-data="getComponentGroup(item, 'background')"
         />
-        <div class="section-content">
+        <div class="section-content gap-3 md:gap-5">
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
@@ -49,6 +49,7 @@ const props = defineProps<Props>()
           <WidgetsButtonList
             v-if="hasComponentGroup(item, 'buttonList')"
             :resources-data="getComponentGroupAry(item, 'buttonList')"
+            class="mt-[28px] md:mt-[52px]"
           />
         </div>
       </SplideSlide>

layers/types/api/pageData.ts

@@ -78,7 +78,6 @@ export interface PageDataResourceGroup {
   btn_info?: PageDataResourceGroupBtnInfo
   display?: {
     text: string
-    txt: string
     color_code?: string
     color_name?: string
   }

layers/utils/styleUtil.ts

@@ -1,11 +1,20 @@
 import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
 
 /**
+ * [TODO] 수정 필요
  * 이미지 경로를 완전한 호스트 URL로 변환합니다.
  * @param path 이미지 경로
  * @returns 완전한 이미지 URL
  */
 export const getResolvedHost = (path: string): string => {
+  if (
+    path.startsWith('http://') ||
+    path.startsWith('https://') ||
+    path.startsWith('www.')
+  ) {
+    return path
+  }
+
   const config = useRuntimeConfig()
   //   const isDev = process.env.NODE_ENV === "development";
   //   const rootPath = isDev ? "/images" : `${config.public.staticUrl}`;