# SAM MES 시스템 화면설계서

> **작성일**: 2025년 10월 24일  
> **버전**: 1.0.0  
> **시스템**: SAM (중소·중견기업용 MES)

---

## 📋 목차

1. [시스템 개요](#시스템-개요)
2. [공통 UI 컴포넌트](#공통-ui-컴포넌트)
3. [모듈별 화면설계](#모듈별-화면설계)
   - [1. 대시보드](#1-대시보드)
   - [2. 영업관리](#2-영업관리)
   - [3. 판매관리](#3-판매관리)
   - [4. 구매관리](#4-구매관리)
   - [5. 생산관리](#5-생산관리)
   - [6. 품질관리](#6-품질관리)
   - [7. 자재관리](#7-자재관리)
   - [8. 장비관리](#8-장비관리)
   - [9. 차량관리](#9-차량관리)
   - [10. 회계관리](#10-회계관리)
   - [11. 인사관리](#11-인사관리)
   - [12. 전자결재](#12-전자결재)
   - [13. 기준정보 관리](#13-기준정보-관리)
   - [14. 보고서 및 분석](#14-보고서-및-분석)
   - [15. 시스템관리](#15-시스템관리)
4. [권한별 메뉴 구성](#권한별-메뉴-구성)

---

## 시스템 개요

### 시스템 특징

- **대상**: 중소 및 중견기업
- **시스템 명**: SAM MES (Manufacturing Execution System)
- **모듈 구성**: 13개 주요 모듈
- **반응형 디자인**: 데스크톱/태블릿/모바일 완벽 지원
- **레이아웃 시스템**:
  - 데스크톱: 테이블 뷰
  - 모바일: 카드 뷰
  - 독립된 2DEPTH 메뉴 구조

### 기술 스택

- **Frontend**: React 18, TypeScript
- **UI Framework**: Tailwind CSS v4.0
- **Component Library**: shadcn/ui
- **Icons**: Lucide React
- **Charts**: Recharts
- **State Management**: React Hooks

### 디자인 시스템

**공통 컴포넌트 (6개)**:
1. `PageLayout` - 페이지 레이아웃 (통일된 padding/spacing)
2. `PageHeader` - 페이지 헤더 (제목, 설명, 아이콘, 액션 버튼)
3. `StatCards` - 통계 카드 그리드
4. `SearchFilter` - 검색 및 필터 바
5. `EmptyState` - 빈 상태 표시
6. `MobileCard` - 모바일 카드 컴포넌트

**타이포그래피 규칙**:
- 페이지 제목: `text-xl md:text-2xl` (PageHeader가 자동 적용)
- 카드 제목: `text-base`
- 본문: `text-sm`
- 설명: `text-sm text-muted-foreground`

**반응형 브레이크포인트**:
- 모바일: `< 768px` - 카드 뷰, 단일 컬럼
- 태블릿: `768px - 1024px` - 2-3 컬럼 그리드
- 데스크톱: `> 1024px` - 테이블 뷰, 4 컬럼 그리드

---

## 공통 UI 컴포넌트

### 1. PageLayout

**용도**: 모든 페이지의 기본 레이아웃
**Props**:
- `maxWidth`: "sm" | "md" | "lg" | "xl" | "2xl" | "full" (기본값: "full")
- `children`: ReactNode

**자동 적용**:
- Padding: `p-4 md:p-6`
- Spacing: `space-y-4 md:space-y-6`

### 2. PageHeader

**용도**: 페이지 상단 헤더 (제목, 설명, 액션 버튼)
**Props**:
- `title`: string (필수)
- `description`: string (선택)
- `icon`: LucideIcon (선택)
- `actions`: ReactNode (선택)

**구성요소**:
- 아이콘 + 제목 + 설명
- 액션 버튼 영역 (우측 배치)
- 모바일: 아이콘 숨김, 수직 배치

### 3. StatCards

**용도**: 통계 정보를 카드 형태로 표시
**Props**:
- `stats`: Array<StatItem>
  - `label`: string
  - `value`: string | number
  - `icon`: LucideIcon
  - `iconColor`: string
  - `trend`: { value: string, isPositive: boolean }

**레이아웃**:
- 그리드: `grid-cols-1 md:grid-cols-2 lg:grid-cols-4`
- 간격: `gap-4`

### 4. SearchFilter

**용도**: 검색 및 필터링 기능
**Props**:
- `searchValue`: string (필수)
- `onSearchChange`: (value: string) => void (필수)
- `searchPlaceholder`: string (선택)
- `filterButton`: boolean (기본값: true)
- `onFilterClick`: () => void (선택)
- `extraActions`: ReactNode (선택)

### 5. EmptyState

**용도**: 데이터가 없을 때 표시
**Props**:
- `icon`: LucideIcon (필수)
- `title`: string (필수)
- `description`: string (선택)
- `action`: { label: string, onClick: () => void } (선택)

### 6. MobileCard

**용도**: 모바일 환경에서 리스트 아이템 표시
**Props**:
- `title`: string (필수)
- `subtitle`: string (선택)
- `icon`: ReactNode (선택)
- `badge`: { label: string, variant: string } (선택)
- `fields`: Array<Field>
- `actions`: Array<Action>

---

## 모듈별 화면설계

## 1. 대시보드

### 1.1 CEO/관리자 대시보드

**파일**: `/components/Dashboard.tsx`

**화면 구성**:
- 역할별 대시보드 분기 (CEO, ProductionManager, Worker, SystemAdmin)
- 실시간 통계 카드
- 주요 지표 차트
- 최근 활동 목록

**주요 기능**:
- 실시간 데이터 모니터링
- 역할별 맞춤 정보 제공
- 빠른 액션 버튼

### 1.2 영업 대시보드

**파일**: `/components/SalesDashboard.tsx`

**통계 카드** (4개):
- 월 매출 (₩, 증감률)
- 진행중인 견적 (건수, 증감)
- 수주 건수 (건수, 증감률)
- 활성 고객 (수, 증감률)

**주요 섹션**:
- 주요 기능 모듈 (견적 산출, 단가관리, 영업관리, 수주관리)
- 최근 견적 목록 (거래처, 제품, 금액, 상태)
- 최근 수주 목록 (주문번호, 거래처, 금액, 상태, 날짜)

**아이콘**:
- 메인: `Briefcase`
- 통계: `DollarSign`, `Calculator`, `ShoppingCart`, `Users`

### 1.3 구매 대시보드

**파일**: `/components/PurchaseDashboard.tsx`

**통계 카드** (4개):
- 전체 발주 (1,234건, 전월 대비 +12.5%)
- 진행 중 (87건)
- 지연 건 (5건, 긴급)
- 완료 (1,142건)

**주요 기능**:
- 발주 등록
- 구매처 관리
- 입고 확인
- 구매 현황 조회

**아이콘**:
- 메인: `ShoppingCart`
- 통계: `ShoppingCart`, `TrendingUp`, `AlertTriangle`, `CheckCircle`

### 1.4 생산 대시보드

**파일**: `/components/ProductionDashboard.tsx`

**통계 카드** (4개):
- 오늘 생산량 (1,245개, +15%)
- 진행중인 작업 (28건, +3)
- 완료 작업 (156건, +12%)
- 지연 작업 (5건, -2)

**주요 섹션**:
- 생산계획 목록 (계획번호, 제품, 수량, 상태, 진척도)
- 작업지시 현황 (작업번호, 작업장, 제품, 상태, 시작시간)
- 주요 기능 모듈 (생산계획, 작업지시, 생산실적)

**아이콘**:
- 메인: `Factory`
- 통계: `Factory`, `ClipboardList`, `Activity`, `AlertCircle`

### 1.5 품질 대시보드

**파일**: `/components/QualityDashboard.tsx`

**통계 카드** (4개):
- 오늘 검사 건수 (145건, +8%)
- 합격률 (98.5%, +2.1%)
- 진행중 (23건, +5)
- 부적합 (3건, -1)

**주요 섹션**:
- 검사 유형별 모듈 (수입검사, 중간검사, 제품검사)
- 검사 기록 (유형, 로트번호, 자재, 결과, 검사자)
- 금일 검사 일정 (시간, 유형, 품목, 수량, 상태)

**아이콘**:
- 메인: `ClipboardCheck`
- 통계: `ClipboardCheck`, `CheckCircle`, `CheckSquare`, `XCircle`

### 1.6 자재 대시보드

**파일**: `/components/MaterialDashboard.tsx`

**통계 카드** (4개):
- 전체 재고
- 입고 대기
- 출고 예정
- 재고 부족

**주요 기능**:
- 재고 현황
- 입고 관리
- 출고 관리
- 부적합품 관리

### 1.7 회계 대시보드

**파일**: `/components/AccountingDashboard.tsx`

**통계 카드**:
- 매출 현황
- 매입 현황
- 원가 관리
- 재무제표

**주요 기능**:
- 매출 관리
- 매입 관리
- 원가 분석
- 재무제표 조회

### 1.8 기준정보 대시보드

**파일**: `/components/MasterDataDashboard.tsx`

**주요 섹션**:
- 모델 관리
- 자재 관리
- BOM 관리
- 공정 관리
- 거래처 관리
- 사원/부서 관리
- 로트 관리
- 검사기준 관리
- 코드 관리

### 1.9 시스템 관리 대시보드

**파일**: `/components/SystemAdminDashboard.tsx`

**주요 기능**:
- 사용자 관리
- 권한 관리
- 메뉴 커스터마이징
- 시스템 모니터링

---

## 2. 영업관리

### 2.1 리드 관리

**파일**: `/components/SalesLeadDashboard.tsx`

**화면 구성**:
- PageHeader (제목: "리드 관리", 아이콘: `Users`)
- StatCards (통계 카드)
- SearchFilter (검색 및 필터)
- 리드 목록 (테이블/카드 뷰)

**주요 기능**:
- 리드 등록
- 리드 상태 관리 (신규, 접촉, 견적, 수주, 실패)
- 리드 히스토리 추적
- 영업 활동 기록

**데이터 구조**:
```typescript
interface Lead {
  id: string;
  company: string;
  contact: string;
  phone: string;
  email: string;
  status: "신규" | "접촉" | "견적" | "수주" | "실패";
  source: string;
  createdDate: string;
  lastContact: string;
  assignedTo: string;
}
```

### 2.2 매출처 관리

**파일**: `/components/CustomerAccountManagement.tsx`

**화면 구성**:
- PageHeader (제목: "매출처 관리", 아이콘: `Building2`)
- StatCards
- SearchFilter
- 매출처 목록 (테이블/카드 뷰)

**주요 기능**:
- 매출처 등록/수정/삭제
- 거래 내역 조회
- 신용 한도 관리
- 결제 조건 설정

**데이터 구조**:
```typescript
interface CustomerAccount {
  id: string;
  code: string;
  name: string;
  bizNumber: string;
  representative: string;
  contact: string;
  address: string;
  creditLimit: number;
  paymentTerms: string;
  status: "활성" | "보류" | "중지";
}
```

### 2.3 거래처 관리

**파일**: `/components/CustomerManagement.tsx`

**화면 구성**:
- PageHeader (제목: "거래처 관리", 아이콘: `Building`)
- StatCards (전체 거래처, 활성, 신규, VIP)
- SearchFilter
- 거래처 목록

**주요 기능**:
- 거래처 정보 관리
- 담당자 정보
- 거래 이력
- 등급 관리

**모달/다이얼로그**:
- 거래처 등록 (기본정보, 담당자, 결제조건, 배송정보)
- 거래처 상세
- 거래처 수정

### 2.4 견적 관리 (개선)

**파일**: `/components/QuoteManagement.tsx`, `/components/QuoteManagement3List.tsx`, `/components/QuoteManagement3Write.tsx`

**2.4.1 견적 목록 (QuoteManagement3List.tsx)**

**화면 구성**:
- PageHeader (제목: "견적 관리", 아이콘: `FileText`)
- StatCards (전체 견적, 금일 작성, 진행중, 승인완료)
- SearchFilter
- 견적 목록 테이블/카드

**테이블 컬럼**:
- 견적번호
- 작성일
- 거래처
- 담당자
- 견적금액
- 상태 (작성중, 검토중, 승인완료, 반려)
- 유효기한
- 관리 (상세/수정/삭제)

**주요 액션**:
- 신규 작성
- 견적서 출력
- 엑셀 다운로드
- 상태 변경

**2.4.2 견적 작성 (QuoteManagement3Write.tsx)**

**화면 구성**:
- PageHeader (제목: "견적서 작성", 아이콘: `FileEdit`)
- 접이식 섹션 (Collapsible)

**섹션 구성**:
1. **기본 정보**
   - 견적번호 (자동생성)
   - 작성일
   - 유효기한
   - 거래처 선택
   - 담당자

2. **견적 품목**
   - 품목 추가/삭제
   - 품목명, 규격, 단위, 수량, 단가, 공급가액, 부가세

3. **합계 정보**
   - 공급가액 합계
   - 부가세 합계
   - 총 견적금액

4. **특이사항**
   - 비고
   - 결제조건
   - 납기일

**액션 버튼**:
- 저장 (임시저장/확정)
- 미리보기
- 취소

### 2.5 견적 관리 (기존 - 시뮬레이션)

**파일**: `/components/QuoteSimulation.tsx`

**화면 구성**:
- 견적 계산기 인터페이스
- 실시간 견적 산출
- 제품 선택 및 옵션 구성
- 즉시 견적 확인

**주요 기능**:
- 제품 선택
- 수량/옵션 설정
- 자동 가격 계산
- 견적서 생성

### 2.6 수주 관리

**파일**: `/components/OrderManagement.tsx` ⭐ **PageLayout 적용 완료**

**화면 구성**:
- PageHeader (제목: "주문 관리", 아이콘: `ShoppingCart`)
- StatCards (총 주문, 총 주문금액, 진행 중, 견적 대기)
- SearchFilter
- 탭 메뉴 (주문 관리, 생산 현황, 작업 현황)

**주문 관리 탭**:
- 주문 목록 테이블
- 컬럼: 주문번호, 접수일, 거래처, 납기일, 금액, 상태
- 액션: 견적서 작성, 주문 등록, 상세보기

**생산 현황 탭**:
- 생산 계획 목록
- 공정별 진척도
- 예상 완료일

**작업 현황 탭**:
- 작업 지시 목록
- 작업자별 실적
- 공정별 현황

**데이터 구조**:
```typescript
interface Order {
  id: string;
  orderNo: string;
  customerName: string;
  receivedDate: string;
  deliveryDate: string;
  amount: number;
  status: "견적대기" | "견적완료" | "생산중" | "검수중" | "완료";
  items: OrderItem[];
  totalAmount: number;
}
```

### 2.7 영업 실적

**파일**: `/components/SalesPerformance.tsx`

**화면 구성**:
- PageHeader (제목: "영업 실적", 아이콘: `BarChart3`)
- 기간 선택 (일/주/월/년)
- 영업 실적 차트
- 영업사원별 실적
- 제품별 매출

**차트 유형**:
- 매출 추이 (LineChart)
- 제품별 매출 (BarChart)
- 영업사원별 실적 (PieChart)

---

## 3. 판매관리

### 3.1 단가 관리

**파일**: `/components/PricingManagement.tsx`

**화면 구성**:
- PageHeader (제목: "단가 관리", 아이콘: `DollarSign`)
- StatCards
- SearchFilter
- 제품 단가 목록

**주요 기능**:
- 제품별 단가 설정
- 단가 이력 관리
- 고객별 특별 단가
- 수량별 할인

**테이블 컬럼**:
- 제품코드
- 제품명
- 기본단가
- 적용일자
- 비고
- 관리

### 3.2 영업 관리

**파일**: `/components/SalesManagement.tsx`

**화면 구성**:
- PageHeader (제목: "영업 관리", 아이콘: `Briefcase`)
- 영업 활동 현황
- 고객별 영업 상태
- 일정 관리

**주요 기능**:
- 영업 활동 등록
- 고객 방문 일정
- 제안서 관리
- Follow-up 관리

---

## 4. 구매관리

### 4.1 거래처 관리 (공급업체)

**파일**: `/components/SupplierManagement.tsx`

**화면 구성**:
- PageHeader (제목: "거래처 관리", 아이콘: `Building2`)
- StatCards
- SearchFilter
- 공급업체 목록

**주요 기능**:
- 공급업체 등록/수정
- 공급 품목 관리
- 거래 조건 설정
- 평가 관리

### 4.2 발주 관리

**파일**: `/components/PurchaseOrderManagement.tsx`

**화면 구성**:
- PageHeader (제목: "발주 관리", 아이콘: `FileText`)
- StatCards (전체 발주, 진행중, 입고대기, 완료)
- SearchFilter
- 발주 목록

**주요 기능**:
- 발주서 작성
- 발주 승인
- 입고 확인
- 발주 취소

**데이터 구조**:
```typescript
interface PurchaseOrder {
  id: string;
  poNumber: string;
  supplier: string;
  orderDate: string;
  deliveryDate: string;
  items: POItem[];
  totalAmount: number;
  status: "대기" | "승인" | "발주" | "입고중" | "완료" | "취소";
  approver: string;
}
```

**발주서 작성 모달**:
- 공급업체 선택
- 품목 추가 (품목명, 규격, 수량, 단가)
- 납기일 지정
- 배송지 정보
- 특이사항

### 4.3 구매 현황

**파일**: `/components/PurchaseStatus.tsx`

**화면 구성**:
- PageHeader (제목: "구매 현황", 아이콘: `BarChart3`)
- 기간별 구매 통계
- 품목별 구매 현황
- 공급업체별 구매액

**차트**:
- 월별 구매 추이
- 품목별 구매 비중
- 공급업체별 거래액

---

## 5. 생산관리

### 5.1 품목 관리

**파일**: `/components/ItemManagement.tsx` ⭐ **PageLayout 적용 완료**

**화면 구성**:
- PageHeader (제목: "품목 관리", 아이콘: `Package`)
- StatCards (전체 품목, 원자재, 반제품, 완제품)
- SearchFilter
- 품목 목록 테이블/카드

**테이블 컬럼**:
- 품목코드
- 품목명
- 품목구분 (원자재/반제품/완제품)
- 규격
- 단위
- 재고수량
- 안전재고
- 상태
- 관리

**품목 등록 모달**:
1. 기본 정보
   - 품목코드 (자동생성)
   - 품목명
   - 품목구분
   - 규격
   - 단위

2. 재고 정보
   - 현재고
   - 안전재고
   - 최대재고

3. 단가 정보
   - 표준단가
   - 매입단가
   - 매출단가

4. 기타 정보
   - 제조사
   - 비고

### 5.2 BOM 관리 (개선)

**파일**: `/components/BOMManagementEnhanced.tsx`, `/components/BOMManagementPage.tsx`, `/components/BOMRegistration.tsx`

**화면 구성**:
- PageHeader (제목: "BOM 관리", 아이콘: `GitBranch`)
- StatCards
- SearchFilter
- BOM 트리 뷰

**주요 기능**:
- BOM 등록/수정/삭제
- BOM 복사
- 트리 구조 표시
- 소요량 계산

**BOM 구조**:
```typescript
interface BOM {
  id: string;
  productCode: string;
  productName: string;
  version: string;
  status: "작성중" | "승인" | "사용중" | "폐기";
  items: BOMItem[];
}

interface BOMItem {
  level: number;
  itemCode: string;
  itemName: string;
  quantity: number;
  unit: string;
  loss: number;
  children?: BOMItem[];
}
```

**BOM 등록 화면**:
- 제품 선택
- BOM 트리 편집기
- 하위 품목 추가/삭제
- 소요량 입력
- Loss율 설정

### 5.3 품목 관리 (기존)

**파일**: `/components/ProductsManagement.tsx`

### 5.4 BOM 관리 (기존)

**파일**: `/components/ProductionBOMManagement.tsx`

### 5.5 스크린 생산

**파일**: `/components/ScreenProductionPage.tsx`

**화면 구성**:
- PageHeader (제목: "스크린 생산", 아이콘: `Package`)
- 생산 계획
- 작업 지시
- 생산 실적 입력

**주요 기능**:
- 작업 지시서 조회
- 생산 수량 입력
- 불량 수량 입력
- 실적 저장

### 5.6 슬랫 생산

**파일**: `/components/SlatProductionPage.tsx`

**화면 구성**:
- 슬랫 생산 관리
- 공정별 실적
- 품질 검사

### 5.7 절곡 생산

**파일**: `/components/BendingProductionPage.tsx`

**화면 구성**:
- 절곡 데이터 입력
- 작업 조건 설정
- 실적 관리

### 5.8 재고 생산

**파일**: `/components/StockProductionPage.tsx`

**화면 구성**:
- 재고 생산 계획
- 생산 실적
- 재고 현황

---

## 6. 품질관리

### 6.1 수입 검사

**파일**: `/components/IncomingInspectionManagement.tsx`

**화면 구성**:
- PageHeader (제목: "수입 검사", 아이콘: `CheckSquare`)
- StatCards (금일 검사, 합격, 부적합, 검사대기)
- SearchFilter
- 검사 목록

**주요 기능**:
- 입고 자재 검사
- 검사 기준 확인
- 합격/부적합 판정
- 검사 성적서 출력

**검사 프로세스**:
1. 입고 자재 확인
2. 검사 기준 조회
3. 검사 실시
4. 측정 데이터 입력
5. 합격/부적합 판정
6. 처리 결과 등록

**데이터 구조**:
```typescript
interface IncomingInspection {
  id: string;
  inspectionNo: string;
  lotNo: string;
  itemCode: string;
  itemName: string;
  quantity: number;
  supplier: string;
  receivedDate: string;
  inspectionDate: string;
  inspector: string;
  result: "합격" | "부적합" | "조건부합격";
  measurements: Measurement[];
  remarks: string;
}
```

### 6.2 중간 검사 (공정 검사)

**파일**: `/components/ProcessInspectionManagement.tsx`

**화면 구성**:
- PageHeader (제목: "중간 검사", 아이콘: `ClipboardCheck`)
- StatCards
- SearchFilter
- 검사 목록

**주요 기능**:
- 공정별 검사
- 실시간 품질 모니터링
- 관리도 작성
- 이상 발생 시 알림

### 6.3 제품 검사 (최종 검사)

**파일**: `/components/FinalInspectionManagement.tsx`

**화면 구성**:
- PageHeader (제목: "제품 검사", 아이콘: `CheckCircle`)
- StatCards
- SearchFilter
- 검사 목록

**주요 기능**:
- 완제품 검사
- 출하 승인
- 검사 성적서 발행
- 불량 처리

### 6.4 품목별 검사

**파일**: `/components/QualityItemInspection.tsx`

**화면 구성**:
- 품목별 검사 이력
- 검사 데이터 분석
- 불량률 추이

### 6.5 품목별 검사 (고급)

**파일**: `/components/QualityItemInspectionEnhanced.tsx`

**화면 구성**:
- 고급 통계 분석
- 관리도
- 공정능력지수 (Cpk)

---

## 7. 자재관리

### 7.1 재고 현황

**파일**: `/components/StockStatus.tsx`

**화면 구성**:
- PageHeader (제목: "재고 현황", 아이콘: `Layers`)
- StatCards (전체 재고, 안전재고 이하, 과다재고, 재고금액)
- SearchFilter
- 재고 목록

**테이블 컬럼**:
- 품목코드
- 품목명
- 현재고
- 안전재고
- 가용재고
- 단위
- 창고
- 로케이션

**주요 기능**:
- 실시간 재고 조회
- 재고 이동
- 재고 조정
- 재고 실사

### 7.2 입고 관리

**파일**: `/components/ReceivingManagement.tsx`

**화면 구성**:
- PageHeader (제목: "입고 관리", 아이콘: `Package`)
- StatCards (금일 입고, 입고대기, 검수중, 완료)
- SearchFilter
- 입고 목록

**주요 기능**:
- 입고 등록
- 입고 검수
- 재고 반영
- 입고증 출력

**입고 프로세스**:
1. 발주서 확인
2. 입고 수량 확인
3. 검사 의뢰
4. 검사 완료 후 입고
5. 재고 반영

### 7.3 출고 관리

**파일**: `/components/ShippingManagement.tsx`

**화면 구성**:
- PageHeader (제목: "출고 관리", 아이콘: `Truck`)
- 탭: 출고 현황, 출고 지시, 출고 이력
- StatCards
- SearchFilter
- 출고 목록

**주요 기능**:
- 출고 지시
- 피킹 리스트 출력
- 출고 실적 입력
- 거래명세서 출력

**출고 유형**:
- 생산 출고
- 판매 출고
- 반품 출고
- 이동 출고

### 7.4 부적합품 관리

**파일**: `/components/NonconformingManagement.tsx`

**화면 구성**:
- PageHeader (제목: "부적합품 관리", 아이콘: `XCircle`)
- StatCards (전체, 처리중, 재작업, 폐기)
- SearchFilter
- 부적합품 목록

**주요 기능**:
- 부적합품 등록
- 처리 방법 결정 (재작업/폐기/특채)
- 처리 결과 등록
- 원인 분석

**데이터 구조**:
```typescript
interface NonconformingItem {
  id: string;
  ncNo: string;
  itemCode: string;
  itemName: string;
  lotNo: string;
  quantity: number;
  discoveredDate: string;
  discoveredBy: string;
  ncType: "치수불량" | "외관불량" | "기능불량" | "기타";
  disposition: "재작업" | "폐기" | "특채" | "반품" | "검토중";
  cause: string;
  action: string;
  status: "등록" | "검토중" | "처리중" | "완료";
}
```

---

## 8. 장비관리

### 8.1 설비 관리

**파일**: `/components/EquipmentManagement.tsx` ⭐ **PageLayout 적용 완료**

**화면 구성**:
- PageHeader (제목: "설비 관리", 아이콘: `Wrench`)
- StatCards (전체 설비, 가동중, 고장, 점검중)
- SearchFilter
- 설비 목록 테이블/카드

**테이블 컬럼**:
- 설비코드
- 설비명
- 설비유형
- 설치위치
- 상태 (가동중/정지/고장/점검중)
- 최근점검일
- 차기점검일
- 관리

**주요 기능**:
- 설비 등록/수정
- 가동 현황
- 점검 계획
- 고장 이력
- 보전 이력

**설비 상세 모달**:
- 기본 정보
- 스펙 정보
- 점검 이력
- 고장 이력
- 보전 이력

---

## 9. 차량관리

### 9.1 차량 관리

**파일**: `/components/VehicleManagement.tsx` ⭐ **PageLayout 적용 완료**

**화면 구성**:
- PageHeader (제목: "차량 관리", 아이콘: `Car`)
- StatCards (전체 차량, 운행중, 정비중, 가용)
- SearchFilter
- 차량 목록 테이블/카드

**테이블 컬럼**:
- 차량번호
- 차량명
- 차종
- 연식
- 상태 (운행중/가용/정비중/폐차)
- 담당자
- 최근정비일
- 다음정비일
- 관리

**주요 기능**:
- 차량 등록/수정
- 운행 일지
- 정비 이력
- 연료 관리
- 보험 관리

**차량 상세 모달**:
- 기본 정보 (차량번호, 차명, 차종, 연식)
- 운행 정보 (주행거리, 연료타입, 평균연비)
- 정비 이력
- 보험 정보
- 사고 이력

---

## 10. 회계관리

### 10.1 매출 관리

**파일**: `/components/SalesAccountingManagement.tsx`

**화면 구성**:
- PageHeader (제목: "매출 관리", 아이콘: `TrendingUp`)
- StatCards (월 매출, 미수금, 회수예정, 연체)
- SearchFilter
- 매출 목록

**주요 기능**:
- 매출 전표 등록
- 세금계산서 발행
- 미수금 관리
- 회수 관리

**테이블 컬럼**:
- 전표번호
- 일자
- 거래처
- 품목
- 공급가액
- 부가세
- 합계
- 결제조건
- 수금예정일
- 상태

### 10.2 매입 관리

**파일**: `/components/PurchaseAccountingManagement.tsx`

**화면 구성**:
- PageHeader (제목: "매입 관리", 아이콘: `TrendingDown`)
- StatCards (월 매입, 미지급금, 지급예정, 연체)
- SearchFilter
- 매입 목록

**주요 기능**:
- 매입 전표 등록
- 세금계산서 수령
- 미지급금 관리
- 지급 관리

### 10.3 원가 관리

**파일**: `/components/CostManagement.tsx`

**화면 구성**:
- PageHeader (제목: "원가 관리", 아이콘: `DollarSign`)
- 제품별 원가 분석
- 원가 구성 비율
- 원가 절감 목표

**주요 기능**:
- 표준원가 설정
- 실제원가 계산
- 원가차이 분석
- 원가절감 활동

### 10.4 재무제표

**파일**: `/components/FinancialStatements.tsx`

**화면 구성**:
- PageHeader (제목: "재무제표", 아이콘: `FileText`)
- 재무제표 유형 선택
- 기간 선택
- 재무제표 조회

**재무제표 종류**:
- 재무상태표 (대차대조표)
- 손익계산서
- 현금흐름표
- 제조원가명세서

---

## 11. 인사관리

### 11.1 인사 대시보드

**파일**: `/components/HRManagement.tsx`

**화면 구성**:
- PageHeader (제목: "인사 관리", 아이콘: `UserCog`)
- 탭: 조직관리, 직원관리, 근태관리, 급여관리
- StatCards
- 주요 기능 모듈

**통계 카드**:
- 전체 인원
- 금월 입사
- 금월 퇴사
- 재직률

### 11.2 직원 관리

**파일**: `/components/EmployeeManagement.tsx`

**화면 구성**:
- PageHeader (제목: "직원 관리", 아이콘: `Users`)
- StatCards (전체, 재직, 휴직, 퇴사)
- SearchFilter
- 직원 목록

**테이블 컬럼**:
- 사번
- 이름
- 부서
- 직급
- 직책
- 입사일
- 상태
- 관리

**주요 기능**:
- 직원 등록
- 인사 정보 관리
- 발령 이력
- 교육 이력

**직원 등록 모달**:
1. 기본 정보
   - 사번
   - 이름
   - 주민등록번호
   - 연락처
   - 이메일

2. 인사 정보
   - 부서
   - 직급
   - 직책
   - 입사일
   - 고용형태

3. 급여 정보
   - 기본급
   - 수당
   - 계좌정보

### 11.3 부서 관리

**파일**: `/components/DepartmentManagement.tsx`

**화면 구성**:
- PageHeader (제목: "부서 관리", 아이콘: `Building2`)
- 부서 트리
- 부서 정보
- 부서원 목록

**주요 기능**:
- 부서 등록/수정/삭제
- 부서 구조 관리
- 부서장 지정
- 부서원 배치

### 11.4 조직도

**파일**: `/components/OrganizationChart.tsx`

**화면 구성**:
- PageHeader (제목: "조직도", 아이콘: `Building`)
- 조직도 차트 (트리 구조)
- 부서별 인원 표시

**주요 기능**:
- 조직도 조회
- 부서별 필터링
- 인원 검색

### 11.5 근태 관리

**파일**: `/components/AttendanceManagement.tsx`

**화면 구성**:
- PageHeader (제목: "근태 관리", 아이콘: `Calendar`)
- 캘린더 뷰
- 근태 현황
- 휴가 관리

**주요 기능**:
- 출퇴근 기록
- 휴가 신청/승인
- 연차 관리
- 근태 통계

### 11.6 급여 관리

**파일**: `/components/PayrollManagement.tsx`

**화면 구성**:
- PageHeader (제목: "급여 관리", 아이콘: `DollarSign`)
- 급여 계산
- 급여 명세서
- 4대보험

**주요 기능**:
- 급여 계산
- 급여 명세서 발행
- 공제 항목 관리
- 급여 대장

---

## 12. 전자결재

### 12.1 전자결재 메인

**파일**: `/components/ApprovalManagement.tsx`

**화면 구성**:
- PageHeader (제목: "전자결재", 아이콘: `FileSignature`)
- 탭: 대기 문서, 진행 문서, 완료 문서, 반려 문서
- StatCards (대기, 진행, 완료, 반려)
- 문서 목록

**주요 기능**:
- 결재 대기 문서 조회
- 결재 승인/반려
- 문서 상세 보기
- 결재선 확인

### 12.2 기안함

**파일**: `/components/DraftBox.tsx`

**화면 구성**:
- PageHeader (제목: "기안함", 아이콘: `FileText`)
- 내가 기안한 문서 목록
- 문서 상태별 필터

**주요 기능**:
- 기안 문서 조회
- 진행 상태 확인
- 문서 회수

### 12.3 결재함

**파일**: `/components/ApprovalBox.tsx`

**화면 구성**:
- PageHeader (제목: "결재함", 아이콘: `FileCheck`)
- 결재 대기 문서
- 결재 완료 문서

**주요 기능**:
- 결재 승인
- 결재 반려
- 의견 작성

### 12.4 참조함

**파일**: `/components/ReferenceBox.tsx`

**화면 구성**:
- PageHeader (제목: "참조함", 아이콘: `Eye`)
- 참조 문서 목록
- 읽음/안읽음 표시

### 12.5 문서 작성

**파일**: `/components/DocumentWrite.tsx`

**화면 구성**:
- PageHeader (제목: "문서 작성", 아이콘: `Edit`)
- 문서 양식 선택
- 문서 작성 폼
- 결재선 지정

**문서 양식**:
- 휴가 신청서
- 지출 결의서
- 구매 품의서
- 업무 보고서
- 일반 결재

**작성 프로세스**:
1. 양식 선택
2. 제목 입력
3. 내용 작성
4. 결재선 지정
5. 참조자 지정
6. 첨부파일 등록
7. 상신

---

## 13. 기준정보 관리

### 13.1 모델 관리

**파일**: `/components/ModelManagement.tsx`

**화면 구성**:
- PageHeader (제목: "모델 관리", 아이콘: `Box`)
- StatCards
- SearchFilter
- 모델 목록

**주요 기능**:
- 모델 등록/수정
- 모델 정보 관리
- 모델별 BOM 연결

### 13.2 자재 관리 (기준정보)

**파일**: `/components/ItemManagement.tsx`

**화면 구성**:
- 품목 마스터 관리
- 품목 분류 체계
- 품목 속성 관리

### 13.3 BOM 관리

**파일**: `/components/BOMManagementPage.tsx`

**화면 구성**:
- BOM 마스터 관리
- BOM 버전 관리
- BOM 승인 관리

### 13.4 공정 관리

**파일**: `/components/ProcessManagement.tsx`

**화면 구성**:
- PageHeader (제목: "공정 관리", 아이콘: `Wrench`)
- StatCards
- SearchFilter
- 공정 목록

**주요 기능**:
- 공정 등록/수정
- 공정 순서 관리
- 작업장 연결
- 표준 작업시간 설정

**데이터 구조**:
```typescript
interface Process {
  id: string;
  processCode: string;
  processName: string;
  processType: string;
  workCenter: string;
  standardTime: number;
  setupTime: number;
  sequence: number;
  description: string;
}
```

### 13.5 거래처 관리

**파일**: `/components/CustomerManagement.tsx`

**화면 구성**:
- 거래처 마스터 관리
- 매출처/매입처 구분
- 거래 조건 설정

### 13.6 사원 관리

**파일**: `/components/EmployeeManagement.tsx`

**화면 구성**:
- 사원 마스터 관리
- 부서 배치
- 권한 설정

### 13.7 부서 관리

**파일**: `/components/DepartmentManagement.tsx`

**화면 구성**:
- 부서 마스터 관리
- 부서 계층 구조
- 부서장 지정

### 13.8 로트 관리

**파일**: `/components/LotManagementPage.tsx`

**화면 구성**:
- PageHeader (제목: "로트 관리", 아이콘: `Archive`)
- StatCards
- SearchFilter
- 로트 목록

**주요 기능**:
- 로트 생성
- 로트 추적
- 로트 이력 관리
- 유효기간 관리

### 13.9 검사기준 관리

**파일**: `/components/InspectionStandardManagementPage.tsx`

**화면 구성**:
- PageHeader (제목: "검사기준 관리", 아이콘: `ClipboardCheck`)
- StatCards
- SearchFilter
- 검사기준 목록

**주요 기능**:
- 검사기준 등록
- 검사 항목 관리
- 기준값 설정
- 검사 방법 정의

**데이터 구조**:
```typescript
interface InspectionStandard {
  id: string;
  standardCode: string;
  itemCode: string;
  itemName: string;
  inspectionType: "수입" | "공정" | "제품";
  items: InspectionItem[];
  approver: string;
  status: "작성중" | "승인" | "사용중" | "폐기";
}

interface InspectionItem {
  itemNo: number;
  inspectionItem: string;
  specification: string;
  method: string;
  upperLimit: number;
  lowerLimit: number;
  unit: string;
}
```

### 13.10 코드 관리

**파일**: `/components/CodeManagementPage.tsx`

**화면 구성**:
- PageHeader (제목: "코드 관리", 아이콘: `Code`)
- 코드 그룹 목록
- 코드 상세 목록
- 코드 등록/수정

**주요 기능**:
- 공통코드 관리
- 코드 그룹 관리
- 코드 활성화/비활성화

**코드 그룹**:
- 품목 구분
- 거래처 구분
- 공정 구분
- 불량 유형
- 부서 구분
- 직급 구분

---

## 14. 보고서 및 분석

### 14.1 보고서

**파일**: `/components/Reports.tsx`

**화면 구성**:
- PageHeader (제목: "보고서 및 분석", 아이콘: `BarChart3`)
- 보고서 카테고리
- 보고서 목록
- 리포트 뷰어

**보고서 종류**:
- 매출 보고서
- 생산 보고서
- 재고 보고서
- 품질 보고서
- 원가 보고서

**주요 기능**:
- 보고서 조회
- 기간 설정
- 엑셀 다운로드
- PDF 출력

---

## 15. 시스템관리

### 15.1 시스템 관리

**파일**: `/components/SystemManagement.tsx`

**화면 구성**:
- PageHeader (제목: "시스템 관리", 아이콘: `Settings`)
- 탭: 사용자 관리, 권한 관리, 코드 관리, 메뉴 관리
- 관리 기능 목록

**주요 기능**:
- 사용자 등록/수정
- 권한 그룹 관리
- 메뉴 접근 권한
- 시스템 설정

### 15.2 메뉴 커스터마이징

**파일**: `/components/MenuCustomization.tsx`

**화면 구성**:
- 메뉴 트리 편집기
- 권한별 메뉴 설정
- 메뉴 순서 변경

**주요 기능**:
- 메뉴 추가/수정/삭제
- 메뉴 순서 변경
- 권한별 메뉴 표시 설정

---

## 권한별 메뉴 구성

### SystemAdmin (시스템 관리자)

**메뉴 구성**:
1. 시스템 대시보드
2. 사용자 관리
3. 메뉴 커스터마이징
4. 기준정보 관리 (전체)
5. 영업관리
6. 판매관리
7. 구매관리
8. 생산관리
9. 품질관리
10. 자재관리
11. 장비관리
12. 차량관리
13. 회계관리
14. 권한 관리
15. 시스템 설정
16. 데이터베이스
17. 시스템 모니터링
18. 보안 관리

### Sales (영업사원)

**메뉴 구성**:
1. 리드 관리
2. 판매관리
   - 견적 산출하기
   - 영업관리
   - 견적관리3
3. 대시보드

### Worker (생산작업자)

**메뉴 구성**:
1. 대시보드
2. 작업 실적
3. 품질관리
   - 수입검사
   - 중간검사
   - 제품검사
   - 품목별 검사

### CEO / 일반 사용자

**메뉴 구성**:
1. 대시보드
2. 영업관리
   - 리드관리
   - 매출처관리
   - 거래처관리
   - 견적관리 (개선)
   - 견적관리 (기존)
   - 수주관리
   - 영업실적
3. 판매관리
   - 단가관리
   - 영업관리
4. 구매관리
   - 거래처관리
   - 발주관리
   - 구매현황
5. 생산관리
   - 품목관리
   - BOM관리 (개선)
   - 품목관리 (기존)
   - BOM관리 (기존)
   - 스크린 생산
   - 슬랫 생산
   - 절곡 생산
   - 재고 생산
6. 품질관리
   - 수입검사
   - 중간검사
   - 제품검사
   - 품목별 검사
7. 자재관리
   - 재고현황
   - 입고관리
   - 출고관리
   - 부적합품관리
8. 장비관리
   - 설비관리
9. 차량관리
   - 차량관리
10. 회계관리
    - 매출관리
    - 매입관리
    - 원가관리
    - 재무제표
11. 인사관리
    - 인사대시보드
    - 직원관리
    - 부서관리
    - 조직도
    - 근태관리
    - 급여관리
12. 전자결재
    - 기안함
    - 결재함
    - 참조함
    - 문서작성
13. 기준정보
    - 모델관리
    - 자재관리
    - BOM관리
    - 공정관리
    - 거래처관리
    - 사원관리
    - 부서관리
    - 로트관리
    - 검사기준관리
    - 코드관리
14. 보고서 및 분석

---

## 페이지 업데이트 현황

### ✅ PageLayout + PageHeader 적용 완료 (6개)

1. `/components/VehicleManagement.tsx` - 차량관리
2. `/components/EquipmentManagement.tsx` - 설비관리
3. `/components/ItemManagement.tsx` - 품목관리
4. `/components/OrderManagement.tsx` - 주문관리
5. `/components/QuoteManagement3List.tsx` - 견적관리 목록
6. `/components/QuoteManagement3Write.tsx` - 견적관리 작성

### ⚠️ 업데이트 필요 페이지 (약 40개)

**전자결재**:
- `/components/ApprovalManagement.tsx` - 전자결재

**회계관리**:
- `/components/AccountingManagement.tsx` - 회계 관리
- `/components/ShippingManagement.tsx` - 출고관리

**인사관리**:
- `/components/HRManagement.tsx` - 인사관리

**시스템관리**:
- `/components/SystemManagement.tsx` - 시스템 관리

**자재관리**:
- `/components/MaterialManagement.tsx` - 자재 관리

**대시보드**:
- `/components/Dashboard.tsx` - CEO/생산관리자/작업자 대시보드

**기타 페이지들**: (상세 목록은 TITLE_STRUCTURE_STANDARDIZATION.md 참조)

---

## 공통 UI 패턴

### List 페이지 표준 패턴

```tsx
<PageLayout>
  <PageHeader 
    title="페이지 제목"
    description="페이지 설명"
    icon={Icon}
    actions={<Button>액션</Button>}
  />
  
  <SearchFilter 
    searchValue={searchTerm}
    onSearchChange={setSearchTerm}
  />
  
  <StatCards stats={stats} />
  
  {/* 데스크톱 테이블 */}
  <Card className="hidden md:block">
    <CardContent className="p-0">
      <Table>...</Table>
    </CardContent>
  </Card>
  
  {/* 모바일 카드 */}
  <div className="md:hidden">
    {items.map(item => (
      <MobileCard key={item.id} {...item} />
    ))}
  </div>
</PageLayout>
```

### Write/Form 페이지 표준 패턴

```tsx
<PageLayout>
  <PageHeader 
    title="작성/수정"
    description="정보를 입력하세요"
    icon={Icon}
    actions={
      <>
        <Button variant="outline">취소</Button>
        <Button>저장</Button>
      </>
    }
  />
  
  <Collapsible>
    <Card>
      <CollapsibleTrigger>
        <CardHeader>섹션 제목</CardHeader>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* 폼 필드 */}
          </div>
        </CardContent>
      </CollapsibleContent>
    </Card>
  </Collapsible>
</PageLayout>
```

### 모달/다이얼로그 표준 패턴

```tsx
<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent className="max-w-[95vw] sm:max-w-lg md:max-w-2xl">
    <DialogHeader>
      <DialogTitle>제목</DialogTitle>
      <DialogDescription>설명</DialogDescription>
    </DialogHeader>
    
    {/* 모달 내용 */}
    
    <DialogFooter>
      <Button variant="outline">취소</Button>
      <Button>확인</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

---

## 상태 관리

### 공통 상태 값

**주문/작업 상태**:
- 대기
- 진행중
- 완료
- 취소
- 보류

**결재 상태**:
- 작성중
- 상신
- 진행중
- 승인
- 반려
- 회수

**품질 검사 결과**:
- 합격
- 부적합
- 조건부합격
- 검사중
- 대기

**재고 상태**:
- 정상
- 안전재고 이하
- 과다재고
- 불용

**설비/차량 상태**:
- 가동중
- 정지
- 고장
- 점검중
- 폐기

---

## 차트 및 그래프

### 사용 차트 라이브러리

**Recharts**:
- `BarChart` - 막대 그래프
- `LineChart` - 선 그래프
- `PieChart` - 원형 그래프
- `AreaChart` - 영역 그래프
- `ComposedChart` - 복합 차트

### 차트 사용 예시

**매출 추이** (LineChart):
- X축: 날짜/월
- Y축: 매출액
- 데이터: 일별/월별 매출

**제품별 매출** (BarChart):
- X축: 제품명
- Y축: 매출액
- 데이터: 제품별 매출 합계

**영업사원별 실적** (PieChart):
- 데이터: 영업사원별 매출 비율

---

## 반응형 디자인 가이드

### 브레이크포인트

```css
/* 모바일 */
@media (max-width: 767px) {
  /* 카드 뷰 */
  /* 단일 컬럼 */
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 2-3 컬럼 그리드 */
}

/* 데스크톱 */
@media (min-width: 1024px) {
  /* 테이블 뷰 */
  /* 4 컬럼 그리드 */
}
```

### 반응형 클래스

**그리드**:
- `grid-cols-1 md:grid-cols-2 lg:grid-cols-4`

**표시/숨김**:
- `hidden md:block` - 모바일 숨김, 데스크톱 표시
- `md:hidden` - 데스크톱 숨김, 모바일 표시

**간격**:
- `p-4 md:p-6` - 패딩
- `space-y-4 md:space-y-6` - 수직 간격
- `gap-4` - 그리드 간격

---

## 데이터 포맷

### 날짜 형식

- 날짜: `YYYY-MM-DD` (예: 2025-10-24)
- 날짜+시간: `YYYY-MM-DD HH:mm` (예: 2025-10-24 14:30)
- 시간: `HH:mm` (예: 14:30)

### 숫자 형식

- 금액: `₩1,234,567` (천 단위 쉼표, 원화 기호)
- 수량: `1,234` (천 단위 쉼표)
- 퍼센트: `12.5%`

### 코드 형식

- 품목코드: `ITEM-YYYY-0001`
- 주문번호: `ORD-YYYY-0001`
- 발주번호: `PO-YYYY-0001`
- 작업지시번호: `WO-YYYY-0001`
- 로트번호: `LOT-YYYY-0001`
- 검사번호: `INSP-YYYY-0001`

---

## 첨부 파일

### 관련 문서

- [COMMON_COMPONENTS_GUIDE.md](/COMMON_COMPONENTS_GUIDE.md) - 공통 컴포넌트 가이드
- [TITLE_STRUCTURE_STANDARDIZATION.md](/TITLE_STRUCTURE_STANDARDIZATION.md) - 타이틀 구조 표준화 가이드
- [DEVELOPMENT_GUIDELINES.md](/DEVELOPMENT_GUIDELINES.md) - 개발 가이드라인

### 참고 파일

**완벽 구현 예시**:
- `/components/VehicleManagement.tsx`
- `/components/EquipmentManagement.tsx`
- `/components/ItemManagement.tsx`
- `/components/OrderManagement.tsx`

**공통 컴포넌트**:
- `/components/common/PageLayout.tsx`
- `/components/common/PageHeader.tsx`
- `/components/common/StatCards.tsx`
- `/components/common/SearchFilter.tsx`
- `/components/common/EmptyState.tsx`
- `/components/common/MobileCard.tsx`

---

## 업데이트 이력

| 날짜 | 버전 | 내용 | 작성자 |
|------|------|------|--------|
| 2025-10-24 | 1.0.0 | 초안 작성 | SAM MES 개발팀 |

---

**문서 끝**
