feat: top navigation bar를 구현하라 (#9)

* feat: top navigation bar를 구현하라 - 모든 페이지 route 적용 - 스타일 적용 * style: navigation bar padding 추가
DNDACADEMY · Jun 29, 2024 · 163260b · 163260b
1 parent 3f285d0
commit 163260b
Show file tree

Hide file tree

Showing 16 changed files with 234 additions and 14 deletions.
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -0,0 +1,7 @@
+function BlogPage() {
+ return (
+ <div>BlogPage</div>
+ );
+}
+
+export default BlogPage;
diff --git a/src/app/dnd/about/page.tsx b/src/app/dnd/about/page.tsx
@@ -0,0 +1,7 @@
+function AboutPage() {
+ return (
+ <div>AboutPage</div>
+ );
+}
+
+export default AboutPage;
diff --git a/src/app/dnd/culture/page.tsx b/src/app/dnd/culture/page.tsx
@@ -0,0 +1,7 @@
+function CulturePage() {
+ return (
+ <div>CulturePage</div>
+ );
+}
+
+export default CulturePage;
diff --git a/src/app/jobs/page.tsx b/src/app/jobs/page.tsx
@@ -0,0 +1,7 @@
+function JobsPage() {
+ return (
+ <div>JobsPage</div>
+ );
+}
+
+export default JobsPage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,20 +1,25 @@
 import clsx from 'clsx';
 
+import TopNavigationBar from '@/components/global/TopNavigationBar';
+
 import { pretendardFont, senFont } from './fonts';
 
 import 'src/styles/global.scss';
 
 export const metadata = {
- title: 'Create Next App',
- description: 'Generated by create next app',
+ title: 'DND',
+ description: 'DND는 개발자와 디자이너라면 누구나 참여할 수 있는 IT비영리단체입니다.',
 };
 
 function RootLayout({ children }: {
  children: React.ReactNode
 }) {
  return (
  <html lang="ko" className={clsx(senFont.variable, pretendardFont.variable)}>
- <body>{children}</body>
+ <body>
+ <TopNavigationBar />
+ {children}
+ </body>
  </html>
  );
 }

diff --git a/src/app/organizers/page.tsx b/src/app/organizers/page.tsx
@@ -0,0 +1,7 @@
+function OrganizersPage() {
+ return (
+ <div>OrganizersPage</div>
+ );
+}
+
+export default OrganizersPage;
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
@@ -0,0 +1,7 @@
+function ProjectsPage() {
+ return (
+ <div>ProjectsPage</div>
+ );
+}
+
+export default ProjectsPage;
diff --git a/src/app/reviews/page.tsx b/src/app/reviews/page.tsx
@@ -0,0 +1,7 @@
+function ReviewsPage() {
+ return (
+ <div>ReviewsPage</div>
+ );
+}
+
+export default ReviewsPage;
diff --git a/src/components/global/TopNavigationBar/index.module.scss b/src/components/global/TopNavigationBar/index.module.scss
@@ -0,0 +1,37 @@
+@import "/src/styles/main";
+
+
+.navigationWrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ height: 72px;
+ padding: 0 24px;
+ width: 100%;
+ border-bottom: 1px solid color('gray08');
+ background-color: color('bgsecondary');
+ z-index: var(--top-navigation-z-index);
+
+ .logoLink {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .navigationContents {
+ max-width: 1156px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+}
+
+.space {
+ display: flex;
+ max-width: 1156px;
+ width: 100%;
+ height: 72px;
+}
diff --git a/src/components/global/TopNavigationBar/index.tsx b/src/components/global/TopNavigationBar/index.tsx
@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import TopNavigationMenu from '../TopNavigationMenu';
+
+import styles from './index.module.scss';
+
+function TopNavigationBar() {
+ return (
+ <>
+ <nav className={styles.navigationWrapper}>
+ <div className={styles.navigationContents}>
+ <Link href="/" className={styles.logoLink}>
+ <Image
+ src="https://dnd-academy-v3.s3.ap-northeast-2.amazonaws.com/images/logo-symbol.svg"
+ alt="logo"
+ width={32}
+ height={36}
+ priority
+ />
+ </Link>
+ <TopNavigationMenu />
+ </div>
+ </nav>
+ <div className={styles.space} />
+ </>
+ );
+}
+
+export default TopNavigationBar;
diff --git a/src/components/global/TopNavigationMenu/index.module.scss b/src/components/global/TopNavigationMenu/index.module.scss
@@ -0,0 +1,37 @@
+@import '/src/styles/main';
+
+.topNavigationMenuWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+ user-select: none;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ & > li {
+ .active {
+ font-weight: 700;
+
+ @include text-color('bgprimary');
+ }
+
+ & > a {
+ padding: 12px 24px;
+ font-size: 14px;
+ font-weight: 400;
+ text-decoration: none;
+ transition: color 0.2s ease-in-out;
+
+ .active {
+ font-weight: 700;
+
+ @include text-color('bgprimary');
+ }
+
+ @include text-color('gray03');
+ }
+ }
+}
diff --git a/src/components/global/TopNavigationMenu/index.tsx b/src/components/global/TopNavigationMenu/index.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { Route } from 'next';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import clsx from 'clsx';
+
+import styles from './index.module.scss';
+
+function TopNavigationMenu() {
+ const pathname = usePathname() as Route;
+
+ return (
+ <ul className={styles.topNavigationMenuWrapper}>
+ <li>
+ <Link href="/" className={clsx(pathname === '/' && styles.active)}>
+ 홈
+ </Link>
+ </li>
+ <li>
+ <Link href="/projects" className={clsx(pathname === '/projects' && styles.active)}>
+ 프로젝트
+ </Link>
+ </li>
+ <li>
+ {/* TODO - sub navigation으로 변경 */}
+ <Link href="/dnd/about" className={clsx(pathname === '/dnd/about' && styles.active)}>
+ DND
+ </Link>
+ </li>
+ <li>
+ <Link href="/reviews" className={clsx(pathname === '/reviews' && styles.active)}>
+ 후기
+ </Link>
+ </li>
+ <li>
+ <Link href="/blog" className={clsx(pathname === '/blog' && styles.active)}>
+ 블로그
+ </Link>
+ </li>
+ <li>
+ <Link href="/jobs" className={clsx(pathname === '/jobs' && styles.active)}>
+ 채용
+ </Link>
+ </li>
+ </ul>
+ );
+}
+
+export default TopNavigationMenu;
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -1,6 +1,7 @@
 @import '~sanitize.css';
 @import "./variables";
 @import "./mixin/text";
+@import "./mixin/functions";
 
 $font-sen: var(--font-sen);
 $font-pretendard: var(--font-pretendard);
@@ -11,6 +12,11 @@ html {
  -moz-osx-font-smoothing: grayscale;
 }
 
+body {
+ background-color: color('bgsecondary');
+ color: color("bgprimary");
+}
+
 h1,
 h2,
 h3,

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,3 +1,2 @@
 @import "./mixin/text";
 @import "./mixin/functions";
-@import "./transition";
diff --git a/src/styles/mixin/functions.scss b/src/styles/mixin/functions.scss
@@ -1,3 +1,6 @@
+@use "sass:string";
+@use "sass:list";
+
 @function str-split($string, $separator) {
  $split-arr: ();
  $index: string.index($string, $separator);

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -10,14 +10,17 @@
  --error: #FF7878;
  --info: #00D3F2;
 
- /* grey */
- --grey9: #13161C;
- --grey8: #292C31;
- --grey7: #404246;
- --grey6: #5E6163;
- --grey5: #909192;
- --grey4: #C5C6C8;
- --grey3: #E1E2E5;
- --grey2: #EDEEF0;
- --grey1: #F3F5F9;
+ /* gray */
+ --gray09: #13161C;
+ --gray08: #292C31;
+ --gray07: #404246;
+ --gray06: #5E6163;
+ --gray05: #909192;
+ --gray04: #C5C6C8;
+ --gray03: #E1E2E5;
+ --gray02: #EDEEF0;
+ --gray01: #F3F5F9;
+
+ /* zIndex */
+ --top-navigation-z-index: 99;
 }