- 폼을 Teleport 전체화면 모달 대신 콘텐츠 영역 인라인 페이지로 렌더 (앱 헤더·하단바 유지 + 상단 뒤로가기, 계좌·정기결제 페이지와 동일 톤) - 목록 뷰는 formOpen 시 숨김(v-if/v-else), ?entry 라우트 바인딩 유지 - 폼 로직(AI·OCR·상환 등)은 그대로 — 프레젠테이션만 변경 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1020,6 +1020,8 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<section class="account">
|
||||
<!-- 목록 뷰 (폼 열리면 숨김 → 폼이 페이지처럼 콘텐츠 영역을 차지) -->
|
||||
<template v-if="!formOpen">
|
||||
<header v-if="pendingCount" class="account-head">
|
||||
<span class="pending-count">확인 필요 {{ pendingCount }}건</span>
|
||||
</header>
|
||||
@@ -1165,16 +1167,14 @@ onMounted(async () => {
|
||||
<p class="empty-desc">첫 수입·지출을 기록해보세요.</p>
|
||||
<button type="button" class="empty-cta" @click="openCreate">+ 첫 내역 추가</button>
|
||||
</div>
|
||||
|
||||
<!-- 추가/수정 모달 -->
|
||||
<Teleport to="body">
|
||||
<Transition name="slide-up">
|
||||
<div v-if="formOpen" class="modal-backdrop entry-backdrop">
|
||||
<div class="modal entry-modal" role="dialog" aria-modal="true">
|
||||
<button class="close" type="button" @click="closeForm()">×</button>
|
||||
<h2>{{ editId ? '내역 수정' : '내역 추가' }}</h2>
|
||||
|
||||
<form class="entry-form" @submit.prevent="submit">
|
||||
</template>
|
||||
<!-- 내역 추가/수정: 목록 대신 콘텐츠 영역에 인라인 페이지로(헤더·하단바 유지, 뒤로가기로 닫힘) -->
|
||||
<div v-else class="entry-page">
|
||||
<header class="ep-head">
|
||||
<IconBtn icon="back" title="뒤로" @click="closeForm()" />
|
||||
<span class="ep-title">{{ editId ? '내역 수정' : '내역 추가' }}</span>
|
||||
</header>
|
||||
<form class="entry-form" @submit.prevent="submit">
|
||||
<!-- 영수증 스캔 · 문자/푸시 (같은 행 상단) -->
|
||||
<div v-if="!isRepayment" class="receipt-box">
|
||||
<input
|
||||
@@ -1390,11 +1390,8 @@ onMounted(async () => {
|
||||
<IconBtn icon="close" title="취소" @click="closeForm()" />
|
||||
<IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 영수증 등록 방식 선택 (카메라/갤러리) -->
|
||||
<Teleport to="body">
|
||||
@@ -1954,6 +1951,25 @@ button.primary {
|
||||
opacity: 0.6;
|
||||
}
|
||||
/* 내역 추가/수정: 전체화면 모달 — 바깥 영역이 없어 실수로 닫히지 않음(× 로만 닫힘) */
|
||||
/* 내역 추가/수정 인라인 페이지 (헤더·하단바 유지) */
|
||||
.entry-page {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ep-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.ep-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.entry-page .entry-form {
|
||||
max-width: 460px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.entry-backdrop {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user