diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
index 817ac3ce..e7caa123 100644
--- a/frontend/.storybook/preview.ts
+++ b/frontend/.storybook/preview.ts
@@ -1,5 +1,7 @@
import type { Preview } from '@storybook/react';
+import '../src/tailwind.css';
+
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
new file mode 100644
index 00000000..5f967060
--- /dev/null
+++ b/frontend/src/components/Header/Header.tsx
@@ -0,0 +1,15 @@
+import HeaderLeft from "./HeaderLeft";
+import HeaderRight from "./HeaderRight";
+
+interface HeaderProps {
+ rightItems: React.ReactNode[];
+}
+
+export default function Header({ rightItems }: HeaderProps) {
+ return (
+
+
+
+
+ );
+};
diff --git a/frontend/src/components/Header/HeaderLeft.tsx b/frontend/src/components/Header/HeaderLeft.tsx
new file mode 100644
index 00000000..61755c2d
--- /dev/null
+++ b/frontend/src/components/Header/HeaderLeft.tsx
@@ -0,0 +1,9 @@
+import { Link } from "react-router-dom";
+
+export default function HeaderLeft() {
+ return (
+
+ 마법의 소라고둥
+
+ );
+};
diff --git a/frontend/src/components/Header/HeaderRight.tsx b/frontend/src/components/Header/HeaderRight.tsx
new file mode 100644
index 00000000..f7790235
--- /dev/null
+++ b/frontend/src/components/Header/HeaderRight.tsx
@@ -0,0 +1,7 @@
+interface HeaderRightProps {
+ items: React.ReactNode[];
+}
+
+export default function HeaderRight({ items }: HeaderRightProps) {
+ return {items}
;
+};
diff --git a/frontend/src/components/Header/index.ts b/frontend/src/components/Header/index.ts
new file mode 100644
index 00000000..579f1ac2
--- /dev/null
+++ b/frontend/src/components/Header/index.ts
@@ -0,0 +1 @@
+export { default } from './Header';