# MES SAM 다크모드 완전 가이드

## 현재 상태

### ✅ 이미 완료된 부분

1. **globals.css** - 포괄적 다크모드 규칙
   - 모든 gray 색상 자동 변환
   - 모든 color 배지 자동 변환
   - Chart/Table 자동 대응
   - 스크롤바 자동 대응

2. **공통 컴포넌트** (organisms)
   - ScreenVersionHistory - 완벽 대응
   - EmptyState - 완벽 대응
   - PageHeader - 시스템 색상 사용
   - StatCards - 시스템 색상 사용
   - SearchFilter - 시스템 색상 사용
   - DetailViewActions - 시스템 색상 사용
   - ListActions - 시스템 색상 사용
   - FormActions - 시스템 색상 사용
   - TableActionButtons - 시스템 색상 사용

### ⚠️ 수정 필요한 부분

Management 파일들의 인라인 색상 클래스:
- `bg-white` → `bg-white dark:bg-card`
- `bg-gray-50` → `bg-gray-50 dark:bg-muted`
- `text-gray-700` → `text-gray-700 dark:text-gray-300`
- 등등

## 다크모드 작동 원리

### 1단계: globals.css 자동 변환
```css
/* globals.css에서 자동으로 변환됨 */
.dark .bg-gray-50 {
  background-color: rgba(71, 85, 105, 0.2) !important;
}

.dark .text-gray-700 {
  color: #E2E8F0 !important;
}
```

**장점:** 기존 코드 수정 없이 대부분 자동 대응
**단점:** !important로 인한 우선순위 이슈 가능성

### 2단계: 인라인 dark: variant (권장)
```tsx
// 더 정확한 제어 가능
className="bg-gray-50 dark:bg-muted text-gray-700 dark:text-gray-300"
```

**장점:** 정확한 제어, 가독성 높음
**단점:** 모든 색상에 명시 필요

## 가독성 보장 체크리스트

### 대비 비율 (WCAG AAA 기준)
- **일반 텍스트:** 7:1 이상 (최소 4.5:1)
- **큰 텍스트:** 4.5:1 이상 (최소 3:1)
- **아이콘:** 3:1 이상

### 테스트 환경
```tsx
// 라이트 모드
<body className="">
  
// 다크 모드  
<body className="dark">
```

### 테스트 항목

#### 1. 배경 대비
- [ ] Card 배경이 페이지 배경과 구분되는가?
- [ ] Hover 상태가 명확한가?
- [ ] Selected 상태가 명확한가?

#### 2. 텍스트 가독성
- [ ] 모든 텍스트가 읽히는가?
- [ ] muted-foreground가 너무 흐리지 않은가?
- [ ] Link 색상이 명확한가?

#### 3. 경계선 가시성
- [ ] Card 테두리가 보이는가?
- [ ] Table 셀 구분이 명확한가?
- [ ] Input 테두리가 보이는가?

#### 4. 상태 표시
- [ ] Badge 색상이 명확한가?
- [ ] Status 구분이 가능한가?
- [ ] Error/Warning이 눈에 띄는가?

## 일관성 유지 규칙

### Rule 1: 시스템 색상 우선 사용
```tsx
// ✅ 좋은 예
className="bg-card text-card-foreground border-border"
className="bg-muted text-muted-foreground"

// ❌ 나쁜 예  
className="bg-white text-black border-gray-200"
```

### Rule 2: 모듈별 일관된 색상 스키마
```tsx
// 품목관리는 항상 purple
const itemColorScheme = {
  border: "border-purple-200 dark:border-purple-800",
  background: "bg-purple-50 dark:bg-purple-900/30",
  text: "text-purple-700 dark:text-purple-300"
};

// 견적관리는 항상 blue  
const quoteColorScheme = {
  border: "border-blue-200 dark:border-blue-800",
  background: "bg-blue-50 dark:bg-blue-900/30",
  text: "text-blue-700 dark:text-blue-300"
};
```

### Rule 3: Badge 색상 일관성
```tsx
// 상태 Badge
<Badge className="bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300">
  활성
</Badge>

<Badge className="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
  비활성
</Badge>

<Badge className="bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300">
  오류
</Badge>
```

### Rule 4: Table Row 일관성
```tsx
// 일반 행
<TableRow className="bg-background dark:bg-card hover:bg-muted/50">

// 헤더 행
<TableRow className="bg-muted dark:bg-muted">

// 강조 행
<TableRow className="bg-blue-50 dark:bg-blue-900/20">

// 조건부 행
<TableRow className={isActive ? 'bg-card' : 'bg-muted'}>
```

## 13개 모듈 색상 스키마

```tsx
export const MODULE_COLOR_SCHEMES = {
  item: {
    // 품목관리 - Purple
    primary: "purple",
    border: "border-purple-200 dark:border-purple-800",
    bg: "bg-purple-50 dark:bg-purple-900/30",
    bgStrong: "bg-purple-100 dark:bg-purple-900/40",
    text: "text-purple-700 dark:text-purple-300",
    textStrong: "text-purple-900 dark:text-purple-100",
  },
  
  quote: {
    // 견적관리 - Blue
    primary: "blue",
    border: "border-blue-200 dark:border-blue-800",
    bg: "bg-blue-50 dark:bg-blue-900/30",
    bgStrong: "bg-blue-100 dark:bg-blue-900/40",
    text: "text-blue-700 dark:text-blue-300",
    textStrong: "text-blue-900 dark:text-blue-100",
  },
  
  order: {
    // 수주관리 - Green
    primary: "green",
    border: "border-green-200 dark:border-green-800",
    bg: "bg-green-50 dark:bg-green-900/30",
    bgStrong: "bg-green-100 dark:bg-green-900/40",
    text: "text-green-700 dark:text-green-300",
    textStrong: "text-green-900 dark:text-green-100",
  },
  
  production: {
    // 생산관리 - Orange
    primary: "orange",
    border: "border-orange-200 dark:border-orange-800",
    bg: "bg-orange-50 dark:bg-orange-900/30",
    bgStrong: "bg-orange-100 dark:bg-orange-900/40",
    text: "text-orange-700 dark:text-orange-300",
    textStrong: "text-orange-900 dark:text-orange-100",
  },
  
  inventory: {
    // 재고관리 - Teal
    primary: "teal",
    border: "border-teal-200 dark:border-teal-800",
    bg: "bg-teal-50 dark:bg-teal-900/30",
    bgStrong: "bg-teal-100 dark:bg-teal-900/40",
    text: "text-teal-700 dark:text-teal-300",
    textStrong: "text-teal-900 dark:text-teal-100",
  },
  
  quality: {
    // 품질관리 - Red
    primary: "red",
    border: "border-red-200 dark:border-red-800",
    bg: "bg-red-50 dark:bg-red-900/30",
    bgStrong: "bg-red-100 dark:bg-red-900/40",
    text: "text-red-700 dark:text-red-300",
    textStrong: "text-red-900 dark:text-red-100",
  },
  
  client: {
    // 거래처관리 - Indigo
    primary: "indigo",
    border: "border-indigo-200 dark:border-indigo-800",
    bg: "bg-indigo-50 dark:bg-indigo-900/30",
    bgStrong: "bg-indigo-100 dark:bg-indigo-900/40",
    text: "text-indigo-700 dark:text-indigo-300",
    textStrong: "text-indigo-900 dark:text-indigo-100",
  },
  
  employee: {
    // 인사관리 - Pink
    primary: "pink",
    border: "border-pink-200 dark:border-pink-800",
    bg: "bg-pink-50 dark:bg-pink-900/30",
    bgStrong: "bg-pink-100 dark:bg-pink-900/40",
    text: "text-pink-700 dark:text-pink-300",
    textStrong: "text-pink-900 dark:text-pink-100",
  },
  
  equipment: {
    // 설비관리 - Amber
    primary: "amber",
    border: "border-amber-200 dark:border-amber-800",
    bg: "bg-amber-50 dark:bg-amber-900/30",
    bgStrong: "bg-amber-100 dark:bg-amber-900/40",
    text: "text-amber-700 dark:text-amber-300",
    textStrong: "text-amber-900 dark:text-amber-100",
  },
  
  bom: {
    // BOM관리 - Cyan
    primary: "cyan",
    border: "border-cyan-200 dark:border-cyan-800",
    bg: "bg-cyan-50 dark:bg-cyan-900/30",
    bgStrong: "bg-cyan-100 dark:bg-cyan-900/40",
    text: "text-cyan-700 dark:text-cyan-300",
    textStrong: "text-cyan-900 dark:text-cyan-100",
  },
  
  cost: {
    // 원가관리 - Lime
    primary: "lime",
    border: "border-lime-200 dark:border-lime-800",
    bg: "bg-lime-50 dark:bg-lime-900/30",
    bgStrong: "bg-lime-100 dark:bg-lime-900/40",
    text: "text-lime-700 dark:text-lime-300",
    textStrong: "text-lime-900 dark:text-lime-100",
  },
  
  accounting: {
    // 회계관리 - Emerald
    primary: "emerald",
    border: "border-emerald-200 dark:border-emerald-800",
    bg: "bg-emerald-50 dark:bg-emerald-900/30",
    bgStrong: "bg-emerald-100 dark:bg-emerald-900/40",
    text: "text-emerald-700 dark:text-emerald-300",
    textStrong: "text-emerald-900 dark:text-emerald-100",
  },
  
  approval: {
    // 결재관리 - Violet
    primary: "violet",
    border: "border-violet-200 dark:border-violet-800",
    bg: "bg-violet-50 dark:bg-violet-900/30",
    bgStrong: "bg-violet-100 dark:bg-violet-900/40",
    text: "text-violet-700 dark:text-violet-300",
    textStrong: "text-violet-900 dark:text-violet-100",
  },
};
```

## 빠른 수정 가이드

### ItemManagement.tsx 우선 수정 목록

1. **모바일 카드 (5곳)**
```tsx
// 찾기
className="border rounded-lg p-4 space-y-3 bg-white hover:bg-muted/50

// 바꾸기
className="border rounded-lg p-4 space-y-3 bg-white dark:bg-card hover:bg-muted/50
```

2. **미사용 Badge (3곳)**
```tsx
// 찾기
className="bg-gray-50 text-gray-700 text-xs">미사용

// 바꾸기
className="bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs">미사용
```

3. **히스토리 카드 내부 (2곳)**
```tsx
// 찾기
className="bg-white border border-purple-200 rounded-lg p-4"

// 바꾸기
className="bg-background dark:bg-card border border-purple-200 dark:border-purple-800 rounded-lg p-4"
```

4. **재료 요약 (3곳)**
```tsx
// Header
className="bg-purple-100 px-3 py-2
// →
className="bg-purple-100 dark:bg-purple-900/40 px-3 py-2

// Text
className="font-medium text-purple-900"
// →
className="font-medium text-purple-900 dark:text-purple-100"

// Container
className="bg-white rounded border border-purple-200
// →
className="bg-background dark:bg-card rounded border border-purple-200 dark:border-purple-800
```

## 테스트 체크리스트

### 각 Management 파일별 테스트

- [ ] **ItemManagement** (품목관리)
  - [ ] 목록 뷰 - 테이블 가독성
  - [ ] 목록 뷰 - 모바일 카드
  - [ ] 상세 뷰 - 전개도 섹션
  - [ ] 상세 뷰 - BOM 테이블
  - [ ] 등록/수정 뷰 - 폼 입력
  - [ ] Badge 색상 구분

- [ ] **ClientManagement** (거래처관리)
  - [ ] 목록 뷰
  - [ ] 상세 뷰
  - [ ] Dialog 폼

- [ ] **OrderManagement** (수주관리)
- [ ] **ProductionManagement** (생산관리)
- [ ] **InventoryManagement** (재고관리)
- [ ] **QualityManagement** (품질관리)
- [ ] **EmployeeManagement** (인사관리)
- [ ] **EquipmentManagement** (설비관리)
- [ ] **BOMManagement** (BOM관리)
- [ ] **CostManagement** (원가관리)
- [ ] **AccountingManagement** (회계관리)
- [ ] **ApprovalManagement** (결재관리)

## 최종 목표

1. **완벽한 가독성:** 모든 텍스트가 WCAG AAA 기준 충족
2. **일관된 색상:** 같은 용도는 같은 색상
3. **직관적 구분:** 상태/타입 구분이 명확
4. **매끄러운 전환:** 라이트↔다크 전환 시 어색함 없음
5. **유지보수성:** 새 컴포넌트도 쉽게 적용 가능

## 다음 단계

1. ItemManagement 주요 섹션 수정
2. 다크모드 스크린샷 캡처 및 검증
3. 나머지 11개 모듈 순차 적용
4. 전체 모듈 크로스 체크
5. 가이드 문서 최종 업데이트
