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

src/components/search/SearchBar.vue

@@ -1,11 +1,22 @@
 <template>
     <div class="input-group mb-3 d-flex">
-        <input type="text" class="form-control" placeholder="Search" @change="search" @input="preventLeadingSpace" />
-        <button type="button" class="btn btn-primary"><i class="bx bx-search bx-md"></i></button>
+        <input
+            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>
+import { ref } from "vue";
+
 const props = defineProps({
     maxlength: {
         type: Number,
@@ -14,18 +25,18 @@
     },
 });
 
-    const emits = defineEmits(['update:data']);
-
-    const search = function (event) {
+const emits = defineEmits(["update:data"]);
+const searchQuery = ref("");
 
+const search = function () {
     // Type Number 일때 maxlength 적용 안됨 방지
-        if (event.target.value.length > props.maxlength) {
-            event.target.value = event.target.value.slice(0, props.maxlength);
+    if (searchQuery.value.length > props.maxlength) {
+        searchQuery.value = searchQuery.value.slice(0, props.maxlength);
     }
-        emits('update:data', event.target.value);
+    emits("update:data", searchQuery.value);
 };
 
-    const preventLeadingSpace = function (event) {
-        event.target.value = event.target.value.trimStart();
-    }
+const preventLeadingSpace = function () {
+    searchQuery.value = searchQuery.value.trimStart();
+};
 </script>