diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
new file mode 100644
index 0000000..1768d21
--- /dev/null
+++ b/src/app/blog/page.tsx
@@ -0,0 +1,7 @@
+function BlogPage() {
+ return (
+
BlogPage
+ );
+}
+
+export default BlogPage;
diff --git a/src/app/dnd/about/page.tsx b/src/app/dnd/about/page.tsx
new file mode 100644
index 0000000..c87f057
--- /dev/null
+++ b/src/app/dnd/about/page.tsx
@@ -0,0 +1,7 @@
+function AboutPage() {
+ return (
+ AboutPage
+ );
+}
+
+export default AboutPage;
diff --git a/src/app/dnd/culture/page.tsx b/src/app/dnd/culture/page.tsx
new file mode 100644
index 0000000..da82588
--- /dev/null
+++ b/src/app/dnd/culture/page.tsx
@@ -0,0 +1,7 @@
+function CulturePage() {
+ return (
+ CulturePage
+ );
+}
+
+export default CulturePage;
diff --git a/src/app/jobs/page.tsx b/src/app/jobs/page.tsx
new file mode 100644
index 0000000..a3c047b
--- /dev/null
+++ b/src/app/jobs/page.tsx
@@ -0,0 +1,7 @@
+function JobsPage() {
+ return (
+ JobsPage
+ );
+}
+
+export default JobsPage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5fef555..787f068 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,14 @@
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 }: {
@@ -14,7 +16,10 @@ function RootLayout({ children }: {
}) {
return (
- {children}
+
+
+ {children}
+
);
}
diff --git a/src/app/organizers/page.tsx b/src/app/organizers/page.tsx
new file mode 100644
index 0000000..8eba4e2
--- /dev/null
+++ b/src/app/organizers/page.tsx
@@ -0,0 +1,7 @@
+function OrganizersPage() {
+ return (
+ OrganizersPage
+ );
+}
+
+export default OrganizersPage;
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
new file mode 100644
index 0000000..66aaebd
--- /dev/null
+++ b/src/app/projects/page.tsx
@@ -0,0 +1,7 @@
+function ProjectsPage() {
+ return (
+ ProjectsPage
+ );
+}
+
+export default ProjectsPage;
diff --git a/src/app/reviews/page.tsx b/src/app/reviews/page.tsx
new file mode 100644
index 0000000..f1049fa
--- /dev/null
+++ b/src/app/reviews/page.tsx
@@ -0,0 +1,7 @@
+function ReviewsPage() {
+ return (
+ ReviewsPage
+ );
+}
+
+export default ReviewsPage;
diff --git a/src/components/global/TopNavigationBar/index.module.scss b/src/components/global/TopNavigationBar/index.module.scss
new file mode 100644
index 0000000..6f348e1
--- /dev/null
+++ 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
new file mode 100644
index 0000000..461ac6a
--- /dev/null
+++ 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 (
+ <>
+
+
+ >
+ );
+}
+
+export default TopNavigationBar;
diff --git a/src/components/global/TopNavigationMenu/index.module.scss b/src/components/global/TopNavigationMenu/index.module.scss
new file mode 100644
index 0000000..a334267
--- /dev/null
+++ 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
new file mode 100644
index 0000000..c4d3ae6
--- /dev/null
+++ 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 (
+
+ -
+
+ 홈
+
+
+ -
+
+ 프로젝트
+
+
+ -
+ {/* TODO - sub navigation으로 변경 */}
+
+ DND
+
+
+ -
+
+ 후기
+
+
+ -
+
+ 블로그
+
+
+ -
+
+ 채용
+
+
+
+ );
+}
+
+export default TopNavigationMenu;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 6cfbaf0..e07161c 100644
--- 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
index 17e3ef2..6a49efc 100644
--- 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
index 21a645c..8a80432 100644
--- 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
index 57f62bf..c6d0b57 100644
--- 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;
}