# SAM MES 통일된 페이지 포맷 적용 완료

> **작성일**: 2025년 10월 24일  
> **목적**: 모든 페이지를 동일한 포맷으로 통일  
> **완료 상태**: 표준 정의 완료, 예시 페이지 리팩토링 완료

---

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

### 모든 페이지는 다음 구조를 따릅니다:

```
┌─────────────────────────────────────────────────────┐
│ 1️⃣ PageHeader                                      │
│ ├─ 아이콘 (필수)                                     │
│ ├─ 제목 (필수)                                       │
│ ├─ 서브제목/설명 (권장)                               │
│ └─ 액션버튼 (선택)                                   │
├─────────────────────────────────────────────────────┤
│ 2️⃣ StatCards (대시보드 통계)                        │
│ ┌────────┬────────┬────────┬────────┐             │
│ │ 통계1  │ 통계2  │ 통계3  │ 통계4  │             │
│ │ 아이콘 │ 아이콘 │ 아이콘 │ 아이콘 │             │
│ └────────┴────────┴────────┴────────┘             │
├─────────────────────────────────────────────────────┤
│ 3️⃣ SearchFilter                                    │
│ [검색창] [필터] [추가액션]                           │
├─────────────────────────────────────────────────────┤
│ 4️⃣ Main Content                                    │
│ ┌─────────────────────────────────────┐           │
│ │ DataTable (Desktop)                 │           │
│ │ 또는                                 │           │
│ │ MobileCard (Mobile)                 │           │
│ │ 또는                                 │           │
│ │ Custom Content (차트, 폼 등)         │           │
│ └─────────────────────────────────────┘           │
└─────────────────────────────────────────────────────┘
```

---

## ✅ 핵심 규칙

### 1. PageHeader (제목 영역)
- ✅ **아이콘 필수** - 모든 페이지는 반드시 아이콘을 가져야 함
- ✅ **제목 필수** - 명확한 한글 제목
- ✅ **설명 권장** - "~을(를) 관리합니다" 형식
- ✅ **액션버튼 선택** - 등록, 다운로드 등 주요 액션

### 2. StatCards (통계 대시보드)
- ✅ **4개 권장** - 전체/활성/신규/금액(또는 지표)
- ✅ **아이콘 + 색상** - 각 통계마다 고유 아이콘과 색상
- ✅ **반응형** - 모바일 1열, 태블릿 2열, 데스크톱 4열
- ✅ **Trend 선택** - 전년/전월 대비 증감 표시 가능

### 3. SearchFilter (검색/필터)
- ✅ **검색창** - placeholder 명확하게
- ✅ **필터버튼 선택** - 상세 필터가 있는 경우
- ✅ **추가 액션** - 상태 선택, 기간 선택 등

### 4. Main Content (컨텐츠)
- ✅ **DataTable** - 데스크톱용 테이블
- ✅ **MobileCard** - 모바일용 카드
- ✅ **EmptyState** - 데이터 없을 때
- ✅ **Loading** - 로딩 상태 처리

---

## 📋 생성된 문서

### 1. **STANDARD_PAGE_FORMAT.md**
- 전체 페이지 포맷 가이드
- 템플릿별 사용 예시 (ListPageTemplate, DashboardTemplate)
- StatCards 카테고리별 예시
- 빠른 시작 가이드

### 2. **TITLE_STRUCTURE_STANDARDIZATION.md**
- 70개 페이지의 아이콘 매핑
- 카테고리별 아이콘 + 색상 표준
- PageHeader 표준 사용법
- Import 가이드

### 3. **PAGE_FORMAT_IMPLEMENTATION_GUIDE.md**
- 페이지별 통계 카드 템플릿
- 리팩토링 우선순위 (Phase 1-4)
- 빠른 적용 스크립트
- 진행률 대시보드

---

## 🎨 카테고리별 통계 템플릿

### 영업관리 (8개 페이지)
```tsx
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,250만원", icon: DollarSign, iconColor: "text-orange-600" }
];
```

### 생산관리 (6개 페이지)
```tsx
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" }
];
```

### 품질관리 (5개 페이지)
```tsx
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" }
];
```

### 자재/재고관리 (6개 페이지)
```tsx
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" }
];
```

### 구매관리 (4개 페이지)
```tsx
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" }
];
```

### 인사관리 (4개 페이지)
```tsx
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" }
];
```

### 회계관리 (5개 페이지)
```tsx
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" }
];
```

---

## ✅ 완료된 페이지 (7개)

### 1. **DepartmentManagement.tsx** ✨ NEW!
```tsx
<PageLayout>
  <PageHeader title="부서 관리" icon={Network} ... />
  <StatCards stats={[전체부서, 활성부서, 전체인원, 평균인원]} />
  <SearchFilter ... />
  <DataTable ... /> + <MobileCard ... />
</PageLayout>
```

### 2. **SupplierManagement.tsx** ✅
```tsx
<PageLayout>
  <PageHeader title="공급처 관리" icon={Building2} ... />
  <StatCards stats={[전체공급처, 활성거래처, 신규, 평균거래액]} />
  <SearchFilter ... />
  <DataTable ... /> + <MobileCard ... />
</PageLayout>
```

### 3. **BOMManagement.tsx** ✅
```tsx
<PageLayout>
  <PageHeader title="BOM 관리" icon={Layers} ... />
  <StatCards stats={[전체BOM, 활성BOM, 대기중, 평균부품수]} />
  <SearchFilter ... />
  <DataTable ... /> + <MobileCard ... />
</PageLayout>
```

### 4. **OrderManagement.tsx** ✅
```tsx
<PageLayout>
  <PageHeader title="주문 관리" icon={ShoppingCart} ... />
  <StatCards stats={[전체주문, 진행중, 완료, 총주문액]} />
  <SearchFilter ... />
  ...
</PageLayout>
```

### 5. **EquipmentManagement.tsx** ✅
```tsx
<PageLayout>
  <PageHeader title="설비 관리" icon={Wrench} ... />
  <StatCards stats={[전체설비, 가동중, 정비중, 가동률]} />
  ...
</PageLayout>
```

### 6. **ItemManagement.tsx** ✅
```tsx
<PageLayout>
  <PageHeader title="품목 관리" icon={Package} ... />
  <StatCards stats={[전체품목, 활성품목, ...]} />
  ...
</PageLayout>
```

### 7. **VehicleManagement.tsx** ✅
```tsx
<PageLayout>
  <PageHeader title="차량관리" icon={Car} ... />
  ...
</PageLayout>
```

---

## 🔄 대기중 페이지 (28개)

### Phase 1: 핵심 관리 (10개) - 최우선
1. CustomerManagement → `Building2`
2. PurchaseOrderManagement → `ShoppingCart`
3. InventoryManagement → `Warehouse`
4. ReceivingManagement → `ArrowDownToLine`
5. ShippingManagement → `ArrowUpFromLine`
6. MaterialManagement → `Package`
7. EmployeeManagement → `UserCircle`
8. ProductManagement → `Box`
9. ProcessManagement → `GitBranch`
10. UserManagement → `Users`

### Phase 2: 품질/검사 (5개)
11. QualityManagement → `ClipboardCheck`
12. IncomingInspectionManagement → `CheckCircle2`
13. ProcessInspectionManagement → `Activity`
14. FinalInspectionManagement → `CheckSquare`
15. NonconformingManagement → `AlertTriangle`

### Phase 3: 회계/인사 (5개)
16. AccountingManagement → `Calculator`
17. AttendanceManagement → `Calendar`
18. PayrollManagement → `Wallet`
19. CostManagement → `DollarSign`
20. PricingManagement → `DollarSign`

### Phase 4: 기타 (8개)
21. SystemManagement → `Settings`
22. ApprovalManagement → `FileCheck`
23. Board → `MessageSquare`
24. Reports → `FileText`
25. OrganizationChart → `Network`
26. ProductsManagement → `Package`
27. ModelManagement → `Shapes`
28. WorkerPerformance → `Award`

---

## 🚀 빠른 적용 가이드

### 1단계: Import 수정
```tsx
// ❌ 삭제
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';

// ✅ 추가
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';
```

### 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" }
];
```

### 3단계: 구조 변경
```tsx
// ❌ Before
return (
  <div className="p-6">
    <h1>제목</h1>
    {/* 커스텀 통계 카드 */}
    <Card>...</Card>
  </div>
);

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

---

## 📊 현재 진행률

| 상태 | 개수 | 비율 |
|------|------|------|
| ✅ **완료** | 7개 | 20% |
| ⏳ **대기** | 28개 | 80% |
| **전체** | 35개 | 100% |

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

---

## 🎯 핵심 효과

### 1. 일관된 사용자 경험
- 모든 페이지가 동일한 구조
- 학습 곡선 최소화
- 사용성 향상

### 2. 효율적인 개발
- 템플릿 재사용
- 코드 중복 제거
- 유지보수 용이

### 3. 빠른 정보 파악
- 4개 통계 카드로 핵심 지표 즉시 확인
- 아이콘으로 페이지 빠른 인식
- 반응형 대시보드

### 4. 확장 가능성
- 새 페이지 추가 용이
- 디자인 시스템 확립
- 브랜드 일관성

---

## 📚 참고 문서 체계

```
📁 SAM MES 문서
├── 🎨 디자인 시스템
│   ├── ATOMIC_DESIGN_SYSTEM.md (전체 시스템)
│   ├── STANDARD_PAGE_FORMAT.md ⭐ (페이지 포맷)
│   ├── TITLE_STRUCTURE_STANDARDIZATION.md ⭐ (아이콘 표준)
│   ├── PAGE_FORMAT_IMPLEMENTATION_GUIDE.md ⭐ (구현 가이드)
│   ├── COMMON_COMPONENTS_GUIDE.md (공통 컴포넌트)
│   └── TABLE_DESIGN_SYSTEM.md (테이블 시스템)
│
├── 📋 진행 상황
│   ├── ICON_STANDARDIZATION_CHECKLIST.md ⭐ (체크리스트)
│   ├── ALL_PAGES_REFACTORING_PROGRESS.md
│   └── CONSOLIDATION_PROGRESS.md
│
└── 🚀 개발 가이드
    ├── QUICK_START.md
    ├── DEVELOPMENT_GUIDELINES.md
    └── MENU_ACCESS_GUIDE.md
```

---

## ✅ 완료 요약

### 오늘 작업 완료 (2025-10-24)

1. ✅ **표준 페이지 포맷 정의**
   - 4단계 구조 (Header → Stats → Search → Content)
   - 모든 페이지 아이콘 필수

2. ✅ **아이콘 표준화**
   - 70개 페이지의 아이콘 + 색상 매핑
   - 카테고리별 일관된 아이콘 체계

3. ✅ **통계 카드 템플릿**
   - 8개 카테고리별 통계 템플릿
   - 4개 통계 권장 (전체/활성/신규/지표)

4. ✅ **DepartmentManagement 리팩토링**
   - 완전한 표준 포맷 적용
   - DataTable + MobileCard 구현
   - 참조 예시로 활용 가능

5. ✅ **VehicleManagement 아이콘 추가**
   - `Car` 아이콘 적용

6. ✅ **문서화 완료**
   - 4개 가이드 문서 생성
   - 빠른 적용 스크립트 제공
   - 우선순위 및 체크리스트

---

## 🎯 다음 단계

### 즉시 가능 작업
1. **CustomerManagement** 리팩토링
2. **InventoryManagement** 리팩토링
3. **UserManagement** 리팩토링

### 권장 작업 순서
```
Phase 1 (10개) → Phase 2 (5개) → Phase 3 (5개) → Phase 4 (8개)
```

### 한 페이지당 작업 시간
- Import 수정: 2분
- 통계 생성: 3분
- 구조 변경: 5분
- 테스트: 3분
- **총 약 15분**

---

**문서 버전**: 1.0.0  
**최종 업데이트**: 2025년 10월 24일  
**다음 목표**: Phase 1 핵심 관리 페이지 10개 완료
