Merge pull request #22 from Development-team-1/점주_회원가입

점주 회원가입 로직 추가 (gateway preflight 설정 추가)

owner-vue/src/App.vue

@@ -1,28 +1,13 @@
 <template>
-  <v-app id="inspire">
-    <Sidebar :drawer="drawer" />
-    <Topbar @drawerEvent="drawer = !drawer" />
-    <v-main style="background: #f5f5f540">
-      <v-container class="py-8 px-6" fluid>
-        <router-view></router-view>
-      </v-container>
-    </v-main>
-  </v-app>
+  <router-view></router-view>
 </template>
 
 <script>
-import Sidebar from "./components/Sidebar";
-import Topbar from "./components/Topbar";
-
 export default {
-  name: "App",
-  components: { Topbar, Sidebar},
-  data: () => ({
-    cards: ["Today", "Yesterday"],
-    drawer: null,
-  }),
-  mounted() {
-
-  }
-};
+  name: "App"
+}
 </script>
+
+<style scoped>
+
+</style>

owner-vue/src/api/user.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export default {
+
+    requestRegisterUser(user) {
+        return axios.post("http://localhost:8001/user-service/store-owner", user);
+    }
+}

owner-vue/src/main.js

@@ -1,9 +1,7 @@
-import 'font-awesome/css/font-awesome.min.css' // Ensure you are using css-loader
 import Vue from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
 import router from './router'
-import axios from "axios";
 
 Vue.config.productionTip = false
 
@@ -11,6 +9,4 @@ new Vue({
   vuetify,
   router,
   render: h => h(App)
-}).$mount('#app')
-Vue.component('axios',axios)
-
+}).$mount('#app')

owner-vue/src/router/index.js

@@ -1,33 +1,60 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
+import DashboardLayout from "@/views/Layout/DashboardLayout";
+import AuthLayout from "@/views/Layout/AuthLayout";
+
 Vue.use(VueRouter)
 
 const routes = [
+  {
+    path: '/dashboard',
+    redirect: 'dashboard',
+    component: DashboardLayout,
+    children: [
+      {
+        path: "/dashboard",
+        name: 'dashboard',
+        component: () => import('./../views/Dashboard')
+      },
+      {
+        path: '/category',
+        name: 'category',
+        component: () => import('./../views/Category')
+      },
+      {
+        path: '/menu',
+        name: 'menu',
+        component: () => import('./../views/Menu')
+      },
+      {
+        path: '/prev-order',
+        name: 'prev-order',
+        component: () => import('./../views/PrevOrder')
+      },
+      {
+        path: '/order',
+        name: 'order',
+        component: () => import('./../views/Order.vue')
+      }
+    ]
+  },
   {
     path: '/',
-    name: 'dashboard',
-    component: () => import('./../views/Dashboard')
-  },
-  {
-    path: '/category',
-    name: 'category',
-    component: () => import('./../views/Category')
-  },
-  {
-    path: '/menu',
-    name: 'menu',
-    component: () => import('./../views/Menu')
-  },
-  {
-    path: '/prev-order',
-    name: 'prev-order',
-    component: () => import('./../views/PrevOrder')
-  },
-  {
-    path: '/order',
-    name: 'order',
-    component: () => import('./../views/Order.vue')
+    redirect: 'login',
+    component: AuthLayout,
+    children: [
+      {
+        path: '/login',
+        name: 'login',
+        component: () => import('./../views/LoginUser.vue')
+      },
+      {
+        path: '/register',
+        name: 'register',
+        component: () => import('./../views/RegisterUser.vue')
+      }
+    ]
   }
 ]
 

owner-vue/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

owner-vue/src/views/Home.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-
-export default {
-  name: 'Home',
-  components: {
-  }
-}
-</script>

owner-vue/src/views/Layout/AuthLayout.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-app>
+    <v-app-bar app>Just Pickup - 점주용 페이지</v-app-bar>
+
+    <v-main>
+      <v-container fluid>
+        <router-view></router-view>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+export default {
+  name: "AuthLayout"
+}
+</script>
+
+<style scoped>
+
+</style>

owner-vue/src/views/Layout/DashboardLayout.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-app id="inspire">
+    <side-bar v-bind:drawer="drawer"></side-bar>
+    <top-bar v-on:drawEvent="drawer = !drawer"></top-bar>
+    <v-main style="background: #f5f5f540">
+      <v-container class="py-8, px-6" fluid>
+        <router-view></router-view>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+import Sidebar from './Sidebar.vue'
+import Topbar from "./Topbar.vue";
+
+export default {
+  name: "DashboardLayout",
+  components: {
+    'side-bar': Sidebar,
+    'top-bar': Topbar
+  },
+  data: function() {
+    return {
+      drawer: null
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

owner-vue/src/views/RegisterUser.vue

@@ -0,0 +1,96 @@
+<template>
+  <v-card width="800" class="mx-auto mt-5">
+    <v-card-title>
+      <h1>Register</h1>
+    </v-card-title>
+    <v-card-text>
+      <v-form
+          ref="form"
+          lazy-validation
+      >
+        <v-text-field
+            v-model="email"
+            :rules="[v => /.+@.+\..+/.test(v) || 'E-mail must be valid', v => !!v || '이메일은 필수 값입니다']"
+            label="이메일"
+        ></v-text-field>
+        <v-text-field
+            v-model="password"
+            :rules="[v => !!v || '비밀번호는 필수 값입니다']"
+            label="비밀번호"
+            type="Password"
+            append-icon="mdi-eye-off"
+        ></v-text-field>
+        <v-text-field
+            v-model="name"
+            :rules="[v => !!v || '이름은 필수 값입니다']"
+            label="이름"
+        ></v-text-field>
+        <v-text-field
+            v-model="phoneNumber"
+            :rules="[v => !!v || '전화번호는 필수 값입니다']"
+            label="전화번호"
+        ></v-text-field>
+        <v-text-field
+            v-model="businessNumber"
+            :rules="[v => !!v || '사업자번호는 필수 값입니다']"
+            label="사업자번호"
+        ></v-text-field>
+      </v-form>
+    </v-card-text>
+    <v-divider></v-divider>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="info" v-on:click="register">Register</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+
+import userApi from '../api/user.js'
+
+export default {
+  name: "RegisterUser",
+  data: function() {
+    return {
+      email: '',
+      password: '',
+      name: '',
+      phoneNumber: '',
+      businessNumber: ''
+    }
+  },
+  methods: {
+    register: function() {
+      if (!this.$refs.form.validate()) return;
+
+      const user = {
+        email: this.email,
+        password: this.password,
+        name: this.name,
+        phoneNumber: this.phoneNumber,
+        businessNumber: this.businessNumber
+      }
+
+      userApi.requestRegisterUser(user)
+        .then( (response) => {
+          if (response.status == '201') {
+            alert("사용자 등록이 성공되었습니다.");
+            this.$router.push('/login');
+          } else {
+            alert("사용자 등록에 실패하였습니다. 다시 시도해주세요.");
+          }
+        })
+        .catch( (error) => {
+          console.log(error);
+          let message = error.response.data.message;
+          if (message) alert(message);
+        });
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

owner-vue/vue.config.js

@@ -2,16 +2,4 @@ module.exports = {
   transpileDependencies: [
     'vuetify'
   ],
-  devServer:{
-    proxy:{
-      'store-service/' :{
-        target: 'http://localhost:8001',
-        ws:true,
-      },
-      'order-service/' :{
-        target: 'http://localhost:8001',
-        ws:true,
-      }
-    }
-  }
 }