프로젝트 초기 설정 및 구조 추가
- Vite + React 프로젝트 구조 설정 - 불필요한 PDF 파일 삭제 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
정재웅
279
src/DARK_MODE_FIX_GUIDE.md
Normal file
279
src/DARK_MODE_FIX_GUIDE.md
Normal file
@@ -0,0 +1,279 @@
|
||||
# 다크모드 일관성 가이드
|
||||
|
||||
## 다크모드 색상 원칙
|
||||
|
||||
### 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`
|
||||
Reference in New Issue
Block a user