feat: 앱 하단 내비게이션·설정/계정정보·가입정보 변경 + 프론트 테스트·CI 게이트

- 하단 내비게이션(뒤로/앞으로/홈/새로고침/설정), 사이드바 홈 제거
- 설정 화면: 계정정보·앱 버전(package.json)·App Data 삭제
- 가입정보 변경: 비밀번호 재인증 → 이름/이메일 수정
- 로그인 후 대시보드(/) 이동, 로그인 전 햄버거·네이버 로그인 버튼 숨김
- Vitest 도입(32): authApi/accountApi 와이어링, auth/ui 스토어, 로그인 플로우
- CI(.gitea): npm test 게이트 추가

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/views/settings/AccountInfoView.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+const u = computed(() => auth.user || {})
+const isLocal = computed(() => (u.value.provider || 'LOCAL') === 'LOCAL')
+
+const providerLabel = computed(() => {
+  switch (u.value.provider) {
+    case 'NAVER': return '네이버'
+    case 'LOCAL':
+    default: return '일반(아이디/비밀번호)'
+  }
+})
+const roleLabel = computed(() => (u.value.role === 'ADMIN' ? '관리자' : '일반회원'))
+
+function goEdit() {
+  router.push('/settings/account/edit')
+}
+function goBack() {
+  router.push('/settings')
+}
+</script>
+
+<template>
+  <div class="account-info">
+    <button type="button" class="back" @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>
+
+    <h1 class="page-title">계정정보</h1>
+
+    <section class="card">
+      <div class="row">
+        <span class="k">아이디</span>
+        <span class="v">{{ u.loginId || '-' }}</span>
+      </div>
+      <div class="row">
+        <span class="k">이름</span>
+        <span class="v">{{ u.name || '-' }}</span>
+      </div>
+      <div class="row">
+        <span class="k">이메일</span>
+        <span class="v">{{ u.email || '-' }}</span>
+      </div>
+      <div class="row">
+        <span class="k">가입유형</span>
+        <span class="v">{{ providerLabel }}</span>
+      </div>
+      <div class="row">
+        <span class="k">권한</span>
+        <span class="v">{{ roleLabel }}</span>
+      </div>
+    </section>
+
+    <button v-if="isLocal" type="button" class="primary-btn" @click="goEdit">정보변경</button>
+    <p v-else class="hint">소셜 로그인 계정은 앱에서 가입정보를 변경할 수 없습니다.</p>
+  </div>
+</template>
+
+<style scoped>
+.account-info {
+  max-width: 560px;
+  margin: 0 auto;
+}
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-bottom: 0.75rem;
+  padding: 0.3rem 0.1rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.back:hover {
+  opacity: 1;
+}
+.back svg {
+  width: 18px;
+  height: 18px;
+}
+.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;
+  gap: 1rem;
+  padding: 0.95rem 1.1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.row:last-child {
+  border-bottom: 0;
+}
+.k {
+  font-size: 0.88rem;
+  opacity: 0.65;
+}
+.v {
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-align: right;
+  word-break: break-all;
+}
+.primary-btn {
+  width: 100%;
+  margin-top: 1.25rem;
+  padding: 0.8rem 1rem;
+  border: 1px solid hsla(160, 100%, 37%, 1);
+  border-radius: 8px;
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-size: 0.98rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.primary-btn:hover {
+  background: hsla(160, 100%, 32%, 1);
+}
+.hint {
+  margin-top: 1.25rem;
+  font-size: 0.85rem;
+  opacity: 0.6;
+  text-align: center;
+}
+</style>

src/views/settings/ProfileEditView.vue

@@ -0,0 +1,238 @@
+<script setup>
+import { reactive, ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { authApi } from '@/api/authApi'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+const step = ref('verify') // 'verify' → 'edit'
+const password = ref('')
+const form = reactive({ name: '', email: '' })
+const loading = ref(false)
+const error = ref('')
+
+onMounted(() => {
+  // 소셜 계정은 비밀번호 인증 불가 → 계정정보로 돌려보냄
+  if ((auth.user?.provider || 'LOCAL') !== 'LOCAL') {
+    router.replace('/settings/account')
+  }
+})
+
+async function verify() {
+  error.value = ''
+  if (!password.value) {
+    error.value = '비밀번호를 입력하세요.'
+    return
+  }
+  loading.value = true
+  try {
+    await authApi.verifyPassword(password.value)
+    // 인증 통과 → 현재 값으로 폼 채우고 변경 화면 진입
+    form.name = auth.user?.name || ''
+    form.email = auth.user?.email || ''
+    step.value = 'edit'
+  } catch (e) {
+    error.value = e.response?.data?.message || '비밀번호 인증에 실패했습니다.'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function save() {
+  error.value = ''
+  const name = form.name.trim()
+  if (!name) {
+    error.value = '이름을 입력하세요.'
+    return
+  }
+  const email = form.email.trim()
+  if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    error.value = '이메일 형식이 올바르지 않습니다.'
+    return
+  }
+  loading.value = true
+  try {
+    const res = await authApi.updateProfile({ name, email: email || null })
+    await auth.applyUser({ name: res.name, email: res.email })
+    window.alert('가입정보가 변경되었습니다.')
+    router.push('/settings/account')
+  } catch (e) {
+    error.value = e.response?.data?.message || '가입정보 변경에 실패했습니다.'
+  } finally {
+    loading.value = false
+  }
+}
+
+function cancel() {
+  router.push('/settings/account')
+}
+</script>
+
+<template>
+  <div class="profile-edit">
+    <button type="button" class="back" @click="cancel">
+      <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>
+
+    <h1 class="page-title">가입정보 변경</h1>
+
+    <!-- 1단계: 비밀번호 재인증 -->
+    <form v-if="step === 'verify'" class="card form" @submit.prevent="verify">
+      <p class="guide">본인 확인을 위해 비밀번호를 입력하세요.</p>
+      <label class="field">
+        <span class="flabel">비밀번호</span>
+        <input
+          v-model="password" type="password" autocomplete="current-password"
+          placeholder="현재 비밀번호" :disabled="loading"
+        />
+      </label>
+      <p v-if="error" class="error">{{ error }}</p>
+      <button class="primary-btn" type="submit" :disabled="loading">
+        {{ loading ? '확인 중…' : '확인' }}
+      </button>
+    </form>
+
+    <!-- 2단계: 가입정보 변경 -->
+    <form v-else class="card form" @submit.prevent="save">
+      <label class="field">
+        <span class="flabel">아이디</span>
+        <input :value="auth.user?.loginId" type="text" disabled />
+        <span class="fnote">아이디는 변경할 수 없습니다.</span>
+      </label>
+      <label class="field">
+        <span class="flabel">이름</span>
+        <input v-model="form.name" type="text" maxlength="100" placeholder="이름" :disabled="loading" />
+      </label>
+      <label class="field">
+        <span class="flabel">이메일</span>
+        <input v-model="form.email" type="email" maxlength="255" placeholder="이메일 (선택)" :disabled="loading" />
+      </label>
+      <p v-if="error" class="error">{{ error }}</p>
+      <div class="actions">
+        <button class="ghost-btn" type="button" :disabled="loading" @click="cancel">취소</button>
+        <button class="primary-btn" type="submit" :disabled="loading">
+          {{ loading ? '저장 중…' : '저장' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.profile-edit {
+  max-width: 560px;
+  margin: 0 auto;
+}
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-bottom: 0.75rem;
+  padding: 0.3rem 0.1rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.back:hover {
+  opacity: 1;
+}
+.back svg {
+  width: 18px;
+  height: 18px;
+}
+.page-title {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+.card {
+  background: var(--color-background-soft);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 1.25rem 1.1rem;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.guide {
+  font-size: 0.88rem;
+  opacity: 0.7;
+  margin: 0;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.flabel {
+  font-size: 0.82rem;
+  opacity: 0.7;
+}
+.field input {
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 0.95rem;
+}
+.field input:disabled {
+  opacity: 0.6;
+}
+.fnote {
+  font-size: 0.74rem;
+  opacity: 0.5;
+}
+.error {
+  margin: 0;
+  color: #c0392b;
+  font-size: 0.85rem;
+}
+.actions {
+  display: flex;
+  gap: 0.6rem;
+}
+.actions .primary-btn {
+  flex: 1;
+}
+.primary-btn {
+  padding: 0.75rem 1rem;
+  border: 1px solid hsla(160, 100%, 37%, 1);
+  border-radius: 8px;
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.primary-btn:hover:not(:disabled) {
+  background: hsla(160, 100%, 32%, 1);
+}
+.primary-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.ghost-btn {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+.ghost-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>

src/views/settings/SettingsView.vue

@@ -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>