페이지 헤더 컴포넌트 구현

frontend/components/layout/AppLayout.tsx

@@ -22,6 +22,8 @@ import { useProfile } from "@/hooks/useProfile";
 import { MenuItem } from "@/lib/api/menu";
 import { MainHeader } from "./MainHeader";
 import { ProfileModal } from "./ProfileModal";
+import { PageHeader } from "./PageHeader";
+import { getPageInfo } from "@/constants/pageInfo";
 
 // useAuth의 UserInfo 타입을 확장
 interface ExtendedUserInfo {
@@ -304,9 +306,9 @@ export function AppLayout({ children }: AppLayoutProps) {
   if (!user) {
     return (
       <div className="flex h-screen items-center justify-center">
-        <div className="text-center">
+        <div className="flex flex-col items-center">
           <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
-          <p>로딩 중...</p>
+          <p>로딩중...</p>
         </div>
       </div>
     );
@@ -379,7 +381,10 @@ export function AppLayout({ children }: AppLayoutProps) {
         </aside>
 
         {/* 가운데 컨텐츠 영역 */}
-        <main className="bg-background flex-1 p-6">{children}</main>
+        <main className="bg-background flex-1 p-6">
+          <PageHeader title={getPageInfo(pathname).title} description={getPageInfo(pathname).description} />
+          {children}
+        </main>
       </div>
 
       {/* 프로필 수정 모달 */}