From c4a0ce99920a37375789854c166cf80d5ade999f Mon Sep 17 00:00:00 2001
From: leejinseok <sonaky47@naver.com>
Date: Thu, 6 Feb 2020 15:23:49 +0900
Subject: [PATCH] formatting

---
 src/front/src/api/articleApi.js             | 113 +++++++++--------
 src/front/src/api/authApi.js                |  66 +++++-----
 src/front/src/components/HelloWorld.vue     |  58 ---------
 src/front/src/main.js                       |   4 +-
 src/front/src/middlewares/authentication.js |  20 ---
 src/front/src/pages/Welcome.vue             |  33 ++---
 src/front/src/pages/articles/Detail.vue     |  71 ++++++-----
 src/front/src/pages/articles/List.vue       |  53 ++++----
 src/front/src/pages/articles/Write.vue      |  92 +++++++-------
 src/front/src/pages/auth/Login.vue          |  45 ++++---
 src/front/src/pages/auth/Register.vue       |  57 ++++-----
 src/front/src/pages/me/Info.vue             |  15 ++-
 src/front/src/routes/index.js               |  66 +++++-----
 src/front/src/services/articleService.js    | 131 ++++++++++----------
 src/front/src/services/authService.js       |  84 ++++++-------
 src/front/src/utils/commonUtil.js           |   7 +-
 16 files changed, 418 insertions(+), 497 deletions(-)
 delete mode 100644 src/front/src/components/HelloWorld.vue
 delete mode 100644 src/front/src/middlewares/authentication.js

diff --git a/src/front/src/api/articleApi.js b/src/front/src/api/articleApi.js
index 4b3ae8f..f5c8e17 100644
--- a/src/front/src/api/articleApi.js
+++ b/src/front/src/api/articleApi.js
@@ -1,64 +1,63 @@
 import axios from 'axios';
-import commonUtil from "../utils/commonUtil";
 
 export default {
-  getArticles({page = 0, size = 10, q = ''}, authorization) {
+    getArticles({page = 0, size = 10, q = ''}, authorization) {
 
-    return axios({
-      url: '/api/articles',
-      headers: {
-        'Authorization': authorization
-      },
-      params: {
-        page,
-        size,
-        q
-      }
-    });
-  },
-  getArticle({articleId}, authorization) {
-    return axios({
-      url: '/api/articles/' + articleId,
-      headers: {
-        'Authorization': authorization
-      }
-    });
-  },
-  postArticle({title = '', content = ''}, authorization) {
+        return axios({
+            url: '/api/articles',
+            headers: {
+                'Authorization': authorization
+            },
+            params: {
+                page,
+                size,
+                q
+            }
+        });
+    },
+    getArticle({articleId}, authorization) {
+        return axios({
+            url: '/api/articles/' + articleId,
+            headers: {
+                'Authorization': authorization
+            }
+        });
+    },
+    postArticle({title = '', content = ''}, authorization) {
 
-    return axios({
-      url: '/api/articles',
-      method: 'post',
-      headers: {
-        'Authorization': authorization
-      },
-      data: {
-        title,
-        content
-      }
-    });
-  },
-  updateArticle(id, {title = '', content = ''}, authorization) {
-    return axios({
-      url: '/api/articles/' + id,
-      method: 'put',
-      headers: {
-        'Authorization': authorization
-      },
-      data: {
-        title,
-        content
-      }
-    });
-  },
-  removeArticle({articleId}, authorization) {
+        return axios({
+            url: '/api/articles',
+            method: 'post',
+            headers: {
+                'Authorization': authorization
+            },
+            data: {
+                title,
+                content
+            }
+        });
+    },
+    updateArticle(id, {title = '', content = ''}, authorization) {
+        return axios({
+            url: '/api/articles/' + id,
+            method: 'put',
+            headers: {
+                'Authorization': authorization
+            },
+            data: {
+                title,
+                content
+            }
+        });
+    },
+    removeArticle({articleId}, authorization) {
 
-    return axios({
-      url: '/api/articles/' + articleId,
-      headers: {
-        'Authorization': authorization
-      },
-      method: 'delete'
-    });
-  }
+        return axios({
+            url: '/api/articles/' + articleId,
+            headers: {
+                'Authorization': authorization
+            },
+            method: 'delete'
+        });
+    }
 }
\ No newline at end of file
diff --git a/src/front/src/api/authApi.js b/src/front/src/api/authApi.js
index 7eeb851..fef9918 100644
--- a/src/front/src/api/authApi.js
+++ b/src/front/src/api/authApi.js
@@ -1,39 +1,37 @@
 import axios from "axios";
-import commonUtil from "../utils/commonUtil";
-
 
 export default {
-  login(data) {
-    const { email, password } = data;
-    return axios({
-      method: 'post',
-      url: '/api/auth/login',
-      data: {
-        email,
-        password
-      }
-    });
-  },
-  session(authorization) {
-    return axios({
-      method: 'get',
-      url: '/api/users',
-      headers: {
-        'Authorization': authorization
-      }
-    });
-  },
-  register(data) {
-    const { email, name, password } = data;
-    return axios({
-      method: 'post',
-      url: '/api/auth/register',
-      data: {
-        email,
-        name,
-        password
-      }
-    });
-  },
+    login(data) {
+        const {email, password} = data;
+        return axios({
+            method: 'post',
+            url: '/api/auth/login',
+            data: {
+                email,
+                password
+            }
+        });
+    },
+    session(authorization) {
+        return axios({
+            method: 'get',
+            url: '/api/users',
+            headers: {
+                'Authorization': authorization
+            }
+        });
+    },
+    register(data) {
+        const {email, name, password} = data;
+        return axios({
+            method: 'post',
+            url: '/api/auth/register',
+            data: {
+                email,
+                name,
+                password
+            }
+        });
+    },
 }
 
diff --git a/src/front/src/components/HelloWorld.vue b/src/front/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/src/front/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/front/src/main.js b/src/front/src/main.js
index 0ea96ad..685dbf3 100644
--- a/src/front/src/main.js
+++ b/src/front/src/main.js
@@ -8,6 +8,6 @@ Vue.config.productionTip = false;
 Vue.use(VueCookie);
 
 new Vue({
-  render: h => h(App),
-  router
+    render: h => h(App),
+    router
 }).$mount('#app');
diff --git a/src/front/src/middlewares/authentication.js b/src/front/src/middlewares/authentication.js
deleted file mode 100644
index 735e4e4..0000000
--- a/src/front/src/middlewares/authentication.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import axios from "axios";
-import commonUtil from "../utils/commonUtil";
-
-export default {
-  async session() {
-    try {
-      await axios({
-        method: 'get',
-        url: '/api/users',
-        headers: {
-          'Authorization': commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'))
-        }
-      });
-    } catch (e) {
-      alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
-      await this.$router.replace('/');
-    }
-
-  }
-}
\ No newline at end of file
diff --git a/src/front/src/pages/Welcome.vue b/src/front/src/pages/Welcome.vue
index fa0123a..6c74099 100644
--- a/src/front/src/pages/Welcome.vue
+++ b/src/front/src/pages/Welcome.vue
@@ -1,8 +1,10 @@
 <template>
-   <div>
-       <router-link to="/auth/login">로그인</router-link> <br>
-       <router-link to="/auth/register">회원가입</router-link> <br>
-   </div>
+    <div>
+        <router-link to="/auth/login">로그인</router-link>
+        <br/>
+        <router-link to="/auth/register">회원가입</router-link>
+        <br/>
+    </div>
 </template>
 
 <script>
@@ -10,20 +12,19 @@
 
     export default {
         name: "Welcome",
-      async beforeCreate() {
-          authApi.session = authApi.session.bind(this);
-      },
-      async created() {
-        try {
-          await authApi.session();
-          await this.$router.replace('/articles');
-        } catch (e) {
-          console.log(e);
+        async beforeCreate() {
+            authApi.session = authApi.session.bind(this);
+        },
+        async created() {
+            try {
+                await authApi.session();
+                await this.$router.replace("/articles");
+            } catch (e) {
+                console.log(e);
+            }
         }
-      }
-    }
+    };
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/front/src/pages/articles/Detail.vue b/src/front/src/pages/articles/Detail.vue
index c81ecc7..d273fe1 100644
--- a/src/front/src/pages/articles/Detail.vue
+++ b/src/front/src/pages/articles/Detail.vue
@@ -1,16 +1,18 @@
 <template>
     <div>
+        <div></div>
         <div>
+            title :
+            <span>{{ article.title }}</span>
         </div>
         <div>
-            title : <span>{{ article.title }}</span>
-        </div>
-        <div>
-            content: <p>{{ article.content }}</p>
+            content:
+            <p>{{ article.content }}</p>
         </div>
 
         <div v-if="init">
-            createdAt: <span>{{ article.createdAt }}</span>
+            createdAt:
+            <span>{{ article.createdAt }}</span>
         </div>
 
         <div v-if="article.isOwn">
@@ -21,38 +23,39 @@
 </template>
 
 <script>
-  import authService from "../../services/authService";
-  import articleService from "../../services/articleService";
+    import authService from "../../services/authService";
+    import articleService from "../../services/articleService";
 
-  export default {
-    name: "Detail",
-    data() {
-      return {
-        article: {},
-        init: false,
-        test: ''
-      }
-    },
-    async beforeCreate() {
-      authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(this);
-      articleService.getArticle = articleService.getArticle.bind(this);
-      articleService.removeArticle = articleService.removeArticle.bind(this);
-    },
-    async created() {
-      this.article = await articleService.getArticle(this.$route.params.id);
-      this.init = true;
-    },
-    methods: {
-      async remove() {
-        const articleId = this.$route.params.id;
-        if(!confirm('정말 삭제하시겠습니까?')) return;
+    export default {
+        name: "Detail",
+        data() {
+            return {
+                article: {},
+                init: false,
+                test: ""
+            };
+        },
+        async beforeCreate() {
+            authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
+                this
+            );
+            articleService.getArticle = articleService.getArticle.bind(this);
+            articleService.removeArticle = articleService.removeArticle.bind(this);
+        },
+        async created() {
+            this.article = await articleService.getArticle(this.$route.params.id);
+            this.init = true;
+        },
+        methods: {
+            async remove() {
+                const articleId = this.$route.params.id;
+                if (!confirm("정말 삭제하시겠습니까?")) return;
 
-        await articleService.removeArticle(articleId);
-      },
-    }
-  }
+                await articleService.removeArticle(articleId);
+            }
+        }
+    };
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/front/src/pages/articles/List.vue b/src/front/src/pages/articles/List.vue
index 3ef864e..16a580e 100644
--- a/src/front/src/pages/articles/List.vue
+++ b/src/front/src/pages/articles/List.vue
@@ -7,7 +7,7 @@
             <span @click="clickUser">{{ article.user.name }}</span>
         </article>
 
-        <br>
+        <br/>
 
         <div>
             <router-link to="/articles/write">글쓰기</router-link>
@@ -24,39 +24,40 @@
 </template>
 
 <script>
-  import authService from "../../services/authService";
-  import articleService from "../../services/articleService";
+    import authService from "../../services/authService";
+    import articleService from "../../services/articleService";
 
-  export default {
+    export default {
         name: "List",
         data() {
-          return {
-            articles: [],
-            pending: true
-          }
+            return {
+                articles: [],
+                pending: true
+            };
         },
         async beforeCreate() {
-          articleService.getArticles = articleService.getArticles.bind(this);
-          authService.logout = authService.logout.bind(this);
-          authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(this);
+            articleService.getArticles = articleService.getArticles.bind(this);
+            authService.logout = authService.logout.bind(this);
+            authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
+                this
+            );
         },
-      async created() {
-        await authService.banishIfUserUnAuthenticated();
-        this.articles = await articleService.getArticles({});
-        this.pending = false;
-      },
-      methods: {
-          async logout() {
-            if (!confirm('정말 로그아웃 하시겠습니까?')) return;
-            await authService.logout();
-          },
-          clickUser(evt) {
-            console.log(evt.target);
-          }
+        async created() {
+            await authService.banishIfUserUnAuthenticated();
+            this.articles = await articleService.getArticles({});
+            this.pending = false;
+        },
+        methods: {
+            async logout() {
+                if (!confirm("정말 로그아웃 하시겠습니까?")) return;
+                await authService.logout();
+            },
+            clickUser(evt) {
+                console.log(evt.target);
+            }
         }
-    }
+    };
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/front/src/pages/articles/Write.vue b/src/front/src/pages/articles/Write.vue
index 0d30a47..2c1901a 100644
--- a/src/front/src/pages/articles/Write.vue
+++ b/src/front/src/pages/articles/Write.vue
@@ -3,7 +3,7 @@
         <form @submit="isEdit ? update($event) : create($event)">
             <div class="row">
                 <label for="title">Title</label>
-                <input type="text" id="title" v-model="title">
+                <input type="text" id="title" v-model="title"/>
             </div>
             <div class="row">
                 <label for="content">Content</label>
@@ -17,51 +17,57 @@
 </template>
 
 <script>
-  import articleService from "../../services/articleService";
-  import authService from "../../services/authService";
+    import articleService from "../../services/articleService";
+    import authService from "../../services/authService";
 
-  export default {
-    name: "Write",
-    data() {
-      return {
-        title: '',
-        content: '',
-        isEdit: false
-      }
-    },
-    async beforeCreate() {
-      authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(this);
-      articleService.postArticle = articleService.postArticle.bind(this);
-      articleService.updateArticle = articleService.updateArticle.bind(this);
-      articleService.getArticle = articleService.getArticle.bind(this);
-      articleService.doseSessionHasPermission = articleService.doseSessionHasPermission.bind(this);
-    },
-    async created() {
-
-      const id = this.$route.query.id;
-      if (id) {
-        await authService.banishIfUserUnAuthenticated();
-        const { title, content, user } = await articleService.getArticle(id);
-        await articleService.doseSessionHasPermission(user);
-
-        this.title = title;
-        this.content = content;
-        this.isEdit = true;
-      }
-    },
-    methods: {
-        async create(evt) {
-          evt.preventDefault();
-          const {title, content} = this;
-          await articleService.postArticle({title, content});
+    export default {
+        name: "Write",
+        data() {
+            return {
+                title: "",
+                content: "",
+                isEdit: false
+            };
         },
-        async update(evt) {
-          evt.preventDefault();
-          const {title, content} = this;
-          await articleService.updateArticle(this.$route.query.id, {title, content});
+        async beforeCreate() {
+            authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
+                this
+            );
+            articleService.postArticle = articleService.postArticle.bind(this);
+            articleService.updateArticle = articleService.updateArticle.bind(this);
+            articleService.getArticle = articleService.getArticle.bind(this);
+            articleService.doseSessionHasPermission = articleService.doseSessionHasPermission.bind(
+                this
+            );
+        },
+        async created() {
+            const id = this.$route.query.id;
+            if (id) {
+                await authService.banishIfUserUnAuthenticated();
+                const {title, content, user} = await articleService.getArticle(id);
+                await articleService.doseSessionHasPermission(user);
+
+                this.title = title;
+                this.content = content;
+                this.isEdit = true;
+            }
+        },
+        methods: {
+            async create(evt) {
+                evt.preventDefault();
+                const {title, content} = this;
+                await articleService.postArticle({title, content});
+            },
+            async update(evt) {
+                evt.preventDefault();
+                const {title, content} = this;
+                await articleService.updateArticle(this.$route.query.id, {
+                    title,
+                    content
+                });
+            }
         }
-    }
-  }
+    };
 </script>
 
 <style scoped>
diff --git a/src/front/src/pages/auth/Login.vue b/src/front/src/pages/auth/Login.vue
index baf9831..1771292 100644
--- a/src/front/src/pages/auth/Login.vue
+++ b/src/front/src/pages/auth/Login.vue
@@ -2,8 +2,8 @@
     <div>
         <router-link to="/">home</router-link>
         <form @submit="submit">
-            <input type="email" v-model="email">
-            <input type="password" v-model="password">
+            <input type="email" v-model="email"/>
+            <input type="password" v-model="password"/>
             <button type="submit">확인</button>
         </form>
     </div>
@@ -17,32 +17,31 @@
         name: "Login",
         data() {
             return {
-                email: '',
-                password: ''
+                email: "",
+                password: ""
+            };
+        },
+        beforeCreate() {
+            authApi.session = authApi.session.bind(this);
+            authService.login = authService.login.bind(this);
+        },
+        async created() {
+            try {
+                await authApi.session();
+                await this.$router.replace("/articles");
+            } catch (e) {
+                console.log(e);
             }
         },
-      beforeCreate() {
-        authApi.session = authApi.session.bind(this);
-        authService.login = authService.login.bind(this);
-      },
-      async created() {
-        try {
-          await authApi.session();
-          await this.$router.replace('/articles');
-        } catch (e) {
-          console.log(e);
-        }
-      },
-      methods: {
-            submit: async function(evt) {
+        methods: {
+            submit: async function (evt) {
                 evt.preventDefault();
-                const { email, password } = this;
-                await authService.login(email,password);
-            },
+                const {email, password} = this;
+                await authService.login(email, password);
+            }
         }
-    }
+    };
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/front/src/pages/auth/Register.vue b/src/front/src/pages/auth/Register.vue
index 8473388..2413848 100644
--- a/src/front/src/pages/auth/Register.vue
+++ b/src/front/src/pages/auth/Register.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
         <form @submit="register">
-            <input type="email" v-model="email" placeholder="Email">
-            <input type="text" v-model="name" placeholder="Name">
-            <input type="password" v-model="password" placeholder="Password">
+            <input type="email" v-model="email" placeholder="Email"/>
+            <input type="text" v-model="name" placeholder="Name"/>
+            <input type="password" v-model="password" placeholder="Password"/>
             <button type="submit">확인</button>
         </form>
     </div>
@@ -17,43 +17,34 @@
         name: "Register",
         data() {
             return {
-              email: '',
-              name: '',
-              password: ''
+                email: "",
+                name: "",
+                password: ""
+            };
+        },
+        beforeCreate() {
+            authApi.register = authApi.register.bind(this);
+            authApi.session = authApi.session.bind(this);
+
+            authService.register = authService.register.bind(this);
+        },
+        async created() {
+            try {
+                await authApi.session();
+                await this.$router.replace("/articles");
+            } catch (err) {
+                console.log(err);
             }
         },
-      beforeCreate() {
-          authApi.register = authApi.register.bind(this);
-          authApi.session = authApi.session.bind(this);
-
-          authService.register = authService.register.bind(this);
-      },
-      async created() {
-        try {
-          await authApi.session();
-          await this.$router.replace("/articles");
-        } catch (err) {
-          console.log(err);
-        }
-      },
-      methods: {
-            register: async function(evt) {
+        methods: {
+            register: async function (evt) {
                 evt.preventDefault();
-                const { email, name, password } = this;
+                const {email, name, password} = this;
                 await authService.register({email, name, password});
-
-                // try {
-                //     await authApi.register({email, name, password});
-                // } catch (err) {
-                //     if (err.response.status === 409) {
-                //       alert('이미 존재하는 이메일입니다.');
-                //     }
-                // }
             }
         }
-    }
+    };
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/front/src/pages/me/Info.vue b/src/front/src/pages/me/Info.vue
index c708cbc..7548272 100644
--- a/src/front/src/pages/me/Info.vue
+++ b/src/front/src/pages/me/Info.vue
@@ -25,24 +25,23 @@
     export default {
         name: "Info",
         data() {
-          return {
-            user: null,
-            init: false
-          }
+            return {
+                user: null,
+                init: false
+            };
         },
         async beforeCreate() {
             authApi.bind(this);
 
             try {
-                const { data } = await authApi.session();
+                const {data} = await authApi.session();
                 this.user = data;
             } catch (err) {
-                await this.$router.replace('/auth/login');
+                await this.$router.replace("/auth/login");
             }
         }
-    }
+    };
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/front/src/routes/index.js b/src/front/src/routes/index.js
index f583576..061aae3 100644
--- a/src/front/src/routes/index.js
+++ b/src/front/src/routes/index.js
@@ -12,37 +12,37 @@ import Info from "../pages/me/Info";
 Vue.use(VueRouter);
 
 export const router = new VueRouter({
-  mode: 'history',
-  routes: [
-    {
-      path: '/',
-      component: Welcome
-    },
-    {
-      path: '/auth/login',
-      component: Login
-    },
-    {
-      path: '/auth/register',
-      component: Register
-    },
-    {
-      path: '/articles',
-      component: Articles
-    },
-    {
-      path: '/articles/write',
-      name: 'WriteArticle',
-      component: WriteArticle
-    },
-    {
-      path: '/articles/:id',
-      name: 'DetailArticle',
-      component: DetailArticle
-    },
-    {
-      path: '/me',
-      component: Info
-    }
-  ]
+    mode: 'history',
+    routes: [
+        {
+            path: '/',
+            component: Welcome
+        },
+        {
+            path: '/auth/login',
+            component: Login
+        },
+        {
+            path: '/auth/register',
+            component: Register
+        },
+        {
+            path: '/articles',
+            component: Articles
+        },
+        {
+            path: '/articles/write',
+            name: 'WriteArticle',
+            component: WriteArticle
+        },
+        {
+            path: '/articles/:id',
+            name: 'DetailArticle',
+            component: DetailArticle
+        },
+        {
+            path: '/me',
+            component: Info
+        }
+    ]
 });
diff --git a/src/front/src/services/articleService.js b/src/front/src/services/articleService.js
index 39b80d8..c73d531 100644
--- a/src/front/src/services/articleService.js
+++ b/src/front/src/services/articleService.js
@@ -3,71 +3,74 @@ import commonUtil from "../utils/commonUtil";
 import authApi from "../api/authApi";
 
 export default {
-  async getArticles({page = 0, size = 10}) {
-    try {
-      const result = await articleApi.getArticles({page, size}, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
-      return result.data;
-    } catch (err) {
-      alert('문제가 발생하였습니다.');
-      console.log(err.response);
-    }
-  },
-  async getArticle(articleId) {
-    try {
-      const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
-      const result = await articleApi.getArticle({articleId}, authorization);
-      return result.data;
-    } catch (e) {
-      alert('문제가 발생하였습니다.');
-      console.log(e);
-    }
-  },
-  async removeArticle(articleId) {
-    try {
-      const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
-      await articleApi.removeArticle({articleId}, authorization);
-      await this.$router.push('/articles');
-    } catch (e) {
-      alert('문제가 발생하였습니다.');
-      console.log(e);
-    }
-  },
-  async postArticle(data) {
-    try {
-      await articleApi.postArticle(data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
-      await this.$router.push('/articles');
-    } catch (err) {
-      alert('문제가 발생하였습니다.');
-      console.log(err);
-    }
-  },
-  async updateArticle(id, data) {
-    try {
-      await articleApi.updateArticle(id, data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
-      await this.$router.push("/articles/" + id);
-    } catch (err) {
-      alert('문제가 발생하였습니다.');
-      console.log(err);
-    }
-  },
-  async doseSessionHasPermission(user) {
-    let session = null;
+    async getArticles({page = 0, size = 10}) {
+        try {
+            const result = await articleApi.getArticles({
+                page,
+                size
+            }, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
+            return result.data;
+        } catch (err) {
+            alert('문제가 발생하였습니다.');
+            console.log(err.response);
+        }
+    },
+    async getArticle(articleId) {
+        try {
+            const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
+            const result = await articleApi.getArticle({articleId}, authorization);
+            return result.data;
+        } catch (e) {
+            alert('문제가 발생하였습니다.');
+            console.log(e);
+        }
+    },
+    async removeArticle(articleId) {
+        try {
+            const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
+            await articleApi.removeArticle({articleId}, authorization);
+            await this.$router.push('/articles');
+        } catch (e) {
+            alert('문제가 발생하였습니다.');
+            console.log(e);
+        }
+    },
+    async postArticle(data) {
+        try {
+            await articleApi.postArticle(data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
+            await this.$router.push('/articles');
+        } catch (err) {
+            alert('문제가 발생하였습니다.');
+            console.log(err);
+        }
+    },
+    async updateArticle(id, data) {
+        try {
+            await articleApi.updateArticle(id, data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
+            await this.$router.push("/articles/" + id);
+        } catch (err) {
+            alert('문제가 발생하였습니다.');
+            console.log(err);
+        }
+    },
+    async doseSessionHasPermission(user) {
+        let session = null;
 
-    try {
-      const result = await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
-      session = result.data;
-    } catch (err) {
-      alert('문제가 발생하였습니다.');
-      return;
-    }
+        try {
+            const result = await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
+            session = result.data;
+        } catch (err) {
+            alert('문제가 발생하였습니다.');
+            return;
+        }
 
-    try {
-      if (user.id !== session.id) {
-        throw new Error("현재 사용자가 해당 게시글에 권한이 없습니다.");
-      }
-    } catch (err) {
-      alert(err.message);
-      await this.$router.replace("/articles/" + this.$route.query.id);
+        try {
+            if (user.id !== session.id) {
+                throw new Error("현재 사용자가 해당 게시글에 권한이 없습니다.");
+            }
+        } catch (err) {
+            alert(err.message);
+            await this.$router.replace("/articles/" + this.$route.query.id);
+        }
     }
-  }
 }
\ No newline at end of file
diff --git a/src/front/src/services/authService.js b/src/front/src/services/authService.js
index cfa39bc..b2e7f33 100644
--- a/src/front/src/services/authService.js
+++ b/src/front/src/services/authService.js
@@ -2,48 +2,48 @@ import authApi from "../api/authApi";
 import commonUtil from "../utils/commonUtil";
 
 export default {
-  async login(email, password) {
-    try {
-      const result = await authApi.login({email, password});
-      const { token } = result.data;
-      this.$cookie.set('accessToken', token, 1000);
-      await this.$router.push('/articles');
-    } catch (err) {
-      const message = err.response.data.message;
-      if (~message.indexOf('패스워드')) {
-        alert('패스워드가 일치하지 않습니다.');
-      }
-    }
-  },
-  async register(data) {
-    try {
-      await authApi.register(data);
-      alert('가입이 완료되었습니다. 로그인 해 주세요');
-      await this.$router.push('/auth/login');
-    } catch (err) {
-      if (err.response.status === 409) {
-        alert('이미 존재하는 이메일입니다.');
-      }
-    }
-  },
-  async logout() {
-    try {
-      this.$cookie.set('accessToken', null, 0);
-      await this.$router.push('/');
-    } catch (e) {
-      console.log(e);
-    }
-  },
-  async progressIfUserAuthenticated() {
+    async login(email, password) {
+        try {
+            const result = await authApi.login({email, password});
+            const {token} = result.data;
+            this.$cookie.set('accessToken', token, 1000);
+            await this.$router.push('/articles');
+        } catch (err) {
+            const message = err.response.data.message;
+            if (~message.indexOf('패스워드')) {
+                alert('패스워드가 일치하지 않습니다.');
+            }
+        }
+    },
+    async register(data) {
+        try {
+            await authApi.register(data);
+            alert('가입이 완료되었습니다. 로그인 해 주세요');
+            await this.$router.push('/auth/login');
+        } catch (err) {
+            if (err.response.status === 409) {
+                alert('이미 존재하는 이메일입니다.');
+            }
+        }
+    },
+    async logout() {
+        try {
+            this.$cookie.set('accessToken', null, 0);
+            await this.$router.push('/');
+        } catch (e) {
+            console.log(e);
+        }
+    },
+    async progressIfUserAuthenticated() {
 
-  },
-  async banishIfUserUnAuthenticated() {
-    try {
-      await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
-    } catch (e) {
-      alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
-      await this.$router.replace('/');
-    }
-  },
+    },
+    async banishIfUserUnAuthenticated() {
+        try {
+            await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
+        } catch (e) {
+            alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
+            await this.$router.replace('/');
+        }
+    },
 
 }
\ No newline at end of file
diff --git a/src/front/src/utils/commonUtil.js b/src/front/src/utils/commonUtil.js
index f2ace33..937139b 100644
--- a/src/front/src/utils/commonUtil.js
+++ b/src/front/src/utils/commonUtil.js
@@ -1,6 +1,5 @@
-
 export default {
-  getAuthenticationHeaderBearer(accessToken) {
-    return 'Bearer ' + accessToken;
-  }
+    getAuthenticationHeaderBearer(accessToken) {
+        return 'Bearer ' + accessToken;
+    }
 };
\ No newline at end of file