# MES SAM 디자인 시스템 가이드

## 개요
중소 및 중견기업용 MES(제조실행시스템) SAM의 표준화된 디자인 시스템 가이드입니다.
품목관리(ItemManagement)를 기준으로 한 아토믹 디자인 시스템을 따릅니다.

## 페이지 구조 표준

모든 페이지는 다음 순서를 따라야 합니다:

```tsx
<PageLayout>
  {/* 1. 페이지 헤더 (제목 + 서브제목 + 아이콘 + 액션) */}
  <PageHeader 
    title="페이지 제목"
    description="페이지 설명"
    icon={IconComponent}
    actions={<ListActions />}
  />

  {/* 2. 대시보드 통계 4개 */}
  <StatCards stats={statsData} />

  {/* 3. 스크린 버전 히스토리 (선택사항) */}
  <ScreenVersionHistory versionHistory={versionHistory} />

  {/* 4. 검색/필터 */}
  <Card>
    <CardContent className="p-4 md:p-6">
      <SearchFilter 
        searchValue={searchTerm}
        onSearchChange={setSearchTerm}
        searchPlaceholder="검색..."
        extraActions={<Select>...</Select>}
      />
    </CardContent>
  </Card>

  {/* 5. 컨텐츠 (테이블, 폼 등) */}
  <Card>
    <CardHeader>
      <CardTitle>목록 제목</CardTitle>
    </CardHeader>
    <CardContent>
      {/* 컨텐츠 */}
    </CardContent>
  </Card>
</PageLayout>
```

## Atomic Design 컴포넌트 계층

### Atoms (원자)
- `/components/ui/*` - Shadcn UI 컴포넌트
  - Button, Input, Select, Badge, Card, Dialog 등

### Molecules (분자)
- **SearchFilter** - 검색 입력 + 필터 버튼 + 추가 액션
- **TableActionButtons** - 테이블 행 액션 버튼 (보기/수정/삭제)

### Organisms (유기체)
위치: `/components/organisms/`

#### 1. PageLayout
전체 페이지 레이아웃 컨테이너

```tsx
<PageLayout>
  {/* 페이지 내용 */}
</PageLayout>
```

#### 2. PageHeader
페이지 최상단 헤더 (제목, 설명, 아이콘, 액션)

```tsx
<PageHeader
  title="품목 관리"
  description="제품, 부품, 원자재 등 품목 정보를 관리합니다"
  icon={Package}
  actions={<ListActions onAdd={handleAdd} />}
/>
```

#### 3. StatCards
4개의 통계 카드 그리드

```tsx
<StatCards stats={[
  { label: "전체", value: 100, icon: Package },
  { label: "제품", value: 30, icon: Box },
  { label: "부품", value: 50, icon: Component },
  { label: "원자재", value: 20, icon: Layers }
]} />
```

#### 4. SearchFilter
검색 + 필터 + 추가 액션

```tsx
<SearchFilter
  searchValue={searchTerm}
  onSearchChange={setSearchTerm}
  searchPlaceholder="품목코드, 품목명 검색..."
  extraActions={<Select>...</Select>}
/>
```

#### 5. ListActions
목록 페이지 액션 버튼 (등록, 선택 삭제 등)

```tsx
<ListActions
  onAdd={() => handleViewChange("create")}
  addText="품목 등록"
  selectedCount={selectedItems.size}
  onBulkDelete={() => setIsBulkDeleteDialogOpen(true)}
/>
```

#### 6. DetailViewActions
상세보기 페이지 액션 버튼 (목록으로, 수정)

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

#### 7. FormActions
폼 저장/취소 액션 버튼

```tsx
<FormActions
  onSave={handleSaveItem}
  onCancel={resetForm}
  saveDisabled={!formData.itemType}
/>
```

#### 8. TableActionButtons
테이블 행별 액션 버튼

```tsx
<TableActionButtons
  onView={() => handleViewChange("view", item)}
  onEdit={() => handleViewChange("edit", item)}
  onDelete={() => handleDelete(item.id)}
/>
```

#### 9. ScreenVersionHistory
스크린 수정 이력 표시

```tsx
<ScreenVersionHistory
  versionHistory={screenVersion.versionHistory}
  title="품목 관리 수정 이력"
  colorScheme={{
    border: "border-purple-200 dark:border-purple-800",
    background: "bg-purple-50 dark:bg-purple-950/30",
    text: "text-purple-700 dark:text-purple-300"
  }}
/>
```

#### 10. EmptyState
빈 상태 표시

```tsx
<EmptyState
  icon={Package}
  title="등록된 품목이 없습니다"
  description="새 품목을 등록하세요"
  action={<Button onClick={handleAdd}>품목 등록</Button>}
/>
```

## 뷰 모드 패턴

모든 관리 페이지는 다음 뷰 모드를 사용합니다:

```tsx
type ViewMode = "list" | "view" | "create" | "edit";
const [view, setView] = useState<ViewMode>("list");
```

### 1. List 뷰 (목록)
- PageHeader + StatCards + SearchFilter + Table

### 2. View 뷰 (상세보기)
- PageHeader with DetailViewActions
- 읽기 전용 데이터 표시
- RevisionSelector (수정 이력 조회)

### 3. Create/Edit 뷰 (등록/수정)
- PageHeader with FormActions
- 폼 입력 필드들
- 저장/취소 버튼

## 색상 스키마

### 모듈별 색상 (다크모드 대응)
```tsx
const colorSchemes = {
  item: {
    border: "border-purple-200 dark:border-purple-800",
    background: "bg-purple-50 dark:bg-purple-950/30",
    text: "text-purple-700 dark:text-purple-300"
  },
  quote: {
    border: "border-blue-200 dark:border-blue-800",
    background: "bg-blue-50 dark:bg-blue-950/30",
    text: "text-blue-700 dark:text-blue-300"
  },
  // ... 다른 모듈들
};
```

## 반응형 원칙

### 1. 텍스트 크기
```tsx
className="text-sm md:text-base"
className="text-xl md:text-2xl"
```

### 2. 패딩/마진
```tsx
className="p-4 md:p-6"
className="gap-1 sm:gap-2"
```

### 3. 그리드
```tsx
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
```

### 4. 버튼 텍스트
```tsx
<span className="hidden sm:inline">저장</span>
```

## 타입 정의

```tsx
interface StatCardData {
  label: string;
  value: string | number;
  icon?: LucideIcon;
  iconColor?: string;
  trend?: {
    value: string;
    isPositive: boolean;
  };
}

interface ViewMode = "list" | "view" | "create" | "edit";
```

## Best Practices

### 1. 컴포넌트 임포트 순서
```tsx
// 1. React
import { useState } from "react";

// 2. UI 컴포넌트
import { Button } from "./ui/button";
import { Card, CardContent } from "./ui/card";

// 3. Organisms
import { PageLayout } from "./organisms/PageLayout";
import { PageHeader } from "./organisms/PageHeader";

// 4. 아이콘
import { Package, Edit, Trash2 } from "lucide-react";

// 5. Context/Utils
import { useData } from "./contexts/DataContext";
```

### 2. 상태 관리
- 모든 데이터는 DataContext 사용
- localStorage에 자동 영속화
- TypeScript 인터페이스로 타입 안전성 보장

### 3. 폼 검증
```tsx
import { validateForm, hasErrors } from "./utils/validation";
```

### 4. Toast 알림
```tsx
import { toast } from "sonner@2.0.3";

toast.success("저장되었습니다");
toast.error("오류가 발생했습니다");
```

## 13개 모듈 적용 체크리스트

각 모듈에서 다음 사항을 확인:

- [ ] PageLayout 사용
- [ ] PageHeader 사용 (아이콘 + 제목 + 설명)
- [ ] StatCards 4개 표시
- [ ] SearchFilter 사용
- [ ] ListActions 사용 (목록 뷰)
- [ ] DetailViewActions 사용 (상세 뷰)
- [ ] FormActions 사용 (등록/수정 뷰)
- [ ] TableActionButtons 사용 (테이블 행)
- [ ] 다크모드 색상 대응
- [ ] 반응형 클래스 적용
- [ ] ViewMode 타입 사용
- [ ] 버전 뱃지 제거 완료
