sam-design/src/DARK_MODE_FIX_GUIDE.md

다크모드 일관성 가이드

다크모드 색상 원칙

1. 가독성 우선

• 텍스트는 충분한 대비(4.5:1 이상)
• 라이트모드: 어두운 텍스트 on 밝은 배경
• 다크모드: 밝은 텍스트 on 어두운 배경

2. 일관성 유지

• 같은 용도의 색상은 같은 클래스 사용
• 모든 배경색에 dark: variant 추가
• 모든 텍스트색에 dark: variant 추가
• 모든 테두리색에 dark: variant 추가

표준 색상 매핑

Background (배경)

// ❌ 잘못된 예
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 (텍스트)

// ❌ 잘못된 예
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 (테두리)

// ❌ 잘못된 예
className="border-gray-200"
className="border-gray-300"

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

컴포넌트별 표준 패턴

Card

// 기본 카드
<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

// 회색 배지
<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

// 테이블 행
<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>

모바일 카드

<div className="border rounded-lg p-4 bg-white dark:bg-card hover:bg-muted/50 transition-colors">
  ...
</div>

미리보기 영역

<div className="p-4 border rounded-lg bg-gray-50 dark:bg-muted">
  ...
</div>

빈 상태

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

색상별 다크모드 매핑

Purple (보라색 - 품목관리)

// 배경
"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 (파란색 - 견적/수주)

// 배경
"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 (초록색 - 생산/품질)

// 배경
"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 (빨간색 - 경고/오류)

// 배경
"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 (회색 - 기본/비활성)

// 배경
"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단계: 단순 배경

# 찾기
bg-white[^-]

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

2단계: 회색 배경

# 찾기
bg-gray-50[^-]

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

3단계: 회색 텍스트

# 찾기
text-gray-700[^-]

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

4단계: 회색 테두리

# 찾기
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