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

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" />
-        <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>
-    const props = defineProps({
-        maxlength: {
-            type: Number,
-            default: 30,
-            required: false,
-        },
-    });
+import { ref } from "vue";
 
-    const emits = defineEmits(['update:data']);
+const props = defineProps({
+    maxlength: {
+        type: Number,
+        default: 30,
+        required: false,
+    },
+});
 
-    const search = function (event) {
+const emits = defineEmits(["update:data"]);
+const searchQuery = ref("");
 
-        //Type Number 일때 maxlength 적용 안됨 방지
-        if (event.target.value.length > props.maxlength) {
-            event.target.value = event.target.value.slice(0, props.maxlength);
-        }
-        emits('update:data', event.target.value);
-    };
-
-    const preventLeadingSpace = function (event) {
-        event.target.value = event.target.value.trimStart();
+const search = function () {
+    // Type Number 일때 maxlength 적용 안됨 방지
+    if (searchQuery.value.length > props.maxlength) {
+        searchQuery.value = searchQuery.value.slice(0, props.maxlength);
     }
+    emits("update:data", searchQuery.value);
+};
+
+const preventLeadingSpace = function () {
+    searchQuery.value = searchQuery.value.trimStart();
+};
 </script>