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 스타일)

// 하드코딩된 색상값
Color(0xFF3B82F6) // blue-500
Color(0xFFF3F4F6) // gray-100

새로운 (shadcn/ui 스타일)

// 의미론적 색상 변수
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 변경

   // 기존
   import '../common/app_layout.dart';
   
   // 새로운
   import '../common/app_layout_redesign.dart';
   import '../common/theme_shadcn.dart';
   import '../common/components/shadcn_components.dart';
   

2. 위젯 구조

   // 표준 구조
   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