Feat: 공통 Header를 구현합니다.

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

src/common/constants/zIndex.ts

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