2026-01-29 08:08:49 +00:00
7 changed files with 227 additions and 33 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,4 @@
 VUE_APP_API_URL=https://test-api.sodalive.net
 NODE_ENV=development
+VUE_APP_GOOGLE_CLIENT_ID=758414412471-mosodbj2chno7l1j0iihldh6edmk0gk9.apps.googleusercontent.com
+VUE_APP_KAKAO_JS_KEY=2be3c619ed36fd3e138bf45812c57d7f
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,4 @@
 VUE_APP_API_URL=https://api.sodalive.net
 NODE_ENV=production
+VUE_APP_GOOGLE_CLIENT_ID=983594297130-5hrmkh6vpskeq6v34350kmilf74574h2.apps.googleusercontent.com
+VUE_APP_KAKAO_JS_KEY=378e800dd9029907c559390e786157ef
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,8 @@
    <title>보이스온 크리에이터 관리자</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
  </head>
  <body>
    <noscript>
--- a/src/api/member.js
+++ b/src/api/member.js
@@ -8,4 +8,28 @@ 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}`,
+        },
+      }
+    );
+}
+
+async function loginKakao(accessToken) {
+    return Vue.axios.post(
+      "/member/login/kakao",
+      { container: "api" },
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    );
+}
+
+export { login, logout, loginGoogle, loginKakao }
--- a/src/assets/kakao_login.png
+++ b/src/assets/kakao_login.png
--- a/src/store/accountStore.js
+++ b/src/store/accountStore.js
@@ -87,6 +87,56 @@ 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 LOGIN_KAKAO({commit}, {accessToken}) {
+            let result = false
+            let errorMessage = null
+
+            try {
+                let res = await memberApi.loginKakao(accessToken)
+                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
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,44 +1,79 @@
 <template>
  <v-app>
    <v-main>
-      <v-container
-        align-center
-        justify-center
-      >
-        <v-card class="elevation-12">
-          <v-card-text>
-            <v-form>
-              <v-text-field
-                v-model="email"
-                label="Email"
-                type="text"
-              />
-              <v-text-field
-                v-model="password"
-                :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-                :type="showPassword ? 'text' : 'password'"
-                label="Password"
-                @click:append="showPassword = !showPassword"
-                @keyup.enter="loginSubmit"
-              />
-            </v-form>
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer />
-            <v-btn
-              color="primary"
-              @click="loginSubmit"
-            >
-              로그인
-            </v-btn>
-          </v-card-actions>
-        </v-card>
+      <v-container fluid>
+        <v-row
+          align="start"
+          justify="center"
+          style="padding-top: 10vh;"
+        >
+          <v-col
+            cols="12"
+            sm="8"
+            md="4"
+          >
+            <v-card class="elevation-12">
+              <v-card-text>
+                <v-form>
+                  <v-text-field
+                    v-model="email"
+                    label="Email"
+                    type="text"
+                  />
+                  <v-text-field
+                    v-model="password"
+                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+                    :type="showPassword ? 'text' : 'password'"
+                    label="Password"
+                    @click:append="showPassword = !showPassword"
+                    @keyup.enter="loginSubmit"
+                  />
+                </v-form>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  color="primary"
+                  @click="loginSubmit"
+                >
+                  로그인
+                </v-btn>
+              </v-card-actions>
+              <v-divider />
+              <v-card-text class="text-center">
+                <div
+                  style="display: flex; flex-direction: column; align-items: center; gap: 10px;"
+                >
+                  <div
+                    id="google-login-btn"
+                    style="width: 192px; height: 45px; display: flex; align-items: center; justify-content: center;"
+                  />
+                  <v-btn
+                    width="192"
+                    height="45"
+                    class="pa-0"
+                    elevation="0"
+                    color="transparent"
+                    @click="loginKakao"
+                  >
+                    <img
+                      src="@/assets/kakao_login.png"
+                      alt="카카오 로그인 버튼"
+                      style="width: 100%; height: 100%; display: block;"
+                    >
+                  </v-btn>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
      </v-container>
    </v-main>
  </v-app>
 </template>

 <script>
+/* global Kakao */
 export default {
  name: "Login",

@@ -48,7 +83,86 @@ export default {
    password: '',
  }),

+  mounted() {
+    this.initGoogleLogin();
+    this.initKakaoLogin();
+  },
+
  methods: {
+    initKakaoLogin() {
+      if (typeof Kakao !== 'undefined') {
+        if (!Kakao.isInitialized()) {
+          Kakao.init(process.env.VUE_APP_KAKAO_JS_KEY);
+        }
+      } else {
+        setTimeout(() => {
+          this.initKakaoLogin();
+        }, 500);
+      }
+    },
+
+    loginKakao() {
+      if (typeof Kakao !== 'undefined') {
+        if (!Kakao.isInitialized()) {
+          this.initKakaoLogin();
+          this.notifyError('카카오 SDK가 초기화되지 않았습니다. 잠시 후 다시 시도해주세요.');
+          return;
+        }
+
+        if (Kakao.Auth && typeof Kakao.Auth.login === 'function') {
+          Kakao.Auth.login({
+            success: (authObj) => {
+              this.$store.dispatch('accountStore/LOGIN_KAKAO', { accessToken: authObj.access_token })
+                .then(() => {
+                  this.$router.push(this.$route.query.redirect || '/')
+                })
+                .catch((message) => {
+                  this.notifyError(message);
+                })
+            },
+            fail: (err) => {
+              this.notifyError('카카오 로그인에 실패했습니다.');
+              console.error(err);
+            },
+          });
+        } else {
+          this.notifyError('카카오 인증 모듈을 불러오지 못했습니다. 페이지를 새로고침 해주세요.');
+        }
+      } else {
+        this.initKakaoLogin();
+        this.notifyError('카카오 SDK를 불러오는 중입니다. 잠시 후 다시 시도해주세요.');
+      }
+    },
+
+    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", width: 192 }
+        );
+      } 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)
    },