<template>
  <div class="max-w-2xl mx-auto mt-10">
    
    <!-- 네비게이션 영역 -->
    <nav class="flex gap-4 mb-8 border-b pb-4">
      <!-- 🚨 <a> 태그 대신 무조건 <router-link>를 쓰세요! (새로고침 방지) -->
      <router-link to="/" class="text-blue-600 font-bold hover:underline">
        홈으로
      </router-link>
      
      <!-- /user/777 경로로 이동하도록 설정 -->
      <router-link to="/user/777" class="text-blue-600 font-bold hover:underline">
        내 정보(777)
      </router-link>
    </nav>

    <!-- [핵심] 매칭된 컴포넌트가 이 구멍(router-view) 안에 렌더링됩니다! -->
    <main class="p-6 bg-slate-800 shadow rounded-lg border border-slate-700">
      <router-view /> 
    </main>
    
  </div>
</template>