[webclient] 카카오로그인 기능 반영

apps/snutt-webclient/.env.dev

@@ -1,3 +1,4 @@
 VITE_BASE_URL=https://snutt-api-dev.wafflestudio.com
 VITE_FACEBOOK_APP_ID=1635364463444351
 VITE_GOOGLE_APP_ID=472833977397-62l8mgakgi7ql8m654s7ptrlbn5f1pf6.apps.googleusercontent.com
+VITE_KAKAO_APP_ID=b026df5da6ce29f735085608f2c3e260

apps/snutt-webclient/package.json

@@ -25,6 +25,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-facebook-login": "4.1.1",
+    "react-kakao-login": "^2.1.1",
     "react-router-dom": "6.23.1",
     "styled-components": "6.1.11"
   },

apps/snutt-webclient/src/contexts/EnvContext.ts

@@ -8,6 +8,7 @@ export type EnvContext = {
   TRUFFLE_API_KEY: string;
   FACEBOOK_APP_ID: string;
   GOOGLE_APP_ID: string;
+  KAKAO_APP_ID: string;
 };
 
 export const EnvContext = createContext<EnvContext | null>(null);

apps/snutt-webclient/src/main.tsx

@@ -17,6 +17,7 @@ async function startApp() {
     FACEBOOK_APP_ID: import.meta.env.VITE_FACEBOOK_APP_ID,
     TRUFFLE_API_KEY: import.meta.env.VITE_TRUFFLE_API_KEY,
     GOOGLE_APP_ID: import.meta.env.VITE_GOOGLE_APP_ID,
+    KAKAO_APP_ID: import.meta.env.VITE_KAKAO_APP_ID,
     NODE_ENV: process.env.NODE_ENV as 'development' | 'production',
   };
 

apps/snutt-webclient/src/pages/landing/landing-login/index.tsx

@@ -2,6 +2,7 @@ import { type TokenResponse, useGoogleLogin } from '@react-oauth/google';
 import { useState } from 'react';
 import { type ReactFacebookFailureResponse, type ReactFacebookLoginInfo } from 'react-facebook-login';
 import FBLogin from 'react-facebook-login/dist/facebook-login-render-props';
+import KakaoLogin from 'react-kakao-login';
 import styled from 'styled-components';
 
 import { Button } from '@/components/button';
@@ -16,7 +17,7 @@ type Props = { className?: string; onSignUp: () => void };
 
 export const LandingLogin = ({ className, onSignUp }: Props) => {
   const { saveToken } = useGuardContext(TokenManageContext);
-  const { FACEBOOK_APP_ID } = useGuardContext(EnvContext);
+  const { FACEBOOK_APP_ID, KAKAO_APP_ID } = useGuardContext(EnvContext);
 
   const [id, setId] = useState('');
   const [password, setPassword] = useState('');
@@ -35,32 +36,20 @@ export const LandingLogin = ({ className, onSignUp }: Props) => {
     else setErrorMessage(res.message);
   };
 
-  const handleFacebookSignIn = async (userInfo: ReactFacebookLoginInfo) => {
+  const handleSocialLogin = async (provider: 'FACEBOOK' | 'KAKAO' | 'GOOGLE', token: string) => {
     setErrorMessage('');
 
     const res = await authService.signIn({
-      type: 'FACEBOOK',
-      token: userInfo.accessToken,
-    });
-
-    if (res.type === 'success') saveToken(res.data.token, keepSignIn);
-    else setErrorMessage(res.message);
-  };
-
-  const handleGoogleSignin = async (tokenReponse: TokenResponse) => {
-    setErrorMessage('');
-
-    const res = await authService.signIn({
-      type: 'GOOGLE',
-      token: tokenReponse.access_token,
+      type: provider,
+      token: token,
     });
 
     if (res.type === 'success') saveToken(res.data.token, keepSignIn);
     else setErrorMessage(res.message);
   };
 
   const googleLogin = useGoogleLogin({
-    onSuccess: (tokenResponse: TokenResponse) => handleGoogleSignin(tokenResponse),
+    onSuccess: (tokenResponse: TokenResponse) => handleSocialLogin('GOOGLE', tokenResponse.access_token),
   });
 
   return (
@@ -108,10 +97,16 @@ export const LandingLogin = ({ className, onSignUp }: Props) => {
       </form>
       <FBLogin
         appId={FACEBOOK_APP_ID}
-        callback={handleFacebookSignIn}
+        callback={(userInfo: ReactFacebookLoginInfo) => handleSocialLogin('FACEBOOK', userInfo.accessToken)}
         onFailure={({ status }: ReactFacebookFailureResponse) => setErrorMessage(status || '')}
         render={({ onClick }) => <FBSignInButton onClick={onClick}>facebook으로 로그인</FBSignInButton>}
       />
+      <KakaoLogin
+        token={KAKAO_APP_ID}
+        onSuccess={({ response }) => handleSocialLogin('KAKAO', response.access_token)}
+        onFail={(e) => console.log(e)}
+        render={({ onClick }) => <KakaoSignInButton onClick={onClick}>카카오로 로그인</KakaoSignInButton>}
+      />
       <GoogleSignInButton onClick={() => googleLogin()}>google로 로그인</GoogleSignInButton>
       <EtcWrapper>
         <FindWrapper>
@@ -263,6 +258,22 @@ const FBSignInButton = styled(Button)`
   }
 `;
 
+const KakaoSignInButton = styled(Button)`
+  border-radius: 21px;
+  border: none;
+  width: 100%;
+  margin-top: 10px;
+  height: 34px;
+  font-size: 13px;
+  background-color: transparent;
+  color: #d5b045;
+  border: 1px solid #d5b045;
+
+  &:hover {
+    background-color: rgba(60, 93, 212, 0.1);
+  }
+`;
+
 const GoogleSignInButton = styled(Button)`
   border-radius: 21px;
   border: none;

yarn.lock

@@ -9155,6 +9155,11 @@ react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-kakao-login@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-kakao-login/-/react-kakao-login-2.1.1.tgz#00e9f534d18ce500e31c02ef1d751a1c93dfefbd"
+  integrity sha512-t9htk41/i0zUY7q92mtqdqVZZ018BPi1DgbSVVrPCmuMKhZGJOnZ9OfaKLVPu3sn8QXbJc3dPwqKOiElpb44hQ==
+
 [email protected]:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"