From 203f5c62f086244d69d3f76c464585d3ff49aab6 Mon Sep 17 00:00:00 2001
From: hoon7566 <hoon7566@gmail.com>
Date: Tue, 15 Mar 2022 18:36:12 +0900
Subject: [PATCH] =?UTF-8?q?fix(customer-vue):=20login=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- login 페이지 수정
---
 customer-vue/src/router/router.js    |  12 +-
 customer-vue/src/views/LoginPage.vue | 176 +++++++++++++++------------
 2 files changed, 105 insertions(+), 83 deletions(-)

diff --git a/customer-vue/src/router/router.js b/customer-vue/src/router/router.js
index a3afd88..4b85163 100644
--- a/customer-vue/src/router/router.js
+++ b/customer-vue/src/router/router.js
@@ -23,7 +23,7 @@ const authCheck = async function (to, from, next) {
       await auth.requestCheckAccessToken();
     }
   } catch (error) {
-    await router.replace("/login");
+    await router.push("/login");
   }
   next();
 };
@@ -60,11 +60,6 @@ const routes = [
         name: 'notification',
         component: () => import('../views/NotificationView')
       },
-      {
-        path: '/login',
-        name: 'login',
-        component: () => import('../views/LoginPage')
-      },
       {
         path: "/item/:itemId",
         name: 'itemDetail',
@@ -77,6 +72,11 @@ const routes = [
       },
     ]
   },
+  {
+    path: '/login',
+    component: () => import('../views/LoginPage'),
+  },
+
   {
     path: '/store',
     redirect: 'store',
diff --git a/customer-vue/src/views/LoginPage.vue b/customer-vue/src/views/LoginPage.vue
index 38add22..9f46eb6 100644
--- a/customer-vue/src/views/LoginPage.vue
+++ b/customer-vue/src/views/LoginPage.vue
@@ -1,77 +1,84 @@
 <template>
-  <v-container
-      fill-height
-      >
-    <v-row>
-      <v-col>
-        <div align="center" ><v-img
-            max-height="150"
-            max-width="250"
-            :src="logo"></v-img></div>
-      </v-col>
-    </v-row>
-    <v-row
-        justify="center"
-    >
-      <v-col class="align-content-center">
-            <v-form ref="form" lazy-validation>
-              <v-text-field
-                  :rules="[v => /.+@.+\..+/.test(v) || 'E-mail must be valid', v => !!v || '이메일은 필수 값입니다']"
-                  label="이메일"
-                  prepend-icon="mdi-account-circle"
-              ></v-text-field>
-              <v-text-field
-                  :rules="[v => !!v || '비밀번호는 필수 값입니다']"
-                  label="비밀번호"
-                  type="Password"
-                  prepend-icon="mdi-lock"
-                  append-icon="mdi-eye-off"
-              ></v-text-field>
-              <v-btn
-                  block
-              >
-                Login
-              </v-btn>
-              <div class="d-block my-7" align="center">
-              <v-subheader class="d-inline" >소셜 아이디로 로그인해보세요!</v-subheader>
-              </div>
-              <div class="d-block " align="center">
+  <v-app>
+    <v-main>
+      <v-container class="px-8 py-8">
+        <v-container
+            fill-height
+        >
+          <v-row>
+            <v-col>
+              <div align="center" ><v-img
+                  max-height="150"
+                  max-width="250"
+                  :src="logo"></v-img></div>
+            </v-col>
+          </v-row>
+          <v-row
+              justify="center"
+          >
+            <v-col class="align-content-center">
+              <v-form ref="form" lazy-validation>
+                <v-text-field
+                    :rules="[v => /.+@.+\..+/.test(v) || 'E-mail must be valid', v => !!v || '이메일은 필수 값입니다']"
+                    label="이메일"
+                    prepend-icon="mdi-account-circle"
+                ></v-text-field>
+                <v-text-field
+                    :rules="[v => !!v || '비밀번호는 필수 값입니다']"
+                    label="비밀번호"
+                    type="Password"
+                    prepend-icon="mdi-lock"
+                    append-icon="mdi-eye-off"
+                ></v-text-field>
                 <v-btn
-                    class="mx-2"
-                    fab
-                    small
+                    block
                 >
-                  <v-img
-                      class="d-inline-block align-lg-center mx-5"
-                      style=""
-                      max-width="38"
-                      max-height="38"
-                      :src="logo_naver"
-                      @click="login_auth('naver')"
-                  />
-                </v-btn>
-                <v-btn
-                    class="mx-2"
-                    fab
-                    small
-                >
-                  <v-img
-                      class="d-inline-block mx-5"
-                      max-width="38"
-                      max-height="38"
-                      min-width="38"
-                      min-height="38"
-                      :src="logo_google"
-                      @click="login_auth('google')"
-                  />
+                  Login
                 </v-btn>
+                <div class="d-block my-7" align="center">
+                  <v-subheader class="d-inline" >소셜 아이디로 로그인해보세요!</v-subheader>
+                </div>
+                <div class="d-block " align="center">
+                  <v-btn
+                      class="mx-2"
+                      fab
+                      small
+                  >
+                    <v-img
+                        class="d-inline-block align-lg-center mx-5"
+                        style=""
+                        max-width="38"
+                        max-height="38"
+                        :src="logo_naver"
+                        @click="login_auth('naver')"
+                    />
+                  </v-btn>
+                  <v-btn
+                      class="mx-2"
+                      fab
+                      small
+                  >
+                    <v-img
+                        class="d-inline-block mx-5"
+                        max-width="38"
+                        max-height="38"
+                        min-width="38"
+                        min-height="38"
+                        :src="logo_google"
+                        @click="login_auth('google')"
+                    />
+                  </v-btn>
 
-              </div>
+                </div>
+
+              </v-form>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-container>
+    </v-main>
+  </v-app>
 
-            </v-form>
-      </v-col>
-    </v-row>
-  </v-container>
 
 </template>
 
@@ -79,29 +86,31 @@
 import logo from '@/assets/justLogo.png'
 import logo_naver from '@/assets/logo_naver.svg'
 import logo_google from '@/assets/logo_google.png'
+import jwt from "@/common/jwt";
+import router from "@/router/router";
 
 export default {
   name: "LoginPage",
-  data (){
+  data() {
     return {
-      logo : logo,
+      logo: logo,
       logo_naver: logo_naver,
-      logo_google : logo_google,
+      logo_google: logo_google,
       auth_popup: null,
     }
   },
   watch: {
-    auth_popup : function () {
-      this.auth_popup.addEventListener('beforeunload', function() {
-        window.location.href=process.env.VUE_APP_BASEURL;
+    auth_popup: function () {
+      this.auth_popup.addEventListener('beforeunload', function () {
+        window.location.href = process.env.VUE_APP_BASEURL;
       });
 
 
     }
   },
   methods: {
-    login_auth: async function(target) {
-      const _url = process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+'/user-service/oauth2/authorization/'+target
+    login_auth: async function (target) {
+      const _url = process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL + '/user-service/oauth2/authorization/' + target
       this.auth_popup = window.open(
           _url,
           "",
@@ -110,9 +119,22 @@ export default {
 
     },
   },
+  async mounted() {
+
+    if (!jwt.isExpired())
+      await router.push("/");
+
+  }
 }
 </script>
 
 <style scoped>
-
+.container {
+  max-width: 768px;
+  background-color: white;
+  height: 100%;
+}
+main {
+  background-color: #f2f2f2!important;
+}
 </style>
\ No newline at end of file