feat: 내비게이션 바 애니메이션 추가

frontend/src/components/@common/Navbar/index.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { Link, matchRoutes, useLocation, useNavigate } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 import { Button, Roof, Wrapper } from './Navbar.style';
-import { isShowPageLoadingState } from 'store/atoms/@common';
 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';
@@ -16,47 +15,16 @@ const NO_NAVIGATION_BAR_URLS = [
   URL_PATH.authorization,
 ].map((path) => ({ path }));
 
-const getRoofPosition = (pathname: string) => {
-  switch (pathname) {
-    case URL_PATH.main:
-      return 1;
-    case URL_PATH.garden:
-      return 2;
-    case URL_PATH.reminder:
-      return 3;
-    case URL_PATH.petList:
-      return 4;
-    case URL_PATH.myPage:
-      return 5;
-    default:
-      return null;
-  }
-};
-
 const Navbar = () => {
   const navigate = useNavigate();
   const { pathname, state } = useLocation();
-  const navBar = useRef<HTMLElement>(null);
-  const navItemPositions = useRef<number[]>([]);
-
-  const isPageLoading = useRecoilValue(isShowPageLoadingState);
 
   const addToast = useAddToast();
   const { isSuccess: isLoggedIn } = useCheckSessionId(false);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(([entry]) => {
-      navItemPositions.current = Array.from(entry.target.children)
-        .slice(0, -1)
-        .map((child) => {
-          const { left } = child.getBoundingClientRect();
-          return left;
-        });
-    });
-
-    if (navBar.current) resizeObserver.observe(navBar.current);
-    return () => resizeObserver.disconnect();
-  }, []);
+  const { navbarRef, roofPosition, transitionOffset } = useNavbarRoofAnimation(
+    state ? state.prevPathname ?? pathname : pathname,
+    pathname
+  );
 
   useEffect(() => {
     const resetHistoryState = () => history.replaceState(null, '');
@@ -78,48 +46,28 @@ const Navbar = () => {
     });
   };
 
-  const prevPathname = state ? state.prevPathname : pathname;
-
-  const isActive = (targetPathname: string) => {
-    if (isPageLoading) {
-      return targetPathname === prevPathname;
-    }
-    return targetPathname === pathname;
-  };
-
   const hideNavbar = matchRoutes(NO_NAVIGATION_BAR_URLS, pathname) !== null;
-
-  const prevRoofPosition = getRoofPosition(prevPathname);
-  const roofPosition = isPageLoading ? prevRoofPosition : getRoofPosition(pathname);
-
-  const transitionOffset =
-    roofPosition && prevRoofPosition
-      ? navItemPositions.current[prevRoofPosition - 1] - navItemPositions.current[roofPosition - 1]
-      : 0;
+  const newHistoryState = { prevPathname: pathname };
 
   return (
-    <Wrapper ref={navBar} $hide={hideNavbar}>
-      <Button as={Link} to={URL_PATH.main} state={{ prevPathname: pathname }}>
-        <NavItem isActive={isActive(URL_PATH.main)} iconId="home-line" label="메인" />
+    <Wrapper ref={navbarRef} $hide={hideNavbar}>
+      <Button as={Link} to={URL_PATH.main} state={newHistoryState}>
+        <NavItem isActive={roofPosition === 1} iconId="home-line" label="메인" />
       </Button>
-      <Button as={Link} to={URL_PATH.garden} state={{ prevPathname: pathname }}>
-        <NavItem
-          isActive={isActive(URL_PATH.garden)}
-          iconId="bulletin-board-line"
-          label="모두의 정원"
-        />
+      <Button as={Link} to={URL_PATH.garden} state={newHistoryState}>
+        <NavItem isActive={roofPosition === 2} iconId="bulletin-board-line" label="모두의 정원" />
       </Button>
       {isLoggedIn ? (
         <>
-          <Button as={Link} to={URL_PATH.reminder} state={{ prevPathname: pathname }}>
-            <NavItem isActive={isActive(URL_PATH.reminder)} iconId="reminder" label="리마인더" />
+          <Button as={Link} to={URL_PATH.reminder} state={newHistoryState}>
+            <NavItem isActive={roofPosition === 3} iconId="reminder" label="리마인더" />
           </Button>
-          <Button as={Link} to={URL_PATH.petList} state={{ prevPathname: pathname }}>
-            <NavItem isActive={isActive(URL_PATH.petList)} iconId="leaf" label="내 식물" />
+          <Button as={Link} to={URL_PATH.petList} state={newHistoryState}>
+            <NavItem isActive={roofPosition === 4} iconId="leaf" label="내 식물" />
           </Button>
-          <Button as={Link} to={URL_PATH.myPage} state={{ prevPathname: pathname }}>
+          <Button as={Link} to={URL_PATH.myPage} state={newHistoryState}>
             <NavItem
-              isActive={isActive(URL_PATH.myPage)}
+              isActive={roofPosition === 5}
               iconId="account-circle-line"
               label="마이페이지"
             />
@@ -128,17 +76,13 @@ const Navbar = () => {
       ) : (
         <>
           <Button type="button" onClick={askLogin}>
-            <NavItem isActive={isActive(URL_PATH.reminder)} iconId="reminder" label="리마인더" />
+            <NavItem isActive={false} iconId="reminder" label="리마인더" />
           </Button>
           <Button type="button" onClick={askLogin}>
-            <NavItem isActive={isActive(URL_PATH.petList)} iconId="leaf" label="내 식물" />
+            <NavItem isActive={false} iconId="leaf" label="내 식물" />
           </Button>
-          <Button as={Link} to={URL_PATH.login} state={{ prevPathname: pathname }}>
-            <NavItem
-              isActive={isActive(URL_PATH.login)}
-              iconId="account-circle-line"
-              label="로그인"
-            />
+          <Button as={Link} to={URL_PATH.login} state={newHistoryState}>
+            <NavItem isActive={false} iconId="account-circle-line" label="로그인" />
           </Button>
         </>
       )}

frontend/src/hooks/@common/useChildrenLeftPositions.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+const useChildrenLeftPositions = <T extends HTMLElement>(domRef: React.RefObject<T>) => {
+  const childrenPositions = useRef<number[]>([]);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      childrenPositions.current = Array.from(entry.target.children).map(
+        (child) => child.getBoundingClientRect().left
+      );
+    });
+
+    if (domRef.current) resizeObserver.observe(domRef.current);
+    return () => resizeObserver.disconnect();
+  }, [domRef]);
+
+  return childrenPositions.current;
+};
+
+export default useChildrenLeftPositions;

frontend/src/hooks/@common/useNavbarRoofAnimation.ts

@@ -0,0 +1,50 @@
+import { useRef } from 'react';
+import { useRecoilValue } from 'recoil';
+import { isShowPageLoadingState } from 'store/atoms/@common';
+import { URL_PATH } from 'constants/index';
+import useChildrenLeftPositions from './useChildrenLeftPositions';
+
+const getRoofPosition = (pathname: string) => {
+  switch (pathname) {
+    case URL_PATH.main:
+      return 1;
+    case URL_PATH.garden:
+      return 2;
+    case URL_PATH.reminder:
+      return 3;
+    case URL_PATH.petList:
+      return 4;
+    case URL_PATH.myPage:
+      return 5;
+    default:
+      return null;
+  }
+};
+
+const getAnimationOffset = (prevPathname: string, currentPathname: string, positions: number[]) => {
+  const prevRoofPosition = getRoofPosition(prevPathname);
+  const roofPosition = getRoofPosition(currentPathname);
+
+  const transitionOffset =
+    roofPosition && prevRoofPosition
+      ? positions[prevRoofPosition - 1] - positions[roofPosition - 1]
+      : 0;
+
+  return transitionOffset !== 0 ? transitionOffset + Math.random() : 0;
+};
+
+const useNavbarRoofAnimation = (prevPathname: string, currentPathname: string) => {
+  const navbarRef = useRef<HTMLElement>(null);
+  const isPageLoading = useRecoilValue(isShowPageLoadingState);
+
+  const navItemPositions = useChildrenLeftPositions(navbarRef);
+
+  const roofPosition = getRoofPosition(isPageLoading ? prevPathname : currentPathname);
+  const transitionOffset = !isPageLoading
+    ? getAnimationOffset(prevPathname, currentPathname, navItemPositions)
+    : 0;
+
+  return { navbarRef, roofPosition, transitionOffset };
+};
+
+export default useNavbarRoofAnimation;

frontend/src/pages/auth/MyPage/index.tsx

@@ -1,5 +1,6 @@
 import { FixedButtonArea } from 'pages/garden/GardenPostList/GardenPostList.style';
 import ContentHeader from 'components/@common/ContentHeader';
+import Footer from 'components/@common/Footer';
 import PageLogger from 'components/@common/PageLogger';
 import SvgFill from 'components/@common/SvgIcons/SvgFill';
 import Toggle from 'components/@common/Toggle';
@@ -75,6 +76,7 @@ const MyPage = () => {
           </Button>
         </ButtonBox>
       </Main>
+      <Footer />
       <FixedButtonArea>
         <BottomSheet to="https://forms.gle/rQUAi9GbVwrr7oG2A" target="blank">
           <SvgFill icon="survey" color={theme.color.background} size={16} />