feat(login): 구글 로그인 (#53)

* f * f * f
depromeet · Aug 30, 2024 · 9a7fe3c · 9a7fe3c
1 parent 146fd16
commit 9a7fe3c
Show file tree

Hide file tree

Showing 20 changed files with 92 additions and 335 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/@auth-core-npm-0.31.0-e0489b405e-55b8f5620d.zip b/.yarn/cache/@auth-core-npm-0.31.0-e0489b405e-55b8f5620d.zip
diff --git a/.yarn/cache/@panva-hkdf-npm-1.2.1-0e4816a25a-a4a9d1812f.zip b/.yarn/cache/@panva-hkdf-npm-1.2.1-0e4816a25a-a4a9d1812f.zip
diff --git a/.yarn/cache/@react-oauth-google-npm-0.12.1-3ab30462b7-fff63a0fc0.zip b/.yarn/cache/@react-oauth-google-npm-0.12.1-3ab30462b7-fff63a0fc0.zip
diff --git a/.yarn/cache/jose-npm-5.8.0-af0023b804-bb9cd97ac6.zip b/.yarn/cache/jose-npm-5.8.0-af0023b804-bb9cd97ac6.zip
diff --git a/.yarn/cache/next-auth-npm-5.0.0-beta.18-48aadaf584-50b0f16ba9.zip b/.yarn/cache/next-auth-npm-5.0.0-beta.18-48aadaf584-50b0f16ba9.zip
diff --git a/.yarn/cache/oauth4webapi-npm-2.12.0-3950b915d7-5e478bea1e.zip b/.yarn/cache/oauth4webapi-npm-2.12.0-3950b915d7-5e478bea1e.zip
diff --git a/.yarn/cache/preact-npm-10.11.3-4973d2dda6-9387115aa0.zip b/.yarn/cache/preact-npm-10.11.3-4973d2dda6-9387115aa0.zip
diff --git a/.yarn/cache/preact-render-to-string-npm-5.2.3-1f72a2f38e-6e46288d89.zip b/.yarn/cache/preact-render-to-string-npm-5.2.3-1f72a2f38e-6e46288d89.zip
diff --git a/.yarn/cache/pretty-format-npm-3.8.0-293db331d9-21a114d43e.zip b/.yarn/cache/pretty-format-npm-3.8.0-293db331d9-21a114d43e.zip
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@react-oauth/google": "^0.12.1",
     "@tanstack/react-query": "^5.51.1",
     "@tanstack/react-query-devtools": "^5.51.1",
     "@tippyjs/react": "^4.2.6",
@@ -75,7 +76,6 @@
     "lowlight": "^3.1.0",
     "lucide-react": "^0.411.0",
     "next": "14.2.4",
-    "next-auth": "5.0.0-beta.18",
     "react": "^18",
     "react-colorful": "^5.6.1",
     "react-day-picker": "8.10.1",

diff --git a/src/app/GoogleProvider.tsx b/src/app/GoogleProvider.tsx
@@ -0,0 +1,8 @@
+import { StrictPropsWithChildren } from '@/types';
+import { GoogleOAuthProvider } from '@react-oauth/google';
+
+export function GoogleProvider({ children }: StrictPropsWithChildren) {
+  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENTID!;
+
+  return <GoogleOAuthProvider clientId={clientId}>{children}</GoogleOAuthProvider>;
+}
diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,8 +4,8 @@ import '@/styles/globals.css';
 import '@/styles/memo.css';
 import { Inter } from 'next/font/google';
 import { cn } from '@/utils';
-import { SessionProvider } from 'next-auth/react';
 import { Suspense } from 'react';
+import { GoogleProvider } from '@/app/GoogleProvider';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -26,9 +26,9 @@ export default function RootLayout({
     <html lang="en">
       <body className={cn(inter.className, 'bg-neutral-1')}>
         <QueryProvider>
-          <SessionProvider>
+          <GoogleProvider>
             <Suspense>{children}</Suspense>
-          </SessionProvider>
+          </GoogleProvider>
         </QueryProvider>
       </body>
     </html>

diff --git a/src/app/login/actions.ts b/src/app/login/actions.ts
diff --git a/src/app/login/api/postLogin.ts b/src/app/login/api/postLogin.ts
@@ -1,6 +1,7 @@
 import { http } from '@/apis/http';
+import { useMutation } from '@tanstack/react-query';
 
-export const postLogin = (provider: 'GOOGLE' | 'KAKAO', token: string) =>
+export const postLogin = ({ provider, token }: { provider: 'GOOGLE' | 'KAKAO'; token: string }) =>
   http.post<{ accessToken: string; refreshToken: string; isFirstLogin: boolean }>({
     url: '/users/social-login',
     params: {
@@ -10,3 +11,9 @@ export const postLogin = (provider: 'GOOGLE' | 'KAKAO', token: string) =>
       'SOCIAL-AUTH-TOKEN': token,
     },
   });
+
+export const usePostLogin = () =>
+  useMutation({
+    mutationKey: ['post-login'],
+    mutationFn: postLogin,
+  });
diff --git a/src/app/login/components/Login.tsx b/src/app/login/components/Login.tsx
@@ -3,11 +3,36 @@
 import { motion } from 'framer-motion';
 import { TouchButton } from '@/components/TouchButton';
 import { Icon } from '@/system/components';
-import { googleLogin } from '../actions';
+import { useGoogleLogin } from '@react-oauth/google';
+import { usePostLogin } from '../api/postLogin';
+import { useFunnelContext } from '@/system/components/Funnel/useFunnel';
+import { ACCESS_TOKEN, JOB_SELECTION, REFRESH_TOKEN, SELECT, NONE } from '@/app/login/constants/token';
+import { setCookie } from 'cookies-next';
 
 export function Login() {
+  const { mutate } = usePostLogin();
+  const { setStep } = useFunnelContext();
+  const login = useGoogleLogin({
+    onSuccess: (res) => {
+      mutate(
+        { provider: 'GOOGLE', token: res.access_token },
+        {
+          onSuccess: ({ data: { isFirstLogin, accessToken, refreshToken } }) => {
+            const jobSelection = isFirstLogin ? NONE : SELECT;
+            setCookie(ACCESS_TOKEN, accessToken);
+            setCookie(REFRESH_TOKEN, refreshToken);
+            setCookie(JOB_SELECTION, jobSelection);
+
+            setStep('select');
+          },
+        },
+      );
+    },
+    onError: (res) => console.log('fail', res),
+  });
+
   return (
-    <motion.form
+    <motion.div
       initial={{
         opacity: 0,
         y: 150,
@@ -18,10 +43,9 @@ export function Login() {
       }}
       exit={{
         opacity: 0,
-        x: 120,
+        x: -120,
       }}
       transition={{ duration: 1 }}
-      action={googleLogin}
       className="w-552 h-604 p-68 pt-116 flex flex-col justify-between rounded-30 bg-[white]">
       <div className="flex flex-col items-center gap-16">
         <Icon name="cloverLogo" size={74} />
@@ -34,13 +58,13 @@ export function Login() {
       </div>
 
       <div className="flex flex-col gap-12">
-        <TouchButton type="submit" className="relative h-62 rounded-54 bg-[#F2F2F2]">
+        <TouchButton onClick={() => login()} type="submit" className="relative h-62 rounded-54 bg-[#F2F2F2]">
           <div className="absolute top-6 left-6">
             <Icon name="google" size={50} />
           </div>
           <p className="font-semibold tracking-[-0.091px]">구글로 시작하기</p>
         </TouchButton>
       </div>
-    </motion.form>
+    </motion.div>
   );
 }