fix: 내비게이션 바 버그 수정 (#450)

* fix: 버그 수정 * fix: navbar 조건부 렌더링으로 변경 * refactor: 로그인, 로그아웃 시에 query chache 초기화 * design: navbar 등장 애니메이션 --------- Co-authored-by: hozzijeong <[email protected]>
woowacourse-teams · Oct 20, 2023 · 06a6317 · 06a6317
1 parent c33bd73
commit 06a6317
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 22 deletions.
diff --git 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
@@ -1,31 +1,24 @@
 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';
 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 (
-    <Wrapper ref={navbarRef} $hide={hideNavbar}>
+    <Wrapper ref={navbarRef}>
       <Button as={Link} to={URL_PATH.main} state={newHistoryState}>
         <NavItem isActive={roofPosition === 1} iconId="home-line" label="메인" />
       </Button>

diff --git 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<null, Error, string>({
     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
@@ -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
@@ -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 (
     <Wrapper>
       <PageArea>
@@ -27,7 +38,7 @@ const RootTemplate = () => {
             <Suspense fallback={<LastPageLoading />}>
               <Outlet />
             </Suspense>
-            <Navbar />
+            {showNavBar && <Navbar />}
           </ErrorBoundary>
         </ErrorBoundary>
       </PageArea>