audi/app/components/block/fullSizeBannerText1.vue

<template>
  <section
    class="img--section--full"
    :class="mask"
    :data-type="type"
    :data-text-location="textLocation"
  >
    <div :style="{ height: height + 'px' }">
      <picture>
        <source media="(max-width: 768px)" :srcset="`${imagePath}?width=768`" />
        <source media="(max-width: 1024px)" :srcset="`${imagePath}?width=1024`" />
        <source media="(max-width: 1440px)" :srcset="`${imagePath}?width=1440`" />
        <source media="(min-width: 1440px)" :srcset="`${imagePath}?width=1920`" />
        <img data-object-fit="true" :src="imagePath" :alt="altText" loading="lazy" />
      </picture>
      <div class="alt--text" v-if="altText" :style="'color:' + textColor">
        {{ altText }}
      </div>
      <div class="sub--title" v-if="subTitle" :style="'color:' + textColor">
        {{ subTitle }}
      </div>
      <div class="btn--wrapper" v-if="btnText">
        <NuxtLink :to="btnLink" :target="btnTarget" class="default--round--btn reverse">
          {{ btnText }}
        </NuxtLink>

        <NuxtLink
          v-if="btnText2"
          :to="btnText2"
          :target="btnTarget2"
          class="default--round--btn"
        >
          {{ btnText2 }}
        </NuxtLink>
      </div>
    </div>
  </section>
</template>

<script setup>
  // Props 정의
  const props = defineProps({
    height: {
      type: String,
      default: "100vh",
    },
    imagePath: {
      type: String,
      default: "/img/exclusive/1920X1080_exclusive_edited_v2.jpg",
    },
    mask: {
      type: String,
      default: "",
      validator: (value) => ["", "hidden"].includes(value),
    },
    textLocation: {
      type: String,
      default: "bottom",
      validator: (value) => ["bottom", "top", "left", "right"].includes(value),
    },
    textColor: {
      type: String,
      default: "#fff",
      validator: (value) => ["#fff", "#020203"].includes(value),
    },
    altText: {
      type: String,
      default: "",
    },
    subTitle: {
      type: String,
      default: "",
    },
    btnText: {
      type: String,
      default: "",
    },
    btnLink: {
      type: String,
      default: "",
    },
    btnTarget: {
      type: String,
      default: "",
    },
    btnText2: {
      type: String,
      default: "",
    },
    btnLink2: {
      type: String,
      default: "",
    },
    btnTarget2: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "contain", // 'horz' , 'vert'
      validator: (value) => ["contain", "cover"].includes(value),
    },
  });
</script>