페이지 헤더 컴포넌트 구현

frontend/app/(main)/admin/page.tsx

@@ -1,26 +1,10 @@
-"use client";
+import { Users, Shield, Settings, BarChart3 } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { RefreshCw, Users, Shield, Settings, BarChart3 } from "lucide-react";
-
 /**
  * 관리자 메인 페이지
  */
 export default function AdminPage() {
   return (
     <div className="space-y-6">
-      {/* 페이지 헤더 */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900">관리자 대시보드</h1>
-          <p className="text-gray-600">시스템 관리 및 모니터링</p>
-        </div>
-        <Button variant="outline" className="gap-2">
-          <RefreshCw className="h-4 w-4" />
-          새로고침
-        </Button>
-      </div>
-
       {/* 관리자 기능 카드들 */}
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
         <div className="rounded-lg border bg-white p-6 shadow-sm">

frontend/app/(main)/page.tsx

@@ -1,23 +1,6 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { RefreshCw } from "lucide-react";
-
 export default function MainHomePage() {
   return (
     <div className="space-y-6">
-      {/* 페이지 헤더 */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900">대시보드</h1>
-          <p className="text-gray-600">PLM 시스템의 주요 현황을 확인하세요</p>
-        </div>
-        <Button variant="outline" className="gap-2">
-          <RefreshCw className="h-4 w-4" />
-          새로고침
-        </Button>
-      </div>
-
       {/* 대시보드 컨텐츠 */}
       <div className="rounded-lg border bg-white p-6 shadow-sm">
         <h3 className="mb-4 text-lg font-semibold">PLM 솔루션에 오신 것을 환영합니다!</h3>

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>
 
       {/* 프로필 수정 모달 */}

frontend/components/layout/PageHeader.tsx

@@ -0,0 +1,21 @@
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+}
+
+/**
+ * 페이지 상단 헤더 컴포넌트
+ * 제목, 설명, 추가 버튼 등을 표시
+ */
+export function PageHeader({ title, description }: PageHeaderProps) {
+  return (
+    <div className="mb-6">
+      <div className="flex items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">{title}</h1>
+          {description && <p className="text-muted-foreground">{description}</p>}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/constants/pageInfo.ts

@@ -0,0 +1,64 @@
+/**
+ * 페이지별 제목과 설명 정보
+ */
+export interface PageInfo {
+  title: string;
+  description?: string;
+}
+
+export const PAGE_INFO: Record<string, PageInfo> = {
+  // 메인 대시보드
+  "/main": {
+    title: "대시보드",
+    description: "PLM 시스템의 주요 현황을 확인하세요",
+  },
+
+  // 관리자 페이지들
+  "/admin": {
+    title: "관리자 대시보드",
+    description: "시스템 관리 및 모니터링",
+  },
+  "/admin/company": {
+    title: "회사 관리",
+    description: "회사 정보를 등록하고 관리합니다",
+  },
+  "/admin/userMng": {
+    title: "사용자 관리",
+    description: "시스템 사용자를 관리합니다",
+  },
+  "/admin/menu": {
+    title: "메뉴 관리",
+    description: "시스템 메뉴를 관리합니다",
+  },
+  "/admin/i18n": {
+    title: "다국어 관리",
+    description: "다국어 번역을 관리합니다",
+  },
+  "/admin/tableMng": {
+    title: "테이블 타입 관리",
+    description: "데이터베이스 테이블 타입을 관리합니다",
+  },
+
+  // 기타 페이지들
+  "/multilang": {
+    title: "다국어 설정",
+    description: "언어 설정을 변경합니다",
+  },
+  "/dashboard": {
+    title: "대시보드",
+    description: "PLM 시스템 현황",
+  },
+
+  // 기본값 (매핑되지 않은 페이지)
+  default: {
+    title: "PLM 솔루션",
+    description: "제품 수명 주기 관리 시스템",
+  },
+};
+
+/**
+ * 현재 경로에 맞는 페이지 정보를 반환
+ */
+export function getPageInfo(pathname: string): PageInfo {
+  return PAGE_INFO[pathname] || PAGE_INFO["default"];
+}