sb
cbb3d47bfa
- border-box 전역에서 고정 height 가 safe-area 패딩을 포함해 콘텐츠 행이 눌리던 문제 - AppBottomNav: height = calc(56px + safe-area-inset-bottom) → 아이콘 행 온전한 56px + 홈인디케이터 분리 - AppHeader: height → min-height → layout-top 상단 safe-area 패딩만큼 헤더가 커지도록 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
117 lines
4.6 KiB
Vue
117 lines
4.6 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { handleBack } from '@/composables/appBack'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const isHome = computed(() => route.path === '/')
|
|
const isSettings = computed(() => route.path.startsWith('/settings'))
|
|
|
|
function goBack() {
|
|
// 하드웨어 뒤로가기와 동일 동작(오버레이 닫기 → 화면 뒤로 → 최상위 종료 안내)
|
|
handleBack(router)
|
|
}
|
|
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" aria-label="뒤로" title="뒤로" @click="goBack">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M19 12H5" /><path d="M12 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button type="button" class="nav-btn" aria-label="앞으로" title="앞으로" @click="goForward">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M5 12h14" /><path d="M12 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button type="button" class="nav-btn" :class="{ active: isHome }" aria-label="홈" title="홈" @click="goHome">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.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>
|
|
</button>
|
|
|
|
<button type="button" class="nav-btn" aria-label="새로고침" title="새로고침" @click="refresh">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.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>
|
|
</button>
|
|
|
|
<button type="button" class="nav-btn" :class="{ active: isSettings }" aria-label="설정" title="설정" @click="goSettings">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bottom-nav {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: space-around;
|
|
/* 아이콘 행은 항상 56px 확보 + 그 아래로 홈 인디케이터(safe-area) 공간을 더한다.
|
|
(box-sizing:border-box 전역이라 height 에 인셋을 더해야 아이콘 행이 눌리지 않음) */
|
|
height: calc(56px + env(safe-area-inset-bottom, 0));
|
|
/* 안드로이드 소프트키·iOS 홈 인디케이터 영역 확보 */
|
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
background: var(--color-background-soft);
|
|
border-top: 1px solid var(--color-border);
|
|
/* 스크롤 콘텐츠와 시각적으로 분리(iOS 탭바처럼 은은한 상단 그림자) */
|
|
box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.07);
|
|
}
|
|
:global([data-theme='dark']) .bottom-nav {
|
|
box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.35);
|
|
}
|
|
.nav-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
opacity: 0.85;
|
|
transition: opacity 0.15s ease, color 0.15s ease;
|
|
}
|
|
.nav-btn svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.nav-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
.nav-btn:active {
|
|
opacity: 0.5;
|
|
}
|
|
.nav-btn.active {
|
|
color: hsla(160, 100%, 37%, 1);
|
|
opacity: 1;
|
|
}
|
|
</style>
|