diff --git a/index.html b/index.html
index 9b7f844..5bd3857 100644
--- a/index.html
+++ b/index.html
@@ -1,83 +1,88 @@
 <!doctype html>
-<html lang="" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
-    data-theme="theme-default" data-assets-path="/" data-template="vertical-menu-template" data-style="light">
+<html
+    lang=""
+    class="light-style layout-navbar-fixed layout-menu-fixed layout-compact"
+    dir="ltr"
+    data-theme="theme-default"
+    data-assets-path="/"
+    data-template="vertical-menu-template"
+    data-style="light"
+>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <!-- favicon -->
+        <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
+        <link rel="manifest" href="/img/favicon/site.webmanifest" />
 
-    <!-- favicon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
-    <link rel="manifest" href="/img/favicon/site.webmanifest" />
+        <meta content="" name="description" />
+        <meta content="" name="keywords" />
+        <title>LOCALNET</title>
 
-    <meta content="" name="description" />
-    <meta content="" name="keywords" />
-    <title>LOCALNET</title>
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com/" />
+        <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap"
+            rel="stylesheet"
+        />
 
-    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com/" />
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
-    <link
-        href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap"
-        rel="stylesheet" />
+        <link rel="stylesheet" href="/css/font.css" />
+        <link rel="stylesheet" href="/css/custom.css" />
 
-    <link rel="stylesheet" href="/css/font.css" />
-    <link rel="stylesheet" href="/css/custom.css" />
+        <!-- Icons -->
+        <link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
+        <link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
+        <link rel="stylesheet" href="/vendor/fonts/flag-icons.css" />
 
-    <!-- Icons -->
-    <link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
-    <link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
-    <link rel="stylesheet" href="/vendor/fonts/flag-icons.css" />
+        <!-- Core CSS -->
+        <link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" />
+        <link rel="stylesheet" href="/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
+        <link rel="stylesheet" href="/css/demo.css" />
 
-    <!-- Core CSS -->
-    <link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" />
-    <link rel="stylesheet" href="/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
-    <link rel="stylesheet" href="/css/demo.css" />
+        <!-- Vendors CSS -->
+        <link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
+        <link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" />
+        <link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" />
 
-    <!-- Vendors CSS -->
-    <link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
-    <link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" />
-    <link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" />
+        <!-- Helpers -->
+        <script src="/vendor/js/helpers.js"></script>
+        <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
+        <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
+        <!-- <script src="/vendor/js/template-customizer.js"></script> -->
+        <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
+        <script src="/js/config.js"></script>
 
-    <!-- Helpers -->
-    <script src="/vendor/js/helpers.js"></script>
-    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
-    <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
-    <!-- <script src="/vendor/js/template-customizer.js"></script> -->
-    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
-    <script src="/js/config.js"></script>
+        <!-- Include the highlight.js library -->
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    </head>
 
-    <!-- Include the highlight.js library -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
-        rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-</head>
+    <body>
+        <div id="app"></div>
 
-<body>
-    <div id="app"></div>
+        <!-- Core JS -->
+        <!-- build:js assets/vendor/js/core.js -->
+        <script src="/vendor/libs/jquery/jquery.js"></script>
+        <script src="/vendor/libs/popper/popper.js"></script>
+        <script src="/vendor/js/bootstrap.js"></script>
+        <script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
+        <script src="/vendor/libs/hammer/hammer.js"></script>
+        <script src="/vendor/libs/i18n/i18n.js"></script>
+        <script src="/vendor/libs/typeahead-js/typeahead.js"></script>
+        <!-- <script src="/vendor/js/menu.js"></script> -->
+        <!-- endbuild -->
 
-    <!-- Core JS -->
-    <!-- build:js assets/vendor/js/core.js -->
-    <script src="/vendor/libs/jquery/jquery.js"></script>
-    <script src="/vendor/libs/popper/popper.js"></script>
-    <script src="/vendor/js/bootstrap.js"></script>
-    <script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
-    <script src="/vendor/libs/hammer/hammer.js"></script>
-    <script src="/vendor/libs/i18n/i18n.js"></script>
-    <script src="/vendor/libs/typeahead-js/typeahead.js"></script>
-    <!-- <script src="/vendor/js/menu.js"></script> -->
-    <!-- endbuild -->
+        <!-- Vendors JS -->
+        <script src="/vendor/libs/apex-charts/apexcharts.js"></script>
+        <!-- Main JS -->
+        <!-- <script src="/js/main.js"></script> -->
+        <!-- Page JS -->
+        <!-- <script src="/js/dashboards-analytics.js"></script> -->
 
-    <!-- Vendors JS -->
-    <script src="/vendor/libs/apex-charts/apexcharts.js"></script>
-    <!-- Main JS -->
-    <!-- <script src="/js/main.js"></script> -->
-    <!-- Page JS -->
-    <!-- <script src="/js/dashboards-analytics.js"></script> -->
-
-    <script type="module" src="/src/main.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+        <script type="module" src="/src/main.js"></script>
+    </body>
+</html>
diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index 83ef9fe..bcc51b0 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -2,17 +2,17 @@
     <div class="" role="button">
         <div class="card">
             <div class="d-flex">
-                <div v-if="data.item.img" class="col-3">
-                    <img class="card-img card-img-left" :src="data.item.img" alt="" />
+                <div v-if="img" class="col-3">
+                    <img class="card-img card-img-left" :src="img" alt="" />
                 </div>
                 <div lass="col-9">
                     <div class="card-body">
-                        <h5 class="card-title">{{ data.item.title }}</h5>
+                        <h5 class="card-title">{{ title }}</h5>
                         <p class="card-text str_wrap">
-                            {{ data.item.content }}
+                            {{ content }}
                         </p>
                         <p class="card-text">
-                            <small class="text-muted">{{ data.item.date }}</small>
+                            <small class="text-muted">{{ date }}</small>
                             <slot name="optInfo"></slot>
                         </p>
                     </div>
@@ -23,8 +23,30 @@
 </template>
 
 <script setup>
-    const data = defineProps(['item']);
+    // const data = defineProps(['item']);
+    const prop = defineProps({
+        title: {
+            type: String,
+            default: '제목',
+            required: true,
+        },
+        content: {
+            type: String,
+            default: '내용',
+            required: true,
+        },
+        date: {
+            type: String,
+            default: 'date',
+            required: true,
+        },
+        img: {
+            type: String,
+            required: false,
+        },
+    });
 </script>
+
 <style>
     .str_wrap {
         overflow: hidden;
diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index bc1d884..2f10ae7 100644
--- a/src/components/search/SearchBar.vue
+++ b/src/components/search/SearchBar.vue
@@ -1,12 +1,27 @@
 <template>
-    <div class="input-group mb-3">
-        <div class="input-group-text">
-            <!-- <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input" /> -->
-            <i class="bx bx-search bx-md"></i>
-        </div>
-        <input type="text" class="form-control" placeholder="Search" />
-        <button type="button" class="btn btn-primary">검색</button>
+    <div class="input-group mb-3 bg-white">
+        <input type="text" class="form-control" placeholder="Search" @change="searchInput" />
+        <button type="button" class="btn btn-primary"><i class="bx bx-search bx-md"></i></button>
     </div>
 </template>
 
-<script setup></script>
+<script setup>
+    import { defineEmits, ref } from 'vue';
+
+    const props = defineProps({
+        maxlength: {
+            type: Number,
+            default: 30,
+            required: false,
+        },
+    });
+
+    const emits = defineEmits(['update:data']);
+    const searchInput = function (event) {
+        //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);
+    };
+</script>
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index a8d2704..daa0b5d 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -1,15 +1,17 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-        <search-bar />
+        <search-bar @update:data="searchText = $event" />
 
         <div class="row g-3">
             <div class="mt-8">
                 <router-link to="/board/write">
-                    <button type="button" class="btn btn-primary float-end">글쓰기</button>
+                    <button class="btn btn-label-primary btn-icon float-end">
+                        <i class="bx bx-edit-alt"></i>
+                    </button>
                 </router-link>
             </div>
             <template v-for="(item, index) in list" :key="item.id">
-                <board-card :item="item" @click="goDetail(item.id)">
+                <board-card :title="item.title" :content="item.content" :img="item.img" :date="item.date" @click="goDetail(item.id)">
                     <template #optInfo>
                         <span v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
                             ><i class="fa-regular fa-eye"></i> {{ item.viewCount }}</span
@@ -36,6 +38,7 @@
     import dummy from '@a/boardDummy.json';
 
     const list = ref(dummy);
+    const searchText = ref('');
 
     /** 상세로 이동 */
     const goDetail = idx => {
