From 69aed21fa4811dd76d5168d446956157ba2c3f4b Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Fri, 14 Aug 2026 09:53:22 +0900
Subject: [PATCH] Improve transaction amount input

---
 docs/changelog.md           |  1 +
 pages/add.vue               | 11 +++++++++--
 pages/transactions/[id].vue | 11 +++++++++--
 todo.md                     |  1 -
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/docs/changelog.md b/docs/changelog.md
index d5b6005..01c568b 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -68,3 +68,4 @@
 - 거래 입력/수정 날짜 선택 바텀시트에 `오늘`, `이번 달`, `선택일` 빠른 이동 버튼을 추가했다.
 - 거래 입력/수정에서 자산 선택 후 분류 선택 바텀시트로 자연스럽게 이어지도록 했다.
 - 거래 입력/수정의 수입/지출 타입 변경 시 카테고리 선택을 초기화하고 저장/삭제/복사 실패 토스트를 추가했다.
+- 거래 입력/수정의 금액 입력을 기본 숫자 input에서 숫자만 정리하는 텍스트 입력으로 바꾸고 천 단위 표시를 적용했다.
diff --git a/pages/add.vue b/pages/add.vue
index 18fe14e..7149c03 100644
--- a/pages/add.vue
+++ b/pages/add.vue
@@ -58,12 +58,13 @@
           <input
             id="amount"
             ref="amountInputRef"
-            v-model.number="form.amount"
+            :value="amountDisplay"
             class="transaction-form-control text-right text-lg font-bold"
             inputmode="numeric"
             min="1"
-            type="number"
+            type="text"
             @focus="invalidField = ''"
+            @input="updateAmount"
           >
         </div>
 
@@ -157,6 +158,7 @@ const categoryOptions = computed(() => selectableCategories.value.map((category:
   label: category.name,
   description: category.parent?.name || (category.type === 'income' ? '수입' : '지출')
 })))
+const amountDisplay = computed(() => form.amount ? form.amount.toLocaleString('ko-KR') : '')
 
 watch(selectableCategories, (items: any[]) => {
   if (form.categoryId && !items.some(item => item.id === form.categoryId)) form.categoryId = ''
@@ -195,6 +197,11 @@ function clearLocation() {
   form.longitude = null
 }
 
+function updateAmount(event: Event) {
+  const raw = (event.target as HTMLInputElement).value.replace(/[^\d]/g, '')
+  form.amount = raw ? Number(raw) : null
+}
+
 async function submit() {
   if (pending.value) return
   if (!validateForm()) return
diff --git a/pages/transactions/[id].vue b/pages/transactions/[id].vue
index f760d77..db4b6bf 100644
--- a/pages/transactions/[id].vue
+++ b/pages/transactions/[id].vue
@@ -58,12 +58,13 @@
           <input
             id="amount"
             ref="amountInputRef"
-            v-model.number="form.amount"
+            :value="amountDisplay"
             class="transaction-form-control text-right text-lg font-bold"
             inputmode="numeric"
             min="1"
-            type="number"
+            type="text"
             @focus="invalidField = ''"
+            @input="updateAmount"
           >
         </div>
 
@@ -163,6 +164,7 @@ const categoryOptions = computed(() => selectableCategories.value.map((category:
   label: category.name,
   description: category.parent?.name || (category.type === 'income' ? '수입' : '지출')
 })))
+const amountDisplay = computed(() => form.amount ? form.amount.toLocaleString('ko-KR') : '')
 const locationLabel = computed(() => form.latitude && form.longitude)
 const mapsUrl = computed(() => `https://www.google.com/maps?q=${form.latitude},${form.longitude}`)
 
@@ -210,6 +212,11 @@ function clearLocation() {
   form.longitude = null
 }
 
+function updateAmount(event: Event) {
+  const raw = (event.target as HTMLInputElement).value.replace(/[^\d]/g, '')
+  form.amount = raw ? Number(raw) : 0
+}
+
 function payload() {
   return {
     type: form.type,
diff --git a/todo.md b/todo.md
index 53007ef..e3ec6b9 100644
--- a/todo.md
+++ b/todo.md
@@ -16,7 +16,6 @@
 
 ## 3. 거래 입력/수정
 
-- 금액 입력 키패드 또는 숫자 입력 UX를 개선한다.
 - 입력 화면의 모바일 키보드 노출 상태에서 저장/취소 버튼 위치와 스크롤 동작을 점검한다.
 - 복사, 삭제, 자주사용 버튼의 실제 동작을 완성한다.
 - 사진 첨부 UI의 저장 구조를 설계하고 구현한다.