# SAM MES 페이지 포맷 구현 가이드

> **작성일**: 2025년 10월 24일  
> **목적**: 모든 페이지를 통일된 포맷으로 표준화

---

## 🎯 표준 페이지 구조 (4단계)

### 모든 페이지는 다음 순서를 따릅니다:

```tsx
<PageLayout>
  {/* 1️⃣ PageHeader - 제목 + 서브제목 + 아이콘 + 액션버튼 */}
  <PageHeader
    title="페이지 제목"
    description="페이지 설명"
    icon={IconName}
    actions={<Button>주요 액션</Button>}
  />
  
  {/* 2️⃣ StatCards - 대시보드 통계 (필수) */}
  <StatCards stats={stats} />
  
  {/* 3️⃣ SearchFilter - 검색/필터/추가 액션 */}
  <SearchFilter
    searchValue={searchTerm}
    onSearchChange={setSearchTerm}
    filterButton={true}
    extraActions={...}
  />
  
  {/* 4️⃣ Main Content - 테이블/차트/폼 */}
  <DataTable ... />  {/* 데스크톱 */}
  <MobileCard ... />  {/* 모바일 */}
</PageLayout>
```

---

## ✅ 완료된 예시 페이지

### 1. **DepartmentManagement.tsx** ✨ (방금 완료)

```tsx
import { useState } from 'react';
import { PageLayout } from './organisms/PageLayout';
import { PageHeader } from './organisms/PageHeader';
import { StatCards } from './organisms/StatCards';
import { SearchFilter } from './organisms/SearchFilter';
import { DataTable, Column } from './organisms/DataTable';
import { MobileCard } from './organisms/MobileCard';
import { Network, Building, Users, User } from 'lucide-react';

export function DepartmentManagement() {
  // 통계 (4개)
  const stats = [
    { label: '전체 부서', value: 8, icon: Network, iconColor: 'text-blue-600' },
    { label: '활성 부서', value: 7, icon: Building, iconColor: 'text-green-600' },
    { label: '전체 인원', value: 116, icon: Users, iconColor: 'text-purple-600' },
    { label: '평균 인원', value: 17, icon: User, iconColor: 'text-orange-600' }
  ];

  return (
    <PageLayout>
      {/* 1️⃣ 제목 */}
      <PageHeader
        title="부서 관리"
        description="부서 정보를 등록하고 관리합니다"
        icon={Network}  // ✅ 필수
        actions={<Button>부서 등록</Button>}
      />
      
      {/* 2️⃣ 통계 대시보드 */}
      <StatCards stats={stats} />
      
      {/* 3️⃣ 검색/필터 */}
      <SearchFilter
        searchValue={searchTerm}
        onSearchChange={setSearchTerm}
        searchPlaceholder="부서명, 부서코드, 부서장으로 검색..."
        extraActions={<Select>...</Select>}
      />
      
      {/* 4️⃣ 데이터 */}
      <DataTable columns={columns} data={data} keyField="id" />
      <MobileCard ... />
    </PageLayout>
  );
}
```

### 2. **SupplierManagement.tsx** ✅

```tsx
export function SupplierManagement() {
  const stats = [
    { label: "전체 공급처", value: 156, icon: Building2, iconColor: "text-blue-600" },
    { label: "활성 거래처", value: 142, icon: CheckCircle, iconColor: "text-green-600" },
    { label: "신규 (이번 달)", value: 8, icon: Plus, iconColor: "text-purple-600" },
    { label: "평균 거래액", value: "2,450만원", icon: DollarSign, iconColor: "text-orange-600" }
  ];

  return (
    <PageLayout>
      <PageHeader
        title="공급처 관리"
        description="원자재 및 부품 공급처를 관리합니다"
        icon={Building2}
        actions={<Button>공급처 등록</Button>}
      />
      <StatCards stats={stats} />
      <SearchFilter ... />
      <DataTable ... />
    </PageLayout>
  );
}
```

### 3. **BOMManagement.tsx** ✅

```tsx
export function BOMManagement() {
  const stats = [
    { label: "전체 BOM", value: 89, icon: Layers, iconColor: "text-indigo-600" },
    { label: "활성 BOM", value: 76, icon: CheckCircle, iconColor: "text-green-600" },
    { label: "대기중", value: 8, icon: Clock, iconColor: "text-orange-600" },
    { label: "평균 부품수", value: "12.5개", icon: Package, iconColor: "text-blue-600" }
  ];

  return (
    <PageLayout>
      <PageHeader
        title="BOM 관리"
        description="자재 명세서(Bill of Materials)를 관리합니다"
        icon={Layers}
        actions={<Button>BOM 등록</Button>}
      />
      <StatCards stats={stats} />
      <SearchFilter ... />
      <DataTable ... />
    </PageLayout>
  );
}
```

---

## 📋 페이지별 통계 카드 템플릿

### 영업관리 페이지

```tsx
// CustomerManagement, OrderManagement, QuoteManagement
const stats = [
  { label: "전체 고객/주문/견적", value: 245, icon: Building2, iconColor: "text-blue-600" },
  { label: "활성/진행중", value: 198, icon: CheckCircle, iconColor: "text-green-600" },
  { label: "이번 달 신규", value: 12, icon: Plus, iconColor: "text-purple-600" },
  { label: "총 금액/평균", value: "3.2억원", icon: DollarSign, iconColor: "text-orange-600" }
];
```

### 생산관리 페이지

```tsx
// ProductionManagement, WorkOrderSheet
const stats = [
  { label: "전체 작업지시", value: 89, icon: Factory, iconColor: "text-purple-600" },
  { label: "진행중", value: 34, icon: Activity, iconColor: "text-blue-600" },
  { label: "완료", value: 52, icon: CheckCircle, iconColor: "text-green-600" },
  { label: "가동률", value: "87.5%", icon: Gauge, iconColor: "text-orange-600" }
];
```

### 품질관리 페이지

```tsx
// QualityManagement, IncomingInspection, ProcessInspection, FinalInspection
const stats = [
  { label: "검사 건수", value: 156, icon: ClipboardCheck, iconColor: "text-blue-600" },
  { label: "합격", value: 142, icon: CheckCircle2, iconColor: "text-green-600" },
  { label: "부적합", value: 8, icon: AlertTriangle, iconColor: "text-red-600" },
  { label: "합격률", value: "91.0%", icon: Target, iconColor: "text-purple-600" }
];
```

### 자재/재고관리 페이지

```tsx
// InventoryManagement, ReceivingManagement, ShippingManagement, MaterialManagement
const stats = [
  { label: "전체 품목", value: 1234, icon: Package, iconColor: "text-orange-600" },
  { label: "재고 부족", value: 23, icon: AlertTriangle, iconColor: "text-red-600" },
  { label: "총 재고액", value: "5.2억원", icon: DollarSign, iconColor: "text-green-600" },
  { label: "회전율", value: "4.2회", icon: RotateCcw, iconColor: "text-blue-600" }
];
```

### 구매관리 페이지

```tsx
// PurchaseOrderManagement, PurchaseStatus
const stats = [
  { label: "발주 건수", value: 67, icon: ShoppingCart, iconColor: "text-teal-600" },
  { label: "입고 대기", value: 12, icon: Clock, iconColor: "text-orange-600" },
  { label: "이번 달 구매액", value: "2.8억원", icon: DollarSign, iconColor: "text-green-600" },
  { label: "공급처", value: 156, icon: Building2, iconColor: "text-blue-600" }
];
```

### 인사관리 페이지

```tsx
// EmployeeManagement, AttendanceManagement, PayrollManagement
const stats = [
  { label: "전체 직원", value: 234, icon: Users, iconColor: "text-blue-600" },
  { label: "출근", value: 198, icon: UserCheck, iconColor: "text-green-600" },
  { label: "휴가", value: 12, icon: Calendar, iconColor: "text-orange-600" },
  { label: "신규 입사", value: 5, icon: Plus, iconColor: "text-purple-600" }
];
```

### 회계관리 페이지

```tsx
// AccountingManagement, CostManagement
const stats = [
  { label: "당월 수익", value: "15.2억원", icon: DollarSign, iconColor: "text-green-600" },
  { label: "당월 비용", value: "12.8억원", icon: Calculator, iconColor: "text-red-600" },
  { label: "순이익", value: "2.4억원", icon: TrendingUp, iconColor: "text-blue-600" },
  { label: "이익률", value: "15.8%", icon: PieChart, iconColor: "text-purple-600" }
];
```

### 시스템관리 페이지

```tsx
// UserManagement, SystemManagement, ApprovalManagement
const stats = [
  { label: "전체 사용자", value: 234, icon: Users, iconColor: "text-blue-600" },
  { label: "활성 계정", value: 198, icon: UserCheck, iconColor: "text-green-600" },
  { label: "대기 결재", value: 12, icon: FileCheck, iconColor: "text-orange-600" },
  { label: "시스템 가동률", value: "99.8%", icon: Activity, iconColor: "text-purple-600" }
];
```

### 기준정보관리 페이지

```tsx
// ProductManagement, ProcessManagement, EquipmentManagement
const stats = [
  { label: "전체 항목", value: 156, icon: Database, iconColor: "text-blue-600" },
  { label: "활성", value: 142, icon: CheckCircle, iconColor: "text-green-600" },
  { label: "대기", value: 8, icon: Clock, iconColor: "text-orange-600" },
  { label: "비활성", value: 6, icon: XCircle, iconColor: "text-gray-600" }
];
```

---

## 🔄 리팩토링 우선순위

### Phase 1: 핵심 관리 페이지 (15개) - **최우선**

| 페이지 | 아이콘 | 상태 |
|--------|--------|------|
| DepartmentManagement | Network | ✅ 완료 |
| SupplierManagement | Building2 | ✅ 완료 |
| BOMManagement | Layers | ✅ 완료 |
| CustomerManagement | Building2 | ⏳ 대기 |
| OrderManagement | ShoppingCart | ✅ 완료 (등록 페이지 포함) |
| PurchaseOrderManagement | ShoppingCart | ⏳ 대기 |
| InventoryManagement | Warehouse | ⏳ 대기 |
| ReceivingManagement | ArrowDownToLine | ⏳ 대기 |
| ShippingManagement | ArrowUpFromLine | ⏳ 대기 |
| MaterialManagement | Package | ⏳ 대기 |
| EmployeeManagement | UserCircle | ⏳ 대기 |
| ProductManagement | Box | ⏳ 대기 |
| ProcessManagement | GitBranch | ⏳ 대기 |
| EquipmentManagement | Cog | ✅ 완료 |
| UserManagement | Users | ⏳ 대기 |

### Phase 2: 품질/검사 (5개)

| 페이지 | 아이콘 | 상태 |
|--------|--------|------|
| QualityManagement | ClipboardCheck | ⏳ 대기 |
| IncomingInspectionManagement | CheckCircle2 | ⏳ 대기 |
| ProcessInspectionManagement | Activity | ⏳ 대기 |
| FinalInspectionManagement | CheckSquare | ⏳ 대기 |
| NonconformingManagement | AlertTriangle | ⏳ 대기 |

### Phase 3: 회계/인사 (5개)

| 페이지 | 아이콘 | 상태 |
|--------|--------|------|
| AccountingManagement | Calculator | ⏳ 대기 |
| AttendanceManagement | Calendar | ⏳ 대기 |
| PayrollManagement | Wallet | ⏳ 대기 |
| CostManagement | DollarSign | ⏳ 대기 |
| PricingManagement | DollarSign | ⏳ 대기 |

### Phase 4: 기타 (10개)

| 페이지 | 아이콘 | 상태 |
|--------|--------|------|
| SystemManagement | Settings | ⏳ 대기 |
| ApprovalManagement | FileCheck | ⏳ 대기 |
| VehicleManagement | Car | ✅ 아이콘만 |
| ItemManagement | Package | ✅ 완료 |
| Board | MessageSquare | ⏳ 대기 |
| Reports | FileText | ⏳ 대기 |
| OrganizationChart | Network | ⏳ 대기 |
| ProductsManagement | Package | ⏳ 대기 |
| ModelManagement | Shapes | ⏳ 대기 |
| WorkerPerformance | Award | ⏳ 대기 |

---

## 🚀 빠른 적용 스크립트

### Step 1: Import 추가

```tsx
// 기존 import 삭제
// import { Card, CardContent } from './ui/card';

// 새 import 추가
import { PageLayout } from './organisms/PageLayout';
import { PageHeader } from './organisms/PageHeader';
import { StatCards } from './organisms/StatCards';
import { SearchFilter } from './organisms/SearchFilter';
import { DataTable, Column } from './organisms/DataTable';
import { MobileCard } from './organisms/MobileCard';
import { IconName } from 'lucide-react';
```

### Step 2: 통계 데이터 생성

```tsx
const stats = [
  { label: "항목1", value: 100, icon: Icon1, iconColor: "text-blue-600" },
  { label: "항목2", value: 200, icon: Icon2, iconColor: "text-green-600" },
  { label: "항목3", value: 300, icon: Icon3, iconColor: "text-purple-600" },
  { label: "항목4", value: "80%", icon: Icon4, iconColor: "text-orange-600" }
];
```

### Step 3: 컬럼 정의 (DataTable용)

```tsx
const columns: Column<DataType>[] = [
  { key: 'field1', header: '헤더1', cell: 'text' },
  { key: 'field2', header: '헤더2', cell: 'badge' },
  { key: 'field3', header: '헤더3', cell: 'statusBadge' },
  { key: 'actions', header: '작업', cell: 'actions', actions: [...] }
];
```

### Step 4: JSX 구조 변경

```tsx
// ❌ Before
return (
  <div className="p-6">
    <div className="mb-6">
      <h1>제목</h1>
      <p>설명</p>
    </div>
    <Card>...</Card>
  </div>
);

// ✅ After
return (
  <PageLayout>
    <PageHeader title="제목" description="설명" icon={Icon} />
    <StatCards stats={stats} />
    <SearchFilter ... />
    <DataTable ... />
    <MobileCard ... />
  </PageLayout>
);
```

---

## 📊 진행률 대시보드

| 카테고리 | 완료 | 대기 | 진행률 |
|----------|------|------|--------|
| **핵심 관리** | 5 | 10 | 33% |
| **품질/검사** | 0 | 5 | 0% |
| **회계/인사** | 0 | 5 | 0% |
| **기타** | 1 | 9 | 10% |
| **전체** | 6 | 29 | 17% |

**예상 소요 시간**: 각 페이지 10-15분 × 29개 = **약 5-7시간**

---

## ✅ 완료 체크리스트

각 페이지 리팩토링 시 확인:

- [ ] `PageLayout`으로 감싸기
- [ ] `PageHeader` 추가 (title, description, **icon 필수**)
- [ ] `StatCards` 추가 (**4개 권장**)
- [ ] `SearchFilter` 추가
- [ ] `DataTable` + `MobileCard` 적용
- [ ] EmptyState 처리
- [ ] 통계 수치 정확성 확인

---

## 📚 참고 문서

1. [STANDARD_PAGE_FORMAT.md](STANDARD_PAGE_FORMAT.md) - 전체 포맷 가이드
2. [TITLE_STRUCTURE_STANDARDIZATION.md](TITLE_STRUCTURE_STANDARDIZATION.md) - 아이콘 매핑
3. [COMMON_COMPONENTS_GUIDE.md](COMMON_COMPONENTS_GUIDE.md) - 컴포넌트 사용법
4. [TABLE_DESIGN_SYSTEM.md](TABLE_DESIGN_SYSTEM.md) - 테이블 시스템

---

**문서 버전**: 1.0.0  
**최종 업데이트**: 2025년 10월 24일  
**다음 작업**: CustomerManagement, InventoryManagement, UserManagement 리팩토링
