fix: 로그인 시 이전 페이지로 다시 가게 하기 (#524)

* feat: 로그인 하기 전 url 정보를 저장하는 전역 상태 구현 (#518)

* fix: 로그인 모달 상태와 페이지 상태 분기 처리 (#518)

frontend/src/components/@common/LoginButton/LoginButton.tsx

@@ -1,5 +1,5 @@
 import { styled, css } from 'styled-components';
-import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { OAUTH_BUTTON_MESSAGE, OAUTH_LINK } from '~/constants/api';
 
 import KaKao from '~/assets/icons/oauth/kakao.svg';
@@ -8,6 +8,7 @@ import Google from '~/assets/icons/oauth/google.svg';
 import { Oauth } from '~/@types/oauth.types';
 
 import { FONT_SIZE } from '~/styles/common';
+import usePathNameState from '~/hooks/store/usePathnameState';
 
 interface LoginButtonProps {
   type: Oauth;
@@ -20,7 +21,12 @@ const LoginIcon: Record<string, React.ReactNode> = {
 };
 
 function LoginButton({ type }: LoginButtonProps) {
+  const location = useLocation();
+  const setPath = usePathNameState(state => state.setPath);
+
   const onClick = () => {
+    setPath(location.pathname === '/signUp' ? location.state.from : location.pathname);
+
     if (process.env.NODE_ENV === 'development') {
       window.location.href = 'https://d.api.celuveat.com/login/local?id=abc';
       window.location.href = '/oauth/redirect/kakao?code=12312421';

frontend/src/components/@common/LoginErrorHandleComponent/LoginErrorHandleComponent.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { ProfileData } from '~/@types/api.types';
 import { getProfile } from '~/api/user';
 
@@ -10,6 +10,7 @@ interface LoginErrorHandleComponentProps {
 
 function LoginErrorHandleComponent({ children }: LoginErrorHandleComponentProps) {
   const navigator = useNavigate();
+  const { pathname } = useLocation();
 
   const { isLoading, isFetching, isSuccess } = useQuery<ProfileData>({
     queryKey: ['profile'],
@@ -19,7 +20,7 @@ function LoginErrorHandleComponent({ children }: LoginErrorHandleComponentProps)
 
   useEffect(() => {
     if (!isFetching && !isSuccess) {
-      navigator('/signUp');
+      navigator('/signUp', { state: { from: pathname } });
     }
   }, [isFetching, isSuccess]);
 

frontend/src/components/BottomNavBar/UserButton.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 import UserIcon from '~/assets/icons/etc/user.svg';
 import ProfileImage from '../@common/ProfileImage';
@@ -9,12 +9,13 @@ import type { ProfileData } from '~/@types/api.types';
 
 function UserButton() {
   const navigator = useNavigate();
+  const location = useLocation();
   const { data: profile, isSuccess: isLogin } = useQuery<ProfileData>({
     queryKey: ['profile'],
     queryFn: () => getProfile(),
   });
 
-  const clickLogin = () => navigator('/signUp');
+  const clickLogin = () => navigator('/signUp', { state: { from: location.pathname } });
 
   const clickLogout = () => {
     getLogout(profile.oauthServer);

frontend/src/hooks/store/usePathnameState.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+interface PathState {
+  path: string;
+}
+
+interface PathAction {
+  setPath: (path: string) => void;
+}
+
+const usePathNameState = create(
+  persist<PathState & PathAction>(
+    set => ({
+      path: '/',
+      setPath: (path: string) => set({ path }),
+    }),
+    {
+      name: 'CELUVEAT-PATHNAME-STORAGE',
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);
+
+export default usePathNameState;

frontend/src/mocks/handler/mainPage/handler.ts

@@ -86,7 +86,6 @@ export const MainPageSuccessHandler = [
     const currentDate = new Date();
     const sixHoursInMilliseconds = 6 * 60 * 60 * 1000;
     const expirationDate = new Date(currentDate.getTime() + sixHoursInMilliseconds);
-    window.location.href = '/';
 
     return res(ctx.cookie('JSESSION', `${code}`, { expires: expirationDate }), ctx.status(200));
   }),

frontend/src/pages/OauthRedirectPage.tsx

@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { getAccessToken } from '~/api/user';
 import LoadingIndicator from '~/components/@common/LoadingIndicator';
+import usePathNameState from '~/hooks/store/usePathnameState';
 
 interface OauthRedirectProps {
   type: 'google' | 'kakao' | 'naver';
@@ -12,14 +13,15 @@ interface OauthRedirectProps {
 function OauthRedirectPage({ type }: OauthRedirectProps) {
   const location = useLocation();
   const navigator = useNavigate();
+  const path = usePathNameState(state => state.path);
 
   const searchParams = new URLSearchParams(location.search);
   const code = searchParams.get('code');
 
   const oauthTokenMutation = useMutation({
     mutationFn: () => getAccessToken(type, code),
     onSuccess: () => {
-      navigator('/');
+      navigator(path);
     },
     onError: () => {
       navigator('/');
@@ -40,7 +42,7 @@ function OauthRedirectPage({ type }: OauthRedirectProps) {
           throw new Error('Network response was not ok');
         }
 
-        navigator('/');
+        navigator(path);
       });
     }
   }, []);