refactor(#136): 마이페이지 레이아웃에서 Header UI를 별도 컴포넌트로 분리

Author: wkdtnqls0506

src/app/member/profile/_components/Header/Header.css.ts

@@ -0,0 +1,15 @@
+import { style } from "@vanilla-extract/css";
+
+import { semantic } from "@/styles";
+
+export const button = style({
+  width: "2.4rem",
+  height: "2.4rem",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+});
+
+export const icon = style({
+  color: semantic.icon.black,
+});

src/app/member/profile/_components/Header/Header.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import ChevronLeftIcon from "@/assets/chevron-left.svg";
+import { GNB } from "@/components/ui/GNB";
+
+import * as styles from "./Header.css";
+
+export const Header = () => {
+  const router = useRouter();
+
+  const handleClick = () => {
+    router.push("/");
+  };
+
+  return (
+    <GNB
+      align='center'
+      title='마이페이지'
+      leftAddon={
+        <button
+          type='button'
+          onClick={handleClick}
+          aria-label='홈으로 이동하기'
+          className={styles.button}
+        >
+          <ChevronLeftIcon
+            width={24}
+            height={24}
+            onClick={handleClick}
+            className={styles.icon}
+          />
+        </button>
+      }
+    />
+  );
+};

src/app/member/profile/_components/Header/index.ts

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