# 🛠️ SAM MES 솔루션 기술 스택

## 📋 프로젝트 개요
**SAM MES (제조실행시스템)** - 중소 및 중견기업을 위한 완전한 B2B MES 솔루션

---

## 🎯 핵심 기술 스택

### **1. Frontend Framework & Language**
- **React 18+** - UI 라이브러리
- **TypeScript** - 타입 안정성을 위한 정적 타입 언어
- **JavaScript (ES6+)** - 스크립트 파일용

### **2. Styling & Design System**
- **Tailwind CSS v4.0** - 유틸리티 우선 CSS 프레임워크
  - 커스텀 디자인 토큰 시스템
  - 반응형 디자인 지원 (모바일/태블릿/데스크톱)
  - 다크모드 및 시니어 모드 지원
- **CSS Variables** - 동적 테마 관리
- **Pretendard 폰트** - 한국어 최적화 웹폰트

### **3. UI Component Library**
- **shadcn/ui** - 재사용 가능한 컴포넌트 라이브러리 (53개 컴포넌트)
  - Accordion, Alert Dialog, Alert, Aspect Ratio
  - Avatar, Badge, Breadcrumb, Button
  - Calendar, Card, Carousel, Chart
  - Checkbox, Collapsible, Command, Context Menu
  - Dialog, Drawer, Dropdown Menu, Form
  - Hover Card, Input, Input OTP, Label
  - Menubar, Navigation Menu, Pagination, Popover
  - Progress, Radio Group, Resizable, Scroll Area
  - Select, Separator, Sheet, Sidebar
  - Skeleton, Slider, Sonner, Switch
  - Table, Tabs, Textarea, Toggle
  - Toggle Group, Tooltip

### **4. Icon Library**
- **Lucide React** - 모던하고 일관된 아이콘 세트
  - 300+ 아이콘 사용
  - 완전한 TypeScript 지원

### **5. Data Visualization**
- **Recharts v2.15.2** - React 기반 차트 라이브러리
  - Bar Chart (막대 차트)
  - Line Chart (선형 차트)
  - Area Chart (영역 차트)
  - Pie Chart (원형 차트)
  - Responsive Container (반응형 컨테이너)
  - Custom Tooltips & Legends

### **6. Date & Time Management**
- **date-fns** - 모던 JavaScript 날짜 유틸리티
  - 날짜 포맷팅
  - 한국어 로케일 지원 (ko)
  - 경량화된 번들 사이즈

### **7. State Management**
- **React Hooks** - 로컬 상태 관리
  - useState
  - useEffect
  - 커스텀 훅

### **8. Notification System**
- **Sonner v2.0.3** - 토스트 알림 라이브러리
  - 우아한 알림 메시지
  - 커스터마이징 가능

### **9. Theme Management**
- **next-themes v0.4.6** - 다크모드 지원
  - 라이트/다크 테마 전환
  - 시스템 설정 자동 감지

---

## 📦 주요 모듈 구성

### **1. 대시보드 (Dashboard)**
- CEO 경영 대시보드
- 실시간 KPI 모니터링
- 데이터 시각화 (차트 & 그래프)

### **2. 판매관리 (Sales Management)**
- 견적 산출 시스템
- 수주 관리
- 계약서 & 거래명세서 발행
- 거래처 관리

### **3. 생산관리 (Production Management)**
- 스크린 생산
- 슬랫 생산
- 절곡 생산
- 재고 생산
- 작업지시현황
- 공정진행현황

### **4. 품질관리 (Quality Management)**
- 월간 검사일정
- 검사결과 관리
- 성적서 발행
- 합격/불합격 관리

### **5. 자재관리 (Material Management)**
- 입고관리
- 입고등록 (동적 속성 추가 가능)
- 입고리스트 (13개 컬럼)
- 발주 요청서 작성

### **6. 출고관리 (Shipping Management)**
- 출고등록
- 출고현황 추적

### **7. 인사관리 (HR Management)**
- 직원 정보 관리
- 급여 관리
- 성과 관리

### **8. 전자결재 (Approval Management)**
- 결재 라인 관리
- 문서 승인 프로세스

### **9. 회계관리 (Accounting Management)**
- 재무제표
- 손익 분석

### **10. 기준정보 (Master Data)**
- 제품 관리
- BOM 관리
- 공정 관리
- 거래처 관리

### **11. 시스템관리 (System Management)**
- 사용자 권한 관리
- 메뉴 커스터마이징
- 시스템 설정

---

## 🎨 디자인 시스템

### **컬러 팔레트**
```css
/* Primary Colors */
--primary: #3B82F6 (Blue)
--secondary: #F1F5F9 (Light Gray)

/* Chart Colors */
--chart-1: #3B82F6 (Blue)
--chart-2: #10B981 (Green)
--chart-3: #F59E0B (Orange)
--chart-4: #EF4444 (Red)
--chart-5: #8B5CF6 (Purple)

/* Status Colors */
--destructive: #EF4444 (Red)
--success: #10B981 (Green)
--warning: #F59E0B (Orange)
```

### **타이포그래피**
- **Primary Font**: Pretendard
- **Font Sizes**: 반응형 시스템 (16px 기본)
- **Font Weights**: 400 (Normal), 500 (Medium), 600 (SemiBold), 700 (Bold)

### **반응형 브레이크포인트**
- **Mobile**: < 768px (카드 레이아웃)
- **Tablet**: 768px - 1024px
- **Desktop**: > 1024px (테이블 레이아웃)

---

## 🔧 주요 기능 구현

### **1. 완전한 반응형 디자인**
- 모바일: 카드 형식 리스트
- 데스크톱: 테이블 형식 리스트
- 가로 스크롤 방지

### **2. 모달 시스템**
- 11개 이상의 모달 컴포넌트
- 내용 기반 동적 넓이 조절
- 스크롤 처리 (max-h-[90vh])

### **3. 데이터 테이블**
- 정렬 가능한 컬럼
- 필터링 & 검색
- 페이지네이션
- 엑셀 내보내기

### **4. 차트 & 데이터 시각화**
- 실시간 데이터 업데이트
- 인터랙티브 툴팁
- 반응형 차트

### **5. 권한 관리 시스템**
- 역할 기반 접근 제어 (RBAC)
  - CEO
  - SystemAdmin
  - Sales
  - ProductionWorker
  - Viewer

### **6. 메뉴 커스터마이징**
- 드래그 앤 드롭
- 메뉴 표시/숨김
- 색상 및 아이콘 변경

---

## 📱 사용자 인터페이스 패턴

### **1. Navigation**
- 사이드바 (데스크톱)
- 햄버거 메뉴 (모바일)
- 브레드크럼

### **2. Forms**
- 동적 폼 생성
- 유효성 검사
- 자동 저장

### **3. 모달 & 다이얼로그**
- 등록/수정 모달
- 상세보기 모달
- 확인 다이얼로그
- 인쇄 미리보기

### **4. 테이블 & 리스트**
- 정렬 가능한 헤더
- 인라인 편집
- 일괄 작업
- 엑셀 내보내기

---

## 🚀 성능 최적화

### **1. Code Splitting**
- 컴포넌트 지연 로딩
- 동적 import

### **2. 이미지 최적화**
- ImageWithFallback 컴포넌트
- 지연 로딩

### **3. 상태 관리 최적화**
- 필요한 경우에만 리렌더링
- 메모이제이션

---

## 📂 프로젝트 구조

```
SAM-MES/
├── App.tsx                           # 메인 애플리케이션
├── components/                       # 컴포넌트 디렉토리
│   ├── Dashboard.tsx                 # 대시보드
│   ├── SalesManagement.tsx           # 판매관리
│   ├── ProductionManagement.tsx      # 생산관리
│   ├── QualityManagement.tsx         # 품질관리
│   ├── MaterialManagement.tsx        # 자재관리
│   ├── ShippingManagement.tsx        # 출고관리
│   ├── HRManagement.tsx              # 인사관리
│   ├── ApprovalManagement.tsx        # 전자결재
│   ├── AccountingManagement.tsx      # 회계관리
│   ├── MasterData.tsx                # 기준정보
│   ├── SystemManagement.tsx          # 시스템관리
│   ├── MenuCustomization.tsx         # 메뉴 커스터마이징
│   ├── ui/                           # UI 컴포넌트 (53개)
│   └── figma/                        # Figma 관련 컴포넌트
├── styles/
│   └── globals.css                   # 글로벌 스타일 & 테마
└── guidelines/
    └── Guidelines.md                 # 개발 가이드라인
```

---

## 🔐 보안 & 접근 제어

### **역할 기반 접근 제어 (RBAC)**
- **CEO**: 모든 기능 접근
- **SystemAdmin**: 시스템 관리 및 대부분의 기능
- **Sales**: 판매 관련 기능
- **ProductionWorker**: 생산 관련 기능
- **Viewer**: 읽기 전용

---

## 📊 데이터 관리

### **로컬 상태 관리**
- React Hooks (useState, useEffect)
- 컴포넌트 레벨 상태

### **데이터 포맷**
- JSON 기반 데이터 구조
- TypeScript 인터페이스로 타입 정의

---

## 🌐 브라우저 지원

- Chrome (최신 버전)
- Firefox (최신 버전)
- Safari (최신 버전)
- Edge (최신 버전)

---

## 📝 코딩 규칙

### **TypeScript 규칙**
- 엄격한 타입 체크
- 인터페이스 우선 사용
- any 타입 최소화

### **React 규칙**
- 함수형 컴포넌트
- Hooks 사용
- Props 타입 정의

### **CSS 규칙**
- Tailwind 유틸리티 우선
- 커스텀 클래스 최소화
- 반응형 우선

---

## 🎯 주요 특징

✅ **완전한 TypeScript 지원**
✅ **100% 반응형 디자인**
✅ **모듈식 아키텍처**
✅ **재사용 가능한 컴포넌트**
✅ **접근성 (Accessibility) 준수**
✅ **다크모드 지원**
✅ **한국어 완벽 지원**
✅ **인쇄 최적화**
✅ **엑셀 내보내기**
✅ **실시간 데이터 업데이트**

---

## 📈 프로젝트 통계

- **총 컴포넌트 수**: 90개 이상
- **총 코드 라인**: 50,000+ 라인
- **UI 컴포넌트**: 53개 (shadcn/ui)
- **페이지/모듈**: 30개 이상
- **지원 역할**: 5개
- **차트 타입**: 5개 (Bar, Line, Area, Pie, Mixed)

---

## 🛠️ 개발 도구

### **추천 IDE**
- Visual Studio Code
- WebStorm

### **추천 확장 프로그램**
- ESLint
- Prettier
- Tailwind CSS IntelliSense
- TypeScript and JavaScript Language Features

---

## 📚 참고 문서

- [React 공식 문서](https://react.dev/)
- [TypeScript 공식 문서](https://www.typescriptlang.org/)
- [Tailwind CSS 문서](https://tailwindcss.com/)
- [shadcn/ui 문서](https://ui.shadcn.com/)
- [Recharts 문서](https://recharts.org/)
- [Lucide Icons](https://lucide.dev/)
- [date-fns 문서](https://date-fns.org/)

---

## 🎓 기술 난이도

| 기술 | 난이도 | 사용 빈도 |
|------|--------|-----------|
| React | ⭐⭐⭐⭐ | 100% |
| TypeScript | ⭐⭐⭐⭐ | 100% |
| Tailwind CSS | ⭐⭐⭐ | 100% |
| Recharts | ⭐⭐⭐ | 60% |
| shadcn/ui | ⭐⭐⭐ | 100% |
| date-fns | ⭐⭐ | 40% |
| Lucide Icons | ⭐ | 100% |

---

## 🚀 배포 & 빌드

### **빌드 명령어**
```bash
# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

# 빌드 미리보기
npm run preview
```

### **환경 변수**
```env
# 필요한 경우 환경 변수 설정
VITE_API_URL=your_api_url
```

---

## 🎉 결론

SAM MES 솔루션은 최신 웹 기술 스택을 활용하여 구축된 엔터프라이즈급 제조실행시스템입니다. 
**React + TypeScript + Tailwind CSS**의 조합으로 견고하고 확장 가능하며 유지보수가 용이한 시스템을 제공합니다.

**핵심 기술**: React 18 | TypeScript | Tailwind CSS v4 | shadcn/ui | Recharts | Lucide Icons | date-fns

---

**문서 작성일**: 2025년 10월 17일
**버전**: 1.0.0
**작성자**: SAM MES 개발팀
