diff --git a/docs/changelog.md b/docs/changelog.md index 01c568b..0ad6908 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -69,3 +69,4 @@ - 거래 입력/수정에서 자산 선택 후 분류 선택 바텀시트로 자연스럽게 이어지도록 했다. - 거래 입력/수정의 수입/지출 타입 변경 시 카테고리 선택을 초기화하고 저장/삭제/복사 실패 토스트를 추가했다. - 거래 입력/수정의 금액 입력을 기본 숫자 input에서 숫자만 정리하는 텍스트 입력으로 바꾸고 천 단위 표시를 적용했다. +- 통계 화면의 카테고리 집계를 최종 카테고리 기준으로 바꾸고 목록 높이와 보조 정보를 더 촘촘하게 정리했다. diff --git a/pages/stats.vue b/pages/stats.vue index 5f2e69a..c04cf3b 100644 --- a/pages/stats.vue +++ b/pages/stats.vue @@ -34,19 +34,9 @@ -
-
-
-

{{ selectedType === 'income' ? '수입 합계' : '지출 합계' }}

-

{{ formatWon(selectedTotal) }}

-
-
-

차액

-

- {{ formatWon(summary.diff) }} -

-
-
+
+

{{ selectedType === 'income' ? '수입 합계' : '지출 합계' }}

+

{{ formatWon(selectedTotal) }}

@@ -54,21 +44,21 @@ v-for="item in categoryTotals" :key="item.id" type="button" - class="flex w-full items-center gap-3 px-4 py-3 text-left active:bg-paper" + class="flex w-full items-center gap-3 px-4 py-2.5 text-left active:bg-paper" > {{ item.percent }}% - {{ item.name }} - - {{ item.children.map((child: any) => child.name).join(' · ') }} + {{ item.name }} + + {{ item.parentName }} - {{ formatWon(item.total) }} + {{ formatWon(item.total) }}

@@ -118,22 +108,21 @@ const categoryTotals = computed(() => { const map = new Map() for (const tx of data.value?.transactions || []) { if (tx.type !== selectedType.value) continue - const parent = tx.category.parent || tx.category - const current = map.get(parent.id) || { id: parent.id, name: parent.name, total: 0, children: new Map() } - current.total += tx.amount - if (tx.category.parent) { - const child = current.children.get(tx.category.id) || { id: tx.category.id, name: tx.category.name, total: 0 } - child.total += tx.amount - current.children.set(tx.category.id, child) + const category = tx.category + const current = map.get(category.id) || { + id: category.id, + name: category.name, + parentName: category.parent?.name || '', + total: 0 } - map.set(parent.id, current) + current.total += tx.amount + map.set(category.id, current) } return Array.from(map.values()) .map(item => ({ ...item, - percent: selectedTotal.value ? Math.round((item.total / selectedTotal.value) * 100) : 0, - children: Array.from(item.children.values()) + percent: selectedTotal.value ? Math.round((item.total / selectedTotal.value) * 100) : 0 })) .sort((a, b) => b.total - a.total) }) diff --git a/todo.md b/todo.md index e3ec6b9..b904f9b 100644 --- a/todo.md +++ b/todo.md @@ -32,10 +32,7 @@ ## 6. 통계 -- 통계 화면의 월 이동 헤더를 공통 구조에 맞춘다. -- 수입/지출 탭의 목록 밀도와 표시 정보를 정리한다. - 기간 선택 바텀 시트를 월간, 연간, 사용자 지정 범위로 확장한다. -- 카테고리별 합계에서 상위/하위 카테고리 표시 규칙을 다듬는다. - 그래프가 필요해질 경우 최소한의 막대/도넛 차트를 추가한다. ## 7. 설정