sb/sb-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 홈 일별 캘린더·시세 갱신·게시판 카테고리·약관동의·계좌 마스킹

Browse Source 
- 홈: 6월 예산 아래 일별 수입/지출 캘린더(마우스오버/탭 시 내역 목록)
- 투자: 시세 자동조회 버튼/진입 시 갱신, 보유종목 2줄 표기, 평가액 직접입력
- 게시판: 커뮤니티/짠테크 수다방/재테크 팁 분리, 사이드바 영역 구분선
- 회원가입: 이용약관·개인정보 수집 동의(필수 체크)
- 보안: 계좌번호 화면 마스킹(끝 4자리+눈 토글)
- 정기→고정지출, 내역/정기 라디오·sticky 저장, 태그 드래그 정렬
- fix: 모바일웹 새로고침 시 로그인 팝업(restore localStorage 우선)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
2026-06-04 05:01:33 +09:00
parent 67aa635dd8
commit 4e6a89fd7a
17 changed files with 1022 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/HomeView.vue
+228 -2
View File
@@ -17,6 +17,7 @@ const summary = ref({ totalIncome: 0, totalExpense: 0, balance: 0 })
const networth = ref({ totalAssets: 0, totalLiabilities: 0, netWorth: 0 })
const budgetTotal = ref(0)
const spentTotal = ref(0)
const entries = ref([])
const loading = ref(false)
const error = ref(null)
@@ -33,13 +34,61 @@ function won(n) {
return (n ?? 0).toLocaleString('ko-KR')
}
// ===== 일별 수입/지출 캘린더 =====
const WEEKDAYS = ['일', '월', '화', '수', '목', '금', '토']
// 일자 → { income, expense, items[] }
const dayMap = computed(() => {
const m = {}
for (const e of entries.value) {
const d = (e.entryDate || '').slice(0, 10)
const day = Number(d.slice(8, 10))
if (!day) continue
if (!m[day]) m[day] = { income: 0, expense: 0, items: [] }
if (e.type === 'INCOME') m[day].income += e.amount || 0
else if (e.type === 'EXPENSE') m[day].expense += e.amount || 0
m[day].items.push(e)
}
return m
})
const daysInMonth = computed(() => new Date(year, month, 0).getDate())
const firstWeekday = computed(() => new Date(year, month - 1, 1).getDay()) // 0=일
const todayDate = now.getFullYear() === year && now.getMonth() + 1 === month ? now.getDate() : 0
const calendarCells = computed(() => {
const cells = []
for (let i = 0; i < firstWeekday.value; i++) cells.push(null)
for (let d = 1; d <= daysInMonth.value; d++) {
const info = dayMap.value[d] || { income: 0, expense: 0, items: [] }
cells.push({ day: d, ...info })
}
return cells
})
// 마우스 오버 / 탭한 날짜의 내역 목록
const activeDay = ref(0)
const activeItems = computed(() => (activeDay.value ? dayMap.value[activeDay.value]?.items || [] : []))
const activeDateLabel = computed(() => {
if (!activeDay.value) return ''
const wd = WEEKDAYS[new Date(year, month - 1, activeDay.value).getDay()]
return `${month}월 ${activeDay.value}일 (${wd})`
})
function itemLabel(e) {
if (e.type === 'TRANSFER') return '이체'
return e.category || (e.type === 'INCOME' ? '수입' : '지출')
}
function itemSign(t) {
return t === 'INCOME' ? '+' : t === 'EXPENSE' ? '-' : ''
}
// 가계부 주요 화면 바로가기
const shortcuts = [
{ to: '/account/entries', icon: '📒', label: '가계부 내역', desc: '수입·지출 기록' },
{ to: '/account/stats', icon: '📊', label: '통계', desc: '차트로 보기' },
{ to: '/account/wallets', icon: '🏦', label: '계좌 관리', desc: '자산·부채' },
{ to: '/account/budget', icon: '🎯', label: '예산 설정', desc: '예산 대비 지출' },
{ to: '/account/recurrings', icon: '🔁', label: '정기 거래', desc: '반복 수입·지출' },
{ to: '/account/recurrings', icon: '🔁', label: '고정 지출', desc: '매월·매년 반복' },
{ to: '/account/categories', icon: '🗂️', label: '분류 관리', desc: '카테고리' },
]
@@ -48,15 +97,17 @@ async function load() {
loading.value = true
error.value = null
try {
const [sum, nw, status] = await Promise.all([
const [sum, nw, status, list] = await Promise.all([
accountApi.summary({ year, month }),
accountApi.netWorth(),
accountApi.budgetStatus({ year, month }),
accountApi.list({ year, month }),
])
summary.value = sum
networth.value = nw
budgetTotal.value = (status || []).reduce((s, x) => s + (x.monthlyBudget || 0), 0)
spentTotal.value = (status || []).reduce((s, x) => s + (x.spent || 0), 0)
entries.value = list || []
} catch (e) {
error.value = e.response?.data?.message || '요약을 불러오지 못했습니다.'
} finally {
@@ -72,6 +123,8 @@ watch(() => auth.isAuthenticated, (v) => {
networth.value = { totalAssets: 0, totalLiabilities: 0, netWorth: 0 }
budgetTotal.value = 0
spentTotal.value = 0
entries.value = []
activeDay.value = 0
}
})
@@ -159,6 +212,52 @@ onMounted(load)
<RouterLink v-else to="/account/budget" class="budget-empty">예산을 설정하면 지출 진행률을 볼 수 있어요 →</RouterLink>
</div>
<!-- 일별 수입/지출 캘린더 -->
<div class="card cal-card">
<div class="card-head">
<span class="card-title">{{ month }}월 일별 수입·지출</span>
<RouterLink to="/account/entries" class="more">내역 →</RouterLink>
</div>
<div class="cal-grid cal-head">
<span v-for="(w, i) in WEEKDAYS" :key="w" class="cal-wd" :class="{ sun: i === 0, sat: i === 6 }">{{ w }}</span>
</div>
<div class="cal-grid">
<template v-for="(c, i) in calendarCells" :key="i">
<span v-if="!c" class="cal-cell empty"></span>
<button
v-else
type="button"
class="cal-cell"
:class="{ today: c.day === todayDate, active: c.day === activeDay, has: c.items.length }"
@mouseenter="activeDay = c.day"
@click="activeDay = activeDay === c.day ? 0 : c.day"
>
<span class="cal-day">{{ c.day }}</span>
<span v-if="c.income" class="cal-amt income">+{{ won(c.income) }}</span>
<span v-if="c.expense" class="cal-amt expense">-{{ won(c.expense) }}</span>
</button>
</template>
</div>
<!-- 선택/오버한 날짜의 내역 목록 -->
<div class="cal-detail" :class="{ open: activeDay && activeItems.length }">
<template v-if="activeDay && activeItems.length">
<div class="cd-date">{{ activeDateLabel }}</div>
<ul class="cd-list">
<li v-for="(e, idx) in activeItems" :key="idx" class="cd-item">
<span class="cd-cat">{{ itemLabel(e) }}</span>
<span v-if="e.memo" class="cd-memo">{{ e.memo }}</span>
<span class="cd-amt" :class="{ income: e.type === 'INCOME', expense: e.type === 'EXPENSE' }">
{{ itemSign(e.type) }}{{ won(e.amount) }}
</span>
</li>
</ul>
</template>
<p v-else class="cd-hint">날짜에 마우스를 올리거나 탭하면 내역이 표시됩니다.</p>
</div>
</div>
<!-- 바로가기 -->
<div class="shortcuts">
<RouterLink v-for="s in shortcuts" :key="s.to" :to="s.to" class="shortcut">
@@ -317,6 +416,133 @@ onMounted(load)
color: hsla(160, 100%, 37%, 1);
}
/* 일별 캘린더 */
.cal-card {
margin-bottom: 1.2rem;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
}
.cal-head {
margin-bottom: 4px;
}
.cal-wd {
text-align: center;
font-size: 0.72rem;
opacity: 0.6;
padding: 2px 0;
}
.cal-wd.sun {
color: #c0392b;
}
.cal-wd.sat {
color: #2c6bbf;
}
.cal-cell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
min-height: 46px;
padding: 3px 4px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-background);
color: var(--color-text);
cursor: pointer;
overflow: hidden;
}
.cal-cell.empty {
border: none;
background: transparent;
cursor: default;
min-height: 0;
}
.cal-cell.has {
border-color: hsla(160, 100%, 37%, 0.4);
}
.cal-cell.today {
box-shadow: inset 0 0 0 1.5px hsla(160, 100%, 37%, 0.8);
}
.cal-cell.active {
background: hsla(160, 100%, 37%, 0.12);
border-color: hsla(160, 100%, 37%, 0.7);
}
.cal-day {
font-size: 0.72rem;
font-weight: 600;
opacity: 0.75;
}
.cal-amt {
font-size: 0.62rem;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-amt.income {
color: #2e7d32;
}
.cal-amt.expense {
color: #c0392b;
}
.cal-detail {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid var(--color-border);
min-height: 1.2rem;
}
.cd-date {
font-size: 0.82rem;
font-weight: 700;
margin-bottom: 0.4rem;
}
.cd-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cd-item {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 0.82rem;
}
.cd-cat {
font-weight: 600;
flex-shrink: 0;
}
.cd-memo {
opacity: 0.6;
font-size: 0.76rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cd-amt {
margin-left: auto;
font-weight: 700;
white-space: nowrap;
}
.cd-amt.income {
color: #2e7d32;
}
.cd-amt.expense {
color: #c0392b;
}
.cd-hint {
font-size: 0.78rem;
opacity: 0.5;
margin: 0;
}
/* 바로가기 그리드 */
.shortcuts {
display: grid;