💄네비바 디자인 반영 (#121)

* 💄네비바 디자인 반영 * fix: 네비바 점들 중앙 정렬 * design: 디자인 리뷰 반영
wafflestudio · Feb 3, 2024 · 54b865b · 54b865b
1 parent 03cad73
commit 54b865b
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 59 deletions.
diff --git a/app/[locale]/content.tsx b/app/[locale]/content.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { PropsWithChildren, Suspense } from 'react';
+
+import Footer from '@/components/layout/footer/Footer';
+import Header from '@/components/layout/header/Header';
+
+import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
+
+import { main } from '@/types/page';
+
+export default function Content({ children }: PropsWithChildren) {
+  const node = useCurrentSegmentNode();
+  const ml = node === main ? `ml-[11rem]` : 'ml-[6.25rem]';
+
+  return (
+    <div className={`flex flex-col flex-1 font-noto-demi ${ml}`}>
+      <Suspense>
+        <Header />
+      </Suspense>
+      <main className="flex flex-col flex-1 overflow-scroll overflow-x-hidden">
+        <div className="flex-1">{children}</div>
+        <Footer />
+      </main>
+    </div>
+  );
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -1,22 +1,21 @@
 import { notFound } from 'next/navigation';
 import { NextIntlClientProvider } from 'next-intl';
-import { PropsWithChildren, ReactNode, Suspense } from 'react';
+import { ReactNode } from 'react';
 import { Toaster } from 'react-hot-toast';
 
 import ModalContextProvider from '@/contexts/ModalContext';
 import NavbarContextProviderWrapper from '@/contexts/NavbarContextWrapper';
 import SessionContextProvider from '@/contexts/SessionContext';
 
 import BetaBanner from '@/components/common/BetaBanner';
-import Footer from '@/components/layout/footer/Footer';
-import Header from '@/components/layout/header/Header';
 import Navbar from '@/components/layout/navbar/Navbar';
 import ModalContainer from '@/components/modal/ModalContainer';
 
 import { noto, notoDemiLight, yoonGothic } from '@/styles/font';
 
 import '@/styles/globals.css';
 
+import Content from './content';
 import { SWRProvider } from './swr-provider';
 
 export const metadata = {
@@ -56,20 +55,6 @@ export default async function RootLayout({
   );
 }
 
-function Content({ children }: PropsWithChildren) {
-  return (
-    <div className="flex flex-col flex-1 font-noto-demi">
-      <Suspense>
-        <Header />
-      </Suspense>
-      <main className="flex flex-col flex-1 overflow-scroll overflow-x-hidden">
-        <div className="flex-1">{children}</div>
-        <Footer />
-      </main>
-    </div>
-  );
-}
-
 async function ContextProviders({ locale, children }: { locale: string; children: ReactNode }) {
   let messages;
   try {

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
@@ -32,7 +32,7 @@ export default async function MainPage() {
   const data = await getMainContents();
 
   return (
-    <div className="w-[1264px] h-[1270px] relative mx-auto overflow-hidden">
+    <div className={`w-[1264px] h-[1270px] relative mx-auto overflow-hidden`}>
       <BgVideo />
       <BackgroundNode />
       <ShortCuts shortCuts={shortCuts} />

diff --git a/components/layout/navbar/Navbar.tsx b/components/layout/navbar/Navbar.tsx
@@ -2,19 +2,24 @@
 
 import { useNavbarContext } from '@/contexts/NavbarContext';
 
+import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
+
+import { main } from '@/types/page';
+
 import NavbarDetail from './NavbarDetail';
 import NavbarRoot from './NavbarRoot';
 
 export default function Navbar() {
   const { navbarState, setNavbarState } = useNavbarContext();
+  const node = useCurrentSegmentNode();
 
   const handleMouseLeave = () => {
-    // 세부 페이지가 보이고 있다면 닫기
-    navbarState.type === 'hovered' && setNavbarState({ type: 'expanded' });
+    if (node === main) setNavbarState({ type: 'expanded' });
+    else setNavbarState({ type: 'closed' });
   };
 
   return (
-    <div className="relative bg-main-orange flex" onMouseLeave={handleMouseLeave}>
+    <div className={`absolute h-[100vh] z-50 bg-[#323235] flex`} onMouseLeave={handleMouseLeave}>
       <NavbarRoot state={navbarState} setState={setNavbarState} />
       {navbarState.type === 'hovered' && <NavbarDetail segmentNode={navbarState.segmentNode} />}
     </div>

diff --git a/components/layout/navbar/NavbarRoot.tsx b/components/layout/navbar/NavbarRoot.tsx
@@ -1,11 +1,8 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import Link from 'next-intl/link';
 
 import { NavbarState } from '@/contexts/NavbarContext';
-import NaviBarClose from '@/public/image/NaviBar_Close.svg';
-import NaviBarMenu from '@/public/image/NaviBar_Menu.svg';
 import SnuLogo from '@/public/image/SNU_Logo.svg';
 
 import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
@@ -22,22 +19,15 @@ export default function NavbarRoot({
   setState: (state: NavbarState) => void;
 }) {
   const expand = () => setState({ type: 'expanded' });
-  const close = () => setState({ type: 'closed' });
-  const width = state.type === 'closed' ? 'w-[6.25rem]' : 'w-[11rem]';
+  const width = state.type === 'closed' ? `w-[6.25rem]` : `w-[11rem]`;
 
   return (
     <div
-      className={`flex flex-col items-center pt-[2.25rem] ${width} overflow-y-scroll no-scrollbar`}
+      className={`flex flex-col items-center pt-[2.25rem] ${width} overflow-y-scroll no-scrollbar transition-all duration-300 ease-in-out`}
+      onMouseEnter={expand}
     >
       <SNULogo />
-      {state.type === 'closed' ? (
-        <ExpandButton expand={expand} />
-      ) : (
-        <>
-          <NavList state={state} setState={setState} />
-          <CloseButton close={close} />
-        </>
-      )}
+      {state.type === 'closed' ? <DotList /> : <NavList state={state} setState={setState} />}
     </div>
   );
 }
@@ -53,11 +43,35 @@ function SNULogo() {
   );
 }
 
-function ExpandButton({ expand }: { expand: () => void }) {
+function DotList() {
+  const cur = useCurrentSegmentNode();
   return (
-    <button onClick={expand} className="mt-10">
-      <NaviBarMenu />
-    </button>
+    <div className="flex flex-col items-center gap-[2.72rem] mt-[3.38rem]">
+      {mainSegmentNode.children?.map((node, idx) => {
+        return isAncestorNode(node, cur) ? <DotFill key={idx} /> : <DotEmpty key={idx} />;
+      })}
+    </div>
+  );
+}
+
+function DotFill() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="7" height="27" viewBox="0 0 7 27" fill="none">
+      <path d="M3.5 23.5L3.5 3.5" stroke="white" stroke-width="6" stroke-linecap="round" />
+    </svg>
+  );
+}
+
+function DotEmpty() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="10" viewBox="0 0 11 10" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6 1.8C4.23269 1.8 2.8 3.23269 2.8 5C2.8 6.76731 4.23269 8.2 6 8.2C7.76731 8.2 9.2 6.76731 9.2 5C9.2 3.23269 7.76731 1.8 6 1.8ZM6 1C3.79086 1 2 2.79086 2 5C2 7.20914 3.79086 9 6 9C8.20914 9 10 7.20914 10 5C10 2.79086 8.20914 1 6 1Z"
+        fill="#737373"
+      />
+    </svg>
   );
 }
 
@@ -81,10 +95,6 @@ function NavList({
     }
   };
 
-  const makeMouseEnterHandler = (child: SegmentNode) => () => {
-    setState({ type: 'hovered', segmentNode: child });
-  };
-
   return (
     <nav>
       <ul className="mx-12 mt-12 flex flex-col text-center gap-9">
@@ -93,7 +103,7 @@ function NavList({
             key={i}
             highlight={shouldHighlight(child)}
             name={t(child.name)}
-            onMouseEnter={makeMouseEnterHandler(child)}
+            onMouseEnter={() => setState({ type: 'hovered', segmentNode: child })}
           />
         ))}
       </ul>
@@ -114,18 +124,10 @@ function NavListRow({
     <li
       className={`text-neutral-800 font-yoon text-md font-medium ${
         !highlight && 'opacity-60'
-      } cursor-pointer`}
+      } cursor-pointer whitespace-nowrap`}
       onMouseEnter={onMouseEnter}
     >
       {name}
     </li>
   );
 }
-
-function CloseButton({ close }: { close: () => void }) {
-  return (
-    <button onClick={close} className="my-8">
-      <NaviBarClose />
-    </button>
-  );
-}
diff --git a/components/layout/pageLayout/PageLayout.tsx b/components/layout/pageLayout/PageLayout.tsx
@@ -3,8 +3,6 @@
 import { useTranslations } from 'next-intl';
 import React, { ReactNode } from 'react';
 
-import { useNavbarContext } from '@/contexts/NavbarContext';
-
 import PageTitle from '@/components/layout/pageLayout/PageTitle';
 import SubNavbar from '@/components/layout/pageLayout/SubNavbar';
 
@@ -21,7 +19,6 @@ export default function PageLayout({ title, titleType, titleMargin, children }:
   const t = useTranslations('Nav');
   const currentPage = useCurrentSegmentNode();
   title ||= t(currentPage.name);
-  const { navbarState } = useNavbarContext();
 
   return (
     <div className="grid grid-rows-[auto_1fr] grid-cols-auto mx-[3.75rem] gap-x-10 justify-center">
@@ -32,7 +29,7 @@ export default function PageLayout({ title, titleType, titleMargin, children }:
         margin={titleMargin ?? ''}
       />
       <div className="w-[52.5rem] row-start-2 col-start-1">{children}</div>
-      {navbarState.type === 'closed' && <SubNavbar currentTab={currentPage} />}
+      <SubNavbar currentTab={currentPage} />
     </div>
   );
 }
diff --git a/contexts/NavbarContext.tsx b/contexts/NavbarContext.tsx
@@ -3,7 +3,9 @@
 import { usePathname } from 'next/navigation';
 import { ReactNode, createContext, useContext, useState } from 'react';
 
-import { SegmentNode } from '@/types/page';
+import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
+
+import { SegmentNode, main } from '@/types/page';
 
 export type NavbarState =
   | {
@@ -32,8 +34,10 @@ const NavbarContext = createContext<NavbarContextContent>({
 
 export function NavbarContextProvider({ children }: { children: ReactNode }) {
   const pathName = usePathname();
+  const node = useCurrentSegmentNode();
+
   const [navbarState, setNavbarState] = useState<NavbarState>({
-    type: pathName === '/' ? 'expanded' : 'closed',
+    type: node === main ? 'expanded' : 'closed',
   });
 
   return (