design: 반응형 header 드롭메뉴 애니메이션

sopt-makers · Aug 10, 2024 · dc6f1b9 · dc6f1b9
1 parent 7dcc466
commit dc6f1b9
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 24 deletions.
diff --git a/src/common/components/Layout/components/Header/Nav/MenuList/index.tsx b/src/common/components/Layout/components/Header/Nav/MenuList/index.tsx
@@ -1,18 +1,31 @@
 import { reset, track } from '@amplitude/analytics-browser';
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { useDevice } from '@hooks/useDevice';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 
-import { menuList, menuMobListVar } from './style.css';
+import { dimmedBgVar, menuContainerVar, menuList, menuMobListVar } from './style.css';
 import { MENU_ITEMS, MENU_ITEMS_MAKERS } from '../../contants';
 import MenuItem from '../MenuItem';
 
-const MenuList = () => {
+const MenuList = ({ isMenuOpen, onClickMenuToggle }: { isMenuOpen?: boolean; onClickMenuToggle?: () => void }) => {
  const DEVICE_TYPE = useDevice();
  const navigate = useNavigate();
  const { pathname } = useLocation();
+ const [isShown, setIsShown] = useState(isMenuOpen);
+ const [animation, setAnimation] = useState<'open' | 'close'>(isMenuOpen ? 'open' : 'close');
+
+ useEffect(() => {
+ if (isMenuOpen) {
+ setIsShown(true);
+ setAnimation('open');
+ } else {
+ setAnimation('close');
+ const timer = setTimeout(() => setIsShown(false), 300);
+ return () => clearTimeout(timer);
+ }
+ }, [isMenuOpen]);
 
  const isSignedIn = localStorage.getItem('soptApplyAccessToken');
 
@@ -28,9 +41,12 @@ const MenuList = () => {
  pathname === '/' ? window.location.reload() : navigate('/');
  };
 
+ if (onClickMenuToggle && !isShown) return null;
+
  return (
  <nav>
- <ul className={DEVICE_TYPE !== 'DESK' ? menuMobListVar[DEVICE_TYPE] : menuList}>
+ <ul
+ className={DEVICE_TYPE !== 'DESK' ? `${menuMobListVar[DEVICE_TYPE]} ${menuContainerVar[animation]}` : menuList}>
  {!isSignedIn && (
  <>
  {menuItems.map(({ text, path, target, amplitudeId }) => (
@@ -49,6 +65,7 @@ const MenuList = () => {
  </>
  )}
  </ul>
+ {onClickMenuToggle && isShown && <div className={dimmedBgVar[animation]} onClick={onClickMenuToggle} />}
  </nav>
  );
 };

diff --git a/src/common/components/Layout/components/Header/Nav/MenuList/style.css.ts b/src/common/components/Layout/components/Header/Nav/MenuList/style.css.ts
@@ -1,8 +1,54 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { keyframes, style, styleVariants } from '@vanilla-extract/css';
 
 import { Z_INDEX } from '@constants/zIndex';
 import { theme } from 'styles/theme.css';
 
+const fadeIn = keyframes({
+ '0%': {
+ opacity: 0,
+ },
+ '100%': {
+ opacity: 1,
+ },
+});
+const fadeOut = keyframes({
+ '0%': {
+ opacity: 1,
+ },
+ '100%': {
+ opacity: 0,
+ },
+});
+const fadeInDown = keyframes({
+ '0%': {
+ opacity: 0,
+ transform: 'translateY(-300px)',
+ },
+ '100%': {
+ opacity: 1,
+ transform: 'translateY(0)',
+ },
+});
+const fadeOutUp = keyframes({
+ '0%': {
+ opacity: 1,
+ transform: 'translateY(0)',
+ },
+ '100%': {
+ opacity: 0,
+ transform: 'translateY(-300px)',
+ },
+});
+
+export const menuContainerVar = styleVariants({
+ open: {
+ animation: `${fadeInDown} 0.3s`,
+ },
+ close: {
+ animation: `${fadeOutUp} 0.3s`,
+ animationFillMode: 'forwards',
+ },
+});
 export const menuList = style({
  display: 'flex',
  alignItems: 'center',
@@ -35,3 +81,31 @@ export const menuMobListVar = styleVariants({
  },
  ],
 });
+
+export const dimmedBg = style({
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100dvh',
+ backgroundColor: theme.color.backgroundDimmed,
+ zIndex: Z_INDEX.gnbBg,
+
+ cursor: 'pointer',
+});
+
+export const dimmedBgVar = styleVariants({
+ open: [
+ dimmedBg,
+ {
+ animation: `${fadeIn} 0.3s`,
+ },
+ ],
+ close: [
+ dimmedBg,
+ {
+ animation: `${fadeOut} 0.3s`,
+ animationFillMode: 'forwards',
+ },
+ ],
+});
diff --git a/src/common/components/Layout/components/Header/index.tsx b/src/common/components/Layout/components/Header/index.tsx
@@ -10,7 +10,7 @@ import { ThemeContext } from '@store/themeContext';
 
 import Nav from './Nav';
 import MenuList from './Nav/MenuList';
-import { containerSizeVer, containerVar, dimmedBg, logoVar } from './style.css';
+import { containerSizeVer, containerVar, logoVar } from './style.css';
 
 const Header = () => {
  const DEVICE_TYPE = useDevice();
@@ -56,12 +56,7 @@ const Header = () => {
  </button>
  <Nav isMenuOpen={isMenuOpen} onClickMenuToggle={handleClickMenuToggle} />
  </header>
- {isMenuOpen && (
- <>
- <MenuList />
- <div className={dimmedBg} onClick={handleClickMenuToggle} />
- </>
- )}
+ <MenuList isMenuOpen={isMenuOpen} onClickMenuToggle={handleClickMenuToggle} />
  </>
  )}
  </>

diff --git a/src/common/components/Layout/components/Header/style.css.ts b/src/common/components/Layout/components/Header/style.css.ts
@@ -15,6 +15,7 @@ const container = style({
  margin: '0 auto',
 
  zIndex: Z_INDEX.gnbHeader,
+ transition: 'background-color 0.3s ease',
 });
 
 export const containerVar = styleVariants({
@@ -51,15 +52,3 @@ export const logoVar = styleVariants(
  },
  ],
 );
-
-export const dimmedBg = style({
- position: 'fixed',
- top: 0,
- left: 0,
- width: '100%',
- height: '100dvh',
- backgroundColor: theme.color.backgroundDimmed,
- zIndex: Z_INDEX.gnbBg,
-
- cursor: 'pointer',
-});