diff --git a/src/Menu/page.tsx b/src/Menu/page.tsx
index da199af..d5e629f 100644
--- a/src/Menu/page.tsx
+++ b/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 (
<>
+
{version}
menu
@@ -70,5 +76,5 @@ export default function MenuPage() {
const UserListContainer = styled.div({
width: "100vw",
- padding: "10px",
+ padding: "1rem",
});
diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx
new file mode 100644
index 0000000..bea895b
--- /dev/null
+++ b/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 (
+
+ {left}
+
+ {center}
+
+ {right}
+
+ );
+}
+
+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%",
+});
diff --git a/src/common/constants/zIndex.ts b/src/common/constants/zIndex.ts
new file mode 100644
index 0000000..48a5f01
--- /dev/null
+++ b/src/common/constants/zIndex.ts
@@ -0,0 +1,5 @@
+export const Z_INDEX = {
+ MODAL: 1000,
+ DROPDOWN: 100,
+ HEADER: 10,
+} as const;