Feat: 공통 Header를 구현합니다. (#19)

* feat: add Header component

* chore: add preview code

* fix: remove Flex component and change HeaderWrapper to have flex property

* feat: dynamically change CenterElement tag based on content type

* fix: narrow HeaderProps types to ReactElement or string

* fix: convert styled components to object syntax

* fix: manage z-index values using constants

* fix: set height to 100% for child elements

* fix: change interface naming

src/Menu/page.tsx

@@ -1,3 +1,4 @@
+import Header from "@/common/components/Header";
 import UserListItemCard from "@/common/components/UserListItemCard";
 import UserProfileAvatar from "@/common/components/UserProfileAvatar";
 import { css } from "@emotion/react";
@@ -17,6 +18,11 @@ import { Link } from "react-router";
 export default function MenuPage() {
   return (
     <>
+      <Header
+        leftElement={"왼쪽"}
+        centerElement={"중앙"}
+        rightElement={"오른쪽"}
+      />
       {version}
       <Card variant="surface">menu</Card>
 
@@ -70,5 +76,5 @@ export default function MenuPage() {
 
 const UserListContainer = styled.div({
   width: "100vw",
-  padding: "10px",
+  padding: "1rem",
 });

src/common/components/Header.tsx

@@ -0,0 +1,64 @@
+import type { ReactElement } from "react";
+import styled from "@emotion/styled";
+import { Z_INDEX } from "../constants/zIndex";
+
+interface HeaderProps {
+  left?: ReactElement | string;
+  center: ReactElement | string;
+  right?: ReactElement | string;
+}
+
+function Header({ left, center, right }: HeaderProps) {
+  return (
+    <HeaderWrapper aria-label="페이지 헤더">
+      <LeftElement>{left}</LeftElement>
+      <CenterElement as={typeof center === "string" ? "h1" : "div"}>
+        {center}
+      </CenterElement>
+      <RightElement>{right}</RightElement>
+    </HeaderWrapper>
+  );
+}
+
+export default Header;
+
+const HeaderWrapper = styled.header({
+  position: "sticky",
+  zIndex: Z_INDEX.HEADER,
+  top: 0,
+
+  display: "flex",
+
+  width: "100%",
+  height: "4.8rem",
+
+  backgroundColor: "white",
+});
+
+const LeftElement = styled.div({
+  display: "flex",
+  alignItems: "center",
+
+  position: "absolute",
+  left: "1.5rem",
+
+  height: "100%",
+});
+
+const CenterElement = styled.div({
+  display: "flex",
+  alignItems: "center",
+
+  margin: "0 auto",
+  height: "100%",
+});
+
+const RightElement = styled.div({
+  display: "flex",
+  alignItems: "center",
+
+  position: "absolute",
+  right: "1.5rem",
+
+  height: "100%",
+});

src/common/constants/zIndex.ts

@@ -0,0 +1,5 @@
+export const Z_INDEX = {
+  MODAL: 1000,
+  DROPDOWN: 100,
+  HEADER: 10,
+} as const;