Vue 3 Teleport 이해하기

🎯 Teleport가 해결하는 근본적인 문제

Vue 3의 Teleport는 단순한 편의 기능이 아닙니다. 모던 웹 개발에서 가장 까다로운 문제 중 하나인 컴포넌트 계층구조와 DOM 구조의 불일치를 우아하게 해결하는 혁신적인 솔루션입니다.

모달, 툴팁, 드롭다운, 토스트 알림 등을 구현할 때 겪는 z-index 지옥, CSS 상속 문제, 스크롤 이슈들을 한 번에 해결할 수 있습니다. 이 포스팅에서는 Teleport의 내부 동작 원리부터 고급 활용 패턴까지, 실무에서 마주치는 모든 시나리오를 완벽하게 다룹니다.

---

📋 목차

1. Teleport의 핵심 개념과 동작 원리
2. 기본 사용법과 실무 적용
3. 고급 패턴: 조건부 Teleport와 동적 타겟
4. 모달 시스템 완전 구현
5. 툴팁과 드롭다운 고급 활용
6. Teleport와 애니메이션 통합
7. 성능 최적화와 메모리 관리
8. 서버 사이드 렌더링(SSR) 대응 전략

---

🌟 Teleport의 핵심 개념과 동작 원리

Teleport 이전의 문제점

<!-- ❌ Teleport 없이 모달을 구현할 때의 문제점 -->
<template>
  <div class="page-container">
    <header class="header">
      <h1>My App</h1>
    </header>
    
    <main class="main-content">
      <div class="card">
        <h2>사용자 정보</h2>
        <button @click="showModal = true">편집</button>
        
        <!-- 모달이 여기에 렌더링됨 -->
        <div v-if="showModal" class="modal-backdrop">
          <div class="modal">
            <h3>사용자 편집</h3>
            <form @submit.prevent="handleSave">
              <input v-model="userName" />
              <button type="submit">저장</button>
              <button @click="showModal = false">취소</button>
            </form>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showModal = ref(false)
const userName = ref('김개발')

const handleSave = () => {
  console.log('저장:', userName.value)
  showModal.value = false
}
</script>

<style scoped>
.page-container {
  position: relative;
  overflow: hidden; /* 이것이 모달을 가림! */
}

.main-content {
  transform: translateZ(0); /* 새로운 stacking context 생성 */
}

.card {
  position: relative;
  z-index: 1;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999; /* 높은 z-index도 소용없음! */
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 8px;
}
</style>

Teleport의 해결책

<!-- ✅ Teleport를 사용한 깔끔한 해결책 -->
<template>
  <div class="page-container">
    <header class="header">
      <h1>My App</h1>
    </header>
    
    <main class="main-content">
      <div class="card">
        <h2>사용자 정보</h2>
        <button @click="showModal = true">편집</button>
      </div>
    </main>
    
    <!-- 모달이 body 직하위로 이동됨 -->
    <Teleport to="body">
      <div v-if="showModal" class="modal-backdrop" @click="handleBackdropClick">
        <div class="modal" @click.stop>
          <h3>사용자 편집</h3>
          <form @submit.prevent="handleSave">
            <input v-model="userName" />
            <button type="submit">저장</button>
            <button @click="showModal = false">취소</button>
          </form>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showModal = ref(false)
const userName = ref('김개발')

const handleSave = () => {
  console.log('저장:', userName.value)
  showModal.value = false
}

const handleBackdropClick = () => {
  showModal.value = false
}
</script>

<style scoped>
/* 부모 컴포넌트의 CSS는 그대로 유지 */
.page-container {
  position: relative;
  overflow: hidden; /* 더 이상 문제없음! */
}

.main-content {
  transform: translateZ(0); /* stacking context와 무관함! */
}
</style>

<style>
/* 전역 스타일로 모달 정의 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 90%;
}
</style>

Teleport의 내부 동작 원리

// Vue 3 내부에서 Teleport가 동작하는 방식 (단순화)
class TeleportRenderer {
  constructor() {
    this.teleportMap = new Map() // 타겟별 텔레포트 관리
  }
  
  renderTeleport(vnode, container) {
    const { to, children } = vnode.props
    
    // 1. 타겟 엘리먼트 찾기
    const target = typeof to === 'string' 
      ? document.querySelector(to)
      : to
      
    if (!target) {
      console.warn(`Teleport target "${to}" not found`)
      return
    }
    
    // 2. 텔레포트 컨테이너 생성
    if (!this.teleportMap.has(target)) {
      const teleportContainer = document.createElement('div')
      teleportContainer.className = 'vue-teleport-container'
      target.appendChild(teleportContainer)
      this.teleportMap.set(target, teleportContainer)
    }
    
    const teleportContainer = this.teleportMap.get(target)
    
    // 3. 자식 컴포넌트들을 타겟에 렌더링
    children.forEach(child => {
      this.renderComponent(child, teleportContainer)
    })
  }
  
  unmountTeleport(vnode) {
    const { to } = vnode.props
    const target = typeof to === 'string' 
      ? document.querySelector(to) 
      : to
      
    if (this.teleportMap.has(target)) {
      const container = this.teleportMap.get(target)
      container.remove()
      this.teleportMap.delete(target)
    }
  }
}

// 실제 Vue 3에서는 더 복잡한 최적화와 에러 처리가 포함됨

---

🚀 기본 사용법과 실무 적용

다양한 타겟 선택자 활용

<template>
  <div class="app">
    <!-- 1. CSS 선택자로 타겟 지정 -->
    <Teleport to="#modal-root">
      <Modal v-if="showModal1" @close="showModal1 = false" />
    </Teleport>
    
    <!-- 2. 클래스 선택자 사용 -->
    <Teleport to=".tooltip-container">
      <Tooltip v-if="showTooltip" :content="tooltipContent" />
    </Teleport>
    
    <!-- 3. body에 직접 렌더링 -->
    <Teleport to="body">
      <Toast v-for="toast in toasts" :key="toast.id" :toast="toast" />
    </Teleport>
    
    <!-- 4. 동적 타겟 (computed 활용) -->
    <Teleport :to="dynamicTarget">
      <ContextMenu v-if="showContextMenu" :x="menuX" :y="menuY" />
    </Teleport>
    
    <!-- 5. DOM 엘리먼트 직접 참조 -->
    <Teleport :to="portalElement">
      <CustomWidget v-if="showWidget" />
    </Teleport>
    
    <!-- 실제 컨텐츠 -->
    <main class="main-content">
      <button @click="showModal1 = true">모달 열기</button>
      <button @click="showTooltip = !showTooltip">툴팁 토글</button>
      <button @click="addToast">토스트 추가</button>
      <div 
        @contextmenu.prevent="showContextMenu = true"
        class="context-area"
      >
        우클릭하여 컨텍스트 메뉴 표시
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 상태 관리
const showModal1 = ref(false)
const showTooltip = ref(false)
const showContextMenu = ref(false)
const showWidget = ref(false)

const tooltipContent = ref('도움말 텍스트')
const toasts = ref([])
const menuX = ref(0)
const menuY = ref(0)

// 동적 타겟 계산
const dynamicTarget = computed(() => {
  return window.innerWidth > 768 ? '.desktop-menu' : '.mobile-menu'
})

// DOM 엘리먼트 직접 참조
const portalElement = ref(null)

onMounted(() => {
  // 특정 엘리먼트를 포털 타겟으로 설정
  portalElement.value = document.getElementById('widget-container')
})

// 토스트 추가 함수
const addToast = () => {
  const toast = {
    id: Date.now(),
    message: `토스트 메시지 ${toasts.value.length + 1}`,
    type: 'info'
  }
  toasts.value.push(toast)
  
  // 3초 후 자동 제거
  setTimeout(() => {
    toasts.value = toasts.value.filter(t => t.id !== toast.id)
  }, 3000)
}
</script>

<!-- index.html에 미리 정의된 포털 컨테이너들 -->
<!--
<div id="modal-root"></div>
<div class="tooltip-container"></div>
<div class="desktop-menu"></div>
<div class="mobile-menu"></div>
<div id="widget-container"></div>
-->

컴포넌트별 최적화된 Teleport 사용

<!-- BaseModal.vue - 재사용 가능한 모달 컴포넌트 -->
<template>
  <Teleport to="body">
    <Transition name="modal" appear>
      <div v-if="modelValue" class="modal-backdrop" @click="handleBackdropClick">
        <div 
          class="modal-container" 
          :class="[`modal-${size}`, customClass]"
          @click.stop
          role="dialog"
          :aria-labelledby="titleId"
          :aria-describedby="contentId"
        >
          <!-- 헤더 -->
          <header v-if="$slots.header || title" class="modal-header">
            <slot name="header">
              <h2 :id="titleId" class="modal-title">{{ title }}</h2>
            </slot>
            <button 
              v-if="closable"
              @click="handleClose" 
              class="modal-close"
              aria-label="닫기"
            >
              ✕
            </button>
          </header>
          
          <!-- 본문 -->
          <main :id="contentId" class="modal-content">
            <slot />
          </main>
          
          <!-- 푸터 -->
          <footer v-if="$slots.footer" class="modal-footer">
            <slot name="footer" />
          </footer>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { computed, nextTick, watch } from 'vue'

// Props 정의
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'md',
    validator: (value) => ['sm', 'md', 'lg', 'xl', 'full'].includes(value)
  },
  closable: {
    type: Boolean,
    default: true
  },
  closeOnBackdrop: {
    type: Boolean,
    default: true
  },
  customClass: {
    type: String,
    default: ''
  },
  lockScroll: {
    type: Boolean,
    default: true
  }
})

// Events 정의
const emit = defineEmits(['update:modelValue', 'close', 'open'])

// 유니크한 ID 생성
const titleId = computed(() => `modal-title-${Math.random().toString(36).substr(2, 9)}`)
const contentId = computed(() => `modal-content-${Math.random().toString(36).substr(2, 9)}`)

// 이벤트 핸들러
const handleClose = () => {
  emit('update:modelValue', false)
  emit('close')
}

const handleBackdropClick = () => {
  if (props.closeOnBackdrop) {
    handleClose()
  }
}

// 스크롤 잠금 기능
watch(() => props.modelValue, async (newValue) => {
  if (props.lockScroll) {
    await nextTick()
    
    if (newValue) {
      document.body.style.overflow = 'hidden'
      emit('open')
    } else {
      document.body.style.overflow = ''
    }
  }
})

// ESC 키 처리
const handleKeydown = (event) => {
  if (event.key === 'Escape' && props.closable) {
    handleClose()
  }
}

watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    document.addEventListener('keydown', handleKeydown)
  } else {
    document.removeEventListener('keydown', handleKeydown)
  }
})
</script>

<style scoped>
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  max-height: 90vh;
  overflow: auto;
  position: relative;
}

/* 크기별 스타일 */
.modal-sm { max-width: 400px; width: 100%; }
.modal-md { max-width: 600px; width: 100%; }
.modal-lg { max-width: 900px; width: 100%; }
.modal-xl { max-width: 1200px; width: 100%; }
.modal-full { width: 100%; height: 100%; max-height: none; border-radius: 0; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.modal-close:hover {
  background: #f3f4f6;
  color: #374151;
}

.modal-content {
  padding: 1.5rem;
}

.modal-footer {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* 애니메이션 */
.modal-enter-active, .modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from, .modal-leave-to {
  opacity: 0;
}

.modal-enter-active .modal-container,
.modal-leave-active .modal-container {
  transition: transform 0.3s ease;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  transform: scale(0.95) translateY(-20px);
}
</style>

---

🎨 고급 패턴: 조건부 Teleport와 동적 타겟

조건부 Teleport 구현

<template>
  <div class="responsive-layout">
    <!-- 데스크톱: 사이드바에 위젯 표시 -->
    <!-- 모바일: 모달로 위젯 표시 -->
    <Teleport :to="teleportTarget" :disabled="!shouldTeleport">
      <div class="widget-container" :class="widgetClass">
        <UserWidget 
          v-if="showWidget" 
          @close="showWidget = false"
          :is-modal="shouldTeleport"
        />
      </div>
    </Teleport>
    
    <main class="main-content">
      <button @click="showWidget = true">위젯 표시</button>
      
      <!-- 모바일에서는 여기에 위젯이 렌더링됨 (disabled=true) -->
      <div v-if="!shouldTeleport" class="mobile-widget-space">
        <!-- Teleport가 disabled일 때 여기에 렌더링 -->
      </div>
    </main>
    
    <!-- 데스크톱 사이드바 -->
    <aside class="sidebar">
      <div id="sidebar-widgets"></div>
    </aside>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const showWidget = ref(false)
const windowWidth = ref(window.innerWidth)

// 반응형 로직
const isMobile = computed(() => windowWidth.value < 768)
const shouldTeleport = computed(() => !isMobile.value)

const teleportTarget = computed(() => {
  return isMobile.value ? 'body' : '#sidebar-widgets'
})

const widgetClass = computed(() => ({
  'widget-modal': isMobile.value,
  'widget-sidebar': !isMobile.value
}))

// 윈도우 크기 변화 감지
const handleResize = () => {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.responsive-layout {
  display: flex;
  height: 100vh;
}

.main-content {
  flex: 1;
  padding: 2rem;
}

.sidebar {
  width: 300px;
  background: #f8f9fa;
  padding: 1rem;
}

.mobile-widget-space {
  /* 모바일에서 위젯이 인라인으로 표시될 공간 */
  margin-top: 1rem;
}

/* 위젯 스타일 */
.widget-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.widget-sidebar {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
  
  .main-content {
    width: 100%;
  }
}
</style>

다중 Teleport 관리 시스템

<!-- TeleportManager.vue - 중앙집중식 Teleport 관리 -->
<template>
  <div>
    <!-- 모달 레이어 -->
    <Teleport to="body">
      <div v-if="hasModals" class="modal-layer">
        <component
          v-for="modal in modals"
          :key="modal.id"
          :is="modal.component"
          v-bind="modal.props"
          @close="closeModal(modal.id)"
        />
      </div>
    </Teleport>
    
    <!-- 토스트 레이어 -->
    <Teleport to="body">
      <TransitionGroup
        v-if="hasToasts"
        name="toast"
        tag="div"
        class="toast-container"
      >
        <ToastComponent
          v-for="toast in toasts"
          :key="toast.id"
          :toast="toast"
          @close="removeToast(toast.id)"
        />
      </TransitionGroup>
    </Teleport>
    
    <!-- 드롭다운 레이어 -->
    <Teleport to="body">
      <div v-if="hasDropdowns" class="dropdown-layer">
        <component
          v-for="dropdown in dropdowns"
          :key="dropdown.id"
          :is="dropdown.component"
          v-bind="dropdown.props"
          @close="closeDropdown(dropdown.id)"
        />
      </div>
    </Teleport>
    
    <!-- 툴팁 레이어 -->
    <Teleport to="body">
      <div v-if="hasTooltips" class="tooltip-layer">
        <component
          v-for="tooltip in tooltips"
          :key="tooltip.id"
          :is="tooltip.component"
          v-bind="tooltip.props"
        />
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useTeleportStore } from '@/stores/teleport'

// Pinia 스토어 사용
const teleportStore = useTeleportStore()

// Computed properties
const modals = computed(() => teleportStore.modals)
const toasts = computed(() => teleportStore.toasts)
const dropdowns = computed(() => teleportStore.dropdowns)
const tooltips = computed(() => teleportStore.tooltips)

const hasModals = computed(() => modals.value.length > 0)
const hasToasts = computed(() => toasts.value.length > 0)
const hasDropdowns = computed(() => dropdowns.value.length > 0)
const hasTooltips = computed(() => tooltips.value.length > 0)

// 메소드
const closeModal = (id) => {
  teleportStore.removeModal(id)
}

const removeToast = (id) => {
  teleportStore.removeToast(id)
}

const closeDropdown = (id) => {
  teleportStore.removeDropdown(id)
}
</script>

<script>
// stores/teleport.js - Teleport 상태 관리 스토어
import { defineStore } from 'pinia'

export const useTeleportStore = defineStore('teleport', {
  state: () => ({
    modals: [],
    toasts: [],
    dropdowns: [],
    tooltips: [],
    zIndexCounter: 1000
  }),
  
  getters: {
    getNextZIndex: (state) => {
      return ++state.zIndexCounter
    },
    
    getActiveModal: (state) => {
      return state.modals[state.modals.length - 1] || null
    }
  },
  
  actions: {
    // 모달 관리
    addModal(modal) {
      const modalWithDefaults = {
        id: Date.now() + Math.random(),
        zIndex: this.getNextZIndex,
        closable: true,
        closeOnBackdrop: true,
        ...modal
      }
      
      this.modals.push(modalWithDefaults)
      
      // body 스크롤 잠금
      document.body.style.overflow = 'hidden'
      
      return modalWithDefaults.id
    },
    
    removeModal(id) {
      const index = this.modals.findIndex(modal => modal.id === id)
      if (index > -1) {
        this.modals.splice(index, 1)
        
        // 마지막 모달이 닫히면 스크롤 복구
        if (this.modals.length === 0) {
          document.body.style.overflow = ''
        }
      }
    },
    
    closeAllModals() {
      this.modals = []
      document.body.style.overflow = ''
    },
    
    // 토스트 관리
    addToast(toast) {
      const toastWithDefaults = {
        id: Date.now() + Math.random(),
        type: 'info',
        duration: 3000,
        closable: true,
        ...toast
      }
      
      this.toasts.push(toastWithDefaults)
      
      // 자동 제거
      if (toastWithDefaults.duration > 0) {
        setTimeout(() => {
          this.removeToast(toastWithDefaults.id)
        }, toastWithDefaults.duration)
      }
      
      return toastWithDefaults.id
    },
    
    removeToast(id) {
      const index = this.toasts.findIndex(toast => toast.id === id)
      if (index > -1) {
        this.toasts.splice(index, 1)
      }
    },
    
    // 드롭다운 관리
    addDropdown(dropdown) {
      // 기존 드롭다운 모두 닫기 (하나만 열림)
      this.dropdowns = []
      
      const dropdownWithDefaults = {
        id: Date.now() + Math.random(),
        zIndex: this.getNextZIndex,
        ...dropdown
      }
      
      this.dropdowns.push(dropdownWithDefaults)
      
      return dropdownWithDefaults.id
    },
    
    removeDropdown(id) {
      const index = this.dropdowns.findIndex(dropdown => dropdown.id === id)
      if (index > -1) {
        this.dropdowns.splice(index, 1)
      }
    },
    
    // 툴팁 관리
    addTooltip(tooltip) {
      const tooltipWithDefaults = {
        id: Date.now() + Math.random(),
        delay: 300,
        ...tooltip
      }
      
      this.tooltips.push(tooltipWithDefaults)
      
      return tooltipWithDefaults.id
    },
    
    removeTooltip(id) {
      const index = this.tooltips.findIndex(tooltip => tooltip.id === id)
      if (index > -1) {
        this.tooltips.splice(index, 1)
      }
    },
    
    // 전체 정리
    clearAll() {
      this.modals = []
      this.toasts = []
      this.dropdowns = []
      this.tooltips = []
      document.body.style.overflow = ''
    }
  }
})
</script>

<style scoped>
.modal-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dropdown-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1500;
  pointer-events: none;
}

.dropdown-layer > * {
  pointer-events: auto;
}

.tooltip-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
  pointer-events: none;
}

.tooltip-layer > * {
  pointer-events: auto;
}

/* 토스트 애니메이션 */
.toast-enter-active {
  transition: all 0.3s ease-out;
}

.toast-leave-active {
  transition: all 0.3s ease-in;
}

.toast-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.toast-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.toast-move {
  transition: transform 0.3s ease;
}
</style>

---

🎭 모달 시스템 완전 구현

고급 모달 컴포저블

// composables/useModal.js - 모달 관리 컴포저블
import { ref, computed, nextTick, onUnmounted } from 'vue'
import { useTeleportStore } from '@/stores/teleport'

export function useModal() {
  const teleportStore = useTeleportStore()
  const activeModals = ref(new Map())
  
  // 모달 열기
  const openModal = async (component, props = {}, options = {}) => {
    const modalConfig = {
      component,
      props: {
        ...props,
        modelValue: true
      },
      ...options
    }
    
    const modalId = teleportStore.addModal(modalConfig)
    activeModals.value.set(modalId, modalConfig)
    
    // DOM 업데이트 대기
    await nextTick()
    
    // 포커스 관리
    if (options.autoFocus !== false) {
      const modalElement = document.querySelector(`[data-modal-id="${modalId}"]`)
      if (modalElement) {
        const focusableElement = modalElement.querySelector(
          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
        )
        focusableElement?.focus()
      }
    }
    
    return {
      id: modalId,
      close: () => closeModal(modalId),
      update: (newProps) => updateModal(modalId, newProps)
    }
  }
  
  // 모달 닫기
  const closeModal = (modalId) => {
    if (activeModals.value.has(modalId)) {
      teleportStore.removeModal(modalId)
      activeModals.value.delete(modalId)
    }
  }
  
  // 모달 업데이트
  const updateModal = (modalId, newProps) => {
    const modal = activeModals.value.get(modalId)
    if (modal) {
      modal.props = { ...modal.props, ...newProps }
      teleportStore.updateModal(modalId, modal)
    }
  }
  
  // 확인 모달
  const confirm = (message, title = '확인') => {
    return new Promise((resolve) => {
      const modal = openModal('ConfirmModal', {
        title,
        message,
        onConfirm: () => {
          modal.then(m => m.close())
          resolve(true)
        },
        onCancel: () => {
          modal.then(m => m.close())
          resolve(false)
        }
      })
    })
  }
  
  // 알림 모달
  const alert = (message, title = '알림') => {
    return new Promise((resolve) => {
      const modal = openModal('AlertModal', {
        title,
        message,
        onClose: () => {
          modal.then(m => m.close())
          resolve()
        }
      })
    })
  }
  
  // 프롬프트 모달
  const prompt = (message, defaultValue = '', title = '입력') => {
    return new Promise((resolve) => {
      const modal = openModal('PromptModal', {
        title,
        message,
        defaultValue,
        onConfirm: (value) => {
          modal.then(m => m.close())
          resolve(value)
        },
        onCancel: () => {
          modal.then(m => m.close())
          resolve(null)
        }
      })
    })
  }
  
  // 모든 모달 닫기
  const closeAllModals = () => {
    activeModals.value.clear()
    teleportStore.closeAllModals()
  }
  
  // 현재 열린 모달 수
  const modalCount = computed(() => activeModals.value.size)
  
  // 최상위 모달 여부 확인
  const isTopModal = (modalId) => {
    const modals = Array.from(activeModals.value.keys())
    return modals[modals.length - 1] === modalId
  }
  
  // 정리
  onUnmounted(() => {
    closeAllModals()
  })
  
  return {
    openModal,
    closeModal,
    updateModal,
    confirm,
    alert,
    prompt,
    closeAllModals,
    modalCount,
    isTopModal
  }
}

// 전역 모달 인스턴스
let globalModalInstance = null

export function useGlobalModal() {
  if (!globalModalInstance) {
    globalModalInstance = useModal()
  }
  return globalModalInstance
}

실무용 모달 컴포넌트들

<!-- ConfirmModal.vue -->
<template>
  <BaseModal
    :model-value="true"
    :title="title"
    size="sm"
    @close="handleCancel"
  >
    <div class="confirm-content">
      <div class="confirm-icon">
        <component :is="iconComponent" />
      </div>
      <p class="confirm-message">{{ message }}</p>
    </div>
    
    <template #footer>
      <button 
        class="btn btn-secondary" 
        @click="handleCancel"
        :disabled="loading"
      >
        {{ cancelText }}
      </button>
      <button 
        class="btn btn-primary" 
        @click="handleConfirm"
        :disabled="loading"
        :class="{ 'btn-loading': loading }"
      >
        {{ confirmText }}
      </button>
    </template>
  </BaseModal>
</template>

<script setup>
import { ref, computed } from 'vue'
import BaseModal from './BaseModal.vue'

const props = defineProps({
  title: { type: String, default: '확인' },
  message: { type: String, required: true },
  type: { type: String, default: 'info' }, // info, warning, danger, success
  confirmText: { type: String, default: '확인' },
  cancelText: { type: String, default: '취소' },
  onConfirm: { type: Function, required: true },
  onCancel: { type: Function, required: true },
  asyncAction: { type: Boolean, default: false }
})

const loading = ref(false)

const iconComponent = computed(() => {
  const icons = {
    info: 'InfoIcon',
    warning: 'WarningIcon', 
    danger: 'DangerIcon',
    success: 'SuccessIcon'
  }
  return icons[props.type] || icons.info
})

const handleConfirm = async () => {
  if (props.asyncAction) {
    loading.value = true
    try {
      await props.onConfirm()
    } finally {
      loading.value = false
    }
  } else {
    props.onConfirm()
  }
}

const handleCancel = () => {
  if (!loading.value) {
    props.onCancel()
  }
}
</script>

<style scoped>
.confirm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
}

.confirm-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
}

.confirm-message {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #374151;
  margin: 0;
}

.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.btn-secondary:hover:not(:disabled) {
  background: #e5e7eb;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #2563eb;
}

.btn-loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

---

🎨 Teleport와 애니메이션 통합

고급 애니메이션 패턴

<!-- AnimatedTeleport.vue - 애니메이션이 포함된 Teleport 래퍼 -->
<template>
  <Teleport :to="to" :disabled="disabled">
    <Transition
      :name="transitionName"
      :appear="appear"
      :mode="mode"
      @before-enter="onBeforeEnter"
      @enter="onEnter"
      @after-enter="onAfterEnter"
      @before-leave="onBeforeLeave"
      @leave="onLeave"
      @after-leave="onAfterLeave"
    >
      <slot />
    </Transition>
  </Teleport>
</template>

<script setup>
const props = defineProps({
  to: { type: [String, Element], required: true },
  disabled: { type: Boolean, default: false },
  transitionName: { type: String, default: 'fade' },
  appear: { type: Boolean, default: true },
  mode: { type: String, default: undefined }
})

const emit = defineEmits([
  'before-enter',
  'enter', 
  'after-enter',
  'before-leave',
  'leave',
  'after-leave'
])

// 애니메이션 이벤트 전달
const onBeforeEnter = (el) => emit('before-enter', el)
const onEnter = (el, done) => emit('enter', el, done)
const onAfterEnter = (el) => emit('after-enter', el)
const onBeforeLeave = (el) => emit('before-leave', el)
const onLeave = (el, done) => emit('leave', el, done)
const onAfterLeave = (el) => emit('after-leave', el)
</script>

<style>
/* 기본 페이드 애니메이션 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 모달 애니메이션 */
.modal-enter-active {
  transition: all 0.3s ease-out;
}
.modal-leave-active {
  transition: all 0.2s ease-in;
}
.modal-enter-from {
  opacity: 0;
  transform: scale(0.95) translateY(-20px);
}
.modal-leave-to {
  opacity: 0;
  transform: scale(1.05);
}

/* 드롭다운 애니메이션 */
.dropdown-enter-active, .dropdown-leave-active {
  transition: all 0.2s ease;
  transform-origin: top;
}
.dropdown-enter-from, .dropdown-leave-to {
  opacity: 0;
  transform: scaleY(0);
}

/* 토스트 애니메이션 */
.toast-enter-active {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toast-leave-active {
  transition: all 0.3s ease-in;
}
.toast-enter-from {
  opacity: 0;
  transform: translateX(100%) scale(0.8);
}
.toast-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

/* 슬라이드 애니메이션 */
.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.3s ease;
}
.slide-up-enter-from {
  opacity: 0;
  transform: translateY(100%);
}
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(100%);
}

.slide-down-enter-active, .slide-down-leave-active {
  transition: all 0.3s ease;
}
.slide-down-enter-from {
  opacity: 0;
  transform: translateY(-100%);
}
.slide-down-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}

/* 확대/축소 애니메이션 */
.zoom-enter-active, .zoom-leave-active {
  transition: all 0.3s ease;
}
.zoom-enter-from, .zoom-leave-to {
  opacity: 0;
  transform: scale(0);
}

/* 회전 애니메이션 */
.rotate-enter-active, .rotate-leave-active {
  transition: all 0.5s ease;
}
.rotate-enter-from {
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
}
.rotate-leave-to {
  opacity: 0;
  transform: rotate(180deg) scale(0.5);
}
</style>

JavaScript 기반 복잡한 애니메이션

<!-- ComplexAnimatedModal.vue -->
<template>
  <AnimatedTeleport 
    to="body"
    :transition-name="''"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <div v-if="modelValue" ref="backdrop" class="modal-backdrop">
      <div ref="modal" class="modal-container">
        <slot />
      </div>
    </div>
  </AnimatedTeleport>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { gsap } from 'gsap'

const props = defineProps({
  modelValue: Boolean,
  animationType: {
    type: String,
    default: 'bounce',
    validator: (value) => ['bounce', 'elastic', 'flip', 'slide'].includes(value)
  }
})

const backdrop = ref(null)
const modal = ref(null)

// 진입 애니메이션 전 설정
const beforeEnter = (el) => {
  gsap.set(el, { opacity: 0 })
  gsap.set(modal.value, { 
    scale: 0, 
    rotation: props.animationType === 'flip' ? 180 : 0,
    y: props.animationType === 'slide' ? 100 : 0
  })
}

// 진입 애니메이션
const enter = (el, done) => {
  const tl = gsap.timeline({ onComplete: done })
  
  // 배경 페이드 인
  tl.to(el, {
    opacity: 1,
    duration: 0.3,
    ease: 'power2.out'
  })
  
  // 모달 애니메이션 (타입별로 다름)
  switch (props.animationType) {
    case 'bounce':
      tl.to(modal.value, {
        scale: 1,
        duration: 0.6,
        ease: 'back.out(1.7)'
      }, 0.1)
      break
      
    case 'elastic':
      tl.to(modal.value, {
        scale: 1,
        duration: 0.8,
        ease: 'elastic.out(1, 0.75)'
      }, 0.1)
      break
      
    case 'flip':
      tl.to(modal.value, {
        scale: 1,
        rotation: 0,
        duration: 0.6,
        ease: 'power2.out'
      }, 0.1)
      break
      
    case 'slide':
      tl.to(modal.value, {
        scale: 1,
        y: 0,
        duration: 0.5,
        ease: 'power3.out'
      }, 0.1)
      break
  }
}

// 종료 애니메이션
const leave = (el, done) => {
  const tl = gsap.timeline({ onComplete: done })
  
  // 모달 먼저 애니메이션
  tl.to(modal.value, {
    scale: 0.8,
    opacity: 0,
    duration: 0.2,
    ease: 'power2.in'
  })
  
  // 배경 페이드 아웃
  tl.to(el, {
    opacity: 0,
    duration: 0.2,
    ease: 'power2.in'
  }, 0.1)
}

// 마우스 따라다니는 효과 (선택적)
const handleMouseMove = (event) => {
  if (!modal.value) return
  
  const rect = modal.value.getBoundingClientRect()
  const centerX = rect.left + rect.width / 2
  const centerY = rect.top + rect.height / 2
  
  const deltaX = (event.clientX - centerX) * 0.02
  const deltaY = (event.clientY - centerY) * 0.02
  
  gsap.to(modal.value, {
    x: deltaX,
    y: deltaY,
    duration: 0.3,
    ease: 'power2.out'
  })
}
</script>

<style scoped>
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}
</style>

---

⚡ 성능 최적화와 메모리 관리

Teleport 성능 모니터링

// composables/useTeleportPerformance.js
import { ref, onMounted, onUnmounted, watch } from 'vue'

export function useTeleportPerformance() {
  const renderCount = ref(0)
  const averageRenderTime = ref(0)
  const memoryUsage = ref(0)
  const teleportElements = ref(0)
  
  let renderTimes = []
  let observer = null
  
  // 렌더링 성능 측정
  const measureRender = (callback) => {
    const start = performance.now()
    
    return new Promise((resolve) => {
      callback()
      
      // 다음 프레임에서 측정
      requestAnimationFrame(() => {
        const end = performance.now()
        const renderTime = end - start
        
        renderTimes.push(renderTime)
        renderCount.value++
        
        // 최근 10회 평균 계산
        if (renderTimes.length > 10) {
          renderTimes.shift()
        }
        averageRenderTime.value = renderTimes.reduce((a, b) => a + b, 0) / renderTimes.length
        
        resolve(renderTime)
      })
    })
  }
  
  // 메모리 사용량 측정
  const measureMemory = () => {
    if (performance.memory) {
      memoryUsage.value = performance.memory.usedJSHeapSize / 1024 / 1024 // MB
    }
  }
  
  // Teleport 엘리먼트 수 계산
  const countTeleportElements = () => {
    teleportElements.value = document.querySelectorAll('[data-v-teleport]').length
  }
  
  // DOM 변화 관찰
  const startObserving = () => {
    observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
          // Teleport 관련 DOM 변화 감지
          const addedTeleports = Array.from(mutation.addedNodes)
            .filter(node => node.nodeType === 1 && node.hasAttribute?.('data-v-teleport'))
          
          if (addedTeleports.length > 0) {
            countTeleportElements()
            measureMemory()
          }
        }
      })
    })
    
    observer.observe(document.body, {
      childList: true,
      subtree: true
    })
  }
  
  // 성능 리포트 생성
  const generateReport = () => {
    return {
      renderMetrics: {
        totalRenders: renderCount.value,
        averageRenderTime: averageRenderTime.value,
        lastRenderTime: renderTimes[renderTimes.length - 1] || 0
      },
      memoryMetrics: {
        currentUsage: memoryUsage.value,
        teleportElements: teleportElements.value
      },
      recommendations: generateRecommendations()
    }
  }
  
  // 성능 개선 권장사항
  const generateRecommendations = () => {
    const recommendations = []
    
    if (averageRenderTime.value > 16) {
      recommendations.push('렌더링 시간이 16ms를 초과합니다. 애니메이션 최적화를 고려하세요.')
    }
    
    if (teleportElements.value > 10) {
      recommendations.push('Teleport 엘리먼트가 많습니다. 불필요한 Teleport 제거를 고려하세요.')
    }
    
    if (memoryUsage.value > 100) {
      recommendations.push('메모리 사용량이 높습니다. 컴포넌트 정리를 확인하세요.')
    }
    
    return recommendations
  }
  
  // 정리
  const cleanup = () => {
    if (observer) {
      observer.disconnect()
      observer = null
    }
    renderTimes = []
  }
  
  onMounted(() => {
    startObserving()
    // 주기적으로 메트릭 업데이트
    const interval = setInterval(() => {
      measureMemory()
      countTeleportElements()
    }, 1000)
    
    onUnmounted(() => {
      clearInterval(interval)
      cleanup()
    })
  })
  
  return {
    renderCount,
    averageRenderTime,
    memoryUsage,
    teleportElements,
    measureRender,
    generateReport,
    cleanup
  }
}

메모리 누수 방지 전략

<!-- OptimizedTeleport.vue - 메모리 누수 방지 Teleport -->
<template>
  <Teleport :to="computedTarget" :disabled="disabled" ref="teleportRef">
    <div v-if="shouldRender" :key="componentKey" class="teleport-content">
      <slot />
    </div>
  </Teleport>
</template>

<script setup>
import { 
  ref, 
  computed, 
  watch, 
  onBeforeUnmount, 
  nextTick,
  onMounted
} from 'vue'

const props = defineProps({
  to: { type: [String, Element], required: true },
  disabled: { type: Boolean, default: false },
  visible: { type: Boolean, default: true },
  lazy: { type: Boolean, default: false },
  keepAlive: { type: Boolean, default: false }
})

const teleportRef = ref(null)
const componentKey = ref(0)
const shouldRender = ref(!props.lazy)
const cleanupTasks = ref([])

// 동적 타겟 계산 (메모이제이션)
const computedTarget = computed(() => {
  if (typeof props.to === 'string') {
    // 캐시된 엘리먼트 참조 사용
    return getOrCreateTargetElement(props.to)
  }
  return props.to
})

// 타겟 엘리먼트 캐시
const targetElementCache = new Map()

const getOrCreateTargetElement = (selector) => {
  if (targetElementCache.has(selector)) {
    const cached = targetElementCache.get(selector)
    if (document.contains(cached)) {
      return cached
    } else {
      targetElementCache.delete(selector)
    }
  }
  
  const element = document.querySelector(selector)
  if (element) {
    targetElementCache.set(selector, element)
  }
  
  return element
}

// 지연 렌더링 처리
watch(() => props.visible, (newVisible) => {
  if (newVisible && props.lazy && !shouldRender.value) {
    shouldRender.value = true
  }
  
  if (!newVisible && !props.keepAlive) {
    // Keep-alive가 비활성화된 경우 컴포넌트 재생성
    componentKey.value++
  }
}, { immediate: true })

// ResizeObserver로 타겟 엘리먼트 변화 감지
let resizeObserver = null

const setupResizeObserver = () => {
  if (typeof ResizeObserver !== 'undefined') {
    resizeObserver = new ResizeObserver((entries) => {
      // 타겟 엘리먼트 크기 변화 시 처리
      entries.forEach(entry => {
        if (entry.target === computedTarget.value) {
          // 필요한 경우 레이아웃 재계산
          nextTick(() => {
            // 포지셔닝 업데이트 등
          })
        }
      })
    })
    
    if (computedTarget.value) {
      resizeObserver.observe(computedTarget.value)
      cleanupTasks.value.push(() => {
        resizeObserver?.disconnect()
      })
    }
  }
}

// IntersectionObserver로 가시성 최적화
let intersectionObserver = null

const setupIntersectionObserver = () => {
  if (typeof IntersectionObserver !== 'undefined') {
    intersectionObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 화면에 보일 때만 업데이트
          shouldRender.value = true
        } else if (!props.keepAlive) {
          // 화면에서 벗어나고 keep-alive가 아닐 때
          shouldRender.value = false
        }
      })
    }, {
      threshold: 0.1
    })
    
    cleanupTasks.value.push(() => {
      intersectionObserver?.disconnect()
    })
  }
}

// 이벤트 리스너 정리
const cleanupEventListeners = () => {
  cleanupTasks.value.forEach(cleanup => cleanup())
  cleanupTasks.value = []
}

// MutationObserver로 DOM 변화 감지
let mutationObserver = null

const setupMutationObserver = () => {
  if (typeof MutationObserver !== 'undefined') {
    mutationObserver = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        // 타겟 엘리먼트가 제거되었는지 확인
        if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
          const removedNodes = Array.from(mutation.removedNodes)
          const targetRemoved = removedNodes.some(node => 
            node === computedTarget.value || 
            (node.contains && node.contains(computedTarget.value))
          )
          
          if (targetRemoved) {
            console.warn('Teleport target element was removed from DOM')
            shouldRender.value = false
          }
        }
      })
    })
    
    mutationObserver.observe(document.body, {
      childList: true,
      subtree: true
    })
    
    cleanupTasks.value.push(() => {
      mutationObserver?.disconnect()
    })
  }
}

onMounted(() => {
  setupResizeObserver()
  setupIntersectionObserver()
  setupMutationObserver()
})

// 컴포넌트 언마운트 시 정리
onBeforeUnmount(() => {
  cleanupEventListeners()
  
  // 캐시 정리 (필요한 경우)
  if (!props.keepAlive) {
    targetElementCache.clear()
  }
})

// 강제 새로고침 메소드 노출
const refresh = () => {
  componentKey.value++
  shouldRender.value = true
}

defineExpose({
  refresh,
  cleanup: cleanupEventListeners
})
</script>

<style scoped>
.teleport-content {
  /* 기본 스타일 */
}
</style>

---

🌐 서버 사이드 렌더링(SSR) 대응 전략

SSR 호환 Teleport 구현

<!-- SSRSafeTeleport.vue -->
<template>
  <div>
    <!-- SSR 중에는 인라인으로 렌더링 -->
    <div v-if="!isClient" class="ssr-fallback">
      <slot />
    </div>
    
    <!-- 클라이언트에서는 Teleport 사용 -->
    <Teleport v-else :to="target" :disabled="disabled">
      <slot />
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

const props = defineProps({
  to: { type: [String, Element], required: true },
  disabled: { type: Boolean, default: false },
  ssrFallback: { type: Boolean, default: true }
})

// 클라이언트 감지
const isClient = ref(false)

// 안전한 타겟 계산
const target = computed(() => {
  if (!isClient.value) return null
  
  if (typeof props.to === 'string') {
    // 클라이언트에서 엘리먼트가 존재하는지 확인
    const element = document.querySelector(props.to)
    if (!element) {
      console.warn(`Teleport target "${props.to}" not found, falling back to body`)
      return 'body'
    }
    return element
  }
  
  return props.to
})

onMounted(() => {
  isClient.value = true
})
</script>

<style scoped>
.ssr-fallback {
  /* SSR 시 대체 스타일 */
  position: static;
}
</style>

Nuxt 3에서의 Teleport 최적화

<!-- components/NuxtTeleport.vue -->
<template>
  <div>
    <!-- Nuxt의 <ClientOnly> 사용 -->
    <ClientOnly>
      <Teleport :to="target" :disabled="disabled">
        <slot />
      </Teleport>
      
      <template #fallback>
        <div v-if="showFallback" class="teleport-fallback">
          <slot name="fallback">
            <!-- 로딩 스피너 또는 플레이스홀더 -->
            <div class="loading-placeholder">로딩 중...</div>
          </slot>
        </div>
      </template>
    </ClientOnly>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  to: { type: [String, Element], required: true },
  disabled: { type: Boolean, default: false },
  showFallback: { type: Boolean, default: true }
})

// Nuxt의 process.client 사용
const target = computed(() => {
  if (process.server) return null
  
  if (typeof props.to === 'string') {
    return document.querySelector(props.to) || 'body'
  }
  
  return props.to
})
</script>

<!-- nuxt.config.ts 설정 -->
<script>
// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  app: {
    // Teleport를 위한 추가 루트 엘리먼트
    rootAttrs: {
      id: 'nuxt-root'
    }
  },
  
  // 플러그인으로 전역 포털 컨테이너 생성
  plugins: [
    '~/plugins/teleport-containers.client.ts'
  ]
})

// plugins/teleport-containers.client.ts
export default defineNuxtPlugin(() => {
  // 클라이언트에서만 실행
  if (process.client) {
    // 포털 컨테이너들 생성
    const containers = [
      { id: 'modal-root', className: 'modal-layer' },
      { id: 'toast-root', className: 'toast-layer' },
      { id: 'tooltip-root', className: 'tooltip-layer' },
      { id: 'dropdown-root', className: 'dropdown-layer' }
    ]
    
    containers.forEach(({ id, className }) => {
      if (!document.getElementById(id)) {
        const container = document.createElement('div')
        container.id = id
        container.className = className
        document.body.appendChild(container)
      }
    })
  }
})
</script>

<style scoped>
.teleport-fallback {
  /* SSR 대체 컨텐츠 스타일 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
}

.loading-placeholder {
  color: #6b7280;
  font-size: 0.9rem;
}
</style>

---

🎯 결론: Vue 3 Teleport 

Vue 3의 Teleport는 단순한 DOM 이동 기능을 넘어 모던 웹 애플리케이션의 UX 문제를 근본적으로 해결하는 혁신적인 도구입니다. z-index 지옥에서 벗어나 깔끔한 레이어 관리를 가능하게 하고, 컴포넌트의 논리적 구조와 시각적 표현을 분리할 수 있게 해줍니다.

🚀 핵심 포인트 요약

1. 문제 해결의 핵심: CSS 상속 문제, stacking context 이슈, 반응형 레이아웃 충돌 완벽 해결
2. 성능 최적화: 조건부 렌더링, 메모이제이션, 메모리 누수 방지로 최적의 성능 달성
3. 실무 활용: 모달, 토스트, 드롭다운, 툴팁 등 모든 오버레이 컴포넌트의 완벽한 구현
4. 애니메이션 통합: Transition과의 완벽한 조합으로 부드러운 사용자 경험 제공
5. SSR 대응: 서버 사이드 렌더링 환경에서도 안정적인 동작 보장

📈 실무 적용을 위한 체크리스트

• ✅ 기본 구조 설정: 포털 컨테이너들을 index.html에 미리 정의
• ✅ 컴포넌트 설계: 재사용 가능한 Teleport 래퍼 컴포넌트 구축
• ✅ 상태 관리: 중앙집중식 오버레이 상태 관리 시스템 구현
• ✅ 성능 모니터링: 렌더링 성능과 메모리 사용량 주기적 측정
• ✅ 접근성 확보: ARIA 속성과 포커스 관리로 완벽한 접근성 지원
• ✅ SSR 최적화: 서버 렌더링 환경에서의 안정적인 동작 보장

🔮 미래 전망과 발전 방향

Vue 3의 Teleport는 앞으로 Web Components와의 더욱 긴밀한 통합, View Transitions API와의 결합, Container Queries와의 연동 등을 통해 더욱 강력해질 것으로 예상됩니다. 특히 모바일 환경에서의 네이티브 앱과 같은 UX 구현에 있어서 핵심적인 역할을 할 것입니다.

---

💡 마무리 팁

Teleport를 도입할 때는 단계적 적용을 추천합니다. 먼저 가장 문제가 되는 모달부터 시작하여, 점차 토스트, 드롭다운, 툴팁 등으로 확장해나가세요. 각 단계에서 성능 측정을 통해 최적화 포인트를 찾아가는 것이 중요합니다.

Vue 3 Teleport로 더 나은 사용자 경험을 제공하고, DOM 조작의 새로운 패러다임을 경험해보세요!