[#124] refactor: HeaderMenu 컴포넌트 애니메이션 추가

Author: skid901

frontend/package-lock.json

@@ -23,6 +23,7 @@
     "react-app-rewired": "^2.1.6",
     "react-dom": "^17.0.1",
     "react-scripts": "^4.0.1",
+    "react-spring": "^8.0.27",
     "recoil": "^0.1.2",
     "typescript": "^4.1.2",
     "web-vitals": "^0.2.4"

frontend/package.json

@@ -8,12 +8,15 @@ const buttonCss = (): SerializedStyles => css`
   user-select: none;
   cursor: pointer;
   color: inherit;
-  minwidth: 0px;
+  min-width: 0px;
   padding: 6px;
   margin: auto;
   white-space: nowrap;
   border-radius: 3px;
   font-size: inherit;
+  border: 0;
+  outline: 0;
+
   &:hover {
     background-color: #cccccc;
   }

frontend/src/components/atoms/HeaderButton/HeaderButton.tsx

@@ -1,15 +1,17 @@
 /** @jsx jsx */
 /** @jsxRuntime classic */
 import { jsx, css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
+import { animated, useSpring, useTransition } from 'react-spring';
 
 import { HeaderButton } from '@components/atoms';
 import { ReactComponent as HamburgerMenu } from '@assets/hamburgerMenu.svg';
 import { ReactComponent as DoubleChevronRight } from '@assets/doubleChevronRight.svg';
 import { hoveredMenuToggleState, staticMenuToggleState } from '@/stores';
 import { Menu } from '@molecules/index';
 
-const wrapperCss = () => css`
+const wrapperCss = css`
   position: relative;
   display: flex;
   align-items: center;
@@ -21,20 +23,17 @@ const wrapperCss = () => css`
   margin-right: 8px;
   min-width: 0;
 `;
-const hoverAreaCss = () => css`
+const hoverAreaCss = css`
   position: absolute;
   display: inline-block;
   top: 45px;
   left: 0;
   width: 100%;
   height: 100vh;
 `;
-const menuCss = (staticMenuToggle: boolean) => css`
+const AnimatedMenu = styled(animated.div)`
   position: absolute;
   display: inline-block;
-  top: ${staticMenuToggle ? 0 : 50}px;
-  left: 0;
-  margin-top: ${staticMenuToggle ? 0 : 10}px;
 `;
 
 function HeaderMenu(): JSX.Element {
@@ -44,23 +43,27 @@ function HeaderMenu(): JSX.Element {
   const [hoveredMenuToggle, setHoveredMenuToggle] = useRecoilState(
     hoveredMenuToggleState,
   );
+  const menuStyleProps = useSpring({
+    top: staticMenuToggle ? 0 : 50,
+    left: hoveredMenuToggle || staticMenuToggle ? 0 : -240,
+    opacity: hoveredMenuToggle || staticMenuToggle ? 1 : 0,
+    marginTop: staticMenuToggle ? 0 : 10,
+  });
 
   return (
     <div
-      css={wrapperCss()}
+      css={wrapperCss}
       onMouseEnter={() => setHoveredMenuToggle(true)}
       onMouseLeave={() => setHoveredMenuToggle(false)}
     >
       <HeaderButton clickHandler={() => setStaticMenuToggle(!staticMenuToggle)}>
         {staticMenuToggle ||
           (!hoveredMenuToggle ? <HamburgerMenu /> : <DoubleChevronRight />)}
       </HeaderButton>
-      <div css={hoverAreaCss()} />
-      {(staticMenuToggle || hoveredMenuToggle) && (
-        <div css={menuCss(staticMenuToggle)}>
-          <Menu />
-        </div>
-      )}
+      <div css={hoverAreaCss} />
+      <AnimatedMenu style={menuStyleProps}>
+        <Menu />
+      </AnimatedMenu>
     </div>
   );
 }