[1-vanilla] TabView 추가

1-vanilla/index.html

@@ -20,6 +20,12 @@ <h2 class="container">검색</h2>
       </form>
 
       <div class="content">
+        <ul id="tabs" class="tabs">
+          <li>추천 검색어</li>
+          <li>최근 검색어</li>
+        </ul>
+        <div id="search-keyword"></div>
+        <div id="search-history"></div>
         <div id="search-result"></div>
       </div>
     </div>

1-vanilla/js/views/FormView.js

@@ -36,4 +36,9 @@ FormView.onClickReset = function() {
   this.showResetBtn(false)
 }
 
+FormView.setValue = function (value = '') {
+  this.inputEl.value = value
+  this.showResetBtn(this.inputEl.value.length)
+}
+
 export default FormView

1-vanilla/js/views/TabView.js

@@ -0,0 +1,36 @@
+import View from './View.js'
+
+const tag = '[TabView]'
+
+const TabView = Object.create(View)
+
+TabView.tabNames = {
+  recommand: '추천 검색어',
+  recent: '최근 검색어',
+}
+
+TabView.setup = function(el) {
+  this.init(el)
+  this.bindClick()
+  return this
+}
+
+TabView.setActiveTab = function (tabName) {
+  Array.from(this.el.children).forEach(li => {
+    li.className = li.innerHTML === tabName ?  'active' : ''
+  })
+  this.show()
+}
+
+TabView.bindClick = function() {
+  Array.from(this.el.children).forEach(li => {
+    li.addEventListener('click', e => this.onClick(li.innerHTML))
+  })
+}
+
+TabView.onClick = function (tabName) {
+  this.setActiveTab(tabName)
+  this.emit('@change', {tabName})
+}
+
+export default TabView