Slots, Teleport, Provide/Inject

<!-- BaseCard.vue — 자식 컴포넌트 -->
<template>
  <div class="card">
    <header class="card-header">
      <slot name="header">기본 제목</slot>
    </header>
    <main class="card-body">
      <slot>기본 콘텐츠</slot> <!-- default slot -->
    </main>
    <footer class="card-footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- 부모에서 사용 -->
<template>
  <BaseCard>
    <template #header>
      <h2>사용자 프로필</h2>
    </template>

    <!-- default slot -->
    <p>이름: 홍길동</p>
    <p>이메일: hong@example.com</p>

    <template #footer>
      <button>수정</button>
      <button>삭제</button>
    </template>
  </BaseCard>
</template>

<!-- DataList.vue — 자식: 데이터 제공, 렌더링은 부모에게 위임 -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot name="item" :item="item" :index="items.indexOf(item)">
        {{ item.name }} <!-- 기본 렌더링 -->
      </slot>
    </li>
  </ul>
</template>

<script setup lang="ts">
interface Item { id: number; name: string; status: string }
defineProps<{ items: Item[] }>()
</script>

<!-- 부모에서 사용: 렌더링 방식 결정 -->
<template>
  <DataList :items="users">
    <template #item="{ item, index }">
      <span>{{ index + 1 }}. {{ item.name }}</span>
      <span :class="item.status === 'active' ? 'text-green-500' : 'text-red-500'">
        {{ item.status }}
      </span>
    </template>
  </DataList>
</template>

<!-- Modal.vue -->
<template>
  <!-- to: 렌더링할 DOM 위치 (CSS 선택자) -->
  <Teleport to="body">
    <div v-if="isOpen" class="modal-overlay" @click.self="close">
      <div class="modal-content">
        <header>
          <slot name="title"><h2>알림</h2></slot>
          <button @click="close">&times;</button>
        </header>
        <main>
          <slot></slot>
        </main>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
defineProps<{ isOpen: boolean }>()
const emit = defineEmits<{ close: [] }>()
const close = () => emit('close')
</script>

<!-- 사용하는 부모 컴포넌트 -->
<template>
  <div>
    <button @click="showModal = true">모달 열기</button>

    <!-- DOM 상으로는 body 바로 아래에 렌더링됨 -->
    <Modal :isOpen="showModal" @close="showModal = false">
      <template #title><h2>확인</h2></template>
      <p>정말 삭제하시겠습니까?</p>
    </Modal>
  </div>
</template>

<!-- App.vue — provide로 데이터 제공 -->
<script setup lang="ts">
import { provide, ref, readonly } from 'vue'
import type { InjectionKey, Ref } from 'vue'

// 타입 안전한 키 정의
interface ThemeContext {
  theme: Ref<'light' | 'dark'>
  toggleTheme: () => void
}

export const ThemeKey: InjectionKey<ThemeContext> = Symbol('theme')

const theme = ref<'light' | 'dark'>('light')
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}

// readonly로 제공하면 자식이 직접 수정 불가
provide(ThemeKey, {
  theme: readonly(theme),
  toggleTheme,
})
</script>

<!-- DeepChild.vue — inject로 데이터 사용 -->
<script setup lang="ts">
import { inject } from 'vue'
import { ThemeKey } from './App.vue'

// 두 번째 인자: provide가 없을 때 기본값
const { theme, toggleTheme } = inject(ThemeKey, {
  theme: ref('light'),
  toggleTheme: () => {},
})
</script>

<template>
  <div :class="theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-white text-black'">
    <p>현재 테마: {{ theme }}</p>
    <button @click="toggleTheme">테마 전환</button>
  </div>
</template>