feat: 사이드바 브랜드/헤더 타이틀 + 라이트·다크 테마 설정

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
2026-06-27 22:15:27 +09:00
parent 63b4792e58
commit 75228cbb64
7 changed files with 187 additions and 42 deletions
+42 -19
View File
@@ -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 {