feat: 메인 페이지 변경 및 라우터 생성

front-end/src/App.vue

@@ -1,56 +1,86 @@
 <template>
-  <v-app>
-    <v-app-bar app color="primary" dark>
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
+  <div id="app">
+    <v-app id="inspire">
+      <v-app id="inspire">
+        <v-navigation-drawer v-model="drawer" app clipped>
+          <v-list dense>
+            <v-list-item link router :to="{ name: 'home' }">
+              <v-list-item-action>
+                <v-icon>mdi-home</v-icon>
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>Home</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item v-if="!isLogin" link router :to="{ name: 'login' }">
+              <v-list-item-action>
+                <v-icon>mdi-account</v-icon>
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>Login</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item
+              v-else
+              @click="logout"
+              link
+              router
+              :to="{ name: 'Home' }"
+            >
+              <v-list-item-action>
+                <v-icon>mdi-account-off-outline</v-icon>
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>Logout</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item link>
+              <v-list-item-action>
+                <v-icon>mdi-cog</v-icon>
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>Profile</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-navigation-drawer>
 
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          esrc="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
+        <v-app-bar app color="indigo" dark>
+          <v-app-bar-nav-icon
+            @click.stop="drawer = !drawer"
+          ></v-app-bar-nav-icon>
+          <v-toolbar-title>Portfolio For Developers</v-toolbar-title>
+        </v-app-bar>
 
-      <v-spacer></v-spacer>
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-
-    <v-main>
-      <HelloWorld />
-    </v-main>
-  </v-app>
+        <v-main>
+          <v-container class="fill-height" fluid>
+            <v-row align="center" justify="center">
+              <router-view />
+            </v-row>
+          </v-container>
+        </v-main>
+        <v-footer color="indigo" app>
+          <span class="white--text"
+            >&copy; {{ new Date().getFullYear() }} vividswan</span
+          >
+        </v-footer>
+      </v-app>
+    </v-app>
+  </div>
 </template>
-
 <script>
-import HelloWorld from "./components/HelloWorld"
-
+import { mapState, mapMutations } from "vuex"
 export default {
   name: "App",
 
-  components: {
-    HelloWorld
-  },
-
   data: () => ({
-    //
-  })
+    drawer: null
+  }),
+  computed: {
+    ...mapState(["isLogin", "userInfo"])
+  },
+  methods: {
+    ...mapMutations(["logout"])
+  }
 }
 </script>

front-end/src/router/index.js

@@ -1,23 +1,46 @@
 import Vue from "vue"
 import VueRouter from "vue-router"
-import Home from "../views/Home.vue"
+import store from "@/store"
 
 Vue.use(VueRouter)
 
+const rejectAuthUser = (to, from, next) => {
+  if (store.state.isLogin === true) {
+    alert("이미 로그인 하였습니다.")
+    next("/")
+  } else {
+    next()
+  }
+}
+
+// const onlyAuthUser = (to, from, next) => {
+//   if (store.state.isLogin === false) {
+//     alert("로그인이 필요합니다.")
+//     next("/login")
+//   } else {
+//     next()
+//   }
+// }
+
 const routes = [
   {
-    path: "/",
-    name: "Home",
-    component: Home
+    path: "/home",
+    name: "home",
+    component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue")
+  },
+  {
+    path: "/login",
+    name: "login",
+    beforeEnter: rejectAuthUser,
+    component: () =>
+      import(/* webpackChunkName: "login" */ "../views/Login.vue")
   },
   {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
+    path: "/register",
+    name: "register",
+    beforeEnter: rejectAuthUser,
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
+      import(/* webpackChunkName: "register" */ "../views/Register.vue")
   }
 ]
 

front-end/src/views/Home.vue

@@ -1,18 +1,11 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <h1>home</h1>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue"
-
 export default {
-  name: "Home",
-  components: {
-    HelloWorld
-  }
+  name: "Home"
 }
 </script>