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/api/accountApi.js
+9
View File
@@ -109,6 +109,12 @@ export const accountApi = {
removeHolding(id) {
return http.delete(`/account/invest/holdings/${id}`)
},
refreshPrices(walletId) {
return http.post('/account/invest/holdings/refresh-prices', null, { params: { walletId } })
},
refreshAllPrices() {
return http.post('/account/invest/refresh-prices')
},
holdingTrades(holdingId) {
return http.get(`/account/invest/holdings/${holdingId}/trades`)
},
@@ -152,6 +158,9 @@ export const accountApi = {
removeTag(id) {
return http.delete(`/account/tags/${id}`)
},
reorderTags(ids) {
return http.put('/account/tags/reorder', { ids })
},
// 카드 결제 알림 자동인식 (미확인 내역)
pendingCount() {
src/api/boardApi.js
+2 -1
View File
@@ -2,9 +2,10 @@ import http from './http'
// 백엔드 /api/board 엔드포인트와 매핑
export const boardApi = {
list({ page = 1, size = 10, tag = '', keyword = '', searchType = '' } = {}) {
list({ category = '', page = 1, size = 10, tag = '', keyword = '', searchType = '' } = {}) {
return http.get('/board/posts', {
params: {
category: category || undefined,
page,
size,
tag: tag || undefined,
src/components/SignupModal.vue
+116 -1
View File
@@ -1,7 +1,8 @@
<script setup>
import { reactive, ref, watch, onMounted, onUnmounted } from 'vue'
import { reactive, ref, watch, computed, onMounted, onUnmounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import { TERMS_OF_SERVICE, PRIVACY_POLICY } from '@/constants/terms'
const auth = useAuthStore()
const ui = useUiStore()
@@ -10,12 +11,29 @@ const form = reactive({ loginId: '', password: '', passwordConfirm: '', name: ''
const loading = ref(false)
const error = ref(null)
// 약관 동의 상태
const agree = reactive({ terms: false, privacy: false })
const openDoc = ref('') // 'terms' | 'privacy' | '' (열린 전문)
const allAgreed = computed({
get: () => agree.terms && agree.privacy,
set: (v) => {
agree.terms = v
agree.privacy = v
},
})
function toggleDoc(key) {
openDoc.value = openDoc.value === key ? '' : key
}
// 팝업이 열릴 때마다 입력값 초기화
watch(
() => ui.signupOpen,
(open) => {
if (open) {
Object.assign(form, { loginId: '', password: '', passwordConfirm: '', name: '', email: '' })
agree.terms = false
agree.privacy = false
openDoc.value = ''
error.value = null
}
},
@@ -35,6 +53,10 @@ async function handleSignup() {
error.value = '비밀번호가 일치하지 않습니다.'
return
}
if (!agree.terms || !agree.privacy) {
error.value = '필수 약관에 동의해 주세요.'
return
}
loading.value = true
try {
await auth.signup({
@@ -73,6 +95,37 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
<input v-model="form.passwordConfirm" type="password" placeholder="비밀번호 확인" autocomplete="new-password" :disabled="loading" />
<input v-model="form.name" type="text" placeholder="이름" :disabled="loading" />
<input v-model="form.email" type="email" placeholder="이메일 (선택)" autocomplete="email" :disabled="loading" />
<!-- 약관 동의 -->
<div class="agree">
<label class="agree-all">
<input v-model="allAgreed" type="checkbox" :disabled="loading" />
<span>약관에 모두 동의합니다.</span>
</label>
<div class="agree-row">
<label class="agree-item">
<input v-model="agree.terms" type="checkbox" :disabled="loading" />
<span><b class="req">[필수]</b> 이용약관 동의</span>
</label>
<button type="button" class="doc-toggle" @click="toggleDoc('terms')">
{{ openDoc === 'terms' ? '닫기' : '보기' }}
</button>
</div>
<pre v-if="openDoc === 'terms'" class="doc-box">{{ TERMS_OF_SERVICE }}</pre>
<div class="agree-row">
<label class="agree-item">
<input v-model="agree.privacy" type="checkbox" :disabled="loading" />
<span><b class="req">[필수]</b> 개인정보 수집·이용 동의</span>
</label>
<button type="button" class="doc-toggle" @click="toggleDoc('privacy')">
{{ openDoc === 'privacy' ? '닫기' : '보기' }}
</button>
</div>
<pre v-if="openDoc === 'privacy'" class="doc-box">{{ PRIVACY_POLICY }}</pre>
</div>
<button class="submit" type="submit" :disabled="loading">{{ loading ? '처리 중...' : '회원가입' }}</button>
</form>
@@ -103,6 +156,8 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
position: relative;
width: 100%;
max-width: 360px;
max-height: 90vh;
overflow-y: auto;
padding: 1.75rem 1.5rem 1.5rem;
background: var(--color-background);
border: 1px solid var(--color-border);
@@ -151,6 +206,66 @@ h2 {
opacity: 0.6;
cursor: not-allowed;
}
/* 약관 동의 */
.agree {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.6rem 0.2rem 0.2rem;
border-top: 1px solid var(--color-border);
margin-top: 0.1rem;
}
.agree-all {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.9rem;
font-weight: 600;
}
.agree-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.agree-item {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.85rem;
cursor: pointer;
}
.agree-item input {
flex-shrink: 0;
}
.req {
color: hsla(160, 100%, 37%, 1);
}
.doc-toggle {
flex-shrink: 0;
padding: 0.15rem 0.5rem;
border: 1px solid var(--color-border);
border-radius: 4px;
background: var(--color-background-soft);
color: var(--color-text);
font-size: 0.78rem;
cursor: pointer;
}
.doc-box {
max-height: 180px;
overflow-y: auto;
margin: 0;
padding: 0.6rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: 4px;
background: var(--color-background-soft);
color: var(--color-text);
font-family: inherit;
font-size: 0.76rem;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.links {
margin-top: 1.25rem;
text-align: center;
src/components/layout/AppSidebar.vue
+25 -11
View File
@@ -2,6 +2,7 @@
import { RouterLink } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import { BOARDS } from '@/constants/boards'
const auth = useAuthStore()
const ui = useUiStore()
@@ -15,18 +16,34 @@ const ui = useUiStore()
</div>
<nav class="menu">
<RouterLink to="/" class="menu-item">홈</RouterLink>
<!-- 가계부 영역 -->
<template v-if="auth.isAuthenticated">
<hr class="menu-divider" />
<RouterLink to="/account/entries" class="menu-item">가계부 내역</RouterLink>
<RouterLink to="/account/stats" class="menu-item">통계</RouterLink>
<RouterLink to="/account/recurrings" class="menu-item">정기 거래</RouterLink>
<RouterLink to="/account/recurrings" class="menu-item">고정 지출</RouterLink>
<RouterLink to="/account/wallets" class="menu-item">계좌 관리</RouterLink>
<RouterLink to="/account/categories" class="menu-item">분류 관리</RouterLink>
<RouterLink to="/account/budget" class="menu-item">예산 설정</RouterLink>
<RouterLink to="/account/tags" class="menu-item">태그 관리</RouterLink>
<RouterLink to="/board" class="menu-item">자유게시판</RouterLink>
<!-- 게시판 영역 -->
<hr class="menu-divider" />
<RouterLink
v-for="b in BOARDS"
:key="b.key"
:to="`/board/${b.key}`"
class="menu-item"
>{{ b.label }}</RouterLink>
</template>
<!-- 관리자 영역 -->
<template v-if="auth.user?.role === 'ADMIN'">
<hr class="menu-divider" />
<RouterLink to="/users" class="menu-item">회원 관리</RouterLink>
<RouterLink to="/admin/tags" class="menu-item">태그 관리(관리자)</RouterLink>
</template>
<RouterLink v-if="auth.user?.role === 'ADMIN'" to="/users" class="menu-item">회원 관리</RouterLink>
<RouterLink v-if="auth.user?.role === 'ADMIN'" to="/admin/tags" class="menu-item">태그 관리(관리자)</RouterLink>
</nav>
</aside>
</template>
@@ -74,10 +91,10 @@ const ui = useUiStore()
color: var(--color-text);
font-size: 0.95rem;
}
.menu-item.sub {
padding: 0.5rem 1.5rem 0.5rem 2.6rem;
font-size: 0.88rem;
opacity: 0.9;
.menu-divider {
border: 0;
border-top: 1px solid var(--color-border);
margin: 0.5rem 1.5rem;
}
.menu-item:hover {
background: var(--color-background-mute);
@@ -89,7 +106,4 @@ const ui = useUiStore()
padding-left: calc(1.5rem - 3px);
background: transparent;
}
.menu-item.sub.router-link-exact-active {
padding-left: calc(2.6rem - 3px);
}
</style>
src/constants/boards.js
+19
View File
@@ -0,0 +1,19 @@
// 게시판(보드) 구분. key = 라우트 파라미터 = 백엔드 category 값
export const BOARDS = [
{ key: 'community', label: '커뮤니티' },
{ key: 'saving', label: '짠테크 수다방' },
{ key: 'tips', label: '재테크 팁' },
]
export const DEFAULT_BOARD = 'community'
export function boardLabel(key) {
return BOARDS.find((b) => b.key === key)?.label || '커뮤니티'
}
export function isBoard(key) {
return BOARDS.some((b) => b.key === key)
}
// 라우트 파라미터 정규식 (라우터 path 제약용)
export const BOARD_PARAM = BOARDS.map((b) => b.key).join('|')
src/constants/terms.js
+58
View File
@@ -0,0 +1,58 @@
// 회원가입 약관 본문. 모달에서 '전문 보기'로 노출.
// 서비스명: Slim Budget (가계부·자산·예산 관리)
export const SERVICE_NAME = 'Slim Budget'
export const TERMS_OF_SERVICE = `제1조 (목적)
이 약관은 ${SERVICE_NAME}(이하 "서비스")가 제공하는 가계부·자산·예산 관리 서비스의 이용과 관련하여 서비스와 회원 간의 권리, 의무 및 책임사항을 규정함을 목적으로 합니다.
제2조 (정의)
1. "회원"이란 본 약관에 동의하고 서비스에 가입하여 이용하는 자를 말합니다.
2. "계정"이란 회원 식별과 서비스 이용을 위해 회원이 등록한 아이디와 비밀번호를 말합니다.
제3조 (약관의 효력 및 변경)
1. 본 약관은 회원이 가입 시 동의함으로써 효력이 발생합니다.
2. 서비스는 관련 법령을 위반하지 않는 범위에서 약관을 변경할 수 있으며, 변경 시 적용일자와 사유를 명시하여 사전에 공지합니다.
제4조 (서비스의 이용)
1. 회원은 본인이 입력한 가계부·자산·거래 내역 등 개인 데이터를 본인만 열람·관리할 수 있습니다.
2. 서비스는 회원이 입력한 데이터의 보관 및 처리를 제공하며, 그 정확성에 대한 책임은 입력한 회원에게 있습니다.
3. 본 서비스가 제공하는 통계·시세 등 정보는 참고용이며, 투자 권유나 재무 자문이 아닙니다. 시세 정보는 제3자 출처를 인용하므로 지연·오류가 있을 수 있습니다.
제5조 (회원의 의무)
1. 회원은 계정 정보를 직접 관리할 책임이 있으며, 이를 타인에게 양도하거나 대여할 수 없습니다.
2. 회원은 타인의 정보를 도용하거나 서비스 운영을 방해하는 행위를 하여서는 안 됩니다.
제6조 (게시물)
회원이 게시판 등에 작성한 게시물의 권리와 책임은 작성자에게 있으며, 서비스 운영이나 타인의 권리를 침해하는 게시물은 사전 통지 없이 제한될 수 있습니다.
제7조 (계약 해지)
회원은 언제든지 탈퇴를 요청할 수 있으며, 탈퇴 시 회원의 데이터는 관련 법령에서 정한 경우를 제외하고 지체 없이 삭제됩니다.
제8조 (면책)
서비스는 천재지변, 회원의 귀책사유, 제3자 서비스(시세 제공처 등)의 장애 등 합리적으로 통제할 수 없는 사유로 인한 손해에 대하여 책임을 지지 않습니다.
부칙
본 약관은 가입 시점부터 적용됩니다.`
export const PRIVACY_POLICY = `${SERVICE_NAME}는 회원가입 및 서비스 제공을 위해 아래와 같이 개인정보를 수집·이용합니다.
1. 수집 항목
- 필수: 아이디, 비밀번호(암호화 저장), 이름
- 선택: 이메일
- 서비스 이용 과정에서 회원이 직접 입력하는 가계부·자산·거래 내역 등
2. 수집·이용 목적
- 회원 식별 및 로그인 등 계정 관리
- 가계부·자산·예산 관리 기능 제공 및 회원 데이터 보관
- 서비스 운영, 문의 응대 및 부정 이용 방지
3. 보유 및 이용 기간
- 회원 탈퇴 시까지 보유하며, 탈퇴 시 지체 없이 파기합니다.
- 다만 관련 법령에 따라 보존이 필요한 경우 해당 기간 동안 보관합니다.
4. 동의 거부 권리 및 불이익
- 회원은 개인정보 수집·이용 동의를 거부할 권리가 있습니다.
- 다만 필수 항목에 동의하지 않을 경우 회원가입 및 서비스 이용이 제한됩니다.
비밀번호는 복호화가 불가능한 방식으로 암호화하여 저장되며, 운영자도 원문을 확인할 수 없습니다.`
src/router/index.js
+8 -4
View File
@@ -17,30 +17,34 @@ const router = createRouter({
component: () => import('../views/UsersView.vue'),
meta: { requiresAuth: true, requiresAdmin: true },
},
// 게시판: 카테고리(community/saving/tips)별 목록·작성·상세·수정
{ path: '/board', redirect: '/board/community' },
{
path: '/board',
path: '/board/:category(community|saving|tips)',
name: 'board',
component: () => import('../views/board/BoardListView.vue'),
meta: { requiresAuth: true },
},
{
path: '/board/write',
path: '/board/:category(community|saving|tips)/write',
name: 'board-write',
component: () => import('../views/board/BoardWriteView.vue'),
meta: { requiresAuth: true },
},
{
path: '/board/:id(\\d+)',
path: '/board/:category(community|saving|tips)/:id(\\d+)',
name: 'board-detail',
component: () => import('../views/board/BoardDetailView.vue'),
meta: { requiresAuth: true },
},
{
path: '/board/:id(\\d+)/edit',
path: '/board/:category(community|saving|tips)/:id(\\d+)/edit',
name: 'board-edit',
component: () => import('../views/board/BoardWriteView.vue'),
meta: { requiresAuth: true },
},
// 구버전 링크(/board/123) 호환 — 커뮤니티 상세로 이동
{ path: '/board/:id(\\d+)', redirect: (to) => `/board/community/${to.params.id}` },
{
path: '/admin/tags',
name: 'admin-tags',
src/stores/auth.js
+15 -6
View File
@@ -24,27 +24,36 @@ export const useAuthStore = defineStore('auth', () => {
}
async function persist() {
// localStorage 미러는 항상 먼저(동기) — Preferences 실패해도 토큰 유실 없음
mirrorLocal()
try {
if (token.value) await Preferences.set({ key: TOKEN_KEY, value: token.value })
else await Preferences.remove({ key: TOKEN_KEY })
if (user.value) await Preferences.set({ key: USER_KEY, value: JSON.stringify(user.value) })
else await Preferences.remove({ key: USER_KEY })
} catch {
// Preferences 사용 불가(일부 모바일 웹/시크릿 모드) — localStorage 미러로 충분
}
}
// 앱/웹 시작 시 저장된 세션 복원 (자동 로그인). main.js 에서 mount 전 await.
async function restore() {
// 1) localStorage 우선 — 웹에서 항상 동작하고 http.js 의 토큰 소스와 동일.
// (Preferences.get 가 모바일 웹에서 throw 해도 토큰을 잃지 않도록 먼저 읽는다)
let t = localStorage.getItem(TOKEN_KEY) || ''
let uRaw = localStorage.getItem(USER_KEY)
// 2) 네이티브(Preferences)에만 있고 localStorage 에 없으면 보강. 실패해도 무시.
try {
const t = (await Preferences.get({ key: TOKEN_KEY })).value || localStorage.getItem(TOKEN_KEY) || ''
const uRaw = (await Preferences.get({ key: USER_KEY })).value || localStorage.getItem(USER_KEY)
if (!t) t = (await Preferences.get({ key: TOKEN_KEY })).value || ''
if (!uRaw) uRaw = (await Preferences.get({ key: USER_KEY })).value || null
} catch {
// Preferences 사용 불가(일부 모바일 웹/시크릿 모드) — localStorage 값으로 진행
}
token.value = t
user.value = safeParse(uRaw)
mirrorLocal()
} catch {
// 무시 — 비로그인 상태로 시작
} finally {
ready.value = true
}
}
async function login(loginId, password, rememberMe = false) {
const res = await authApi.login({ loginId, password, rememberMe })
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;
src/views/account/AccountTagView.vue
+54 -5
View File
@@ -1,6 +1,7 @@
<script setup>
import { onMounted, ref } from 'vue'
import { onBeforeUnmount, onMounted, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import Sortable from 'sortablejs'
import { accountApi } from '@/api/accountApi'
import IconBtn from '@/components/ui/IconBtn.vue'
@@ -23,6 +24,37 @@ async function load() {
}
}
// ===== 드래그앤드랍 정렬 (SortableJS, 터치 지원) =====
const listEl = ref(null)
let sortable = null
function initSortable() {
if (sortable) {
sortable.destroy()
sortable = null
}
if (!listEl.value) return
sortable = Sortable.create(listEl.value, {
handle: '.drag-handle',
animation: 150,
onEnd: (evt) => {
if (evt.oldIndex === evt.newIndex) return
const arr = tags.value
const moved = arr.splice(evt.oldIndex, 1)[0]
arr.splice(evt.newIndex, 0, moved)
persistOrder(arr.map((t) => t.id))
},
})
}
async function persistOrder(ids) {
try {
await accountApi.reorderTags(ids)
await load()
} catch (e) {
alert(e.response?.data?.message || '순서 저장에 실패했습니다.')
await load()
}
}
async function addTag() {
const name = newName.value.trim()
if (!name) return
@@ -56,7 +88,12 @@ async function removeTag(tag) {
}
}
onMounted(load)
onMounted(async () => {
await load()
await nextTick()
initSortable()
})
onBeforeUnmount(() => sortable?.destroy())
</script>
<template>
@@ -75,14 +112,15 @@ onMounted(load)
<p v-if="error" class="msg error">{{ error }}</p>
<p v-if="loading" class="msg">불러오는 중...</p>
<ul v-else-if="tags.length" class="tag-list">
<li v-for="t in tags" :key="t.id" class="tag-row">
<ul v-show="!loading && tags.length" ref="listEl" class="tag-list">
<li v-for="t in tags" :key="t.id" :data-id="t.id" class="tag-row">
<span class="drag-handle" title="드래그하여 순서 변경">≡</span>
<input v-model="t.name" class="tag-name" @keyup.enter="saveTag(t)" />
<IconBtn icon="check" title="저장" @click="saveTag(t)" />
<IconBtn icon="trash" title="삭제" variant="danger" @click="removeTag(t)" />
</li>
</ul>
<p v-else-if="!loading" class="msg">등록된 태그가 없습니다.</p>
<p v-if="!loading && !tags.length" class="msg">등록된 태그가 없습니다.</p>
</section>
</template>
@@ -143,6 +181,17 @@ button.danger {
padding: 0.4rem 0;
border-bottom: 1px solid var(--color-border);
}
.drag-handle {
cursor: grab;
user-select: none;
opacity: 0.5;
font-size: 1.1rem;
padding: 0 0.2rem;
touch-action: none;
}
.drag-handle:active {
cursor: grabbing;
}
.tag-name {
flex: 1;
}
src/views/account/AccountView.vue
+74 -22
View File
@@ -363,7 +363,7 @@ function todayStr() {
function openCreate() {
editId.value = null
editingPending.value = false
Object.assign(form, { entryDate: todayStr(), type: 'EXPENSE', category: '', amount: null, memo: '', walletKind: '', walletId: '', toWalletKind: '', toWalletId: '', principal: null, interest: null, installmentMonths: '' })
Object.assign(form, { entryDate: todayStr(), type: 'EXPENSE', category: '', amount: null, memo: '', walletKind: 'BANK', walletId: '', toWalletKind: '', toWalletId: '', principal: null, interest: null, installmentMonths: '' })
selectedTagIds.value = []
cancelAddCategory()
formError.value = null
@@ -378,7 +378,7 @@ function openEdit(e) {
category: e.category || '',
amount: e.amount,
memo: e.memo || '',
walletKind: walletKindOf(e.walletId),
walletKind: e.walletId ? walletKindOf(e.walletId) : (e.type === 'TRANSFER' ? '' : 'CASH'),
walletId: e.walletId || '',
toWalletKind: walletKindOf(e.toWalletId),
toWalletId: e.toWalletId || '',
@@ -653,21 +653,27 @@ onMounted(async () => {
<option v-if="!editId" value="REPAYMENT">상환/납부</option>
</select>
</label>
<!-- 계좌 종류 먼저 선택 → 해당 종류만 목록에 -->
<label>계좌 종류
<select v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange">
<option value="">{{ form.type === 'INCOME' || form.type === 'EXPENSE' ? '(선택 안 함)' : '(선택)' }}</option>
<option v-for="k in WALLET_KINDS" :key="k.value" :value="k.value">{{ k.label }}</option>
</select>
<!-- 계좌 종류 먼저 선택(라디오) → 해당 종류만 셀렉트에 -->
<div class="field">
<div class="field-row">
<span class="field-label">계좌 종류</span>
<div class="wallet-radios">
<label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
<input type="radio" :value="k.value" v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange" />
{{ k.label }}
</label>
<label v-if="form.walletKind">{{ form.type === 'INCOME' || form.type === 'EXPENSE' ? '계좌/카드' : '출금 계좌' }}
<select v-model="form.walletId" :disabled="submitting">
<option value="">(선택)</option>
<label v-if="form.type !== 'TRANSFER'" class="radio">
<input type="radio" value="CASH" v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange" /> 현금
</label>
</div>
</div>
<select v-if="form.walletKind && form.walletKind !== 'CASH'" v-model="form.walletId" :disabled="submitting">
<option value="">{{ form.type === 'INCOME' || form.type === 'EXPENSE' ? '계좌/카드 선택' : '출금 계좌 선택' }}</option>
<option v-for="w in walletsOfKind" :key="w.id" :value="w.id">
{{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
</option>
</select>
</label>
</div>
<!-- 카드 지출: 할부 개월수 (일시불 또는 2~24개월) -->
<label v-if="showInstallment">할부
<select v-model="form.installmentMonths" :disabled="submitting">
@@ -677,20 +683,23 @@ onMounted(async () => {
<small v-if="installmentMonthly" class="install-hint">월 약 {{ won(installmentMonthly) }}원</small>
</label>
<template v-if="form.type === 'TRANSFER'">
<label>입금 종류
<select v-model="form.toWalletKind" :disabled="submitting" @change="onToWalletKindChange">
<option value="">(선택)</option>
<option v-for="k in WALLET_KINDS" :key="k.value" :value="k.value">{{ k.label }}</option>
</select>
<div class="field">
<div class="field-row">
<span class="field-label">입금 종류</span>
<div class="wallet-radios">
<label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
<input type="radio" :value="k.value" v-model="form.toWalletKind" :disabled="submitting" @change="onToWalletKindChange" />
{{ k.label }}
</label>
<label v-if="form.toWalletKind">입금 계좌
<select v-model="form.toWalletId" :disabled="submitting">
<option value="">(선택)</option>
</div>
</div>
<select v-if="form.toWalletKind" v-model="form.toWalletId" :disabled="submitting">
<option value="">입금 계좌 선택</option>
<option v-for="w in toWalletsOfKind" :key="w.id" :value="w.id">
{{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
</option>
</select>
</label>
</div>
</template>
<!-- 상환/납부: 대상(대출/카드) + 원금 + 이자 -->
@@ -1071,7 +1080,10 @@ button.primary {
position: relative;
width: 100%;
max-width: 360px;
padding: 1.75rem 1.5rem 1.5rem;
/* 폼이 길어도 모달 안에서 스크롤되도록 + 하단 소프트키/제스처바 안전영역 확보 */
max-height: calc(100vh - 2rem);
overflow-y: auto;
padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: 8px;
@@ -1207,6 +1219,41 @@ button.primary {
background: var(--color-background-soft);
color: var(--color-text);
}
/* 계좌 종류 라디오 (라벨+라디오 한 줄, 선택 종류는 셀렉트로 아래) */
.field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.field-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.field-label {
font-size: 0.82rem;
flex-shrink: 0;
}
.wallet-radios {
display: flex;
flex: 1;
min-width: 0;
flex-wrap: wrap;
gap: 0.3rem 0.5rem;
}
.wallet-radios .radio {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.15rem;
font-size: 0.82rem;
cursor: pointer;
}
.wallet-radios .radio input {
padding: 0;
width: auto;
margin: 0;
}
.cat-input {
display: flex;
gap: 0.4rem;
@@ -1287,6 +1334,11 @@ button.primary {
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.5rem;
/* 폼이 길 때도 저장/취소 버튼이 항상 보이도록 하단 고정 */
position: sticky;
bottom: calc(-1.5rem - env(safe-area-inset-bottom));
padding: 0.6rem 0 0.2rem;
background: var(--color-background);
}
.fade-enter-active,
.fade-leave-active {
src/views/account/AccountWalletView.vue
+89 -6
View File
@@ -51,6 +51,23 @@ function syncRows() {
}
watch([wallets, activeType], syncRows, { immediate: true })
// 탭 선택 — 투자 탭이면 전체 시세를 갱신해 계좌 평가액에 반영
const refreshingInvest = ref(false)
async function selectTab(key) {
activeType.value = key
if (key === 'INVEST' && wallets.value.some((w) => w.type === 'INVEST')) {
refreshingInvest.value = true
try {
await accountApi.refreshAllPrices()
await load()
} catch {
// 시세 갱신 실패는 조용히 무시(기존 값 유지)
} finally {
refreshingInvest.value = false
}
}
}
// ===== 드래그앤드랍 순서 변경 (SortableJS, 터치 지원) =====
const listEl = ref(null)
let sortable = null
@@ -128,6 +145,25 @@ function entryDate(v) {
function won(n) {
return (n ?? 0).toLocaleString('ko-KR')
}
// 계좌번호 마스킹: 끝 4자리만 노출(구분자 유지), 눈 버튼으로 전체 보기 토글
const revealedAccts = ref(new Set())
function maskAccount(num) {
if (!num) return ''
const digitCount = (num.match(/\d/g) || []).length
if (digitCount <= 4) return num
const keep = digitCount - 4
let seen = 0
return num.replace(/\d/g, (d) => {
seen += 1
return seen <= keep ? '*' : d
})
}
function toggleReveal(id) {
const s = new Set(revealedAccts.value)
s.has(id) ? s.delete(id) : s.add(id)
revealedAccts.value = s
}
function issuerLabel(t) {
return t === 'BANK' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
}
@@ -272,12 +308,13 @@ onBeforeUnmount(() => sortable?.destroy())
:key="t.key"
type="button"
:class="{ active: activeType === t.key }"
@click="activeType = t.key"
@click="selectTab(t.key)"
>{{ t.label }}</button>
</div>
<IconBtn class="tab-add" icon="plus" title="추가" variant="primary" @click="openCreate" />
</div>
<p v-if="refreshingInvest" class="msg refresh-note">시세 갱신 중…</p>
<p v-if="error" class="msg error">{{ error }}</p>
<p v-if="loading" class="msg">불러오는 중...</p>
@@ -293,8 +330,16 @@ onBeforeUnmount(() => sortable?.destroy())
</div>
<span class="sub">
{{ w.issuer }}
<template v-if="w.type === 'BANK' && w.accountNumber"> · {{ w.accountNumber }}</template>
<template v-if="w.type === 'INVEST'"> · 예수금 {{ won(w.deposit) }} · 주식 {{ won(w.stockValue) }}</template>
<template v-if="w.type === 'BANK' && w.accountNumber">
· {{ revealedAccts.has(w.id) ? w.accountNumber : maskAccount(w.accountNumber) }}
<button
type="button" class="acct-eye"
:title="revealedAccts.has(w.id) ? '가리기' : '전체 보기'"
@click.stop="toggleReveal(w.id)"
>{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button>
</template>
<template v-if="w.type === 'INVEST' && w.manualValuation"> · 평가액 직접입력</template>
<template v-else-if="w.type === 'INVEST'"> · 예수금 {{ won(w.deposit) }} · 주식 {{ won(w.stockValue) }}</template>
</span>
</div>
<div class="balance-wrap">
@@ -314,7 +359,11 @@ onBeforeUnmount(() => sortable?.destroy())
<!-- 드롭다운: 투자는 포트폴리오, 그 외는 계좌별 내역 -->
<div v-if="expandedId === w.id" class="entry-drop">
<InvestPortfolio v-if="w.type === 'INVEST'" :wallet-id="w.id" @changed="load" />
<div v-if="w.type === 'INVEST' && w.manualValuation" class="manual-note">
<p>평가액을 <b>직접 입력</b>하는 계좌입니다. 종목을 관리하지 않고 입력한 현재 평가액({{ won(w.currentValue) }})을 사용합니다.</p>
<p class="manual-sub">평가액을 갱신하려면 위 <b>수정</b>에서 ‘현재 평가액’을 바꾸세요. 종목으로 자동계산하려면 평가액을 비우면 됩니다.</p>
</div>
<InvestPortfolio v-else-if="w.type === 'INVEST'" :wallet-id="w.id" @changed="load" />
<template v-else>
<p v-if="loadingEntries" class="drop-msg">불러오는 중...</p>
<ul v-else-if="(entriesByWallet[w.id] || []).length" class="drop-list">
@@ -352,9 +401,15 @@ onBeforeUnmount(() => sortable?.destroy())
</select>
</label>
<label>{{ openingLabel(form.type) }}<input v-model.number="form.openingBalance" type="number" min="0" :disabled="submitting" /></label>
<p v-if="form.type === 'INVEST'" class="form-hint">
증권계좌 입금은 은행→투자 ‘이체’로 기록하세요. 계좌를 펼치면 <b>종목·매수/매도·현재가</b>를 관리할 수 있고, 평가금액·손익은 자동 계산됩니다.
<template v-if="form.type === 'INVEST'">
<label>현재 평가액 (직접 입력)
<input v-model.number="form.currentValue" type="number" min="0" placeholder="(선택) 퇴직연금·연금처럼 종목 관리가 어려운 계좌" :disabled="submitting" />
</label>
<p class="form-hint">
증권계좌 입금은 은행→투자 ‘이체’로 기록하세요. 계좌를 펼치면 <b>종목·매수/매도·현재가</b>를 관리할 수 있고, 평가금액·손익은 자동 계산됩니다.<br />
<b>퇴직연금·연금</b>처럼 종목 단위 관리가 어려우면 위 <b>현재 평가액</b>만 주기적으로 갱신하세요. 입력하면 종목 자동계산 대신 이 값을 평가액으로 사용합니다.
</p>
</template>
<label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>
<p v-if="formError" class="msg error">{{ formError }}</p>
@@ -505,6 +560,22 @@ button.primary {
opacity: 0.65;
padding: 0.5rem 0;
}
.refresh-note {
font-size: 0.82rem;
opacity: 0.6;
}
.manual-note {
padding: 0.6rem 0.2rem;
font-size: 0.85rem;
}
.manual-note p {
margin: 0 0 0.3rem;
}
.manual-note .manual-sub {
opacity: 0.6;
font-size: 0.78rem;
margin: 0;
}
.drop-list {
list-style: none;
}
@@ -560,6 +631,18 @@ button.primary {
font-size: 0.82rem;
opacity: 0.7;
}
.acct-eye {
border: 0;
background: transparent;
padding: 0 0.15rem;
font-size: 0.78rem;
line-height: 1;
cursor: pointer;
opacity: 0.7;
}
.acct-eye:hover {
opacity: 1;
}
.balance-wrap {
text-align: right;
white-space: nowrap;
src/views/account/InvestPortfolio.vue
+78 -4
View File
@@ -70,6 +70,27 @@ async function load() {
}
}
// 종목코드로 현재가 시세 일괄 갱신
const refreshing = ref(false)
const refreshMsg = ref('')
async function refreshPrices() {
if (refreshing.value) return
refreshing.value = true
refreshMsg.value = ''
try {
holdings.value = await accountApi.refreshPrices(props.walletId)
emit('changed')
const noTicker = holdings.value.filter((h) => !h.ticker).length
refreshMsg.value = noTicker
? `시세 갱신 완료 · 종목코드 없는 ${noTicker}개는 제외`
: '시세 갱신 완료'
} catch {
refreshMsg.value = '시세 갱신에 실패했습니다.'
} finally {
refreshing.value = false
}
}
/* ===== 종목 ===== */
function openAddHolding() {
holdingEditId.value = null
@@ -189,15 +210,29 @@ async function removeTrade(t, holdingId) {
}
}
onMounted(load)
onMounted(async () => {
await load()
// 투자 계좌를 펼치면 종목코드 있는 종목 현재가를 자동으로 시세 갱신
if (holdings.value.some((h) => h.ticker)) {
refreshPrices()
}
})
</script>
<template>
<div class="portfolio">
<div class="pf-head">
<span class="pf-title">보유 종목</span>
<div class="pf-head-btns">
<button
type="button" class="refresh-btn"
:disabled="refreshing || !holdings.length"
@click="refreshPrices"
>{{ refreshing ? '갱신 중…' : '↻ 시세 갱신' }}</button>
<IconBtn icon="plus" title="종목 추가" variant="primary" size="sm" @click="openAddHolding" />
</div>
</div>
<p v-if="refreshMsg" class="pf-refresh-msg">{{ refreshMsg }}</p>
<p v-if="loading" class="pf-msg">불러오는 중...</p>
<p v-else-if="!holdings.length" class="pf-msg">보유 종목이 없습니다. 종목을 추가하고 매수를 기록하세요.</p>
@@ -210,12 +245,15 @@ onMounted(load)
<div>
<div class="h-name">{{ h.name }}<span v-if="h.ticker" class="h-ticker">{{ h.ticker }}</span></div>
<div class="h-sub">
{{ shares(h.quantity) }}주 · 평단 {{ won(h.avgPrice) }}
<div class="h-sub-qty">{{ shares(h.quantity) }}주</div>
<div class="h-sub-price">
평단 {{ won(h.avgPrice) }}
<template v-if="h.currentPrice != null"> · 현재가 {{ won(h.currentPrice) }}</template>
<span v-else class="noprice"> · 현재가 미입력</span>
</div>
</div>
</div>
</div>
<div class="h-val">
<div class="h-eval">{{ won(h.evalValue) }}</div>
<div class="h-gain" :class="h.evalGain < 0 ? 'neg' : 'pos'">
@@ -257,8 +295,9 @@ onMounted(load)
<h2>종목 {{ holdingEditId ? '수정' : '추가' }}</h2>
<form class="pf-form" @submit.prevent="submitHolding">
<label>종목명<input v-model="hForm.name" type="text" placeholder="예: 삼성전자" :disabled="hSubmitting" /></label>
<label>종목코드<input v-model="hForm.ticker" type="text" placeholder="(선택) 예: 005930" :disabled="hSubmitting" /></label>
<label>현재가<input v-model.number="hForm.currentPrice" type="number" min="0" placeholder="(수동 갱신)" :disabled="hSubmitting" /></label>
<label>종목코드<input v-model="hForm.ticker" type="text" placeholder="예: 005930 (국내 상장)" :disabled="hSubmitting" /></label>
<label>현재가<input v-model.number="hForm.currentPrice" type="number" min="0" placeholder="(비우면 시세 갱신으로 자동)" :disabled="hSubmitting" /></label>
<p class="pf-form-hint">종목코드(6자리)를 입력하면 <b>시세 갱신</b> 버튼으로 현재가를 자동으로 불러옵니다.</p>
<p v-if="hError" class="pf-msg err">{{ hError }}</p>
<div class="pf-buttons">
<IconBtn icon="close" title="취소" @click="holdingModal = false" />
@@ -330,6 +369,35 @@ onMounted(load)
font-weight: 600;
opacity: 0.8;
}
.pf-head-btns {
display: flex;
align-items: center;
gap: 0.4rem;
}
.refresh-btn {
padding: 0.25rem 0.6rem;
font-size: 0.78rem;
border: 1px solid var(--color-border);
border-radius: 4px;
background: var(--color-background-soft);
color: var(--color-text);
cursor: pointer;
white-space: nowrap;
}
.refresh-btn:disabled {
opacity: 0.5;
cursor: default;
}
.pf-refresh-msg {
font-size: 0.78rem;
opacity: 0.7;
margin: 0 0 0.4rem;
}
.pf-form-hint {
font-size: 0.76rem;
opacity: 0.6;
margin: -0.2rem 0 0;
}
.pf-add {
padding: 0.25rem 0.6rem;
font-size: 0.8rem;
@@ -389,6 +457,12 @@ onMounted(load)
font-size: 0.76rem;
opacity: 0.7;
}
.h-sub-qty {
font-weight: 600;
}
.h-sub-price {
margin-top: 1px;
}
.noprice {
color: #e67e22;
}
src/views/account/RecurringView.vue
+196 -21
View File
@@ -20,7 +20,9 @@ const form = reactive({
amount: null,
category: '',
memo: '',
walletKind: '',
walletId: '',
toWalletKind: '',
toWalletId: '',
frequency: 'MONTHLY',
dayOfMonth: 1,
@@ -39,6 +41,23 @@ const categoryOptions = computed(() => {
if (form.category && !names.includes(form.category)) names.unshift(form.category)
return names
})
// 계좌/카드 — 종류(계좌/카드)를 라디오로 고르고, 그 종류만 셀렉트로 노출
const WALLET_KINDS = [
{ value: 'BANK', label: '계좌' },
{ value: 'CARD', label: '카드' },
]
const walletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.walletKind))
const toWalletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.toWalletKind))
function walletKindOf(id) {
const w = wallets.value.find((x) => x.id === id)
return w ? w.type : ''
}
function onWalletKindChange() {
form.walletId = ''
}
function onToWalletKindChange() {
form.toWalletId = ''
}
function won(n) {
return (n ?? 0).toLocaleString('ko-KR')
@@ -52,6 +71,39 @@ function freqLabel(r) {
if (r.frequency === 'MONTHLY') return `매월 ${r.dayOfMonth}일`
return `매년 ${r.monthOfYear}/${r.dayOfMonth}`
}
// 결제일 정렬 키 (작을수록 먼저): 매일<매주(요일)<매월(일) / 매년(월·일)
function payKey(r) {
if (r.frequency === 'DAILY') return 0
if (r.frequency === 'WEEKLY') return r.dayOfWeek || 0
if (r.frequency === 'YEARLY') return (r.monthOfYear || 0) * 100 + (r.dayOfMonth || 0)
return r.dayOfMonth || 0 // MONTHLY
}
// 월간/년간 분리 → 카테고리별 그룹 → 결제일순 정렬 → 소계·합계 (활성 건만 합산, 중지 건은 표시만)
const PERIODS = [
{ key: 'MONTH', label: '월간 거래', freqs: ['DAILY', 'WEEKLY', 'MONTHLY'] },
{ key: 'YEAR', label: '년간 거래', freqs: ['YEARLY'] },
]
const grouped = computed(() =>
PERIODS.map((p) => {
const items = recurrings.value.filter((r) => p.freqs.includes(r.frequency))
const catMap = {}
for (const r of items) {
const cat = r.type === 'TRANSFER' ? '이체' : r.category || '미분류'
if (!catMap[cat]) catMap[cat] = { category: cat, items: [], subtotal: 0, minKey: Infinity }
catMap[cat].items.push(r)
catMap[cat].minKey = Math.min(catMap[cat].minKey, payKey(r))
if (r.active) catMap[cat].subtotal += r.amount || 0
}
// 카테고리 안 항목은 결제일순, 카테고리도 가장 이른 결제일순으로 정렬
const cats = Object.values(catMap)
cats.forEach((c) => c.items.sort((a, b) => payKey(a) - payKey(b)))
cats.sort((a, b) => a.minKey - b.minKey || a.category.localeCompare(b.category, 'ko'))
const total = items.filter((r) => r.active).reduce((s, r) => s + (r.amount || 0), 0)
return { ...p, cats, total, count: items.length }
}).filter((g) => g.count > 0),
)
function todayStr() {
const d = new Date()
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
@@ -79,7 +131,7 @@ async function load() {
async function runNow() {
try {
const res = await accountApi.runRecurrings()
alert(`${res.generated}건의 정기 거래가 반영되었습니다.`)
alert(`${res.generated}건의 고정 지출가 반영되었습니다.`)
await load()
} catch (e) {
alert(e.response?.data?.message || '반영에 실패했습니다.')
@@ -90,7 +142,7 @@ function openCreate() {
editId.value = null
Object.assign(form, {
title: '', type: 'EXPENSE', amount: null, category: '', memo: '',
walletId: '', toWalletId: '', frequency: 'MONTHLY', dayOfMonth: 1, dayOfWeek: 1,
walletKind: '', walletId: '', toWalletKind: '', toWalletId: '', frequency: 'MONTHLY', dayOfMonth: 1, dayOfWeek: 1,
monthOfYear: 1, startDate: todayStr(), endDate: '', active: true,
})
formError.value = null
@@ -100,7 +152,8 @@ function openEdit(r) {
editId.value = r.id
Object.assign(form, {
title: r.title, type: r.type, amount: r.amount, category: r.category || '', memo: r.memo || '',
walletId: r.walletId || '', toWalletId: r.toWalletId || '', frequency: r.frequency,
walletKind: walletKindOf(r.walletId), walletId: r.walletId || '',
toWalletKind: walletKindOf(r.toWalletId), toWalletId: r.toWalletId || '', frequency: r.frequency,
dayOfMonth: r.dayOfMonth || 1, dayOfWeek: r.dayOfWeek || 1, monthOfYear: r.monthOfYear || 1,
startDate: r.startDate, endDate: r.endDate || '', active: r.active,
})
@@ -156,7 +209,7 @@ async function submit() {
}
async function remove(r) {
if (!confirm(`'${r.title}' 정기 거래를 삭제할까요? (이미 생성된 내역은 유지됩니다)`)) return
if (!confirm(`'${r.title}' 고정 지출를 삭제할까요? (이미 생성된 내역은 유지됩니다)`)) return
try {
await accountApi.removeRecurring(r.id)
await load()
@@ -171,11 +224,11 @@ onMounted(load)
<template>
<section class="recur">
<header class="head">
<h1>정기 거래</h1>
<h1>고정 지출</h1>
<div class="head-actions">
<IconBtn icon="refresh" title="지금 반영" @click="runNow" />
<IconBtn icon="back" title="가계부로" @click="router.push('/account')" />
<IconBtn icon="plus" title="정기 거래 추가" variant="primary" @click="openCreate" />
<IconBtn icon="plus" title="고정 지출 추가" variant="primary" @click="openCreate" />
</div>
</header>
<p class="hint">등록한 주기에 맞춰 가계부 진입 시 자동으로 내역이 생성됩니다. (중복 없이)</p>
@@ -183,17 +236,26 @@ onMounted(load)
<p v-if="error" class="msg error">{{ error }}</p>
<p v-if="loading" class="msg">불러오는 중...</p>
<ul v-else-if="recurrings.length" class="recur-list">
<li v-for="r in recurrings" :key="r.id" class="recur-row" :class="{ inactive: !r.active }">
<div v-else-if="recurrings.length" class="recur-groups">
<section v-for="g in grouped" :key="g.key" class="period-group">
<div class="period-head">
<h2>{{ g.label }}</h2>
<span class="period-total">합계 {{ won(g.total) }}</span>
</div>
<div v-for="c in g.cats" :key="c.category" class="cat-group">
<div class="cat-head">
<span class="cat-name">{{ c.category }}</span>
<span class="cat-subtotal">소계 {{ won(c.subtotal) }}</span>
</div>
<ul class="recur-list">
<li v-for="r in c.items" :key="r.id" class="recur-row" :class="{ inactive: !r.active }">
<div class="info">
<div class="line1">
<span class="title">{{ r.title }}</span>
<span class="type-badge" :class="r.type.toLowerCase()">{{ typeLabel(r.type) }}</span>
<span v-if="!r.active" class="off">중지</span>
</div>
<div class="sub">
{{ freqLabel(r) }} · {{ won(r.amount) }}<template v-if="r.category"> · {{ r.category }}</template>
</div>
<div class="sub">{{ freqLabel(r) }} · {{ won(r.amount) }}</div>
<div v-if="r.nextDate" class="next">다음 {{ r.nextDate }}</div>
</div>
<div class="actions">
@@ -202,7 +264,10 @@ onMounted(load)
</div>
</li>
</ul>
<p v-else-if="!loading" class="msg">등록된 정기 거래가 없습니다.</p>
</div>
</section>
</div>
<p v-else-if="!loading" class="msg">등록된 고정 지출가 없습니다.</p>
<!-- 추가/수정 모달 -->
<Teleport to="body">
@@ -210,7 +275,7 @@ onMounted(load)
<div v-if="formOpen" class="modal-backdrop" @click.self="formOpen = false">
<div class="modal" role="dialog" aria-modal="true">
<button class="close" type="button" @click="formOpen = false">×</button>
<h2>정기 거래 {{ editId ? '수정' : '추가' }}</h2>
<h2>고정 지출 {{ editId ? '수정' : '추가' }}</h2>
<form class="recur-form" @submit.prevent="submit">
<label>이름<input v-model="form.title" type="text" placeholder="예: 월세, 급여" :disabled="submitting" /></label>
@@ -223,18 +288,40 @@ onMounted(load)
</label>
<label>금액<input v-model.number="form.amount" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
<label>{{ form.type === 'TRANSFER' ? '출금 계좌' : '계좌/카드' }}
<select v-model="form.walletId" :disabled="submitting">
<option value="">(선택 안 함)</option>
<option v-for="w in wallets" :key="w.id" :value="w.id">{{ w.name }}</option>
</select>
<div class="field">
<div class="field-row">
<span class="field-label">{{ form.type === 'TRANSFER' ? '출금 계좌' : '계좌/카드' }}</span>
<div class="wallet-radios">
<label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
<input type="radio" :value="k.value" v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange" />
{{ k.label }}
</label>
<label v-if="form.type === 'TRANSFER'">입금 계좌
<select v-model="form.toWalletId" :disabled="submitting">
</div>
</div>
<select v-if="form.walletKind" v-model="form.walletId" :disabled="submitting">
<option value="">(선택)</option>
<option v-for="w in wallets" :key="w.id" :value="w.id">{{ w.name }}</option>
<option v-for="w in walletsOfKind" :key="w.id" :value="w.id">
{{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
</option>
</select>
</div>
<div v-if="form.type === 'TRANSFER'" class="field">
<div class="field-row">
<span class="field-label">입금 계좌</span>
<div class="wallet-radios">
<label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
<input type="radio" :value="k.value" v-model="form.toWalletKind" :disabled="submitting" @change="onToWalletKindChange" />
{{ k.label }}
</label>
</div>
</div>
<select v-if="form.toWalletKind" v-model="form.toWalletId" :disabled="submitting">
<option value="">(선택)</option>
<option v-for="w in toWalletsOfKind" :key="w.id" :value="w.id">
{{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
</option>
</select>
</div>
<label v-if="form.type !== 'TRANSFER'">분류
<select v-model="form.category" :disabled="submitting">
<option value="">(선택)</option>
@@ -325,6 +412,49 @@ button.primary {
border-color: hsla(160, 100%, 37%, 1);
color: hsla(160, 100%, 37%, 1);
}
.recur-groups {
margin-top: 0.5rem;
}
.period-group {
margin-bottom: 1.5rem;
}
.period-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 0.3rem;
border-bottom: 2px solid var(--color-border);
margin-bottom: 0.5rem;
}
.period-head h2 {
font-size: 1.1rem;
font-weight: 700;
}
.period-total {
font-size: 0.95rem;
font-weight: 700;
color: hsla(160, 100%, 37%, 1);
}
.cat-group {
margin-bottom: 0.6rem;
}
.cat-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0.25rem 0.1rem;
background: var(--color-background-soft);
border-radius: 4px;
}
.cat-name {
font-size: 0.88rem;
font-weight: 600;
}
.cat-subtotal {
font-size: 0.82rem;
font-weight: 600;
opacity: 0.8;
}
.recur-list {
list-style: none;
padding-left: 0;
@@ -463,6 +593,51 @@ button.primary {
.recur-form label.row input {
padding: 0;
}
/* 계좌/카드 라디오 선택 */
.field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.field-row {
display: flex;
align-items: center;
gap: 0.9rem;
}
.field-label {
font-size: 0.85rem;
flex-shrink: 0;
}
.wallet-radios {
display: flex;
flex: 1;
min-width: 0;
flex-wrap: wrap;
gap: 0.4rem 0.9rem;
padding: 0.1rem 0;
}
.wallet-radios .radio {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.3rem;
font-size: 0.85rem;
cursor: pointer;
}
.wallet-radios .radio input {
padding: 0;
width: auto;
margin: 0;
}
.r-issuer {
margin-left: 0.2rem;
font-size: 0.72rem;
opacity: 0.6;
}
.empty-hint {
font-size: 0.78rem;
opacity: 0.6;
}
.buttons {
display: flex;
justify-content: flex-end;
src/views/board/BoardDetailView.vue
+6 -3
View File
@@ -7,12 +7,15 @@ import { formatRelative } from '@/utils/datetime'
import MarkdownViewer from '@/components/editor/MarkdownViewer.vue'
import MarkdownEditor from '@/components/editor/MarkdownEditor.vue'
import IconBtn from '@/components/ui/IconBtn.vue'
import { DEFAULT_BOARD } from '@/constants/boards'
const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const postId = route.params.id
// 게시판(카테고리): URL 우선, 없으면 글의 category, 그래도 없으면 기본
const category = computed(() => route.params.category || post.value?.category || DEFAULT_BOARD)
const post = ref(null)
const loading = ref(false)
const error = ref(null)
@@ -49,7 +52,7 @@ async function removePost() {
if (!confirm('이 게시글을 삭제하시겠습니까?')) return
try {
await boardApi.remove(postId)
router.replace('/board')
router.replace(`/board/${category.value}`)
} catch (e) {
alert(e.response?.data?.message || '삭제에 실패했습니다.')
}
@@ -137,14 +140,14 @@ onMounted(load)
</div>
<div class="actions">
<IconBtn icon="back" title="목록" @click="router.push('/board')" />
<IconBtn icon="back" title="목록" @click="router.push(`/board/${category}`)" />
<div class="right-actions">
<!-- 관리자 제한/해제 -->
<button v-if="isAdmin && !post.blocked" type="button" class="warn" @click="blockPost">열람 제한</button>
<button v-if="isAdmin && post.blocked" type="button" class="warn" @click="unblockPost">제한 해제</button>
<!-- 작성자/관리자 수정·삭제 -->
<template v-if="canModifyPost && !restricted">
<IconBtn v-if="!post.blocked" icon="edit" title="수정" @click="router.push(`/board/${post.id}/edit`)" />
<IconBtn v-if="!post.blocked" icon="edit" title="수정" @click="router.push(`/board/${category}/${post.id}/edit`)" />
<IconBtn icon="trash" title="삭제" variant="danger" @click="removePost" />
</template>
</div>
src/views/board/BoardListView.vue
+13 -21
View File
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
import { boardApi } from '@/api/boardApi'
import { formatRelative } from '@/utils/datetime'
import { useAuthStore } from '@/stores/auth'
import { boardLabel, DEFAULT_BOARD } from '@/constants/boards'
import IconBtn from '@/components/ui/IconBtn.vue'
const route = useRoute()
@@ -11,6 +12,10 @@ const router = useRouter()
const auth = useAuthStore()
const isAdmin = computed(() => auth.user?.role === 'ADMIN')
// 현재 게시판(카테고리)
const category = computed(() => route.params.category || DEFAULT_BOARD)
const boardTitle = computed(() => boardLabel(category.value))
const posts = ref([])
const tags = ref([])
const loading = ref(false)
@@ -38,6 +43,7 @@ async function load() {
error.value = null
try {
const res = await boardApi.list({
category: category.value,
page: page.value,
size: size.value,
tag: activeTag.value,
@@ -107,14 +113,9 @@ function clearSearch() {
pushQuery({ page: 1, tag: activeTag.value })
}
// 목록 표시 순번: 전체건수 기준 내림차순 (최신글이 큰 번호)
function rowNumber(index) {
return totalElements.value - (page.value - 1) * size.value - index
}
// 쿼리가 바뀔 때마다(검색·페이지 이동·뒤로가기 포함) 상태 동기화 후 재조회
// 경로(게시판 전환)·쿼리(검색·페이지·뒤로가기)가 바뀌면 상태 동기화 후 재조회
watch(
() => route.query,
() => route.fullPath,
() => {
syncFromQuery()
load()
@@ -128,8 +129,8 @@ onMounted(loadTags)
<template>
<section class="board">
<header class="board-head">
<h1>자유게시판</h1>
<IconBtn icon="edit" title="글쓰기" variant="primary" @click="router.push('/board/write')" />
<h1>{{ boardTitle }}</h1>
<IconBtn icon="edit" title="글쓰기" variant="primary" @click="router.push(`/board/${category}/write`)" />
</header>
<div v-if="tags.length" class="tag-filter">
@@ -155,7 +156,6 @@ onMounted(loadTags)
<table v-else-if="posts.length" class="post-table">
<thead>
<tr>
<th class="col-id">번호</th>
<th>제목</th>
<th class="col-author">작성자</th>
<th class="col-num">조회</th>
@@ -163,8 +163,7 @@ onMounted(loadTags)
</tr>
</thead>
<tbody>
<tr v-for="(p, index) in posts" :key="p.id" @click="router.push(`/board/${p.id}`)">
<td class="col-id">{{ rowNumber(index) }}</td>
<tr v-for="p in posts" :key="p.id" @click="router.push(`/board/${category}/${p.id}`)">
<td>
<template v-if="p.blocked && !isAdmin">
<span class="blocked-msg">🚫 관리자에 의해 제한된 게시글입니다.</span>
@@ -291,7 +290,6 @@ button:disabled {
.post-table tbody tr:hover {
background: var(--color-background-soft);
}
.col-id,
.col-num {
width: 60px;
text-align: center;
@@ -440,20 +438,14 @@ button:disabled {
font-size: 0.8rem;
opacity: 0.7;
}
/* 제목(2번째 셀): 첫 줄 전체 */
.post-table td:nth-child(2) {
/* 제목(첫 번째 셀): 첫 줄 전체 */
.post-table td:nth-child(1) {
order: 0;
width: 100% !important;
font-size: 0.97rem;
opacity: 1;
font-weight: 500;
}
.post-table .col-id {
order: 1;
}
.post-table .col-id::before {
content: '#';
}
.post-table .col-author {
order: 2;
}
src/views/board/BoardWriteView.vue
+6 -3
View File
@@ -4,10 +4,12 @@ import { useRoute, useRouter } from 'vue-router'
import { boardApi } from '@/api/boardApi'
import MarkdownEditor from '@/components/editor/MarkdownEditor.vue'
import IconBtn from '@/components/ui/IconBtn.vue'
import { DEFAULT_BOARD } from '@/constants/boards'
const route = useRoute()
const router = useRouter()
const category = route.params.category || DEFAULT_BOARD
const editId = route.params.id || null
const isEdit = computed(() => !!editId)
@@ -62,13 +64,14 @@ async function submit() {
const payload = {
title: title.value.trim(),
content: content.value,
category,
tagIds: selectedTagIds.value,
}
try {
const saved = isEdit.value
? await boardApi.update(editId, payload)
: await boardApi.create(payload)
router.replace(`/board/${saved.id}`)
router.replace(`/board/${category}/${saved.id}`)
} catch (e) {
error.value = e.response?.data?.message || '저장에 실패했습니다.'
} finally {
@@ -77,8 +80,8 @@ async function submit() {
}
function cancel() {
if (isEdit.value) router.replace(`/board/${editId}`)
else router.replace('/board')
if (isEdit.value) router.replace(`/board/${category}/${editId}`)
else router.replace(`/board/${category}`)
}
onMounted(async () => {