[#124] refactor: Menu 내 버튼 애니메이션 추가

boostcamp-2020 · Dec 16, 2020 · 07e0b49 · 07e0b49
1 parent 8485558
commit 07e0b49
Showing 1 changed file with 26 additions and 23 deletions.
diff --git a/frontend/src/components/molecules/Menu/Menu.tsx b/frontend/src/components/molecules/Menu/Menu.tsx
@@ -16,6 +16,8 @@ import { HeaderButton } from '@atoms/index';
 import { ReactComponent as DoubleChevronLeft } from '@assets/doubleChevronLeft.svg';
 import { ReactComponent as PlusPage } from '@assets/plusPage.svg';
 import { MenuItem } from '@molecules/index';
+import { animated, useSpring } from 'react-spring';
+import styled from '@emotion/styled';
 
 const wrapperCss = (staticMenuToggle: boolean) => css`
   position: relative;
@@ -34,7 +36,16 @@ const workspaceCss = () => css`
   width: 100%;
   color: rgba(55, 53, 47, 0.6);
 `;
-const buttonsCss = () => css`
+const plusCss = (staticMenuToggle: boolean) => css`
+  margin-right: ${staticMenuToggle ? 5 : 0}px;
+  border: 1px solid rgba(55, 53, 47, 0.16);
+  border-radius: 3px;
+`;
+const menuListCss = () => css`
+  overflow-y: auto;
+  height: calc(100% - 44px);
+`;
+const AnimatedButtons = styled(animated.div)`
   position: absolute;
   top: 7px;
   right: 0;
@@ -46,15 +57,6 @@ const buttonsCss = () => css`
   margin-right: 14px;
   min-width: 0;
 `;
-const plusCss = (staticMenuToggle: boolean) => css`
-  margin-right: ${staticMenuToggle ? 5 : 0}px;
-  border: 1px solid rgba(55, 53, 47, 0.16);
-  border-radius: 3px;
-`;
-const menuListCss = () => css`
-  overflow-y: auto;
-  height: calc(100% - 44px);
-`;
 
 function Menu(): JSX.Element {
   const [pages, setPages] = useRecoilState(pagesState);
@@ -66,6 +68,9 @@ function Menu(): JSX.Element {
     hoveredMenuToggleState,
   );
   const setBlockMap = useSetRecoilState(blockMapState);
+  const buttonStyleProps = useSpring({
+    opacity: hoveredMenuToggle ? 1 : 0,
+  });
 
   const CreatingPageHandler = async () => {
     const { pages: updated, page: created } = await createPage();
@@ -82,20 +87,18 @@ function Menu(): JSX.Element {
 
   return (
     <div css={wrapperCss(staticMenuToggle)}>
-      {hoveredMenuToggle && (
-        <div css={buttonsCss()}>
-          <div css={plusCss(staticMenuToggle)}>
-            <HeaderButton clickHandler={CreatingPageHandler}>
-              <PlusPage />
-            </HeaderButton>
-          </div>
-          {staticMenuToggle && (
-            <HeaderButton clickHandler={clickCloseHandler}>
-              <DoubleChevronLeft />
-            </HeaderButton>
-          )}
+      <AnimatedButtons style={buttonStyleProps}>
+        <div css={plusCss(staticMenuToggle)}>
+          <HeaderButton clickHandler={CreatingPageHandler}>
+            <PlusPage />
+          </HeaderButton>
         </div>
-      )}
+        {staticMenuToggle && (
+          <HeaderButton clickHandler={clickCloseHandler}>
+            <DoubleChevronLeft />
+          </HeaderButton>
+        )}
+      </AnimatedButtons>
       <div css={workspaceCss()}>WORKSPACE</div>
       <div css={menuListCss()}>
         <Suspense fallback={<div>Loading...</div>}>