From 948199c724c760640e18b04e6779917423e6a765 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 27 Mar 2025 14:43:01 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=80=EC=83=89=202=EA=B8=80=EC=9E=90=20?=
 =?UTF-8?q?=EC=9D=B4=EC=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search/SearchBar.vue | 56 +++++++++++++++++++----------
 1 file changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index 392a6b0..9a68666 100644
--- a/src/components/search/SearchBar.vue
+++ b/src/components/search/SearchBar.vue
@@ -1,17 +1,21 @@
 <template>
-    <div class="input-group mb-3 d-flex">
-        <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>
+    <form @submit.prevent="search">
+        <div class="input-group mb-3 d-flex">
+            <input
+                type="text"
+                class="form-control"
+                placeholder="Search"
+                v-model="searchQuery"
+                @input="preventLeadingSpace"
+            />
+            <button
+                type="submit"
+                class="btn btn-primary"
+            >
+                <i class="bx bx-search bx-md"></i>
+            </button>
+        </div>
+    </form>
 </template>
 
 <script setup>
@@ -28,15 +32,31 @@ const props = defineProps({
 const emits = defineEmits(["update:data"]);
 const searchQuery = ref("");
 
-const search = function () {
-    // Type Number 일때 maxlength 적용 안됨 방지
-    if (searchQuery.value.length > props.maxlength) {
-        searchQuery.value = searchQuery.value.slice(0, props.maxlength);
+// 검색 실행 함수 (버튼 클릭 or 엔터 공통)
+const search = () => {
+    const trimmedQuery = searchQuery.value.trimStart();
+    if (trimmedQuery === "") {
+        emits("update:data", "");
+        return;
     }
+    if (trimmedQuery.length < 2 ) {
+        alert("검색어는 최소 2글자 이상 입력해주세요.");
+        searchQuery.value = '';
+        return;
+    }
+
+    // 길이 제한 처리
+    if (trimmedQuery.length > props.maxlength) {
+        searchQuery.value = trimmedQuery.slice(0, props.maxlength);
+    } else {
+        searchQuery.value = trimmedQuery;
+    }
+
     emits("update:data", searchQuery.value);
 };
 
-const preventLeadingSpace = function () {
+// 좌측 공백 제거
+const preventLeadingSpace = () => {
     searchQuery.value = searchQuery.value.trimStart();
 };
 </script>