Feat/42 header component (#45)

* feat: 필요없는 import제거

* feat: Header컴포넌트 생성

* feat: Header스토리북 생성

* feat: HeaderType분리 & import

* feat: 불필요한 import문 제거

* feat: header props명 title -> pageTitle로 변경 후 적용

* feat: pageTitle default parameter제공

* feat: header position fixed

* feat: 불필요한 import제거

* feat: Header component 리뷰 반영

* feat: onClick props설정

* feat: 불필요한 주석 제거

* feat: Header 컴포넌트 design 수정

---------

Co-authored-by: Eugene Kim <[email protected]>

src/App.tsx

@@ -1,3 +1,4 @@
+import './styles/index.css'
 import { RouterProvider } from 'react-router-dom'
 import { router } from './routes'
 import './styles/index.css'

src/components/common/header/Header.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Header from './Header'
+const meta = {
+  title: 'Component/Header',
+  component: Header,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    headerType: {
+      control: 'select',
+      options: ['BackPush', 'Logo', 'Close', 'CloseWithTitle']
+    },
+    pageTitle: {
+      control: 'text'
+    },
+    rightElement: {
+      control: 'text'
+    }
+  }
+} satisfies Meta<typeof Header>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BackPushHeader: Story = {
+  args: {
+    headerType: 'BackPush'
+  }
+}
+
+export const LogoHeader: Story = {
+  args: {
+    headerType: 'Logo',
+    pageTitle: 'pageName',
+    rightElement: (
+      <>
+        <span className={'mx-[6px]'}>{'👏'}</span>
+        <span>{'👏'}</span>
+      </>
+    )
+  }
+}
+
+export const CloseHeader: Story = {
+  args: {
+    headerType: 'Close'
+  }
+}
+
+export const CloseWithTitleHeader: Story = {
+  args: {
+    headerType: 'CloseWithTitle',
+    pageTitle: 'pageName'
+  }
+}

src/components/common/header/Header.tsx

@@ -0,0 +1,62 @@
+import type { HeaderProps } from './HeaderType'
+import Icon from '../icon/Icon'
+
+const Header = ({
+  headerType,
+  pageTitle = 'pageTitle',
+  onClick
+}: HeaderProps) => {
+  return (
+    <header
+      className={`fixed left-[50%] top-0 translate-x-[-50%] w-[390px] h-[80px] bg-white-0 text-black-900 px-[22px] border-b-[1px] border-gray-100`}
+    >
+      <div
+        className={`w-full h-full ${
+          headerType === 'BackPush' ||
+          headerType === 'Close' ||
+          headerType === 'CloseWithTitle'
+            ? 'flex items-center justify-start'
+            : 'flex items-center justify-between'
+        }`}
+      >
+        {headerType === 'BackPush' ? (
+          <span onClick={() => alert('뒤로가기')}>
+            <Icon icon={'BackPush'} classStyle={'cursor-pointer'} />
+          </span>
+        ) : headerType === 'Logo' ? (
+          <>
+            <div>
+              <span>{'👍'}</span>
+              <span className={'mx-[20px] font-nsk subHead-18'}>
+                {pageTitle}
+              </span>
+            </div>
+            <div className={'flex items-center justify-between'}>
+              <div className={'mx-[7px]'} onClick={() => alert('알림보기!')}>
+                <Icon icon={'Alarm'} classStyle={'cursor-pointer'} />
+              </div>
+              <span onClick={() => alert('사이드 바 열기')}>
+                <Icon icon={'SideBar'} classStyle={'cursor-pointer'} />
+              </span>
+            </div>
+          </>
+        ) : headerType === 'Close' ? (
+          <span onClick={onClick}>
+            <Icon icon={'Close'} classStyle={'cursor-pointer'} />
+          </span>
+        ) : headerType === 'CloseWithTitle' ? (
+          <div className={'flex cursor-pointer items-center'}>
+            <span onClick={onClick}>
+              <Icon icon={'Close'} classStyle={'cursor-pointer'} />
+            </span>
+            <span className={'mx-[20px] font-nsk subHead-18'}>{pageTitle}</span>
+          </div>
+        ) : (
+          ''
+        )}
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/common/header/HeaderType.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+type HeaderType = 'BackPush' | 'Logo' | 'Close' | 'CloseWithTitle'
+export interface HeaderProps {
+  headerType: HeaderType
+  pageTitle?: string
+  rightElement?: ReactNode
+  onClick?: () => void
+}