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

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

const router = useRouter()
const route = useRoute()

const isHome = computed(() => route.path === '/')
const isSettings = computed(() => route.path.startsWith('/settings'))

function goBack() {
  // 히스토리가 있으면 뒤로, 없으면 홈으로 (앱 첫 화면에서 빠져나가지 않게)
  if (window.history.length > 1) router.back()
  else router.push('/')
}
function goForward() {
  router.forward()
}
function goHome() {
  if (!isHome.value) router.push('/')
}
function refresh() {
  // 현재 화면 데이터를 다시 불러옴 — 저장된 세션은 복원되므로 로그아웃되지 않음
  window.location.reload()
}
function goSettings() {
  if (!isSettings.value) router.push('/settings')
}
</script>

<template>
  <nav class="bottom-nav" aria-label="앱 내비게이션">
    <button type="button" class="nav-btn" @click="goBack">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 12H5" /><path d="M12 19l-7-7 7-7" />
      </svg>
      <span>뒤로</span>
    </button>

    <button type="button" class="nav-btn" @click="goForward">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 12h14" /><path d="M12 5l7 7-7 7" />
      </svg>
      <span>앞으로</span>
    </button>

    <button type="button" class="nav-btn" :class="{ active: isHome }" @click="goHome">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><path d="M9 22V12h6v10" />
      </svg>
      <span>홈</span>
    </button>

    <button type="button" class="nav-btn" @click="refresh">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M23 4v6h-6" /><path d="M1 20v-6h6" />
        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10" /><path d="M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
      </svg>
      <span>새로고침</span>
    </button>

    <button type="button" class="nav-btn" :class="{ active: isSettings }" @click="goSettings">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M4 21v-7" /><path d="M4 10V3" /><path d="M12 21v-9" /><path d="M12 8V3" />
        <path d="M20 21v-5" /><path d="M20 12V3" /><path d="M1 14h6" /><path d="M9 8h6" /><path d="M17 16h6" />
      </svg>
      <span>설정</span>
    </button>
  </nav>
</template>

<style scoped>
.bottom-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 62px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--color-background-soft);
  border-top: 1px solid var(--color-border);
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.92;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.nav-btn span {
  line-height: 1;
}
.nav-btn svg {
  width: 25px;
  height: 25px;
}
.nav-btn:hover {
  opacity: 1;
}
.nav-btn:active {
  opacity: 0.5;
}
.nav-btn.active {
  color: hsla(160, 100%, 37%, 1);
  opacity: 1;
}
</style>