<!-- ==========================================
// 📂 app/app.vue (앱의 메인 진입점)
// ========================================== -->
<template>
  <!-- 
    Nuxt 4에서는 src/app.vue 나 루트의 app.vue 가 아닌,
    'app/app.vue' 가 최상단 메인 파일이 됩니다. 
  -->
  <div>
    <!-- 전역적으로 적용될 공통 요소를 여기에 넣을 수 있습니다. -->
    <NuxtRouteAnnouncer />
    
    <!-- 
      <NuxtLayout>은 app/layouts 폴더의 공통 껍데기를 적용합니다. 
      <NuxtPage>는 app/pages 폴더의 개별 화면을 끼워 넣습니다.
    -->
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<!-- ==========================================
// 📂 app/components/MyButton.vue (자동 임포트 테스트)
// ========================================== -->
<template>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">
    <!-- 자식 컴포넌트에서 slot을 뚫어 텍스트를 받습니다. -->
    <slot>기본 버튼</slot>
  </button>
</template>

<script setup>
// 이 컴포넌트는 'app/components' 안에 있기 때문에,
// 다른 파일에서 import MyButton from ... 할 필요 없이 바로 
// <MyButton> 태그로 사용 가능합니다! (마법 같은 자동 임포트)
</script>