From dd0bdfbd5c50d878c501518a8d94a75f581932c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Wed, 28 Aug 2024 09:17:50 +0900
Subject: [PATCH] =?UTF-8?q?Feat=20:=20Header=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20ui=20=EA=B5=AC=ED=98=84=20-=20S11P21S002-61?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/icons/bell.svg            |  3 ++
 frontend/src/assets/icons/user.svg            |  3 ++
 .../src/components/Header/index.stories.tsx   | 12 +++++
 frontend/src/components/Header/index.tsx      | 48 +++++++++++++++++++
 4 files changed, 66 insertions(+)
 create mode 100644 frontend/src/assets/icons/bell.svg
 create mode 100644 frontend/src/assets/icons/user.svg
 create mode 100644 frontend/src/components/Header/index.stories.tsx
 create mode 100644 frontend/src/components/Header/index.tsx

diff --git a/frontend/src/assets/icons/bell.svg b/frontend/src/assets/icons/bell.svg
new file mode 100644
index 0000000..28c4e8a
--- /dev/null
+++ b/frontend/src/assets/icons/bell.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 2C7.79 2 6 3.79 6 6V8C6 10.34 4.34 12 2 12H18C15.66 12 14 10.34 14 8V6C14 3.79 12.21 2 10 2ZM2 14H18V16H2V14ZM12 18H8V16H12V18Z" fill="currentColor"/>
+</svg>
diff --git a/frontend/src/assets/icons/user.svg b/frontend/src/assets/icons/user.svg
new file mode 100644
index 0000000..3f0c997
--- /dev/null
+++ b/frontend/src/assets/icons/user.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 2C8.34 2 7 3.34 7 5C7 6.66 8.34 8 10 8C11.66 8 13 6.66 13 5C13 3.34 11.66 2 10 2ZM10 10C7.79 10 5.67 10.79 4 12.07V14H16V12.07C14.33 10.79 12.21 10 10 10Z" fill="currentColor"/>
+</svg>
diff --git a/frontend/src/components/Header/index.stories.tsx b/frontend/src/components/Header/index.stories.tsx
new file mode 100644
index 0000000..4bce462
--- /dev/null
+++ b/frontend/src/components/Header/index.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Header from './index';
+
+const meta: Meta<typeof Header> = {
+  title: 'Components/Header',
+  component: Header,
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {};
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
new file mode 100644
index 0000000..54b067d
--- /dev/null
+++ b/frontend/src/components/Header/index.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import bellIcon from '@/assets/icons/bell.svg';
+import userIcon from '@/assets/icons/user.svg';
+
+export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export default function Header({ className, ...props }: HeaderProps) {
+  return (
+    <header
+      className={cn(
+        'flex h-16 w-full items-center justify-between border-b px-4 sm:px-6 md:px-8 lg:px-10',
+        'bg-color-background-default-default border-color-border-default-default',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-4 md:gap-10">
+        <div
+          className={cn('text-[20px] font-normal tracking-[-1.60px] text-black sm:text-[24px] md:text-[32px]')}
+          style={{ fontFamily: "'Offside-Regular', Helvetica" }}
+        >
+          WorLabel
+        </div>
+        <nav className="items-center hidden gap-5 md:flex">
+          <div className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}>
+            workspace
+          </div>
+          <div className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}>
+            labeling
+          </div>
+        </nav>
+      </div>
+      <div className="flex items-center gap-4 md:gap-5">
+        <img
+          className="w-4 h-4 sm:h-5 sm:w-5"
+          src={bellIcon}
+          alt="Bell Icon"
+        />
+        <img
+          className="w-4 h-4 sm:h-5 sm:w-5"
+          src={userIcon}
+          alt="User Icon"
+        />
+      </div>
+    </header>
+  );
+}