sb-front/src/components/layout/AppHeader.vue

<script setup>
import { computed } from 'vue'
import { RouterLink, useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import { demo } from '@/demo'
import { boardLabel } from '@/constants/boards'
import IconBtn from '@/components/ui/IconBtn.vue'
import UserAvatar from '@/components/UserAvatar.vue'

const auth = useAuthStore()
const ui = useUiStore()
const router = useRouter()
const route = useRoute()

// 라우트별 헤더 타이틀(현재 화면 이름)
const TITLES = {
  home: '돈돼지 가계부',
  'demo-locked': '둘러보기',
  'account-entries': '가계부 내역',
  'account-stats': '통계',
  'account-recurrings': '고정 지출',
  'account-wallets': '계좌 관리',
  'account-categories': '분류 관리',
  'account-budget': '예산 설정',
  'account-tags': '태그 관리',
  'my-board': '내 글·댓글',
  users: '회원 관리',
  'admin-tags': '태그 관리(관리자)',
  'admin-default-categories': '기본 분류 설정',
  settings: '설정',
  'settings-account': '계정정보',
  'settings-account-edit': '가입정보 변경',
}
const pageTitle = computed(() => {
  const n = route.name
  if (n === 'board' || n === 'board-detail') return boardLabel(route.params.category)
  if (n === 'board-write' || n === 'board-edit') return route.params.id ? '글 수정' : '글쓰기'
  return TITLES[n] || '돈돼지 가계부'
})

async function handleLogout() {
  await auth.logout()
  router.replace('/')
}
</script>

<template>
  <header class="app-header">
    <div class="header-left">
      <button v-if="auth.isAuthenticated || demo.on" class="hamburger" type="button" aria-label="메뉴" @click="ui.toggleSidebar()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path d="M3 12h18" /><path d="M3 6h18" /><path d="M3 18h18" />
        </svg>
      </button>
      <h1 class="page-title">{{ pageTitle }}</h1>
    </div>

    <div class="header-right">
      <template v-if="auth.isAuthenticated">
        <RouterLink to="/settings/account" class="me" title="계정정보">
          <UserAvatar
            :name="auth.user?.name || auth.user?.loginId"
            :google-picture="auth.user?.googlePicture"
            :profile-image="auth.user?.profileImage"
            :size="26"
          />
          <span class="username">{{ auth.user?.name || auth.user?.loginId }}님</span>
        </RouterLink>
        <IconBtn icon="logout" title="로그아웃" @click="handleLogout" />
      </template>
      <IconBtn v-else icon="login" title="로그인" variant="primary" @click="ui.openLogin()" />
    </div>
  </header>
</template>

<style scoped>
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 1.5rem;
  background: var(--color-background-soft);
  border-bottom: 1px solid var(--color-border);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hamburger {
  display: none;
  padding: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  line-height: 0;
}
.hamburger svg {
  width: 22px;
  height: 22px;
}
.page-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.me {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text);
}
.me:hover {
  opacity: 0.85;
}
.username {
  font-size: 0.9rem;
}
@media (max-width: 480px) {
  /* 좁은 폰 화면: 이름 숨기고 아바타만 */
  .username {
    display: none;
  }
}

@media (max-width: 768px) {
  .hamburger {
    display: inline-flex;
  }
  .app-header {
    padding: 0 1rem;
  }
  /* 좁은 화면(폰/앱): 브랜드명 텍스트 숨기고 로고만 — 두 줄 줄바꿈 방지 */
  .brand-text {
    display: none;
  }
}
</style>