feat. header 컴포넌트 반응형 제작

layers/templates/GrVisual02/index.vue

@@ -47,7 +47,6 @@ const { data: resourcesData } = await useLazyAsyncData(
   }
 )
 
-// 배너 리스트 데이터 추출
 const slideData = computed(() => {
   const operateComponents = resourcesData.value?.operate_components
 
@@ -80,7 +79,7 @@ const slideItemSize = {
 </script>
 
 <template>
-  <section class="pt-[140px] pb-[80px] md:pt-[200px] md:pb-[120px]">
+  <section class="relative pt-[140px] pb-[80px] md:pt-[200px] md:pb-[120px]">
     <WidgetsBackground
       v-if="backgroundData"
       :resources-data="backgroundData"
@@ -108,15 +107,16 @@ const slideItemSize = {
         class="mt-[48px] md:mt-[72px]"
       />
       <BlocksSlideCenterHighlight
+        v-if="slideData"
         :slide-item-size="slideItemSize"
-        :slide-item-length="slideData.length"
+        :slide-item-length="slideData?.length"
         :pagination="false"
         class="mt-[36px] md:mt-[60px]"
       >
         <SplideSlide v-for="(item, index) in slideData" :key="index">
           <BlocksCardNews
             :title="item.title"
-            :description="item.option01"
+            :description="formatTimestamp(item.reg_dt, 'YYYY.MM.DD')"
             :img-path="getResolvedHost(item.img_path)"
             :url="item.url"
             :link-target="item.link_target"