audi/app/components/block/ProductCard.vue

<template>
  <div class="product--card--wrapper">
    <div class="product--card" :data-layout="layout" :data-image-position="imagePosition">
      <div class="product--card--thumb">
        <div class="product--card--thumb--inner">
          <!-- <img :src="image" :alt="imageAlt || title" loading="lazy" /> -->
          <img :src="image" :alt="title || title" loading="lazy" />
        </div>
      </div>
      <div class="product--card--content">
        <h2 v-if="title" class="product--card--title">{{ title }}</h2>
        <h4 v-if="smallTitle" class="product--card--smalltitle">{{ smallTitle }}</h4>
        <h3 v-if="subtitle" class="product--card--subtitle" v-html="subtitle"></h3>
        <div v-if="description" class="product--card--description">
          <p>{{ description }}</p>
        </div>
        <div v-if="buttonText && buttonUrl" class="product--card--actions">
          <NuxtLink
            :to="buttonUrl"
            :target="buttonTarget"
            class="default--round--btn reverse"
          >
            {{ buttonText }}
          </NuxtLink>

          <NuxtLink
            v-if="buttonText2"
            :to="buttonUrl2"
            :target="buttonTarget2"
            class="default--round--btn"
          >
            {{ buttonText }}
          </NuxtLink>
        </div>

        <div v-if="smallDescription" class="product--card--small--description">
          <p v-html="smallDescription"></p>
        </div>
        <div v-if="$slots.actions" class="product--card--actions">
          <slot name="actions"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  // Props 정의
  const props = defineProps({
    // 이미지 관련
    image: {
      type: String,
      required: true,
    },
    imageAlt: {
      type: String,
      default: "",
    },

    // 텍스트 관련
    title: {
      type: String,
      required: true,
    },
    smallTitle: {
      type: String,
    },
    subtitle: {
      type: String,
      default: "",
    },
    description: {
      type: String,
      default: "",
    },
    smallDescription: {
      type: String,
      default: "",
    },
    // 버튼 관련
    buttonText: {
      type: String,
      default: "",
    },
    buttonUrl: {
      type: String,
      default: "/",
    },
    buttonTarget: {
      type: String,
      default: "_self",
      validator: (value) => ["_self", "_blank"].includes(value),
    },

    // 버튼 관련
    buttonText2: {
      type: String,
      default: "",
    },
    buttonUrl2: {
      type: String,
      default: "/",
    },
    buttonTarget2: {
      type: String,
      default: "_self",
      validator: (value) => ["_self", "_blank"].includes(value),
    },

    // 레이아웃 옵션
    layout: {
      type: String,
      default: "horizontal", // 'horizontal', 'vertical'
      validator: (value) => ["horizontal", "vertical"].includes(value),
    },

    // 이미지 위치 옵션
    imagePosition: {
      type: String,
      default: "left", // 'left', 'right'
      validator: (value) => ["left", "right"].includes(value),
    },
  });
</script>