From ad3af31e37fa32fce31e9de831ffb609af5f85e0 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Fri, 28 Mar 2025 16:18:06 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=80=EC=83=89=20=ED=95=84=ED=84=B0?=
 =?UTF-8?q?=EB=A7=81=20=EC=9C=A0=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search/SearchBar.vue | 91 +++++++++++++++--------------
 src/views/board/BoardList.vue       |  2 +-
 2 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index 9a68666..03bfb3a 100644
--- a/src/components/search/SearchBar.vue
+++ b/src/components/search/SearchBar.vue
@@ -1,17 +1,8 @@
 <template>
     <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"
-            >
+            <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>
@@ -19,44 +10,54 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+    import { ref, watch } from 'vue';
 
-const props = defineProps({
-    maxlength: {
-        type: Number,
-        default: 30,
-        required: false,
-    },
-});
+    const props = defineProps({
+        maxlength: {
+            type: Number,
+            default: 30,
+            required: false,
+        },
+        initKeyword: {
+            type: String,
+        },
+    });
 
-const emits = defineEmits(["update:data"]);
-const searchQuery = ref("");
+    const emits = defineEmits(['update:data']);
+    const searchQuery = ref('');
 
-// 검색 실행 함수 (버튼 클릭 or 엔터 공통)
-const search = () => {
-    const trimmedQuery = searchQuery.value.trimStart();
-    if (trimmedQuery === "") {
-        emits("update:data", "");
-        return;
-    }
-    if (trimmedQuery.length < 2 ) {
-        alert("검색어는 최소 2글자 이상 입력해주세요.");
-        searchQuery.value = '';
-        return;
-    }
+    watch(
+        () => props.initKeyword,
+        (newVal, oldVal) => {
+            searchQuery.value = newVal;
+        },
+    );
 
-    // 길이 제한 처리
-    if (trimmedQuery.length > props.maxlength) {
-        searchQuery.value = trimmedQuery.slice(0, props.maxlength);
-    } else {
-        searchQuery.value = trimmedQuery;
-    }
+    // 검색 실행 함수 (버튼 클릭 or 엔터 공통)
+    const search = () => {
+        const trimmedQuery = searchQuery.value.trimStart();
+        if (trimmedQuery === '') {
+            emits('update:data', '');
+            return;
+        }
+        if (trimmedQuery.length < 2) {
+            alert('검색어는 최소 2글자 이상 입력해주세요.');
+            searchQuery.value = '';
+            return;
+        }
 
-    emits("update:data", searchQuery.value);
-};
+        // 길이 제한 처리
+        if (trimmedQuery.length > props.maxlength) {
+            searchQuery.value = trimmedQuery.slice(0, props.maxlength);
+        } else {
+            searchQuery.value = trimmedQuery;
+        }
 
-// 좌측 공백 제거
-const preventLeadingSpace = () => {
-    searchQuery.value = searchQuery.value.trimStart();
-};
+        emits('update:data', searchQuery.value);
+    };
+
+    // 좌측 공백 제거
+    const preventLeadingSpace = () => {
+        searchQuery.value = searchQuery.value.trimStart();
+    };
 </script>
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index a3bf5ad..cd3ee2f 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -4,7 +4,7 @@
             <div class="card-header d-flex flex-column">
                 <!-- 검색창 -->
                 <div class="mb-3 w-100">
-                    <search-bar @update:data="search" @keyup.enter="searchOnEnter" class="flex-grow-1" />
+                    <search-bar @update:data="search" @keyup.enter="searchOnEnter" :initKeyword="searchText" class="flex-grow-1" />
                 </div>
                 <div class="d-flex align-items-center" style="gap: 15px">
                     <!-- 리스트 갯수 선택 -->