# MES SAM 디자인 시스템 적용 체크리스트

## 개요
13개 모듈에 품목관리 기준 아토믹 디자인 시스템을 적용하는 체크리스트입니다.

## 공통 컴포넌트 위치
`/components/organisms/`

## 13개 모듈 목록

### ✅ 1. ItemManagement (품목관리) - 완료
- [x] ListActions 적용
- [x] DetailViewActions 적용
- [x] FormActions 적용
- [x] TableActionButtons 적용
- [x] ScreenVersionHistory 적용

### 2. QuoteManagement (견적관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 3. OrderManagement (수주관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 4. ProductionManagement (생산관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 5. InventoryManagement (재고관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 6. QualityManagement (품질관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 7. ClientManagement (거래처관리)
- [x] DetailViewActions 스타일 통일 (완료)
- [ ] ListActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 8. EmployeeManagement (인사관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 9. EquipmentManagement (설비관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 10. BOMManagement (BOM관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 11. CostManagement (원가관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 12. AccountingManagement (회계관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

### 13. ApprovalManagement (결재관리)
- [ ] ListActions 적용
- [ ] DetailViewActions 적용
- [ ] FormActions 적용
- [ ] TableActionButtons 적용
- [ ] ScreenVersionHistory 적용

## 적용 순서

### 1단계: Import 추가
```tsx
import { 
  ListActions, 
  DetailViewActions, 
  FormActions, 
  TableActionButtons,
  ScreenVersionHistory 
} from "./organisms";
```

### 2단계: 목록 뷰 - ListActions
기존 코드:
```tsx
<div className="flex items-center gap-2">
  {selectedItems.size > 0 && (
    <Button variant="destructive" size="sm" onClick={() => setIsBulkDeleteDialogOpen(true)}>
      <Trash2 className="h-4 w-4 mr-2" />
      선택 삭제 ({selectedItems.size})
    </Button>
  )}
  <Button size="sm" onClick={() => handleViewChange("create")}>
    <Plus className="h-4 w-4 mr-2" />
    등록
  </Button>
</div>
```

변경 후:
```tsx
<ListActions
  onAdd={() => handleViewChange("create")}
  addText="[모듈명] 등록"
  selectedCount={selectedItems.size}
  onBulkDelete={() => setIsBulkDeleteDialogOpen(true)}
/>
```

### 3단계: 상세 뷰 - DetailViewActions
기존 코드:
```tsx
<div className="flex gap-2">
  <Button variant="outline" size="sm" onClick={() => setView("list")}>
    목록으로
  </Button>
  <Button size="sm" onClick={() => handleViewChange("edit", selectedItem)}>
    <Edit className="h-4 w-4 mr-2" />
    수정
  </Button>
</div>
```

변경 후:
```tsx
<DetailViewActions
  onBackClick={() => setView("list")}
  onEditClick={() => handleViewChange("edit", selectedItem)}
/>
```

### 4단계: 폼 뷰 - FormActions
기존 코드:
```tsx
<div className="flex gap-1 sm:gap-2">
  <Button variant="outline" size="sm" onClick={() => resetForm()}>
    <X className="h-4 w-4" />
    <span className="hidden sm:inline">취소</span>
  </Button>
  <Button size="sm" onClick={handleSave} disabled={!formData.field}>
    <Save className="h-4 w-4" />
    <span className="hidden sm:inline">저장</span>
  </Button>
</div>
```

변경 후:
```tsx
<FormActions
  onSave={handleSave}
  onCancel={() => resetForm()}
  saveDisabled={!formData.field}
/>
```

### 5단계: 테이블 액션 - TableActionButtons
기존 코드:
```tsx
<div className="flex items-center justify-end gap-1 md:gap-2">
  <Button variant="ghost" size="sm" onClick={() => handleView(item)}>
    <Search className="h-4 w-4" />
  </Button>
  <Button variant="ghost" size="sm" onClick={() => handleEdit(item)}>
    <Edit className="h-4 w-4" />
  </Button>
  <Button variant="ghost" size="sm" onClick={() => handleDelete(item)}>
    <Trash2 className="h-4 w-4" />
  </Button>
</div>
```

변경 후:
```tsx
<TableActionButtons
  onView={() => handleView(item)}
  onEdit={() => handleEdit(item)}
  onDelete={() => handleDelete(item)}
/>
```

### 6단계: 버전 히스토리 - ScreenVersionHistory
기존 코드:
```tsx
{screenVersion.versionHistory.length > 0 && (
  <Card className="border-purple-200 bg-purple-50">
    <CardHeader>
      <CardTitle className="flex items-center gap-2 text-purple-700">
        <History className="h-5 w-5" />
        수정 이력
      </CardTitle>
    </CardHeader>
    <CardContent>
      {/* ... 복잡한 히스토리 표시 로직 ... */}
    </CardContent>
  </Card>
)}
```

변경 후:
```tsx
<ScreenVersionHistory
  versionHistory={screenVersion.versionHistory}
  title="[모듈명] 수정 이력"
  colorScheme={{
    border: "border-[color]-200 dark:border-[color]-800",
    background: "bg-[color]-50 dark:bg-[color]-950/30",
    text: "text-[color]-700 dark:text-[color]-300"
  }}
/>
```

## 모듈별 색상 스키마

```tsx
const moduleColorSchemes = {
  item: { color: "purple" },      // 품목관리
  quote: { color: "blue" },       // 견적관리
  order: { color: "green" },      // 수주관리
  production: { color: "orange" }, // 생산관리
  inventory: { color: "teal" },   // 재고관리
  quality: { color: "red" },      // 품질관리
  client: { color: "indigo" },    // 거래처관리
  employee: { color: "pink" },    // 인사관리
  equipment: { color: "amber" },  // 설비관리
  bom: { color: "cyan" },         // BOM관리
  cost: { color: "lime" },        // 원가관리
  accounting: { color: "emerald" }, // 회계관리
  approval: { color: "violet" }   // 결재관리
};
```

## 다크모드 대응 필수

모든 색상 클래스에 다크모드 variant 추가:
```tsx
className="text-purple-700 dark:text-purple-300"
className="bg-purple-50 dark:bg-purple-950/30"
className="border-purple-200 dark:border-purple-800"
```

## 버전 뱃지 제거

PageHeader의 versionBadge prop 제거:
```tsx
// 제거 전
<PageHeader
  title="제목"
  versionBadge={<Badge>v{version}</Badge>}
/>

// 제거 후
<PageHeader
  title="제목"
  description="설명"
/>
```

## 검증 사항

각 모듈 적용 후 확인:
- [ ] 페이지 레이아웃이 표준 형식을 따르는가?
- [ ] 버튼 스타일이 일관적인가?
- [ ] 다크모드에서 색상이 올바르게 표시되는가?
- [ ] 반응형이 정상 작동하는가?
- [ ] 모바일에서 버튼 텍스트가 숨겨지는가?
- [ ] 버전 뱃지가 제거되었는가?
