date 타입 관련 추가

src/components/input/UserFormInput.vue

@@ -11,9 +11,10 @@
                     class="form-control"
                     :type="type"
                     @input="updateInput"
-                    :value="value"
+                    :value="computedValue"
                     :maxLength="maxlength"
                     :placeholder="title"
+                    @blur="$emit('blur')"
                 />
                 <span class="input-group-text">@ localhost.co.kr</span>
             </div>
@@ -23,21 +24,21 @@
                     class="form-control"
                     :type="type"
                     @input="updateInput"
-                    :value="value"
+                    :value="computedValue"
                     :maxLength="maxlength"
                     :placeholder="title"
+                    @blur="$emit('blur')"
                 />
             </div>
-
             <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+    import { inject, computed } from 'vue';
 
-const prop = defineProps({
+    const props = defineProps({
         title: {
             type: String,
             default: '라벨',
@@ -61,14 +62,14 @@ const prop = defineProps({
         value: {
             type: String,
             default: '',
-        require: false,
+            required: false,
         },
         maxlength: {
             type: Number,
             default: 30,
             required: false,
         },
-    isAlert : {
+        isAlert: {
             type: Boolean,
             default: false,
             required: false,
@@ -78,23 +79,35 @@ const prop = defineProps({
             default: false,
             required: false,
         },
-});
+    });
 
-const emits = defineEmits(['update:data', 'update:alert'])
+    const emits = defineEmits(['update:data', 'update:alert', 'blur']);
 
-const updateInput = function (event) {
+    // dayjs 인스턴스 가져오기
-    //Type Number 일때 maxlength 적용 안됨 방지
+    const dayjs = inject('dayjs');
-    if (event.target.value.length > prop.maxlength) {
+
-        event.target.value = event.target.value.slice(0, prop.maxlength);
+    // 오늘 날짜를 YYYY-MM-DD 형식으로 변환
+    const today = dayjs().format('YYYY-MM-DD');
+
+    // date인 경우 기본값 -> 오늘 날짜
+    const computedValue = computed(() => {
+        return props.type === 'date' ? props.value || today : props.value;
+    });
+
+    // 입력값 업데이트
+    const updateInput = event => {
+        const newValue = event.target.value.slice(0, props.maxlength);
+
+        // date인 경우 날짜 형식 유지
+        if (props.type === 'date') {
+            emits('update:data', newValue.replace(/[^0-9-]/g, ''));
+        } else {
+            emits('update:data', newValue);
         }
-    emits('update:data', event.target.value);
 
         // 값이 입력될 때 isAlert를 false로 설정
-    if (event.target.value.trim() !== '') { emits('update:alert', false); }
+        if (newValue.trim() !== '') {
-
+            emits('update:alert', false);
-};
+        }
+    };
 </script>
-
-<style>
-
-</style>