기간별 예산 대비 지출
-
-
@@ -498,6 +496,7 @@ h2 {
width: 120px;
height: 120px;
flex-shrink: 0;
+ overflow: visible;
}
.donut-pct {
font-size: 20px;
@@ -679,6 +678,7 @@ h2 {
height: auto;
aspect-ratio: 1 / 1;
flex-shrink: 0;
+ overflow: visible;
}
.pie-seg {
cursor: pointer;
diff --git a/src/views/account/AccountTagView.vue b/src/views/account/AccountTagView.vue
index e13b57f..f1a75d0 100644
--- a/src/views/account/AccountTagView.vue
+++ b/src/views/account/AccountTagView.vue
@@ -133,6 +133,8 @@ button.danger {
}
.tag-list {
list-style: none;
+ padding-left: 0;
+ margin: 0;
}
.tag-row {
display: flex;
diff --git a/src/views/account/AccountView.vue b/src/views/account/AccountView.vue
index 156d36a..5c202e1 100644
--- a/src/views/account/AccountView.vue
+++ b/src/views/account/AccountView.vue
@@ -2,6 +2,7 @@
import { computed, onMounted, reactive, ref } from 'vue'
import { accountApi } from '@/api/accountApi'
import IconBtn from '@/components/ui/IconBtn.vue'
+import { scanReceipt } from '@/utils/receiptOcr'
const now = new Date()
const year = ref(now.getFullYear())
@@ -40,12 +41,53 @@ function resetFilters() {
// 추가/수정 모달
const formOpen = ref(false)
const editId = ref(null)
-const form = reactive({ entryDate: '', type: 'EXPENSE', category: '', amount: null, memo: '', walletKind: '', walletId: '', toWalletKind: '', toWalletId: '', principal: null, interest: null })
+const form = reactive({ entryDate: '', type: 'EXPENSE', category: '', amount: null, memo: '', walletKind: '', walletId: '', toWalletKind: '', toWalletId: '', principal: null, interest: null, installmentMonths: '' })
const isRepayment = computed(() => form.type === 'REPAYMENT')
+// 카드 지출일 때만 할부 입력 노출 (2~24개월, 일시불은 빈값)
+const showInstallment = computed(() => form.type === 'EXPENSE' && form.walletKind === 'CARD')
+const installmentMonthly = computed(() => {
+ const m = Number(form.installmentMonths)
+ const amt = Number(form.amount)
+ return m >= 2 && amt > 0 ? Math.round(amt / m) : 0
+})
const liabilityWallets = computed(() => wallets.value.filter((w) => w.type === 'LOAN' || w.type === 'CARD'))
const submitting = ref(false)
const formError = ref(null)
+// 영수증 OCR (온디바이스)
+const receiptInput = ref(null)
+const ocrRunning = ref(false)
+const ocrProgress = ref(0)
+const ocrResult = ref(null) // { amount, date, store }
+function pickReceipt() {
+ ocrResult.value = null
+ receiptInput.value?.click()
+}
+async function onReceiptFile(e) {
+ const file = e.target.files?.[0]
+ e.target.value = '' // 같은 파일 재선택 허용
+ if (!file) return
+ ocrRunning.value = true
+ ocrProgress.value = 0
+ ocrResult.value = null
+ formError.value = null
+ try {
+ const r = await scanReceipt(file, (p) => (ocrProgress.value = p))
+ // 추출값이 있을 때만 폼에 채움 (기존 입력 보존하되, 비어있으면 채움)
+ if (r.amount) form.amount = r.amount
+ if (r.date) form.entryDate = r.date
+ if (r.store && !form.memo) form.memo = r.store
+ ocrResult.value = { amount: r.amount, date: r.date, store: r.store }
+ if (!r.amount && !r.date) {
+ formError.value = '영수증에서 정보를 충분히 인식하지 못했습니다. 직접 입력하거나 더 선명한 사진으로 다시 시도하세요.'
+ }
+ } catch {
+ formError.value = '영수증 인식에 실패했습니다. 다시 시도해 주세요.'
+ } finally {
+ ocrRunning.value = false
+ }
+}
+
// 계좌/카드
const wallets = ref([])
async function loadWallets() {
@@ -227,7 +269,7 @@ function todayStr() {
function openCreate() {
editId.value = null
- Object.assign(form, { entryDate: todayStr(), type: 'EXPENSE', category: '', amount: null, memo: '', walletKind: '', walletId: '', toWalletKind: '', toWalletId: '', principal: null, interest: null })
+ Object.assign(form, { entryDate: todayStr(), type: 'EXPENSE', category: '', amount: null, memo: '', walletKind: '', walletId: '', toWalletKind: '', toWalletId: '', principal: null, interest: null, installmentMonths: '' })
selectedTagIds.value = []
cancelAddCategory()
formError.value = null
@@ -245,6 +287,7 @@ function openEdit(e) {
walletId: e.walletId || '',
toWalletKind: walletKindOf(e.toWalletId),
toWalletId: e.toWalletId || '',
+ installmentMonths: e.installmentMonths || '',
})
// 태그 이름 → id 매핑 (현재 태그 목록 기준)
const nameToId = {}
@@ -319,6 +362,7 @@ async function submit() {
memo: form.memo || null,
walletId: form.walletId || null,
toWalletId: form.type === 'TRANSFER' ? form.toWalletId || null : null,
+ installmentMonths: showInstallment.value && Number(form.installmentMonths) >= 2 ? Number(form.installmentMonths) : null,
tagIds: selectedTagIds.value,
}
try {
@@ -444,7 +488,8 @@ onMounted(async () => {
-