Merge pull request #84 from hatchling13/develop

Feature: 구글 로그인 버튼
Kernel360 · Dec 20, 2023 · 4886b38 · 4886b38
2 parents 6b32c8d + 8db4d09
commit 4886b38
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/frontend/public/loginBtns/google_login.svg b/frontend/public/loginBtns/google_login.svg
diff --git a/frontend/src/app/_components/ui/button/GoogleLoginButton.tsx b/frontend/src/app/_components/ui/button/GoogleLoginButton.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import Image from 'next/image';
+import { signIn } from 'next-auth/react';
+
+import googleLogo from '@/../public/loginBtns/google_login.svg';
+
+export default function GoogleLoginButton() {
+  return (
+    <button
+      className="w-[300px] border-none hover:cursor-pointer flex rounded-full px-[24px] py-[8px] items-center"
+      onClick={() => signIn('google', { callbackUrl: '/' })}
+    >
+      <Image src={googleLogo} alt="Google Logo" width={24} height={24} />
+      <span className="ml-[32px] text-lg">Google 계정으로 로그인</span>
+    </button>
+  );
+}
diff --git a/frontend/src/app/_components/ui/button/Kakao.tsx b/frontend/src/app/_components/ui/button/Kakao.tsx
@@ -1,15 +1,17 @@
-import { signIn } from 'next-auth/react'
-import Image from 'next/image'
-import React from 'react'
-import kakaoLogo from '../../../../../public/loginBtns/kakao_logo.png'
+'use client';
+
+import { signIn } from 'next-auth/react';
+import Image from 'next/image';
+import React from 'react';
+import kakaoLogo from '../../../../../public/loginBtns/kakao_logo.png';
 
 export default function KakaoBtn() {
   return (
     <button
       className="bg-[#fee500] w-[300px] h-[45px] flex justify-start text-center items-center rounded-md p-[15px] cursor-pointer border-none"
       onClick={() =>
         signIn('kakao', {
-          callbackUrl: '/home',
+          callbackUrl: '/',
         })
       }
     >
@@ -18,5 +20,5 @@ export default function KakaoBtn() {
       </span>
       <span className="ml-[40px] text-lg text-center">Kakao 로그인하기</span>
     </button>
-  )
+  );
 }
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
+
 import KakaoBtn from '@/app/_components/ui/button/Kakao';
+import GoogleLoginButton from '@/app/_components/ui/button/GoogleLoginButton';
+
 import LoginLogo from './_components/ui/LoginLogo';
 
 export default function LoginPage() {
@@ -11,6 +14,7 @@ export default function LoginPage() {
       </div>
       <div className="mt-8 flex flex-col items-center justify-center gap-4">
         <KakaoBtn />
+        <GoogleLoginButton />
       </div>
     </div>
   );