From 1cff61a5e3a889942af191c4e2d621c7c9c7f191 Mon Sep 17 00:00:00 2001 From: skid901 Date: Wed, 16 Dec 2020 20:26:43 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[#124]=20refactor:=20Menu=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EA=B0=AF=EC=88=98=EA=B0=80=20=EB=86=92?= =?UTF-8?q?=EC=9D=B4=EB=A5=BC=20=EC=B4=88=EA=B3=BC=ED=95=A0=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/molecules/Menu/Menu.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/molecules/Menu/Menu.tsx b/frontend/src/components/molecules/Menu/Menu.tsx index a7f7ec6..1b918ba 100644 --- a/frontend/src/components/molecules/Menu/Menu.tsx +++ b/frontend/src/components/molecules/Menu/Menu.tsx @@ -51,6 +51,10 @@ const plusCss = (staticMenuToggle: boolean) => css` 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); @@ -93,11 +97,13 @@ function Menu(): JSX.Element { )}
WORKSPACE
- Loading...}> - {pages.map((page) => ( - - ))} - +
+ Loading...
}> + {pages.map((page) => ( + + ))} + + ); } From 200f4c2d7e6a6a5dd6ef9a9033cc1827a53d8b1c Mon Sep 17 00:00:00 2001 From: skid901 Date: Wed, 16 Dec 2020 23:13:05 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[#124]=20refactor:=20HeaderMenu=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 9 ++++++ frontend/package.json | 1 + .../atoms/HeaderButton/HeaderButton.tsx | 5 +++- .../organisms/HeaderMenu/HeaderMenu.tsx | 29 ++++++++++--------- 4 files changed, 30 insertions(+), 14 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2dea8c1..34e2607 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20268,6 +20268,15 @@ "throttle-debounce": "^2.1.0" } }, + "react-spring": { + "version": "8.0.27", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", + "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", + "requires": { + "@babel/runtime": "^7.3.1", + "prop-types": "^15.5.8" + } + }, "react-syntax-highlighter": { "version": "13.5.3", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index f00b888..faf69ae 100644 --- a/frontend/package.json +++ b/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" diff --git a/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx b/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx index 087d0f9..a0c0ad0 100644 --- a/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx +++ b/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; } diff --git a/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx b/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx index f1d632b..0f2e45a 100644 --- a/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx +++ b/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx @@ -1,7 +1,9 @@ /** @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'; @@ -9,7 +11,7 @@ import { ReactComponent as DoubleChevronRight } from '@assets/doubleChevronRight import { hoveredMenuToggleState, staticMenuToggleState } from '@/stores'; import { Menu } from '@molecules/index'; -const wrapperCss = () => css` +const wrapperCss = css` position: relative; display: flex; align-items: center; @@ -21,7 +23,7 @@ const wrapperCss = () => css` margin-right: 8px; min-width: 0; `; -const hoverAreaCss = () => css` +const hoverAreaCss = css` position: absolute; display: inline-block; top: 45px; @@ -29,12 +31,9 @@ const hoverAreaCss = () => css` 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,10 +43,16 @@ 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 (
setHoveredMenuToggle(true)} onMouseLeave={() => setHoveredMenuToggle(false)} > @@ -55,12 +60,10 @@ function HeaderMenu(): JSX.Element { {staticMenuToggle || (!hoveredMenuToggle ? : )} -
- {(staticMenuToggle || hoveredMenuToggle) && ( -
- -
- )} +
+ + +
); } From 8485558c87a28a1afd2abd1f4ae3da4ff9cf1978 Mon Sep 17 00:00:00 2001 From: skid901 Date: Wed, 16 Dec 2020 23:29:51 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[#124]=20refactor:=20PageComponent=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=95=A0=EB=8B=88?= =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/PageComponent/PageComponent.tsx | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/pages/PageComponent/PageComponent.tsx b/frontend/src/components/pages/PageComponent/PageComponent.tsx index f27b1ed..9778d14 100644 --- a/frontend/src/components/pages/PageComponent/PageComponent.tsx +++ b/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 (
-
+
-
+
-
-
+ + <Editor /> <div - css={bottomMarginCss()} + css={bottomMarginCss} onClick={createBlockHandler} onKeyUp={createBlockHandler} /> - </div> + </AnimatedStaticScrollArea> </div> ); } From 07e0b4941b97578b45aaa19460118cdb1265b35f Mon Sep 17 00:00:00 2001 From: skid901 <tlrudejr1993@naver.com> Date: Wed, 16 Dec 2020 23:50:42 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[#124]=20refactor:=20Menu=20=EB=82=B4=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/molecules/Menu/Menu.tsx | 49 ++++++++++--------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/molecules/Menu/Menu.tsx b/frontend/src/components/molecules/Menu/Menu.tsx index 1b918ba..4c24ff8 100644 --- 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>}> From 9a6dd0fd5aa096ac91b794bae0c0878cd03ede2f Mon Sep 17 00:00:00 2001 From: skid901 <tlrudejr1993@naver.com> Date: Thu, 17 Dec 2020 00:11:30 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[#124]=20refactor:=20HeaderMenu=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/HeaderMenu/HeaderMenu.tsx | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx b/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx index 0f2e45a..4521c2e 100644 --- a/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx +++ b/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx @@ -35,6 +35,14 @@ const AnimatedMenu = styled(animated.div)` position: absolute; display: inline-block; `; +const buttonWrapper = css` + position: relative; + width: 16px; + height: 16px; +`; +const AnimatedButton = styled(animated.div)` + position: absolute; +`; function HeaderMenu(): JSX.Element { const [staticMenuToggle, setStaticMenuToggle] = useRecoilState( @@ -49,6 +57,12 @@ function HeaderMenu(): JSX.Element { 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 @@ -57,8 +71,16 @@ function HeaderMenu(): JSX.Element { 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} /> <AnimatedMenu style={menuStyleProps}>