Merge pull request #117 from boostcampwm2023/FE/feature/#31-Header-컴포…

…넌트-구현

Fe/feature/#31 header 컴포넌트 구현

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].*' },

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 (
+    <div className="flex justify-between items-center surface-content text-default pr-[28px] pl-[28px] pt-[12px] pb-[12px]">
+      <HeaderLeft />
+      <HeaderRight items={rightItems} />
+    </div>
+  );
+};

frontend/src/components/Header/HeaderLeft.tsx

@@ -0,0 +1,9 @@
+import { Link } from "react-router-dom";
+
+export default function HeaderLeft() {
+  return (
+    <div className="display-bold16">
+      <Link to="/">마법의 소라고둥</Link>
+    </div>
+  );
+};

frontend/src/components/Header/HeaderRight.tsx

@@ -0,0 +1,7 @@
+interface HeaderRightProps {
+  items: React.ReactNode[];
+}
+
+export default function HeaderRight({ items }: HeaderRightProps) {
+  return <div className="flex gap-[16px]">{items}</div>;
+};

frontend/src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default } from './Header';