audi/app/components/block/LinkList.vue

<template>
  <div class="inner--link--contents">
    <ul :class="{ 'p--0': pd === false }">
      <li v-for="(item, index) in links" :key="index">
        <NuxtLink :to="item.url" :target="item.target || '_self'" :class="item.class">
          <span v-if="item.frontIcon" v-html="item.frontIcon"></span>
          {{ item.text }}

          <svg
            v-if="item.showIcon !== false"
            width="24"
            height="24"
            aria-label="New Tab"
            xmlns="http://www.w3.org/2000/svg"
            stroke="#fff"
            data-testid="link-icon"
          >
            <title>New Tab</title>
            <path
              d="M17.5 11.594V20.5h-15v-15h7.969m4.031-3h6v6m-9 3 9-9-9 9Z"
              stroke="#fff"
              fill="none"
            ></path>
          </svg>
          <svg
            v-else
            width="24"
            height="24"
            aria-label="Same Tab"
            xmlns="http://www.w3.org/2000/svg"
            stroke="#fff"
            data-testid="link-icon"
          >
            <title>Same Tab</title>
            <path d="m10 16.9 5.5-5.4L10 6.1" stroke="#fff" fill="none"></path>
          </svg>
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script setup>
  // Props 정의
  const props = defineProps({
    links: {
      type: Array,
      required: true,
      default: () => [],
      validator: (value) => {
        // 각 링크 객체가 필수 속성을 가지고 있는지 확인
        return value.every(
          (link) => link.hasOwnProperty("text") && link.hasOwnProperty("url")
        );
      },
    },
    pd: {
      type: Boolean,
      default: true, // 기본값은 패딩 있음
    },
  });

  // 링크 데이터 구조 예시:
  // [
  //   {
  //     text: "Q8 50 TDI quattro exclusive edition 예약금 결제",
  //     url: "/reservation/q8",
  //     target: "_blank", // 선택사항, 기본값: "_self"
  //     showIcon: true, // 선택사항, 기본값: true
  //     class: "custom-class" // 선택사항
  //   },
  //   {
  //     text: "RS 6 Avant 예약금 결제",
  //     url: "/reservation/rs6",
  //     target: "_self",
  //     showIcon: false
  //   }
  // ]
</script>