From be3baeb9a683ddbaf3f7c4e16383b05d7cc4086d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=99=A9=EC=A4=80=EC=8A=B9?= <78203399+turtle601@users.noreply.github.com> Date: Tue, 26 Sep 2023 13:34:06 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=8B=9C?= =?UTF-8?q?=20=EC=9D=B4=EC=A0=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?= =?UTF-8?q?=EB=8B=A4=EC=8B=9C=20=EA=B0=80=EA=B2=8C=20=ED=95=98=EA=B8=B0=20?= =?UTF-8?q?(#524)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 로그인 하기 전 url 정보를 저장하는 전역 상태 구현 (#518) * fix: 로그인 모달 상태와 페이지 상태 분기 처리 (#518) --- .../@common/LoginButton/LoginButton.tsx | 8 +++++- .../LoginErrorHandleComponent.tsx | 5 ++-- .../components/BottomNavBar/UserButton.tsx | 5 ++-- frontend/src/hooks/store/usePathnameState.ts | 25 +++++++++++++++++++ .../src/mocks/handler/mainPage/handler.ts | 1 - frontend/src/pages/OauthRedirectPage.tsx | 6 +++-- 6 files changed, 42 insertions(+), 8 deletions(-) create mode 100644 frontend/src/hooks/store/usePathnameState.ts diff --git a/frontend/src/components/@common/LoginButton/LoginButton.tsx b/frontend/src/components/@common/LoginButton/LoginButton.tsx index 33b6c98e5..0461dfa6b 100644 --- a/frontend/src/components/@common/LoginButton/LoginButton.tsx +++ b/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 = { }; 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'; diff --git a/frontend/src/components/@common/LoginErrorHandleComponent/LoginErrorHandleComponent.tsx b/frontend/src/components/@common/LoginErrorHandleComponent/LoginErrorHandleComponent.tsx index 481e3d078..e71a1b698 100644 --- a/frontend/src/components/@common/LoginErrorHandleComponent/LoginErrorHandleComponent.tsx +++ b/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({ queryKey: ['profile'], @@ -19,7 +20,7 @@ function LoginErrorHandleComponent({ children }: LoginErrorHandleComponentProps) useEffect(() => { if (!isFetching && !isSuccess) { - navigator('/signUp'); + navigator('/signUp', { state: { from: pathname } }); } }, [isFetching, isSuccess]); diff --git a/frontend/src/components/BottomNavBar/UserButton.tsx b/frontend/src/components/BottomNavBar/UserButton.tsx index a75efcd93..f9bcea38d 100644 --- a/frontend/src/components/BottomNavBar/UserButton.tsx +++ b/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({ queryKey: ['profile'], queryFn: () => getProfile(), }); - const clickLogin = () => navigator('/signUp'); + const clickLogin = () => navigator('/signUp', { state: { from: location.pathname } }); const clickLogout = () => { getLogout(profile.oauthServer); diff --git a/frontend/src/hooks/store/usePathnameState.ts b/frontend/src/hooks/store/usePathnameState.ts new file mode 100644 index 000000000..91b4fbf36 --- /dev/null +++ b/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( + set => ({ + path: '/', + setPath: (path: string) => set({ path }), + }), + { + name: 'CELUVEAT-PATHNAME-STORAGE', + storage: createJSONStorage(() => sessionStorage), + }, + ), +); + +export default usePathNameState; diff --git a/frontend/src/mocks/handler/mainPage/handler.ts b/frontend/src/mocks/handler/mainPage/handler.ts index 1093c6a80..db7b38b3e 100644 --- a/frontend/src/mocks/handler/mainPage/handler.ts +++ b/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)); }), diff --git a/frontend/src/pages/OauthRedirectPage.tsx b/frontend/src/pages/OauthRedirectPage.tsx index 573555a8d..6a3182331 100644 --- a/frontend/src/pages/OauthRedirectPage.tsx +++ b/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,6 +13,7 @@ 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'); @@ -19,7 +21,7 @@ function OauthRedirectPage({ type }: OauthRedirectProps) { 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); }); } }, []);