Merge branch 'main' into setting/#382

src/stories/Base/TopHeader.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IconHamburger } 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!🍔');
+        }}
+      >
+        <IconHamburger 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;