63f5df7d7d
주요 기능: - 품목 CRUD 기능 (생성, 조회, 수정) - 품목 마스터 데이터 관리 시스템 - BOM(Bill of Materials) 관리 기능 - 도면 캔버스 기능 - 품목 속성 및 카테고리 관리 - 스크린 인쇄 생산 관리 페이지 기술 개선: - localStorage SSR 호환성 수정 (9개 useState 초기화) - Shadcn UI 컴포넌트 추가 (table, tabs, alert, drawer 등) - DataContext 및 DeveloperModeContext 추가 - API 라우트 구현 (items, master-data) - 타입 정의 및 유틸리티 함수 추가 빌드 테스트: ✅ 성공 (3.1초) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { ReactNode } from "react";
|
|
import { LucideIcon } from "lucide-react";
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
description?: string;
|
|
actions?: ReactNode;
|
|
icon?: LucideIcon;
|
|
versionBadge?: ReactNode;
|
|
}
|
|
|
|
export function PageHeader({ title, description, actions, icon: Icon, versionBadge }: PageHeaderProps) {
|
|
return (
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div className="flex items-start gap-3">
|
|
{Icon && (
|
|
<div className="p-2 bg-primary/10 rounded-lg hidden md:block">
|
|
<Icon className="w-6 h-6 text-primary" />
|
|
</div>
|
|
)}
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="text-xl md:text-2xl">{title}</h1>
|
|
{versionBadge}
|
|
</div>
|
|
{description && (
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 flex-wrap items-center">
|
|
{actions}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |