[#127] Add Header for the layout

ui/package.json

@@ -25,6 +25,7 @@
     "test-storybook": "test-storybook --browsers chromium webkit"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.1",
     "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
     "next": "^14.0.1",

ui/src/app/(board)/layout.tsx

@@ -0,0 +1,10 @@
+import { Header } from '@/components/layout/header';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Header />
+      <>{children}</>
+    </>
+  );
+}

ui/src/app/(board)/review/page.tsx

@@ -5,6 +5,30 @@ export default function Page() {
     <>
       <h1>This is review board</h1>
       <Link href="/review/1">review #1 detail</Link>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
+      <h1>This is review board</h1>
     </>
   );
 }

ui/src/components/layout/header.tsx

@@ -0,0 +1,38 @@
+import { NavLinks } from '@/components/layout/nav-links';
+import Logo from '@/components/logo';
+import SideBar from '@/components/layout/sidebar';
+import Text from '@/components/atomic/text';
+import Link from 'next/link';
+
+export function Header() {
+  return (
+    <header className="sticky top-0 flex w-full items-center gap-4 border-b px-6 py-4">
+      <div className="absolute inset-0 -z-10 w-full bg-white/30 backdrop-blur-sm" />
+      <div className="block">
+        <Link href="/" scroll={false}>
+          <Logo />
+        </Link>
+      </div>
+      <div className="flex flex-1 items-center justify-end gap-4">
+        <nav className="hidden items-center gap-4 sm:flex">
+          <NavLinks />
+        </nav>
+        <SignButton />
+        <nav className="flex items-center sm:hidden">
+          <SideBar SignButton={<SignButton />} />
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+function SignButton() {
+  return (
+    // TODO: use server action
+    <form className="hover:cursor-pointer">
+      <Text size="lg" weight="medium">
+        Sign In
+      </Text>
+    </form>
+  );
+}

ui/src/components/layout/nav-links.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import Text from '@/components/atomic/text';
+
+interface Link {
+  name: string;
+  href: string;
+}
+
+const links: Link[] = [
+  { name: 'Review', href: '/review' },
+  { name: 'Comment', href: '/comment' },
+];
+
+export function NavLinks() {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {links.map((link) => {
+        return (
+          <Link key={link.name} href={link.href} scroll={false}>
+            <Text size="lg" weight={pathname.startsWith(link.href) ? 'black' : 'medium'}>
+              {link.name}
+            </Text>
+          </Link>
+        );
+      })}
+    </>
+  );
+}

ui/src/components/layout/sidebar.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { NavLinks } from '@/components/layout/nav-links';
+import { usePathname } from 'next/navigation';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
+
+export default function Sidebar({ SignButton }: { SignButton: JSX.Element }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const path = usePathname();
+  useEffect(() => setIsOpen(false), [path]);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>
+        <Bars3Icon className="w-6" />
+      </button>
+      {isOpen && (
+        <>
+          <div className="fixed inset-0 bg-black/20" onClick={() => setIsOpen(false)} />
+          <div className="fixed right-0 top-0 flex h-screen flex-col gap-4 bg-white px-6 py-4">
+            {/* TODO: h-[52px] is for temporal LOGO size. */}
+            <div className="flex h-[52px] items-center gap-4">
+              {SignButton}
+              <XMarkIcon className="w-6" onClick={() => setIsOpen(false)} />
+            </div>
+            <NavLinks />
+          </div>
+        </>
+      )}
+    </>
+  );
+}

ui/src/components/logo.tsx

@@ -0,0 +1,8 @@
+// TODO: This should be replaced with real LOGO
+export default function Logo() {
+  return (
+    <div className="flex h-min w-min items-center justify-center bg-orange-100 p-2 text-3xl font-bold ">
+      <p>MR.C</p>
+    </div>
+  );
+}