[Feat] Mobile Nav Menu 추가 (#284)

* feat: Journey section add * feat: 여정 합류 PC * feat: layout media query add * feat: journey mobile * feat: 모집안내 바로가기 생성 * refactor: css 분리 * fix: build error fix * feat: schedule 상수로 분리, main 에 추가 * style: 14기 일정 추가 * style: SectionTitle 반응형 추가 * feat: faq main component 추가 * feat: main sign image 추가 * fix: optional desc 적용 * fix: 설명 있을때만 돔 생성 * refactor: main에만 종속되어있는 컴포넌트 구조 변경 * feat: 14기 지원 버튼 추가 (메인 마지막) * style: gnb pc design 수정 * feat: mobile menu icon 추가 * refactor: pc footer theme 적용 * style: footer 모바일 반응형 추가 * feat: mobile menu icon 추가 * feat: mobile nav 추가 * [Style] GNB, Footer 반응형 작업 (#283) * style: gnb pc design 수정 * feat: mobile menu icon 추가 * refactor: pc footer theme 적용 * style: footer 모바일 반응형 추가 --------- Co-authored-by: byun sumi <sumi@adenasoft.com> * fix: merge error fix * fix: merge error fix --------- Co-authored-by: byun sumi <sumi@adenasoft.com>
depromeet · Sep 23, 2023 · 3f96461 · 3f96461
1 parent 079c6cf
commit 3f96461
Show file tree

Hide file tree

Showing 3 changed files with 206 additions and 13 deletions.
diff --git a/src/components/GNB/GNB.tsx b/src/components/GNB/GNB.tsx
@@ -1,12 +1,14 @@
+import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { css, Theme } from '@emotion/react';
+import { AnimatePresence } from 'framer-motion';
 
 import { Button } from '~/components/Button';
-import { MenuIcon } from '~/components/Icons';
+import { MobileMenu } from '~/components/GNB/MobileMenu';
+import { MobileMenuIcon } from '~/components/GNB/MobileMenuIcon';
 import { GNB_MENU_NAME, GNBMenu } from '~/constant/gnb';
-import { colors } from '~/styles/colors';
 import { mediaQuery } from '~/styles/media';
 
 const LOGO_IMAGE = `/images/logo.png`;
@@ -23,12 +25,14 @@ function ApplyButton({ menu }: { menu: GNBMenu }) {
 
 export function GNB() {
   const { pathname } = useRouter();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const getActiveLinkcss = (menu: GNBMenu) => {
     if (pathname.startsWith(menu.href)) {
       return activeLinkCss;
     }
     return inActiveLinkCss;
   };
+
   return (
     <>
       <nav css={navCss}>
@@ -49,29 +53,47 @@ export function GNB() {
               </li>
             ))}
           </ul>
-          <div css={mobileMenuContainerCss}>
-            <MenuIcon />
-          </div>
         </div>
       </nav>
+      <nav css={mobileNavCss}>
+        <div css={mobileMenuGNBCss}>
+          <Link href={'/'}>
+            {<Image src={LOGO_IMAGE} alt="로고 이미지" width={154} height={18.9} />}
+          </Link>
+          <MobileMenuIcon onClick={() => setIsMenuOpen(prev => !prev)} isChecked={isMenuOpen} />
+        </div>
+        <AnimatePresence mode="wait">{isMenuOpen && <MobileMenu />}</AnimatePresence>
+      </nav>
       <div css={blankCss} />
     </>
   );
 }
 
-const navCss = css`
-  background-color: ${colors.black800};
+const navCommonCss = (theme: Theme) => css`
+  background-color: ${theme.colors.black800};
   position: fixed;
-  padding: 20px 32px;
   top: 0;
   left: 0;
   z-index: 9998;
   width: 100vw;
 `;
 
+const navCss = (theme: Theme) => css`
+  ${navCommonCss(theme)};
+  padding: 20px 32px;
+
+  ${mediaQuery('mobile')} {
+    display: none;
+  }
+`;
+
 const blankCss = css`
   width: 100vw;
   height: 82px;
+
+  ${mediaQuery('mobile')} {
+    height: 72px;
+  }
 `;
 
 const navWrapperCss = css`
@@ -85,13 +107,9 @@ const navWrapperCss = css`
 const menuContainerCss = css`
   display: flex;
   gap: 32px;
-
-  ${mediaQuery('mobile')} {
-    display: none;
-  }
 `;
 
-const mobileMenuContainerCss = css`
+const mobileNavCss = css`
   display: none;
 
   ${mediaQuery('mobile')} {
@@ -114,3 +132,15 @@ const inActiveLinkCss = (theme: Theme) => css`
 const linkCss = (theme: Theme) => css`
   ${theme.typos.pretendard.body1};
 `;
+
+const mobileMenuGNBCss = (theme: Theme) => css`
+  ${navCommonCss(theme)};
+  padding: 20px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  & > a {
+    margin-top: 6px;
+  }
+`;
diff --git a/src/components/GNB/MobileMenu.tsx b/src/components/GNB/MobileMenu.tsx
@@ -0,0 +1,62 @@
+import Link from 'next/link';
+import { css, Theme } from '@emotion/react';
+import { m } from 'framer-motion';
+
+import { GNB_MENU_NAME } from '~/constant/gnb';
+
+export function MobileMenu({}) {
+  return (
+    <m.article
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height: '272px', opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      css={mobileMenuCss}
+    >
+      <ul>
+        {GNB_MENU_NAME.map(menu => (
+          <li key={menu.name}>
+            {menu.type === 'button' ? (
+              <Link css={[linkCss, activeLinkCss]} href={menu.href}>
+                {menu.name}
+              </Link>
+            ) : (
+              <Link css={[linkCss, inActiveLinkCss]} href={menu.href}>
+                {menu.name}
+              </Link>
+            )}
+          </li>
+        ))}
+      </ul>
+    </m.article>
+  );
+}
+
+const mobileMenuCss = (theme: Theme) => css`
+  z-index: 9997;
+
+  width: 100vw;
+  height: fit-content;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: auto;
+  background-color: ${theme.colors.black800};
+  padding-top: 72px;
+
+  overflow: hidden;
+  li {
+    padding: 12px 32px;
+  }
+`;
+
+const activeLinkCss = (theme: Theme) => css`
+  color: ${theme.colors.yellow500};
+`;
+
+const inActiveLinkCss = (theme: Theme) => css`
+  color: ${theme.colors.white};
+`;
+
+const linkCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.body1};
+`;
diff --git a/src/components/GNB/MobileMenuIcon.tsx b/src/components/GNB/MobileMenuIcon.tsx
@@ -0,0 +1,101 @@
+import { css } from '@emotion/react';
+
+interface Props {
+  onClick?: () => void;
+  isChecked?: boolean;
+}
+export function MobileMenuIcon({ onClick, isChecked }: Props) {
+  return (
+    <div css={containerCss}>
+      <input
+        className="burger-check"
+        type="checkbox"
+        id="burger-check"
+        onClick={onClick}
+        checked={isChecked}
+      />
+      <label className="burger-icon" htmlFor="burger-check">
+        <span className="burger-sticks"></span>
+      </label>
+    </div>
+  );
+}
+
+const containerCss = css`
+  position: relative;
+  width: 32px;
+  height: 32px;
+
+  .menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    max-width: 0;
+    min-width: 100px;
+    transition: 0.5s ease;
+    z-index: 1;
+    background-color: #eee;
+  }
+
+  .burger-icon {
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    z-index: 2;
+    padding: 8px 0;
+    top: 8px;
+    right: 4px;
+    user-select: none;
+    width: auto;
+
+    .burger-sticks {
+      background: #d9d9d9;
+      display: block;
+      height: 3px;
+      position: relative;
+      transition: background 0.2s ease-out;
+      width: 24px;
+
+      &:before,
+      &:after {
+        background: #d9d9d9;
+        content: '';
+        display: block;
+        height: 100%;
+        position: absolute;
+        transition: all 0.2s ease-out;
+        width: 100%;
+      }
+
+      &:before {
+        top: 8px;
+      }
+
+      &:after {
+        top: -8px;
+      }
+    }
+  }
+
+  .burger-check {
+    display: none;
+  }
+
+  .burger-check:checked ~ .burger-icon .burger-sticks {
+    background: transparent;
+    &:before {
+      transform: rotate(-45deg);
+    }
+    &:after {
+      transform: rotate(45deg);
+    }
+  }
+
+  .burger-check:checked ~ .burger-icon:not(.steps) .burger-sticks {
+    &:before,
+    &:after {
+      top: 0;
+    }
+  }
+`;