Merge branch 'fe/feat/61-Header' into 'fe/develop'

Feat : Header 컴포넌트 ui 구현 - S11P21S002-61

See merge request s11-s-project/S11P21S002!6

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>

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>

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 = {};

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