From ed607e1cda63b5799c85ac8542591e0934819470 Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Thu, 9 Jul 2026 22:46:11 +0900
Subject: [PATCH] =?UTF-8?q?refactor(recurring):=20=EC=A0=95=EA=B8=B0?=
 =?UTF-8?q?=EA=B2=B0=EC=A0=9C=20=EC=B6=94=EA=B0=80/=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=9D=84=20=EB=AA=A8=EB=8B=AC=20=E2=86=92=20=EB=B3=84=EB=8F=84?=
 =?UTF-8?q?=20=ED=99=94=EB=A9=B4(=ED=99=94=EB=A9=B4=EC=A0=84=ED=99=98)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- RecurringFormView.vue 신규: /account/recurrings/new · /:id/edit
- RecurringView: 목록 전용으로 정리(폼·모달·계좌/분류 로직 제거), +/수정은 화면 이동
- 무료 한도 초과 시 업셀은 목록에서 확인 후 이동

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/router/index.js                     |  12 +
 src/views/account/RecurringFormView.vue | 408 ++++++++++++++++++++++++
 src/views/account/RecurringView.vue     | 320 +------------------
 3 files changed, 424 insertions(+), 316 deletions(-)
 create mode 100644 src/views/account/RecurringFormView.vue

diff --git a/src/router/index.js b/src/router/index.js
index 2f21fc7..20b35f0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -182,6 +182,18 @@ const router = createRouter({
       // 정기결제은 무료도 2건까지 체험(초과 시 업셀) — 유료 게이트 해제
       meta: { requiresAuth: true },
     },
+    {
+      path: '/account/recurrings/new',
+      name: 'account-recurring-new',
+      component: () => import('../views/account/RecurringFormView.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/account/recurrings/:id(\\d+)/edit',
+      name: 'account-recurring-edit',
+      component: () => import('../views/account/RecurringFormView.vue'),
+      meta: { requiresAuth: true },
+    },
     // 설정 (앱 하단 내비게이션 → 설정)
     {
       path: '/settings',
diff --git a/src/views/account/RecurringFormView.vue b/src/views/account/RecurringFormView.vue
new file mode 100644
index 0000000..e091cde
--- /dev/null
+++ b/src/views/account/RecurringFormView.vue
@@ -0,0 +1,408 @@
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { accountApi } from '@/api/accountApi'
+import IconBtn from '@/components/ui/IconBtn.vue'
+import CategoryPicker from '@/components/ui/CategoryPicker.vue'
+import ChipSelect from '@/components/ui/ChipSelect.vue'
+
+const route = useRoute()
+const router = useRouter()
+const editId = route.params.id ? Number(route.params.id) : null
+const isEdit = editId != null
+
+const wallets = ref([])
+const categories = ref([])
+const loading = ref(false)
+const submitting = ref(false)
+const formError = ref(null)
+
+const form = reactive({
+  title: '',
+  type: 'EXPENSE',
+  amount: null,
+  category: '',
+  memo: '',
+  walletKind: '',
+  walletId: '',
+  toWalletKind: '',
+  toWalletId: '',
+  frequency: 'MONTHLY',
+  dayOfMonth: 1,
+  dayOfWeek: 1,
+  monthOfYear: 1,
+  startDate: '',
+  endDate: '',
+  active: true,
+})
+
+const TYPES = [
+  { value: 'EXPENSE', label: '지출', cls: 'chip-expense' },
+  { value: 'INCOME', label: '수입', cls: 'chip-income' },
+  { value: 'TRANSFER', label: '이체', cls: 'chip-transfer' },
+]
+const FREQS = [
+  { value: 'MONTHLY', label: '매월' },
+  { value: 'YEARLY', label: '매년' },
+]
+const WALLET_KINDS = [
+  { value: 'BANK', label: '계좌' },
+  { value: 'CASH', label: '현금' },
+  { value: 'CARD', label: '카드' },
+  { value: 'MINUS', label: '마이너스' },
+]
+const walletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.walletKind))
+const toWalletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.toWalletKind))
+const fromWalletKinds = computed(() =>
+  WALLET_KINDS.filter((k) => k.value !== 'CARD' || form.type === 'EXPENSE'),
+)
+const toWalletKinds = computed(() => WALLET_KINDS.filter((k) => k.value !== 'CARD'))
+function walletOpts(list) {
+  return list.map((w) => ({ value: w.id, label: `${w.name}${w.issuer ? ` (${w.issuer})` : ''}` }))
+}
+const fromWalletOptions = computed(() => walletOpts(walletsOfKind.value))
+const toWalletOptions = computed(() => walletOpts(toWalletsOfKind.value))
+function walletKindOf(id) {
+  const w = wallets.value.find((x) => x.id === id)
+  return w ? w.type : ''
+}
+function onWalletKindChange() {
+  form.walletId = ''
+}
+function onToWalletKindChange() {
+  form.toWalletId = ''
+}
+function onTypeChange() {
+  form.category = ''
+  if (!fromWalletKinds.value.some((k) => k.value === form.walletKind)) {
+    form.walletKind = ''
+    form.walletId = ''
+  }
+}
+
+function todayStr() {
+  const d = new Date()
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+async function loadCategories() {
+  try {
+    categories.value = await accountApi.categories()
+  } catch {
+    categories.value = []
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const [ws, recs] = await Promise.all([
+      accountApi.wallets(),
+      isEdit ? accountApi.recurrings() : Promise.resolve([]),
+    ])
+    wallets.value = ws
+    await loadCategories()
+    if (isEdit) {
+      const r = recs.find((x) => x.id === editId)
+      if (!r) {
+        formError.value = '정기결제를 찾을 수 없습니다.'
+        return
+      }
+      Object.assign(form, {
+        title: r.title,
+        type: r.type,
+        amount: r.amount,
+        category: r.category || '',
+        memo: r.memo || '',
+        walletKind: walletKindOf(r.walletId),
+        walletId: r.walletId || '',
+        toWalletKind: walletKindOf(r.toWalletId),
+        toWalletId: r.toWalletId || '',
+        frequency: r.frequency,
+        dayOfMonth: r.dayOfMonth || 1,
+        dayOfWeek: r.dayOfWeek || 1,
+        monthOfYear: r.monthOfYear || 1,
+        startDate: r.startDate,
+        endDate: r.endDate || '',
+        active: r.active,
+      })
+    } else {
+      form.startDate = todayStr()
+    }
+  } catch (e) {
+    formError.value = e.response?.data?.message || '불러오지 못했습니다.'
+  } finally {
+    loading.value = false
+  }
+}
+onMounted(load)
+
+function goBack() {
+  if (window.history.length > 1) router.back()
+  else router.replace('/account/recurrings')
+}
+
+async function submit() {
+  formError.value = null
+  if (!form.title.trim()) {
+    formError.value = '이름을 입력하세요.'
+    return
+  }
+  if (!form.amount || form.amount <= 0) {
+    formError.value = '금액을 입력하세요.'
+    return
+  }
+  if (form.type === 'TRANSFER' && (!form.walletId || !form.toWalletId || form.walletId === form.toWalletId)) {
+    formError.value = '이체는 서로 다른 출금/입금 계좌를 선택하세요.'
+    return
+  }
+  if (!form.startDate) {
+    formError.value = '시작일을 입력하세요.'
+    return
+  }
+  submitting.value = true
+  const payload = {
+    title: form.title.trim(),
+    type: form.type,
+    amount: Number(form.amount),
+    category: form.type === 'TRANSFER' ? null : form.category || null,
+    memo: form.memo || null,
+    walletId: form.walletId || null,
+    toWalletId: form.type === 'TRANSFER' ? form.toWalletId || null : null,
+    frequency: form.frequency,
+    dayOfMonth: ['MONTHLY', 'YEARLY'].includes(form.frequency) ? Number(form.dayOfMonth) : null,
+    dayOfWeek: form.frequency === 'WEEKLY' ? Number(form.dayOfWeek) : null,
+    monthOfYear: form.frequency === 'YEARLY' ? Number(form.monthOfYear) : null,
+    startDate: form.startDate,
+    endDate: form.endDate || null,
+    active: form.active,
+  }
+  try {
+    if (isEdit) await accountApi.updateRecurring(editId, payload)
+    else await accountApi.createRecurring(payload)
+    router.replace('/account/recurrings')
+  } catch (e) {
+    formError.value = e.response?.data?.message || '저장에 실패했습니다.'
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="rform">
+    <header class="rf-head">
+      <IconBtn icon="back" title="뒤로" @click="goBack" />
+      <span class="rf-title">정기결제 {{ isEdit ? '수정' : '추가' }}</span>
+    </header>
+
+    <p v-if="loading" class="msg">불러오는 중...</p>
+
+    <form v-else class="recur-form" @submit.prevent="submit">
+      <label>이름<input v-model="form.title" type="text" placeholder="예: 월세, 급여" :disabled="submitting" /></label>
+
+      <!-- 구분 배지 -->
+      <div class="field">
+        <span class="field-label">구분</span>
+        <div class="type-chips">
+          <button
+            v-for="t in TYPES" :key="t.value"
+            type="button" class="chip" :class="[t.cls, { active: form.type === t.value }]"
+            :disabled="submitting"
+            @click="form.type = t.value; onTypeChange()"
+          >{{ t.label }}</button>
+        </div>
+      </div>
+
+      <label>금액<input v-model.number="form.amount" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+
+      <!-- 출금 계좌 종류 배지 -->
+      <div class="field">
+        <span class="field-label">{{ form.type === 'TRANSFER' ? '출금 계좌' : '계좌/카드' }}</span>
+        <div class="wallet-chips">
+          <button
+            v-for="k in fromWalletKinds" :key="k.value"
+            type="button" class="chip" :class="{ active: form.walletKind === k.value }"
+            :disabled="submitting"
+            @click="form.walletKind = k.value; onWalletKindChange()"
+          >{{ k.label }}</button>
+        </div>
+        <ChipSelect
+          v-if="form.walletKind"
+          v-model="form.walletId"
+          :options="fromWalletOptions"
+          :disabled="submitting"
+          empty-text="등록된 계좌가 없습니다"
+        />
+      </div>
+
+      <!-- 입금 계좌 종류 배지 (이체일 때만) -->
+      <div v-if="form.type === 'TRANSFER'" class="field">
+        <span class="field-label">입금 계좌</span>
+        <div class="wallet-chips">
+          <button
+            v-for="k in toWalletKinds" :key="k.value"
+            type="button" class="chip" :class="{ active: form.toWalletKind === k.value }"
+            :disabled="submitting"
+            @click="form.toWalletKind = k.value; onToWalletKindChange()"
+          >{{ k.label }}</button>
+        </div>
+        <ChipSelect
+          v-if="form.toWalletKind"
+          v-model="form.toWalletId"
+          :options="toWalletOptions"
+          :disabled="submitting"
+          empty-text="등록된 계좌가 없습니다"
+        />
+      </div>
+
+      <!-- 분류 — CategoryPicker (이체 제외) -->
+      <div v-if="form.type !== 'TRANSFER'" class="field">
+        <span class="field-label">분류</span>
+        <CategoryPicker
+          v-model="form.category"
+          :type="form.type"
+          :categories="categories"
+          :disabled="submitting"
+          @category-added="loadCategories()"
+        />
+      </div>
+
+      <label>메모<input v-model="form.memo" type="text" placeholder="(선택)" :disabled="submitting" /></label>
+
+      <!-- 주기 배지 -->
+      <div class="field">
+        <span class="field-label">주기</span>
+        <div class="type-chips">
+          <button
+            v-for="f in FREQS" :key="f.value"
+            type="button" class="chip" :class="{ active: form.frequency === f.value }"
+            :disabled="submitting"
+            @click="form.frequency = f.value"
+          >{{ f.label }}</button>
+        </div>
+      </div>
+
+      <label v-if="form.frequency === 'YEARLY'">월
+        <input v-model.number="form.monthOfYear" type="number" min="1" max="12" :disabled="submitting" />
+      </label>
+      <label v-if="['MONTHLY', 'YEARLY'].includes(form.frequency)">일(날짜)
+        <input v-model.number="form.dayOfMonth" type="number" min="1" max="31" :disabled="submitting" />
+      </label>
+
+      <label>시작일<input v-model="form.startDate" type="date" :disabled="submitting" /></label>
+      <label>종료일(선택)<input v-model="form.endDate" type="date" :disabled="submitting" /></label>
+      <label class="row"><input type="checkbox" v-model="form.active" :disabled="submitting" /> 활성</label>
+
+      <p v-if="formError" class="msg error">{{ formError }}</p>
+
+      <div class="buttons">
+        <IconBtn icon="close" title="취소" @click="goBack" />
+        <IconBtn icon="save" :title="isEdit ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
+      </div>
+    </form>
+  </section>
+</template>
+
+<style scoped>
+.rform {
+  max-width: 460px;
+  margin: 0 auto;
+}
+.rf-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1.2rem;
+}
+.rf-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+.msg {
+  margin: 0.75rem 0;
+}
+.msg.error {
+  color: #c0392b;
+}
+.recur-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+.recur-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.85rem;
+}
+.recur-form label.row {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.4rem;
+}
+.recur-form input {
+  padding: 0.5rem 0.7rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+}
+.recur-form label.row input {
+  padding: 0;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.field-label {
+  font-size: 0.82rem;
+  opacity: 0.7;
+}
+.type-chips,
+.wallet-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.chip {
+  padding: 0.28rem 0.75rem;
+  border: 1.5px solid var(--color-border);
+  border-radius: 100px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-size: 0.82rem;
+  font-weight: 500;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
+}
+.chip:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.chip.active {
+  border-color: hsla(160, 100%, 37%, 1);
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+}
+.chip-expense.active {
+  border-color: #c0392b;
+  background: #c0392b;
+}
+.chip-income.active {
+  border-color: #2e7d32;
+  background: #2e7d32;
+}
+.chip-transfer.active {
+  border-color: #1565c0;
+  background: #1565c0;
+}
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+</style>
diff --git a/src/views/account/RecurringView.vue b/src/views/account/RecurringView.vue
index bedf776..49ca052 100644
--- a/src/views/account/RecurringView.vue
+++ b/src/views/account/RecurringView.vue
@@ -1,99 +1,25 @@
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { accountApi } from '@/api/accountApi'
 import { useDialog } from '@/composables/dialog'
 import { useAuthStore } from '@/stores/auth'
 import IconBtn from '@/components/ui/IconBtn.vue'
-import AppModal from '@/components/ui/AppModal.vue'
-import CategoryPicker from '@/components/ui/CategoryPicker.vue'
-import ChipSelect from '@/components/ui/ChipSelect.vue'
 
 const dialog = useDialog()
 const auth = useAuthStore()
 const router = useRouter()
 
 const recurrings = ref([])
-const wallets = ref([])
 
 // 무료 회원 정기결제 등록 한도(써보고 → 업셀). 유료는 무제한. 백엔드에서도 강제.
 const FREE_RECURRING_LIMIT = 2
 const atRecurringLimit = computed(
   () => !auth.isPremium && recurrings.value.length >= FREE_RECURRING_LIMIT,
 )
-const categories = ref([])
 const loading = ref(false)
 const error = ref(null)
 
-const formOpen = ref(false)
-const editId = ref(null)
-const form = reactive({
-  title: '',
-  type: 'EXPENSE',
-  amount: null,
-  category: '',
-  memo: '',
-  walletKind: '',
-  walletId: '',
-  toWalletKind: '',
-  toWalletId: '',
-  frequency: 'MONTHLY',
-  dayOfMonth: 1,
-  dayOfWeek: 1,
-  monthOfYear: 1,
-  startDate: '',
-  endDate: '',
-  active: true,
-})
-const submitting = ref(false)
-const formError = ref(null)
-
-
-const TYPES = [
-  { value: 'EXPENSE',  label: '지출',  cls: 'chip-expense' },
-  { value: 'INCOME',   label: '수입',  cls: 'chip-income' },
-  { value: 'TRANSFER', label: '이체',  cls: 'chip-transfer' },
-]
-const FREQS = [
-  { value: 'MONTHLY', label: '매월' },
-  { value: 'YEARLY',  label: '매년' },
-]
-
-// 계좌/카드 종류
-const WALLET_KINDS = [
-  { value: 'BANK',  label: '계좌' },
-  { value: 'CASH',  label: '현금' },
-  { value: 'CARD',  label: '카드' },
-  { value: 'MINUS', label: '마이너스' },
-]
-const walletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.walletKind))
-const toWalletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.toWalletKind))
-// 출금 계좌 종류: 카드는 '지출'(카드결제)일 때만. 수입·이체는 카드에서 나가지 않음
-const fromWalletKinds = computed(() =>
-  WALLET_KINDS.filter((k) => k.value !== 'CARD' || form.type === 'EXPENSE'),
-)
-// 이체 입금 계좌 종류: 카드 제외(계좌→카드는 상환)
-const toWalletKinds = computed(() => WALLET_KINDS.filter((k) => k.value !== 'CARD'))
-// 계좌 선택 칩 옵션
-function walletOpts(list) {
-  return list.map((w) => ({ value: w.id, label: `${w.name}${w.issuer ? ` (${w.issuer})` : ''}` }))
-}
-const fromWalletOptions = computed(() => walletOpts(walletsOfKind.value))
-const toWalletOptions = computed(() => walletOpts(toWalletsOfKind.value))
-function walletKindOf(id) {
-  const w = wallets.value.find((x) => x.id === id)
-  return w ? w.type : ''
-}
-function onWalletKindChange() { form.walletId = '' }
-function onToWalletKindChange() { form.toWalletId = '' }
-function onTypeChange() {
-  form.category = ''
-  if (!fromWalletKinds.value.some((k) => k.value === form.walletKind)) {
-    form.walletKind = ''
-    form.walletId = ''
-  }
-}
-
 function won(n) { return (n ?? 0).toLocaleString('ko-KR') }
 function typeLabel(t) {
   return t === 'INCOME' ? '수입' : t === 'TRANSFER' ? '이체' : '지출'
@@ -131,23 +57,11 @@ const grouped = computed(() =>
   }).filter((g) => g.count > 0),
 )
 
-function todayStr() {
-  const d = new Date()
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
-}
-
 async function load() {
   loading.value = true
   error.value = null
   try {
-    const [recs, ws, cats] = await Promise.all([
-      accountApi.recurrings(),
-      accountApi.wallets(),
-      accountApi.categories(),
-    ])
-    recurrings.value = recs
-    wallets.value = ws
-    categories.value = cats
+    recurrings.value = await accountApi.recurrings()
   } catch (e) {
     error.value = e.response?.data?.message || '불러오지 못했습니다.'
   } finally {
@@ -174,66 +88,10 @@ async function openCreate() {
     if (go) router.push('/upgrade')
     return
   }
-  editId.value = null
-  Object.assign(form, {
-    title: '', type: 'EXPENSE', amount: null, category: '', memo: '',
-    walletKind: '', walletId: '', toWalletKind: '', toWalletId: '',
-    frequency: 'MONTHLY', dayOfMonth: 1, dayOfWeek: 1,
-    monthOfYear: 1, startDate: todayStr(), endDate: '', active: true,
-  })
-  formError.value = null
-  formOpen.value = true
+  router.push('/account/recurrings/new')
 }
 function openEdit(r) {
-  editId.value = r.id
-  Object.assign(form, {
-    title: r.title, type: r.type, amount: r.amount, category: r.category || '', memo: r.memo || '',
-    walletKind: walletKindOf(r.walletId), walletId: r.walletId || '',
-    toWalletKind: walletKindOf(r.toWalletId), toWalletId: r.toWalletId || '',
-    frequency: r.frequency,
-    dayOfMonth: r.dayOfMonth || 1, dayOfWeek: r.dayOfWeek || 1, monthOfYear: r.monthOfYear || 1,
-    startDate: r.startDate, endDate: r.endDate || '', active: r.active,
-  })
-  formError.value = null
-  formOpen.value = true
-}
-
-async function submit() {
-  formError.value = null
-  if (!form.title.trim()) { formError.value = '이름을 입력하세요.'; return }
-  if (!form.amount || form.amount <= 0) { formError.value = '금액을 입력하세요.'; return }
-  if (form.type === 'TRANSFER' && (!form.walletId || !form.toWalletId || form.walletId === form.toWalletId)) {
-    formError.value = '이체는 서로 다른 출금/입금 계좌를 선택하세요.'
-    return
-  }
-  if (!form.startDate) { formError.value = '시작일을 입력하세요.'; return }
-  submitting.value = true
-  const payload = {
-    title: form.title.trim(),
-    type: form.type,
-    amount: Number(form.amount),
-    category: form.type === 'TRANSFER' ? null : form.category || null,
-    memo: form.memo || null,
-    walletId: form.walletId || null,
-    toWalletId: form.type === 'TRANSFER' ? form.toWalletId || null : null,
-    frequency: form.frequency,
-    dayOfMonth: ['MONTHLY', 'YEARLY'].includes(form.frequency) ? Number(form.dayOfMonth) : null,
-    dayOfWeek: form.frequency === 'WEEKLY' ? Number(form.dayOfWeek) : null,
-    monthOfYear: form.frequency === 'YEARLY' ? Number(form.monthOfYear) : null,
-    startDate: form.startDate,
-    endDate: form.endDate || null,
-    active: form.active,
-  }
-  try {
-    if (editId.value) await accountApi.updateRecurring(editId.value, payload)
-    else await accountApi.createRecurring(payload)
-    formOpen.value = false
-    await load()
-  } catch (e) {
-    formError.value = e.response?.data?.message || '저장에 실패했습니다.'
-  } finally {
-    submitting.value = false
-  }
+  router.push(`/account/recurrings/${r.id}/edit`)
 }
 
 async function remove(r) {
@@ -296,113 +154,6 @@ onMounted(load)
       </section>
     </div>
     <p v-else-if="!loading" class="msg">등록된 정기결제가 없습니다.</p>
-
-    <!-- 추가/수정 모달 -->
-    <AppModal v-model="formOpen" :title="`정기결제 ${editId ? '수정' : '추가'}`">
-      <form class="recur-form" @submit.prevent="submit">
-        <label>이름<input v-model="form.title" type="text" placeholder="예: 월세, 급여" :disabled="submitting" /></label>
-
-        <!-- 구분 배지 -->
-        <div class="field">
-          <span class="field-label">구분</span>
-          <div class="type-chips">
-            <button
-              v-for="t in TYPES" :key="t.value"
-              type="button" class="chip" :class="[t.cls, { active: form.type === t.value }]"
-              :disabled="submitting"
-              @click="form.type = t.value; onTypeChange()"
-            >{{ t.label }}</button>
-          </div>
-        </div>
-
-        <label>금액<input v-model.number="form.amount" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
-
-        <!-- 출금 계좌 종류 배지 -->
-        <div class="field">
-          <span class="field-label">{{ form.type === 'TRANSFER' ? '출금 계좌' : '계좌/카드' }}</span>
-          <div class="wallet-chips">
-            <button
-              v-for="k in fromWalletKinds" :key="k.value"
-              type="button" class="chip" :class="{ active: form.walletKind === k.value }"
-              :disabled="submitting"
-              @click="form.walletKind = k.value; onWalletKindChange()"
-            >{{ k.label }}</button>
-          </div>
-          <ChipSelect
-            v-if="form.walletKind"
-            v-model="form.walletId"
-            :options="fromWalletOptions"
-            :disabled="submitting"
-            empty-text="등록된 계좌가 없습니다"
-          />
-        </div>
-
-        <!-- 입금 계좌 종류 배지 (이체일 때만) -->
-        <div v-if="form.type === 'TRANSFER'" class="field">
-          <span class="field-label">입금 계좌</span>
-          <div class="wallet-chips">
-            <button
-              v-for="k in toWalletKinds" :key="k.value"
-              type="button" class="chip" :class="{ active: form.toWalletKind === k.value }"
-              :disabled="submitting"
-              @click="form.toWalletKind = k.value; onToWalletKindChange()"
-            >{{ k.label }}</button>
-          </div>
-          <ChipSelect
-            v-if="form.toWalletKind"
-            v-model="form.toWalletId"
-            :options="toWalletOptions"
-            :disabled="submitting"
-            empty-text="등록된 계좌가 없습니다"
-          />
-        </div>
-
-        <!-- 분류 — CategoryPicker (이체 제외) -->
-        <div v-if="form.type !== 'TRANSFER'" class="field">
-          <span class="field-label">분류</span>
-          <CategoryPicker
-            v-model="form.category"
-            :type="form.type"
-            :categories="categories"
-            :disabled="submitting"
-            @category-added="load()"
-          />
-        </div>
-
-        <label>메모<input v-model="form.memo" type="text" placeholder="(선택)" :disabled="submitting" /></label>
-
-        <!-- 주기 배지 -->
-        <div class="field">
-          <span class="field-label">주기</span>
-          <div class="type-chips">
-            <button
-              v-for="f in FREQS" :key="f.value"
-              type="button" class="chip" :class="{ active: form.frequency === f.value }"
-              :disabled="submitting"
-              @click="form.frequency = f.value"
-            >{{ f.label }}</button>
-          </div>
-        </div>
-
-        <label v-if="form.frequency === 'YEARLY'">월
-          <input v-model.number="form.monthOfYear" type="number" min="1" max="12" :disabled="submitting" />
-        </label>
-        <label v-if="['MONTHLY', 'YEARLY'].includes(form.frequency)">일(날짜)
-          <input v-model.number="form.dayOfMonth" type="number" min="1" max="31" :disabled="submitting" />
-        </label>
-
-        <label>시작일<input v-model="form.startDate" type="date" :disabled="submitting" /></label>
-        <label>종료일(선택)<input v-model="form.endDate" type="date" :disabled="submitting" /></label>
-        <label class="row"><input type="checkbox" v-model="form.active" :disabled="submitting" /> 활성</label>
-
-        <p v-if="formError" class="msg error">{{ formError }}</p>
-
-        <div class="buttons">
-          <IconBtn icon="close" title="취소" @click="formOpen = false" />
-          <IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
-        </div>
-      </form>
-    </AppModal>
   </section>
 </template>
 
@@ -487,67 +238,4 @@ button.primary { border-color: hsla(160, 100%, 37%, 1); color: hsla(160, 100%, 3
 .msg.error { color: #c0392b; }
 .msg.recur-limit { color: #b8860b; font-size: 0.85rem; }
 .recur-upsell { color: hsla(160, 100%, 37%, 1); font-weight: 700; }
-
-/* 폼 */
-.recur-form {
-  display: flex;
-  flex-direction: column;
-  gap: 0.55rem;
-}
-.recur-form label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.85rem;
-}
-.recur-form label.row { flex-direction: row; align-items: center; gap: 0.4rem; }
-.recur-form input,
-.recur-form select {
-  padding: 0.5rem 0.7rem;
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  background: var(--color-background-soft);
-  color: var(--color-text);
-}
-.recur-form label.row input { padding: 0; }
-
-/* 배지형 선택 */
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-.field-label { font-size: 0.82rem; opacity: 0.7; }
-.type-chips,
-.wallet-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-}
-.chip {
-  padding: 0.28rem 0.75rem;
-  border: 1.5px solid var(--color-border);
-  border-radius: 100px;
-  background: var(--color-background-soft);
-  color: var(--color-text);
-  font-size: 0.82rem;
-  font-weight: 500;
-  cursor: pointer;
-  line-height: 1.4;
-  transition: border-color 0.12s, background 0.12s, color 0.12s;
-}
-.chip:disabled { opacity: 0.45; cursor: not-allowed; }
-/* 기본 active (계좌/주기) */
-.chip.active { border-color: hsla(160, 100%, 37%, 1); background: hsla(160, 100%, 37%, 1); color: #fff; }
-/* 구분 배지 type별 색상 */
-.chip-expense.active  { border-color: #c0392b; background: #c0392b; }
-.chip-income.active   { border-color: #2e7d32; background: #2e7d32; }
-.chip-transfer.active { border-color: #1565c0; background: #1565c0; }
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-}
 </style>