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

Author: skid901

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>
   );
 }