refactor(entries): 내역 추가/수정을 오버레이 모달 → 인라인 페이지로(톤 통일)
Deploy / deploy (push) Failing after 13m43s

- 폼을 Teleport 전체화면 모달 대신 콘텐츠 영역 인라인 페이지로 렌더
  (앱 헤더·하단바 유지 + 상단 뒤로가기, 계좌·정기결제 페이지와 동일 톤)
- 목록 뷰는 formOpen 시 숨김(v-if/v-else), ?entry 라우트 바인딩 유지
- 폼 로직(AI·OCR·상환 등)은 그대로 — 프레젠테이션만 변경

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
sb
2026-07-10 00:07:47 +09:00
parent 24db9b0587
commit 00d2945e39
+31 -15
View File
@@ -1020,6 +1020,8 @@ onMounted(async () => {
<template> <template>
<section class="account"> <section class="account">
<!-- 목록 ( 열리면 숨김 폼이 페이지처럼 콘텐츠 영역을 차지) -->
<template v-if="!formOpen">
<header v-if="pendingCount" class="account-head"> <header v-if="pendingCount" class="account-head">
<span class="pending-count">확인 필요 {{ pendingCount }}</span> <span class="pending-count">확인 필요 {{ pendingCount }}</span>
</header> </header>
@@ -1165,16 +1167,14 @@ onMounted(async () => {
<p class="empty-desc"> 수입·지출을 기록해보세요.</p> <p class="empty-desc"> 수입·지출을 기록해보세요.</p>
<button type="button" class="empty-cta" @click="openCreate"> 내역 추가</button> <button type="button" class="empty-cta" @click="openCreate"> 내역 추가</button>
</div> </div>
</template>
<!-- 추가/수정 모달 --> <!-- 내역 추가/수정: 목록 대신 콘텐츠 영역에 인라인 페이지로(헤더·하단바 유지, 뒤로가기로 닫힘) -->
<Teleport to="body"> <div v-else class="entry-page">
<Transition name="slide-up"> <header class="ep-head">
<div v-if="formOpen" class="modal-backdrop entry-backdrop"> <IconBtn icon="back" title="뒤로" @click="closeForm()" />
<div class="modal entry-modal" role="dialog" aria-modal="true"> <span class="ep-title">{{ editId ? '내역 수정' : '내역 추가' }}</span>
<button class="close" type="button" @click="closeForm()">×</button> </header>
<h2>{{ editId ? '내역 수정' : '내역 추가' }}</h2> <form class="entry-form" @submit.prevent="submit">
<form class="entry-form" @submit.prevent="submit">
<!-- 영수증 스캔 · 문자/푸시 (같은 상단) --> <!-- 영수증 스캔 · 문자/푸시 (같은 상단) -->
<div v-if="!isRepayment" class="receipt-box"> <div v-if="!isRepayment" class="receipt-box">
<input <input
@@ -1390,11 +1390,8 @@ onMounted(async () => {
<IconBtn icon="close" title="취소" @click="closeForm()" /> <IconBtn icon="close" title="취소" @click="closeForm()" />
<IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" /> <IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
</div> </div>
</form> </form>
</div> </div>
</div>
</Transition>
</Teleport>
<!-- 영수증 등록 방식 선택 (카메라/갤러리) --> <!-- 영수증 등록 방식 선택 (카메라/갤러리) -->
<Teleport to="body"> <Teleport to="body">
@@ -1954,6 +1951,25 @@ button.primary {
opacity: 0.6; 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 { .entry-backdrop {
padding: 0; padding: 0;
} }