<!-- ==========================================
// 📂 nuxt.config.ts (Nuxt 4 환경 설정 파일)
// ⚠️ 주의: 실제 .ts 파일에서는 <script> 태그를 작성하지 않습니다.
// ========================================== -->
<script>
// Nuxt 4의 루트 디렉토리에 위치하는 핵심 설정 파일입니다.
export default defineNuxtConfig({
  // 1. Nuxt 4의 핵심! 새로운 폴더 구조 호환성을 위한 설정
  // 향후 기본값이 될 예정이나 명시적으로 지정할 수 있습니다.
  future: {
    compatibilityVersion: 4,
  },

  // 2. 개발 도구 활성화 (브라우저 하단에 강력한 DevTools가 생성됨)
  devtools: { enabled: true },

  // 3. 환경 변수 관리 (프라이빗 토큰과 퍼블릭 설정 분리)
  runtimeConfig: {
    // 여기 적힌 값은 서버(SSR) 환경에서만 접근 가능합니다. (보안 유지)
    apiSecretKey: process.env.NUXT_API_SECRET_KEY || 'default-secret',
    
    // public 안에 적힌 값은 클라이언트(브라우저)에서도 접근 가능합니다.
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})
</script>

<!-- ==========================================
// 📂 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>

<!-- ==========================================
// 📂 app/layouts/default.vue (공통 레이아웃 구조)
// ========================================== -->
<template>
  <div class="min-h-screen bg-gray-50 text-gray-900">
    <header class="bg-indigo-600 text-white p-4 shadow-md flex gap-4">
      <!-- <a> 태그 대신 NuxtLink를 사용하여 페이지 전환 시 깜빡임을 방지합니다. -->
      <NuxtLink to="/" class="font-bold hover:text-indigo-200">홈</NuxtLink>
      <NuxtLink to="/about" class="font-bold hover:text-indigo-200">소개</NuxtLink>
      <NuxtLink to="/users/999" class="font-bold hover:text-indigo-200">유저 정보</NuxtLink>
    </header>

    <main class="p-8 max-w-4xl mx-auto">
      <!-- pages 폴더 안의 각 화면이 여기에 쏙 들어옵니다! -->
      <slot />
    </main>
  </div>
</template>

<!-- ==========================================
// 📂 app/pages/users/[id].vue (동적 라우팅 페이지)
// ========================================== -->
<template>
  <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
    <h1 class="text-2xl font-bold text-indigo-700 mb-2">회원 상세 페이지</h1>
    
    <p class="text-lg mt-4">
      URL 주소창에 입력하신 회원 번호는 
      <strong class="text-red-500 bg-red-50 px-2 py-1 rounded">
        {{ route.params.id }}
      </strong> 번 입니다!
    </p>

    <!-- app/components 안의 버튼을 임포트 없이 바로 사용 -->
    <div class="mt-6">
      <MyButton>회원 정보 수정하기</MyButton>
    </div>
  </div>
</template>

<script setup>
// 브라우저의 현재 URL 정보를 꺼내옵니다.
const route = useRoute();
</script>

<!-- ==========================================
// 📂 nuxt.config.ts (전역 스타일시트 적용)
// ⚠️ 주의: 실제 .ts 파일에서는 <script> 태그를 작성하지 않습니다.
// ========================================== -->
<script>
export default defineNuxtConfig({
  future: { compatibilityVersion: 4 },
  
  // app/assets/ 폴더에 있는 CSS나 SCSS 파일을 앱 전체에 주입합니다.
  css: [
    '~/assets/css/main.css',
    '~/assets/scss/global.scss'
  ]
})
</script>

<!-- ==========================================
// 📂 app/pages/index.vue (에셋 사용 예제)
// ========================================== -->
<template>
  <div class="p-8">
    <h1 class="text-3xl font-bold">에셋 관리 예제</h1>

    <!-- 1. public 폴더 안의 이미지 (빌드 안 됨, 빠른 서빙) -->
    <div class="my-6">
      <p class="mb-2 text-gray-600">public 폴더의 로고:</p>
      <!-- '/' 경로는 자동으로 public 폴더를 가리킵니다 -->
      <img src="/logo.png" alt="로고" class="w-32" />
    </div>

    <!-- 2. app/assets 폴더 안의 이미지 (빌드 됨, 해시값 부여) -->
    <div class="my-6">
      <p class="mb-2 text-gray-600">assets 폴더의 아이콘:</p>
      <!-- '~/assets' 경로는 빌더(Vite)가 찾아서 처리해 줍니다 -->
      <img src="~/assets/icons/star.svg" alt="별" class="w-16" />
    </div>
  </div>
</template>

<!-- ==========================================
// 📂 app/pages/movies.vue (데이터 패칭 예제)
// ========================================== -->
<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">인기 영화 목록</h1>

    <!-- 데이터가 로딩 중일 때 보여줄 스켈레톤 UI -->
    <div v-if="status === 'pending'" class="text-blue-500 font-bold">
      데이터를 불러오는 중입니다...
    </div>

    <!-- 에러가 발생했을 때 보여줄 에러 메시지 -->
    <div v-else-if="error" class="text-red-500 font-bold">
      이런! 데이터를 불러오지 못했습니다.
    </div>

    <!-- 로딩이 끝나면 화면에 리스트를 렌더링 -->
    <ul v-else class="grid grid-cols-1 gap-4">
      <!-- data 변수에 API 응답값이 담겨있습니다. -->
      <li 
        v-for="movie in data" 
        :key="movie.id" 
        class="bg-white p-4 shadow rounded"
      >
        <h2 class="text-xl font-bold">{{ movie.title }}</h2>
        <p class="text-gray-600">{{ movie.overview }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
// useFetch는 API 주소에 요청을 보내고, 
// 그 결과를 반응형(reactive) 변수 묶음으로 돌려줍니다.
const { data, status, error } = await useFetch('https://api.example.com/movies', {
  // 캐시 효율을 위한 키(key) 지정 가능
  key: 'popular-movies',
  // 서버 응답에서 필요한 데이터만 골라오기 (Pick)
  // pick: ['id', 'title', 'overview'] 
})
</script>

<!-- ==========================================
// 📂 app/composables/useTheme.ts (상태 공유 훅)
// ⚠️ 주의: 실제 .ts 파일에서는 <script> 태그를 작성하지 않습니다.
// ========================================== -->
<script>
// Nuxt에서는 전역 상태를 위해 useState를 사용합니다.
// 'theme' 이라는 고유 키값을 가지며, 기본값은 'light' 입니다.
export const useTheme = () => useState('theme', () => 'light')
</script>

<!-- ==========================================
// 📂 app/pages/index.vue (SEO와 전역 상태 적용)
// ========================================== -->
<template>
  <!-- 테마 상태값에 따라 배경색을 동적으로 바꿉니다. -->
  <div :class="theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-white text-black'" class="min-h-screen p-8">
    <h1 class="text-3xl font-bold mb-4">SEO 및 상태 예제</h1>
    
    <button 
      @click="theme = theme === 'light' ? 'dark' : 'light'"
      class="bg-indigo-500 text-white px-4 py-2 rounded shadow"
    >
      다크모드 토글 (현재: {{ theme }})
    </button>
  </div>
</template>

<script setup>
// 1. 위에서 만든 useState 훅을 바로 가져다 씁니다. (자동 임포트)
const theme = useTheme()

// 2. 이 페이지의 SEO 메타 태그를 완벽하게 세팅합니다. (서버에서 구워짐)
useSeoMeta({
  title: '멋진 Nuxt 홈페이지',
  description: 'Nuxt 4로 만든 빠르고 안전한 웹사이트입니다.',
  ogImage: 'https://example.com/banner.png',
  twitterCard: 'summary_large_image'
})
</script>

<!-- ==========================================
// 📂 app/error.vue (전역 에러 처리 컴포넌트)
// ========================================== -->
<template>
  <div class="h-screen flex flex-col items-center justify-center bg-gray-50 text-center">
    <!-- 에러 정보 객체(error)를 자동으로 전달받습니다. -->
    <h1 class="text-9xl font-bold text-red-500">{{ error.statusCode }}</h1>
    
    <p class="text-2xl mt-4 font-semibold text-gray-800">
      {{ error.statusCode === 404 ? '페이지를 찾을 수 없습니다.' : '서버에 문제가 발생했습니다.' }}
    </p>

    <p class="text-gray-500 mt-2">{{ error.message }}</p>

    <!-- 에러 상태를 초기화하고 홈으로 돌아가는 버튼 -->
    <button @click="handleError" class="mt-8 bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700">
      홈으로 돌아가기
    </button>
  </div>
</template>

<script setup>
// 이 페이지는 Nuxt가 에러 발생 시 자동으로 렌더링하며 error props를 내려줍니다.
const props = defineProps({
  error: Object
})

const handleError = () => {
  // clearError 훅을 실행하면 현재 에러 상태를 지우고, 지정된 경로로 리다이렉트합니다.
  clearError({ redirect: '/' })
}
</script>

<!-- ==========================================
// 📂 app/app.vue (페이지 전환 애니메이션 적용)
// ========================================== -->
<template>
  <NuxtLayout>
    <!-- transition 속성을 켜주면, 라우팅 시 자동으로 애니메이션 클래스가 붙습니다! -->
    <NuxtPage :transition="{
      name: 'page', // .page-enter-active 같은 CSS 클래스가 사용됨
      mode: 'out-in' // 이전 화면이 완전히 사라진 후 새 화면이 나타남
    }" />
  </NuxtLayout>
</template>

<!-- ==========================================
// 📂 server/api/hello.ts (백엔드 API 컨트롤러)
// ⚠️ 주의: 실제 .ts 파일에서는 <script> 태그를 작성하지 않습니다.
// ========================================== -->
<script>
// 이 파일은 프론트엔드가 아닌, Node.js 서버 환경에서 실행됩니다!
// 파일 이름이 'hello'이므로 URL 주소는 '/api/hello' 가 됩니다.
export default defineEventHandler((event) => {
  // 원한다면 이 안에서 MySQL, MongoDB, Oracle DB 등에 접속해서 
  // 데이터를 가져오는 코드를 작성할 수 있습니다.

  // 반환(return)된 객체는 자동으로 JSON 형태로 클라이언트에 전송됩니다.
  return {
    message: '안녕하세요! 서버에서 보낸 메시지입니다.',
    timestamp: new Date().toISOString()
  }
})
</script>

<!-- ==========================================
// 📂 app/pages/index.vue (프론트에서 API 호출)
// ========================================== -->
<template>
  <div class="p-8 text-center bg-gray-50 rounded-xl mt-10">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">풀스택 API 테스트</h1>
    
    <!-- 서버에서 응답한 JSON 데이터 전체가 깔끔하게 출력됩니다. -->
    <pre class="bg-black text-green-400 p-4 rounded text-left overflow-x-auto">
      {{ data }}
    </pre>
  </div>
</template>

<script setup>
// 위에서 만든 /api/hello 주소로 데이터 패칭을 시도합니다.
const { data } = await useFetch('/api/hello')
</script>

<!-- ==========================================
// 📂 composables/useMouse.ts
// 파일명이 카멜케이스이면 함수명과 일치시키는 것이 좋습니다.
// ========================================== -->
<script>
// 외부 라이브러리의 컴포저블을 래핑할 때도 유용합니다.
export const useMouse = () => {
  // ref, onMounted, onUnmounted 도 별도 import 없이 바로 사용 가능!
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}
</script>

<!-- ==========================================
// 📂 app.vue (최상위 컴포넌트)
// ========================================== -->
<script>
<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-4">마우스 위치 추적기</h1>
    
    <!-- useMouse에서 반환된 반응형 상태를 바로 바인딩 -->
    <p class="text-xl">X: <span class="text-emerald-500">{{ x }}</span></p>
    <p class="text-xl">Y: <span class="text-emerald-500">{{ y }}</span></p>
  </div>
</template>

<script setup>
// 💡 마법: import { ref } from 'vue' 도 없고, 
// import { useMouse } from '~/composables/useMouse' 도 없습니다!
// Nuxt가 빌드 시점에 자동으로 추적하여 연결해 줍니다.
const { x, y } = useMouse()
</script>
</script>

<!-- ==========================================
// 📂 nuxt.config.ts
// Nuxt 설정 파일에서 routeRules 객체를 선언합니다.
// ========================================== -->
<script>
export default defineNuxtConfig({
  routeRules: {
    // 1. 관리자 대시보드: SEO가 필요 없으므로 클라이언트에서만 렌더링 (SPA 모드)
    // 빠른 화면 전환과 서버 부하 감소를 노립니다.
    '/admin/**': { ssr: false },

    // 2. 블로그 게시물: 빌드 시점에 미리 HTML로 찍어냅니다. (SSG/Prerender 모드)
    // 블로그 포스트는 자주 바뀌지 않으므로 초고속 정적 파일 제공이 유리합니다.
    '/blog/**': { prerender: true },

    // 3. 상품 상세 페이지: ISR (SWR - Stale-While-Revalidate) 모드
    // 최초 요청 시 캐시하고, 이후 60초(3600초 등) 동안 캐시된 결과를 즉시 반환합니다.
    '/products/**': { swr: 60 },

    // 4. API 라우트: 다른 도메인에서도 이 API를 호출할 수 있도록 CORS 헤더를 추가합니다.
    '/api/v1/**': { cors: true },

    // 5. 이전 URL 리다이렉션: 구 주소로 접근하면 새 주소로 자동 연결
    '/old-page': { redirect: '/new-page' }
  }
})
</script>

<!-- ==========================================
// 📂 nuxt.config.ts (모듈 등록)
// ========================================== -->
<script>
export default defineNuxtConfig({
  // 방대한 플러그인 생태계를 단 한 줄로 연결합니다.
  modules: [
    '@nuxtjs/tailwindcss', // 꼬리바람 CSS 자동 설정
    '@pinia/nuxt',         // 전역 상태 관리 (Store)
    '@nuxt/image',         // 이미지 최적화
  ]
})
</script>

<!-- ==========================================
// 📂 middleware/auth.ts (인증 미들웨어)
// ========================================== -->
<script>
export default defineNuxtRouteMiddleware((to, from) => {
  // 예시: 전역 상태나 쿠키에서 인증 토큰을 확인합니다.
  const token = useCookie('auth_token')

  // 사용자가 이동하려는 페이지(to)가 마이페이지인데 토큰이 없다면?
  if (to.path.startsWith('/mypage') && !token.value) {
    // '/login' 페이지로 강제 이동(리다이렉트) 시킵니다.
    return navigateTo('/login')
  }
})
</script>

<!-- ==========================================
// 📂 app/pages/mypage/index.vue (미들웨어 적용)
// ========================================== -->
<script>
<template>
  <div class="p-8">
    <h1 class="text-xl font-bold">비밀 마이페이지 🤫</h1>
  </div>
</template>

<script setup>
// 페이지 레벨에서 특정 미들웨어만 선택적으로 실행되도록 지정합니다.
// 이 페이지에 접근하는 순간 위에서 만든 'auth' 미들웨어가 먼저 검사합니다.
definePageMeta({
  middleware: ['auth']
})
</script>
</script>