에셋 관리와 전역 스타일링

Nuxt 4에서는 정적 파일을 다루는 방법이 두 가지로 나뉩니다. 브라우저가 직접 접근해야 하는 파일(예: favicon.ico, robots.txt)은 public/ 폴더에 넣고, 빌드 과정(Sass 컴파일, JS 최소화 등)이 필요한 파일은 app/assets/ 폴더에 넣습니다.

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