userforminput 추가

src/components/input/UserFormInput.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="mb-2">
+        <label
+        :for="name"
+        class="col-md-2 col-form-label"
+        >
+            {{ title }}
+            <span :class="isEssential ? 'text-red' : 'none'">*</span>
+        </label>
+        <div class="col-md-12">
+            <div v-if="useInputGroup" class="input-group mb-3">
+                <input
+                    :id="name"
+                    class="form-control"
+                    :type="type"
+                    @input="updateInput"
+                    :value="value"
+                    :maxLength="maxlength"
+                    :placeholder="title"
+                    aria-label="Recipient's username"
+                    :aria-describedby="`${name}-addon`"
+                />
+                <span class="input-group-text" :id="`${name}-addon`">@ localhost.co.kr</span>
+            </div>
+            <div v-else>
+                <input
+                    :id="name"
+                    class="form-control"
+                    :type="type"
+                    @input="updateInput"
+                    :value="value"
+                    :maxLength="maxlength"
+                    :placeholder="title"
+                />
+            </div>
+
+            <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ title }}를 확인해주세요.</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const prop = defineProps({
+    title: {
+        type: String,
+        default: '라벨',
+        required: true,
+    },
+    name: {
+        type: String,
+        default: 'nameplz',
+        required: true,
+    },
+    isEssential: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    type: {
+        type: String,
+        default: 'text',
+        required: false,
+    },
+    value: {
+        type: String,
+        default: '',
+        require: false,
+    },
+    maxlength: {
+        type: Number,
+        default: 30,
+        required: false,
+    },
+    isAlert : {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    useInputGroup: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+});
+
+const emits = defineEmits(['update:data'])
+
+const updateInput = function (event) {
+    //Type Number 일때 maxlength 적용 안됨 방지
+    if (event.target.value.length > prop.maxlength) {
+        event.target.value = event.target.value.slice(0, prop.maxlength);
+    }
+    emits('update:data', event.target.value);
+};
+</script>
+
+<style>
+.none {
+    display: none;
+}
+</style>