Merge pull request #99 from EveryUniv/feat/98

feat: 소셜로그인 기능 추가
EveryUniv · Apr 15, 2024 · 2695758 · 2695758
2 parents 82c31f1 + bd25f09
commit 2695758
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 17 deletions.
diff --git a/src/components/login/form.tsx b/src/components/login/form.tsx
@@ -7,7 +7,9 @@ import { usePostLogin } from '@hooks/api/auth/usePostLogin';
 import React from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
+import { usePostOAuthLogin } from '@/hooks/api/auth/usePostOAuthLogin';
 import { IdPassword } from '@/types/default-interfaces';
+import { isOAuthFlow } from '@/utils/oAuth';
 
 export default function LoginForm() {
    const initLoginInfo: IdPassword = {
@@ -16,12 +18,17 @@ export default function LoginForm() {
    };
    const [loginInfo, setLoginInfo] = React.useState<IdPassword>(initLoginInfo);
 
-   const { mutate } = usePostLogin();
+   const { mutate: login } = usePostLogin();
+   const { mutate: oAuthLogin } = usePostOAuthLogin();
    const [searchParams] = useSearchParams();
 
    const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      mutate(loginInfo);
+
+      if (isOAuthFlow(searchParams)) {
+         oAuthLogin(loginInfo);
+      }
+      login(loginInfo);
    };
 
    return (

diff --git a/src/components/reset/id.tsx b/src/components/reset/id.tsx
@@ -6,6 +6,8 @@ import { formatphoneNumber } from '@utils/tell';
 import React, { ChangeEvent } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
+import { isOAuthFlow, redirectToClient } from '@/utils/oAuth';
+
 export default function IdForm() {
    const [phoneNumber, setPhoneNumber] = React.useState<string>('');
    //TODO) 인증번호 전송 여부 Toast 추가
@@ -36,11 +38,11 @@ export default function IdForm() {
    };
 
    const redirectLogin = () => {
-      if (searchParams.has('redirectUrl')) {
-         window.location.href = searchParams.get('redirectUrl') || '';
-         return;
+      if (isOAuthFlow(searchParams)) {
+         redirectToClient(searchParams);
+      } else {
+         navigate('/login');
       }
-      navigate('/login');
    };
 
    return (

diff --git a/src/components/reset/pw.tsx b/src/components/reset/pw.tsx
@@ -6,6 +6,8 @@ import { useAlert } from '@hooks/useAlert';
 import React, { ChangeEvent } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
+import { isOAuthFlow, redirectToClient } from '@/utils/oAuth';
+
 export default function ResetPwForm({ token }: { token: string }) {
    const [password, setPassword] = React.useState<string>('');
    const [passwordConfirm, setPasswordConfirm] = React.useState<string>('');
@@ -44,8 +46,8 @@ export default function ResetPwForm({ token }: { token: string }) {
       if (resetSuccess) {
          alert('비밀번호가 변경되었습니다.');
 
-         if (searchParams.has('redirectUrl')) {
-            window.location.href = searchParams.get('redirectUrl') || '';
+         if (isOAuthFlow(searchParams)) {
+            redirectToClient(searchParams);
          } else {
             navigate('/login');
          }

diff --git a/src/constants/api.ts b/src/constants/api.ts
@@ -34,7 +34,7 @@ export const API_PATH = {
          REFRESH: '/user/dku/refresh',
       },
       /** 로그인 */
-      LOGIN: '/user/login',
+      LOGIN: { DEFAULT: '/user/login', OAUTH: '/oauth/login' },
       /** 회원가입 */
       SIGNUP: {
          VERIFY: '/user/dku/verify',

diff --git a/src/hooks/api/auth/usePostLogin.ts b/src/hooks/api/auth/usePostLogin.ts
@@ -3,16 +3,14 @@ import { ROUTES } from '@constants/route';
 import { post } from '@libs/api';
 import { useMutation, type UseMutationOptions } from '@tanstack/react-query';
 import { setToken } from '@utils/token';
-import { AxiosError, } from 'axios';
+import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
-
 interface LoginRequest {
    studentId: string;
    password: string;
 }
 
-
 interface LoginResponse {
    accessToken: string;
    refreshToken: string;
@@ -21,7 +19,8 @@ interface LoginResponse {
 export const usePostLogin = (options?: UseMutationOptions<LoginResponse, AxiosError, LoginRequest>) => {
    const navigate = useNavigate();
    return useMutation<LoginResponse, AxiosError, LoginRequest>({
-      mutationFn: ({studentId, password}: LoginRequest) => post(API_PATH.USER.LOGIN, {studentId, password}),
+      mutationFn: ({ studentId, password }: LoginRequest) =>
+         post(API_PATH.USER.LOGIN.DEFAULT, { studentId, password }),
       onSuccess: (data) => {
          setToken(data);
          navigate(ROUTES.MAIN);

diff --git a/src/hooks/api/auth/usePostOAuthLogin.ts b/src/hooks/api/auth/usePostOAuthLogin.ts
@@ -0,0 +1,34 @@
+import { API_PATH } from '@constants/api';
+import { post } from '@libs/api';
+import { useMutation, type UseMutationOptions } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useSearchParams } from 'react-router-dom';
+
+interface LoginRequest {
+   studentId: string;
+   password: string;
+}
+
+interface LoginResponse {
+   accessToken: string;
+   refreshToken: string;
+}
+
+export const usePostOAuthLogin = (options?: UseMutationOptions<LoginResponse, AxiosError, LoginRequest>) => {
+   const [searchParams] = useSearchParams();
+
+   return useMutation<LoginResponse, AxiosError, LoginRequest>({
+      mutationFn: ({ studentId, password }: LoginRequest) =>
+         post(API_PATH.USER.LOGIN.OAUTH, {
+            studentId,
+            password,
+            clientId: searchParams.get('clientId') || '',
+            redirectUri: searchParams.get('redirectUri') || '',
+            codeChallenge: searchParams.get('codeChallenge') || '',
+            codeChallengeMethod: searchParams.get('codeChallengeMethod') || '',
+            scope: searchParams.get('scope') || '',
+            responseType: searchParams.get('responseType') || '',
+         }),
+      ...options,
+   });
+};
diff --git a/src/hooks/api/signup/usePostSignup.ts b/src/hooks/api/signup/usePostSignup.ts
@@ -4,6 +4,8 @@ import { post } from '@libs/api';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
+import { isOAuthFlow, redirectToClient } from '@/utils/oAuth';
+
 export interface UserRegistrationInfo {
    nickname: string;
    password: string;
@@ -19,11 +21,11 @@ export const usePostSignup = (signupToken: string) => {
             password,
          }),
       onSuccess: () => {
-         if (searchParams.has('redirectUrl')) {
-            window.location.href = searchParams.get('redirectUrl') || '';
-            return;
+         if (isOAuthFlow(searchParams)) {
+            redirectToClient(searchParams);
+         } else {
+            navigate(ROUTES.LOGIN);
          }
-         navigate(ROUTES.LOGIN);
       },
    });
 };
diff --git a/src/utils/oAuth.ts b/src/utils/oAuth.ts
@@ -0,0 +1,9 @@
+const redirectToClient = (searchParams: URLSearchParams) => {
+   window.location.href = searchParams.get('redirectUri') || '';
+};
+
+const isOAuthFlow = (searchParams: URLSearchParams) => {
+   return searchParams.has('redirectUri');
+};
+
+export { redirectToClient, isOAuthFlow };