[#357] TopHeader UI 컴포넌트 및 스토리북 작성 (#379)

* feat: TopHeader UI 컴포넌트 및 스토리북 작성

* fix: css padding 설정 및 팀 컨벤션에 맞춰 코드 수정

* fix: TopHeader 컴포넌트 패딩 값 재설정

* fix: TopHeader 메뉴 아이콘 크기 재설정

* fix: 아이콘 svgr 변경 및 사이즈 변경 & prettierrc파일 확장자 json으로 변경

* fix: 아이콘 크기 변경

public/icons/index.ts

@@ -2,3 +2,4 @@ export { default as IconLeftArrow } from './left-arrow.svg';
 export { default as IconShare } from './share.svg';
 export { default as IconPost } from './post.svg';
 export { default as IconOptions } from './options.svg';
+export { default as IconMore } from './more.svg';

src/stories/Base/TopHeader.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IconMore } from '@public/icons';
+import TopHeader from '@/ui/Base/TopHeader';
+
+const meta: Meta<typeof TopHeader> = {
+  title: 'Base/TopHeader',
+  component: TopHeader,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TopHeader>;
+
+const TopHeaderWithMenu = () => {
+  return (
+    <TopHeader label="Profile">
+      <button
+        onClick={() => {
+          alert('HAMBURGUR MENU!🍔');
+        }}
+      >
+        <IconMore width={20} height={20} alt="햄버거메뉴" />
+      </button>
+    </TopHeader>
+  );
+};
+
+export const Default: Story = {
+  args: { label: 'BookArchive' },
+};
+
+export const Menu: Story = {
+  render: () => <TopHeaderWithMenu />,
+};

src/ui/Base/TopHeader.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+interface TopHeaderProps {
+  label: string;
+  children?: ReactNode;
+}
+
+const TopHeader = ({ label, children }: TopHeaderProps) => {
+  return (
+    <div className="flex items-center justify-between px-[2rem] pb-[0.8rem] pt-[2rem]">
+      <p className="text-xl font-bold text-main-900">{label}</p>
+      {children}
+    </div>
+  );
+};
+
+export default TopHeader;