sam-design/src/ICON_STANDARDIZATION_CHECKLIST.md

# 페이지 아이콘 표준화 체크리스트

> **작성일**: 2025년 10월 24일

## ✅ 아이콘 적용 완료 (10개)

1. ✅ **BOMManagement.tsx** - `Layers` (text-indigo-600)
2. ✅ **SupplierManagement.tsx** - `Building2` (text-blue-600)
3. ✅ **SalesLeadDashboard.tsx** - `Users` (text-blue-600)
4. ✅ **OrderManagement.tsx** - `ShoppingCart` (확인됨)
5. ✅ **EquipmentManagement.tsx** - `Wrench` (확인됨)
6. ✅ **ItemManagement.tsx** - `Package` (확인됨)
7. ✅ **VehicleManagement.tsx** - `Car` (방금 수정)
8. ✅ **ProductionDashboard.tsx** - DashboardTemplate 사용
9. ✅ **QualityDashboard.tsx** - DashboardTemplate 사용
10. ✅ **SalesDashboard.tsx** - DashboardTemplate 사용

## 🔄 아이콘 적용 필요 (25개 우선순위)

### 우선순위 1: 핵심 관리 페이지 (10개)

1. ❌ **InventoryManagement.tsx** → `Warehouse` (text-blue-600)
   - 현재: 커스텀 헤더
   - 작업: PageLayout + PageHeader로 전환

2. ❌ **ReceivingManagement.tsx** → `ArrowDownToLine` (text-green-600)
   - 작업 필요

3. ❌ **ShippingManagement.tsx** → `ArrowUpFromLine` (text-purple-600)
   - 작업 필요

4. ❌ **MaterialManagement.tsx** → `Package` (text-orange-600)
   - 작업 필요

5. ❌ **PurchaseOrderManagement.tsx** → `ShoppingCart` (text-teal-600)
   - 작업 필요

6. ❌ **EmployeeManagement.tsx** → `UserCircle` (text-indigo-600)
   - 작업 필요

7. ❌ **ProductManagement.tsx** → `Box` (text-green-600)
   - 작업 필요

8. ❌ **ProcessManagement.tsx** → `GitBranch` (text-orange-600)
   - 작업 필요

9. ✅ **DepartmentManagement.tsx** → `Network` (text-blue-600)
   - 완료 (2025-10-24)

10. ❌ **UserManagement.tsx** → `Users` (text-blue-600)
    - 작업 필요

### 우선순위 2: 품질/검사 (5개)

11. ❌ **QualityManagement.tsx** → `ClipboardCheck` (text-blue-600)
12. ❌ **IncomingInspectionManagement.tsx** → `CheckCircle2` (text-green-600)
13. ❌ **ProcessInspectionManagement.tsx** → `Activity` (text-orange-600)
14. ❌ **FinalInspectionManagement.tsx** → `CheckSquare` (text-purple-600)
15. ❌ **NonconformingManagement.tsx** → `AlertTriangle` (text-red-600)

### 우선순위 3: 회계/인사 (5개)

16. ❌ **AccountingManagement.tsx** → `Calculator` (text-green-600)
17. ❌ **AttendanceManagement.tsx** → `Calendar` (text-green-600)
18. ❌ **PayrollManagement.tsx** → `Wallet` (text-emerald-600)
19. ❌ **CostManagement.tsx** → `DollarSign` (text-yellow-600)
20. ❌ **PricingManagement.tsx** → `DollarSign` (text-yellow-600)

### 우선순위 4: 시스템/기타 (5개)

21. ❌ **SystemManagement.tsx** → `Settings` (text-gray-600)
22. ❌ **ApprovalManagement.tsx** → `FileCheck` (text-green-600)
23. ❌ **Board.tsx** → `MessageSquare` (text-orange-600)
24. ❌ **Reports.tsx** → `FileText` (text-blue-600)
25. ❌ **OrganizationChart.tsx** → `Network` (text-purple-600)

## 📋 표준화 작업 단계

### Step 1: Import 추가
```typescript
import { PageLayout } from './organisms/PageLayout';
import { PageHeader } from './organisms/PageHeader';
import { IconName } from 'lucide-react';
```

### Step 2: 기존 헤더 제거
```typescript
// ❌ 삭제
<div className="...">
  <h1>제목</h1>
  <p>설명</p>
</div>
```

### Step 3: PageHeader 적용
```typescript
// ✅ 추가
<PageHeader
  title="페이지 제목"
  description="페이지 설명"
  icon={IconName}
  actions={<Button>액션</Button>}
/>
```

## 🎯 빠른 적용 템플릿

```typescript
// Before
export function SomeManagement() {
  return (
    <div className="p-6">
      <div className="mb-6">
        <h1>제목</h1>
        <p>설명</p>
      </div>
      {/* 내용 */}
    </div>
  );
}

// After
import { PageLayout } from './organisms/PageLayout';
import { PageHeader } from './organisms/PageHeader';
import { IconName } from 'lucide-react';

export function SomeManagement() {
  return (
    <PageLayout>
      <PageHeader
        title="제목"
        description="설명"
        icon={IconName}
      />
      {/* 내용 */}
    </PageLayout>
  );
}
```

## 📊 진행률

- **완료**: 10개 (28.6%)
- **대기**: 25개 (71.4%)
- **예상 소요 시간**: 각 5분 × 25개 = 약 2시간

## 🔗 참고 문서

- [TITLE_STRUCTURE_STANDARDIZATION.md](TITLE_STRUCTURE_STANDARDIZATION.md) - 전체 아이콘 매핑
- [COMMON_COMPONENTS_GUIDE.md](COMMON_COMPONENTS_GUIDE.md) - PageHeader 사용법