audi/app/components/block/TitleVisual.vue

<template>
  <section
    class="title--visual"
    :data-type="type"
    :data-theme="theme"
    ref="titleVisualRef"
  >
    <div class="title--visual--wrapper">
      <div
        class="title--visual--content"
        :data-align="textAlign"
        :data-animated="animation"
        :class="{ visible: isVisible }"
      >
        <h2 class="title--main" v-if="title" v-html="title"></h2>
        <span class="sub--title" v-if="subtitle" v-html="subtitle"></span>
        <span class="title--description" v-if="description" v-html="description"></span>
        <div v-if="btnTitle" class="btn--wrap mt--24">
          <NuxtLink
            :to="btnLink"
            :target="btnTarget"
            class="btn more--btn"
          >
            {{ btnTitle }}
            <i class="ico"></i>
          </NuxtLink>
        </div>
        <div v-if="$slots.default" class="title--additional">
          <slot></slot>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
  // Props 정의
  const props = defineProps({
    title: {
      type: String,
      required: true,
      default: "",
    },
    subtitle: {
      type: String,
      default: "",
    },
    description: {
      type: String,
      required: true,
      default: "",
    },
    textAlign: {
      type: String,
      default: "center", // 'left', 'center', 'right'
      validator: (value) => ["left", "center", "right"].includes(value),
    },
    theme: {
      type: String,
      default: "light", // 'light', 'dark'
      validator: (value) => ["light", "dark"].includes(value),
    },
    type: {
      type: String,
      default: "", // 'light', 'dark'
      validator: (value) => ["", "middle", "small"].includes(value),
    },
    animation: {
      type: Boolean,
      default: true,
    },
    animationDelay: {
      type: Number,
      default: 300, // milliseconds
    },
    btnTitle: {
      type: String,
      default: '',
    },
    btnLink: {
      type: String,
      default: '#',
    },
    btnTarget: {
      type: String,
      default: '_self',
      validator: (value) => ['_self', '_blank'].includes(value),
    },
  });

  // 애니메이션 로직
  import { onMounted, ref } from "vue";

  const isVisible = ref(false);
  const titleVisualRef = ref(null);

  onMounted(() => {
    if (props.animation) {
      // IntersectionObserver로 스크롤 애니메이션 구현
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              setTimeout(() => {
                isVisible.value = true;
              }, props.animationDelay);
              observer.unobserve(entry.target);
            }
          });
        },
        {
          threshold: 0.3, // 30% 보일 때 애니메이션 시작
        }
      );

      // ref를 통해 현재 컴포넌트 요소만 선택
      if (titleVisualRef.value) {
        observer.observe(titleVisualRef.value);
      }

      // cleanup
      return () => {
        if (titleVisualRef.value) {
          observer.unobserve(titleVisualRef.value);
        }
      };
    } else {
      isVisible.value = true;
    }
  });
</script>