- 홈: 로그인 시 요약(이번달 수입/지출, 순자산, 예산대비지출 바)+바로가기, 비로그인 랜딩 - 영수증 OCR(온디바이스 Tesseract.js): 금액·날짜·상호 추출해 내역 폼 자동입력 - 내역 카드 할부(2~24개월) 입력/표시 - 투자 소수점 수량 입력(step=any) - 계좌 관리 등록버튼 탭 라인 우측 이동, 정기거래 3단 레이아웃 - 목록 좌측 여백 제거(분류/예산/태그/계좌), 대시보드 일/주 버튼 제거, 도넛/파이 차트 잘림 수정 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
Generated
+115
@@ -19,6 +19,7 @@
|
||||
"pinia": "^3.0.4",
|
||||
"prismjs": "^1.30.0",
|
||||
"sortablejs": "^1.15.7",
|
||||
"tesseract.js": "^7.0.0",
|
||||
"vue": "^3.5.32",
|
||||
"vue-router": "^5.0.4"
|
||||
},
|
||||
@@ -2250,6 +2251,12 @@
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/bmp-js": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
|
||||
"integrity": "sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/boolbase": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
@@ -3274,6 +3281,12 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/idb-keyval": {
|
||||
"version": "6.2.5",
|
||||
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.5.tgz",
|
||||
"integrity": "sha512-eKQkTnS0relYsSOYomx8ozIbmdsQCKUdhyuIaQ2DZgKuaxtyQQMkyD/wlnQN32pO3yutN1b1L8uqwcDKaJd7/Q==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
@@ -3389,6 +3402,12 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-url": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
|
||||
"integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/is-what": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
|
||||
@@ -4043,6 +4062,26 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/node-fetch": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
||||
"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"whatwg-url": "^5.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "4.x || >=6.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"encoding": "^0.1.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"encoding": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/node-releases": {
|
||||
"version": "2.0.46",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.46.tgz",
|
||||
@@ -4168,6 +4207,15 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/opencollective-postinstall": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
|
||||
"integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"opencollective-postinstall": "index.js"
|
||||
}
|
||||
},
|
||||
"node_modules/optionator": {
|
||||
"version": "0.9.4",
|
||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
|
||||
@@ -4669,6 +4717,12 @@
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
|
||||
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/rfdc": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
|
||||
@@ -4989,6 +5043,30 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/tesseract.js": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tesseract.js/-/tesseract.js-7.0.0.tgz",
|
||||
"integrity": "sha512-exPBkd+z+wM1BuMkx/Bjv43OeLBxhL5kKWsz/9JY+DXcXdiBjiAch0V49QR3oAJqCaL5qURE0vx9Eo+G5YE7mA==",
|
||||
"hasInstallScript": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"bmp-js": "^0.1.0",
|
||||
"idb-keyval": "^6.2.0",
|
||||
"is-url": "^1.2.4",
|
||||
"node-fetch": "^2.6.9",
|
||||
"opencollective-postinstall": "^2.0.3",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"tesseract.js-core": "^7.0.0",
|
||||
"wasm-feature-detect": "^1.8.0",
|
||||
"zlibjs": "^0.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/tesseract.js-core": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tesseract.js-core/-/tesseract.js-core-7.0.0.tgz",
|
||||
"integrity": "sha512-WnNH518NzmbSq9zgTPeoF8c+xmilS8rFIl1YKbk/ptuuc7p6cLNELNuPAzcmsYw450ca6bLa8j3t0VAtq435Vw==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/through2": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
|
||||
@@ -5024,6 +5102,12 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/tr46": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
|
||||
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tree-kill": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
|
||||
@@ -5582,12 +5666,34 @@
|
||||
"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/wasm-feature-detect": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.8.0.tgz",
|
||||
"integrity": "sha512-zksaLKM2fVlnB5jQQDqKXXwYHLQUVH9es+5TOOHwGOVJOCeRBCiPjwSg+3tN2AdTCzjgli4jijCH290kXb/zWQ==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/webidl-conversions": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
|
||||
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/webpack-virtual-modules": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
|
||||
"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/whatwg-url": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
|
||||
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tr46": "~0.0.3",
|
||||
"webidl-conversions": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
@@ -5747,6 +5853,15 @@
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/zlibjs": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/zlibjs/-/zlibjs-0.3.1.tgz",
|
||||
"integrity": "sha512-+J9RrgTKOmlxFSDHo0pI1xM6BLVUv+o0ZT9ANtCxGkjIVCCUdx9alUF8Gm+dGLKbkkkidWIHFDZHDMpfITt4+w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
"pinia": "^3.0.4",
|
||||
"prismjs": "^1.30.0",
|
||||
"sortablejs": "^1.15.7",
|
||||
"tesseract.js": "^7.0.0",
|
||||
"vue": "^3.5.32",
|
||||
"vue-router": "^5.0.4"
|
||||
},
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
// 영수증 OCR (온디바이스, Tesseract.js). 서버·API키 불필요.
|
||||
// 이미지 → 텍스트 인식 → 금액·날짜·상호 추출.
|
||||
import Tesseract from 'tesseract.js'
|
||||
|
||||
// 합계 금액을 가리키는 키워드 (우선순위 높은 순)
|
||||
const TOTAL_KEYWORDS = [
|
||||
'받을금액', '받을 금액', '결제금액', '결제 금액', '합계금액', '합 계', '합계',
|
||||
'총액', '총 액', '총구매액', '판매금액', '결제대상금액', '청구금액', '승인금액',
|
||||
'total', 'TOTAL',
|
||||
]
|
||||
// 합계로 오인하기 쉬운(제외할) 키워드
|
||||
const EXCLUDE_KEYWORDS = ['부가세', '면세', '과세', '봉사료', '거스름', '받은금액', '현금', '잔액', '포인트']
|
||||
|
||||
// 문자열에서 숫자(천단위 콤마 포함)들을 추출 → 정수 배열
|
||||
function numbersIn(line) {
|
||||
const out = []
|
||||
const re = /\d{1,3}(?:,\d{3})+|\d{3,}/g
|
||||
let m
|
||||
while ((m = re.exec(line)) !== null) {
|
||||
const n = parseInt(m[0].replace(/,/g, ''), 10)
|
||||
if (!Number.isNaN(n)) out.push(n)
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
// 합계 금액 추정
|
||||
function extractAmount(lines) {
|
||||
// 1) 합계 키워드가 있는 줄에서 금액 찾기 (제외 키워드 줄은 건너뜀)
|
||||
for (const kw of TOTAL_KEYWORDS) {
|
||||
for (const line of lines) {
|
||||
if (!line.includes(kw)) continue
|
||||
if (EXCLUDE_KEYWORDS.some((ex) => line.includes(ex))) continue
|
||||
const nums = numbersIn(line)
|
||||
if (nums.length) return Math.max(...nums)
|
||||
}
|
||||
}
|
||||
// 2) 폴백: 전체에서 가장 큰 금액(100원 이상)
|
||||
const all = lines.flatMap(numbersIn).filter((n) => n >= 100 && n < 100_000_000)
|
||||
return all.length ? Math.max(...all) : null
|
||||
}
|
||||
|
||||
// 거래일 추정 (YYYY-MM-DD 반환)
|
||||
function extractDate(text) {
|
||||
// 4자리 연도: 2024-01-05 / 2024.01.05 / 2024년 1월 5일 / 2024/1/5
|
||||
let m = text.match(/(20\d{2})\s*[.\-/년]\s*(\d{1,2})\s*[.\-/월]\s*(\d{1,2})/)
|
||||
if (m) return fmt(m[1], m[2], m[3])
|
||||
// 2자리 연도: 24.01.05
|
||||
m = text.match(/(\d{2})\s*[.\-/]\s*(\d{1,2})\s*[.\-/]\s*(\d{1,2})/)
|
||||
if (m) return fmt('20' + m[1], m[2], m[3])
|
||||
return null
|
||||
}
|
||||
function fmt(y, mo, d) {
|
||||
const mm = String(Number(mo)).padStart(2, '0')
|
||||
const dd = String(Number(d)).padStart(2, '0')
|
||||
if (Number(mo) < 1 || Number(mo) > 12 || Number(d) < 1 || Number(d) > 31) return null
|
||||
return `${y}-${mm}-${dd}`
|
||||
}
|
||||
|
||||
// 상호(가게 이름) 추정 — 상단의 한글 포함, 숫자/키워드 없는 첫 줄
|
||||
function extractStore(lines) {
|
||||
for (const line of lines.slice(0, 6)) {
|
||||
const t = line.trim()
|
||||
if (t.length < 2 || t.length > 30) continue
|
||||
if (/\d/.test(t)) continue
|
||||
if (!/[가-힣]/.test(t)) continue
|
||||
if (TOTAL_KEYWORDS.some((k) => t.includes(k))) continue
|
||||
if (['영수증', '주소', '사업자', '대표', 'TEL', '전화'].some((k) => t.includes(k))) continue
|
||||
return t
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* 영수증 이미지에서 금액·날짜·상호 추출.
|
||||
* @param {File|Blob|string} image 파일 또는 dataURL
|
||||
* @param {(p:number)=>void} onProgress 0~100 진행률 콜백
|
||||
* @returns {Promise<{amount:number|null, date:string|null, store:string|null, text:string}>}
|
||||
*/
|
||||
export async function scanReceipt(image, onProgress) {
|
||||
const { data } = await Tesseract.recognize(image, 'kor+eng', {
|
||||
logger: (msg) => {
|
||||
if (msg.status === 'recognizing text' && typeof msg.progress === 'number') {
|
||||
onProgress?.(Math.round(msg.progress * 100))
|
||||
}
|
||||
},
|
||||
})
|
||||
const text = data.text || ''
|
||||
const lines = text.split('\n').map((l) => l.trim()).filter(Boolean)
|
||||
return {
|
||||
amount: extractAmount(lines),
|
||||
date: extractDate(text),
|
||||
store: extractStore(lines),
|
||||
text,
|
||||
}
|
||||
}
|
||||
+437
-16
@@ -1,33 +1,454 @@
|
||||
<script setup>
|
||||
// 홈 = 대시보드 (임시: 히어로 이미지). 추후 요약 위젯으로 교체 예정.
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useUiStore } from '@/stores/ui'
|
||||
import { accountApi } from '@/api/accountApi'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const ui = useUiStore()
|
||||
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth() + 1
|
||||
const monthLabel = `${year}년 ${month}월`
|
||||
|
||||
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 loading = ref(false)
|
||||
const error = ref(null)
|
||||
|
||||
const displayName = computed(() => auth.user?.name || auth.user?.loginId || '')
|
||||
|
||||
// 예산 대비 지출
|
||||
const budgetPct = computed(() =>
|
||||
budgetTotal.value > 0 ? Math.round((spentTotal.value / budgetTotal.value) * 100) : 0,
|
||||
)
|
||||
const budgetLeft = computed(() => budgetTotal.value - spentTotal.value)
|
||||
const budgetOver = computed(() => budgetLeft.value < 0)
|
||||
|
||||
function won(n) {
|
||||
return (n ?? 0).toLocaleString('ko-KR')
|
||||
}
|
||||
|
||||
// 가계부 주요 화면 바로가기
|
||||
const shortcuts = [
|
||||
{ to: '/account', icon: '📊', label: '대시보드', desc: '한눈에 보기' },
|
||||
{ to: '/account/entries', icon: '📒', label: '가계부 내역', desc: '수입·지출 기록' },
|
||||
{ to: '/account/wallets', icon: '🏦', label: '계좌 관리', desc: '자산·부채' },
|
||||
{ to: '/account/budget', icon: '🎯', label: '예산 설정', desc: '예산 대비 지출' },
|
||||
{ to: '/account/recurrings', icon: '🔁', label: '정기 거래', desc: '반복 수입·지출' },
|
||||
{ to: '/account/categories', icon: '🗂️', label: '분류 관리', desc: '카테고리' },
|
||||
]
|
||||
|
||||
async function load() {
|
||||
if (!auth.isAuthenticated) return
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const [sum, nw, status] = await Promise.all([
|
||||
accountApi.summary({ year, month }),
|
||||
accountApi.netWorth(),
|
||||
accountApi.budgetStatus({ 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)
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || '요약을 불러오지 못했습니다.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 로그인/로그아웃 전환 시 갱신
|
||||
watch(() => auth.isAuthenticated, (v) => {
|
||||
if (v) load()
|
||||
else {
|
||||
summary.value = { totalIncome: 0, totalExpense: 0, balance: 0 }
|
||||
networth.value = { totalAssets: 0, totalLiabilities: 0, netWorth: 0 }
|
||||
budgetTotal.value = 0
|
||||
spentTotal.value = 0
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="home">
|
||||
<div class="hero"></div>
|
||||
<!-- ===== 로그인: 요약 대시보드 ===== -->
|
||||
<template v-if="auth.isAuthenticated">
|
||||
<header class="greet">
|
||||
<h1>안녕하세요, {{ displayName }}님 👋</h1>
|
||||
<p class="today">{{ monthLabel }} 가계부 요약</p>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="msg error">{{ error }}</p>
|
||||
|
||||
<div class="cards">
|
||||
<!-- 이번 달 수입/지출/수지 -->
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<span class="card-title">이번 달</span>
|
||||
<RouterLink to="/account/entries" class="more">내역 →</RouterLink>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat">
|
||||
<span class="label">수입</span>
|
||||
<span class="value income">{{ won(summary.totalIncome) }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="label">지출</span>
|
||||
<span class="value expense">{{ won(summary.totalExpense) }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="label">수지</span>
|
||||
<span class="value" :class="summary.balance < 0 ? 'expense' : 'income'">{{ won(summary.balance) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 순자산 -->
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<span class="card-title">순자산</span>
|
||||
<RouterLink to="/account/wallets" class="more">계좌 →</RouterLink>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat">
|
||||
<span class="label">총자산</span>
|
||||
<span class="value income">{{ won(networth.totalAssets) }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="label">총부채</span>
|
||||
<span class="value expense">{{ won(networth.totalLiabilities) }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="label">순자산</span>
|
||||
<span class="value">{{ won(networth.netWorth) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 예산 대비 지출 -->
|
||||
<div class="card budget-card">
|
||||
<div class="card-head">
|
||||
<span class="card-title">{{ month }}월 예산 대비 지출</span>
|
||||
<RouterLink to="/account/budget" class="more">예산 →</RouterLink>
|
||||
</div>
|
||||
<template v-if="budgetTotal > 0">
|
||||
<div class="budget-bar">
|
||||
<div
|
||||
class="budget-fill" :class="{ over: budgetOver }"
|
||||
:style="{ width: Math.min(budgetPct, 100) + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="budget-info">
|
||||
<span class="b-pct" :class="{ over: budgetOver }">{{ budgetPct }}%</span>
|
||||
<span class="b-detail">
|
||||
지출 <b class="expense">{{ won(spentTotal) }}</b> / 예산 <b>{{ won(budgetTotal) }}</b>
|
||||
· <span :class="budgetOver ? 'expense' : 'income'">{{ budgetOver ? '초과' : '잔여' }} {{ won(Math.abs(budgetLeft)) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<RouterLink v-else to="/account/budget" class="budget-empty">예산을 설정하면 지출 진행률을 볼 수 있어요 →</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- 바로가기 -->
|
||||
<div class="shortcuts">
|
||||
<RouterLink v-for="s in shortcuts" :key="s.to" :to="s.to" class="shortcut">
|
||||
<span class="sc-icon">{{ s.icon }}</span>
|
||||
<span class="sc-text">
|
||||
<span class="sc-label">{{ s.label }}</span>
|
||||
<span class="sc-desc">{{ s.desc }}</span>
|
||||
</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ===== 비로그인: 랜딩 ===== -->
|
||||
<template v-else>
|
||||
<div class="landing">
|
||||
<div class="hero-card">
|
||||
<h1 class="brand">Slim Budget</h1>
|
||||
<p class="tagline">슬림하게 관리하는 가계부 · 자산 · 예산</p>
|
||||
<div class="cta">
|
||||
<button type="button" class="btn primary" @click="ui.openLogin('/account')">로그인</button>
|
||||
<button type="button" class="btn" @click="ui.openSignup()">회원가입</button>
|
||||
</div>
|
||||
<p class="cta-note">로그인하면 나의 가계부 요약을 볼 수 있어요.</p>
|
||||
</div>
|
||||
|
||||
<ul class="features">
|
||||
<li><span class="f-icon">📒</span><b>간편한 가계부</b><span>수입·지출을 빠르게 기록하고 일별로 정리</span></li>
|
||||
<li><span class="f-icon">🏦</span><b>자산·부채 관리</b><span>계좌·카드·대출·투자를 한곳에서 순자산까지</span></li>
|
||||
<li><span class="f-icon">🎯</span><b>예산과 분석</b><span>예산 대비 지출, 분류별 차트로 한눈에</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
max-width: 960px;
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* 임시 히어로 이미지 — public/home-hero.jpg 를 두면 표시됨. 없으면 연한 바다색 배경 */
|
||||
.hero {
|
||||
width: 100%;
|
||||
min-height: 70vh;
|
||||
border-radius: 10px;
|
||||
background-color: #bfe6fb;
|
||||
background-image: url('/home-hero.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
/* ===== 로그인 대시보드 ===== */
|
||||
.greet h1 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
min-height: 78vh;
|
||||
.greet .today {
|
||||
margin-top: 0.2rem;
|
||||
opacity: 0.65;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.9rem;
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.1rem;
|
||||
background: var(--color-background-soft);
|
||||
}
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.more {
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.more:hover {
|
||||
opacity: 1;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
}
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.stat .label {
|
||||
font-size: 0.76rem;
|
||||
opacity: 0.65;
|
||||
}
|
||||
.stat .value {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.value.income {
|
||||
color: #2e7d32;
|
||||
}
|
||||
.value.expense {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* 예산 대비 지출 카드 */
|
||||
.budget-card {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.budget-bar {
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
background: var(--color-background-mute);
|
||||
overflow: hidden;
|
||||
}
|
||||
.budget-fill {
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background: hsla(160, 100%, 37%, 1);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.budget-fill.over {
|
||||
background: #c0392b;
|
||||
}
|
||||
.budget-info {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.6rem;
|
||||
margin-top: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.b-pct {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
}
|
||||
.b-pct.over {
|
||||
color: #c0392b;
|
||||
}
|
||||
.b-detail {
|
||||
font-size: 0.82rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.budget-empty {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.budget-empty:hover {
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
}
|
||||
|
||||
/* 바로가기 그리드 */
|
||||
.shortcuts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.7rem;
|
||||
}
|
||||
.shortcut {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.8rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition: border-color 0.15s, transform 0.1s;
|
||||
}
|
||||
.shortcut:hover {
|
||||
border-color: hsla(160, 100%, 37%, 0.6);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.sc-icon {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.sc-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
.sc-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.sc-desc {
|
||||
font-size: 0.74rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.msg {
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
.msg.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* ===== 비로그인 랜딩 ===== */
|
||||
.landing {
|
||||
padding: 1rem 0 2rem;
|
||||
}
|
||||
.hero-card {
|
||||
text-align: center;
|
||||
padding: 2.6rem 1.5rem;
|
||||
border-radius: 14px;
|
||||
background:
|
||||
radial-gradient(120% 120% at 50% 0%, hsla(160, 100%, 37%, 0.18), transparent 60%),
|
||||
var(--color-background-soft);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.brand {
|
||||
font-size: 2rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.tagline {
|
||||
margin-top: 0.5rem;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.cta {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
justify-content: center;
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
.btn {
|
||||
padding: 0.6rem 1.4rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn.primary {
|
||||
border-color: hsla(160, 100%, 37%, 1);
|
||||
background: hsla(160, 100%, 37%, 1);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cta-note {
|
||||
margin-top: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1.6rem 0 0;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
.features li {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 0.8rem;
|
||||
align-items: center;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.features .f-icon {
|
||||
grid-row: 1 / 3;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.features b {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.features li > span:last-child {
|
||||
font-size: 0.82rem;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.shortcuts {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.brand {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -90,7 +90,7 @@ function hideTip() {
|
||||
}
|
||||
|
||||
/* ===== 분류별 파이차트 ===== */
|
||||
const PIE_R = 52
|
||||
const PIE_R = 46 // viewBox 120 기준, 선두께 20(hover 24) 포함해도 잘리지 않도록 (46+12=58 ≤ 60)
|
||||
const PIE_C = 2 * Math.PI * PIE_R
|
||||
const PIE_COLORS = ['#3b82a6', '#e67e22', '#2e7d32', '#9b59b6', '#c0392b', '#16a085', '#f39c12', '#8e44ad', '#27ae60', '#d35400', '#2980b9', '#7f8c8d']
|
||||
const catTotal = computed(() => catData.value.reduce((s, d) => s + d.total, 0))
|
||||
@@ -350,8 +350,6 @@ onMounted(async () => {
|
||||
<div class="panel-head">
|
||||
<h2>기간별 예산 대비 지출</h2>
|
||||
<div class="unit-tabs">
|
||||
<button type="button" :class="{ active: unit === 'DAY' }" @click="setUnit('DAY')">일별</button>
|
||||
<button type="button" :class="{ active: unit === 'WEEK' }" @click="setUnit('WEEK')">주별</button>
|
||||
<button type="button" :class="{ active: unit === 'MONTH' }" @click="setUnit('MONTH')">월별</button>
|
||||
<button type="button" :class="{ active: unit === 'YEAR' }" @click="setUnit('YEAR')">년별</button>
|
||||
</div>
|
||||
@@ -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;
|
||||
|
||||
@@ -133,6 +133,8 @@ button.danger {
|
||||
}
|
||||
.tag-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.tag-row {
|
||||
display: flex;
|
||||
|
||||
@@ -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 () => {
|
||||
<IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="remove(e)" />
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="e.memo || (e.tags && e.tags.length)" class="ei-line2">
|
||||
<div v-if="e.memo || e.installmentMonths > 1 || (e.tags && e.tags.length)" class="ei-line2">
|
||||
<span v-if="e.installmentMonths > 1" class="ei-install">{{ e.installmentMonths }}개월 할부 · 월 {{ won(Math.round(e.amount / e.installmentMonths)) }}</span>
|
||||
<span v-if="e.memo" class="ei-memo">{{ e.memo }}</span>
|
||||
<span v-for="t in e.tags" :key="t" class="row-tag">{{ t }}</span>
|
||||
</div>
|
||||
@@ -463,6 +508,26 @@ onMounted(async () => {
|
||||
<h2>{{ editId ? '내역 수정' : '내역 추가' }}</h2>
|
||||
|
||||
<form class="entry-form" @submit.prevent="submit">
|
||||
<!-- 영수증 OCR (온디바이스) -->
|
||||
<div v-if="!isRepayment" class="receipt-box">
|
||||
<input
|
||||
ref="receiptInput" type="file" accept="image/*"
|
||||
class="receipt-input" @change="onReceiptFile"
|
||||
/>
|
||||
<button
|
||||
type="button" class="receipt-btn"
|
||||
:disabled="submitting || ocrRunning" @click="pickReceipt"
|
||||
>📷 영수증 스캔</button>
|
||||
<span v-if="ocrRunning" class="receipt-status">인식 중… {{ ocrProgress }}%</span>
|
||||
<span v-else-if="ocrResult" class="receipt-status ok">
|
||||
<template v-if="ocrResult.amount">{{ won(ocrResult.amount) }}원</template>
|
||||
<template v-if="ocrResult.date"> · {{ ocrResult.date }}</template>
|
||||
<template v-if="ocrResult.store"> · {{ ocrResult.store }}</template>
|
||||
자동 입력됨
|
||||
</span>
|
||||
<span v-else class="receipt-hint">사진에서 금액·날짜·상호를 자동 입력</span>
|
||||
</div>
|
||||
|
||||
<label>거래일<input v-model="form.entryDate" type="date" :disabled="submitting" /></label>
|
||||
<label>구분
|
||||
<select v-model="form.type" :disabled="submitting">
|
||||
@@ -487,6 +552,14 @@ onMounted(async () => {
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<!-- 카드 지출: 할부 개월수 (일시불 또는 2~24개월) -->
|
||||
<label v-if="showInstallment">할부
|
||||
<select v-model="form.installmentMonths" :disabled="submitting">
|
||||
<option value="">일시불</option>
|
||||
<option v-for="m in 23" :key="m + 1" :value="m + 1">{{ m + 1 }}개월</option>
|
||||
</select>
|
||||
<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">
|
||||
@@ -829,6 +902,40 @@ button.primary {
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.receipt-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
border: 1px dashed var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--color-background-soft);
|
||||
}
|
||||
.receipt-input {
|
||||
display: none;
|
||||
}
|
||||
.receipt-btn {
|
||||
padding: 0.4rem 0.7rem;
|
||||
font-size: 0.85rem;
|
||||
border: 1px solid hsla(160, 100%, 37%, 0.6);
|
||||
border-radius: 4px;
|
||||
background: var(--color-background);
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.receipt-hint {
|
||||
font-size: 0.76rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.receipt-status {
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.receipt-status.ok {
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
}
|
||||
.entry-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -897,6 +1004,19 @@ button.primary {
|
||||
font-size: 0.75rem;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
}
|
||||
.install-hint {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.65;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.ei-install {
|
||||
font-size: 0.74rem;
|
||||
padding: 0.05rem 0.4rem;
|
||||
border: 1px solid hsla(160, 100%, 37%, 0.5);
|
||||
border-radius: 3px;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row-wallet {
|
||||
margin-right: 0.35rem;
|
||||
font-size: 0.75rem;
|
||||
|
||||
@@ -265,6 +265,7 @@ onBeforeUnmount(() => sortable?.destroy())
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabbar">
|
||||
<div class="tabs">
|
||||
<button
|
||||
v-for="t in TABS"
|
||||
@@ -274,9 +275,7 @@ onBeforeUnmount(() => sortable?.destroy())
|
||||
@click="activeType = t.key"
|
||||
>{{ t.label }}</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<IconBtn icon="plus" title="추가" variant="primary" @click="openCreate" />
|
||||
<IconBtn class="tab-add" icon="plus" title="추가" variant="primary" @click="openCreate" />
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="msg error">{{ error }}</p>
|
||||
@@ -434,11 +433,23 @@ button.primary {
|
||||
.nw-card .value.debt {
|
||||
color: #c0392b;
|
||||
}
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 1rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.tab-add {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tabs button {
|
||||
border: 0;
|
||||
@@ -452,11 +463,10 @@ button.primary {
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.toolbar {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.wallet-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.wallet-item {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
@@ -468,6 +468,8 @@ button.primary {
|
||||
}
|
||||
.status-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.status-row {
|
||||
padding: 0.85rem 0;
|
||||
|
||||
@@ -221,6 +221,8 @@ button.danger {
|
||||
}
|
||||
.cat-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.cat-row {
|
||||
display: flex;
|
||||
|
||||
@@ -30,6 +30,10 @@ const tradesByHolding = reactive({})
|
||||
function won(n) {
|
||||
return (n ?? 0).toLocaleString('ko-KR')
|
||||
}
|
||||
// 수량(소수점 매매 지원): 최대 6자리, 불필요한 0 제거
|
||||
function shares(n) {
|
||||
return Number(n ?? 0).toLocaleString('ko-KR', { maximumFractionDigits: 6 })
|
||||
}
|
||||
function todayStr() {
|
||||
const d = new Date()
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||||
@@ -186,7 +190,7 @@ 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">
|
||||
{{ won(h.quantity) }}주 · 평단 {{ won(h.avgPrice) }}
|
||||
{{ shares(h.quantity) }}주 · 평단 {{ won(h.avgPrice) }}
|
||||
<template v-if="h.currentPrice != null"> · 현재가 {{ won(h.currentPrice) }}</template>
|
||||
<span v-else class="noprice"> · 현재가 미입력</span>
|
||||
</div>
|
||||
@@ -213,7 +217,7 @@ onMounted(load)
|
||||
<li v-for="t in tradesByHolding[h.id]" :key="t.id" class="trade-row">
|
||||
<span class="t-date">{{ tDate(t.tradeDate) }}</span>
|
||||
<span class="t-type" :class="t.tradeType === 'SELL' ? 'sell' : 'buy'">{{ t.tradeType === 'SELL' ? '매도' : '매수' }}</span>
|
||||
<span class="t-qty">{{ won(t.quantity) }}주 × {{ won(t.price) }}</span>
|
||||
<span class="t-qty">{{ shares(t.quantity) }}주 × {{ won(t.price) }}</span>
|
||||
<span class="t-fee" v-if="t.fee">수수료 {{ won(t.fee) }}</span>
|
||||
<span class="t-amt">{{ won(t.amount) }}</span>
|
||||
<IconBtn class="t-del" icon="trash" title="매매 삭제" variant="danger" size="sm" @click="removeTrade(t, h.id)" />
|
||||
@@ -261,10 +265,10 @@ onMounted(load)
|
||||
</select>
|
||||
</label>
|
||||
<label>거래일<input v-model="tForm.tradeDate" type="date" :disabled="tSubmitting" /></label>
|
||||
<label>수량(주)<input v-model.number="tForm.quantity" type="number" min="1" :disabled="tSubmitting" /></label>
|
||||
<label>수량(주)<input v-model.number="tForm.quantity" type="number" min="0" step="any" inputmode="decimal" placeholder="예: 0.5 / 1.25 (소수점 가능)" :disabled="tSubmitting" /></label>
|
||||
<label>단가(원)<input v-model.number="tForm.price" type="number" min="0" :disabled="tSubmitting" /></label>
|
||||
<label>수수료/세금<input v-model.number="tForm.fee" type="number" min="0" placeholder="(선택)" :disabled="tSubmitting" /></label>
|
||||
<p v-if="tForm.tradeType === 'SELL'" class="pf-hint">보유 {{ won(tradeHolding?.quantity) }}주 · 평단 {{ won(tradeHolding?.avgPrice) }}</p>
|
||||
<p v-if="tForm.tradeType === 'SELL'" class="pf-hint">보유 {{ shares(tradeHolding?.quantity) }}주 · 평단 {{ won(tradeHolding?.avgPrice) }}</p>
|
||||
<p v-if="tError" class="pf-msg err">{{ tError }}</p>
|
||||
<div class="pf-buttons">
|
||||
<IconBtn icon="close" title="취소" @click="tradeModal = false" />
|
||||
|
||||
@@ -191,11 +191,10 @@ onMounted(load)
|
||||
<span class="type-badge" :class="r.type.toLowerCase()">{{ typeLabel(r.type) }}</span>
|
||||
<span v-if="!r.active" class="off">중지</span>
|
||||
</div>
|
||||
<span class="sub">
|
||||
{{ freqLabel(r) }} · {{ won(r.amount) }}
|
||||
<template v-if="r.category"> · {{ r.category }}</template>
|
||||
<template v-if="r.nextDate"> · 다음 {{ r.nextDate }}</template>
|
||||
</span>
|
||||
<div class="sub">
|
||||
{{ freqLabel(r) }} · {{ won(r.amount) }}<template v-if="r.category"> · {{ r.category }}</template>
|
||||
</div>
|
||||
<div v-if="r.nextDate" class="next">다음 {{ r.nextDate }}</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<IconBtn icon="edit" title="수정" size="sm" @click="openEdit(r)" />
|
||||
@@ -328,14 +327,21 @@ button.primary {
|
||||
}
|
||||
.recur-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.recur-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem;
|
||||
padding: 0.7rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.recur-row.inactive {
|
||||
opacity: 0.55;
|
||||
}
|
||||
@@ -368,10 +374,17 @@ button.primary {
|
||||
.sub {
|
||||
font-size: 0.83rem;
|
||||
opacity: 0.75;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
.next {
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.6;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.actions button {
|
||||
padding: 0.2rem 0.55rem;
|
||||
|
||||
Reference in New Issue
Block a user