Merge branch 'dev'

2026-06-27 15:31:20 +09:00
parent 02290413b2 0eb3eaaa67
commit b4b8833fc1
1 changed files with 84 additions and 68 deletions
@@ -477,7 +477,8 @@ function openEdit(e) {
  syncCategoryMajor()
  cancelAddCategory()
  pasteDetected.value = null
-  pasteOpen.value = false
+  pasteModalOpen.value = false
+  pasteText.value = ''
  formError.value = null
  formInfo.value = ''
  formOpen.value = true
@@ -737,10 +738,11 @@ async function saveAsQuick() {
  }
 }

-// ===== 문자/푸시 붙여넣기 → 파싱 자동채움 =====
-const pasteDetected = ref(null) // 클립보드 자동감지 결과(배너)
-const pasteOpen = ref(false)    // 수동 붙여넣기 입력칸
+// ===== 문자/푸시 붙여넣기 → 파싱 자동채움 (모달) =====
+const pasteDetected = ref(null)   // 자동감지 결과(버튼 배지 + 모달 배너)
+const pasteModalOpen = ref(false) // 붙여넣기 모달
 const pasteText = ref('')
+const pasteError = ref('')
 function applyParsed(p) {
  if (!p || !p.recognized) return
  form.type = p.type === 'INCOME' ? 'INCOME' : 'EXPENSE'
@@ -749,8 +751,9 @@ function applyParsed(p) {
  if (p.date) form.entryDate = p.date
  categoryMajor.value = ''
  pasteDetected.value = null
-  pasteOpen.value = false
+  pasteModalOpen.value = false
  pasteText.value = ''
+  pasteError.value = ''
 }
 async function parseAndApply(text, { silent } = {}) {
  const t = (text || '').trim()
@@ -767,10 +770,9 @@ async function parseAndApply(text, { silent } = {}) {
  }
  return false
 }
-// 추가 팝업 열 때 클립보드 자동 감지(권한 막히면 조용히 무시)
+// 추가 팝업 열 때 클립보드 자동 감지(권한 막히면 조용히 무시) → 버튼 배지로 안내
 async function tryClipboardOnOpen() {
  pasteDetected.value = null
-  pasteOpen.value = false
  pasteText.value = ''
  try {
    const txt = await navigator.clipboard.readText()
@@ -779,19 +781,27 @@ async function tryClipboardOnOpen() {
    // 클립보드 접근 불가 — 버튼으로 수동
  }
 }
-// '붙여넣기' 버튼: 클립보드 읽어 바로 적용, 실패 시 수동 입력칸
-async function pasteFromClipboard() {
-  try {
-    const txt = await navigator.clipboard.readText()
-    const ok = await parseAndApply(txt, { silent: false })
-    if (!ok) pasteOpen.value = true
-  } catch {
-    pasteOpen.value = true
+// '문자·푸시' 버튼 → 모달 열기 + 클립보드 자동 읽기
+async function openPasteModal() {
+  pasteError.value = ''
+  pasteModalOpen.value = true
+  if (!pasteText.value) {
+    try {
+      const txt = await navigator.clipboard.readText()
+      if (txt) {
+        pasteText.value = txt
+        await parseAndApply(txt, { silent: true })
+      }
+    } catch {
+      // 클립보드 접근 불가 — 수동 붙여넣기
+    }
  }
 }
+// 모달에서 분석·채우기
 async function analyzePasted() {
+  pasteError.value = ''
  const ok = await parseAndApply(pasteText.value, { silent: false })
-  if (!ok) formError.value = '거래 내용을 인식하지 못했습니다.'
+  if (!ok) pasteError.value = '거래 내용을 인식하지 못했습니다. 금액과 승인/입금 등이 포함됐는지 확인하세요.'
 }

 onMounted(async () => {
@@ -947,17 +957,23 @@ onMounted(async () => {
            <h2>{{ editId ? '내역 수정' : '내역 추가' }}</h2>

            <form class="entry-form" @submit.prevent="submit">
-              <!-- 영수증 OCR (온디바이스) -->
+              <!-- 영수증 스캔 · 문자/푸시 (같은 행 상단) -->
              <div v-if="!isRepayment" class="receipt-box">
                <input
                  ref="receiptInput" type="file" accept="image/*"
                  :capture="webCapture ? 'environment' : undefined"
                  class="receipt-input" @change="onReceiptFile"
                />
-                <button
-                  type="button" class="receipt-btn"
-                  :disabled="submitting || ocrRunning" @click="pickReceipt"
-                >📷 영수증 스캔</button>
+                <div class="rb-actions">
+                  <button
+                    type="button" class="receipt-btn"
+                    :disabled="submitting || ocrRunning" @click="pickReceipt"
+                  >📷 영수증 스캔</button>
+                  <button
+                    type="button" class="paste-btn" :class="{ detected: pasteDetected }"
+                    :disabled="submitting" @click="openPasteModal"
+                  >📋 문자·푸시<span v-if="pasteDetected" class="pb-dot">●</span></button>
+                </div>
                <span v-if="ocrRunning" class="receipt-status">영수증 인식 중…</span>
                <span v-else-if="ocrResult" class="receipt-status ok">
                  <template v-if="ocrResult.amount">{{ won(ocrResult.amount) }}원</template>
@@ -967,26 +983,9 @@ onMounted(async () => {
                  자동 입력됨
                </span>
                <span v-else class="receipt-hint">사진에서 금액·날짜·상호를 자동 입력</span>
-                <!-- 문자/푸시 붙여넣기 (영수증 스캔과 같은 행, 우측) -->
-                <button
-                  type="button" class="paste-btn"
-                  :disabled="submitting" @click="pasteFromClipboard"
-                >📋 문자·푸시</button>
                <div v-if="ocrRunning" class="receipt-progress"><div class="bar"></div></div>
              </div>

-              <!-- 붙여넣기 감지 결과 / 수동 입력 -->
-              <div v-if="!isRepayment && (pasteDetected || pasteOpen)" class="paste-extra">
-                <div v-if="pasteDetected" class="paste-detected">
-                  감지: {{ pasteDetected.type === 'INCOME' ? '수입' : '지출' }} {{ won(pasteDetected.amount) }}<template v-if="pasteDetected.merchant"> · {{ pasteDetected.merchant }}</template>
-                  <button type="button" class="pd-apply" @click="applyParsed(pasteDetected)">채우기</button>
-                </div>
-                <div v-if="pasteOpen" class="paste-manual">
-                  <textarea v-model="pasteText" rows="3" placeholder="문자/푸시 내용을 붙여넣고 분석"></textarea>
-                  <button type="button" class="pd-apply" @click="analyzePasted">분석</button>
-                </div>
-              </div>
-
              <!-- 신규 추가 시: 자주 쓰는 내역 불러오기(모달 피커) -->
              <button
                v-if="!editId && quickEntries.length"
@@ -1200,6 +1199,28 @@ onMounted(async () => {
        </div>
      </Transition>
    </Teleport>
+
+    <!-- 문자/푸시 붙여넣기 (모달) -->
+    <Teleport to="body">
+      <Transition name="fade">
+        <div v-if="pasteModalOpen" class="modal-backdrop quick-picker-backdrop" @click.self="pasteModalOpen = false">
+          <div class="modal paste-modal" role="dialog" aria-modal="true">
+            <button class="close" type="button" @click="pasteModalOpen = false">×</button>
+            <h2>문자·푸시 붙여넣기</h2>
+            <p class="pm-hint">문자/푸시 내용을 붙여넣고 분석하면 구분·금액·메모·날짜가 자동 입력됩니다.</p>
+            <textarea v-model="pasteText" rows="5" class="pm-text" placeholder="여기에 붙여넣기 (예: [Web발신] 신한카드 승인 12,000원 스타벅스 06/27)"></textarea>
+            <div v-if="pasteDetected" class="paste-detected">
+              감지: {{ pasteDetected.type === 'INCOME' ? '수입' : '지출' }} {{ won(pasteDetected.amount) }}<template v-if="pasteDetected.merchant"> · {{ pasteDetected.merchant }}</template>
+            </div>
+            <p v-if="pasteError" class="msg error">{{ pasteError }}</p>
+            <div class="buttons">
+              <IconBtn icon="close" title="취소" @click="pasteModalOpen = false" />
+              <IconBtn icon="save" title="분석·채우기" variant="primary" @click="analyzePasted" />
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
  </section>
 </template>

@@ -1582,14 +1603,19 @@ button.primary {
 }
 .receipt-box {
  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  background: var(--color-background-soft);
 }
+.rb-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
 .receipt-input {
  display: none;
 }
@@ -1848,15 +1874,12 @@ button.primary {
  cursor: pointer;
 }
 /* 문자/푸시 붙여넣기 */
-.paste-extra {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
 .paste-btn {
-  margin-left: auto; /* 영수증 행 우측으로 */
-  padding: 0.4rem 0.7rem;
-  font-size: 0.8rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-background);
@@ -1864,23 +1887,27 @@ button.primary {
  cursor: pointer;
  white-space: nowrap;
 }
+.paste-btn.detected {
+  border-color: hsla(160, 100%, 37%, 0.7);
+}
+.paste-btn .pb-dot {
+  color: hsla(160, 100%, 37%, 1);
+  font-size: 0.6rem;
+}
 .paste-detected {
  font-size: 0.82rem;
  background: hsla(160, 100%, 37%, 0.1);
  border: 1px solid hsla(160, 100%, 37%, 0.4);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
+  margin: 0.5rem 0;
 }
-.paste-manual {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
+.paste-modal .pm-hint {
+  font-size: 0.82rem;
+  opacity: 0.7;
+  margin: 0 0 0.6rem;
 }
-.paste-manual textarea {
+.paste-modal .pm-text {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
@@ -1891,17 +1918,6 @@ button.primary {
  font: inherit;
  resize: vertical;
 }
-.pd-apply {
-  padding: 0.25rem 0.7rem;
-  font-size: 0.8rem;
-  font-weight: 600;
-  border: 1px solid hsla(160, 100%, 37%, 1);
-  border-radius: 6px;
-  background: hsla(160, 100%, 37%, 1);
-  color: #fff;
-  cursor: pointer;
-  align-self: flex-start;
-}
 .to-recurring {
  display: block;
  width: 100%;