🏗️ 레이아웃 구성 실습: 관리자/일반 페이지 구조 분리

대부분의 웹 애플리케이션은 공통 레이아웃 (헤더, 푸터, 사이드바가 있는 일반 페이지)과 특정 레이아웃 (사이드바가 길고 헤더가 없는 관리자 대시보드)을 필요로 합니다. Nuxt의 layouts/ 디렉토리는 이러한 구조를 파일 기반으로 쉽게 정의하고, 필요한 페이지에만 적용할 수 있도록 해줍니다.

이번 실습에서는 기본 레이아웃과 관리자 레이아웃을 분리하고, 특정 페이지에만 관리자 레이아웃을 적용해 봅시다.

1. 📂 Nuxt 레이아웃 시스템의 작동 원리

• layouts/default.vue: 이 파일은 Nuxt 앱의 모든 페이지에 명시적인 설정 없이 자동으로 적용되는 기본 레이아웃입니다.
• <slot />: 레이아웃 컴포넌트 내부에 이 태그를 배치해야 페이지 콘텐츠가 렌더링됩니다.
• definePageMeta: 개별 페이지에서 이 함수를 사용하여 사용할 레이아웃을 지정할 수 있습니다.

2. 👩‍💻 실습 1: 기본 레이아웃 (default.vue) 정의

먼저, 이전에 만든 <AppHeader />를 포함하여 모든 일반 페이지에 적용될 기본 레이아웃을 정의합니다.

1. layouts 폴더를 만들고, 그 안에 default.vue 파일을 생성합니다.

   <template>
     <div class="flex flex-col min-h-screen bg-gray-50">
       <AppHeader /> 
   
       <main class="flex-grow p-8 container mx-auto">
         <slot />
       </main>
   
       <footer class="p-4 bg-gray-200 text-center text-sm">
         &copy; {{ new Date().getFullYear() }} Nuxt App | All Rights Reserved.
       </footer>
     </div>
   </template>
   

2. 결과 확인: /, /about, /login 등 기존 페이지에 헤더와 푸터가 자동으로 추가된 것을 확인합니다. (기본 레이아웃은 별도 설정 없이 자동 적용됨)

3. 실습 2: 관리자 레이아웃 (admin.vue) 생성

관리자 페이지를 위한 새로운 레이아웃을 정의합니다. 관리자 페이지는 보통 좌측에 네비게이션이 있고, 상단 헤더는 생략하는 경우가 많습니다.

1. layouts/admin.vue 파일을 생성합니다.

   <template>
     <div class="flex min-h-screen bg-gray-100">
       <aside class="w-64 bg-gray-800 text-white p-4">
         <h2 class="text-2xl font-bold mb-6">관리자 메뉴</h2>
         <nav>
           <NuxtLink to="/admin" class="block py-2 hover:bg-gray-700 rounded transition duration-150">
             대시보드
           </NuxtLink>
           <NuxtLink to="/admin/users" class="block py-2 hover:bg-gray-700 rounded transition duration-150">
             사용자 관리
           </NuxtLink>
           </nav>
       </aside>
   
       <div class="flex-grow p-10">
         <slot /> 
       </div>
     </div>
   </template>
   

4. 실습 3: 페이지에 레이아웃 적용

이제 /admin 페이지를 만들고, 기본 레이아웃 대신 방금 만든 관리자 레이아웃을 명시적으로 지정해 봅시다.

1. pages/admin.vue 파일을 열고 <script setup> 블록에 다음 코드를 추가합니다.

   <template>
     <div>
       <h1 class="text-3xl font-bold mb-6">대시보드 요약</h1>
       <p>이 페이지는 관리자 전용 레이아웃을 사용합니다.</p>
       </div>
   </template>
   
   <script setup>
   // 1. 사용할 미들웨어 (이전에 만들었던 'auth')를 지정합니다.
   // 2. 사용할 레이아웃의 파일명 ('admin')을 지정합니다.
   definePageMeta({
     middleware: ['auth'],
     layout: 'admin', // layouts/admin.vue 파일을 사용!
   })
   </script>
   

2. 결과 확인:
   • http://localhost:3000/ (홈)에 접속하면 헤더/푸터가 있는 기본 레이아웃이 보입니다.
   • (로그인 후) http://localhost:3000/admin에 접속하면 좌측 사이드바가 있는 관리자 레이아웃이 보입니다.

📝 블로그 마무리: 구조적이고 깔끔한 앱

이번 실습을 통해 layouts/ 디렉토리와 definePageMeta를 활용하여 애플리케이션의 다양한 구조를 효율적으로 분리하고 적용하는 방법을 배웠습니다. 이로써 대규모 프로젝트에서도 일관성 있고 유지보수가 쉬운 UI 구조를 만들 수 있게 되었습니다.