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 ( + + ); +} + +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; }