sb-front/src/views/settings/SettingsView.vue

<script setup>
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
import { Preferences } from '@capacitor/preferences'
import { useDialog } from '@/composables/dialog'
import { useUiStore } from '@/stores/ui'

const dialog = useDialog()
const ui = useUiStore()
const THEMES = [
  { value: 'system', label: '시스템' },
  { value: 'light', label: '라이트' },
  { value: 'dark', label: '다크' },
]
const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '-'
const clearing = ref(false)

async function clearAppData() {
  if (clearing.value) return
  const ok = await dialog.confirm(
    '앱에 저장된 모든 데이터(로그인 정보·캐시)를 삭제합니다.\n삭제 후 로그아웃되며 첫 화면으로 이동합니다.\n계속하시겠습니까?',
    { title: 'App Data 삭제', okText: '삭제', danger: true },
  )
  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">

    <section class="card">
      <div class="row">
        <div class="row-main">
          <span class="row-label">화면 테마</span>
          <span class="row-sub">라이트 / 다크 모드 선택</span>
        </div>
        <div class="theme-seg">
          <button
            v-for="t in THEMES"
            :key="t.value"
            type="button"
            class="seg-btn"
            :class="{ active: ui.theme === t.value }"
            @click="ui.setTheme(t.value)"
          >{{ t.label }}</button>
        </div>
      </div>
    </section>

    <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 돈돼지 가계부. 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;
}
.theme-seg {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.seg-btn {
  padding: 0.4rem 0.7rem;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  font-size: 0.85rem;
  cursor: pointer;
}
.seg-btn:first-child {
  border-left: 0;
}
.seg-btn.active {
  background: hsla(160, 100%, 37%, 1);
  color: #fff;
  font-weight: 600;
}
.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>