From 0830af5258538e4c961ed04280eabe54317c491d Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Thu, 8 Feb 2024 17:24:12 +0900
Subject: [PATCH 1/2] feat: add heroicons

---
 ui/package-lock.json | 9 +++++++++
 ui/package.json      | 1 +
 2 files changed, 10 insertions(+)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index abfa4998..a1d03324 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -10,6 +10,7 @@
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
+        "@heroicons/react": "^2.1.1",
         "clsx": "^2.1.0",
         "dayjs": "^1.11.10",
         "next": "^14.0.1",
@@ -2877,6 +2878,14 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz",
+      "integrity": "sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
diff --git a/ui/package.json b/ui/package.json
index 8d0c19d0..507889b1 100644
--- a/ui/package.json
+++ b/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",

From 58766db1ae0d224c426bc599dce43901b607287d Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Thu, 8 Feb 2024 18:28:35 +0900
Subject: [PATCH 2/2] feat: add header on board layout

---
 ui/src/app/(board)/layout.tsx          | 10 +++++++
 ui/src/app/(board)/review/page.tsx     | 24 ++++++++++++++++
 ui/src/components/layout/header.tsx    | 38 ++++++++++++++++++++++++++
 ui/src/components/layout/nav-links.tsx | 33 ++++++++++++++++++++++
 ui/src/components/layout/sidebar.tsx   | 33 ++++++++++++++++++++++
 ui/src/components/logo.tsx             |  8 ++++++
 6 files changed, 146 insertions(+)
 create mode 100644 ui/src/app/(board)/layout.tsx
 create mode 100644 ui/src/components/layout/header.tsx
 create mode 100644 ui/src/components/layout/nav-links.tsx
 create mode 100644 ui/src/components/layout/sidebar.tsx
 create mode 100644 ui/src/components/logo.tsx

diff --git a/ui/src/app/(board)/layout.tsx b/ui/src/app/(board)/layout.tsx
new file mode 100644
index 00000000..21d81c6f
--- /dev/null
+++ b/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}</>
+    </>
+  );
+}
diff --git a/ui/src/app/(board)/review/page.tsx b/ui/src/app/(board)/review/page.tsx
index 601ba5d7..24725107 100644
--- a/ui/src/app/(board)/review/page.tsx
+++ b/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>
     </>
   );
 }
diff --git a/ui/src/components/layout/header.tsx b/ui/src/components/layout/header.tsx
new file mode 100644
index 00000000..265a3952
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/ui/src/components/layout/nav-links.tsx b/ui/src/components/layout/nav-links.tsx
new file mode 100644
index 00000000..2a401526
--- /dev/null
+++ b/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>
+        );
+      })}
+    </>
+  );
+}
diff --git a/ui/src/components/layout/sidebar.tsx b/ui/src/components/layout/sidebar.tsx
new file mode 100644
index 00000000..1c46c0b1
--- /dev/null
+++ b/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>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/ui/src/components/logo.tsx b/ui/src/components/logo.tsx
new file mode 100644
index 00000000..b2a574ad
--- /dev/null
+++ b/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>
+  );
+}