audi/app/components/block/GridBanner.vue

<template>
  <div class="grid--banner--type2">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div class="thumb">
          <img :src="item.image" :alt="item.title || '배너 이미지'" loading="lazy" />
        </div>
        <div class="desc--wrapper">
          <h2 v-if="item.title">{{ item.title }}</h2>
          <h3 v-if="item.subtitle">{{ item.subtitle }}</h3>
          <h4 v-if="item.cautionText" v-html="item.cautionText"></h4>
          <NuxtLink
            v-if="item.linkUrl"
            class="more--detail--href mt--20 ft--16"
            :to="item.linkUrl"
            :target="item.linkTarget || '_self'"
          >
            {{ item.linkText || "자세히 보기" }} <i class="ico"></i>
          </NuxtLink>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
  // Props 정의
  const props = defineProps({
    items: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(
          (item) => item.hasOwnProperty("image") && item.hasOwnProperty("title")
        );
      },
    },
  });
</script>