Menu 컴포넌트 CSS 수정

frontend/package.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/src/components/atoms/HeaderButton/HeaderButton.tsx

@@ -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/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,11 +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;
-`;
 
 function Menu(): JSX.Element {
   const [pages, setPages] = useRecoilState(pagesState);
@@ -62,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();
@@ -78,26 +87,26 @@ 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>
-      <Suspense fallback={<div>Loading...</div>}>
-        {pages.map((page) => (
-          <MenuItem key={page.id} page={page} />
-        ))}
-      </Suspense>
+      <div css={menuListCss()}>
+        <Suspense fallback={<div>Loading...</div>}>
+          {pages.map((page) => (
+            <MenuItem key={page.id} page={page} />
+          ))}
+        </Suspense>
+      </div>
     </div>
   );
 }

frontend/src/components/organisms/HeaderMenu/HeaderMenu.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,25 @@ 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;
+`;
+const buttonWrapper = css`
+  position: relative;
+  width: 16px;
+  height: 16px;
+`;
+const AnimatedButton = styled(animated.div)`
+  position: absolute;
 `;
 
 function HeaderMenu(): JSX.Element {
@@ -44,23 +51,41 @@ 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,
+  });
+  const hamburgerMenuStyleProps = useSpring({
+    opacity: hoveredMenuToggle ? 0 : 1,
+  });
+  const doubleChevronRightStyleProps = useSpring({
+    opacity: hoveredMenuToggle ? 1 : 0,
+  });
 
   return (
     <div
-      css={wrapperCss()}
+      css={wrapperCss}
       onMouseEnter={() => setHoveredMenuToggle(true)}
       onMouseLeave={() => setHoveredMenuToggle(false)}
     >
       <HeaderButton clickHandler={() => setStaticMenuToggle(!staticMenuToggle)}>
-        {staticMenuToggle ||
-          (!hoveredMenuToggle ? <HamburgerMenu /> : <DoubleChevronRight />)}
+        {staticMenuToggle || (
+          <div css={buttonWrapper}>
+            <AnimatedButton style={hamburgerMenuStyleProps}>
+              <HamburgerMenu />
+            </AnimatedButton>
+            <AnimatedButton style={doubleChevronRightStyleProps}>
+              <DoubleChevronRight />
+            </AnimatedButton>
+          </div>
+        )}
       </HeaderButton>
-      <div css={hoverAreaCss()} />
-      {(staticMenuToggle || hoveredMenuToggle) && (
-        <div css={menuCss(staticMenuToggle)}>
-          <Menu />
-        </div>
-      )}
+      <div css={hoverAreaCss} />
+      <AnimatedMenu style={menuStyleProps}>
+        <Menu />
+      </AnimatedMenu>
     </div>
   );
 }

frontend/src/components/pages/PageComponent/PageComponent.tsx

@@ -7,29 +7,28 @@ import { HeaderMenu } from '@components/organisms';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { blockMapState, pageState, staticMenuToggleState } from '@/stores';
 import { createBlock } from '@/utils';
+import styled from '@emotion/styled';
+import { animated, useSpring } from 'react-spring';
 
-const staticMenuAreaCss = () => css`
+const staticMenuAreaCss = css`
   position: fixed;
   z-index: 2;
 `;
-const staticHeaderAreaCss = (staticMenuToggle: boolean) => css`
+const AnimatedStaticHeaderArea = styled(animated.div)`
   position: fixed;
   right: 0;
-  left: ${staticMenuToggle ? 240 : 0}px;
-  width: calc(100% - ${staticMenuToggle ? 240 : 0}px);
   background-color: #ffffff;
   z-index: 1;
 `;
-const staticScrollAreaCss = (staticMenuToggle: boolean) => css`
+const AnimatedStaticScrollArea = styled(animated.div)`
   position: fixed;
   top: 45px;
   right: 0;
-  left: ${staticMenuToggle ? 240 : 0}px;
-  width: calc(100% - ${staticMenuToggle ? 240 : 0}px);
+  background-color: #ffffff;
   height: calc(100% - 45px);
   overflow: auto;
 `;
-const bottomMarginCss = () => css`
+const bottomMarginCss = css`
   display: inline-block;
   width: 100%;
   height: calc(100% - 200px);
@@ -40,6 +39,10 @@ function PageComponent(): JSX.Element {
   const staticMenuToggle = useRecoilValue(staticMenuToggleState);
   const page = useRecoilValue(pageState);
   const setBlockMap = useSetRecoilState(blockMapState);
+  const staticAreaStyleProps = useSpring({
+    left: staticMenuToggle ? 240 : 0,
+    width: `calc(100% - ${staticMenuToggle ? 240 : 0}px)`,
+  });
 
   const createBlockHandler = async () => {
     const { parent, block } = await createBlock({ parentBlockId: page.rootId });
@@ -53,21 +56,21 @@ function PageComponent(): JSX.Element {
 
   return (
     <div>
-      <div css={staticMenuAreaCss()}>
+      <div css={staticMenuAreaCss}>
         <HeaderMenu />
       </div>
-      <div css={staticHeaderAreaCss(staticMenuToggle)}>
+      <AnimatedStaticHeaderArea style={staticAreaStyleProps}>
         <Header />
-      </div>
-      <div css={staticScrollAreaCss(staticMenuToggle)}>
+      </AnimatedStaticHeaderArea>
+      <AnimatedStaticScrollArea style={staticAreaStyleProps}>
         <Title />
         <Editor />
         <div
-          css={bottomMarginCss()}
+          css={bottomMarginCss}
           onClick={createBlockHandler}
           onKeyUp={createBlockHandler}
         />
-      </div>
+      </AnimatedStaticScrollArea>
     </div>
   );
 }