feat: 예약 화면에서 로그인 후, 예약 화면으로 바로 돌아가는 기능 구현 (#988)

woowacourse-teams · Apr 4, 2024 · 3ee3264 · 3ee3264
1 parent 20e8560
commit 3ee3264
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 18 deletions.
diff --git a/frontend/src/components/SocialAuthButton/SocialAuthButton.styles.ts b/frontend/src/components/SocialAuthButton/SocialAuthButton.styles.ts
@@ -27,7 +27,7 @@ const buttonCSS = css`
   border-radius: 0.125rem;
 `;
 
-export const SocialLoginButton = styled.a<LoginButtonProps>`
+export const SocialLoginButton = styled.button<LoginButtonProps>`
   ${({ provider }) => providerCSS[provider]}
   ${buttonCSS};
   width: ${({ variant }) => (variant === 'icon' ? '52px' : '100%')};

diff --git a/frontend/src/components/SocialAuthButton/SocialLoginButton.tsx b/frontend/src/components/SocialAuthButton/SocialLoginButton.tsx
@@ -1,9 +1,9 @@
-import { AnchorHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 import { ReactComponent as GithubIcon } from 'assets/svg/github-logo.svg';
 import { ReactComponent as GoogleIcon } from 'assets/svg/google-logo.svg';
 import * as Styled from './SocialAuthButton.styles';
 
-export interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   provider: 'GITHUB' | 'GOOGLE';
   variant?: 'default' | 'icon';
 }
@@ -21,7 +21,7 @@ const social = {
 
 const SocialLoginButton = ({ provider, variant = 'default', ...props }: Props): JSX.Element => {
   return (
-    <Styled.SocialLoginButton provider={provider} variant={variant} {...props}>
+    <Styled.SocialLoginButton {...props} type="button" provider={provider} variant={variant}>
       <Styled.Icon>{social[provider].icon}</Styled.Icon>
       {variant === 'default' && <Styled.Text>{social[provider].text}</Styled.Text>}
     </Styled.SocialLoginButton>

diff --git a/frontend/src/constants/storage.ts b/frontend/src/constants/storage.ts
@@ -1,3 +1,4 @@
 export const LOCAL_STORAGE_KEY = {
   ACCESS_TOKEN: 'accessToken',
+  AFTER_LOGIN_PATH: 'afterLoginPath',
 };
diff --git a/frontend/src/pages/GuestMap/units/LoginPopup.tsx b/frontend/src/pages/GuestMap/units/LoginPopup.tsx
@@ -1,7 +1,7 @@
 import { AxiosError, AxiosResponse } from 'axios';
 import { useContext, useState } from 'react';
 import { useMutation } from 'react-query';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { postLogin } from 'api/login';
 import Button from 'components/Button/Button';
 import Input from 'components/Input/Input';
@@ -10,9 +10,11 @@ import SocialLoginButton from 'components/SocialAuthButton/SocialLoginButton';
 import MANAGER from 'constants/manager';
 import MESSAGE from 'constants/message';
 import PATH from 'constants/path';
+import { LOCAL_STORAGE_KEY } from 'constants/storage';
 import useInputs from 'hooks/useInputs';
 import { AccessTokenContext } from 'providers/AccessTokenProvider';
 import { ErrorResponse, LoginSuccess } from 'types/response';
+import { setLocalStorageItem } from 'utils/localStorage';
 import * as Styled from './LoginPopup.styles';
 
 interface LoginPopupProps {
@@ -25,6 +27,7 @@ const LoginPopup = ({ open, onClose, onLogin }: LoginPopupProps): JSX.Element =>
   const { setAccessToken } = useContext(AccessTokenContext);
 
   const history = useHistory();
+  const location = useLocation();
 
   const [{ email, password }, onChangeForm, setValues] = useInputs<{
     email: string;
@@ -109,16 +112,36 @@ const LoginPopup = ({ open, onClose, onLogin }: LoginPopupProps): JSX.Element =>
               variant="inverse"
               size="medium"
               fullWidth
-              onClick={() => history.push('/join')}
+              onClick={() => history.push(PATH.MANAGER_JOIN)}
             >
               회원가입
             </Button>
           </Styled.LoginFormButtonWrapper>
         </Styled.LoginPopupForm>
         <Styled.Line />
         <Styled.SocialLoginButtonWrapper>
-          <SocialLoginButton provider="GITHUB" variant="icon" href={PATH.GITHUB_LOGIN} />
-          <SocialLoginButton provider="GOOGLE" variant="icon" href={PATH.GOOGLE_LOGIN} />
+          <SocialLoginButton
+            provider="GITHUB"
+            variant="icon"
+            onClick={() => {
+              setLocalStorageItem({
+                key: LOCAL_STORAGE_KEY.AFTER_LOGIN_PATH,
+                item: location.pathname,
+              });
+              window.location.href = PATH.GITHUB_LOGIN;
+            }}
+          />
+          <SocialLoginButton
+            provider="GOOGLE"
+            variant="icon"
+            onClick={() => {
+              setLocalStorageItem({
+                key: LOCAL_STORAGE_KEY.AFTER_LOGIN_PATH,
+                item: location.pathname,
+              });
+              window.location.href = PATH.GOOGLE_LOGIN;
+            }}
+          />
         </Styled.SocialLoginButtonWrapper>
         <Styled.ContinueWithNonMemberWrapper>
           <Styled.ContinueWithNonMember onClick={onClose}>

diff --git a/frontend/src/pages/Login/Login.tsx b/frontend/src/pages/Login/Login.tsx
@@ -80,8 +80,18 @@ const Login = (): JSX.Element => {
           <LoginForm errorMessage={errorMessage} onSubmit={handleSubmit} />
           <Styled.HorizontalLine />
           <Styled.SocialLogin>
-            <SocialLoginButton provider="GITHUB" href={PATH.GITHUB_LOGIN} />
-            <SocialLoginButton provider="GOOGLE" href={PATH.GOOGLE_LOGIN} />
+            <SocialLoginButton
+              provider="GITHUB"
+              onClick={() => {
+                window.location.href = PATH.GITHUB_LOGIN;
+              }}
+            />
+            <SocialLoginButton
+              provider="GOOGLE"
+              onClick={() => {
+                window.location.href = PATH.GOOGLE_LOGIN;
+              }}
+            />
           </Styled.SocialLogin>
           <Styled.JoinLinkMessage>
             아직 회원이 아니신가요?

diff --git a/frontend/src/pages/OAuthRedirect/GithubOAuthRedirect.tsx b/frontend/src/pages/OAuthRedirect/GithubOAuthRedirect.tsx
@@ -3,10 +3,12 @@ import { useContext } from 'react';
 import { useHistory } from 'react-router';
 import MESSAGE from 'constants/message';
 import PATH from 'constants/path';
+import { LOCAL_STORAGE_KEY } from 'constants/storage';
 import useGithubLogin from 'hooks/query/useGithubLogin';
 import useQueryString from 'hooks/useQueryString';
 import { AccessTokenContext } from 'providers/AccessTokenProvider';
 import { LoginSuccess, SocialLoginFailure } from 'types/response';
+import { getLocalStorageItem, removeLocalStorageItem } from 'utils/localStorage';
 
 const GithubOAuthRedirect = (): JSX.Element => {
   const history = useHistory();
@@ -23,7 +25,12 @@ const GithubOAuthRedirect = (): JSX.Element => {
 
         setAccessToken(accessToken);
 
-        history.replace(PATH.GUEST_MAIN);
+        const afterLoginPath = getLocalStorageItem({
+          key: LOCAL_STORAGE_KEY.AFTER_LOGIN_PATH,
+          defaultValue: PATH.GUEST_MAIN,
+        });
+
+        history.replace(afterLoginPath);
       },
 
       onError: (error: AxiosError<SocialLoginFailure>) => {
@@ -41,7 +48,16 @@ const GithubOAuthRedirect = (): JSX.Element => {
 
         alert(error.response?.data.message ?? MESSAGE.LOGIN.UNEXPECTED_ERROR);
 
-        history.replace(PATH.LOGIN);
+        const afterLoginPath = getLocalStorageItem({
+          key: LOCAL_STORAGE_KEY.AFTER_LOGIN_PATH,
+          defaultValue: PATH.LOGIN,
+        });
+
+        history.replace(afterLoginPath);
+      },
+
+      onSettled: () => {
+        removeLocalStorageItem({ key: LOCAL_STORAGE_KEY.AFTER_LOGIN_PATH });
       },
     }
   );

diff --git a/frontend/src/pages/OAuthRedirect/GoogleOAuthRedirect.tsx b/frontend/src/pages/OAuthRedirect/GoogleOAuthRedirect.tsx
@@ -3,10 +3,12 @@ import { useContext } from 'react';
 import { useHistory } from 'react-router';
 import MESSAGE from 'constants/message';
 import PATH from 'constants/path';
+import { LOCAL_STORAGE_KEY } from 'constants/storage';
 import useGoogleLogin from 'hooks/query/useGoogleLogin';
 import useQueryString from 'hooks/useQueryString';
 import { AccessTokenContext } from 'providers/AccessTokenProvider';
 import { LoginSuccess, SocialLoginFailure } from 'types/response';
+import { getLocalStorageItem, removeLocalStorageItem } from 'utils/localStorage';
 
 const GoogleOAuthRedirect = (): JSX.Element => {
   const history = useHistory();
@@ -23,7 +25,12 @@ const GoogleOAuthRedirect = (): JSX.Element => {
 
         setAccessToken(accessToken);
 
-        history.replace(PATH.GUEST_MAIN);
+        const afterLoginPath = getLocalStorageItem({
+          key: LOCAL_STORAGE_KEY.AFTER_LOGIN_PATH,
+          defaultValue: PATH.GUEST_MAIN,
+        });
+
+        history.replace(afterLoginPath);
       },
 
       onError: (error: AxiosError<SocialLoginFailure>) => {
@@ -41,7 +48,16 @@ const GoogleOAuthRedirect = (): JSX.Element => {
 
         alert(error.response?.data.message ?? MESSAGE.LOGIN.UNEXPECTED_ERROR);
 
-        history.replace(PATH.LOGIN);
+        const afterLoginPath = getLocalStorageItem({
+          key: LOCAL_STORAGE_KEY.AFTER_LOGIN_PATH,
+          defaultValue: PATH.LOGIN,
+        });
+
+        history.replace(afterLoginPath);
+      },
+
+      onSettled: () => {
+        removeLocalStorageItem({ key: LOCAL_STORAGE_KEY.AFTER_LOGIN_PATH });
       },
     }
   );

diff --git a/frontend/src/utils/localStorage.ts b/frontend/src/utils/localStorage.ts
@@ -1,20 +1,20 @@
 import THROW_ERROR from 'constants/throwError';
 
-export const getLocalStorageItem = ({
+export const getLocalStorageItem = <T = unknown>({
   key,
   defaultValue,
 }: {
   key: string;
-  defaultValue: unknown;
-}): unknown => {
+  defaultValue: T;
+}): T => {
   const storedData = localStorage.getItem(key);
 
   if (!storedData) {
     return defaultValue;
   }
 
   try {
-    return JSON.parse(storedData);
+    return JSON.parse(storedData) as T;
   } catch {
     throw new Error(THROW_ERROR.NOT_JSON_FORMAT);
   }