---
source: mes_react/src/SCREEN_DESIGN_SPECIFICATION.md
section: React 아키텍처 분석
created: 2025-11-12
bp_mes_phase: Phase A - Step A.1
related:
  - react_atomic_design_summary.md
  - react_dev_guidelines_summary.md
  - api_item_analysis_summary.md
tags: [react, ui-design, screen-spec, modules]
---

# React 화면 설계 명세서 요약 (v1.0)

**분석일:** 2025-11-12
**원본 문서:** 2,014줄 (mes_react/src/SCREEN_DESIGN_SPECIFICATION.md)
**핵심 발견:** 15개 모듈, 30+ 화면 상세 설계, 공통 UI 컴포넌트 6개

---

## Executive Summary

### 🎯 시스템 개요

**SAM MES (Manufacturing Execution System):**
- **대상**: 중소 및 중견기업
- **모듈 구성**: 15개 주요 모듈 (대시보드, 영업, 판매, 구매, 생산, 품질, 자재, 장비, 차량, 회계, 인사, 전자결재, 기준정보, 보고서, 시스템관리)
- **화면 수**: 30+ 페이지 컴포넌트
- **레이아웃 시스템**:
  - 데스크톱: 테이블 뷰
  - 모바일: 카드 뷰
  - 독립된 2DEPTH 메뉴 구조

**기술 스택:**
- React 18, TypeScript
- Tailwind CSS v4.0
- shadcn/ui (53개 컴포넌트)
- Lucide React (아이콘)
- Recharts (차트)

---

## 공통 UI 컴포넌트 (6개)

### 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`

### 4. SearchFilter
**용도:** 검색 및 필터링 기능
**Props:**
- `searchValue`: string
- `onSearchChange`: (value: string) => void
- `searchPlaceholder`: string
- `filterButton`: boolean
- `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>

---

## 디자인 시스템 규칙

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

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

### 반응형 클래스
```typescript
// 그리드
className="grid-cols-1 md:grid-cols-2 lg:grid-cols-4"

// 표시/숨김
className="hidden md:block"  // 모바일 숨김, 데스크톱 표시
className="md:hidden"        // 데스크톱 숨김, 모바일 표시

// 간격
className="p-4 md:p-6"              // 패딩
className="space-y-4 md:space-y-6"  // 수직 간격
className="gap-4"                    // 그리드 간격
```

---

## 모듈별 화면 설계 (15개)

### 1. 대시보드 (9개)

#### 1.1 CEO/관리자 대시보드
**파일:** `/components/Dashboard.tsx`
**특징:** 역할별 대시보드 분기 (CEO, ProductionManager, Worker, SystemAdmin)

#### 1.2 영업 대시보드
**파일:** `/components/SalesDashboard.tsx`
**통계 카드:** 월 매출, 진행중인 견적, 수주 건수, 활성 고객
**주요 섹션:** 주요 기능 모듈, 최근 견적, 최근 수주

#### 1.3 구매 대시보드
**파일:** `/components/PurchaseDashboard.tsx`
**통계 카드:** 전체 발주, 진행 중, 지연 건, 완료
**주요 기능:** 발주 등록, 구매처 관리, 입고 확인

#### 1.4 생산 대시보드
**파일:** `/components/ProductionDashboard.tsx`
**통계 카드:** 오늘 생산량, 진행중인 작업, 완료 작업, 지연 작업
**주요 섹션:** 생산계획, 작업지시, 작업 현황

#### 1.5 품질 대시보드
**파일:** `/components/QualityDashboard.tsx`
**통계 카드:** 오늘 검사 건수, 합격률, 진행중, 부적합
**주요 섹션:** 검사 유형별 모듈, 검사 기록

#### 1.6 자재 대시보드
**파일:** `/components/MaterialDashboard.tsx`
**통계 카드:** 전체 재고, 입고 대기, 출고 예정, 재고 부족

#### 1.7 회계 대시보드
**파일:** `/components/AccountingDashboard.tsx`
**통계 카드:** 매출 현황, 매입 현황, 원가 관리, 재무제표

#### 1.8 기준정보 대시보드
**파일:** `/components/MasterDataDashboard.tsx`
**주요 섹션:** 모델, 자재, BOM, 공정, 거래처, 사원/부서, 로트, 검사기준, 코드

#### 1.9 시스템 관리 대시보드
**파일:** `/components/SystemAdminDashboard.tsx`
**주요 기능:** 사용자 관리, 권한 관리, 메뉴 커스터마이징

---

### 2. 영업관리 (7개)

#### 2.1 리드 관리
**파일:** `/components/SalesLeadDashboard.tsx`
**주요 기능:** 리드 등록, 상태 관리 (신규, 접촉, 견적, 수주, 실패), 히스토리 추적

#### 2.2 매출처 관리
**파일:** `/components/CustomerAccountManagement.tsx`
**주요 기능:** 매출처 등록/수정/삭제, 거래 내역, 신용 한도, 결제 조건

#### 2.3 거래처 관리
**파일:** `/components/CustomerManagement.tsx`
**주요 기능:** 거래처 정보 관리, 담당자, 거래 이력, 등급 관리

#### 2.4 견적 관리 (개선)
**파일:** `/components/QuoteManagement3List.tsx`, `/components/QuoteManagement3Write.tsx`

**2.4.1 견적 목록:**
- StatCards: 전체 견적, 금일 작성, 진행중, 승인완료
- 테이블 컬럼: 견적번호, 작성일, 거래처, 담당자, 견적금액, 상태, 유효기한

**2.4.2 견적 작성:**
- 접이식 섹션 (Collapsible)
- 섹션: 기본 정보, 견적 품목, 합계 정보, 특이사항

#### 2.5 견적 관리 (기존 - 시뮬레이션)
**파일:** `/components/QuoteSimulation.tsx`
**주요 기능:** 견적 계산기, 실시간 견적 산출, 제품 선택 및 옵션 구성

#### 2.6 수주 관리 ⭐ PageLayout 적용 완료
**파일:** `/components/OrderManagement.tsx`
**탭:** 주문 관리, 생산 현황, 작업 현황
**통계 카드:** 총 주문, 총 주문금액, 진행 중, 견적 대기

#### 2.7 영업 실적
**파일:** `/components/SalesPerformance.tsx`
**차트:** 매출 추이 (LineChart), 제품별 매출 (BarChart), 영업사원별 실적 (PieChart)

---

### 3. 판매관리 (2개)

#### 3.1 단가 관리
**파일:** `/components/PricingManagement.tsx`
**주요 기능:** 제품별 단가 설정, 단가 이력, 고객별 특별 단가, 수량별 할인

#### 3.2 영업 관리
**파일:** `/components/SalesManagement.tsx`
**주요 기능:** 영업 활동 등록, 고객 방문 일정, 제안서 관리, Follow-up

---

### 4. 구매관리 (3개)

#### 4.1 거래처 관리 (공급업체)
**파일:** `/components/SupplierManagement.tsx`
**주요 기능:** 공급업체 등록/수정, 공급 품목, 거래 조건, 평가 관리

#### 4.2 발주 관리
**파일:** `/components/PurchaseOrderManagement.tsx`
**통계 카드:** 전체 발주, 진행중, 입고대기, 완료
**주요 기능:** 발주서 작성, 발주 승인, 입고 확인, 발주 취소

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

#### 4.3 구매 현황
**파일:** `/components/PurchaseStatus.tsx`
**차트:** 월별 구매 추이, 품목별 구매 비중, 공급업체별 거래액

---

### 5. 생산관리 (8개)

#### 5.1 품목 관리 ⭐ PageLayout 적용 완료
**파일:** `/components/ItemManagement.tsx`
**통계 카드:** 전체 품목, 원자재, 반제품, 완제품
**테이블 컬럼:** 품목코드, 품목명, 품목구분, 규격, 단위, 재고수량, 안전재고, 상태

**품목 등록 모달:**
1. 기본 정보 (코드, 명, 구분, 규격, 단위)
2. 재고 정보 (현재고, 안전재고, 최대재고)
3. 단가 정보 (표준단가, 매입단가, 매출단가)
4. 기타 정보 (제조사, 비고)

#### 5.2 BOM 관리 (개선)
**파일:** `/components/BOMManagementEnhanced.tsx`, `/components/BOMManagementPage.tsx`, `/components/BOMRegistration.tsx`
**주요 기능:** 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[];
}
```

#### 5.3 품목 관리 (기존)
**파일:** `/components/ProductsManagement.tsx`

#### 5.4 BOM 관리 (기존)
**파일:** `/components/ProductionBOMManagement.tsx`

#### 5.5 스크린 생산
**파일:** `/components/ScreenProductionPage.tsx`
**주요 기능:** 작업 지시서 조회, 생산 수량 입력, 불량 수량 입력, 실적 저장

#### 5.6 슬랫 생산
**파일:** `/components/SlatProductionPage.tsx`

#### 5.7 절곡 생산
**파일:** `/components/BendingProductionPage.tsx`

#### 5.8 재고 생산
**파일:** `/components/StockProductionPage.tsx`

---

### 6. 품질관리 (5개)

#### 6.1 수입 검사
**파일:** `/components/IncomingInspectionManagement.tsx`
**통계 카드:** 금일 검사, 합격, 부적합, 검사대기

**검사 프로세스:**
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`
**주요 기능:** 공정별 검사, 실시간 품질 모니터링, 관리도 작성

#### 6.3 제품 검사 (최종 검사)
**파일:** `/components/FinalInspectionManagement.tsx`
**주요 기능:** 완제품 검사, 출하 승인, 검사 성적서 발행, 불량 처리

#### 6.4 품목별 검사
**파일:** `/components/QualityItemInspection.tsx`
**주요 기능:** 품목별 검사 이력, 검사 데이터 분석, 불량률 추이

#### 6.5 품목별 검사 (고급)
**파일:** `/components/QualityItemInspectionEnhanced.tsx`
**주요 기능:** 고급 통계 분석, 관리도, 공정능력지수 (Cpk)

---

### 7. 자재관리 (4개)

#### 7.1 재고 현황
**파일:** `/components/StockStatus.tsx`
**통계 카드:** 전체 재고, 안전재고 이하, 과다재고, 재고금액
**테이블 컬럼:** 품목코드, 품목명, 현재고, 안전재고, 가용재고, 단위, 창고, 로케이션

#### 7.2 입고 관리
**파일:** `/components/ReceivingManagement.tsx`
**통계 카드:** 금일 입고, 입고대기, 검수중, 완료

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

#### 7.3 출고 관리
**파일:** `/components/ShippingManagement.tsx`
**탭:** 출고 현황, 출고 지시, 출고 이력

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

#### 7.4 부적합품 관리
**파일:** `/components/NonconformingManagement.tsx`
**통계 카드:** 전체, 처리중, 재작업, 폐기

**데이터 구조:**
```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. 장비관리 (1개)

#### 8.1 설비 관리 ⭐ PageLayout 적용 완료
**파일:** `/components/EquipmentManagement.tsx`
**통계 카드:** 전체 설비, 가동중, 고장, 점검중
**테이블 컬럼:** 설비코드, 설비명, 설비유형, 설치위치, 상태, 최근점검일, 차기점검일

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

---

### 9. 차량관리 (1개)

#### 9.1 차량 관리 ⭐ PageLayout 적용 완료
**파일:** `/components/VehicleManagement.tsx`
**통계 카드:** 전체 차량, 운행중, 정비중, 가용
**테이블 컬럼:** 차량번호, 차량명, 차종, 연식, 상태, 담당자, 최근정비일, 다음정비일

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

---

### 10. 회계관리 (4개)

#### 10.1 매출 관리
**파일:** `/components/SalesAccountingManagement.tsx`
**통계 카드:** 월 매출, 미수금, 회수예정, 연체
**테이블 컬럼:** 전표번호, 일자, 거래처, 품목, 공급가액, 부가세, 합계, 결제조건, 수금예정일, 상태

#### 10.2 매입 관리
**파일:** `/components/PurchaseAccountingManagement.tsx`
**통계 카드:** 월 매입, 미지급금, 지급예정, 연체

#### 10.3 원가 관리
**파일:** `/components/CostManagement.tsx`
**주요 기능:** 표준원가 설정, 실제원가 계산, 원가차이 분석, 원가절감 활동

#### 10.4 재무제표
**파일:** `/components/FinancialStatements.tsx`
**재무제표 종류:**
- 재무상태표 (대차대조표)
- 손익계산서
- 현금흐름표
- 제조원가명세서

---

### 11. 인사관리 (6개)

#### 11.1 인사 대시보드
**파일:** `/components/HRManagement.tsx`
**탭:** 조직관리, 직원관리, 근태관리, 급여관리
**통계 카드:** 전체 인원, 금월 입사, 금월 퇴사, 재직률

#### 11.2 직원 관리
**파일:** `/components/EmployeeManagement.tsx`
**통계 카드:** 전체, 재직, 휴직, 퇴사
**테이블 컬럼:** 사번, 이름, 부서, 직급, 직책, 입사일, 상태

**직원 등록 모달:**
1. 기본 정보 (사번, 이름, 주민등록번호, 연락처, 이메일)
2. 인사 정보 (부서, 직급, 직책, 입사일, 고용형태)
3. 급여 정보 (기본급, 수당, 계좌정보)

#### 11.3 부서 관리
**파일:** `/components/DepartmentManagement.tsx`
**주요 기능:** 부서 등록/수정/삭제, 부서 구조 관리, 부서장 지정, 부서원 배치

#### 11.4 조직도
**파일:** `/components/OrganizationChart.tsx`
**주요 기능:** 조직도 조회, 부서별 필터링, 인원 검색

#### 11.5 근태 관리
**파일:** `/components/AttendanceManagement.tsx`
**주요 기능:** 출퇴근 기록, 휴가 신청/승인, 연차 관리, 근태 통계

#### 11.6 급여 관리
**파일:** `/components/PayrollManagement.tsx`
**주요 기능:** 급여 계산, 급여 명세서 발행, 공제 항목 관리, 급여 대장

---

### 12. 전자결재 (5개)

#### 12.1 전자결재 메인
**파일:** `/components/ApprovalManagement.tsx`
**탭:** 대기 문서, 진행 문서, 완료 문서, 반려 문서
**통계 카드:** 대기, 진행, 완료, 반려

#### 12.2 기안함
**파일:** `/components/DraftBox.tsx`
**주요 기능:** 기안 문서 조회, 진행 상태 확인, 문서 회수

#### 12.3 결재함
**파일:** `/components/ApprovalBox.tsx`
**주요 기능:** 결재 승인, 결재 반려, 의견 작성

#### 12.4 참조함
**파일:** `/components/ReferenceBox.tsx`
**주요 기능:** 참조 문서 목록, 읽음/안읽음 표시

#### 12.5 문서 작성
**파일:** `/components/DocumentWrite.tsx`

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

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

---

### 13. 기준정보 관리 (10개)

#### 13.1 모델 관리
**파일:** `/components/ModelManagement.tsx`
**주요 기능:** 모델 등록/수정, 모델 정보 관리, 모델별 BOM 연결

#### 13.2 자재 관리 (기준정보)
**파일:** `/components/ItemManagement.tsx`

#### 13.3 BOM 관리
**파일:** `/components/BOMManagementPage.tsx`

#### 13.4 공정 관리
**파일:** `/components/ProcessManagement.tsx`
**주요 기능:** 공정 등록/수정, 공정 순서 관리, 작업장 연결, 표준 작업시간 설정

**데이터 구조:**
```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`
**주요 기능:** 로트 생성, 로트 추적, 로트 이력 관리, 유효기간 관리

#### 13.9 검사기준 관리
**파일:** `/components/InspectionStandardManagementPage.tsx`
**주요 기능:** 검사기준 등록, 검사 항목 관리, 기준값 설정, 검사 방법 정의

**데이터 구조:**
```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`

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

---

### 14. 보고서 및 분석 (1개)

#### 14.1 보고서
**파일:** `/components/Reports.tsx`

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

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

---

### 15. 시스템관리 (2개)

#### 15.1 시스템 관리
**파일:** `/components/SystemManagement.tsx`
**탭:** 사용자 관리, 권한 관리, 코드 관리, 메뉴 관리

#### 15.2 메뉴 커스터마이징
**파일:** `/components/MenuCustomization.tsx`
**주요 기능:** 메뉴 추가/수정/삭제, 메뉴 순서 변경, 권한별 메뉴 표시 설정

---

## 공통 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):**
- 데이터: 영업사원별 매출 비율

---

## 데이터 포맷

### 날짜 형식
- 날짜: `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`

---

## 페이지 업데이트 현황

### ✅ 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개)

**주요 대상:**
- 전자결재: ApprovalManagement.tsx
- 회계관리: AccountingManagement.tsx, ShippingManagement.tsx
- 인사관리: HRManagement.tsx
- 시스템관리: SystemManagement.tsx
- 자재관리: MaterialManagement.tsx
- 대시보드: Dashboard.tsx
- 기타 페이지들 (상세 목록은 TITLE_STRUCTURE_STANDARDIZATION.md 참조)

---

## 권한별 메뉴 구성

### SystemAdmin (시스템 관리자)
- 모든 메뉴 접근 가능
- 시스템 설정, 사용자 관리, 권한 관리, 메뉴 커스터마이징

### Sales (영업사원)
- 리드 관리, 판매관리, 견적 산출, 영업관리, 견적관리

### Worker (생산작업자)
- 대시보드, 작업 실적, 품질관리 (수입/중간/제품/품목별 검사)

### CEO / 일반 사용자
- 전체 메뉴 (대시보드, 영업, 판매, 구매, 생산, 품질, 자재, 장비, 차량, 회계, 인사, 전자결재, 기준정보, 보고서)

---

## 프론트-백엔드 연결 포인트

### API 엔드포인트와 화면 매핑

| 화면 | API 엔드포인트 | 비고 |
|------|----------------|------|
| 품목관리 | `/api/v1/products`, `/api/v1/materials` | 통합 API 필요 (제안 1) |
| 견적관리 | `/api/v1/quotes` (추정) | API 구현 확인 필요 |
| 수주관리 | `/api/v1/orders` (추정) | OrderManagement.tsx 완성 |
| 발주관리 | `/api/v1/purchase-orders` (추정) | PurchaseOrderManagement.tsx |
| 검사관리 | `/api/v1/inspections` (추정) | 수입/공정/제품 검사 |
| 재고관리 | `/api/v1/stock`, `/api/v1/receiving`, `/api/v1/shipping` (추정) | |
| 가격정보 | `/api/v1/pricing` | ✅ 완전 구현 (5개 엔드포인트) |

**⚠️ 주의:**
- 품목 가격 통합 조회 API 필요 (제안 2: `GET /api/v1/items/{id}?include_price=true`)
- 프론트엔드 ItemMaster 타입과 백엔드 price_histories 구조 매핑 불일치 해결 필요

---

## 핵심 발견 사항

### 1. 반응형 설계 완료
- 모든 화면이 데스크톱/모바일 대응 설계
- 통일된 패턴 (테이블/카드 뷰)

### 2. 공통 컴포넌트 체계 확립
- PageLayout, PageHeader, StatCards 등 6개 공통 컴포넌트
- 일관된 UI/UX

### 3. 모듈화된 설계
- 15개 독립 모듈
- 각 모듈별 대시보드 + 상세 화면

### 4. 권한 시스템
- 역할별 메뉴 분기 (SystemAdmin, Sales, Worker, CEO)
- 화면 레벨 권한 제어

### 5. 백엔드 연동 고려사항
- API 엔드포인트 매핑 필요
- 품목-가격 통합 조회 API 필요
- 프론트-백 데이터 구조 불일치 해결 필요

---

## 다음 단계 권장사항

### 즉시 착수 (Week 1-2)
1. PageLayout 미적용 화면 40개 업데이트
2. 품목-가격 통합 조회 API 개발
3. 프론트-백 데이터 매핑 정의

### 단계적 진행 (Week 3-4)
1. 견적 관리 API 개발 및 연동
2. 수주 관리 API 개발 및 연동
3. 검사 관리 API 개발 및 연동

### 검증 및 최적화 (Week 5-8)
1. 전체 화면 통합 테스트
2. 성능 최적화
3. 접근성 검증
4. 사용자 테스트

---

**문서 버전:** v1.0 요약본
**작성일:** 2025-11-12 (BP-MES Phase A.1)
**다음 단계:** 비즈니스 문서 2개 분석 (ERP_QUOTATION_GUIDE.md, USER_STORY_GUIDE.md)
