audi/app/components/block/DealerPopup.vue

<template>
  <Teleport to="body">
    <Transition name="dealer--popup--fade">
      <div
        v-if="isOpen"
        class="dealer--popup--overlay"
        @click.self="handleClose"
        role="dialog"
        aria-modal="true"
        :aria-labelledby="dealerData ? 'dealer-name' : undefined"
      >
        <div class="dealer--popup--container" ref="popupRef">
          <!-- 닫기 버튼 -->
          <button
            class="dealer--popup--close"
            @click="handleClose"
            aria-label="팝업 닫기"
          >
            <span class="close--icon"></span>
          </button>

          <!-- 팝업 내용 -->
          <div v-if="dealerData" class="dealer--popup--content">
            <div class="dealer--thumb--wrap">
              <img :src="dealerData.imgsrc" />
            </div>
            <div class="dealer--infos--wrap">
              <!-- 헤더 -->
              <div class="dealer--popup--header">
                <h2 id="dealer-name" class="dealer--name">
                  {{ dealerData.fullName }}
                </h2>
              </div>

              <!-- 정보 섹션 -->
              <div class="dealer--popup--body">
                <!-- 주소 -->
                <div v-if="dealerData.address" class="dealer--info--section">
                  <div class="info--label">주소: {{ dealerData.address }}</div>
                </div>

                <!-- 전화번호 -->
                <div v-if="dealerData.phone" class="dealer--info--section">
                  <div class="info--label">Tel: {{ dealerData.phone }}</div>
                </div>

                <!-- 이메일 -->
                <div v-if="dealerData.email" class="dealer--info--section">
                  <div class="info--label">
                    E-mail:
                    <a :href="`mailto:${dealerData.email}`" class="email--link">
                      {{ dealerData.email }}
                    </a>
                  </div>
                </div>

                <!-- 추가내용 -->
                <div v-if="dealerData.add1" class="dealer--info--section mt--20">
                  <div class="info--label">
                    {{ dealerData.add1 }}: {{ dealerData.adddesc1 }}
                  </div>
                </div>

                <!-- 추가내용 -->
                <div v-if="dealerData.add2" class="dealer--info--section">
                  <div class="info--label">
                    {{ dealerData.add2 }}: {{ dealerData.adddesc2 }}
                  </div>
                </div>

                <!-- 추가내용 -->
                <div v-if="dealerData.add3" class="dealer--info--section">
                  <div class="info--label">
                    {{ dealerData.add3 }}: {{ dealerData.adddesc3 }}
                  </div>
                </div>

                <!-- 추가내용 -->
                <div v-if="dealerData.addtext" class="dealer--info--section">
                  <div class="info--label">
                    {{ dealerData.addtext }}
                  </div>
                </div>

                <!-- 웹사이트 -->
                <div v-if="dealerData.website" class="dealer--info--section">
                  <div class="info--label">
                    <NuxtLink
                      :to="dealerData.website"
                      target="_blank"
                      class="light--gray--btn mt--20 ft--14"
                    >
                      {{ dealerData.websitetitle }}
                    </NuxtLink>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 데이터가 없을 때 -->
          <div v-else class="dealer--popup--empty">
            <p>딜러 정보를 불러올 수 없습니다.</p>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
  import { ref, watch, onMounted, onUnmounted } from "vue";

  const props = defineProps({
    isOpen: {
      type: Boolean,
      required: true,
      default: false,
    },
    dealerData: {
      type: Object,
      default: null,
    },
  });

  const emit = defineEmits(["close"]);

  const popupRef = ref(null);

  const handleClose = () => {
    emit("close");
  };

  // ESC 키로 팝업 닫기
  const handleEscKey = (event) => {
    if (event.key === "Escape" && props.isOpen) {
      handleClose();
    }
  };

  // body 스크롤 제어
  const toggleBodyScroll = (disable) => {
    if (disable) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  };

  // 포커스 트랩
  const handleFocusTrap = (event) => {
    if (!props.isOpen || !popupRef.value) return;

    const focusableElements = popupRef.value.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );

    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    if (event.key === "Tab") {
      if (event.shiftKey && document.activeElement === firstElement) {
        event.preventDefault();
        lastElement.focus();
      } else if (!event.shiftKey && document.activeElement === lastElement) {
        event.preventDefault();
        firstElement.focus();
      }
    }
  };

  // isOpen 상태 감지
  watch(
    () => props.isOpen,
    (newValue) => {
      toggleBodyScroll(newValue);

      if (newValue) {
        // 팝업이 열릴 때 첫 번째 포커스 가능한 요소에 포커스
        setTimeout(() => {
          if (popupRef.value) {
            const firstFocusable = popupRef.value.querySelector(
              'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
            );
            if (firstFocusable) {
              firstFocusable.focus();
            }
          }
        }, 100);
      }
    }
  );

  onMounted(() => {
    document.addEventListener("keydown", handleEscKey);
    document.addEventListener("keydown", handleFocusTrap);
  });

  onUnmounted(() => {
    document.removeEventListener("keydown", handleEscKey);
    document.removeEventListener("keydown", handleFocusTrap);
    toggleBodyScroll(false);
  });
</script>