1 vanilla/scafolding

1-vanilla/js/models/HistoryModel.js

@@ -0,0 +1,26 @@
+export default {
+  data: [
+    { keyword: '검색기록2', date: '12.03' },
+    { keyword: '검색기록1', date: '12.02'},
+    { keyword: '검색기록0', date: '12.01' },
+  ],
+
+  list() {
+    return Promise.resolve(this.data)
+  },
+
+  add(keyword = '') {
+    keyword = keyword.trim()
+    if (!keyword) return 
+    if (this.data.some(item => item.keyword === keyword)) {
+      this.remove(keyword)
+    }
+
+    const date = '12.31'
+    this.data = [{keyword, date}, ...this.data]
+  },
+
+  remove(keyword) {
+    this.data = this.data.filter(item => item.keyword !== keyword)
+  }
+}

1-vanilla/js/models/KeywordModel.js

@@ -0,0 +1,16 @@
+export default {
+  data: [
+    {keyword: '이탈리아'}, 
+    {keyword: '세프의요리'}, 
+    {keyword: '제철'}, 
+    {keyword: '홈파티'}
+  ],
+
+  list() {
+    return new Promise(res => {
+      setTimeout(() => {
+        res(this.data)
+      }, 200)
+    })
+  }
+}

1-vanilla/js/models/SearchModel.js

@@ -0,0 +1,24 @@
+const data = [
+  {
+    id: 1,
+    name: "비건 샐러드",
+    image:
+      "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80",
+  },
+  {
+    id: 2,
+    name: "수제 햄버거",
+    image:
+      "https://images.unsplash.com/photo-1550317138-10000687a72b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80",
+  },
+];
+
+export default {
+  list(query) {
+    return new Promise(res => {
+      setTimeout(()=> {
+        res(data)
+      }, 200);
+    })
+  }
+}

1-vanilla/js/views/View.js

@@ -0,0 +1,30 @@
+const tag = '[View]'
+
+export default {
+  init(el) {
+    if (!el) throw el
+    this.el = el
+    return this
+  },
+
+  on(event, handler) {
+    this.el.addEventListener(event, handler)
+    return this
+  },
+
+  emit(event, data) {
+    const evt = new CustomEvent(event, { detail: data })
+    this.el.dispatchEvent(evt)
+    return this
+  },
+
+  hide() {
+    this.el.style.display = 'none'
+    return this
+  },
+
+  show() {
+    this.el.style.display = ''
+    return this
+  }
+}