Skip to content

Commit 200f4c2

Browse files
committed
[#124] refactor: HeaderMenu 컴포넌트 애니메이션 추가
1 parent 1cff61a commit 200f4c2

File tree

4 files changed

+30
-14
lines changed

4 files changed

+30
-14
lines changed

frontend/package-lock.json

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"react-app-rewired": "^2.1.6",
2424
"react-dom": "^17.0.1",
2525
"react-scripts": "^4.0.1",
26+
"react-spring": "^8.0.27",
2627
"recoil": "^0.1.2",
2728
"typescript": "^4.1.2",
2829
"web-vitals": "^0.2.4"

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@ const buttonCss = (): SerializedStyles => css`
88
user-select: none;
99
cursor: pointer;
1010
color: inherit;
11-
minwidth: 0px;
11+
min-width: 0px;
1212
padding: 6px;
1313
margin: auto;
1414
white-space: nowrap;
1515
border-radius: 3px;
1616
font-size: inherit;
17+
border: 0;
18+
outline: 0;
19+
1720
&:hover {
1821
background-color: #cccccc;
1922
}

frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
/** @jsx jsx */
22
/** @jsxRuntime classic */
33
import { jsx, css } from '@emotion/react';
4+
import styled from '@emotion/styled';
45
import { useRecoilState } from 'recoil';
6+
import { animated, useSpring, useTransition } from 'react-spring';
57

68
import { HeaderButton } from '@components/atoms';
79
import { ReactComponent as HamburgerMenu } from '@assets/hamburgerMenu.svg';
810
import { ReactComponent as DoubleChevronRight } from '@assets/doubleChevronRight.svg';
911
import { hoveredMenuToggleState, staticMenuToggleState } from '@/stores';
1012
import { Menu } from '@molecules/index';
1113

12-
const wrapperCss = () => css`
14+
const wrapperCss = css`
1315
position: relative;
1416
display: flex;
1517
align-items: center;
@@ -21,20 +23,17 @@ const wrapperCss = () => css`
2123
margin-right: 8px;
2224
min-width: 0;
2325
`;
24-
const hoverAreaCss = () => css`
26+
const hoverAreaCss = css`
2527
position: absolute;
2628
display: inline-block;
2729
top: 45px;
2830
left: 0;
2931
width: 100%;
3032
height: 100vh;
3133
`;
32-
const menuCss = (staticMenuToggle: boolean) => css`
34+
const AnimatedMenu = styled(animated.div)`
3335
position: absolute;
3436
display: inline-block;
35-
top: ${staticMenuToggle ? 0 : 50}px;
36-
left: 0;
37-
margin-top: ${staticMenuToggle ? 0 : 10}px;
3837
`;
3938

4039
function HeaderMenu(): JSX.Element {
@@ -44,23 +43,27 @@ function HeaderMenu(): JSX.Element {
4443
const [hoveredMenuToggle, setHoveredMenuToggle] = useRecoilState(
4544
hoveredMenuToggleState,
4645
);
46+
const menuStyleProps = useSpring({
47+
top: staticMenuToggle ? 0 : 50,
48+
left: hoveredMenuToggle || staticMenuToggle ? 0 : -240,
49+
opacity: hoveredMenuToggle || staticMenuToggle ? 1 : 0,
50+
marginTop: staticMenuToggle ? 0 : 10,
51+
});
4752

4853
return (
4954
<div
50-
css={wrapperCss()}
55+
css={wrapperCss}
5156
onMouseEnter={() => setHoveredMenuToggle(true)}
5257
onMouseLeave={() => setHoveredMenuToggle(false)}
5358
>
5459
<HeaderButton clickHandler={() => setStaticMenuToggle(!staticMenuToggle)}>
5560
{staticMenuToggle ||
5661
(!hoveredMenuToggle ? <HamburgerMenu /> : <DoubleChevronRight />)}
5762
</HeaderButton>
58-
<div css={hoverAreaCss()} />
59-
{(staticMenuToggle || hoveredMenuToggle) && (
60-
<div css={menuCss(staticMenuToggle)}>
61-
<Menu />
62-
</div>
63-
)}
63+
<div css={hoverAreaCss} />
64+
<AnimatedMenu style={menuStyleProps}>
65+
<Menu />
66+
</AnimatedMenu>
6467
</div>
6568
);
6669
}

0 commit comments

Comments
 (0)