From 61193fcd6ac16d2c4c9470ab1900efb38c04d1de Mon Sep 17 00:00:00 2001
From: Kossie Coder <kossie.coder@gmail.com>
Date: Mon, 29 Mar 2021 22:47:05 +1000
Subject: [PATCH 1/4] 79

---
 db.json                          | 24 +++++++++++++++++++++
 src/App.vue                      | 30 ++++++++++++++++++++------
 src/components/TodoForm.vue      |  9 --------
 src/composables/toast.js         |  8 +++----
 src/pages/todos/index.vue        |  7 ------
 src/store/index.js               | 36 ++-----------------------------
 src/store/modules/index.js       |  5 +++++
 src/store/modules/toast/index.js | 37 ++++++++++++++++++++++++++++++++
 8 files changed, 96 insertions(+), 60 deletions(-)
 create mode 100644 src/store/modules/index.js
 create mode 100644 src/store/modules/toast/index.js

diff --git a/db.json b/db.json
index ea69e0d..adec3e1 100644
--- a/db.json
+++ b/db.json
@@ -140,6 +140,30 @@
       "completed": false,
       "body": "asdfasdf",
       "id": 31
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 32
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 33
+    },
+    {
+      "subject": "adsf",
+      "completed": false,
+      "body": "asdf",
+      "id": 34
+    },
+    {
+      "subject": "adsf",
+      "completed": false,
+      "body": "asdf",
+      "id": 35
     }
   ]
 }
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 4290292..7e19f00 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,11 +15,13 @@
   <div class="container">
       <router-view/>
   </div>
-  <Toast 
-    v-if="showToast" 
-    :message="toastMessage"
-    :type="toastAlertType"
-  />
+  <transition name="slide">
+    <Toast 
+      v-if="showToast" 
+      :message="toastMessage"
+      :type="toastAlertType"
+    />
+  </transition>
 </template>
 
 <script>
@@ -50,5 +52,21 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+.slide-enter-active,
+  .slide-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .slide-enter-from,
+  .slide-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+
+  .slide-enter-to,
+  .slide-leave-from {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/TodoForm.vue b/src/components/TodoForm.vue
index c1413e6..eaffa34 100644
--- a/src/components/TodoForm.vue
+++ b/src/components/TodoForm.vue
@@ -51,13 +51,6 @@
       Cancel
     </button>
   </form>
-  <transition name="fade">
-    <Toast 
-      v-if="showToast" 
-      :message="toastMessage"
-      :type="toastAlertType"
-    />
-  </transition>
 </template>
 
 <script>
@@ -65,13 +58,11 @@ import { useRoute, useRouter } from 'vue-router';
 import axios from '@/axios';
 import { ref, computed } from 'vue';
 import _ from 'lodash';
-import Toast from '@/components/Toast.vue';
 import { useToast } from '@/composables/toast';
 import Input from '@/components/Input.vue';
 
 export default {
   components: {
-    Toast,
     Input
   },
   props: {
diff --git a/src/composables/toast.js b/src/composables/toast.js
index 526ff28..415a000 100644
--- a/src/composables/toast.js
+++ b/src/composables/toast.js
@@ -3,12 +3,12 @@ import { useStore } from 'vuex';
 
 export const useToast = () => {
     const store = useStore();
-    const toastMessage = computed(() => store.getters.toastMessageWithSmile);
-    const toastAlertType = computed(() => store.state.toastAlertType);
-    const showToast = computed(() => store.state.showToast); 
+    const toastMessage = computed(() => store.getters['toast/toastMessageWithSmile']);
+    const toastAlertType = computed(() => store.state.toast.toastAlertType);
+    const showToast = computed(() => store.state.toast.showToast); 
 
     const triggerToast = (message, type = 'success') => {
-        store.dispatch('triggerToast', message, type);
+        store.dispatch('toast/triggerToast', message, type);
     }
 
     return {
diff --git a/src/pages/todos/index.vue b/src/pages/todos/index.vue
index 70898c1..51cd302 100644
--- a/src/pages/todos/index.vue
+++ b/src/pages/todos/index.vue
@@ -49,25 +49,18 @@
       </ul>
     </nav>
   </div>
-  <Toast 
-    v-if="showToast" 
-    :message="toastMessage"
-    :type="toastAlertType"
-  />
 </template>
 
 <script>
 import { ref, computed, watch } from 'vue';
 import TodoList from '@/components/TodoList.vue';
 import axios from '@/axios';
-import Toast from '@/components/Toast.vue';
 import { useToast } from '@/composables/toast';
 import {useRouter} from 'vue-router';
 
 export default {
   components: {
     TodoList,
-    Toast,
   },
   setup() {
     const router = useRouter();
diff --git a/src/store/index.js b/src/store/index.js
index 7ece1f0..e9893ab 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,38 +1,6 @@
 import { createStore } from 'vuex';
+import modules from './modules';
 
 export default createStore({
-    state: {
-        toastMessage: '',
-        toastAlertType: '',
-        showToast: false, 
-    },
-    mutations: {
-        UPDATE_TOAST_MESSAGE (state, payload) {
-            state.toastMessage = payload;
-        },
-        UPDATE_TOAST_ALERT_TYPE (state, payload) {
-            state.toastAlertType = payload;
-        },
-        UPDATE_TOAST_STATUS (state, payload) {
-            state.showToast = payload;
-        }
-    },
-    actions: {
-        triggerToast({ commit }, message, type = 'success') {
-            commit('UPDATE_TOAST_MESSAGE', message)
-            commit('UPDATE_TOAST_ALERT_TYPE', type)
-            commit('UPDATE_TOAST_STATUS', true)
-
-            setTimeout(() => {
-              commit('UPDATE_TOAST_MESSAGE', '')
-              commit('UPDATE_TOAST_ALERT_TYPE', '')
-              commit('UPDATE_TOAST_STATUS', false)
-            }, 5000)
-          }
-    },
-    getters: {
-        toastMessageWithSmile (state) {
-            return state.toastMessage + '^_^';
-        }
-    }
+    modules
 });
\ No newline at end of file
diff --git a/src/store/modules/index.js b/src/store/modules/index.js
new file mode 100644
index 0000000..5c14e18
--- /dev/null
+++ b/src/store/modules/index.js
@@ -0,0 +1,5 @@
+import toast from './toast';
+
+export default {
+    toast
+}
\ No newline at end of file
diff --git a/src/store/modules/toast/index.js b/src/store/modules/toast/index.js
new file mode 100644
index 0000000..db60c20
--- /dev/null
+++ b/src/store/modules/toast/index.js
@@ -0,0 +1,37 @@
+export default {
+    namespaced: true,
+    state: {
+        toastMessage: '',
+        toastAlertType: '',
+        showToast: false, 
+    },
+    mutations: {
+        UPDATE_TOAST_MESSAGE (state, payload) {
+            state.toastMessage = payload;
+        },
+        UPDATE_TOAST_ALERT_TYPE (state, payload) {
+            state.toastAlertType = payload;
+        },
+        UPDATE_TOAST_STATUS (state, payload) {
+            state.showToast = payload;
+        }
+    },
+    actions: {
+        triggerToast({ commit }, message, type = 'success') {
+            commit('UPDATE_TOAST_MESSAGE', message)
+            commit('UPDATE_TOAST_ALERT_TYPE', type)
+            commit('UPDATE_TOAST_STATUS', true)
+
+            setTimeout(() => {
+              commit('UPDATE_TOAST_MESSAGE', '')
+              commit('UPDATE_TOAST_ALERT_TYPE', '')
+              commit('UPDATE_TOAST_STATUS', false)
+            }, 5000)
+          }
+    },
+    getters: {
+        toastMessageWithSmile (state) {
+            return state.toastMessage + '^_^';
+        }
+    },
+}
\ No newline at end of file

From 266b17169c789fc848ed8f64cb43bc8a1db78a07 Mon Sep 17 00:00:00 2001
From: Kossie Coder <kossie.coder@gmail.com>
Date: Wed, 31 Mar 2021 21:31:40 +1000
Subject: [PATCH 2/4] 80

---
 db.json                          | 36 ++++++++++++++++++++++
 src/App.vue                      | 42 ++------------------------
 src/components/Toast.vue         | 51 ++++++++++++++++++++++----------
 src/composables/toast.js         | 11 ++++---
 src/store/modules/toast/index.js | 47 ++++++++++++++++++-----------
 5 files changed, 109 insertions(+), 78 deletions(-)

diff --git a/db.json b/db.json
index adec3e1..37a65c7 100644
--- a/db.json
+++ b/db.json
@@ -164,6 +164,42 @@
       "completed": false,
       "body": "asdf",
       "id": 35
+    },
+    {
+      "subject": "asd",
+      "completed": false,
+      "body": "asdfff",
+      "id": 36
+    },
+    {
+      "subject": "e",
+      "completed": false,
+      "body": "fff",
+      "id": 37
+    },
+    {
+      "subject": "f",
+      "completed": false,
+      "body": "fa",
+      "id": 38
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdffffffdf",
+      "id": 39
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 40
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdffff",
+      "id": 41
     }
   ]
 }
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 7e19f00..4b71fe7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,58 +15,20 @@
   <div class="container">
       <router-view/>
   </div>
-  <transition name="slide">
-    <Toast 
-      v-if="showToast" 
-      :message="toastMessage"
-      :type="toastAlertType"
-    />
-  </transition>
+  
+  <Toast />
 </template>
 
 <script>
 import Toast from '@/components/Toast.vue';
-import { useToast } from '@/composables/toast';
 
 export default {
   components: {
     Toast
   },
-  setup() {
-    const {
-      toastMessage,
-      toastAlertType,
-      showToast,
-      triggerToast
-    } = useToast();
-
-    console.log(showToast.value);
-
-    return {
-      toastMessage,
-      toastAlertType,
-      showToast,
-      triggerToast
-    }
-  }
 }
 </script>
 
 <style scoped>
-.slide-enter-active,
-  .slide-leave-active {
-    transition: all 0.5s ease;
-  }
-
-  .slide-enter-from,
-  .slide-leave-to {
-    opacity: 0;
-    transform: translateY(-30px);
-  }
 
-  .slide-enter-to,
-  .slide-leave-from {
-    opacity: 1;
-    transform: translateY(0px);
-  }
 </style>
\ No newline at end of file
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index a3b69bb..b0bc090 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -1,32 +1,53 @@
 <template>
-    <div 
-        class="alert toast-box" 
-        :class="`alert-${type}`"
-        role="alert"
-    >
-        {{ message }}
+    <div class="toast-box">
+        <transition-group name="slide">
+            <div 
+                v-for="toast in toasts"
+                :key="toast.id"
+                class="alert" 
+                :class="`alert-${toast.type}`"
+                role="alert"
+            >
+                {{ toast.message }}
+            </div>
+        </transition-group>
     </div>
 </template>
 
 <script>
+import { useToast } from '@/composables/toast';
 export default {
-    props: {
-        message: {
-            type: String,
-            required: true
-        },
-        type: {
-            type: String,
-            default: 'success'
+    setup() {
+        const { toasts } = useToast();
+
+        return {
+            toasts
         }
     }
 }
 </script>
 
-<style>
+<style scoped>
     .toast-box {
         position: fixed;
         top: 10px;
         right: 10px;
     }
+
+    .slide-enter-active,
+  .slide-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .slide-enter-from,
+  .slide-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+
+  .slide-enter-to,
+  .slide-leave-from {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 </style>
\ No newline at end of file
diff --git a/src/composables/toast.js b/src/composables/toast.js
index 415a000..46433f1 100644
--- a/src/composables/toast.js
+++ b/src/composables/toast.js
@@ -3,18 +3,17 @@ import { useStore } from 'vuex';
 
 export const useToast = () => {
     const store = useStore();
-    const toastMessage = computed(() => store.getters['toast/toastMessageWithSmile']);
-    const toastAlertType = computed(() => store.state.toast.toastAlertType);
-    const showToast = computed(() => store.state.toast.showToast); 
+    const toasts = computed(() => store.state.toast.toasts);
+    // const toastMessage = computed(() => store.getters['toast/toastMessageWithSmile']);
+    // const toastAlertType = computed(() => store.state.toast.toastAlertType);
+    // const showToast = computed(() => store.state.toast.showToast); 
 
     const triggerToast = (message, type = 'success') => {
         store.dispatch('toast/triggerToast', message, type);
     }
 
     return {
-        toastMessage,
-        toastAlertType,
-        showToast,
+        toasts,
         triggerToast
     }
 }
\ No newline at end of file
diff --git a/src/store/modules/toast/index.js b/src/store/modules/toast/index.js
index db60c20..39446b9 100644
--- a/src/store/modules/toast/index.js
+++ b/src/store/modules/toast/index.js
@@ -1,32 +1,45 @@
 export default {
     namespaced: true,
     state: {
-        toastMessage: '',
-        toastAlertType: '',
-        showToast: false, 
+        toasts: [],
+        // toastMessage: '',
+        // toastAlertType: '',
+        // showToast: false, 
     },
     mutations: {
-        UPDATE_TOAST_MESSAGE (state, payload) {
-            state.toastMessage = payload;
+        // UPDATE_TOAST_MESSAGE (state, payload) {
+        //     state.toastMessage = payload;
+        // },
+        // UPDATE_TOAST_ALERT_TYPE (state, payload) {
+        //     state.toastAlertType = payload;
+        // },
+        // UPDATE_TOAST_STATUS (state, payload) {
+        //     state.showToast = payload;
+        // },
+        ADD_TOAST(state, payload) {
+            state.toasts.push(payload);
         },
-        UPDATE_TOAST_ALERT_TYPE (state, payload) {
-            state.toastAlertType = payload;
+        REMOVE_TOAST(state) {
+            state.toasts.shift();
         },
-        UPDATE_TOAST_STATUS (state, payload) {
-            state.showToast = payload;
-        }
     },
     actions: {
         triggerToast({ commit }, message, type = 'success') {
-            commit('UPDATE_TOAST_MESSAGE', message)
-            commit('UPDATE_TOAST_ALERT_TYPE', type)
-            commit('UPDATE_TOAST_STATUS', true)
+            // commit('UPDATE_TOAST_MESSAGE', message)
+            // commit('UPDATE_TOAST_ALERT_TYPE', type)
+            // commit('UPDATE_TOAST_STATUS', true)
+            commit('ADD_TOAST', {
+                id: Date.now(),
+                message,
+                type,
+            });
 
             setTimeout(() => {
-              commit('UPDATE_TOAST_MESSAGE', '')
-              commit('UPDATE_TOAST_ALERT_TYPE', '')
-              commit('UPDATE_TOAST_STATUS', false)
-            }, 5000)
+            //   commit('UPDATE_TOAST_MESSAGE', '')
+            //   commit('UPDATE_TOAST_ALERT_TYPE', '')
+            //   commit('UPDATE_TOAST_STATUS', false)
+                commit('REMOVE_TOAST');
+            }, 10000)
           }
     },
     getters: {

From 4a0a5316d82334a61c78c5e53921ec0646fcfa88 Mon Sep 17 00:00:00 2001
From: Kossie Coder <kossie.coder@gmail.com>
Date: Wed, 31 Mar 2021 22:23:09 +1000
Subject: [PATCH 3/4] home title

---
 src/pages/index.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 504f464..6b8da35 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>Home Page</div>
-  <div>{{ count }}</div>
-  <button @click="count++">Add</button>
+  <h3 class="mt-4">Vue3 기초 익히기 - Composition Api</h3>
 </template>
 
 <script>

From 99ad9f188f06a0c2b0725e6e71e96aead2c2df74 Mon Sep 17 00:00:00 2001
From: Kossie Coder <kossie.coder@gmail.com>
Date: Fri, 2 Apr 2021 22:03:42 +1000
Subject: [PATCH 4/4] 81

---
 src/App.vue                   | 18 +++-------
 src/components/Navbar.vue     | 25 ++++++++++++++
 src/components/Pagination.vue | 65 +++++++++++++++++++++++++++++++++++
 src/pages/todos/index.vue     | 28 +++++----------
 4 files changed, 102 insertions(+), 34 deletions(-)
 create mode 100644 src/components/Navbar.vue
 create mode 100644 src/components/Pagination.vue

diff --git a/src/App.vue b/src/App.vue
index 4b71fe7..c71e24b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <router-link class="navbar-brand" :to="{ name: 'Home'}">
-      Kossie Coder
-    </router-link>
-
-    <ul class="navbar-nav mr-auto">
-      <li class="nav-item active">
-        <router-link class="nav-link" :to="{ name: 'Todos'}">
-          Todos
-        </router-link>
-      </li>
-    </ul>
-  </nav>
+  <Navbar />
   <div class="container">
       <router-view/>
   </div>
@@ -21,10 +9,12 @@
 
 <script>
 import Toast from '@/components/Toast.vue';
+import Navbar from '@/components/Navbar.vue';
 
 export default {
   components: {
-    Toast
+    Toast,
+    Navbar
   },
 }
 </script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..a7b13b1
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,25 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <router-link class="navbar-brand" :to="{ name: 'Home'}">
+      Kossie Coder
+    </router-link>
+
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+        <router-link class="nav-link" :to="{ name: 'Todos'}">
+          Todos
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
new file mode 100644
index 0000000..a012918
--- /dev/null
+++ b/src/components/Pagination.vue
@@ -0,0 +1,65 @@
+<template>
+  <nav aria-label="Page navigation example">
+      <ul class="pagination">
+        <li v-if="currentPage !== 1" class="page-item">
+            <a 
+                style="cursor: pointer" 
+                class="page-link" 
+                @click="onClick(currentPage - 1)"
+            >
+                Previous
+            </a>
+        </li>
+        <li
+          v-for="page in numberOfPages"
+          :key="page" 
+          class="page-item"
+          :class="currentPage === page ? 'active' : ''"
+        >
+            <a 
+                style="cursor: pointer" 
+                class="page-link" 
+                @click="onClick(page)"
+            >{{page}}</a>
+        </li>
+        <li v-if="numberOfPages !== currentPage" class="page-item">
+            <a 
+                style="cursor: pointer" 
+                class="page-link" 
+                @click="onClick(currentPage + 1)"
+            >Next</a>
+        </li>
+      </ul>
+    </nav>
+</template>
+
+<script>
+import { useContext } from 'vue';
+export default {
+    props: {
+        numberOfPages: {
+            type: Number,
+            required: true
+        },
+        currentPage: {
+            type: Number,
+            required: true
+        }
+    },
+    emits: ['click'],
+    setup() {
+        const { emit } = useContext();
+        const onClick = (page) => {
+            emit('click', page)
+        };
+
+        return {
+            onClick
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/todos/index.vue b/src/pages/todos/index.vue
index 51cd302..c36701d 100644
--- a/src/pages/todos/index.vue
+++ b/src/pages/todos/index.vue
@@ -28,26 +28,12 @@
       @delete-todo="deleteTodo"
     />
     <hr />
-    <nav aria-label="Page navigation example">
-      <ul class="pagination">
-        <li v-if="currentPage !== 1" class="page-item">
-          <a style="cursor: pointer" class="page-link" @click="getTodos(currentPage - 1)">
-            Previous
-          </a>
-        </li>
-        <li
-          v-for="page in numberOfPages"
-          :key="page" 
-          class="page-item"
-          :class="currentPage === page ? 'active' : ''"
-        >
-          <a style="cursor: pointer" class="page-link" @click="getTodos(page)">{{page}}</a>
-        </li>
-        <li v-if="numberOfPages !== currentPage" class="page-item">
-          <a style="cursor: pointer" class="page-link" @click="getTodos(currentPage + 1)">Next</a>
-        </li>
-      </ul>
-    </nav>
+    <Pagination 
+      v-if="todos.length"
+      :numberOfPages="numberOfPages"
+      :currentPage="currentPage"
+      @click="getTodos"
+    />
   </div>
 </template>
 
@@ -57,10 +43,12 @@ import TodoList from '@/components/TodoList.vue';
 import axios from '@/axios';
 import { useToast } from '@/composables/toast';
 import {useRouter} from 'vue-router';
+import Pagination from '@/components/Pagination.vue';
 
 export default {
   components: {
     TodoList,
+    Pagination
   },
   setup() {
     const router = useRouter();