[Feat] Mobile Nav Menu 추가

src/components/FAQ/FAQ.tsx

@@ -5,6 +5,7 @@ import { FAQList } from '~/components/FAQ/FAQList';
 import { SectionTitle } from '~/components/SectionTitle';
 import { FAQ_GROUP, FAQGroupType, FAQS, FAQType } from '~/constant/faq';
 import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
 
 export function FAQ() {
   const [activeTab, setActiveTab] = useState<FAQGroupType>('지원자격');
@@ -65,4 +66,8 @@ const tabCss = (theme: Theme, isActive: boolean) => css`
   color: ${isActive ? theme.colors.yellow500 : theme.colors.white};
   cursor: pointer;
   padding: 16px 24px;
+
+  ${mediaQuery('mobile')} {
+    font-size: 14px;
+  }
 `;

src/components/FAQ/FAQItem.tsx

@@ -2,6 +2,7 @@ import { css, Theme } from '@emotion/react';
 import { motion, Variants } from 'framer-motion';
 
 import { ArrowIcon } from '~/components/Icons';
+import { mediaQuery } from '~/styles/media';
 import { theme } from '~/styles/theme';
 
 interface FAQItemProps {
@@ -68,12 +69,26 @@ const headerCss = (theme: Theme, isOpen: boolean) => css`
     text-align: center;
     ${theme.typos.pretendard.subTitle2}
   }
+
+  ${mediaQuery('mobile')} {
+    padding: 8px;
+
+    > h3 {
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
 `;
 
 const arrowIconCss = (theme: Theme, isOpen: boolean) => css`
   > path {
     stroke: ${isOpen ? theme.colors.black800 : theme.colors.blue400};
   }
+
+  ${mediaQuery('mobile')} {
+    width: 24px;
+    height: 24px;
+  }
 `;
 
 const bodyCss = (theme: Theme) => css`
@@ -83,4 +98,11 @@ const bodyCss = (theme: Theme) => css`
     color: ${theme.colors.white};
     ${theme.typos.pretendard.body1};
   }
+  ${mediaQuery('mobile')} {
+    > p {
+      padding: 20px 8px;
+
+      font-size: 14px;
+    }
+  }
 `;

src/components/Footer/Footer.tsx

@@ -1,8 +1,9 @@
 import Link from 'next/link';
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
 
 import { FIRST_ROW_FOOTER_INFOS, SECOND_ROW_FOOTER_INFOS } from '~/constant/footer';
 import { colors } from '~/styles/colors';
+import { mediaQuery } from '~/styles/media';
 
 export function Footer() {
   return (
@@ -11,17 +12,18 @@ export function Footer() {
         <ul css={rowCss}>
           {FIRST_ROW_FOOTER_INFOS.map(footer => (
             <li key={footer.name}>
-              <Link css={linkCss} href={footer.href}>
+              <Link css={[linkCss, strongLinkCss]} href={footer.href}>
                 {footer.name}
               </Link>
             </li>
           ))}
         </ul>
-        <ul css={[rowCss, rowGapCss]}>
+        <ul css={[secondRowCss]}>
           {SECOND_ROW_FOOTER_INFOS.map(footer => (
             <li key={footer.name}>
               <Link css={linkCss} href={footer.href}>
-                {footer.name}
+                <span>{footer.name}</span>
+                <span>{footer.detail}</span>
               </Link>
             </li>
           ))}
@@ -46,32 +48,64 @@ const footerInfoWrapper = css`
   height: 218px;
   justify-content: center;
   align-items: center;
+
+  ${mediaQuery('mobile')} {
+    height: 167px;
+    width: 100%;
+  }
 `;
 
 const rowCss = css`
   display: flex;
   gap: 40px;
+
+  ${mediaQuery('mobile')} {
+    width: 100%;
+    gap: 0;
+    justify-content: space-between;
+  }
 `;
 
-const rowGapCss = css`
+const secondRowCss = css`
+  display: flex;
+  gap: 40px;
   margin-top: 16px;
+
+  span + span {
+    margin-left: 12px;
+  }
+  ${mediaQuery('mobile')} {
+    width: 100%;
+    gap: 0;
+    justify-content: space-between;
+    margin-top: 8px;
+
+    span + span {
+      margin-left: 16px;
+    }
+  }
+`;
+
+const linkCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.body1};
+  color: ${theme.colors.gray100};
+
+  ${mediaQuery('mobile')} {
+    font-size: 11px;
+  }
 `;
 
-const linkCss = css`
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 25.2px; /* 140% */
-  letter-spacing: -0.18px;
-  color: ${colors.gray100};
+const strongLinkCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.subTitle2};
 `;
 
-const copyrightCss = css`
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 25.2px; /* 140% */
-  letter-spacing: -0.18px;
-  color: ${colors.gray200};
+const copyrightCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.body1};
+  color: ${theme.colors.gray200};
   margin-top: 40px;
+
+  ${mediaQuery('mobile')} {
+    font-size: 11px;
+    margin-top: 24px;
+  }
 `;

src/components/GNB/GNB.tsx

@@ -1,17 +1,21 @@
+import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
+import { AnimatePresence } from 'framer-motion';
 
 import { Button } from '~/components/Button';
+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`;
 
 function ApplyButton({ menu }: { menu: GNBMenu }) {
   return (
-    <Button css={applyButtonCss}>
+    <Button>
       <Link css={linkCss} href={menu.href}>
         {menu.name}
       </Link>
@@ -21,18 +25,20 @@ 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}>
         <div css={navWrapperCss}>
           <Link href={'/'}>
-            {<Image src={LOGO_IMAGE} alt="로고 이미지" width={240} height={30} />}
+            {<Image src={LOGO_IMAGE} alt="로고 이미지" width={154} height={18.9} />}
           </Link>
           <ul css={menuContainerCss}>
             {GNB_MENU_NAME.map(menu => (
@@ -49,60 +55,92 @@ export function GNB() {
           </ul>
         </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: 0 20px;
   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: 72px;
+  height: 82px;
+
+  ${mediaQuery('mobile')} {
+    height: 72px;
+  }
 `;
 
 const navWrapperCss = css`
   max-width: 1240px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 72px;
   margin: 0 auto;
 `;
 
 const menuContainerCss = css`
   display: flex;
-  gap: 60px;
+  gap: 32px;
+`;
+
+const mobileNavCss = css`
+  display: none;
+
+  ${mediaQuery('mobile')} {
+    display: block;
+  }
 `;
 
 const menuCss = css`
   margin: auto 0;
 `;
 
-const activeLinkCss = css`
-  color: ${colors.yellow500};
+const activeLinkCss = (theme: Theme) => css`
+  color: ${theme.colors.yellow500};
 `;
 
-const inActiveLinkCss = css`
-  color: ${colors.white};
+const inActiveLinkCss = (theme: Theme) => css`
+  color: ${theme.colors.white};
 `;
 
-const linkCss = css`
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: 150%; /* 30px */
-  letter-spacing: -0.2px;
+const linkCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.body1};
 `;
 
-const applyButtonCss = css`
-  background-color: ${colors.yellow500};
-  color: ${colors.black800};
+const mobileMenuGNBCss = (theme: Theme) => css`
+  ${navCommonCss(theme)};
+  padding: 20px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  & > a {
+    margin-top: 6px;
+  }
 `;

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};
+`;