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,78 +24,90 @@
                     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: {
+        title: {
-        type: String,
+            type: String,
-        default: '라벨',
+            default: '라벨',
-        required: true,
+            required: true,
-    },
+        },
-    name: {
+        name: {
-        type: String,
+            type: String,
-        default: 'nameplz',
+            default: 'nameplz',
-        required: true,
+            required: true,
-    },
+        },
-    isEssential: {
+        isEssential: {
-        type: Boolean,
+            type: Boolean,
-        default: false,
+            default: false,
-        required: false,
+            required: false,
-    },
+        },
-    type: {
+        type: {
-        type: String,
+            type: String,
-        default: 'text',
+            default: 'text',
-        required: false,
+            required: false,
-    },
+        },
-    value: {
+        value: {
-        type: String,
+            type: String,
-        default: '',
+            default: '',
-        require: false,
+            required: false,
-    },
+        },
-    maxlength: {
+        maxlength: {
-        type: Number,
+            type: Number,
-        default: 30,
+            default: 30,
-        required: false,
+            required: false,
-    },
+        },
-    isAlert : {
+        isAlert: {
-        type: Boolean,
+            type: Boolean,
-        default: false,
+            default: false,
-        required: false,
+            required: false,
-    },
+        },
-    useInputGroup: {
+        useInputGroup: {
-        type: Boolean,
+            type: Boolean,
-        default: false,
+            default: false,
-        required: 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);
-    }
-    emits('update:data', event.target.value);
 
-    // 값이 입력될 때 isAlert를 false로 설정
+    // 오늘 날짜를 YYYY-MM-DD 형식으로 변환
-    if (event.target.value.trim() !== '') { emits('update:alert', false); }
+    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);
+        }
+
+        // 값이 입력될 때 isAlert를 false로 설정
+        if (newValue.trim() !== '') {
+            emits('update:alert', false);
+        }
+    };
 </script>
-
-<style>
-
-</style>