Feat: 헤더 컴포넌트 인터페이스 추가 구현

package.json

@@ -13,12 +13,15 @@
     "prepare": "husky"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": ["biome check"]
+    "*.{js,jsx,ts,tsx}": [
+      "biome check"
+    ]
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.13.5",
     "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.1.6",
     "@tanstack/react-query": "^5.62.10",
     "@tanstack/react-query-devtools": "^5.62.11",

src/Menu/page.tsx

@@ -13,7 +13,7 @@ import { Link } from "react-router";
 export default function MenuPage() {
   return (
     <>
-      <Header left={"왼쪽"} center={"중앙"} right={"오른쪽"} />
+      <Header title={"중앙"} />
       {version}
       <Card variant="surface">menu</Card>
 

src/common/components/Header.tsx

@@ -1,19 +1,86 @@
 import styled from "@emotion/styled";
+import { ChevronLeftIcon } from "@radix-ui/react-icons";
 import type { ReactElement } from "react";
+import { useNavigate } from "react-router";
 import { Z_INDEX } from "../constants/zIndex";
+import { rem } from "../utils/rem";
 
+/**
+ * Header 컴포넌트 Props
+ *
+ * 우선순위: render* > backButton, title > 기본 뒤로가기 버튼
+ */
 interface HeaderProps {
-  left?: ReactElement | string;
-  center: ReactElement | string;
-  right?: ReactElement | string;
+  /** 백 버튼 커스터마이징 */
+  backButton?: {
+    renderIcon?: () => ReactElement;
+    onClick?: () => void;
+  };
+  /** 헤더 제목 */
+  title?: string;
+  /** 왼쪽 섹션 커스터마이징 */
+  renderLeft?: () => ReactElement;
+  /** 중앙 섹션 커스터마이징 */
+  renderCenter?: () => ReactElement;
+  /** 오른쪽 섹션 커스터마이징 */
+  renderRight?: () => ReactElement;
 }
 
-function Header({ left, center, right }: HeaderProps) {
+/**
+ * 페이지 헤더 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * // default (backButton, title)
+ * <Header title="홈" />
+ *
+ * // backButton ui, 이벤트 커스터마이징
+ * <Header title="설정" backButton={{ onClick: () => navigate('/') }} />
+ *
+ * // 섹션별 커스터마이징 (renderLeft, renderCenter, renderRight)
+ * <Header renderCenter={() => <SearchBar />} />
+ * ```
+ */
+function Header({ backButton, title, renderLeft, renderCenter, renderRight }: HeaderProps) {
+  const navigate = useNavigate();
+
+  const renderBackButton = () => {
+    const onClickBackButton = () => {
+      if (backButton && "onClick" in backButton && backButton.onClick) {
+        backButton.onClick();
+        return;
+      }
+      // default behavior
+      navigate(-1);
+    };
+
+    return (
+      <button type="button" onClick={onClickBackButton}>
+        {(() => {
+          if (backButton && "renderIcon" in backButton && backButton.renderIcon) {
+            return backButton.renderIcon();
+          }
+          // default back button icon
+          return <ChevronLeftIcon width={28} height={28} />;
+        })()}
+      </button>
+    );
+  };
+
+  const renderCenterElement = () => renderCenter && <CenterElement as="div">{renderCenter()}</CenterElement>;
+
+  const renderTitleElement = () =>
+    title && (
+      <CenterElement as="h1" css={{ fontSize: rem(1.8), fontWeight: "700" }}>
+        {title}
+      </CenterElement>
+    );
+
   return (
     <HeaderWrapper aria-label="페이지 헤더">
-      <LeftElement>{left}</LeftElement>
-      <CenterElement as={typeof center === "string" ? "h1" : "div"}>{center}</CenterElement>
-      <RightElement>{right}</RightElement>
+      <LeftElement>{renderLeft?.() ?? renderBackButton()}</LeftElement>
+      {renderCenterElement() ?? renderTitleElement()}
+      <RightElement>{renderRight?.()}</RightElement>
     </HeaderWrapper>
   );
 }
@@ -31,6 +98,7 @@ const HeaderWrapper = styled.header({
   height: "4.8rem",
 
   backgroundColor: "white",
+  boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.1)",
 });
 
 const LeftElement = styled.div({