- 하단 내비게이션(뒤로/앞으로/홈/새로고침/설정), 사이드바 홈 제거 - 설정 화면: 계정정보·앱 버전(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,145 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Preferences } from '@capacitor/preferences'
|
||||
|
||||
const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '-'
|
||||
const clearing = ref(false)
|
||||
|
||||
async function clearAppData() {
|
||||
if (clearing.value) return
|
||||
const ok = window.confirm(
|
||||
'앱에 저장된 모든 데이터(로그인 정보·캐시)를 삭제합니다.\n' +
|
||||
'삭제 후 로그아웃되며 첫 화면으로 이동합니다.\n계속하시겠습니까?',
|
||||
)
|
||||
if (!ok) return
|
||||
clearing.value = true
|
||||
try {
|
||||
try { await Preferences.clear() } catch { /* 네이티브 저장소 없음 무시 */ }
|
||||
try { localStorage.clear() } catch { /* 무시 */ }
|
||||
try { sessionStorage.clear() } catch { /* 무시 */ }
|
||||
try {
|
||||
if (window.caches?.keys) {
|
||||
const keys = await window.caches.keys()
|
||||
await Promise.all(keys.map((k) => window.caches.delete(k)))
|
||||
}
|
||||
} catch { /* 무시 */ }
|
||||
} finally {
|
||||
// 초기화 상태로 첫 화면 재시작
|
||||
window.location.replace('/')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings">
|
||||
<h1 class="page-title">설정</h1>
|
||||
|
||||
<section class="card">
|
||||
<RouterLink to="/settings/account" class="row row-link">
|
||||
<div class="row-main">
|
||||
<span class="row-label">계정정보</span>
|
||||
<span class="row-sub">아이디·이름·이메일 확인 및 변경</span>
|
||||
</div>
|
||||
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 18l6-6-6-6" />
|
||||
</svg>
|
||||
</RouterLink>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-main">
|
||||
<span class="row-label">앱 버전 정보</span>
|
||||
</div>
|
||||
<span class="row-value">v{{ appVersion }}</span>
|
||||
</div>
|
||||
|
||||
<button type="button" class="row row-btn" :disabled="clearing" @click="clearAppData">
|
||||
<div class="row-main">
|
||||
<span class="row-label danger">App Data 삭제</span>
|
||||
<span class="row-sub">저장된 로그인 정보·캐시를 모두 비웁니다</span>
|
||||
</div>
|
||||
<span class="row-value danger">{{ clearing ? '삭제 중…' : '삭제' }}</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<p class="copyright">© 2026 SlimBudget. All rights reserved.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settings {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--color-background-soft);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1.1rem;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.row-link,
|
||||
.row-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
.row-link:hover,
|
||||
.row-btn:hover:not(:disabled) {
|
||||
background: var(--color-background-mute);
|
||||
}
|
||||
.row-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.row-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.row-label {
|
||||
font-size: 0.98rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.row-sub {
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.row-value {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.danger {
|
||||
color: #c0392b;
|
||||
}
|
||||
.chevron {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.copyright {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user