Merge dev into prod

components/common/DesktopMenu.tsx

@@ -0,0 +1,64 @@
+import { RouteType } from '@/interfaces/RouteType';
+import { styled } from '@stitches/react';
+import MenuDropdown from './MenuDropdown';
+import { useState } from 'react';
+import Link from 'next/link';
+
+const SectionWrapper = styled('div', {
+  listStyle: 'none',
+  padding: '0.5rem',
+  position: 'relative',
+});
+
+const SectionTitleWrapper = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+});
+const MenuItem = styled('span', {
+  fontWeight: 700,
+  color: '$textPrimary',
+  fontSize: '24px',
+  lineHeight: '24px',
+  whiteSpace: 'nowrap',
+});
+
+const LinkMenu = ({ title, route }: { title: string; route: string }) => {
+  return (
+    <SectionWrapper>
+      <Link href={route}>
+        <SectionTitleWrapper>
+          <MenuItem>{title}</MenuItem>
+        </SectionTitleWrapper>
+      </Link>
+    </SectionWrapper>
+  );
+};
+
+const SectionMenu = ({
+  label,
+  items,
+}: {
+  label: string;
+  items: RouteType[];
+}) => {
+  const [show, setShow] = useState(false);
+  return (
+    <SectionWrapper
+      onMouseOver={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}
+    >
+      <SectionTitleWrapper>
+        <MenuItem>{label}</MenuItem>
+      </SectionTitleWrapper>
+      {show && <MenuDropdown items={items} />}
+    </SectionWrapper>
+  );
+};
+
+const DesktopMenu = {
+  Section: SectionMenu,
+  Link: LinkMenu,
+};
+
+export default DesktopMenu;

components/common/MenuDropdown.tsx

@@ -0,0 +1,45 @@
+import { RouteType } from '@/interfaces/RouteType';
+import { styled } from '@stitches/react';
+import Link from 'next/link';
+
+const DropDownMenu = styled('div', {
+  position: 'absolute',
+  backgroundColor: '$backgroundPrimary',
+});
+
+const MenuContainer = styled('div', {
+  paddingTop: '1rem',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const MenuItem = styled('span', {
+  fontWeight: 600,
+  color: '$textSecondary',
+  fontSize: '16px',
+  lineHeight: '24px',
+  '&:hover': {
+    color: '$textPrimary',
+  },
+});
+const StyledMenu = styled('div', {
+  display: 'inline-block',
+  padding: '0.25rem 0',
+});
+
+export const MenuDropdown = ({ items }: { items: RouteType[] }) => {
+  return (
+    <DropDownMenu>
+      <MenuContainer>
+        {items.map((menu) => (
+          <StyledMenu key={menu.route}>
+            <Link href={menu.route} passHref>
+              <MenuItem>{menu.title}</MenuItem>
+            </Link>
+          </StyledMenu>
+        ))}
+      </MenuContainer>
+    </DropDownMenu>
+  );
+};
+export default MenuDropdown;

components/layout/NavBar.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { styled } from 'stitches.config';
 import Link from 'next/link';
-import { NavBarMenus, Routes } from '@/constants/routes';
+import { SectionMenu, Routes, LinkMenu } from '@/constants/routes';
 import { StyledButton } from '../common/Button';
+import DesktopMenu from '../common/DesktopMenu';
 import { Logo as LogoSvg } from '@/public/icons';
 import ThemeSwitch from '../ThemeSwitch';
 import NavBarMobile from './NavBarMobile';
@@ -12,35 +13,32 @@ import { useRouter } from 'next/router';
 import { signOut } from '@/api/login';
 
 const StyledNavArea = styled('div', {
+  position: 'fixed',
   display: 'flex',
   justifyContent: 'space-between',
   gap: 40,
   alignItems: 'center',
   backgroundColor: '$backgroundPrimary',
-  width: '100%',
+  width: 'calc(100% - 40px)',
   margin: '0 auto',
-  paddingRight: '30px',
   zIndex: '99',
 
   '@bp1': {
+    position: 'fixed',
     height: '44px',
   },
   '@bp2': {
-    padding: '1rem 2rem',
+    padding: '1rem',
     height: '80px',
   },
 });
 
 const Logo = styled(LogoSvg, {
   display: 'block',
-  width: 230,
+  width: 114,
   '& path': {
     fill: '$textPrimary',
   },
-
-  '@bp2': {
-    maxWidth: 230,
-  },
 });
 
 const Title = styled('h1', {
@@ -54,34 +52,14 @@ const Title = styled('h1', {
 const NavContainer = styled('div', {
   display: 'none',
   '@bp2': {
-    display: 'flex',
+    display: 'contents',
   },
 });
 
-const MenuItem = styled('span', {
-  fontWeight: 700,
-  color: '$textPrimary',
-  fontSize: '24px',
-  lineHeight: '24px',
-});
-
 const StyledMenuBox = styled('div', {
   display: 'flex',
-  flex: 1,
   alignItems: 'center',
-  padding: '0 60px',
-  gap: '32px',
-});
-
-const StyledMenu = styled('div', {
-  display: 'inline-block',
-
-  '@bp1': {
-    padding: '0',
-  },
-  '@bp2': {
-    padding: '0 1.5rem',
-  },
+  gap: '40px',
 });
 
 const SideBox = styled('div', {
@@ -129,12 +107,19 @@ const NavBar = () => {
       <NavBarMobile />
       <NavContainer>
         <StyledMenuBox>
-          {NavBarMenus.map((menu) => (
-            <StyledMenu key={menu.route}>
-              <Link href={menu.route} passHref>
-                <MenuItem>{menu.title}</MenuItem>
-              </Link>
-            </StyledMenu>
+          {SectionMenu.map((section) => (
+            <DesktopMenu.Section
+              key={section.label}
+              label={section.label}
+              items={section.items}
+            />
+          ))}
+          {LinkMenu.map((menu) => (
+            <DesktopMenu.Link
+              key={menu.route}
+              title={menu.title}
+              route={menu.route}
+            />
           ))}
         </StyledMenuBox>
         <SideBox>

components/layout/NavBarMobile.tsx

@@ -1,4 +1,4 @@
-import { MobileNavBarMenus } from '@/constants/routes';
+import { LinkMenu, SectionMenu } from '@/constants/routes';
 import { styled } from '@/stitches.config';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -21,40 +21,59 @@ const Container = styled('div', {
 });
 
 const ForeGroundContainer = styled('div', {
+  overflow: 'scroll',
   position: 'fixed',
   top: '44px',
   left: '0',
   width: '100%',
   height: '100%',
-  backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  backgroundColor: '$backgroundPrimary',
   zIndex: '100',
+  padding: '1.5rem',
+  paddingBottom: '3rem',
 });
 
 const MenuContainer = styled('div', {
+  backgroundColor: '$backgroundPrimary',
   display: 'flex',
   flexDirection: 'column',
 });
 
 const MenuWrapper = styled('ul', {
   listStyle: 'none',
+  padding: '0.5rem',
 });
 
 const MenuList = styled('li', {
   display: 'flex',
+  flexDirection: 'column',
   justifyContent: 'space-between',
   gap: '8px',
-  padding: '8px 8px 8px 16px',
+  padding: '8px 0',
   zIndex: '1000',
   color: '$textPrimary',
   backgroundColor: '$backgroundPrimary',
-  borderTop: '1px solid $textPrimary',
 });
 
-const MenuItem = styled('span', {
+const SectionItem = styled('span', {
   fontWeight: 700,
   color: '$textPrimary',
   fontSize: '24px',
   lineHeight: '28px',
+  display: 'inline-block',
+  padding: '8px 0',
+});
+
+const MenuItemWrapper = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+const MenuItem = styled('span', {
+  fontWeight: 700,
+  color: '$textPrimary',
+  fontSize: '18px',
+  lineHeight: '28px',
 });
 
 const MenuIconWrapper = styled('div', {
@@ -81,6 +100,10 @@ const IconWrapper = styled('div', {
   height: '32px',
 });
 
+const Divider = styled('hr', {
+  borderTop: '1px solid $textPrimary',
+});
+
 const NavBarMobile = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const { resolvedTheme } = useTheme();
@@ -117,16 +140,32 @@ const NavBarMobile = () => {
       {isMobileMenuOpen && (
         <ForeGroundContainer onClick={handleMobileMenuClick}>
           <MenuContainer>
-            <MenuWrapper>
-              {MobileNavBarMenus.map((menu) => (
-                <Link key={menu.route} href={menu.route} passHref>
-                  <MenuList>
-                    <MenuItem>{menu.title}</MenuItem>
+            {SectionMenu.map((section) => (
+              <MenuWrapper key={section.label}>
+                <SectionItem>{section.label}</SectionItem>
+                <Divider />
+                <MenuList>
+                  {section.items.map((menu) => (
+                    <Link key={menu.route} href={menu.route} passHref>
+                      <MenuItemWrapper>
+                        <MenuItem>{menu.title}</MenuItem>
+                        <LinkArrowIcon width="28" height="28" />
+                      </MenuItemWrapper>
+                    </Link>
+                  ))}
+                </MenuList>
+              </MenuWrapper>
+            ))}
+            {LinkMenu.map((menu) => (
+              <MenuWrapper key={menu.title}>
+                <Link key={menu.route} href={menu.route}>
+                  <MenuItemWrapper>
+                    <SectionItem>{menu.title}</SectionItem>
                     <LinkArrowIcon width="28" height="28" />
-                  </MenuList>
+                  </MenuItemWrapper>
                 </Link>
-              ))}
-            </MenuWrapper>
+              </MenuWrapper>
+            ))}
           </MenuContainer>
         </ForeGroundContainer>
       )}