From 06a6317794e1476a58e2ab7fdba39387ddcb9b39 Mon Sep 17 00:00:00 2001 From: Q Kim Date: Thu, 19 Oct 2023 18:22:27 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=82=B4=EB=B9=84=EA=B2=8C=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EB=B0=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20(#450)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 버그 수정 * fix: navbar 조건부 렌더링으로 변경 * refactor: 로그인, 로그아웃 시에 query chache 초기화 * design: navbar 등장 애니메이션 --------- Co-authored-by: hozzijeong --- .../components/@common/Navbar/Navbar.style.ts | 19 +++++++++++++------ .../src/components/@common/Navbar/index.tsx | 16 ++++------------ frontend/src/hooks/queries/auth/useLogin.ts | 8 +++++++- .../src/hooks/queries/auth/useWithdraw.ts | 8 +++++++- .../src/pages/@common/RootTemplate/index.tsx | 15 +++++++++++++-- 5 files changed, 44 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/@common/Navbar/Navbar.style.ts b/frontend/src/components/@common/Navbar/Navbar.style.ts index 0971e51b9..67cb3e17e 100644 --- a/frontend/src/components/@common/Navbar/Navbar.style.ts +++ b/frontend/src/components/@common/Navbar/Navbar.style.ts @@ -1,6 +1,11 @@ import { keyframes, styled } from 'styled-components'; -export const Wrapper = styled.nav<{ $hide: boolean }>` +const appear = keyframes` + from { transform: translateY(100%) } + to { transform: translateY(0) } +`; + +export const Wrapper = styled.nav` position: fixed; z-index: ${(props) => props.theme.zIndex.fixed}; bottom: 0; @@ -18,13 +23,12 @@ export const Wrapper = styled.nav<{ $hide: boolean }>` background: white; box-shadow: 0 -1px 1px -1px ${(props) => props.theme.color.subLight}; - transform: translateY(${({ $hide }) => ($hide ? '60px' : '0')}); - transition: transform 0.3s ease-out; + animation: ${appear} 0.3s ease-out; `; export const Button = styled.button` - height: 100%; grid-row-start: 2; + height: 100%; `; const move = (offset: number) => keyframes` @@ -33,9 +37,12 @@ const move = (offset: number) => keyframes` `; export const Roof = styled.div<{ $position: number; $transitionOffset: number }>` - height: 2px; - grid-row-start: 1; grid-column-start: ${({ $position }) => $position}; + grid-row-start: 1; + + height: 2px; + background-color: ${({ theme: { color } }) => color.fontPrimaryForBackground}; + animation: ${({ $transitionOffset }) => move($transitionOffset)} 0.3s ease-out; `; diff --git a/frontend/src/components/@common/Navbar/index.tsx b/frontend/src/components/@common/Navbar/index.tsx index f75bd0802..fef612038 100644 --- a/frontend/src/components/@common/Navbar/index.tsx +++ b/frontend/src/components/@common/Navbar/index.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { Link, matchRoutes, useLocation, useNavigate } from 'react-router-dom'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; import { Button, Roof, Wrapper } from './Navbar.style'; import useAddToast from 'hooks/@common/useAddToast'; import useNavbarRoofAnimation from 'hooks/@common/useNavbarRoofAnimation'; @@ -7,25 +7,18 @@ import useCheckSessionId from 'hooks/queries/auth/useCheckSessionId'; import { URL_PATH } from 'constants/index'; import NavItem from './NavItem'; -const NO_NAVIGATION_BAR_URLS = [ - URL_PATH.petRegisterForm, - URL_PATH.dictDetail, - URL_PATH.petEdit, - URL_PATH.login, - URL_PATH.authorization, -].map((path) => ({ path })); - const Navbar = () => { const navigate = useNavigate(); const { pathname, state } = useLocation(); const addToast = useAddToast(); - const { isSuccess: isLoggedIn } = useCheckSessionId(false); const { navbarRef, roofPosition, transitionOffset } = useNavbarRoofAnimation( state ? state.prevPathname ?? pathname : pathname, pathname ); + const { isSuccess: isLoggedIn } = useCheckSessionId(false); + useEffect(() => { const resetHistoryState = () => history.replaceState(null, ''); window.addEventListener('beforeunload', resetHistoryState); @@ -46,11 +39,10 @@ const Navbar = () => { }); }; - const hideNavbar = matchRoutes(NO_NAVIGATION_BAR_URLS, pathname) !== null; const newHistoryState = { prevPathname: pathname }; return ( - + diff --git a/frontend/src/hooks/queries/auth/useLogin.ts b/frontend/src/hooks/queries/auth/useLogin.ts index 2ad77e7c6..8a6144fa0 100644 --- a/frontend/src/hooks/queries/auth/useLogin.ts +++ b/frontend/src/hooks/queries/auth/useLogin.ts @@ -1,4 +1,4 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useNavigate } from 'react-router-dom'; import useAddToast from 'hooks/@common/useAddToast'; import AuthAPI from 'apis/auth'; @@ -9,6 +9,8 @@ const useLogin = () => { const navigation = useNavigate(); const addToast = useAddToast(); + const queryClient = useQueryClient(); + return useMutation({ mutationFn: async (code: string) => { const response = await AuthAPI.getSessionId(code); @@ -25,6 +27,10 @@ const useLogin = () => { addToast({ type: 'error', message: error.message, time: 3000 }); navigation(URL_PATH.login, { replace: true }); }, + + onMutate: () => { + queryClient.invalidateQueries({ queryKey: ['checkSessionId'] }); + }, }); }; diff --git a/frontend/src/hooks/queries/auth/useWithdraw.ts b/frontend/src/hooks/queries/auth/useWithdraw.ts index ddaa3c670..ff550b492 100644 --- a/frontend/src/hooks/queries/auth/useWithdraw.ts +++ b/frontend/src/hooks/queries/auth/useWithdraw.ts @@ -1,4 +1,4 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useNavigate } from 'react-router-dom'; import useAddToast from 'hooks/@common/useAddToast'; import AuthAPI from 'apis/auth'; @@ -10,6 +10,8 @@ const useWithdraw = () => { const navigate = useNavigate(); const addToast = useAddToast(); + const queryClient = useQueryClient(); + return useMutation({ mutationFn: async () => { const response = await AuthAPI.withdraw(); @@ -21,6 +23,10 @@ const useWithdraw = () => { navigate(URL_PATH.main, { replace: true }); }, + onSettled: () => { + queryClient.invalidateQueries({ queryKey: ['checkSessionId'] }); + }, + throwOnError: true, retry: noRetryIfUnauthorized, }); diff --git a/frontend/src/pages/@common/RootTemplate/index.tsx b/frontend/src/pages/@common/RootTemplate/index.tsx index 82fc7a568..1069fab09 100644 --- a/frontend/src/pages/@common/RootTemplate/index.tsx +++ b/frontend/src/pages/@common/RootTemplate/index.tsx @@ -1,5 +1,5 @@ import { Suspense } from 'react'; -import { Outlet } from 'react-router-dom'; +import { Outlet, matchRoutes, useLocation } from 'react-router-dom'; import NotFound from 'pages/@common/Error/NotFound'; import LastPageLoading from 'pages/@common/LastPageLoading'; import ErrorBoundary from 'components/@common/ErrorBoundary'; @@ -8,7 +8,18 @@ import Redirect from 'components/@common/Redirect'; import { PageArea, Wrapper } from './RootTemplate.style'; import { GUIDE, URL_PATH } from 'constants/index'; +const NO_NAVIGATION_BAR_URLS = [ + URL_PATH.petRegisterForm, + URL_PATH.dictDetail, + URL_PATH.petEdit, + URL_PATH.login, + URL_PATH.authorization, +].map((path) => ({ path })); const RootTemplate = () => { + const { pathname } = useLocation(); + + const showNavBar = matchRoutes(NO_NAVIGATION_BAR_URLS, pathname) === null; + return ( @@ -27,7 +38,7 @@ const RootTemplate = () => { }> - + {showNavBar && }