update

src/front/src/App.vue

@@ -1,5 +1,20 @@
 <template>
-  <router-view />
+  <div id="app">
+    <router-view
+      :startSpin="startSpin"
+      :stopSpin="stopSpin"
+    />
+
+    <div id="spinner-container" v-if="spin">
+      <div class="spinner-container__inner">
+        <div class="spinner-container__inner__inner">
+          <div class="lds-ripple" ><div></div><div></div></div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -7,6 +22,25 @@
 export default {
   name: 'app',
   components: {
+  },
+  data() {
+    return {
+      spin: false
+    }
+  },
+  methods: {
+    startSpin() {
+      this.spin = true;
+    },
+    stopSpin(smooth = false) {
+      if (smooth) {
+        setTimeout(() => {
+          this.spin = false;
+        }, 300);
+      } else {
+        this.spin = false;
+      }
+    }
   }
 }
 </script>
@@ -20,4 +54,61 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+
+#spinner-container {
+  display: block;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.spinner-container__inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  /*background-color: #2c3e50;*/
+  /*background-color: rgba(44, 62, 80, 0.25);*/
+}
+
+.spinner-container__inner__inner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid slateblue;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+@keyframes lds-ripple {
+  0% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: 72px;
+    height: 72px;
+    opacity: 0;
+  }
+}
 </style>

src/front/src/api/articleApi.js

@@ -50,6 +50,7 @@ export default {
         });
     },
     updateArticle(id, {title = '', content = ''}, authorization) {
+
         return axios({
             url: '/api/articles/' + id,
             method: 'put',

src/front/src/components/common/Header.vue

@@ -0,0 +1,15 @@
+<template>
+    <header>
+        Head
+    </header>
+</template>
+
+<script>
+    export default {
+        name: "Header"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/front/src/pages/articles/List.vue

@@ -1,37 +1,47 @@
 <template>
-    <div v-if="!pending">
-        <article v-for="article in articles" v-bind:key="article.id">
-            <router-link :to="{name: 'DetailArticle', params: {id: article.id}}">
-                <span>{{ article.title }}</span>
-            </router-link>
-            <span @click="clickUser">{{ article.user.name }}</span>
-        </article>
+    <div>
+        <Header />
+        <div v-if="!pending">
+            <article v-for="article in articles" v-bind:key="article.id">
+                <router-link :to="{name: 'DetailArticle', params: {id: article.id}}">
+                    <span>{{ article.title }}</span>
+                </router-link>
+                <span @click="clickUser">{{ article.user.name }}</span>
+            </article>
 
-        <br/>
+            <br/>
 
-        <div v-if="user">
-            <div>
-                <router-link to="/articles/write">글쓰기</router-link>
-            </div>
+            <div v-if="user">
+                <div>
+                    <router-link to="/articles/write">글쓰기</router-link>
+                </div>
 
-            <div>
-                <button type="button" @click="logout">로그아웃</button>
-            </div>
+                <div>
+                    <button type="button" @click="logout">로그아웃</button>
+                </div>
 
-            <div>
-                <router-link to="/me">My</router-link>
+                <div>
+                    <router-link to="/me">My</router-link>
+                </div>
             </div>
         </div>
-        
     </div>
 </template>
 
 <script>
     import authService from "../../services/authService";
     import articleService from "../../services/articleService";
+    import Header from '../../components/common/Header';
 
     export default {
         name: "List",
+        components: {
+          Header
+        },
+        props: {
+            startSpin: Function,
+            stopSpin: Function
+        },
         data() {
             return {
                 articles: [],
@@ -48,6 +58,8 @@
             // );
         },
         async created() {
+            this.startSpin();
+
             try {
                 const { data } = await authService.session();
                 this.user = data;
@@ -55,9 +67,10 @@
                 console.log(err);
             }
 
-            // await authService.banishIfUserUnAuthenticated();
             this.articles = await articleService.getArticles({});
             this.pending = false;
+
+            this.stopSpin(true);
         },
         methods: {
             async logout() {