Improve transaction amount 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,