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 추가

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

Step 2: 기존 헤더 제거

// ❌ 삭제
<div className="...">
  <h1>제목</h1>
  <p>설명</p>
</div>

Step 3: PageHeader 적용

// ✅ 추가
<PageHeader
  title="페이지 제목"
  description="페이지 설명"
  icon={IconName}
  actions={<Button>액션</Button>}
/>

🎯 빠른 적용 템플릿

// 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 - 전체 아이콘 매핑
• COMMON_COMPONENTS_GUIDE.md - PageHeader 사용법