From 44e72c9532641a6c9eb300e3dbf14c0a42760b86 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 11 Mar 2025 16:11:58 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=80=EC=83=89=20=EB=B0=94=20=ED=8F=AC?=
 =?UTF-8?q?=EC=BB=A4=EC=8A=A4=20=EC=95=84=EC=9B=83=ED=95=A0=EB=95=8C=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=EB=90=98=EB=8A=94=EA=B1=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search/SearchBar.vue | 51 ++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index ad0fcf7..392a6b0 100644
--- a/src/components/search/SearchBar.vue
+++ b/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>