[1-vanilla] ResultView 추가

1-vanilla/index.html

@@ -18,6 +18,10 @@ <h2 class="container">검색</h2>
         <input type="text" placeholder="검색어를 입력하세요" autofocus>
         <button type="reset" class="btn-reset"></button>
       </form>
+
+      <div class="content">
+        <div id="search-result"></div>
+      </div>
     </div>
   </div>
   <script type="module" src="./js/app.js"></script>

1-vanilla/js/controllers/MainController.js

@@ -1,4 +1,7 @@
 import FormView from '../views/FormView.js'
+import ResultView from '../views/ResultView.js'
+
+import SearchModel from '../models/SearchModel.js'
 
 const tag = '[MainController]'
 
@@ -7,13 +10,27 @@ export default {
     FormView.setup(document.querySelector('form'))
       .on('@submit', e => this.onSubmit(e.detail.input))
       .on('@reset', e => this.onResetForm())
+
+    ResultView.setup(document.querySelector('#search-result'))
   },
 
   onSubmit(input) {
     console.log(tag, 'onSubmit()', input)
+    this.search(input)
   },
 
   onResetForm() {
     console.log(tag, 'onResetForm()')
+    ResultView.hide()
+  },
+
+  search(query) {
+    SearchModel.list(query).then(data => {
+      this.onSearchResult(data)
+    })
+  },
+
+  onSearchResult(data) {
+    ResultView.render(data)
   }
 }

1-vanilla/js/views/ResultView.js

@@ -0,0 +1,34 @@
+import View from './View.js'
+
+const tag = '[ResultView]'
+
+const ResultView = Object.create(View)
+
+ResultView.messages = {
+  NO_RESULT: '검색 결과가 없습니다'
+}
+
+ResultView.setup = function (el) {
+  this.init(el)
+}
+
+ResultView.render = function (data = []) {
+  console.log(tag, 'render()', data)
+  this.el.innerHTML = data.length ? this.getSearchResultsHtml(data) : this.messages.NO_RESULT
+}
+
+ResultView.getSearchResultsHtml = function (data) {
+  return data.reduce((html, item) => {
+    html += this.getSearchItemHtml(item)
+    return html
+  }, '<ul>') + '</ul>'
+}
+
+ResultView.getSearchItemHtml = function (item) {
+  return `<li>
+    <img src="${item.image}" />
+    <p>${item.name}</p>
+  </li>`
+}
+
+export default ResultView