Improve transaction amount input

docs/changelog.md

@@ -68,3 +68,4 @@
 - 거래 입력/수정 날짜 선택 바텀시트에 `오늘`, `이번 달`, `선택일` 빠른 이동 버튼을 추가했다.
 - 거래 입력/수정에서 자산 선택 후 분류 선택 바텀시트로 자연스럽게 이어지도록 했다.
 - 거래 입력/수정의 수입/지출 타입 변경 시 카테고리 선택을 초기화하고 저장/삭제/복사 실패 토스트를 추가했다.
+- 거래 입력/수정의 금액 입력을 기본 숫자 input에서 숫자만 정리하는 텍스트 입력으로 바꾸고 천 단위 표시를 적용했다.

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

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,

todo.md

@@ -16,7 +16,6 @@
 
 ## 3. 거래 입력/수정
 
-- 금액 입력 키패드 또는 숫자 입력 UX를 개선한다.
 - 입력 화면의 모바일 키보드 노출 상태에서 저장/취소 버튼 위치와 스크롤 동작을 점검한다.
 - 복사, 삭제, 자주사용 버튼의 실제 동작을 완성한다.
 - 사진 첨부 UI의 저장 구조를 설계하고 구현한다.