[Feat/#17] 모바일 Header 공통 컴포넌트 추가

package.json

@@ -81,5 +81,6 @@
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/app/mobile/page.tsx

@@ -1,12 +1,14 @@
 import MobileLayout from '@/components/mobile/layout';
+import Header from '@/components/mobile/Header';
 
 export default function Mobile() {
   return (
     <MobileLayout>
-      <div className="w-full bg-main-primary">
+      {/* <div className="w-full bg-main-primary">
         <h1>국민대학교 소프트웨어융합대학</h1>
         <p className="text-3xl font-bold">복지물품 대여 시스템</p>
-      </div>
+      </div> */}
+      <Header title="관리자 대시보드" menu />
     </MobileLayout>
   );
 }

src/components/mobile/Header/index.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import IconArrow from 'public/assets/icon-arrow.svg';
+import IconHamburger from 'public/assets/icon-hamburger.svg';
+
+interface HeaderProps {
+  title: string;
+  menu?: boolean;
+}
+
+export default function Header({ title, menu = false }: HeaderProps) {
+  const router = useRouter();
+
+  return (
+    <section className="flex h-8 w-full items-center justify-between px-4 py-1.5">
+      <button
+        className="h-6 w-6 items-center justify-center"
+        type="button"
+        onClick={() => router.back()}
+      >
+        <IconArrow />
+      </button>
+      <div className="font-medium text-black-primary">{title}</div>
+      {menu ? (
+        <button
+          className="h-6 w-6 items-center justify-center"
+          type="button"
+          onClick={() => console.log('사이드바 오픈!')}
+        >
+          <IconHamburger />
+        </button>
+      ) : (
+        <div className="h-6 w-6" />
+      )}
+    </section>
+  );
+}