검색 바 포커스 아웃할때 검색되는거 수정

src/components/search/SearchBar.vue

@@ -1,31 +1,42 @@
 <template>
     <div class="input-group mb-3 d-flex">
-        <input type="text" class="form-control" placeholder="Search" @change="search" @input="preventLeadingSpace" />
+        <input
-        <button type="button" class="btn btn-primary"><i class="bx bx-search bx-md"></i></button>
+            type="text"
+            class="form-control"
+            placeholder="Search"
+            v-model="searchQuery"
+            @keyup.enter="search"
+            @input="preventLeadingSpace"
+        />
+        <button type="button" class="btn btn-primary" @click="search">
+            <i class="bx bx-search bx-md"></i>
+        </button>
     </div>
 </template>
 
 <script setup>
-    const props = defineProps({
+import { ref } from "vue";
+
+const props = defineProps({
     maxlength: {
         type: Number,
         default: 30,
         required: false,
     },
-    });
+});
 
-    const emits = defineEmits(['update:data']);
+const emits = defineEmits(["update:data"]);
+const searchQuery = ref("");
 
-    const search = function (event) {
+const search = function () {
-
+    // Type Number 일때 maxlength 적용 안됨 방지
-        //Type Number 일때 maxlength 적용 안됨 방지
+    if (searchQuery.value.length > props.maxlength) {
-        if (event.target.value.length > props.maxlength) {
+        searchQuery.value = searchQuery.value.slice(0, props.maxlength);
-            event.target.value = event.target.value.slice(0, props.maxlength);
     }
-        emits('update:data', event.target.value);
+    emits("update:data", searchQuery.value);
-    };
+};
 
-    const preventLeadingSpace = function (event) {
+const preventLeadingSpace = function () {
-        event.target.value = event.target.value.trimStart();
+    searchQuery.value = searchQuery.value.trimStart();
-    }
+};
 </script>