# 데이터 통합 가이드

## 개요
MES 시스템의 모든 위젯과 페이지가 중앙 집중식 데이터 관리 시스템(DataContext)을 통해 연동됩니다.

## DataContext 구조

### 제공되는 데이터

#### 1. 판매 관리
- **salesOrders**: 판매 주문 목록
- **quotes**: 견적 목록
- 함수: `addSalesOrder`, `updateSalesOrder`, `deleteSalesOrder`, `addQuote`, `updateQuote`

#### 2. 생산 관리
- **productionOrders**: 생산 주문 목록
- 함수: `addProductionOrder`, `updateProductionOrder`

#### 3. 품질 관리
- **qualityInspections**: 품질 검사 목록
- 함수: `addQualityInspection`, `updateQualityInspection`

#### 4. 재고 관리
- **inventoryItems**: 재고 품목 목록
- 함수: `addInventoryItem`, `updateInventoryItem`

#### 5. 구매 관리
- **purchaseOrders**: 구매 주문 목록
- 함수: `addPurchaseOrder`, `updatePurchaseOrder`

#### 6. 인사 관리
- **employees**: 직원 목록
- **attendances**: 출근 기록
- 함수: `addEmployee`, `updateEmployee`, `addAttendance`

#### 7. 결재 관리
- **approvals**: 결재 문서 목록
- 함수: `addApproval`, `updateApproval`

#### 8. 차량 관리
- **vehicles**: 차량 목록
- 함수: `addVehicle`, `updateVehicle`

#### 9. 회계 관리
- **accountingTransactions**: 거래 내역
- **receivables**: 미수금 목록
- 함수: `addAccountingTransaction`, `addReceivable`, `updateReceivable`

#### 10. 품목 마스터
- **itemMasters**: 품목 마스터 목록
- 함수: `addItemMaster`, `updateItemMaster`, `deleteItemMaster`

## 사용 방법

### 1. 컴포넌트에서 DataContext 사용하기

```typescript
import { useData } from "./contexts/DataContext";

export function MyComponent() {
  const { salesOrders, addSalesOrder, updateSalesOrder } = useData();
  
  // 데이터 읽기
  const totalSales = salesOrders.reduce((sum, order) => sum + order.totalAmount, 0);
  
  // 데이터 추가
  const handleAddOrder = () => {
    const newOrder = {
      id: `SO-${Date.now()}`,
      orderNumber: `SO-2025-${salesOrders.length + 1}`,
      customerName: "고객명",
      // ... 기타 필드
    };
    addSalesOrder(newOrder);
  };
  
  // 데이터 수정
  const handleUpdateOrder = (orderId: string) => {
    updateSalesOrder(orderId, { status: 'completed' });
  };
  
  return (
    // JSX
  );
}
```

### 2. 위젯에서 실시간 데이터 표시

```typescript
import { useMemo } from "react";
import { useData } from "../contexts/DataContext";

export function SalesWidget() {
  const { salesOrders } = useData();
  
  // useMemo로 계산된 값 캐싱
  const salesData = useMemo(() => {
    const total = salesOrders.reduce((sum, order) => sum + order.totalAmount, 0);
    const completed = salesOrders.filter(o => o.status === 'completed').length;
    
    return { total, completed };
  }, [salesOrders]);
  
  return (
    <div>
      <p>총 매출: {salesData.total.toLocaleString()}원</p>
      <p>완료 건수: {salesData.completed}건</p>
    </div>
  );
}
```

## 연동된 위젯 목록

### ✅ 완료된 위젯
1. **SalesOverviewWidget** - 판매 주문, 미수금 데이터 연동
2. **ProductionStatusWidget** - 생산 주문 데이터 연동
3. **QualityStatusWidget** - 품질 검사 데이터 연동
4. **InventoryStatusWidget** - 재고 품목 데이터 연동
5. **NotificationsWidget** - 결재, 재고, 생산, 견적 데이터 연동

### 📋 연동 가능한 위젯
- ApprovalStatusWidget → approvals 사용
- HRStatusWidget → employees, attendances 사용
- VehicleStatusWidget → vehicles 사용
- PurchaseStatusWidget → purchaseOrders 사용
- CashFlowWidget → accountingTransactions 사용
- ReceivablesWidget → receivables 사용

## 데이터 영속성

모든 데이터는 `localStorage`에 자동으로 저장됩니다:
- 키 패턴: `mes-{dataType}` (예: `mes-salesOrders`, `mes-inventoryItems`)
- 페이지 새로고침 시에도 데이터 유지
- `resetAllData()` 함수로 초기 데이터로 리셋 가능

## 타입 정의

모든 데이터 타입은 `/components/contexts/DataContext.tsx`에 정의되어 있습니다:

```typescript
export interface SalesOrder {
  id: string;
  orderNumber: string;
  customerName: string;
  projectName: string;
  orderDate: string;
  deliveryDate: string;
  totalAmount: number;
  status: 'pending' | 'confirmed' | 'production' | 'shipping' | 'completed' | 'cancelled';
  items: SalesOrderItem[];
}
```

## 페이지별 연동 현황

### ✅ 완료
- **SalesManagement**: 매출 통계 실시간 계산
- **위젯 시스템**: 5개 핵심 위젯 데이터 연동

### 🔄 작업 필요
- **ItemManagement**: itemMasters 사용
- **PricingManagement**: 가격 데이터 별도 관리
- **ProductionManagement**: productionOrders 사용
- **QualityManagement**: qualityInspections 사용
- **InventoryManagement**: inventoryItems 사용

## 베스트 프랙티스

### 1. useMemo 사용
계산이 복잡한 데이터는 useMemo로 감싸서 성능 최적화:

```typescript
const stats = useMemo(() => {
  // 복잡한 계산
  return calculatedData;
}, [dependency]);
```

### 2. 조건부 렌더링
데이터가 없을 때 빈 상태 표시:

```typescript
if (items.length === 0) {
  return <EmptyState message="데이터가 없습니다" />;
}
```

### 3. 에러 처리
데이터 추가/수정 시 에러 처리:

```typescript
try {
  addSalesOrder(newOrder);
  toast.success("주문이 추가되었습니다");
} catch (error) {
  toast.error("주문 추가 실패");
}
```

## 향후 개선 사항

1. **백엔드 연동**: localStorage → API 통신
2. **실시간 동기화**: WebSocket을 통한 실시간 데이터 업데이트
3. **오프라인 지원**: Service Worker를 통한 오프라인 모드
4. **데이터 검증**: Zod 등을 사용한 타입 안전성 강화
5. **캐싱 전략**: React Query를 통한 서버 상태 관리

## 문의 및 지원

데이터 통합 관련 문의사항은 시스템 관리자에게 문의하세요.
