superport/.claude/ui_redesign_status.md

# UI 리디자인 현황 분석

## 1. 리디자인 진행 상황 요약

### 1.1 완료된 리디자인 파일
| 기존 파일 | 리디자인 파일 | 상태 |
|-----------|--------------|------|
| `app_layout.dart` | `app_layout_redesign.dart` | ✅ 완료 |
| `login_view.dart` | `login_view_redesign.dart` | ✅ 완료 |
| `overview_screen.dart` | `overview_screen_redesign.dart` | ✅ 완료 |
| `company_list.dart` | `company_list_redesign.dart` | ✅ 완료 |
| `equipment_list.dart` | `equipment_list_redesign.dart` | ✅ 완료 |
| `license_list.dart` | `license_list_redesign.dart` | ✅ 완료 |
| `user_list.dart` | `user_list_redesign.dart` | ✅ 완료 |
| `warehouse_location_list.dart` | `warehouse_location_list_redesign.dart` | ✅ 완료 |

### 1.2 새로 추가된 파일
- `theme_shadcn.dart` - shadcn/ui 테마 시스템
- `components/shadcn_components.dart` - 재사용 가능한 UI 컴포넌트

### 1.3 미완료 리디자인 (Form 화면들)
| 기존 파일 | 예상 리디자인 파일명 | 상태 |
|-----------|---------------------|------|
| `company_form_screen.dart` | `company_form_screen_redesign.dart` | ❌ 미완료 |
| `equipment_in_form_screen.dart` | `equipment_in_form_screen_redesign.dart` | ❌ 미완료 |
| `equipment_out_form_screen.dart` | `equipment_out_form_screen_redesign.dart` | ❌ 미완료 |
| `user_form_screen.dart` | `user_form_screen_redesign.dart` | ❌ 미완료 |
| `maintenance_form_screen.dart` | `maintenance_form_screen_redesign.dart` | ❌ 미완료 |
| `warehouse_location_form_screen.dart` | `warehouse_location_form_screen_redesign.dart` | ❌ 미완료 |

## 2. 디자인 시스템 변경사항

### 2.1 색상 체계 변경
#### 기존 (Tailwind 스타일)
```dart
// 하드코딩된 색상값
Color(0xFF3B82F6) // blue-500
Color(0xFFF3F4F6) // gray-100
```

#### 새로운 (shadcn/ui 스타일)
```dart
// 의미론적 색상 변수
ShadcnTheme.primary
ShadcnTheme.secondary
ShadcnTheme.muted
```

### 2.2 컴포넌트 표준화
#### 기존
- 각 화면마다 커스텀 위젯 구현
- 일관성 없는 스타일링

#### 새로운
- `ShadcnCard`, `ShadcnButton`, `ShadcnInput` 등 표준 컴포넌트
- 일관된 디자인 언어

### 2.3 레이아웃 구조 개선
#### 기존
- 단순한 사이드바 + 컨텐츠 구조
- 고정된 레이아웃

#### 새로운
- 헤더 + 접을 수 있는 사이드바 + 브레드크럼 + 컨텐츠
- Microsoft Dynamics 365 스타일
- 애니메이션 전환 효과

## 3. 주요 개선사항

### 3.1 사용자 경험(UX)
1. **네비게이션 개선**
   - 브레드크럼으로 현재 위치 명확히 표시
   - 사이드바 접기/펼치기로 작업 공간 확대

2. **시각적 피드백**
   - 호버/포커스 상태 명확한 표시
   - 로딩 상태 표시
   - 빈 상태 UI 제공

3. **일관성**
   - 모든 화면에서 동일한 레이아웃 구조
   - 표준화된 버튼, 입력 필드, 카드 디자인

### 3.2 기술적 개선
1. **컴포넌트 재사용성**
   - 공통 컴포넌트 라이브러리 구축
   - 코드 중복 제거

2. **유지보수성**
   - 테마 시스템으로 스타일 중앙 관리
   - 명확한 파일 구조

3. **확장성**
   - 다크 모드 지원 준비
   - 반응형 디자인 기반 마련

## 4. 리디자인 패턴 분석

### 4.1 파일 구조 패턴
```
기존파일명.dart → 기존파일명_redesign.dart
```

### 4.2 코드 구조 패턴
1. **Import 변경**
   ```dart
   // 기존
   import '../common/app_layout.dart';
   
   // 새로운
   import '../common/app_layout_redesign.dart';
   import '../common/theme_shadcn.dart';
   import '../common/components/shadcn_components.dart';
   ```

2. **위젯 구조**
   ```dart
   // 표준 구조
   AppLayoutRedesign(
     currentRoute: Routes.화면명,
     child: Column(
       children: [
         // 헤더 영역
         Row(...),
         // 컨텐츠 영역
         Expanded(
           child: ShadcnCard(...),
         ),
       ],
     ),
   )
   ```

### 4.3 스타일링 패턴
- 인라인 스타일 대신 테마 시스템 사용
- 하드코딩된 값 대신 테마 상수 사용
- 일관된 spacing, padding, margin 적용

## 5. 향후 작업 계획

### 5.1 즉시 필요한 작업
1. **Form 화면 리디자인**
   - 6개의 Form 화면 리디자인 필요
   - ShadcnInput 컴포넌트 활용
   - 일관된 레이아웃 적용

2. **라우팅 업데이트**
   - 모든 라우트가 리디자인 화면을 가리키도록 수정
   - 기존 화면 제거 또는 백업

### 5.2 추가 개선사항
1. **폼 유효성 검사 UI**
   - 에러 메시지 표시 개선
   - 실시간 유효성 검사 피드백

2. **로딩/에러 상태**
   - 스켈레톤 로더 추가
   - 에러 바운더리 구현

3. **접근성**
   - 키보드 네비게이션 개선
   - 스크린 리더 지원

## 6. 기술 부채 및 리스크

### 6.1 현재 이슈
1. **코드 중복**
   - 기존 파일과 리디자인 파일 공존
   - 유지보수 복잡도 증가

2. **일관성 리스크**
   - 일부는 기존 UI, 일부는 새 UI 사용
   - 사용자 혼란 가능성

### 6.2 해결 방안
1. **단계적 마이그레이션**
   - Form 화면 리디자인 완료
   - 기존 파일 제거
   - 파일명에서 '_redesign' 제거

2. **테스트**
   - UI 테스트 추가
   - 사용자 피드백 수집

---

*마지막 업데이트: 2025-07-07*