SearchBox 추가

client/components/Navbar.vue

@@ -13,7 +13,9 @@
           </div>
 
           <!-- Search bar -->
-          <div class="col-sm-6 pt-0"></div>
+          <div class="col-sm-6 pt-0">
+            <Search />
+          </div>
 
           <div class="col-sm-4"></div>
         </div>
@@ -111,7 +113,10 @@
 </template>
 
 <script>
+import Search from '~/components/Search'
 export default {
-
+  components: {
+    Search
+  }
 }
 </script>

client/components/Search.vue

@@ -0,0 +1,30 @@
+<!--http://shipow.github.io/searchbox/-->
+<template>
+  <div class="">
+    <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+      <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-11" viewBox="0 0 40 40">
+        <path d="M15.553 31.106c8.59 0 15.553-6.963 15.553-15.553S24.143 0 15.553 0 0 6.963 0 15.553s6.963 15.553 15.553 15.553zm0-3.888c6.443 0 11.665-5.222 11.665-11.665 0-6.442-5.222-11.665-11.665-11.665-6.442 0-11.665 5.223-11.665 11.665 0 6.443 5.223 11.665 11.665 11.665zM27.76 31.06c-.78-.78-.778-2.05.004-2.833l.463-.463c.783-.783 2.057-.78 2.834-.003l8.168 8.17c.782.78.78 2.05-.003 2.832l-.463.463c-.783.783-2.057.78-2.833.003l-8.17-8.167z"
+        fill-rule="evenodd" />
+      </symbol>
+      <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-2" viewBox="0 0 20 20">
+        <path d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z" fill-rule="evenodd" />
+      </symbol>
+    </svg>
+
+    <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">
+          <svg role="img" aria-label="Search">
+            <use xlink:href="#sbx-icon-search-11"></use>
+          </svg>
+        </button>
+        <button type="reset" title="Clear the search query." class="sbx-amazon__reset">
+          <svg role="img" aria-label="Reset">
+            <use xlink:href="#sbx-icon-clear-2"></use>
+          </svg>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>

client/layouts/default.vue

@@ -2,14 +2,17 @@
   <div>
     <Navbar />
     <nuxt />
+    <Footer />
   </div>
 </template>
 
 <script>
 import Navbar from '~/components/Navbar'
+import Footer from '~/components/Footer'
 export default {
   components: {
-    Navbar
+    Navbar,
+    Footer
   }
 }
 </script>