algoria 검색 기능 추가

client/components/Search.vue

@@ -13,8 +13,20 @@
 
     <form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-amazon">
       <div role="search" class="sbx-amazon__wrapper">
-        <input type="search" name="search" placeholder="Search your Product" autocomplete="off" required="required" class="sbx-amazon__input">
-        <button type="submit" title="Submit your search query." class="sbx-amazon__submit">
+        <input
+          v-model="query"
+          type="search"
+          name="search"
+          placeholder="Search your Product"
+          autocomplete="off"
+          required="required"
+          class="sbx-amazon__input">
+        <button
+          @click="onSearch"
+          type="submit"
+          title="Submit your search query."
+          class="sbx-amazon__submit"
+        >
           <svg role="img" aria-label="Search">
             <use xlink:href="#sbx-icon-search-11"></use>
           </svg>
@@ -28,3 +40,24 @@
     </form>
   </div>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+      query: ''
+    }
+  },
+
+  methods: {
+    onSearch () {
+      this.$router.push({
+        path: '/search',
+        query: {
+          title: this.query
+        }
+      })
+    }
+  }
+}
+</script>

client/pages/search.vue

@@ -8,6 +8,7 @@
         <!-- main content -->
         <div class="col-xl-10 col-lg-9 md-8 col-sm-8">
 
+
           <div class="mainResuts">
             <div class="s-result-list">
               <div v-for="product in products" :key="product._id" class="s-result-item celwidget">
@@ -129,6 +130,19 @@ import StarRating from 'vue-star-rating'
 export default {
   components: {
     StarRating
+  },
+  watchQuery: ['title'],
+
+  async asyncData ({ $axios, query }) {
+    try {
+      let products = await $axios.$post('/api/search', { title: query.title })
+
+      return {
+        products
+      }
+    } catch (err) {
+
+    }
   }
 }
 </script>