- 하단 내비게이션(뒤로/앞으로/홈/새로고침/설정), 사이드바 홈 제거 - 설정 화면: 계정정보·앱 버전(package.json)·App Data 삭제 - 가입정보 변경: 비밀번호 재인증 → 이름/이메일 수정 - 로그인 후 대시보드(/) 이동, 로그인 전 햄버거·네이버 로그인 버튼 숨김 - Vitest 도입(32): authApi/accountApi 와이어링, auth/ui 스토어, 로그인 플로우 - CI(.gitea): npm test 게이트 추가 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,111 @@
|
||||
<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: 56px;
|
||||
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.15rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
font-size: 0.68rem;
|
||||
opacity: 0.78;
|
||||
transition: opacity 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.nav-btn svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.nav-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.nav-btn:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.nav-btn.active {
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -17,7 +17,7 @@ async function handleLogout() {
|
||||
<template>
|
||||
<header class="app-header">
|
||||
<div class="header-left">
|
||||
<button class="hamburger" type="button" aria-label="메뉴" @click="ui.toggleSidebar()">
|
||||
<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>
|
||||
|
||||
@@ -15,11 +15,8 @@ const ui = useUiStore()
|
||||
<button class="drawer-close" type="button" aria-label="닫기" @click="ui.closeSidebar()">×</button>
|
||||
</div>
|
||||
<nav class="menu">
|
||||
<RouterLink to="/" class="menu-item">홈</RouterLink>
|
||||
|
||||
<!-- 가계부 영역 -->
|
||||
<!-- 가계부 영역 (홈은 하단 내비게이션으로 이동) -->
|
||||
<template v-if="auth.isAuthenticated">
|
||||
<hr class="menu-divider" />
|
||||
<RouterLink to="/account/entries" class="menu-item">가계부 내역</RouterLink>
|
||||
<RouterLink to="/account/stats" class="menu-item">통계</RouterLink>
|
||||
<RouterLink to="/account/recurrings" class="menu-item">고정 지출</RouterLink>
|
||||
|
||||
Reference in New Issue
Block a user