구글 로그인 추가

src/api/member.js

@@ -8,4 +8,16 @@ async function logout() {
     return Vue.axios.post('/creator-admin/member/logout');
 }
 
-export { login, logout }
+async function loginGoogle(idToken) {
+    return Vue.axios.post(
+      "/member/login/google",
+      { container: "api" },
+      {
+        headers: {
+          Authorization: `Bearer ${idToken}`,
+        },
+      }
+    );
+}
+
+export { login, logout, loginGoogle }

src/store/accountStore.js

@@ -87,6 +87,31 @@ const accountStore = {
             });
         },
 
+        async LOGIN_GOOGLE({commit}, {idToken}) {
+            let result = false
+            let errorMessage = null
+
+            try {
+                let res = await memberApi.loginGoogle(idToken)
+                if (res.data.success === true) {
+                    commit("LOGIN", res.data.data)
+                    result = true
+                } else {
+                    errorMessage = res.data.message
+                }
+            } catch (e) {
+                errorMessage = '구글 로그인 정보를 확인해주세요.'
+            }
+
+            return new Promise((resolve, reject) => {
+                if (result) {
+                    resolve();
+                } else {
+                    reject(errorMessage)
+                }
+            });
+        },
+
         async LOGOUT({commit}) {
             let result = false
             let errorMessage = null

src/views/Login/Login.vue

@@ -32,6 +32,13 @@
               로그인
             </v-btn>
           </v-card-actions>
+          <v-divider />
+          <v-card-text class="text-center">
+            <div
+              id="google-login-btn"
+              style="display: flex; justify-content: center;"
+            />
+          </v-card-text>
         </v-card>
       </v-container>
     </v-main>
@@ -48,7 +55,40 @@ export default {
     password: '',
   }),
 
+  mounted() {
+    this.initGoogleLogin();
+  },
+
   methods: {
+    initGoogleLogin() {
+      /* global google */
+      if (typeof google !== 'undefined') {
+        google.accounts.id.initialize({
+          client_id: process.env.VUE_APP_GOOGLE_CLIENT_ID,
+          callback: this.handleCredentialResponse
+        });
+        google.accounts.id.renderButton(
+          document.getElementById("google-login-btn"),
+          { theme: "outline", size: "large" }
+        );
+      } else {
+        setTimeout(() => {
+          this.initGoogleLogin();
+        }, 500);
+      }
+    },
+
+    handleCredentialResponse(response) {
+      const idToken = response.credential;
+      this.$store.dispatch('accountStore/LOGIN_GOOGLE', { idToken })
+        .then(() => {
+          this.$router.push(this.$route.query.redirect || '/')
+        })
+        .catch((message) => {
+          this.notifyError(message);
+        })
+    },
+
     notifyError: async function (message) {
       await this.$dialog.notify.error(message)
     },