feat: 분류 대/소분류 UI — 관리·입력·예산·고정지출·통계

- 분류 관리: 대분류 선택·소분류 들여쓰기(드래그 정렬 유지)
- 입력/예산/고정지출 분류 드롭다운 대분류 optgroup 그룹핑(값은 소분류명)
- 대시보드: 파이는 소분류 기준 + 대분류 합계 롤업 표시
- 릴리스 노트 33

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/views/account/CategoryView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import Sortable from 'sortablejs'
 import { accountApi } from '@/api/accountApi'
@@ -13,6 +13,7 @@ const loading = ref(false)
 const error = ref(null)
 const activeType = ref('EXPENSE') // EXPENSE / INCOME
 const newName = ref('')
+const newParent = ref('') // 추가 시 대분류('' = 대분류로 추가)
 
 // categories/activeType 변경 시 현재 탭 목록 동기화 (백엔드가 sort_order 순 정렬)
 function syncRows() {
@@ -20,6 +21,13 @@ function syncRows() {
 }
 watch([categories, activeType], syncRows, { immediate: true })
 
+// 현재 탭의 대분류(parent 없는 것) 목록 — 부모 선택 옵션용
+const majors = computed(() => rows.value.filter((c) => c.parentId == null))
+// 부모(대분류) 선택 옵션: 자기 자신 제외
+function parentOptions(c) {
+  return majors.value.filter((m) => m.id !== c.id)
+}
+
 async function load() {
   loading.value = true
   error.value = null
@@ -67,7 +75,7 @@ async function addCategory() {
   const name = newName.value.trim()
   if (!name) return
   try {
-    await accountApi.createCategory({ type: activeType.value, name })
+    await accountApi.createCategory({ type: activeType.value, name, parentId: newParent.value || null })
     newName.value = ''
     await load()
   } catch (e) {
@@ -79,7 +87,8 @@ async function saveCategory(c) {
   const name = (c.name || '').trim()
   if (!name) return
   try {
-    await accountApi.updateCategory(c.id, { type: c.type, name })
+    // parentId 는 항상 현재값을 함께 전송(미전송 시 대분류로 풀림)
+    await accountApi.updateCategory(c.id, { type: c.type, name, parentId: c.parentId || null })
     await load()
   } catch (e) {
     alert(e.response?.data?.message || '수정에 실패했습니다.')
@@ -122,7 +131,7 @@ onBeforeUnmount(() => sortable?.destroy())
         <IconBtn icon="back" title="가계부로" @click="router.push('/account')" />
       </div>
     </header>
-    <p class="hint">내역·예산에서 선택할 분류를 관리합니다. 분류 이름을 바꾸면 기존 내역·예산에도 반영됩니다.</p>
+    <p class="hint">내역·예산에서 선택할 분류를 관리합니다. <b>대분류 아래 소분류</b>로 묶을 수 있고(2단계), 예산·통계는 소분류 기준입니다. 이름을 바꾸면 기존 내역·예산에도 반영됩니다.</p>
 
     <div class="tabs">
       <button type="button" :class="{ active: activeType === 'EXPENSE' }" @click="activeType = 'EXPENSE'">지출 분류</button>
@@ -130,18 +139,27 @@ onBeforeUnmount(() => sortable?.destroy())
     </div>
 
     <form class="new-cat" @submit.prevent="addCategory">
+      <select v-model="newParent" class="parent-sel" title="대분류 선택">
+        <option value="">대분류로 추가</option>
+        <option v-for="m in majors" :key="m.id" :value="m.id">{{ m.name }}의 소분류</option>
+      </select>
       <input v-model="newName" type="text" :placeholder="activeType === 'EXPENSE' ? '예: 식비, 교통' : '예: 급여, 용돈'" />
       <IconBtn icon="plus" title="추가" variant="primary" type="submit" />
     </form>
-    <p class="hint sm">≡ 손잡이를 끌어 순서를 바꾸면 내역 추가 화면에도 그 순서로 나옵니다.</p>
+    <p class="hint sm">≡ 손잡이를 끌어 순서 변경. 각 행의 대분류를 바꾸면 소분류로 묶입니다.</p>
 
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
     <ul v-show="!loading && rows.length" ref="listEl" class="cat-list">
-      <li v-for="c in rows" :key="c.id" :data-id="c.id" class="cat-row">
+      <li v-for="c in rows" :key="c.id" :data-id="c.id" class="cat-row" :class="{ child: c.parentId != null }">
         <span class="drag-handle" title="드래그하여 순서 변경">≡</span>
+        <span v-if="c.parentId != null" class="sub-mark" title="소분류">↳</span>
         <input v-model="c.name" class="cat-name" @keyup.enter="saveCategory(c)" />
+        <select v-model="c.parentId" class="parent-sel" title="대분류" @change="saveCategory(c)">
+          <option :value="null">(대분류)</option>
+          <option v-for="m in parentOptions(c)" :key="m.id" :value="m.id">{{ m.name }}</option>
+        </select>
         <IconBtn icon="check" title="저장" @click="saveCategory(c)" />
         <IconBtn icon="trash" title="삭제" variant="danger" @click="removeCategory(c)" />
       </li>
@@ -245,6 +263,23 @@ button.danger {
 }
 .cat-name {
   flex: 1;
+  min-width: 0;
+}
+.parent-sel {
+  max-width: 40%;
+  font-size: 0.85rem;
+}
+.new-cat .parent-sel {
+  flex: 0 0 auto;
+}
+.cat-row.child {
+  padding-left: 1.2rem;
+}
+.cat-row.child .cat-name {
+  background: var(--color-background-soft);
+}
+.sub-mark {
+  opacity: 0.45;
 }
 .hint.sm {
   font-size: 0.78rem;