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)

// PC(데스크톱) 전용: 창 해상도 변경 (Electron preload 의 window.desktop 존재 시에만)
const isDesktop = typeof window !== 'undefined' && !!window.desktop
const RESOLUTIONS = [
  { label: '1024 × 720', w: 1024, h: 720 },
  { label: '1280 × 800', w: 1280, h: 800 },
  { label: '1366 × 768', w: 1366, h: 768 },
  { label: '1600 × 900', w: 1600, h: 900 },
  { label: '1920 × 1080', w: 1920, h: 1080 },
]
function onResolution(e) {
  const v = e.target.value
  if (!v) return
  const [w, h] = v.split('x').map(Number)
  window.desktop?.setWindowSize(w, h)
}

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>

    <!-- PC(데스크톱) 전용: 창 해상도 -->
    <section v-if="isDesktop" class="card">
      <div class="row">
        <div class="row-main">
          <span class="row-label">화면 해상도</span>
          <span class="row-sub">데스크톱 창 크기를 선택한 크기로 변경</span>
        </div>
        <select class="res-select" @change="onResolution">
          <option value="">선택</option>
          <option v-for="r in RESOLUTIONS" :key="r.label" :value="`${r.w}x${r.h}`">{{ r.label }}</option>
        </select>
      </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;
}
.res-select {
  flex: none;
  max-width: 150px;
}
.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>