From 75228cbb641d24b760b28f0b8430b822cd381106 Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Sat, 27 Jun 2026 22:15:27 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EB=B8=8C=EB=9E=9C=EB=93=9C/=ED=97=A4=EB=8D=94=20=ED=83=80?=
 =?UTF-8?q?=EC=9D=B4=ED=8B=80=20+=20=EB=9D=BC=EC=9D=B4=ED=8A=B8=C2=B7?=
 =?UTF-8?q?=EB=8B=A4=ED=81=AC=20=ED=85=8C=EB=A7=88=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1) 사이드바 상단에 돼지 로고 + '돈돼지 가계부'('메뉴' 텍스트 대체, 데스크톱/모바일 공통)
2) 헤더에서 돼지 로고 제거 → 현재 화면 타이틀 표시(라우트별)
3) 설정에 화면 테마(시스템/라이트/다크) 선택 추가
   - base.css: data-theme 기반 수동 다크 + 시스템 설정 폴백
   - theme.js 유틸 + ui 스토어 theme 상태, main.js 시작 시 적용(깜빡임 방지)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/assets/base.css                  | 18 +++++++-
 src/components/layout/AppHeader.vue  | 53 ++++++++++++++----------
 src/components/layout/AppSidebar.vue | 61 +++++++++++++++++++---------
 src/main.js                          |  4 ++
 src/stores/ui.js                     |  9 ++++
 src/theme.js                         | 34 ++++++++++++++++
 src/views/settings/SettingsView.vue  | 50 +++++++++++++++++++++++
 7 files changed, 187 insertions(+), 42 deletions(-)
 create mode 100644 src/theme.js

diff --git a/src/assets/base.css b/src/assets/base.css
index 8816868..b09de53 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -36,8 +36,22 @@
   --section-gap: 160px;
 }
 
+/* 다크 변수 묶음 — 명시적 다크(data-theme=dark)와 시스템 다크에서 공통 사용 */
+:root[data-theme='dark'] {
+  --color-background: var(--vt-c-black);
+  --color-background-soft: var(--vt-c-black-soft);
+  --color-background-mute: var(--vt-c-black-mute);
+
+  --color-border: var(--vt-c-divider-dark-2);
+  --color-border-hover: var(--vt-c-divider-dark-1);
+
+  --color-heading: var(--vt-c-text-dark-1);
+  --color-text: var(--vt-c-text-dark-1);
+}
+
+/* 시스템 설정 따름(테마 미지정 = 시스템). 명시적 라이트/다크가 있으면 그게 우선 */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme]) {
     --color-background: var(--vt-c-black);
     --color-background-soft: var(--vt-c-black-soft);
     --color-background-mute: var(--vt-c-black-mute);
@@ -46,7 +60,7 @@
     --color-border-hover: var(--vt-c-divider-dark-1);
 
     --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
+    --color-text: var(--vt-c-text-dark-1);
   }
 }
 
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 844eecd..2451b2a 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -1,12 +1,39 @@
 <script setup>
-import { RouterLink, useRouter } from 'vue-router'
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useUiStore } from '@/stores/ui'
+import { boardLabel } from '@/constants/boards'
 import IconBtn from '@/components/ui/IconBtn.vue'
 
 const auth = useAuthStore()
 const ui = useUiStore()
 const router = useRouter()
+const route = useRoute()
+
+// 라우트별 헤더 타이틀(현재 화면 이름)
+const TITLES = {
+  home: '돈돼지 가계부',
+  'account-entries': '가계부 내역',
+  'account-stats': '통계',
+  'account-recurrings': '고정 지출',
+  'account-wallets': '계좌 관리',
+  'account-categories': '분류 관리',
+  'account-budget': '예산 설정',
+  'account-tags': '태그 관리',
+  users: '회원 관리',
+  'admin-tags': '태그 관리(관리자)',
+  'admin-default-categories': '기본 분류 설정',
+  settings: '설정',
+  'settings-account': '계정정보',
+  'settings-account-edit': '가입정보 변경',
+}
+const pageTitle = computed(() => {
+  const n = route.name
+  if (n === 'board' || n === 'board-detail') return boardLabel(route.params.category)
+  if (n === 'board-write' || n === 'board-edit') return route.params.id ? '글 수정' : '글쓰기'
+  return TITLES[n] || '돈돼지 가계부'
+})
 
 async function handleLogout() {
   await auth.logout()
@@ -22,10 +49,7 @@ async function handleLogout() {
           <path d="M3 12h18" /><path d="M3 6h18" /><path d="M3 18h18" />
         </svg>
       </button>
-      <RouterLink to="/" class="brand">
-        <img class="brand-mark" src="/logo-piggy.png" alt="" aria-hidden="true" />
-        <span class="brand-text">돈돼지 가계부</span>
-      </RouterLink>
+      <h1 class="page-title">{{ pageTitle }}</h1>
     </div>
 
     <div class="header-right">
@@ -66,27 +90,14 @@ async function handleLogout() {
   width: 22px;
   height: 22px;
 }
-.brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
+.page-title {
   font-size: 1.2rem;
   font-weight: 700;
   color: var(--color-heading);
-}
-.brand:hover {
-  background: transparent;
-}
-.brand-mark {
-  height: 28px;
-  width: auto;
-  max-width: 38px;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-.brand-text {
   letter-spacing: -0.01em;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .header-right {
   display: flex;
diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
index 12a0951..9e128fb 100644
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@@ -25,7 +25,10 @@ const icons = {
 <template>
   <aside class="app-sidebar">
     <div class="drawer-head">
-      <span class="drawer-title">메뉴</span>
+      <RouterLink to="/" class="brand" @click="ui.closeSidebar()">
+        <img class="brand-mark" src="/logo-piggy.png" alt="" aria-hidden="true" />
+        <span class="brand-text">돈돼지 가계부</span>
+      </RouterLink>
       <button class="drawer-close" type="button" aria-label="닫기" @click="ui.closeSidebar()">×</button>
     </div>
     <nav class="menu">
@@ -100,31 +103,51 @@ const icons = {
   padding: 1rem 0;
 }
 .drawer-head {
-  display: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1.1rem 0.75rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--color-heading);
+}
+.brand:hover {
+  background: transparent;
+}
+.brand-mark {
+  height: 26px;
+  width: auto;
+  max-width: 34px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.brand-text {
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+}
+.drawer-close {
+  display: none; /* 데스크톱: 숨김 (모바일 드로어에서만 노출) */
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 1.6rem;
+  line-height: 1;
+  cursor: pointer;
 }
 @media (max-width: 768px) {
   .app-sidebar {
     background: var(--color-background);
     min-height: 100%;
   }
-  .drawer-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 0.75rem;
-    border-bottom: 1px solid var(--color-border);
-    margin-bottom: 0.5rem;
-  }
-  .drawer-title {
-    font-weight: 700;
-  }
   .drawer-close {
-    border: 0;
-    background: transparent;
-    color: var(--color-text);
-    font-size: 1.6rem;
-    line-height: 1;
-    cursor: pointer;
+    display: inline-flex;
   }
 }
 .menu {
diff --git a/src/main.js b/src/main.js
index 7c52f28..94501ba 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,10 @@ import router from './router'
 import { setupCapacitor } from './capacitor'
 import { useAuthStore } from './stores/auth'
 import { useDialog } from './composables/dialog'
+import { initTheme } from './theme'
+
+// 저장된 테마(라이트/다크/시스템) 즉시 적용 — 첫 렌더 깜빡임 방지
+initTheme()
 
 // 네이티브 alert 를 인앱 다이얼로그로 대체 (PC 'sb_pt' 제목 제거 + 웹/APK 일관).
 // confirm/prompt 는 동기 반환이라 오버라이드 불가 → 각 호출부에서 await dialog.confirm/prompt 사용.
diff --git a/src/stores/ui.js b/src/stores/ui.js
index 0f486b2..4f5d26b 100644
--- a/src/stores/ui.js
+++ b/src/stores/ui.js
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { authApi } from '@/api/authApi'
+import { getStoredTheme, setTheme as persistTheme } from '@/theme'
 
 // 전역 UI 상태 (로그인/회원가입 레이어 팝업 등)
 export const useUiStore = defineStore('ui', () => {
@@ -28,6 +29,13 @@ export const useUiStore = defineStore('ui', () => {
     sidebarOpen.value = false
   }
 
+  // 테마 (system | light | dark)
+  const theme = ref(getStoredTheme())
+  function setTheme(t) {
+    theme.value = t
+    persistTheme(t)
+  }
+
   // 비밀번호 변경 모달
   const passwordOpen = ref(false)
   function openPassword() {
@@ -63,5 +71,6 @@ export const useUiStore = defineStore('ui', () => {
     signupEnabled, loadSignupEnabled,
     sidebarOpen, toggleSidebar, closeSidebar,
     passwordOpen, openPassword, closePassword,
+    theme, setTheme,
   }
 })
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..f480fec
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,34 @@
+// 테마(라이트/다크/시스템) 적용 — <html data-theme> 속성으로 제어.
+//   light/dark : 명시 적용,  system : 속성 제거 → OS prefers-color-scheme 따름
+const KEY = 'theme'
+
+export function getStoredTheme() {
+  try {
+    return localStorage.getItem(KEY) || 'system'
+  } catch {
+    return 'system'
+  }
+}
+
+export function applyTheme(theme) {
+  const el = document.documentElement
+  if (theme === 'light' || theme === 'dark') {
+    el.setAttribute('data-theme', theme)
+  } else {
+    el.removeAttribute('data-theme') // system
+  }
+}
+
+export function setTheme(theme) {
+  try {
+    localStorage.setItem(KEY, theme)
+  } catch {
+    /* 저장 실패 무시 */
+  }
+  applyTheme(theme)
+}
+
+// 앱 시작 시 저장값 즉시 적용 (마운트 전 호출 → 깜빡임 방지)
+export function initTheme() {
+  applyTheme(getStoredTheme())
+}
diff --git a/src/views/settings/SettingsView.vue b/src/views/settings/SettingsView.vue
index bdcbbea..cb64d11 100644
--- a/src/views/settings/SettingsView.vue
+++ b/src/views/settings/SettingsView.vue
@@ -3,8 +3,15 @@ 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)
 
@@ -37,6 +44,25 @@ async function clearAppData() {
   <div class="settings">
     <h1 class="page-title">설정</h1>
 
+    <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">
@@ -132,6 +158,30 @@ async function clearAppData() {
 .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;