Refine transaction form validation UI

components/BottomSheetDatePicker.vue

@@ -2,7 +2,7 @@
   <div>
     <button
       type="button"
-      class="field flex min-h-[50px] items-center text-left font-semibold"
+      :class="buttonClass"
       aria-haspopup="dialog"
       :aria-expanded="open"
       @click="open = true"
@@ -82,6 +82,7 @@ import { addMonths, format, parse } from 'date-fns'
 
 const props = defineProps<{
   modelValue: string
+  buttonClass?: string
 }>()
 
 const emit = defineEmits<{
@@ -91,6 +92,7 @@ const emit = defineEmits<{
 const weekdays = ['일', '월', '화', '수', '목', '금', '토']
 const open = ref(false)
 const calendarDate = ref(parse(props.modelValue, 'yyyy-MM-dd', new Date()))
+const buttonClass = computed(() => props.buttonClass || 'field flex min-h-[50px] items-center text-left font-semibold')
 
 const calendarYear = computed(() => calendarDate.value.getFullYear())
 const calendarMonth = computed(() => calendarDate.value.getMonth())

components/BottomSheetSelect.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
     <button
+      ref="buttonRef"
       type="button"
-      class="field flex min-h-[50px] items-center justify-between text-left"
+      :class="buttonClass"
       aria-haspopup="dialog"
       :aria-expanded="open"
       @click="open = true"
@@ -82,8 +83,10 @@ const props = withDefaults(defineProps<{
   options: Option[]
   title: string
   placeholder?: string
+  buttonClass?: string
 }>(), {
-  placeholder: '선택'
+  placeholder: '선택',
+  buttonClass: 'field flex min-h-[50px] items-center justify-between text-left'
 })
 
 const emit = defineEmits<{
@@ -91,6 +94,7 @@ const emit = defineEmits<{
 }>()
 
 const open = ref(false)
+const buttonRef = ref<HTMLButtonElement | null>(null)
 const selected = computed(() => props.options.find(option => option.value === props.modelValue))
 
 function select(value: string) {
@@ -98,4 +102,10 @@ function select(value: string) {
   open.value = false
 }
 
+function focus() {
+  buttonRef.value?.focus()
+  open.value = true
+}
+
+defineExpose({ focus })
 </script>