# SAM MES 페이지 제목 구조 표준화 가이드

> **작성일**: 2025년 10월 24일  
> **버전**: 1.0.0

---

## 📋 표준 규칙

### ✅ 모든 페이지는 반드시 아이콘 + 타이틀을 가져야 함

**이유**:
- 시각적 일관성 제공
- 빠른 페이지 인식
- 브랜드 아이덴티티 강화
- 사용자 경험 향상

---

## 🎨 카테고리별 아이콘 매핑

### 1. Dashboard 페이지 (8개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| Dashboard (메인) | `LayoutDashboard` | text-blue-600 |
| SalesDashboard | `TrendingUp` | text-green-600 |
| ProductionDashboard | `Factory` | text-purple-600 |
| QualityDashboard | `ClipboardCheck` | text-blue-600 |
| MaterialDashboard | `Package` | text-orange-600 |
| PurchaseDashboard | `ShoppingCart` | text-teal-600 |
| AccountingDashboard | `DollarSign` | text-emerald-600 |
| SystemAdminDashboard | `Settings` | text-gray-600 |

### 2. 영업관리 (8개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| SalesLeadDashboard | `Users` | text-blue-600 |
| QuoteManagement | `FileText` | text-purple-600 |
| OrderManagement | `ShoppingBag` | text-green-600 |
| CustomerAccountManagement | `Building` | text-blue-600 |
| CustomerManagement | `Building2` | text-indigo-600 |
| SalesPerformance | `TrendingUp` | text-green-600 |
| PricingManagement | `DollarSign` | text-yellow-600 |
| SalesManagement | `TrendingUp` | text-blue-600 |

### 3. 생산관리 (6개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| ProductionManagement | `Factory` | text-purple-600 |
| ProductionBOMManagement | `Layers` | text-blue-600 |
| BOMManagement | `Layers` | text-indigo-600 |
| WorkOrderSheet | `FileText` | text-orange-600 |
| BendingProductionPage | `Wrench` | text-blue-600 |
| ScreenProductionPage | `Grid` | text-green-600 |

### 4. 품질관리 (5개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| QualityManagement | `ClipboardCheck` | text-blue-600 |
| IncomingInspectionManagement | `CheckCircle2` | text-green-600 |
| ProcessInspectionManagement | `Activity` | text-orange-600 |
| FinalInspectionManagement | `CheckSquare` | text-purple-600 |
| NonconformingManagement | `AlertTriangle` | text-red-600 |

### 5. 자재/재고관리 (6개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| MaterialManagement | `Package` | text-orange-600 |
| InventoryManagement | `Warehouse` | text-blue-600 |
| ReceivingManagement | `ArrowDownToLine` | text-green-600 |
| ShippingManagement | `ArrowUpFromLine` | text-purple-600 |
| StockStatus | `BarChart3` | text-blue-600 |
| LotManagementPage | `QrCode` | text-indigo-600 |

### 6. 구매관리 (4개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| PurchaseOrderManagement | `ShoppingCart` | text-teal-600 |
| SupplierManagement | `Building2` | text-blue-600 |
| PurchaseStatus | `BarChart` | text-green-600 |
| PurchaseAccountingManagement | `Receipt` | text-purple-600 |

### 7. 기준정보관리 (10개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| MasterData | `Database` | text-blue-600 |
| ProductManagement | `Box` | text-green-600 |
| ProductsManagement | `Package` | text-blue-600 |
| ItemManagement | `Tags` | text-purple-600 |
| ModelManagement | `Shapes` | text-indigo-600 |
| ProcessManagement | `GitBranch` | text-orange-600 |
| CodeManagementPage | `Code` | text-gray-600 |
| InspectionStandardManagementPage | `ClipboardList` | text-blue-600 |
| EquipmentManagement | `Cog` | text-yellow-600 |
| DepartmentManagement | `Network` | text-blue-600 |

### 8. 인사관리 (4개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| HRManagement | `Users` | text-blue-600 |
| EmployeeManagement | `UserCircle` | text-indigo-600 |
| AttendanceManagement | `Calendar` | text-green-600 |
| PayrollManagement | `Wallet` | text-emerald-600 |

### 9. 회계관리 (5개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| AccountingManagement | `Calculator` | text-green-600 |
| SalesAccountingManagement | `FileSpreadsheet` | text-blue-600 |
| TaxInvoice | `Receipt` | text-purple-600 |
| FinancialStatements | `PieChart` | text-emerald-600 |
| CostManagement | `DollarSign` | text-yellow-600 |

### 10. 시스템/기타 (10개)

| 페이지 | 아이콘 | 색상 |
|--------|--------|------|
| SystemManagement | `Settings` | text-gray-600 |
| UserManagement | `Users` | text-blue-600 |
| ApprovalManagement | `FileCheck` | text-green-600 |
| ApprovalProcess | `GitMerge` | text-purple-600 |
| MenuCustomization | `Menu` | text-indigo-600 |
| VehicleManagement | `Car` | text-blue-600 |
| Board | `MessageSquare` | text-orange-600 |
| Reports | `FileText` | text-blue-600 |
| OrganizationChart | `Network` | text-purple-600 |
| WorkerPerformance | `Award` | text-yellow-600 |

---

## 📐 PageHeader 표준 사용법

### ✅ 올바른 사용 (모든 페이지)

```typescript
import { PageHeader } from './organisms/PageHeader';
import { Building2 } from 'lucide-react';

<PageHeader
  title="공급처 관리"
  description="원자재 및 부품 공급처를 관리합니다"
  icon={Building2}  // ✅ 반드시 포함
  actions={<Button>등록</Button>}
/>
```

### ❌ 잘못된 사용

```typescript
// ❌ 아이콘 없음
<PageHeader
  title="공급처 관리"
  description="원자재 및 부품 공급처를 관리합니다"
/>

// ❌ 직접 div로 작성
<div className="mb-6">
  <h1>공급처 관리</h1>
  <p>원자재 및 부품 공급처를 관리합니다</p>
</div>
```

---

## 🎯 표준 템플릿

### Template 1: 기본 관리 페이지

```typescript
import { PageLayout } from './organisms/PageLayout';
import { PageHeader } from './organisms/PageHeader';
import { StatCards } from './organisms/StatCards';
import { IconName } from 'lucide-react'; // 적절한 아이콘

export function SomeManagement() {
  return (
    <PageLayout>
      <PageHeader
        title="페이지 제목"
        description="페이지 설명 (무엇을 관리하는지)"
        icon={IconName}  // ✅ 필수
        actions={<Button>주요 액션</Button>}
      />
      
      <StatCards stats={stats} />
      
      {/* 나머지 컨텐츠 */}
    </PageLayout>
  );
}
```

### Template 2: Dashboard 페이지

```typescript
import { DashboardTemplate } from './templates/DashboardTemplate';
import { IconName } from 'lucide-react';

export function SomeDashboard() {
  return (
    <DashboardTemplate
      title="대시보드 제목"
      description="대시보드 설명"
      icon={IconName}  // ✅ 필수
      stats={stats}
      quickActions={quickActions}
      sections={sections}
    />
  );
}
```

---

## 🔍 Import 가이드

### 자주 사용되는 아이콘 Import

```typescript
import {
  // Dashboard
  LayoutDashboard, TrendingUp, Factory, ClipboardCheck,
  
  // 영업/고객
  Users, Building2, ShoppingBag, FileText,
  
  // 생산
  Layers, Wrench, Grid, Cog,
  
  // 품질
  CheckCircle2, Activity, CheckSquare, AlertTriangle,
  
  // 자재/재고
  Package, Warehouse, ArrowDownToLine, ArrowUpFromLine,
  
  // 구매
  ShoppingCart, Receipt, BarChart,
  
  // 기준정보
  Database, Box, Tags, Shapes, GitBranch, Code,
  
  // 인사
  UserCircle, Calendar, Wallet,
  
  // 회계
  Calculator, FileSpreadsheet, PieChart, DollarSign,
  
  // 시스템
  Settings, Menu, MessageSquare, Network, Award,
  
  // 기타
  Plus, Download, Filter, Search, Eye, Edit, Trash2
} from 'lucide-react';
```

---

## 📊 적용 체크리스트

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

- [ ] PageHeader 컴포넌트 사용
- [ ] icon prop 설정 (필수)
- [ ] title 설정 (명확한 한글 제목)
- [ ] description 설정 (페이지 목적 설명)
- [ ] actions 설정 (주요 액션 버튼)
- [ ] 아이콘 색상 일관성 (iconColor)

---

## 🎨 아이콘 색상 가이드

### 카테고리별 기본 색상

| 카테고리 | 주 색상 | 보조 색상 |
|----------|---------|-----------|
| **Dashboard** | blue | purple, green |
| **영업** | blue | green, purple |
| **생산** | purple | blue, orange |
| **품질** | blue | green, red |
| **자재** | orange | blue, green |
| **구매** | teal | blue, purple |
| **기준정보** | blue | purple, gray |
| **인사** | indigo | blue, green |
| **회계** | green | emerald, yellow |
| **시스템** | gray | blue, purple |

### 색상 클래스

```typescript
// 아이콘 배경 색상 (StatCards)
text-blue-600    // 기본, 대시보드
text-green-600   // 완료, 성공, 매출
text-purple-600  // 생산, 프로세스
text-orange-600  // 자재, 대기
text-red-600     // 경고, 부적합
text-yellow-600  // 주의, 설비
text-indigo-600  // 특수, 고급
text-teal-600    // 구매, 거래
text-gray-600    // 시스템, 설정
```

---

## 📝 네이밍 컨벤션

### 페이지 타이틀 규칙

1. **관리 페이지**: `[대상] 관리`
   - 예: "공급처 관리", "재고 관리", "직원 관리"

2. **Dashboard**: `[영역] 대시보드` 또는 `[영역] Dashboard`
   - 예: "영업 대시보드", "생산 Dashboard"

3. **작성/등록 페이지**: `[대상] 등록` 또는 `[대상] 작성`
   - 예: "BOM 등록", "견적서 작성"

4. **조회/분석 페이지**: `[대상] 조회` 또는 `[대상] 분석`
   - 예: "재고 현황", "생산 실적"

### Description 규칙

- 동사로 시작: "~을(를) 관리합니다", "~을(를) 조회합니다"
- 구체적: "원자재 및 부품 공급처를 관리합니다"
- 간결: 한 문장으로 표현

---

## 🚀 우선순위 적용 계획

### Phase 1: 핵심 관리 페이지 (20개)
- CustomerManagement
- OrderManagement
- PurchaseOrderManagement
- InventoryManagement
- ReceivingManagement
- ShippingManagement
- EquipmentManagement
- VehicleManagement
- EmployeeManagement
- MaterialManagement
- ProductManagement
- ProcessManagement
- UserManagement
- SystemManagement
- ApprovalManagement
- AttendanceManagement
- PayrollManagement
- DepartmentManagement
- NonconformingManagement
- CostManagement

### Phase 2: Dashboard (5개)
- MaterialDashboard
- PurchaseDashboard
- AccountingDashboard
- MasterDataDashboard
- SystemAdminDashboard

### Phase 3: 나머지 페이지 (30개)
- 모든 등록/작성 페이지
- 모든 조회/분석 페이지
- 특수 기능 페이지

---

## 📚 참고 문서

- [ATOMIC_DESIGN_SYSTEM.md](ATOMIC_DESIGN_SYSTEM.md) - 전체 디자인 시스템
- [COMMON_COMPONENTS_GUIDE.md](COMMON_COMPONENTS_GUIDE.md) - 공통 컴포넌트 가이드
- [TABLE_DESIGN_SYSTEM.md](TABLE_DESIGN_SYSTEM.md) - 테이블 시스템

---

**문서 버전**: 1.0.0  
**최종 업데이트**: 2025년 10월 24일  
**작성자**: SAM MES 개발팀
