Merge branch 'dev' into main

package-lock.json

@@ -18,6 +18,7 @@
         "axios": "^1.16.1",
         "pinia": "^3.0.4",
         "prismjs": "^1.30.0",
+        "sortablejs": "^1.15.7",
         "vue": "^3.5.32",
         "vue-router": "^5.0.4"
       },
@@ -4883,6 +4884,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.7.tgz",
+      "integrity": "sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "axios": "^1.16.1",
     "pinia": "^3.0.4",
     "prismjs": "^1.30.0",
+    "sortablejs": "^1.15.7",
     "vue": "^3.5.32",
     "vue-router": "^5.0.4"
   },

src/api/accountApi.js

@@ -65,6 +65,12 @@ export const accountApi = {
   budgetPeriod({ unit, year, month }) {
     return http.get('/account/budgets/period', { params: { unit, year, month } })
   },
+  expectedIncome() {
+    return http.get('/account/budgets/income')
+  },
+  setExpectedIncome(expectedIncome) {
+    return http.put('/account/budgets/income', { expectedIncome })
+  },
   createBudget(payload) {
     return http.post('/account/budgets', payload)
   },
@@ -123,6 +129,9 @@ export const accountApi = {
   removeCategory(id) {
     return http.delete(`/account/categories/${id}`)
   },
+  reorderCategories(type, ids) {
+    return http.put('/account/categories/reorder', { type, ids })
+  },
   importCategories() {
     return http.post('/account/categories/import')
   },

src/views/account/BudgetView.vue

@@ -81,6 +81,32 @@ function barClass(s) {
   return r >= 1 ? 'over' : r >= 0.8 ? 'warn' : 'ok'
 }
 
+// ===== 월 예상 수입 vs 총 예산 비교 =====
+const expectedIncome = ref(null)
+const incomeDraft = ref('')
+async function loadIncome() {
+  try {
+    const r = await accountApi.expectedIncome()
+    expectedIncome.value = r.expectedIncome
+    incomeDraft.value = r.expectedIncome ?? ''
+  } catch {
+    expectedIncome.value = null
+  }
+}
+async function saveIncome() {
+  try {
+    const v = incomeDraft.value === '' || incomeDraft.value == null ? 0 : Number(incomeDraft.value)
+    const r = await accountApi.setExpectedIncome(v)
+    expectedIncome.value = r.expectedIncome
+  } catch (e) {
+    alert(e.response?.data?.message || '저장에 실패했습니다.')
+  }
+}
+const totalBudget = computed(() => statuses.value.reduce((s, x) => s + (x.monthlyBudget || 0), 0))
+const incomeVal = computed(() => Number(expectedIncome.value) || 0)
+const leftover = computed(() => incomeVal.value - totalBudget.value) // 여유(저축 가능액)
+const budgetOfIncome = computed(() => (incomeVal.value > 0 ? Math.min(totalBudget.value / incomeVal.value, 1) : 0))
+
 async function load() {
   loading.value = true
   error.value = null
@@ -193,6 +219,7 @@ async function remove(s) {
 onMounted(() => {
   load()
   loadCategories()
+  loadIncome()
 })
 </script>
 
@@ -212,6 +239,28 @@ onMounted(() => {
       <IconBtn icon="chevronRight" title="다음 달" size="sm" @click="nextMonth" />
     </div>
 
+    <!-- 월 예상 수입 vs 총 예산 -->
+    <div class="income-panel">
+      <div class="inc-input">
+        <label>월 예상 수입</label>
+        <input v-model.number="incomeDraft" type="number" min="0" placeholder="예상 수입(원)" @keyup.enter="saveIncome" />
+        <IconBtn icon="check" title="저장" variant="primary" size="sm" @click="saveIncome" />
+      </div>
+      <div v-if="incomeVal > 0" class="inc-compare">
+        <div class="inc-bar">
+          <div class="inc-fill" :class="leftover < 0 ? 'over' : ''" :style="{ width: budgetOfIncome * 100 + '%' }"></div>
+        </div>
+        <div class="inc-nums">
+          <span>수입 <b class="income">{{ won(incomeVal) }}</b></span>
+          <span>예산 <b>{{ won(totalBudget) }}</b></span>
+          <span :class="leftover < 0 ? 'expense' : 'income'">
+            {{ leftover >= 0 ? '여유' : '초과' }} <b>{{ won(Math.abs(leftover)) }}</b>
+          </span>
+        </div>
+      </div>
+      <p v-else class="inc-hint">예상 수입을 입력하면 설정한 예산과 비교해 여유 금액을 보여줍니다.</p>
+    </div>
+
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
@@ -352,6 +401,68 @@ button.primary {
   min-width: 8rem;
   text-align: center;
 }
+/* 예상 수입 vs 예산 */
+.income-panel {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 0.8rem 1rem;
+  margin-bottom: 1.25rem;
+}
+.inc-input {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.inc-input label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.inc-input input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.45rem 0.6rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+}
+.inc-compare {
+  margin-top: 0.7rem;
+}
+.inc-bar {
+  height: 8px;
+  background: var(--color-background-mute);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.inc-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: #2e7d32;
+  transition: width 0.3s;
+}
+.inc-fill.over {
+  background: #c0392b;
+}
+.inc-nums {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.4rem;
+  font-size: 0.85rem;
+}
+.inc-nums .income {
+  color: #2e7d32;
+}
+.inc-nums .expense {
+  color: #c0392b;
+}
+.inc-hint {
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  opacity: 0.65;
+}
 .status-list {
   list-style: none;
 }

src/views/account/CategoryView.vue

@@ -1,18 +1,24 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
+import Sortable from 'sortablejs'
 import { accountApi } from '@/api/accountApi'
 import IconBtn from '@/components/ui/IconBtn.vue'
 
 const router = useRouter()
 
 const categories = ref([])
+const rows = ref([]) // 현재 탭(activeType)의 분류 — 드래그 정렬 대상
 const loading = ref(false)
 const error = ref(null)
 const activeType = ref('EXPENSE') // EXPENSE / INCOME
 const newName = ref('')
 
-const filtered = computed(() => categories.value.filter((c) => c.type === activeType.value))
+// categories/activeType 변경 시 현재 탭 목록 동기화 (백엔드가 sort_order 순 정렬)
+function syncRows() {
+  rows.value = categories.value.filter((c) => c.type === activeType.value)
+}
+watch([categories, activeType], syncRows, { immediate: true })
 
 async function load() {
   loading.value = true
@@ -26,6 +32,37 @@ async function load() {
   }
 }
 
+// ===== 드래그앤드랍 정렬 (SortableJS, 터치 지원) =====
+const listEl = ref(null)
+let sortable = null
+function initSortable() {
+  if (sortable) {
+    sortable.destroy()
+    sortable = null
+  }
+  if (!listEl.value) return
+  sortable = Sortable.create(listEl.value, {
+    handle: '.drag-handle',
+    animation: 150,
+    onEnd: (evt) => {
+      if (evt.oldIndex === evt.newIndex) return
+      const arr = rows.value
+      const moved = arr.splice(evt.oldIndex, 1)[0]
+      arr.splice(evt.newIndex, 0, moved)
+      persistOrder(arr.map((r) => r.id))
+    },
+  })
+}
+async function persistOrder(ids) {
+  try {
+    await accountApi.reorderCategories(activeType.value, ids)
+    await load()
+  } catch (e) {
+    alert(e.response?.data?.message || '순서 저장에 실패했습니다.')
+    await load()
+  }
+}
+
 async function addCategory() {
   const name = newName.value.trim()
   if (!name) return
@@ -68,7 +105,12 @@ async function importExisting() {
   }
 }
 
-onMounted(load)
+onMounted(async () => {
+  await load()
+  await nextTick()
+  initSortable()
+})
+onBeforeUnmount(() => sortable?.destroy())
 </script>
 
 <template>
@@ -91,18 +133,20 @@ onMounted(load)
       <input v-model="newName" type="text" :placeholder="activeType === 'EXPENSE' ? '예: 식비, 교통' : '예: 급여, 용돈'" />
       <IconBtn icon="plus" title="추가" variant="primary" type="submit" />
     </form>
+    <p class="hint sm">≡ 손잡이를 끌어 순서를 바꾸면 내역 추가 화면에도 그 순서로 나옵니다.</p>
 
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
-    <ul v-else-if="filtered.length" class="cat-list">
+    <ul v-show="!loading && rows.length" ref="listEl" class="cat-list">
-      <li v-for="c in filtered" :key="c.id" class="cat-row">
+      <li v-for="c in rows" :key="c.id" :data-id="c.id" class="cat-row">
+        <span class="drag-handle" title="드래그하여 순서 변경">≡</span>
         <input v-model="c.name" class="cat-name" @keyup.enter="saveCategory(c)" />
         <IconBtn icon="check" title="저장" @click="saveCategory(c)" />
         <IconBtn icon="trash" title="삭제" variant="danger" @click="removeCategory(c)" />
       </li>
     </ul>
-    <p v-else-if="!loading" class="msg">
+    <p v-if="!loading && !rows.length" class="msg">
       등록된 {{ activeType === 'EXPENSE' ? '지출' : '수입' }} 분류가 없습니다.
     </p>
   </section>
@@ -184,10 +228,26 @@ button.danger {
   align-items: center;
   padding: 0.4rem 0;
   border-bottom: 1px solid var(--color-border);
+  background: var(--color-background);
+}
+.drag-handle {
+  cursor: grab;
+  user-select: none;
+  opacity: 0.5;
+  font-size: 1.1rem;
+  padding: 0 0.2rem;
+  touch-action: none;
+}
+.drag-handle:active {
+  cursor: grabbing;
 }
 .cat-name {
   flex: 1;
 }
+.hint.sm {
+  font-size: 0.78rem;
+  margin: 0 0 0.75rem;
+}
 .msg {
   margin: 0.75rem 0;
 }