sam-design/src/DARK_MODE_FIX_GUIDE.md

# 다크모드 일관성 가이드

## 다크모드 색상 원칙

### 1. 가독성 우선
- 텍스트는 충분한 대비(4.5:1 이상)
- 라이트모드: 어두운 텍스트 on 밝은 배경
- 다크모드: 밝은 텍스트 on 어두운 배경

### 2. 일관성 유지
- 같은 용도의 색상은 같은 클래스 사용
- 모든 배경색에 dark: variant 추가
- 모든 텍스트색에 dark: variant 추가
- 모든 테두리색에 dark: variant 추가

## 표준 색상 매핑

### Background (배경)
```tsx
// ❌ 잘못된 예
className="bg-white"
className="bg-gray-50"

// ✅ 올바른 예
className="bg-card"
className="bg-background"
className="bg-muted"
className="bg-white dark:bg-card"
className="bg-gray-50 dark:bg-muted"
```

### Text (텍스트)
```tsx
// ❌ 잘못된 예
className="text-black"
className="text-gray-900"
className="text-gray-700"

// ✅ 올바른 예
className="text-foreground"
className="text-card-foreground"
className="text-muted-foreground"
className="text-gray-900 dark:text-gray-100"
className="text-gray-700 dark:text-gray-300"
```

### Border (테두리)
```tsx
// ❌ 잘못된 예
className="border-gray-200"
className="border-gray-300"

// ✅ 올바른 예
className="border-border"
className="border-gray-200 dark:border-gray-700"
```

## 컴포넌트별 표준 패턴

### Card
```tsx
// 기본 카드
<Card className="bg-card dark:bg-card">
  <CardContent className="text-card-foreground">
    내용
  </CardContent>
</Card>

// 강조 카드
<Card className="bg-white dark:bg-muted border-purple-200 dark:border-purple-800">
  ...
</Card>
```

### Badge
```tsx
// 회색 배지
<Badge className="bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700">
  텍스트
</Badge>

// 컬러 배지
<Badge className="bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800">
  텍스트
</Badge>
```

### Table
```tsx
// 테이블 행
<TableRow className="bg-white dark:bg-card hover:bg-muted/50">
  <TableCell className="text-foreground">내용</TableCell>
</TableRow>

// 헤더 행
<TableRow className="bg-gray-50 dark:bg-muted">
  <TableHead className="text-muted-foreground">헤더</TableHead>
</TableRow>
```

### 모바일 카드
```tsx
<div className="border rounded-lg p-4 bg-white dark:bg-card hover:bg-muted/50 transition-colors">
  ...
</div>
```

### 미리보기 영역
```tsx
<div className="p-4 border rounded-lg bg-gray-50 dark:bg-muted">
  ...
</div>
```

### 빈 상태
```tsx
<div className="text-center py-8 text-muted-foreground border rounded-lg bg-gray-50 dark:bg-muted">
  데이터 없음
</div>
```

## 색상별 다크모드 매핑

### Purple (보라색 - 품목관리)
```tsx
// 배경
"bg-purple-50 dark:bg-purple-900/30"
"bg-purple-100 dark:bg-purple-900/40"

// 텍스트
"text-purple-700 dark:text-purple-300"
"text-purple-900 dark:text-purple-100"

// 테두리
"border-purple-200 dark:border-purple-800"
```

### Blue (파란색 - 견적/수주)
```tsx
// 배경
"bg-blue-50 dark:bg-blue-900/30"
"bg-blue-100 dark:bg-blue-900/40"

// 텍스트
"text-blue-700 dark:text-blue-300"
"text-blue-900 dark:text-blue-100"

// 테두리
"border-blue-200 dark:border-blue-800"
```

### Green (초록색 - 생산/품질)
```tsx
// 배경
"bg-green-50 dark:bg-green-900/30"
"bg-green-100 dark:bg-green-900/40"

// 텍스트
"text-green-700 dark:text-green-300"
"text-green-900 dark:text-green-100"

// 테두리
"border-green-200 dark:border-green-800"
```

### Red (빨간색 - 경고/오류)
```tsx
// 배경
"bg-red-50 dark:bg-red-900/30"
"bg-red-100 dark:bg-red-900/40"

// 텍스트
"text-red-700 dark:text-red-300"
"text-red-900 dark:text-red-100"

// 테두리
"border-red-200 dark:border-red-800"
```

### Gray (회색 - 기본/비활성)
```tsx
// 배경
"bg-gray-50 dark:bg-gray-800"
"bg-gray-100 dark:bg-gray-700"

// 텍스트
"text-gray-700 dark:text-gray-300"
"text-gray-900 dark:text-gray-100"

// 테두리
"border-gray-200 dark:border-gray-700"
```

## 자동 변환 규칙

### 1단계: 단순 배경
```bash
# 찾기
bg-white[^-]

# 바꾸기
bg-white dark:bg-card
```

### 2단계: 회색 배경
```bash
# 찾기
bg-gray-50[^-]

# 바꾸기
bg-gray-50 dark:bg-muted
```

### 3단계: 회색 텍스트
```bash
# 찾기
text-gray-700[^-]

# 바꾸기
text-gray-700 dark:text-gray-300
```

### 4단계: 회색 테두리
```bash
# 찾기
border-gray-200[^-]

# 바꾸기
border-gray-200 dark:border-gray-700
```

## 체크리스트

각 페이지 다크모드 확인:

- [ ] 배경색 가독성 확인
- [ ] 텍스트 대비 확인 (4.5:1 이상)
- [ ] 테두리 가시성 확인
- [ ] 호버 효과 가독성 확인
- [ ] Badge 가독성 확인
- [ ] Table 가독성 확인
- [ ] Card 가독성 확인
- [ ] 버튼 가독성 확인
- [ ] Input 가독성 확인
- [ ] Dialog/Modal 가독성 확인

## 주의사항

### 1. !important 사용 금지
globals.css에 이미 정의된 경우를 제외하고 !important 사용하지 않기

### 2. 인라인 스타일 지양
가능하면 Tailwind 클래스 사용

### 3. 일관성 유지
같은 용도의 컴포넌트는 같은 색상 패턴 사용

### 4. 테스트
라이트모드와 다크모드 모두에서 테스트

## 빠른 수정 스니펫

### VSCode 정규식 찾기/바꾸기

1. **bg-white 수정**
   - 찾기: `className="([^"]*?)bg-white([^-])`
   - 바꾸기: `className="$1bg-white dark:bg-card$2`

2. **bg-gray-50 수정**
   - 찾기: `className="([^"]*?)bg-gray-50([^-])`
   - 바꾸기: `className="$1bg-gray-50 dark:bg-muted$2`

3. **text-gray-700 수정**
   - 찾기: `className="([^"]*?)text-gray-700([^-])`
   - 바꾸기: `className="$1text-gray-700 dark:text-gray-300$2`

4. **border-gray-200 수정**
   - 찾기: `className="([^"]*?)border-gray-200([^-])`
   - 바꾸기: `className="$1border-gray-200 dark:border-gray-700$2`