From b3d9276c21734e1d806c6573655ce520ed68cc38 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 7 Jan 2025 15:33:54 +0900
Subject: [PATCH] =?UTF-8?q?userforminput=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/UserFormInput.vue | 103 +++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 src/components/input/UserFormInput.vue

diff --git a/src/components/input/UserFormInput.vue b/src/components/input/UserFormInput.vue
new file mode 100644
index 0000000..d6654f6
--- /dev/null
+++ b/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>