dognation_PT/src/layouts/MainLayout.vue

<template>
  <q-layout view="hHh lpR fFf">
    <q-header class="bg-primary text-white safe-top">
      <q-toolbar>
        <q-toolbar-title class="text-weight-bold">
          <q-icon name="pets" class="q-mr-sm" />산책갈개
        </q-toolbar-title>
        <q-chip dense color="white" text-color="primary" icon="bolt">
          {{ tierLabel }}
        </q-chip>
        <q-btn flat round dense icon="account_circle">
          <q-menu>
            <q-list style="min-width: 160px">
              <q-item>
                <q-item-section>
                  <q-item-label class="text-weight-medium">{{ auth.member?.nickname }}</q-item-label>
                  <q-item-label caption>{{ auth.member?.email }}</q-item-label>
                </q-item-section>
              </q-item>
              <q-separator />
              <q-item clickable v-close-popup @click="onLogout">
                <q-item-section avatar><q-icon name="logout" /></q-item-section>
                <q-item-section>로그아웃</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>

    <!-- FREE 티어 하단 배너 광고 -->
    <AdBanner />

    <q-footer class="bg-white text-grey-8 safe-bottom">
      <q-tabs
        v-model="tab"
        active-color="primary"
        indicator-color="primary"
        class="text-grey-6"
      >
        <q-route-tab name="home" :to="{ name: 'home' }" icon="map" label="산책 스팟" />
        <q-route-tab name="profile" :to="{ name: 'profile' }" icon="pets" label="우리 개" />
      </q-tabs>
    </q-footer>
  </q-layout>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import AdBanner from '@/components/AdBanner.vue'
import { useSubscriptionStore } from '@/stores/subscription'
import { useAuthStore } from '@/stores/auth'
import { useDogsStore } from '@/stores/dogs'

const tab = ref('home')
const subscription = useSubscriptionStore()
const auth = useAuthStore()
const dogs = useDogsStore()
const router = useRouter()

const tierLabel = computed(() => {
  switch (subscription.tier) {
    case 'PREMIUM':
      return 'PREMIUM'
    case 'AD_FREE':
      return '광고제거'
    default:
      return 'FREE'
  }
})

async function onLogout() {
  await auth.logout()
  dogs.reset()
  router.replace({ name: 'login' })
}
</script>