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

<script setup>
import { RouterLink, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import IconBtn from '@/components/ui/IconBtn.vue'

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

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

<template>
  <header class="app-header">
    <div class="header-left">
      <button v-if="auth.isAuthenticated" 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>
      <RouterLink to="/" class="brand">
        <img class="brand-mark" src="/logo-piggy.png" alt="" aria-hidden="true" />
        <span class="brand-text">돈돼지 가계부</span>
      </RouterLink>
    </div>

    <div class="header-right">
      <template v-if="auth.isAuthenticated">
        <span class="username">{{ auth.user?.name || auth.user?.loginId }}님</span>
        <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;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-heading);
}
.brand:hover {
  background: transparent;
}
.brand-mark {
  height: 28px;
  width: auto;
  max-width: 38px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-text {
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.username {
  font-size: 0.9rem;
}

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