Merge branch 'Feat#1493-navbar-split' of https://github.com/42organiz…

…ation/42gg.client into Style/#1504-responsive-css

Layout/AgendaLayout.tsx

@@ -1,4 +1,5 @@
 import { instanceInAgenda } from 'utils/axios';
+import AgendaHeader from 'components/agenda/Layout/AgendaHeader';
 import AgendaModalProvider from 'components/agenda/modal/AgendaModalProvider';
 import Footer from 'components/takgu/Layout/Footer';
 import { useUser } from 'hooks/agenda/Layout/useUser';
@@ -18,7 +19,9 @@ function AgendaAppLayout({ children }: AgendaLayoutProps) {
 
   return (
     <>
-      <div className={styles.background}>
+      <AgendaHeader />
+      <div className={styles.background}></div>
+      <div className={styles.container}>
         {children}
         <Footer />
         <AgendaModalProvider />

Layout/LayoutProvider.tsx

@@ -11,16 +11,16 @@ type LayoutProviderProps = {
 // 로그인 스테이트 등은 각 레이아웃에서 확인
 const LayoutProvider = ({ children }: LayoutProviderProps) => {
   const app = usePathname();
-
   switch (app) {
+    case '':
     case 'agenda':
       return <AgendaAppLayout>{children}</AgendaAppLayout>;
     case 'takgu':
       return <TakguAppLayout>{children}</TakguAppLayout>;
     case 'admin':
       return <AdminAppLayout>{children}</AdminAppLayout>;
     default:
-      return <AgendaAppLayout>{children}</AgendaAppLayout>;
+      return <>{children}</>;
   }
 };
 

components/agenda/Layout/AgendaHeader.tsx

@@ -1,18 +1,47 @@
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { createContext, Dispatch, SetStateAction, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
+import Logo from 'public/image/main-logo.svg';
 import styles from 'styles/agenda/Layout/Header.module.scss';
+import MenuBar from './MenuBar';
+
+export interface HeaderContextState {
+  openMenuState: boolean;
+  setOpenMenuBarState: Dispatch<SetStateAction<boolean>>;
+  resetOpenMenuBarState: () => void;
+}
+
+export const HeaderContext = createContext<HeaderContextState | null>(null);
 
 export default function AgendaHeader() {
+  const [menu, setMenu] = useState<boolean>(false);
+  const resetMenuHandler = () => {
+    setMenu(false);
+  };
+
+  const HeaderState: HeaderContextState = {
+    openMenuState: menu,
+    setOpenMenuBarState: setMenu,
+    resetOpenMenuBarState: resetMenuHandler,
+  };
+
   return (
-    <div className={styles.headerContainer}>
-      <div className={styles.headerWrap}>
-        <div className={styles.headerLeft}>
-          <FiMenu className={styles.menuIcon} />
-          <Link className={styles.logoWrap} href={'/agenda'}>
-            42AGENDA
-          </Link>
+    <HeaderContext.Provider value={HeaderState}>
+      <div className={styles.headerContainer}>
+        <div className={styles.headerWrap}>
+          <div className={styles.headerLeft}>
+            <Link href='/' onClick={HeaderState.resetOpenMenuBarState}>
+              <Logo className={styles.logo} />
+            </Link>
+          </div>
+          <FiMenu
+            className={styles.menuIcon}
+            onClick={() => HeaderState?.setOpenMenuBarState(!menu)}
+          />
         </div>
       </div>
-    </div>
+      <MenuBar isActive={HeaderState.openMenuState} />
+    </HeaderContext.Provider>
   );
 }

components/agenda/Layout/MenuBar.tsx

@@ -0,0 +1,40 @@
+import { useUser } from 'hooks/agenda/Layout/useUser';
+import styles from 'styles/agenda/Layout/MenuBar.module.scss';
+import MenuBarContent from './MenuBarContent';
+
+const MenuBar = ({ isActive }: { isActive: boolean }) => {
+  const user = useUser();
+
+  return (
+    <>
+      <div
+        className={`${styles.container} ${
+          isActive ? styles.active : styles.inactive
+        }`}
+      >
+        <MenuBarContent
+          content={`Hello. ${user?.intraId}`}
+          href='/agenda/profile'
+          as='h2'
+        />
+        <MenuBarContent content='Agenda' href='/agenda' as='h1' />
+        <div className={styles.divider} />
+        <MenuBarContent content='진행중인 대회' href='/agenda' />
+        <MenuBarContent content='티켓 확인하기' href='/agenda/ticket' />
+        {user?.isAdmin && (
+          <>
+            <MenuBarContent content='admin' href='/agenda/admin' as='h1' />
+          </>
+        )}
+      </div>
+
+      <div
+        className={`${styles.bg} ${
+          isActive ? styles.activebg : styles.inactivebg
+        }`}
+      />
+    </>
+  );
+};
+
+export default MenuBar;

components/agenda/Layout/MenuBarContent.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link';
+import { ElementType, useContext } from 'react';
+import styles from 'styles/agenda/Layout/MenuBar.module.scss';
+import { HeaderContext, HeaderContextState } from './AgendaHeader';
+
+interface MenuBarContentProps {
+  as?: ElementType;
+  content: string;
+  href: string;
+}
+
+const MenuBarContent = ({ as, content, href }: MenuBarContentProps) => {
+  const Elem = as || 'p';
+  const closeMenuBar =
+    useContext<HeaderContextState | null>(HeaderContext)
+      ?.resetOpenMenuBarState ||
+    function () {
+      console.log('resetOpenMenuBarState is not defined');
+    };
+
+  return (
+    <div className={styles.content}>
+      <Link href={href} onClick={closeMenuBar}>
+        <button className={styles.button}>
+          <Elem>{content}</Elem>
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default MenuBarContent;

pages/_app.tsx

@@ -65,9 +65,6 @@ function MyApp({ Component, pageProps }: AppProps) {
           <ErrorChecker>
             <QueryClientProvider client={queryClient} contextSharing={true}>
               <LayoutProvider>
-                <HeaderStateContext>
-                  <Header />
-                </HeaderStateContext>
                 <Component {...pageProps} />
               </LayoutProvider>
               <CustomizedSnackbars />

styles/agenda/Layout/Header.module.scss

@@ -1,21 +1,41 @@
 @import 'styles/agenda/common.scss';
 
+.headerContainer {
+  position: fixed;
+  top: 0;
+  z-index: 2000;
+  width: 100%;
+  background-color: var(--color-header);
+  border-bottom: var(--default-border);
+  box-shadow: var(--default-box-shadow);
+}
+
 .headerWrap {
   z-index: 2;
   display: flex;
   height: 4rem;
-  margin: 0 0.7rem;
+  // margin: 0 0.7rem;
+  padding: 1rem;
   font-size: $font-size-l;
-  color: white;
+
   justify-content: space-between;
   align-items: center;
 }
 
+.logo {
+  width: 7rem;
+  height: min-content;
+  padding: 0;
+  margin: 0;
+  fill: var(--color-text);
+}
+
 .headerLeft {
   display: flex;
   height: 100%;
   flex: 2;
   gap: 2rem;
+  justify-content: flex-start;
   align-items: center;
   .menuIcon {
     width: 1.5rem;

styles/agenda/Layout/Layout.module.scss

@@ -1,13 +1,18 @@
 @import 'styles/agenda/common.scss';
 .background {
-  position: relative;
+  position: fixed;
+  z-index: -1;
   display: flex;
   width: 100vw;
   min-width: 380px;
-  min-height: 100vh;
+  height: calc(100vh - 4rem);
   flex-direction: column;
   background: var(--color-bg);
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
 }
+
+.container {
+  margin-top: 4rem;
+}

styles/agenda/Layout/MenuBar.module.scss

@@ -0,0 +1,79 @@
+@import 'styles/agenda/common.scss';
+.container {
+  position: fixed;
+  z-index: 1999;
+  width: 25vw;
+  min-width: 200px;
+  height: 100vh;
+  padding: 1rem;
+  background: var(--menubar-bg);
+}
+.inactive {
+  right: calc(max(25vw, 200px) * -1);
+  box-shadow: none;
+  transition: all 0.5s;
+}
+.active {
+  right: 0;
+  box-shadow: -1px 0 6px 0 var(--color-text);
+  transition: all 0.5s;
+}
+
+.inactivebg {
+  right: 100vw;
+  transition: all 0.5s;
+}
+.activebg {
+  right: 0;
+  transition: all 0.5s;
+}
+
+.bg {
+  position: fixed;
+  z-index: 1998;
+  width: 100vw;
+  height: 100vh;
+  background: var(--box-bg-3);
+  box-shadow: 5px 0 20px 10px var(--box-bg-3);
+  opacity: 0.5;
+}
+.button {
+  display: flex;
+  width: 100%;
+  padding: none;
+  margin: none;
+  background: none;
+  border: none;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.content {
+  margin: 0;
+  p {
+    @include text(description);
+  }
+  h1 {
+    @include text(sub-menu);
+    padding-top: 0.5rem;
+    padding-bottom: 0.2rem;
+    font-size: $font-size-m;
+  }
+  h2 {
+    margin-bottom: 1rem;
+    font-size: $font-size-s;
+    color: var(--color-text);
+  }
+  p,
+  h1,
+  h2 {
+    @include hoverAction;
+  }
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: 0.5rem 0;
+  border-bottom: var(--default-border);
+}

styles/agenda/agendaDetail/AgendaDetail.module.scss

@@ -5,7 +5,7 @@
   width: 100%;
   height: 100%;
   flex-direction: column;
-  padding: 0 2rem;
+  padding: 1rem;
   justify-content: center;
   align-items: center;
 }

styles/agenda/common.scss

@@ -248,3 +248,10 @@ $font-size-xs: 0.8rem; // $small-font
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
 }
+
+@mixin hoverAction {
+  transition: 0.3s;
+  &:hover {
+    transform: scale(1.05);
+  }
+}

styles/agenda/utils/PageController.module.scss

@@ -36,7 +36,8 @@
 .current {
   width: 0.6rem;
   height: 0.6rem;
-  padding: 0;
+  padding: 0px;
+  opacity: 1;
 }
 
 .rest {
@@ -49,9 +50,10 @@
 .navContainer {
   display: flex;
   width: max-content;
-  max-width: 50%;
+  max-width: 100%;
   padding: 0.4rem;
   margin: 0.5rem auto;
+  overflow: hidden;
   background: rgba(0, 0, 0, 0.01);
   border-radius: 1rem;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;