- RecurringFormView.vue 신규: /account/recurrings/new · /:id/edit - RecurringView: 목록 전용으로 정리(폼·모달·계좌/분류 로직 제거), +/수정은 화면 이동 - 무료 한도 초과 시 업셀은 목록에서 확인 후 이동 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
sb
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user