Refine stats category list

docs/changelog.md

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

pages/stats.vue

@@ -34,19 +34,9 @@
       </div>
     </header>
 
-    <div class="bg-white px-4 py-4">
-      <div class="flex items-end justify-between">
-        <div>
-          <p class="text-sm font-semibold text-muted">{{ selectedType === 'income' ? '수입 합계' : '지출 합계' }}</p>
-          <p class="mt-1 text-2xl font-bold">{{ formatWon(selectedTotal) }}</p>
-        </div>
-        <div class="text-right">
-          <p class="text-sm font-semibold text-muted">차액</p>
-          <p class="mt-1 text-lg font-bold" :class="summary.diff >= 0 ? 'text-brand-700' : 'text-red-600'">
-            {{ formatWon(summary.diff) }}
-          </p>
-        </div>
-      </div>
+    <div class="bg-white px-4 py-3">
+      <p class="text-xs font-semibold text-muted">{{ selectedType === 'income' ? '수입 합계' : '지출 합계' }}</p>
+      <p class="mt-1 text-2xl font-bold">{{ formatWon(selectedTotal) }}</p>
     </div>
 
     <div class="mt-3 divide-y divide-line border-y border-line bg-white">
@@ -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"
       >
         <span
-          class="flex h-8 w-14 shrink-0 items-center justify-center rounded-md text-xs font-bold text-white"
+          class="flex h-7 w-12 shrink-0 items-center justify-center rounded-md text-xs font-bold text-white"
           :class="selectedType === 'income' ? 'bg-brand-600' : 'bg-red-500'"
         >
           {{ item.percent }}%
         </span>
         <span class="min-w-0 flex-1">
-          <span class="block truncate text-base font-semibold">{{ item.name }}</span>
-          <span v-if="item.children.length" class="mt-1 block truncate text-sm text-muted">
-            {{ item.children.map((child: any) => child.name).join(' · ') }}
+          <span class="block truncate text-sm font-semibold">{{ item.name }}</span>
+          <span v-if="item.parentName" class="mt-0.5 block truncate text-xs text-muted">
+            {{ item.parentName }}
           </span>
         </span>
-        <span class="shrink-0 text-base font-semibold">{{ formatWon(item.total) }}</span>
+        <span class="shrink-0 text-sm font-semibold">{{ formatWon(item.total) }}</span>
       </button>
 
       <p v-if="!categoryTotals.length" class="px-4 py-12 text-center text-muted">
@@ -118,22 +108,21 @@ const categoryTotals = computed(() => {
   const map = new Map<string, any>()
   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)
 })

todo.md

@@ -32,10 +32,7 @@
 
 ## 6. 통계
 
-- 통계 화면의 월 이동 헤더를 공통 구조에 맞춘다.
-- 수입/지출 탭의 목록 밀도와 표시 정보를 정리한다.
 - 기간 선택 바텀 시트를 월간, 연간, 사용자 지정 범위로 확장한다.
-- 카테고리별 합계에서 상위/하위 카테고리 표시 규칙을 다듬는다.
 - 그래프가 필요해질 경우 최소한의 막대/도넛 차트를 추가한다.
 
 ## 7. 설정