feat(repayment): 대출·카드할부 상환 조회 화면 (유료)

- 사이드바 '대출·할부 상환' 메뉴(프리미엄 잠금), /account/repayments 라우트
- 대출: 상환방식별(원리금균등·원금균등·만기일시) 남은 회차 상각 스케줄
- 카드 할부: 무이자 가정, 진행 중 할부 건별 남은 회차
- 회차별 원금·이자·합계 + 남은 잔액 표기, 이번 달/남은 총액 합계
- 계산은 프런트(utils/repayment.js), 지갑·카드 내역만으로 산출

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

src/views/UpgradeView.vue

@@ -72,6 +72,7 @@ const premiumFeatures = [
   '영수증 OCR 인식',
   '카드 알림 자동 인식',
   '투자 · 자산 관리',
+  '대출 · 할부 상환표 (원금 · 이자 분리)',
   '태그 · 소분류 무제한',
   '데이터 백업 / 복구 (엑셀)',
   '광고 제거',

src/views/account/RepaymentScheduleView.vue

@@ -0,0 +1,379 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { accountApi } from '@/api/accountApi'
+import { loanSchedule, cardInstallmentSchedule, currentYm } from '@/utils/repayment'
+
+const loading = ref(false)
+const error = ref(null)
+const items = ref([]) // { id, kind, name, sub, rows, partial }
+const expanded = ref(new Set())
+
+const now = currentYm()
+const nowLabel = `${now.y}.${String(now.m).padStart(2, '0')}`
+
+function won(n) {
+  return n == null ? '-' : Number(n).toLocaleString('ko-KR')
+}
+function loanMethodLabel(v) {
+  return v === 'EQUAL_PAYMENT'
+    ? '원리금균등'
+    : v === 'EQUAL_PRINCIPAL'
+      ? '원금균등'
+      : v === 'BULLET'
+        ? '만기일시'
+        : '상환'
+}
+function loanSub(w) {
+  const parts = [loanMethodLabel(w.loanMethod)]
+  if (w.loanRate) parts.push(`${w.loanRate}%`)
+  if (w.loanMonths) parts.push(`${w.loanMonths}개월`)
+  return parts.join(' · ')
+}
+
+async function load() {
+  loading.value = true
+  error.value = null
+  try {
+    const ws = await accountApi.wallets()
+    const list = []
+
+    // 대출: 금리가 설정된 대출만 상각 스케줄 계산
+    for (const w of ws.filter((x) => x.type === 'LOAN' && x.loanRate)) {
+      const { rows, partial } = loanSchedule(w, now)
+      if (!rows.length) continue
+      list.push({ id: `loan-${w.id}`, kind: 'LOAN', name: w.name, sub: loanSub(w), rows, partial })
+    }
+
+    // 카드 할부(무이자): 진행 중인 할부 건별로
+    const cards = ws.filter((x) => x.type === 'CARD')
+    const entryLists = await Promise.all(
+      cards.map((c) => accountApi.walletEntries(c.id).catch(() => [])),
+    )
+    cards.forEach((c, i) => {
+      const purchases = (entryLists[i] || []).filter(
+        (e) => e.type === 'EXPENSE' && Number(e.installmentMonths) >= 2,
+      )
+      for (const e of purchases) {
+        const sch = cardInstallmentSchedule(e, now)
+        if (!sch) continue
+        const desc = e.category || e.memo || '할부'
+        list.push({
+          id: `card-${e.id}`,
+          kind: 'CARD',
+          name: c.name,
+          sub: `${desc} · ${e.installmentMonths}개월 무이자 · ${String(e.entryDate || '').slice(0, 10)}`,
+          rows: sch.rows,
+          partial: false,
+        })
+      }
+    })
+
+    items.value = list
+  } catch (e) {
+    error.value = e.response?.data?.message || '불러오지 못했습니다.'
+  } finally {
+    loading.value = false
+  }
+}
+onMounted(load)
+
+// 이번 달 상환 합계 (이번 달 회차만)
+const thisMonth = computed(() => {
+  let p = 0, i = 0, t = 0
+  for (const it of items.value) {
+    for (const r of it.rows) {
+      if (r.label !== nowLabel) continue
+      p += r.principal || 0
+      i += r.interest || 0
+      t += r.total ?? (r.principal || 0) + (r.interest || 0)
+    }
+  }
+  return { p, i, t }
+})
+// 남은 상환 총액
+const remainTotal = computed(() => {
+  let p = 0, i = 0, t = 0
+  for (const it of items.value) {
+    for (const r of it.rows) {
+      p += r.principal || 0
+      i += r.interest || 0
+      t += r.total ?? (r.principal || 0) + (r.interest || 0)
+    }
+  }
+  return { p, i, t }
+})
+
+function itemThisMonth(it) {
+  const r = it.rows.find((x) => x.label === nowLabel)
+  return r ? (r.total ?? (r.principal || 0) + (r.interest || 0)) : null
+}
+function itemRemain(it) {
+  return it.rows.reduce((s, r) => s + (r.total ?? (r.principal || 0) + (r.interest || 0)), 0)
+}
+function toggle(id) {
+  const s = new Set(expanded.value)
+  s.has(id) ? s.delete(id) : s.add(id)
+  expanded.value = s
+}
+</script>
+
+<template>
+  <section class="repay">
+    <h1 class="title">대출·할부 상환</h1>
+    <p class="lead">대출 월 상환금과 카드 할부금을 원금·이자로 나눠, 남은 회차까지 한눈에 봅니다.</p>
+
+    <p v-if="error" class="msg error">{{ error }}</p>
+    <p v-else-if="loading" class="msg">불러오는 중...</p>
+
+    <template v-else>
+      <!-- 합계 요약 -->
+      <div class="summary">
+        <div class="sum-card accent">
+          <span class="k">이번 달 상환</span>
+          <span class="v">{{ won(thisMonth.t) }}</span>
+          <span class="split">원금 {{ won(thisMonth.p) }} · 이자 {{ won(thisMonth.i) }}</span>
+        </div>
+        <div class="sum-card">
+          <span class="k">남은 상환 총액</span>
+          <span class="v">{{ won(remainTotal.t) }}</span>
+          <span class="split">원금 {{ won(remainTotal.p) }} · 이자 {{ won(remainTotal.i) }}</span>
+        </div>
+      </div>
+
+      <div v-if="!items.length" class="empty-state">
+        <p class="empty-emoji">💳</p>
+        <p class="empty-title">상환 중인 대출·할부가 없어요</p>
+        <p class="empty-desc">대출 계좌(금리 입력)나 카드 할부 결제가 있으면 여기에 표시됩니다.</p>
+      </div>
+
+      <!-- 항목별 -->
+      <div v-for="it in items" :key="it.id" class="item">
+        <button type="button" class="item-head" @click="toggle(it.id)">
+          <span class="kind" :class="it.kind === 'LOAN' ? 'k-loan' : 'k-card'">
+            {{ it.kind === 'LOAN' ? '대출' : '카드' }}
+          </span>
+          <span class="info">
+            <span class="name">{{ it.name }}</span>
+            <span class="sub">{{ it.sub }}</span>
+          </span>
+          <span class="amt">
+            <span class="amt-now">이번 달 {{ won(itemThisMonth(it)) }}</span>
+            <span class="amt-rem">남은 {{ it.rows.length }}회 · {{ won(itemRemain(it)) }}</span>
+          </span>
+          <span class="chev">{{ expanded.has(it.id) ? '▾' : '▸' }}</span>
+        </button>
+
+        <div v-if="expanded.has(it.id)" class="sched-wrap">
+          <p v-if="it.partial" class="partial-note">상환 개월(기간) 정보가 없어 이번 달 이자만 표시합니다. 계좌 관리에서 대출 개월수를 입력하면 전체 스케줄이 계산됩니다.</p>
+          <table class="sched">
+            <thead>
+              <tr>
+                <th>회차</th>
+                <th class="num">원금</th>
+                <th class="num">이자</th>
+                <th class="num">합계</th>
+                <th class="num">남은 잔액</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(r, idx) in it.rows" :key="idx" :class="{ current: r.label === nowLabel }">
+                <td>{{ r.label }}</td>
+                <td class="num">{{ won(r.principal) }}</td>
+                <td class="num">{{ won(r.interest) }}</td>
+                <td class="num strong">{{ won(r.total) }}</td>
+                <td class="num muted">{{ won(r.balance) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.repay {
+  max-width: 820px;
+  margin: 0 auto;
+}
+.title {
+  font-size: 1.3rem;
+  font-weight: 800;
+  margin: 0 0 0.25rem;
+}
+.lead {
+  font-size: 0.9rem;
+  opacity: 0.7;
+  margin: 0 0 1.1rem;
+}
+.msg {
+  margin: 0.75rem 0;
+  opacity: 0.8;
+}
+.msg.error {
+  color: #c0392b;
+}
+.summary {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.7rem;
+  margin-bottom: 1.2rem;
+}
+.sum-card {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0.9rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  background: var(--color-background-soft);
+}
+.sum-card.accent {
+  border-color: hsla(160, 100%, 37%, 0.6);
+  background: hsla(160, 100%, 37%, 0.06);
+}
+.sum-card .k {
+  font-size: 0.82rem;
+  opacity: 0.7;
+}
+.sum-card .v {
+  font-size: 1.35rem;
+  font-weight: 800;
+}
+.sum-card .split {
+  font-size: 0.78rem;
+  opacity: 0.65;
+}
+.item {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  margin-bottom: 0.7rem;
+  overflow: hidden;
+}
+.item-head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.75rem 0.85rem;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: var(--color-text);
+  text-align: left;
+}
+.kind {
+  flex: 0 0 auto;
+  font-size: 0.72rem;
+  font-weight: 700;
+  padding: 0.15rem 0.45rem;
+  border-radius: 6px;
+}
+.k-loan {
+  background: hsla(215, 90%, 55%, 0.15);
+  color: hsla(215, 90%, 55%, 1);
+}
+.k-card {
+  background: hsla(280, 60%, 55%, 0.15);
+  color: hsla(280, 60%, 60%, 1);
+}
+.info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.info .name {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.info .sub {
+  font-size: 0.78rem;
+  opacity: 0.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.amt {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+}
+.amt-now {
+  font-weight: 700;
+  font-size: 0.92rem;
+}
+.amt-rem {
+  font-size: 0.75rem;
+  opacity: 0.6;
+}
+.chev {
+  flex: 0 0 auto;
+  opacity: 0.5;
+  font-size: 0.8rem;
+}
+.sched-wrap {
+  padding: 0 0.5rem 0.6rem;
+  overflow-x: auto;
+}
+.partial-note {
+  font-size: 0.8rem;
+  opacity: 0.75;
+  padding: 0.4rem 0.4rem 0.6rem;
+}
+.sched {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+.sched th,
+.sched td {
+  padding: 0.45rem 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+  white-space: nowrap;
+}
+.sched th {
+  font-size: 0.76rem;
+  opacity: 0.6;
+  text-align: left;
+  font-weight: 600;
+}
+.sched .num {
+  text-align: right;
+}
+.sched td.strong {
+  font-weight: 700;
+}
+.sched td.muted {
+  opacity: 0.6;
+}
+.sched tr.current td {
+  background: hsla(160, 100%, 37%, 0.08);
+}
+.empty-state {
+  text-align: center;
+  padding: 2.5rem 1rem;
+  opacity: 0.85;
+}
+.empty-emoji {
+  font-size: 2rem;
+}
+.empty-title {
+  font-weight: 700;
+  margin-top: 0.4rem;
+}
+.empty-desc {
+  font-size: 0.85rem;
+  opacity: 0.7;
+  margin-top: 0.2rem;
+}
+@media (max-width: 560px) {
+  .summary {
+    grid-template-columns: 1fr;
+  }
+}
+</style>