<template>
  <header class="user--header">
    <div class="sub--header--wrap">
      <NuxtLink to="/" class="back--btn"></NuxtLink>
      <h2 v-if="title">{{ title }}</h2>
    </div>
  </header>
</template>

<script setup>
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 동적 override (API 응답 등으로 title을 setup 이후 바꿔야 할 때)
const overrideTitle = useState('page_title', () => '')

// 라우트 바뀌면 override 자동 초기화 (이전 페이지 값 안 남게)
watch(() => route.path, () => {
  overrideTitle.value = ''
})

// 표시할 title: override가 우선, 없으면 route.meta.title
const title = computed(() => overrideTitle.value || route.meta?.title || '')
</script>
