Merge pull request #606 from woowacourse-teams/feature/#553

구글 로그인, apple로그인 구현, 기존 카카오톡 로그인 사용자를 위한 데이터 이전 로직 구현

frontend/src/apis/apiClient.ts

@@ -1,5 +1,5 @@
 import { ApiError } from '@_utils/customError/ApiError';
-import { getToken } from '@_utils/tokenManager';
+import { getAccessToken } from '@_utils/tokenManager';
 import { addBaseUrl } from './endPoints';
 
 type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
@@ -11,7 +11,7 @@ const DEFAULT_HEADERS = {
 function getHeaders(isRequiredAuth: boolean) {
   const headers = new Headers(DEFAULT_HEADERS);
   if (isRequiredAuth) {
-    const token = getToken();
+    const token = getAccessToken();
     headers.append('Authorization', `Bearer ${token}`);
   }
   return headers;

frontend/src/apis/auth.ts

@@ -1,17 +1,29 @@
 import ApiClient from './apiClient';
 
-export const login = async (loginInputInfo: { nickname: string }) => {
-  const response = await ApiClient.postWithoutAuth(
-    '/auth/login',
-    loginInputInfo,
-  );
-  return response.json();
-};
-
 export const kakaoOAuth = async (code: string) => {
   const response = await ApiClient.postWithoutAuth('/auth/kakao/oauth', {
     code,
   });
-  console.log(response);
+  return response.json();
+};
+export const appleOAuth = async (
+  code: string,
+  memberId: string | null = null,
+) => {
+  const response = await ApiClient.postWithoutAuth('/auth/apple/oauth', {
+    code,
+    memberId,
+  });
+  return response.json();
+};
+
+export const googleOAuth = async (
+  idToken: string,
+  memberId: string | null = null,
+) => {
+  const response = await ApiClient.postWithoutAuth('/auth/google/oauth', {
+    idToken,
+    memberId,
+  });
   return response.json();
 };

frontend/src/common/lastDarakbangManager.tsx

@@ -6,6 +6,7 @@ export const setLastDarakbangId = (lastDarakbangId: number): void => {
 
 export const getLastDarakbangId = () => {
   const lastDarakbangId = localStorage.getItem(LAST_DARAKBANG_ID_KEY);
-  if (!lastDarakbangId || process.env.MSW === 'true') return null;
+  if (!lastDarakbangId) return null;
+  else if (process.env.MSW === 'true') return 0;
   return +lastDarakbangId;
 };

frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts

@@ -2,8 +2,10 @@ import { SerializedStyles, css } from '@emotion/react';
 
 export const name = ({ font }: { font: string | SerializedStyles }) => css`
   ${font}
-  overflow-x: hidden;
+
   max-width: 40vw;
+
+  overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;

frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx

@@ -0,0 +1,40 @@
+import ROUTES from '@_constants/routes';
+import { useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function GoogleLoginButton() {
+  const navigate = useNavigate();
+  const g_sso = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (g_sso.current) {
+      window.google.accounts.id.initialize({
+        client_id: process.env.GOOGLE_O_AUTH_CLIENT_ID,
+        callback: handleGoogleSignIn,
+        ux_mode: 'popup',
+      });
+
+      window.google.accounts.id.renderButton(g_sso.current, {
+        theme: 'outline',
+        size: 'large',
+        width: 269,
+      });
+    }
+  }, [g_sso]);
+
+  const handleGoogleSignIn = (response: {
+    credential: string;
+    error: string;
+  }) => {
+    if (response.error && response.error === 'AbortError') {
+      console.error('요청이 중단되었습니다. 다시 시도하세요.');
+      return;
+    }
+    console.log('Google JWT Token: ', response.credential);
+    navigate(`${ROUTES.oAuthGoogle}/google?code=${response.credential}`);
+  };
+
+  return <div ref={g_sso}></div>;
+}
+
+export default GoogleLoginButton;